docbrown/app/views/users/_customization.html.erb

<%= javascript_packs_with_chunks_tag "stickySaveFooter", defer: true %>

<%= form_for @user, html: { id: "ux-customization-form", class: "sticky-footer-form" } do |f| %>
  <%= f.hidden_field :tab, value: @tab, id: nil %>

  <div class="crayons-card crayons-card--content-rows">
    <h2 class="crayons-subtitle-1">
      Appearance
    </h2>

    <fieldset class="crayons-field">
      <legend class="crayons-field__label">Site Theme</legend>
      <div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
        <% %w[default night_theme minimal_light_theme pink_theme ten_x_hacker_theme].each do |theme| %>
          <%= render partial: "theme_selector", locals: { f: f, theme: theme } %>
        <% end %>
      </div>
    </fieldset>

    <div class="crayons-field">
      <%= f.label :config_font, "Base Reading Font", class: "crayons-field__label" %>
      <div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
        <% User::FONTS.each do |font| %>
          <%= render partial: "font_selector", locals: { f: f, font: font } %>
        <% end %>
      </div>
    </div>

    <div class="crayons-field">
      <%= f.label :config_navbar, "Site Navbar", class: "crayons-field__label" %>
      <div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
        <% %w[default static].each do |navbar| %>
          <%= render partial: "navbar_selector", locals: { f: f, navbar: navbar } %>
        <% end %>
      </div>
    </div>
  </div>

  <div class="crayons-card crayons-card--content-rows">
    <h2 class="crayons-subtitle-1">
      Writing
    </h2>
    <div class="crayons-field">
      <%= f.label :editor_version, "Editor Version", class: "crayons-field__label" %>
      <div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
        <% %w[v1 v2].each do |version| %>
          <%= render partial: "editor_selector", locals: { f: f, version: version } %>
        <% end %>
      </div>
    </div>
  </div>

  <div class="crayons-card crayons-card--content-rows">
    <h2 class="crayons-subtitle-1">
      Content
    </h2>
    <div class="crayons-field">
      <%= f.label :experience_level, "What is your approximate experience level (1-5)?", class: "crayons-field__label" %>
      <div class="theme-selector-field grid grid-cols-5">
        <% user_experience_levels.each_with_index do |exp, i| %>
          <%= render partial: "experience_selector", locals: { f: f, exp: exp, i: i, label: user_experience_labels } %>
        <% end %>
      </div>
      <p>
        This will not be displayed on your profile or anywhere publicly. It helps gently determine what content you are
        shown along with tags you follow etc.
      </p>
    </div>
  </div>

  <div class="crayons-card crayons-card--content-rows">
    <header>
      <h2 class="crayons-subtitle-1">
        Sponsors
      </h2>
      <p>
        You have the option to remove sponsor messaging (where it is practical
        to do so). Our wonderful sponsors help sustain the platform and improve
        your experience, and we strive to make their presence constructive to
        the community, but feel free to use this setting if you wish.
      </p>
    </header>

    <fieldset class="grid gap-4">
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :display_sponsors, class: "crayons-checkbox" %>
        <%= f.label :display_sponsors, "Display Sponsors (When browsing)", class: "crayons-field__label" %>
      </div>

      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :permit_adjacent_sponsors, class: "crayons-checkbox" %>
        <%= f.label :permit_adjacent_sponsors, "Permit Nearby Sponsors (When publishing)", class: "crayons-field__label" %>
      </div>
    </fieldset>
  </div>

  <div class="crayons-card crayons-card--content-rows">
    <header>
      <h2 class="crayons-subtitle-1">
        Announcements
      </h2>
      <p>
        Announcements inform you on important site-wide
        information, like updates and events.
      </p>
    </header>

    <fieldset class="grid gap-4">
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :display_announcements, class: "crayons-checkbox" %>
        <%= f.label :display_announcements, "Display Announcements (When browsing)", class: "crayons-field__label" %>
      </div>
    </fieldset>
  </div>

  <div class="save-footer crayons-card crayons-card--content-rows">
    <button class="crayons-btn" type="submit">Save</button>
  </div>
<% end %>