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

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

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

  <div class="crayons-card crayons-card--content-rows">
    <h2 class="crayons-subtitle-1">
      <%= t("views.settings.custom.appearance") %>
    </h2>

    <fieldset class="crayons-field">
      <legend class="crayons-field__label"><%= t("views.settings.custom.theme") %></legend>
      <div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
        <%# This is temporary while we're migrating themes %>
        <% %w[light_theme dark_theme].each do |theme| %>
          <%= render partial: "theme_selector", locals: { f: f, theme: theme } %>
        <% end %>
      </div>
    </fieldset>

    <div class="crayons-field">
      <%= f.label :config_font, t("views.settings.custom.font"), class: "crayons-field__label" %>
      <div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
        <% Users::Setting.config_fonts.keys.each do |font| %>
          <%= render partial: "font_selector", locals: { f: f, font: font } %>
        <% end %>
      </div>
    </div>

    <div class="crayons-field">
      <%= f.label :config_navbar, t("views.settings.custom.navbar"), class: "crayons-field__label" %>
      <div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
        <% Users::Setting.config_navbars.keys.each do |navbar| %>
          <%= render partial: "navbar_selector", locals: { f: f, navbar: navbar } %>
        <% end %>
      </div>
    </div>
  </div>

  <% if policy(Article).has_existing_articles_or_can_create_new_ones? %>
  <div class="crayons-card crayons-card--content-rows">
    <h2 class="crayons-subtitle-1">
      <%= t("views.settings.custom.writing") %>
    </h2>
    <div class="crayons-field">
      <%= f.label :editor_version, t("views.settings.custom.editor"), class: "crayons-field__label" %>
      <div class="theme-selector-field grid gap-4 grid-cols-2 l:grid-cols-3">
        <% Users::Setting.editor_versions.keys.each do |version| %>
          <%= render partial: "editor_selector", locals: { f: f, version: version } %>
        <% end %>
      </div>
    </div>
  </div>
  <% end %>

  <div class="crayons-card crayons-card--content-rows">
    <h2 class="crayons-subtitle-1">
      <%= t("views.settings.custom.content") %>
    </h2>
    <div class="crayons-field">
      <%= f.label :experience_level, t("views.settings.custom.level"), 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>
        <%= t("views.settings.custom.level_desc") %>
      </p>
    </div>
  </div>
  <div id="sponsors" class="crayons-card crayons-card--content-rows">
    <header>
      <h2 class="crayons-subtitle-1">
        <%= t("views.settings.custom.sponsor") %>
      </h2>
      <p>
        <%= t("views.settings.custom.sponsor_desc_html") %>
      </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, t("views.settings.custom.sponsor_field"), 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, t("views.settings.custom.adjacent"), class: "crayons-field__label" %>
      </div>
    </fieldset>
  </div>

  <div class="crayons-card crayons-card--content-rows">
    <header>
      <h2 class="crayons-subtitle-1">
        <%= t("views.settings.custom.announce") %>
      </h2>
      <p>
        <%= t("views.settings.custom.announce_desc") %>
      </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, t("views.settings.custom.announce_field"), class: "crayons-field__label" %>
      </div>
    </fieldset>
  </div>

  <div class="save-footer crayons-card crayons-card--content-rows">
    <button class="crayons-btn" type="submit"><%= t("views.settings.custom.save") %></button>
  </div>
<% end %>