ruby_cms 0.1.1 → 0.1.2

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,17 +41,22 @@ module RubyCms
         private
 
         def render_selection_info
-          div(class: "flex items-center gap-3 flex-wrap") do
-            span(
-              class: "text-sm font-medium text-gray-700",
-              data: {
-                "#{@controller_name}-target": "selectedCount"
-              }
-            ) { "0 #{@item_name}s selected:" }
+          div(class: "flex items-center gap-3") do
+            div(class: "flex items-center gap-2") do
+              div(class: "size-6 rounded-full bg-primary/10 flex items-center justify-center") do
+                span(
+                  class: "text-xs font-bold text-primary tabular-nums",
+                  data: {
+                    "#{@controller_name}-target": "selectedCount"
+                  }
+                ) { "0" }
+              end
+              span(class: "text-sm font-medium text-foreground") { "selected" }
+            end
+            div(class: "h-4 w-px bg-border/60")
             button(
               type: "button",
-              class: "text-sm font-medium text-gray-600 hover:text-gray-900 hover:underline " \
-                     "transition-colors",
+              class: "text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
               data: {
                 "#{@controller_name}-target": "selectAllButton",
                 action: "click->#{@controller_name}#selectAll"
@@ -62,17 +64,16 @@ module RubyCms
             ) { "Select all" }
             button(
               type: "button",
-              class: "text-sm font-medium text-gray-600 hover:text-gray-900 hover:underline " \
-                     "transition-colors",
+              class: "text-xs font-medium text-muted-foreground hover:text-foreground transition-colors",
               data: {
                 action: "click->#{@controller_name}#clearSelection"
               }
-            ) { "Clear selection" }
+            ) { "Clear" }
           end
         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 +94,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 +119,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/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:)
@@ -88,18 +98,18 @@ module RubyCms
         :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"
+        class: "relative inline-flex h-7 w-12 cursor-pointer items-center rounded-full " \
+               "border border-border bg-muted transition-colors peer-checked:bg-primary peer-checked:border-primary"
       ) 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"
+          class: "inline-block h-5 w-5 transform rounded-full bg-background shadow-sm ring-1 ring-border transition " \
+                 "translate-x-1 peer-checked:translate-x-6"
         )
       end
 
-      content_tag(:div, class: "inline-flex items-center") { hidden + checkbox + label }
+      content_tag(:div, class: "inline-flex items-center shrink-0") { hidden + checkbox + label }
     end
 
     def render_json_setting_field(entry:, value:, tab:)

data/app/javascript/controllers/ruby_cms/bulk_action_table_controller.js

@@ -112,8 +112,7 @@ export default class extends Controller {
 
     if (count > 0) {
       bulkBar.classList.remove("hidden");
-      const itemName = this.itemNameValue || "item";
-      selectedCount.textContent = `${count} ${itemName}${count === 1 ? "" : "s"} selected:`;
+      selectedCount.textContent = `${count}`;
     } else {
       bulkBar.classList.add("hidden");
     }
@@ -143,10 +142,14 @@ export default class extends Controller {
       const itemId = String(row.getAttribute("data-item-id") || "");
       if (selectedIdsStr.includes(itemId)) {
         row.setAttribute("data-state", "selected");
-        row.classList.add("bg-gray-50");
+        row.classList.add("bg-primary/5");
+        row.classList.remove("hover:bg-muted/50");
       } else {
         row.removeAttribute("data-state");
-        row.classList.remove("bg-gray-50");
+        row.classList.remove("bg-primary/5");
+        if (!row.classList.contains("hover:bg-muted/50")) {
+          row.classList.add("hover:bg-muted/50");
+        }
       }
     });
   }
@@ -302,6 +305,41 @@ export default class extends Controller {
     this.isProcessing = false;
   }
 
+  rowClick(event) {
+    const row = event.currentTarget;
+    const target = event.target;
+
+    if (
+      target.closest('input[type="checkbox"]') ||
+      target.closest("button") ||
+      target.closest("a") ||
+      target.closest("[data-action*='stopPropagation']")
+    ) {
+      return;
+    }
+
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault();
+      const checkbox = row.querySelector(
+        'input[type="checkbox"][data-item-id]',
+      );
+      if (checkbox) {
+        checkbox.checked = !checkbox.checked;
+        this.updateBulkBar();
+      }
+      return;
+    }
+
+    const clickUrl = row.dataset.clickUrl;
+    if (clickUrl) {
+      if (window.Turbo) {
+        window.Turbo.visit(clickUrl);
+      } else {
+        window.location.href = clickUrl;
+      }
+    }
+  }
+
   stopPropagation(event) {
     event.stopPropagation();
   }
@@ -517,20 +555,23 @@ export default class extends Controller {
 
   showNotification(message, type = "info") {
     const toast = document.createElement("div");
-    toast.className = `fixed top-4 right-4 z-50 px-4 py-2 rounded-md shadow-lg text-white max-w-sm ${
-      type === "success"
-        ? "bg-green-600"
-        : type === "error"
-          ? "bg-red-600"
-          : "bg-blue-600"
+    const colorMap = {
+      success: "bg-emerald-600",
+      error: "bg-destructive",
+      info: "bg-primary",
+    };
+    toast.className = `fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg text-white text-sm max-w-sm animate-in slide-in-from-top-2 ${
+      colorMap[type] || colorMap.info
     }`;
     toast.textContent = message;
 
     document.body.appendChild(toast);
 
     setTimeout(() => {
-      toast.remove();
-    }, 5000);
+      toast.style.opacity = "0";
+      toast.style.transition = "opacity 200ms ease-out";
+      setTimeout(() => toast.remove(), 200);
+    }, 4000);
   }
 
   clearItemIdsFromUrl() {