mensa 0.2.5 → 0.3.0

data/app/components/mensa/view/component.css

@@ -1,46 +1,114 @@
-@import 'paging.css';
+@import "paging.css";
 
-.mensa-table {
-  @apply bg-white dark:bg-gray-500 dark:border-gray-700;
+.mensa-batch-bar {
+    /* Sits on top of the thead row. Positioned relative to the .overflow-y-auto.relative
+       wrapper, which starts flush with the top of the table. top/left/right cover the
+       full width without any JS width-setting. py-2 + h-4 content mirrors the exact
+       height of the header row (same py-2 padding + h-4 container as thead th). */
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    @apply pt-3 pb-2 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600;
+
+    &__content {
+        /* h-4 matches the .container height used inside header th cells.
+           pl-3 aligns the checkbox with the checkbox column (w-8, pl-4). */
+        @apply h-4 flex items-center gap-2 pl-4;
+    }
 
-  .badge {
-    @apply bg-primary-100 text-primary-600 hidden ml-3 rounded-full text-xs font-medium md:inline-block py-0.5 px-2.5;
-  }
+    &__count {
+        @apply text-xs font-medium text-gray-700 dark:text-gray-200 mr-1;
+    }
 
-  table {
-    @apply min-w-full divide-y divide-gray-50 dark:divide-gray-800 border-0;
+    &__button {
+        @apply inline-flex items-center gap-1 rounded px-3 py-1 text-xs font-medium text-gray-700 dark:text-gray-200 ring-1 ring-inset ring-gray-300 dark:ring-gray-500 bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none transition-colors cursor-pointer leading-none;
+    }
+}
 
-    thead {
-      @apply bg-gray-100 top-0 dark:bg-gray-700 dark:font-medium dark:text-gray-400 dark:lowercase;
+.mensa-table {
+    @apply bg-white dark:bg-gray-500 dark:border-gray-700;
 
-      /* tr and th moved to header */
+    .mensa-table__checkbox-col {
+        @apply w-8;
     }
 
-    tbody {
+    .mensa-table__select-all {
+        @apply h-4 w-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 cursor-pointer;
+        appearance: none;
+
+        &:hover {
+            @apply border-gray-500 dark:border-gray-400;
+        }
+
+        &:checked {
+            &:hover {
+                @apply bg-gray-700 border-gray-700 dark:bg-gray-200 dark:border-gray-200;
+            }
+        }
+
+        &:indeterminate {
+            &:hover {
+                @apply bg-gray-700 border-gray-700 dark:bg-gray-200 dark:border-gray-200;
+            }
+        }
 
-      @apply divide-y divide-gray-200 dark:divide-gray-600;
+        &:checked {
+            @apply bg-gray-900 border-gray-900 dark:bg-white dark:border-white;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
 
-      tr {
-        @apply cursor-pointer bg-white dark:bg-gray-800 divide-x divide-gray-400 divide-opacity-25 hover:bg-gray-200 dark:hover:bg-gray-700;
+        &:indeterminate {
+            @apply bg-gray-900 border-gray-900 dark:bg-white dark:border-white;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
 
-        &:nth-child(even) {
-          @apply bg-gray-50 dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700;
+        &:focus {
+            @apply outline-none ring-2 ring-offset-1 ring-gray-700 dark:ring-gray-300;
         }
-      }
+    }
 
-      td {
-        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400;
-      }
+    .badge {
+        @apply bg-primary-100 text-primary-600 hidden ml-3 rounded-full text-xs font-medium md:inline-block py-0.5 px-2.5;
     }
-  }
 
-  &__condensed {
     table {
-      tbody {
-        td {
-          @apply pl-4 py-2;
+        @apply min-w-full divide-y divide-gray-50 dark:divide-gray-800 border-0;
+
+        thead {
+            @apply bg-gray-100 top-0 dark:bg-gray-700 dark:font-medium dark:text-gray-400 dark:lowercase;
+
+            /* tr and th moved to header */
+
+            .mensa-table__checkbox-col {
+                @apply pr-2;
+            }
+        }
+
+        tbody {
+            @apply divide-y divide-gray-200 dark:divide-gray-600;
+
+            tr {
+                @apply cursor-pointer bg-white dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700;
+            }
+
+            td {
+                @apply px-2 py-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400;
+
+                &:first-child {
+                    @apply pl-4;
+                }
+
+                &:last-child {
+                    @apply pr-4;
+                }
+            }
         }
-      }
     }
-  }
-}
+}

data/app/components/mensa/view/component.html.slim

@@ -1,17 +1,30 @@
-.overflow-y-auto class=(table.view_condensed? ? "mensa-table__condensed" : "") data-mensa-table-target="view"
+.overflow-y-auto.relative data-mensa-table-target="view" data-controller="mensa-selection" data-mensa-selection-batch-url-value=(table.batch_actions? ? helpers.mensa.table_batch_actions_path(table.name) : "")
+  - if table.batch_actions?
+    .mensa-batch-bar.hidden data-mensa-selection-target="batchBar"
+      .mensa-batch-bar__content
+        input.mensa-table__select-all type="checkbox" data-action="click->mensa-selection#deselectAll" data-mensa-selection-target="batchAllCheckbox"
+        span.mensa-batch-bar__count data-mensa-selection-target="selectedCount"
+        - table.batch_actions.each do |batch_action|
+          button.mensa-batch-bar__button type="button" data-action="click->mensa-selection#executeBatch" data-mensa-selection-batch-action-param=batch_action.name.to_s
+            = batch_action.title
   table.w-full
     - if table.show_header?
       thead
         tr
-          = render(Mensa::Header::Component.with_collection(table.columns.select(&:visible?).reject(&:internal?), table: table))
-          - if table.actions?
-            th
-
+          - if table. batch_actions?
+            th.mensa-table__checkbox-col
+              .container
+                input.mensa-table__select-all type="checkbox" data-action="change->mensa-selection#toggleAll" data-mensa-selection-target="headerCheckbox"
+          - if table.actions? && Mensa.config.row_actions_position == :front
+            th Actions
+          = render(Mensa::Header::Component.with_collection(table.display_columns, table: table))
+          - if table.actions? && Mensa.config.row_actions_position == :back
+            th Actions
     tbody
       = render(Mensa::TableRow::Component.with_collection(table.rows, table: table))
-
-  - if table.pagy_details&.last > 1 || table.pagy_details.count == 0
+  - if table.pagy_details&.count == 0
+    = render Mensa::EmptyState::Component.new(table: table)
+  - elsif table.pagy_details&.last > 1
     .paging
-      == table.pagy_details.info_tag
-      - if table.pagy_details&.last > 1
-        == table.pagy_details.series_nav(anchor_string: 'data-turbo-frame="_self"')
+      span = t("mensa.paging.info", model: model_name_plural, from: table.pagy_details.from, to: table.pagy_details.to, count: table.pagy_details.count)
+      == table.pagy_details.series_nav(anchor_string: 'data-turbo-frame="_self"')

data/app/components/mensa/view/component.rb

@@ -11,6 +11,11 @@ module Mensa
       def initialize(table)
         @table = table
       end
+
+      # "orders", "users", etc. — used in the paging info line.
+      def model_name_plural
+        table.model.model_name.human.pluralize.downcase
+      end
     end
   end
 end

data/app/components/mensa/views/component.css

@@ -1,22 +1,115 @@
 .mensa-table {
-  &__views {
-    @apply p-2 pl-4 shadow-lg border-b dark:bg-gray-700 dark:border-gray-600;
+    &__views {
+        @apply relative flex-none;
 
-    a.view {
-      @apply bg-gray-100 text-gray-600 dark:text-gray-400 hover:text-gray-800 hover:bg-gray-200 rounded-md px-3 py-1.5 text-sm;
-    }
+        &__trigger {
+            @apply h-full flex items-center gap-1.5 px-3 text-sm font-semibold text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 whitespace-nowrap cursor-pointer transition-colors;
+        }
+
+        &__trigger-icon {
+            @apply text-gray-500 dark:text-gray-400 text-xs;
+        }
+
+        &__dropdown {
+            @apply absolute left-0 top-full z-20 mt-1 min-w-[12rem] rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10 py-1;
+        }
+
+        &__option {
+            @apply flex items-center justify-between px-1 hover:bg-gray-50 dark:hover:bg-gray-700;
+
+            &-btn {
+                @apply flex items-center gap-2 flex-1 px-2 py-1.5 text-sm text-left text-gray-700 dark:text-gray-200 cursor-pointer;
+            }
+
+            &-check {
+                @apply text-primary-600 text-xs w-4;
+            }
+
+            &-menu {
+                @apply p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 rounded cursor-pointer opacity-0 transition-opacity;
+            }
+
+            &:hover &-menu {
+                @apply opacity-100;
+            }
+
+            &-system {
+                @apply p-1.5 text-gray-400 opacity-0;
+            }
+
+            &:hover &-system {
+                @apply p-1.5 text-gray-300 opacity-100;
+            }
+        }
+
+        &__submenu {
+            @apply absolute z-30 min-w-[11rem] rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10 py-1;
+
+            &-item {
+                @apply flex items-center gap-2.5 w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer;
+
+                i {
+                    @apply w-4 text-gray-400;
+                }
 
-    a.view.selected {
-      @apply bg-gray-300 text-gray-800 dark:bg-gray-500 hover:bg-gray-400;
+                &--danger {
+                    @apply text-red-600 dark:text-red-400;
+
+                    i {
+                        @apply text-red-500;
+                    }
+                }
+            }
+        }
+
+        &__rename-dialog {
+            @apply w-80 max-w-[90vw] rounded-xl border-0 p-5 bg-white dark:bg-gray-800 shadow-2xl ring-1 ring-black/5 dark:ring-white/10;
+
+            &::backdrop {
+                @apply bg-gray-900/40;
+                backdrop-filter: blur(2px);
+            }
+        }
+
+        &__rename-form {
+            @apply flex flex-col gap-4;
+        }
+
+        &__rename-title {
+            @apply text-base font-semibold text-gray-900 dark:text-gray-100;
+        }
+
+        &__rename-label {
+            @apply flex flex-col gap-1.5 text-sm font-medium text-gray-700 dark:text-gray-300;
+        }
+
+        input&__rename-input {
+            @apply w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:outline-none;
+            border-radius: 0.5rem;
+        }
+
+        &__rename-actions {
+            @apply flex justify-end gap-2;
+        }
+
+        &__rename-btn {
+            @apply rounded-lg px-3 py-1.5 text-sm font-semibold shadow-sm focus:outline-none transition-colors;
+
+            &--secondary {
+                @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600;
+            }
+
+            &--primary {
+                @apply bg-primary-600 text-white hover:bg-primary-500;
+            }
+        }
     }
-  }
 }
 
-.tippy-box[data-theme~='mensa'] {
-  @apply bg-gray-200 text-gray-800 dark:text-gray-400;
+.tippy-box[data-theme~="mensa"] {
+    @apply bg-gray-200 text-gray-800 dark:text-gray-400;
 }
 
-.tippy-box[data-theme~='mensa'] .tippy-arrow {
-  @apply text-gray-200;
+.tippy-box[data-theme~="mensa"] .tippy-arrow {
+    @apply text-gray-200;
 }
-

data/app/components/mensa/views/component.html.slim

@@ -1,18 +1,52 @@
-.mensa-table__views data-mensa-table-target="views" data-controller="mensa-views"
-  .sm:hidden
-    label.sr-only[for="tabs"]
-      | Select a tab
-    select#tabs.block.w-full.rounded-md.border-gray-300.focus:border-indigo-500.focus:ring-indigo-500[name="tabs"]
-      - table.all_views.each.with_index do |view, index|
-        option = view.name
-  .hidden.sm:block
-    nav.flex.justify-between[aria-label="Tabs"]
-      .flex.space-x-2.overflow-x-auto.whitespace-nowrap.scroll-p-0
-        - table.all_views.each.with_index do |view, index|
-          = link_to(table.path(table_view_id: view.id, turbo_frame_id: table.table_id), "data-turbo-frame": table.table_id, class: "view #{(view.id == table.table_view&.id || view.id == :default && table.table_view.blank?) ? 'selected' : ''}", data: {"mensa-views-target": "view", action: "mensa-views#select", "tippy-content": view.description}) do
-            = view.name
+- current_view = table.all_views.find { |v| v.id == table.table_view&.id } || table.all_views.first
+- current_view_name = current_view&.name || t(".all", default: "All")
+- current_view_id = current_view&.id || ""
 
-        - if table.supports_custom_views?
-          a.text-gray-600.dark:text-gray-400.hover:text-gray-800.hover:bg-gray-200.rounded-md.px-3.py-1.5.text-sm[href="#" title=t("new_view", default: "New view")]
-            .fa-solid.fa-plus
-      = render Mensa::ControlBar::Component.new(table: table)
+.mensa-table__views id="mensa-views-#{table.table_id}" data-mensa-table-target="views" data-controller="mensa-views" data-mensa-views-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-#{table.table_id}" data-mensa-views-table-id-value=table.table_id data-mensa-views-views-url-value=helpers.mensa.table_views_path(table.name)
+  button.mensa-table__views__trigger type="button" data-action="mensa-views#toggleDropdown" data-mensa-views-target="trigger" aria-haspopup="listbox"
+    span.mensa-table__views__trigger-label data-mensa-views-target="triggerLabel"
+      = current_view_name
+    i.fa-solid.fa-sort.mensa-table__views__trigger-icon
+
+  .mensa-table__views__dropdown.hidden data-mensa-views-target="dropdown"
+    ul role="listbox"
+      - table.all_views.each do |view|
+        - is_selected = view.id == table.table_view&.id || (view.id == :default && table.table_view.blank?)
+        - is_user_view = view.id.is_a?(String) && view.id.match?(/\A[0-9a-f-]{32,}\z/i)
+        li.mensa-table__views__option[role="option" data-view-id=view.id data-view-name=view.name data-mensa-views-target="view"]
+          button.mensa-table__views__option-btn[type="button" data-action="mensa-views#select" data-view-id=view.id]
+            i.mensa-table__views__option-check.fa-solid.fa-check class=("invisible" unless is_selected)
+            span = view.name
+          - if is_user_view
+            button.mensa-table__views__option-menu[type="button" data-action="mensa-views#toggleSubmenu" data-view-id=view.id title="View options"]
+              i.fa-solid.fa-ellipsis
+          - else
+            .mensa-table__views__option-system
+              i.fa-solid.fa-ban
+
+    / Per-view submenu (shown via JS positioning)
+    .mensa-table__views__submenu.hidden data-mensa-views-target="submenu"
+      button.mensa-table__views__submenu-item[type="button" data-action="mensa-views#renameView"]
+        i.fa-solid.fa-pencil
+        = t(".rename_view", default: "Rename view")
+      button.mensa-table__views__submenu-item[type="button" data-action="mensa-views#duplicateView"]
+        i.fa-solid.fa-copy
+        = t(".duplicate_view", default: "Duplicate view")
+      button.mensa-table__views__submenu-item.mensa-table__views__submenu-item--danger[type="button" data-action="mensa-views#deleteView"]
+        i.fa-solid.fa-trash
+        = t(".delete_view", default: "Delete view")
+
+  / Rename dialog
+  dialog.mensa-table__views__rename-dialog data-mensa-views-target="renameDialog" data-action="click->mensa-views#renameDialogBackdrop"
+    form.mensa-table__views__rename-form data-action="submit->mensa-views#confirmRename"
+      input type="hidden" data-mensa-views-target="renameViewId"
+      h3.mensa-table__views__rename-title
+        = t(".rename_view", default: "Rename view")
+      label.mensa-table__views__rename-label
+        = t(".view_name", default: "Name")
+        input.mensa-table__views__rename-input[type="text" required=true placeholder=t(".view_name_placeholder", default: "View name") data-mensa-views-target="renameInput"]
+      .mensa-table__views__rename-actions
+        button.mensa-table__views__rename-btn.mensa-table__views__rename-btn--secondary[type="button" data-action="mensa-views#cancelRename"]
+          = t(".cancel", default: "Cancel")
+        button.mensa-table__views__rename-btn.mensa-table__views__rename-btn--primary[type="submit"]
+          = t(".rename", default: "Rename")

data/app/components/mensa/views/component_controller.js

@@ -1,22 +1,247 @@
-import ApplicationController from 'mensa/controllers/application_controller'
-import tippy from 'tippy.js'
+import ApplicationController from "mensa/controllers/application_controller";
+import { patch, post, destroy } from "@rails/request.js";
 
 export default class ViewsComponentController extends ApplicationController {
-  static targets = [
-    'view',
-  ]
-
-  connect() {
-    tippy('[data-controller="mensa-views"] [data-tippy-content]', {
-      placement: "top",
-      theme: 'mensa',
-      offset: [0, 8]
-    });
-  }
-
-  select(event) {
-    this.viewTargets.forEach((element) => {
-      (element === event.target) ? element.classList.add('selected') : element.classList.remove('selected')
-    })
-  }
-}
+    static targets = ["trigger", "triggerLabel", "dropdown", "view", "submenu", "renameDialog", "renameInput", "renameViewId"];
+    static outlets = ["mensa-filter-pill-list"];
+    static values = {
+        tableId: String,
+        viewsUrl: String,
+    };
+
+    connect() {
+        this._activeSubmenuViewId = null;
+        this._outsideClickHandler = null;
+    }
+
+    disconnect() {
+        this._unbindOutsideClick();
+    }
+
+    toggleDropdown(event) {
+        event.stopPropagation();
+        const isOpen = !this.dropdownTarget.classList.contains("hidden");
+        if (isOpen) {
+            this._closeDropdown();
+        } else {
+            this._openDropdown();
+        }
+    }
+
+    select(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const selected = event.currentTarget;
+        const viewId = selected.dataset.viewId || "";
+
+        this.viewTargets.forEach((el) => {
+            const btn = el.querySelector("[data-action='mensa-views#select']");
+            const check = el.querySelector(".mensa-table__views__option-check");
+            const isThis = el.dataset.viewId === viewId;
+            check?.classList.toggle("invisible", !isThis);
+        });
+
+        const viewName = event.currentTarget.querySelector("span")?.textContent?.trim() || "";
+        if (this.hasTriggerLabelTarget) {
+            this.triggerLabelTarget.textContent = viewName;
+        }
+
+        this._closeDropdown();
+
+        if (this.hasMensaFilterPillListOutlet) {
+            this.mensaFilterPillListOutlet.viewSelected(viewId);
+        }
+    }
+
+    toggleSubmenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const viewId = event.currentTarget.dataset.viewId;
+        const optionEl = event.currentTarget.closest("[data-mensa-views-target='view']");
+
+        if (this._activeSubmenuViewId === viewId && !this.submenuTarget.classList.contains("hidden")) {
+            this._closeSubmenu();
+            return;
+        }
+
+        this._activeSubmenuViewId = viewId;
+        this.submenuTarget.dataset.viewId = viewId;
+
+        // Position the submenu next to the clicked button
+        const rect = event.currentTarget.getBoundingClientRect();
+        const dropdownRect = this.dropdownTarget.getBoundingClientRect();
+        this.submenuTarget.style.top = `${rect.top - dropdownRect.top}px`;
+        this.submenuTarget.style.left = `${dropdownRect.width}px`;
+
+        this.submenuTarget.classList.remove("hidden");
+    }
+
+    renameView(event) {
+        event.preventDefault();
+        const viewId = this.submenuTarget.dataset.viewId;
+        const viewEl = this.viewTargets.find((el) => el.dataset.viewId === viewId);
+        const viewName = viewEl?.dataset.viewName || "";
+
+        this._closeSubmenu();
+        this._closeDropdown();
+
+        if (this.hasRenameDialogTarget) {
+            this.renameViewIdTarget.value = viewId;
+            this.renameInputTarget.value = viewName;
+            if (typeof this.renameDialogTarget.showModal === "function") {
+                this.renameDialogTarget.showModal();
+            } else {
+                this.renameDialogTarget.setAttribute("open", "");
+            }
+            this.renameInputTarget.select();
+        }
+    }
+
+    cancelRename(event) {
+        if (event) event.preventDefault();
+        this._closeRenameDialog();
+    }
+
+    renameDialogBackdrop(event) {
+        if (event.target === this.renameDialogTarget) {
+            this._closeRenameDialog();
+        }
+    }
+
+    async confirmRename(event) {
+        event.preventDefault();
+        const viewId = this.renameViewIdTarget.value;
+        const newName = this.renameInputTarget.value.trim();
+        if (!newName) {
+            this.renameInputTarget.reportValidity();
+            return;
+        }
+
+        const turboFrameId = this._turboFrameId();
+        const response = await patch(`${this.viewsUrlValue}/${viewId}`, {
+            body: JSON.stringify({ name: newName, turbo_frame_id: turboFrameId }),
+            contentType: "application/json",
+            responseKind: "turbo-stream",
+        });
+
+        if (response.ok) {
+            this._closeRenameDialog();
+        }
+    }
+
+    async duplicateView(event) {
+        event.preventDefault();
+        const viewId = this.submenuTarget.dataset.viewId;
+        const viewEl = this.viewTargets.find((el) => el.dataset.viewId === viewId);
+        const viewName = viewEl?.dataset.viewName || "";
+
+        this._closeSubmenu();
+        this._closeDropdown();
+
+        // Read the current state from the filter pill list outlet
+        let state = { filters: {}, query: "", order: {} };
+        if (this.hasMensaFilterPillListOutlet) {
+            const outlet = this.mensaFilterPillListOutlet;
+            state = {
+                filters: outlet.collectFilters(),
+                query: outlet.loadQuery(),
+                order: outlet.loadOrder(),
+                column_order: outlet.loadColumnOrder(),
+                hidden_columns: outlet.loadHiddenColumns(),
+            };
+        }
+
+        const turboFrameId = this._turboFrameId();
+        await post(this.viewsUrlValue, {
+            body: JSON.stringify({
+                name: `${viewName} (copy)`,
+                ...state,
+                turbo_frame_id: turboFrameId,
+            }),
+            contentType: "application/json",
+            responseKind: "turbo-stream",
+        });
+    }
+
+    async deleteView(event) {
+        event.preventDefault();
+        const viewId = this.submenuTarget.dataset.viewId;
+        const viewEl = this.viewTargets.find((el) => el.dataset.viewId === viewId);
+        const viewName = viewEl?.dataset.viewName || "this view";
+
+        this._closeSubmenu();
+        this._closeDropdown();
+
+        if (!confirm(`Delete "${viewName}"?`)) return;
+
+        const turboFrameId = this._turboFrameId();
+        await destroy(`${this.viewsUrlValue}/${viewId}`, {
+            body: JSON.stringify({ turbo_frame_id: turboFrameId }),
+            contentType: "application/json",
+            responseKind: "turbo-stream",
+        });
+    }
+
+    // Called from outside (e.g. after a view is saved/updated) to update the trigger label
+    updateSelectedView(viewId, viewName) {
+        this.viewTargets.forEach((el) => {
+            const check = el.querySelector(".mensa-table__views__option-check");
+            check?.classList.toggle("invisible", el.dataset.viewId !== viewId);
+        });
+        if (this.hasTriggerLabelTarget && viewName) {
+            this.triggerLabelTarget.textContent = viewName;
+        }
+    }
+
+    // --- private ---
+
+    _openDropdown() {
+        this.dropdownTarget.classList.remove("hidden");
+        this._bindOutsideClick();
+    }
+
+    _closeDropdown() {
+        this.dropdownTarget.classList.add("hidden");
+        this._closeSubmenu();
+        this._unbindOutsideClick();
+    }
+
+    _closeSubmenu() {
+        this.submenuTarget.classList.add("hidden");
+        this._activeSubmenuViewId = null;
+    }
+
+    _closeRenameDialog() {
+        if (!this.hasRenameDialogTarget) return;
+        if (typeof this.renameDialogTarget.close === "function") {
+            this.renameDialogTarget.close();
+        } else {
+            this.renameDialogTarget.removeAttribute("open");
+        }
+    }
+
+    _turboFrameId() {
+        const root = this.element.closest(".mensa-table");
+        const frame = root?.querySelector("turbo-frame");
+        return frame?.id || this.tableIdValue || "";
+    }
+
+    _bindOutsideClick() {
+        this._unbindOutsideClick();
+        this._outsideClickHandler = (e) => {
+            if (!this.element.contains(e.target)) {
+                this._closeDropdown();
+            }
+        };
+        setTimeout(() => document.addEventListener("click", this._outsideClickHandler), 0);
+    }
+
+    _unbindOutsideClick() {
+        if (this._outsideClickHandler) {
+            document.removeEventListener("click", this._outsideClickHandler);
+            this._outsideClickHandler = null;
+        }
+    }
+}