ruby_cms 0.1.1 → 0.1.3

data/app/components/ruby_cms/admin/bulk_action_table/bulk_action_table_checkbox_cell.rb

@@ -19,20 +19,22 @@ module RubyCms
         end
 
         def view_template
-          td(class: "w-12 px-6 py-3",
+          td(class: "w-10 px-4 py-3",
              data: { action: "click->#{@controller_name}#stopPropagation" }) do
-            input(
-              type: "checkbox",
-              role: "checkbox",
-              value: @item_id,
-              class: "h-4 w-4 rounded border-gray-300 text-teal-600 focus:ring-teal-200",
-              data: {
-                "#{@controller_name}-target": "itemCheckbox",
-                item_id: @item_id,
-                action: "change->#{@controller_name}#updateSelection"
-              },
-              aria_label: "Select row"
-            )
+            div(class: "inline-flex items-center justify-center") do
+              input(
+                type: "checkbox",
+                role: "checkbox",
+                value: @item_id,
+                class: "size-4 rounded border-border/80 text-primary focus:ring-primary/30 focus:ring-offset-0 cursor-pointer transition-colors",
+                data: {
+                  "#{@controller_name}-target": "itemCheckbox",
+                  item_id: @item_id,
+                  action: "change->#{@controller_name}#updateSelection"
+                },
+                aria_label: "Select row"
+              )
+            end
           end
         end
       end

data/app/components/ruby_cms/admin/bulk_action_table/bulk_action_table_checkbox_head.rb

@@ -14,17 +14,19 @@ module RubyCms
         end
 
         def view_template
-          th(class: "w-12 px-6 py-3") do
-            input(
-              type: "checkbox",
-              role: "checkbox",
-              class: "h-4 w-4 rounded border-gray-300 text-teal-600 focus:ring-teal-200",
-              data: {
-                "#{@controller_name}-target": "selectAllCheckbox",
-                action: "change->#{@controller_name}#toggleSelectAll"
-              },
-              aria_label: "Select all"
-            )
+          th(class: "w-10 px-4 py-3") do
+            div(class: "inline-flex items-center justify-center") do
+              input(
+                type: "checkbox",
+                role: "checkbox",
+                class: "size-4 rounded border-border/80 text-primary focus:ring-primary/30 focus:ring-offset-0 cursor-pointer transition-colors",
+                data: {
+                  "#{@controller_name}-target": "selectAllCheckbox",
+                  action: "change->#{@controller_name}#toggleSelectAll"
+                },
+                aria_label: "Select all"
+              )
+            end
           end
         end
       end

data/app/components/ruby_cms/admin/bulk_action_table/bulk_action_table_delete_modal.rb

@@ -63,7 +63,7 @@ module RubyCms
 
         def dialog_content_attributes
           {
-            class: "w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 shadow-lg",
+            class: "w-full max-w-md rounded-xl border border-border/60 bg-white p-6 shadow-lg ring-1 ring-black/[0.03]",
             data: {
               "#{@controller_name}-target": "dialogContent"
             },
@@ -74,8 +74,8 @@ module RubyCms
         def render_close_button
           button(
             type: "button",
-            class: "inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 " \
-                   "hover:bg-gray-100 hover:text-gray-900 transition-colors",
+            class: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground " \
+                   "hover:bg-muted hover:text-foreground transition-colors",
             data: {
               action: "click->#{@controller_name}#closeDialog"
             },
@@ -119,7 +119,7 @@ module RubyCms
         def render_header
           h3(
             id: "dialog-title",
-            class: "text-base font-semibold text-gray-900",
+            class: "text-base font-semibold text-foreground",
             data: {
               "#{@controller_name}-target": "dialogTitle"
             }
@@ -128,7 +128,7 @@ module RubyCms
 
         def render_message
           div(
-            class: "mt-3 text-sm text-gray-600 space-y-1",
+            class: "mt-3 text-sm text-muted-foreground space-y-1",
             data: {
               "#{@controller_name}-target": "dialogMessage"
             }
@@ -149,8 +149,8 @@ module RubyCms
           button(
             type: "button",
             class: "inline-flex h-9 items-center justify-center rounded-md border " \
-                   "border-gray-200 bg-white px-4 text-sm font-medium text-gray-900 " \
-                   "shadow-sm hover:bg-gray-50 transition-colors",
+                   "border-border bg-white px-4 text-sm font-medium text-foreground " \
+                   "shadow-sm hover:bg-muted transition-colors",
             data: {
               action: "click->#{@controller_name}#closeDialog"
             }
@@ -160,8 +160,8 @@ module RubyCms
         def render_confirm_button
           button(
             type: "button",
-            class: "inline-flex h-9 items-center justify-center rounded-md bg-rose-600 px-4 " \
-                   "text-sm font-medium text-white shadow-sm hover:bg-rose-700 transition-colors",
+            class: "inline-flex h-9 items-center justify-center rounded-md bg-destructive px-4 " \
+                   "text-sm font-medium text-destructive-foreground shadow-sm hover:bg-destructive/90 transition-colors",
             data: {
               "#{@controller_name}-target": "dialogConfirmButton",
               action: "click->#{@controller_name}#confirmAction"

data/app/components/ruby_cms/admin/bulk_action_table/bulk_action_table_header.rb

@@ -22,7 +22,7 @@ module RubyCms
         end
 
         def view_template
-          thead(class: "bg-gray-50") do
+          thead(class: "sticky top-0 z-20 bg-muted/40 [&_tr]:border-b [&_tr]:border-border/60") do
             tr do
               render_bulk_checkbox_header
               render_table_headers
@@ -51,7 +51,7 @@ module RubyCms
         end
 
         def th_base_classes
-          "px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500"
+          "px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground"
         end
       end
     end

data/app/components/ruby_cms/admin/bulk_action_table/bulk_action_table_header_bar.rb

@@ -31,7 +31,7 @@ module RubyCms
         end
 
         def view_template
-          div(class: "px-6 py-4 border-b border-gray-200/80 bg-white") do
+          div(class: "px-5 py-3 border-b border-border/60 bg-white") do
             div(class: "flex flex-wrap items-center justify-between gap-4") do
               render_title_group if @title.present?
               div(class: "flex items-center gap-2 flex-wrap") do
@@ -47,7 +47,7 @@ module RubyCms
 
         def render_title_group
           div(class: "min-w-0") do
-            h2(class: "text-sm font-semibold text-gray-900") { @title }
+            h2(class: "text-sm font-semibold text-foreground") { @title }
           end
         end
 
@@ -88,7 +88,7 @@ module RubyCms
         end
 
         def render_search_icon
-          span(class: "absolute left-3 text-gray-400 pointer-events-none") do
+          span(class: "absolute left-3 text-muted-foreground pointer-events-none") do
             svg(class: "h-4 w-4", fill: "none", stroke: "currentColor",
                 viewBox: "0 0 24 24") do |s|
               s.path(
@@ -106,8 +106,8 @@ module RubyCms
             type: "search",
             name: @search_param,
             placeholder: "Search",
-            class: "h-9 w-full sm:w-72 rounded-md border border-gray-200 bg-white pl-9 " \
-                   "pr-3 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-200",
+            class: "h-9 w-full sm:w-72 rounded-md border border-border bg-white pl-9 " \
+                   "pr-3 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20",
             value: search_value,
             data: { action: "input->turbo-frame#submit" }
           )
@@ -125,15 +125,15 @@ module RubyCms
           {
             "blue" => "text-blue-600 hover:bg-blue-50",
             "green" => "text-emerald-600 hover:bg-emerald-50",
-            "red" => "text-rose-600 hover:bg-rose-50",
+            "red" => "text-destructive hover:bg-destructive/10",
             "purple" => "text-violet-600 hover:bg-violet-50",
-            "gray" => "text-gray-700 hover:bg-gray-50",
+            "gray" => "text-muted-foreground hover:bg-muted",
             "teal" => "text-teal-600 hover:bg-teal-50"
           }
         end
 
         def icon_button_base_classes
-          "inline-flex items-center justify-center h-9 w-9 rounded-md border border-gray-200 " \
+          "inline-flex items-center justify-center size-9 rounded-md border border-border " \
             "bg-white shadow-sm transition-colors"
         end
 

data/app/components/ruby_cms/admin/bulk_action_table/bulk_action_table_pagination.rb

@@ -24,7 +24,7 @@ module RubyCms
         def view_template
           return unless @pagination[:total_pages] && @pagination[:total_pages] > 1
 
-          div(class: "px-6 py-3 flex items-center justify-between gap-4") do
+          div(class: "px-5 py-3 flex items-center justify-between gap-4 bg-muted/30") do
             render_pagination_info
             render_pagination_controls
           end
@@ -35,7 +35,7 @@ module RubyCms
         def render_pagination_info
           return unless @pagination[:start_item] && @pagination[:end_item] && @pagination[:total_count]
 
-          div(class: "text-sm text-gray-500") { pagination_info_text }
+          div(class: "text-xs text-muted-foreground tabular-nums") { pagination_info_text }
         end
 
         def pagination_info_text
@@ -75,14 +75,14 @@ module RubyCms
         end
 
         def pagination_button_classes
-          "inline-flex h-9 items-center justify-center rounded-md border border-gray-200 " \
-            "bg-white px-3 text-sm font-medium text-gray-900 shadow-sm hover:bg-gray-50 " \
+          "inline-flex h-8 items-center justify-center rounded-md border border-border " \
+            "bg-white px-3 text-xs font-medium text-foreground shadow-sm hover:bg-muted " \
             "transition-colors"
         end
 
         def pagination_button_disabled_classes
-          "inline-flex h-9 items-center justify-center rounded-md border border-gray-200 " \
-            "bg-white px-3 text-sm font-medium text-gray-400 opacity-60 cursor-not-allowed"
+          "inline-flex h-8 items-center justify-center rounded-md border border-border " \
+            "bg-white px-3 text-xs font-medium text-muted-foreground opacity-50 cursor-not-allowed"
         end
 
         def render_next_button
@@ -127,7 +127,7 @@ module RubyCms
         end
 
         def render_ellipsis
-          span(class: "px-2 text-sm text-gray-500") { "…" }
+          span(class: "px-2 py-1.5 text-xs font-medium text-muted-foreground select-none") { "…" }
         end
 
         def render_current_page(page_num)
@@ -144,8 +144,8 @@ module RubyCms
         end
 
         def current_page_classes
-          "inline-flex h-9 items-center justify-center rounded-md border border-gray-200 " \
-            "bg-gray-900 px-3 text-sm font-medium text-white shadow-sm"
+          "inline-flex h-8 items-center justify-center rounded-md border border-primary " \
+            "bg-primary px-3 text-xs font-medium text-primary-foreground shadow-sm pointer-events-none"
         end
 
         def calculate_pages_to_show(current_page, total_pages)

data/app/components/ruby_cms/admin/bulk_action_table/bulk_action_table_row.rb

@@ -73,7 +73,7 @@ module RubyCms
         end
 
         def build_row_classes
-          classes = ["hover:bg-gray-50 transition-colors"]
+          classes = ["border-b border-border/40 hover:bg-muted/50 transition-colors"]
           classes << @row_class if @row_class
           classes << "cursor-pointer" if @click_url
           build_classes(classes)
@@ -84,9 +84,8 @@ module RubyCms
           attrs[:item_id] = @data[:item_id] if @data[:item_id]
 
           if @click_url
-            attrs[:controller] = "clickable-row"
-            attrs[:clickable_row_click_url_value] = @click_url
-            attrs[:action] = "click->clickable-row#navigate"
+            attrs[:click_url] = @click_url
+            attrs[:action] = "click->#{@controller_name}#rowClick"
           end
 
           attrs

data/app/components/ruby_cms/admin/bulk_action_table/bulk_actions.rb

@@ -26,15 +26,12 @@ module RubyCms
 
         def view_template
           div(
-            class: "hidden px-6 py-3",
+            class: "hidden bg-primary/5 border-t border-border/60 px-5 py-3 backdrop-blur-sm",
             data: {
               "#{@controller_name}-target": "bulkBar"
             }
           ) do
-            div(
-              class: "flex items-center justify-between gap-3 rounded-lg border " \
-                     "border-gray-200/80 bg-white px-4 py-3 shadow-sm"
-            ) do
+            div(class: "flex items-center justify-between gap-4 max-w-full") do
               render_selection_info
               render_action_buttons
             end
@@ -44,35 +41,52 @@ module RubyCms
         private
 
         def render_selection_info
-          div(class: "flex items-center gap-3 flex-wrap") do
+          div(class: "flex items-center gap-3") do
+            render_selection_left
+            div(class: "h-4 w-px bg-border/60")
+            render_selection_buttons
+          end
+        end
+
+        def render_selection_left
+          div(class: "flex items-center gap-2") do
+            render_selected_count_badge
+            span(class: "text-sm font-medium text-foreground") { "selected" }
+          end
+        end
+
+        def render_selected_count_badge
+          div(class: "size-6 rounded-full bg-primary/10 flex items-center justify-center") do
             span(
-              class: "text-sm font-medium text-gray-700",
+              class: "text-xs font-bold text-primary tabular-nums",
               data: {
                 "#{@controller_name}-target": "selectedCount"
               }
-            ) { "0 #{@item_name}s selected:" }
-            button(
-              type: "button",
-              class: "text-sm font-medium text-gray-600 hover:text-gray-900 hover:underline " \
-                     "transition-colors",
-              data: {
-                "#{@controller_name}-target": "selectAllButton",
-                action: "click->#{@controller_name}#selectAll"
-              }
-            ) { "Select all" }
-            button(
-              type: "button",
-              class: "text-sm font-medium text-gray-600 hover:text-gray-900 hover:underline " \
-                     "transition-colors",
-              data: {
-                action: "click->#{@controller_name}#clearSelection"
-              }
-            ) { "Clear selection" }
+            ) { "0" }
           end
         end
 
+        def render_selection_buttons
+          button(
+            type: "button",
+            class: "text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+            data: {
+              "#{@controller_name}-target": "selectAllButton",
+              action: "click->#{@controller_name}#selectAll"
+            }
+          ) { "Select all" }
+
+          button(
+            type: "button",
+            class: "text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
+            data: {
+              action: "click->#{@controller_name}#clearSelection"
+            }
+          ) { "Clear" }
+        end
+
         def render_action_buttons
-          div(class: "flex items-center gap-2 flex-wrap") do
+          div(class: "flex items-center gap-2") do
             @bulk_action_buttons.each do |button_config|
               render_custom_action_button(button_config)
             end
@@ -93,9 +107,9 @@ module RubyCms
         end
 
         def build_button_class(config)
-          base = "inline-flex items-center justify-center rounded-md border border-gray-200 " \
-                 "bg-white px-3 py-2 text-sm font-medium text-gray-900 shadow-sm " \
-                 "hover:bg-gray-50 transition-colors"
+          base = "inline-flex items-center justify-center rounded-md border border-border " \
+                 "bg-white px-3 py-1.5 text-sm font-medium text-foreground shadow-sm " \
+                 "hover:bg-muted transition-colors"
           config[:class].present? ? "#{base} #{config[:class]}" : base
         end
 
@@ -118,9 +132,9 @@ module RubyCms
         def render_delete_button
           button(
             type: "button",
-            class: "inline-flex items-center justify-center rounded-md border border-rose-200 " \
-                   "bg-white px-3 py-2 text-sm font-medium text-rose-700 shadow-sm " \
-                   "hover:bg-rose-50 transition-colors",
+            class: "inline-flex items-center justify-center rounded-md border border-destructive/30 " \
+                   "bg-white px-3 py-1.5 text-sm font-medium text-destructive shadow-sm " \
+                   "hover:bg-destructive/10 transition-colors",
             data: {
               action: "click->#{@controller_name}#showActionDialog",
               action_name: "delete",

data/app/controllers/ruby_cms/admin/base_controller.rb

@@ -86,10 +86,16 @@ module RubyCms
       end
 
       def set_cms_locale
-        if session[:ruby_cms_locale].present? &&
-           I18n.available_locales.include?(session[:ruby_cms_locale].to_sym)
-          I18n.locale = session[:ruby_cms_locale].to_sym
-        end
+        locale = session[:ruby_cms_locale].presence || session[:admin_locale].presence
+        return if locale.blank?
+
+        locale = locale.to_sym
+        return unless I18n.available_locales.include?(locale)
+
+        # Keep both session keys in sync for host app + engine controllers.
+        session[:ruby_cms_locale] = locale
+        session[:admin_locale] = locale
+        I18n.locale = locale
       end
 
       # Resolve parameter key for model params

data/app/controllers/ruby_cms/admin/content_blocks_controller.rb

@@ -23,7 +23,7 @@ module RubyCms
       end
 
       def show
-        @blocks_by_locale = load_blocks_by_locale_for_show
+        @blocks_by_locale = load_blocks_by_locale_for_edit
         respond_with_block(@content_block)
       end
 
@@ -37,6 +37,7 @@ module RubyCms
 
       def edit
         @blocks_by_locale = load_blocks_by_locale_for_edit
+        render :show
       end
 
       def create
@@ -135,12 +136,12 @@ module RubyCms
       def handle_locale_update_errors(errors)
         @content_block.errors.add(:base, errors.join("; "))
         @blocks_by_locale = load_blocks_by_locale_for_edit
-        render :edit, status: :unprocessable_content
+        render :show, status: :unprocessable_content
       end
 
       def update_single_block
         @content_block.record_update_by(current_user_cms)
-        save_and_respond(@content_block, :edit)
+        save_and_respond(@content_block, :show)
       end
 
       def save_and_respond(block, failure_view)

data/app/controllers/ruby_cms/admin/locale_controller.rb

@@ -7,9 +7,10 @@ module RubyCms
       before_action :ensure_authenticated, only: [:update]
 
       def update
-        locale = params[:locale].to_sym
+        locale = params[:locale].to_s.presence&.to_sym
         if I18n.available_locales.include?(locale)
           session[:ruby_cms_locale] = locale
+          session[:admin_locale] = locale
           I18n.locale = locale
         end
 

data/app/controllers/ruby_cms/admin/user_permissions_controller.rb

@@ -17,14 +17,11 @@ module RubyCms
       end
 
       def create
-        permission = RubyCms::Permission.find(params[:permission_id])
-        if RubyCms::UserPermission.find_or_create_by!(user: @user, permission: permission)
-          redirect_to ruby_cms_admin_user_permissions_path(@user),
-                      notice: t("ruby_cms.admin.user_permissions.granted")
+        if params[:template].present?
+          apply_template
+        else
+          grant_individual_permission
         end
-      rescue ActiveRecord::RecordInvalid
-        redirect_to ruby_cms_admin_user_permissions_path(@user),
-                    alert: t("ruby_cms.admin.user_permissions.could_not_grant")
       end
 
       def destroy
@@ -54,6 +51,27 @@ module RubyCms
       def user_class
         Object.const_get(Rails.application.config.ruby_cms.user_class_name.presence || "User")
       end
+
+      def apply_template
+        template_key = params[:template].to_sym
+        RubyCms::UserPermission.where(user: @user).destroy_all
+        RubyCms::Permission.apply_template!(@user, template_key)
+        @user.make_admin! if @user.respond_to?(:make_admin!) && !@user.admin?
+        redirect_to ruby_cms_admin_user_permissions_path(@user),
+                    notice: "Applied #{RubyCms::Permission.templates.dig(template_key, :label)} template."
+      rescue ArgumentError => e
+        redirect_to ruby_cms_admin_user_permissions_path(@user), alert: e.message
+      end
+
+      def grant_individual_permission
+        permission = RubyCms::Permission.find(params[:permission_id])
+        RubyCms::UserPermission.find_or_create_by!(user: @user, permission: permission)
+        redirect_to ruby_cms_admin_user_permissions_path(@user),
+                    notice: t("ruby_cms.admin.user_permissions.granted")
+      rescue ActiveRecord::RecordInvalid
+        redirect_to ruby_cms_admin_user_permissions_path(@user),
+                    alert: t("ruby_cms.admin.user_permissions.could_not_grant")
+      end
     end
   end
 end

data/app/helpers/ruby_cms/content_blocks_helper.rb

@@ -114,14 +114,14 @@ module RubyCms
     def build_css_class(options)
       user_class = options.delete(:class)
       return user_class.to_s if user_class.present? && !visual_editor_preview_edit_mode?
-      return user_class.to_s if !visual_editor_preview_edit_mode?
+      return user_class.to_s unless visual_editor_preview_edit_mode?
 
       ["ruby_cms-content-block", "content-block", user_class].compact.join(" ")
     end
 
     def build_data_attributes(key, options)
       user_data = options.delete(:data).to_h
-      return user_data if !visual_editor_preview_edit_mode?
+      return user_data unless visual_editor_preview_edit_mode?
 
       { content_key: key, block_id: key.to_s }.merge(user_data)
     end
@@ -133,7 +133,11 @@ module RubyCms
       return false unless controller.respond_to?(:action_name) && controller.action_name.to_s == "page_preview"
 
       begin
-        defined?(@edit_mode) ? (@edit_mode ? true : false) : true
+        if controller.instance_variable_defined?(:@edit_mode)
+          controller.instance_variable_get(:@edit_mode) ? true : false
+        else
+          true
+        end
       rescue StandardError
         true
       end

data/app/helpers/ruby_cms/settings_helper.rb

@@ -34,6 +34,16 @@ module RubyCms
       key.tr("_", " ").humanize
     end
 
+    # SVG path fragment for a nav item (matches sidebar), or nil.
+    def settings_nav_visibility_icon(entry)
+      key_str = entry.key.to_s
+      return nil unless key_str.start_with?("nav_show_")
+
+      nav_key = key_str.delete_prefix("nav_show_")
+      item = RubyCms.nav_registry.find {|e| e[:key].to_s == nav_key }
+      item&.dig(:icon)
+    end
+
     def render_setting_field(entry:, value:, tab:)
       case entry.type.to_sym
       when :integer
@@ -50,13 +60,13 @@ module RubyCms
     private
 
     def input_base_classes
-      "w-full h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-900 " \
-        "shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-200"
+      "w-full h-9 rounded-lg border border-border bg-background px-3 text-sm text-foreground " \
+        "shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20"
     end
 
     def textarea_base_classes
-      "w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 " \
-        "shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-200"
+      "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground " \
+        "shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20"
     end
 
     def render_integer_setting_field(entry:, value:, tab:)
@@ -75,31 +85,33 @@ module RubyCms
 
     def render_boolean_setting_field(entry:, value:, tab:)
       checked = ActiveModel::Type::Boolean.new.cast(value)
+      input_id = setting_input_id(entry)
+
       hidden = hidden_field_tag("preferences[#{entry.key}]", "false")
       checkbox = check_box_tag(
         "preferences[#{entry.key}]",
         "true",
         checked,
-        id: setting_input_id(entry),
+        id: input_id,
         class: "peer sr-only",
         data: autosave_data(entry.key, tab)
       )
-      label = content_tag(
-        :label,
-        "",
-        for: setting_input_id(entry),
-        class: "relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full " \
-               "bg-gray-200 transition-colors peer-checked:bg-teal-600"
-      ) do
-        content_tag(
-          :span,
-          "",
-          class: "inline-block h-5 w-5 transform rounded-full bg-white shadow-sm transition " \
-                 "translate-x-0.5 peer-checked:translate-x-5"
-        )
-      end
 
-      content_tag(:div, class: "inline-flex items-center") { hidden + checkbox + label }
+      track = content_tag(:label, "", for: input_id,
+                                      class: "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full " \
+                                             "border-2 border-transparent bg-input transition-colors " \
+                                             "peer-checked:bg-primary " \
+                                             "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring " \
+                                             "peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background")
+
+      thumb = content_tag(:span, "",
+                          class: "pointer-events-none absolute left-[3px] top-1/2 -translate-y-1/2 h-5 w-5 rounded-full " \
+                                 "bg-background shadow-lg ring-0 transition-transform " \
+                                 "translate-x-0 peer-checked:translate-x-5")
+
+      content_tag(:div, class: "relative inline-flex items-center shrink-0") do
+        safe_join([hidden, checkbox, track, thumb])
+      end
     end
 
     def render_json_setting_field(entry:, value:, tab:)