mensa 0.2.4 → 0.2.6

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

@@ -0,0 +1,9 @@
+.mensa-table {
+    tbody {
+        td {
+            a {
+                color: inherit;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,40 @@
+.mensa-table {
+    &__column_customizer {
+        &__popover {
+            @apply fixed z-50 w-64 rounded-xl bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 py-2;
+        }
+
+        &__heading {
+            @apply px-4 pt-2 pb-1 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500;
+        }
+
+        &__row {
+            @apply flex items-center gap-3 px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-grab select-none;
+        }
+
+        &__handle {
+            @apply text-gray-300 dark:text-gray-600 text-xs flex-none;
+        }
+
+        &__name {
+            @apply flex-1 text-sm text-gray-700 dark:text-gray-200 truncate;
+
+            &--hidden {
+                @apply text-gray-400 dark:text-gray-500;
+            }
+        }
+
+        &__visibility {
+            @apply flex-none text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer;
+        }
+
+        /* Show the correct eye icon based on the row's data-visible attribute.
+           Works with both FA CSS (i elements) and FA SVG mode (svg elements). */
+        &__row[data-visible="true"] .fa-eye-slash {
+            display: none;
+        }
+        &__row[data-visible="false"] .fa-eye {
+            display: none;
+        }
+    }
+}

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

@@ -0,0 +1,14 @@
+.relative data-controller="mensa-column-customizer" data-mensa-column-customizer-table-name-value=table.name data-mensa-column-customizer-turbo-frame-id-value=table.table_id data-mensa-column-customizer-mensa-table-outlet="#table-#{table.table_id}"
+  button.mensa-table__control_bar__button type="button" data-action="click->mensa-column-customizer#toggle"
+    i class=Mensa.config.icons[:control_bar_edit]
+  .mensa-table__column_customizer__popover.hidden data-mensa-column-customizer-target="popover"
+    p.mensa-table__column_customizer__heading Columns
+    ul
+      - table.columns.reject(&:internal?).each do |column|
+        li.mensa-table__column_customizer__row[data-mensa-column-customizer-target="columnRow" data-column-name=column.name.to_s data-visible=column.visible?.to_s draggable="true" data-action="dragstart->mensa-column-customizer#dragStart dragover->mensa-column-customizer#dragOver drop->mensa-column-customizer#drop dragend->mensa-column-customizer#dragEnd"]
+          i.mensa-table__column_customizer__handle.fa-solid.fa-grip-vertical
+          span.mensa-table__column_customizer__name[class=(!column.visible? ? "mensa-table__column_customizer__name--hidden" : "")]
+            = column.human_name
+          button.mensa-table__column_customizer__visibility type="button" data-action="click->mensa-column-customizer#toggleVisibility"
+            i.fa-solid.fa-eye
+            i.fa-solid.fa-eye-slash

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Mensa
+  module ColumnCustomizer
+    class Component < ::Mensa::ApplicationComponent
+      attr_reader :table
+
+      def initialize(table:)
+        @table = table
+      end
+    end
+  end
+end

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

@@ -0,0 +1,383 @@
+import ApplicationController from "mensa/controllers/application_controller";
+
+export default class ColumnCustomizerController extends ApplicationController {
+    static outlets = ["mensa-table"];
+    static targets = ["popover", "columnRow"];
+    static values = { turboFrameId: String, tableName: String };
+
+    connect() {
+        super.connect();
+        this._dragSource = null;
+        this._dragGhost = null;
+        this._outsideClickHandler = null;
+
+        // Capture the server-rendered order before localStorage reorders the DOM.
+        this._defaultColumnOrder = this.columnRowTargets.map(
+            (r) => r.dataset.columnName,
+        );
+
+        // 1. Update the DOM immediately (reorder rows, flip data-visible).
+        //    CSS [data-visible] rules handle icon display — no JS icon work needed.
+        const hasState = this._applyLocalState();
+
+        // 2. Bake the column params into the mensa-table element's tableUrlValue
+        //    right now, before any outlet connects. filter_pill_list.restoreState()
+        //    reads ourUrl → tableUrlValue to build the initial frame URL, so by
+        //    injecting here we get column_order[] into that single first request
+        //    without needing a separate second frame load.
+        if (hasState) {
+            this._pendingStorageApply = !this._injectColumnParamsIntoTableUrl();
+        }
+    }
+
+    disconnect() {
+        this._unbindOutsideClick();
+    }
+
+    // Fallback: only reached when _injectColumnParamsIntoTableUrl couldn't find
+    // the mensa-table element during connect() (unusual page structures).
+    mensaTableOutletConnected() {
+        if (this._pendingStorageApply) {
+            this._pendingStorageApply = false;
+            this._applyChanges();
+        }
+    }
+
+    toggle() {
+        if (this.popoverTarget.classList.contains("hidden")) {
+            this.popoverTarget.classList.remove("hidden");
+            this._positionPopover();
+            this._bindOutsideClick();
+        } else {
+            this.popoverTarget.classList.add("hidden");
+            this._unbindOutsideClick();
+        }
+    }
+
+    _positionPopover() {
+        const btn = this.element.querySelector("button");
+        if (!btn) return;
+        const rect = btn.getBoundingClientRect();
+        this.popoverTarget.style.top = `${rect.bottom + 4}px`;
+        this.popoverTarget.style.right = `${window.innerWidth - rect.right}px`;
+        this.popoverTarget.style.left = "auto";
+    }
+
+    toggleVisibility(event) {
+        event.stopPropagation();
+        const row = event.currentTarget.closest("[data-column-name]");
+        const nowVisible = row.dataset.visible !== "true";
+
+        // Flip the data-visible attribute — CSS handles which icon is shown.
+        row.dataset.visible = nowVisible.toString();
+
+        const nameEl = row.querySelector(
+            ".mensa-table__column_customizer__name",
+        );
+        if (nameEl) {
+            nameEl.classList.toggle(
+                "mensa-table__column_customizer__name--hidden",
+                !nowVisible,
+            );
+        }
+
+        this._persistAndApply();
+    }
+
+    dragStart(event) {
+        this._dragSource = event.currentTarget;
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", ""); // required for Firefox
+
+        // Build a clean ghost so the screenshot doesn't bleed through the
+        // popover and show the underlying table row.
+        const src = event.currentTarget;
+        const ghost = src.cloneNode(true);
+        Object.assign(ghost.style, {
+            position: "absolute",
+            top: "-1000px",
+            left: "0",
+            width: `${src.offsetWidth}px`,
+            background: "white",
+            borderRadius: "8px",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+            pointerEvents: "none",
+        });
+        document.body.appendChild(ghost);
+        event.dataTransfer.setDragImage(
+            ghost,
+            src.offsetWidth / 2,
+            src.offsetHeight / 2,
+        );
+        this._dragGhost = ghost;
+
+        setTimeout(() => this._dragSource?.classList.add("opacity-40"), 0);
+    }
+
+    dragOver(event) {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+        const target = event.currentTarget;
+        if (!this._dragSource || target === this._dragSource) return;
+        const rect = target.getBoundingClientRect();
+        const midY = rect.top + rect.height / 2;
+        if (event.clientY < midY) {
+            target.parentNode.insertBefore(this._dragSource, target);
+        } else {
+            target.parentNode.insertBefore(
+                this._dragSource,
+                target.nextSibling,
+            );
+        }
+    }
+
+    drop(event) {
+        event.preventDefault();
+    }
+
+    dragEnd(event) {
+        this._dragSource?.classList.remove("opacity-40");
+        this._dragSource = null;
+        if (this._dragGhost) {
+            this._dragGhost.remove();
+            this._dragGhost = null;
+        }
+        this._persistAndApply();
+    }
+
+    // Resets the popover DOM to the original server-rendered order and makes all
+    // columns visible. Called by the table controller after a view reset.
+    resetToDefault() {
+        if (this._defaultColumnOrder) {
+            this._reorderRows(this._defaultColumnOrder);
+        }
+        this.columnRowTargets.forEach((row) => {
+            row.dataset.visible = "true";
+            const nameEl = row.querySelector(
+                ".mensa-table__column_customizer__name",
+            );
+            if (nameEl)
+                nameEl.classList.remove(
+                    "mensa-table__column_customizer__name--hidden",
+                );
+        });
+    }
+
+    // --- private ---
+
+    _persistAndApply() {
+        this._persistToStorage();
+        this._applyChanges();
+        if (this.hasMensaTableOutlet) {
+            this.mensaTableOutlet.notifyUnsavedState();
+        }
+    }
+
+    _applyChanges() {
+        if (!this.hasMensaTableOutlet) return;
+
+        const url = this.mensaTableOutlet.ourUrl;
+        this._preserveActiveView(url);
+
+        // Strip stale column customizer params.
+        const toDelete = [];
+        url.searchParams.forEach((_, key) => {
+            if (
+                key.startsWith("column_order") ||
+                key.startsWith("hidden_columns")
+            ) {
+                toDelete.push(key);
+            }
+        });
+        toDelete.forEach((k) => url.searchParams.delete(k));
+
+        // Write current order and visibility from the DOM.
+        this.columnRowTargets.forEach((row) => {
+            url.searchParams.append("column_order[]", row.dataset.columnName);
+            if (row.dataset.visible === "false") {
+                url.searchParams.append(
+                    "hidden_columns[]",
+                    row.dataset.columnName,
+                );
+            }
+        });
+
+        // Navigate the frame directly so its src stays in sync with the column
+        // params. The column customizer lives outside the frame, so the popover
+        // remains open. Subsequent filter/sort requests will inherit the updated
+        // src (including column_order[] and hidden_columns[]) via ourUrl.
+        const frame = document.getElementById(this.turboFrameIdValue);
+        if (frame) frame.setAttribute("src", url.toString());
+    }
+
+    // Update localStorage with the current DOM state.
+    _persistToStorage() {
+        const order = this.columnRowTargets.map((r) => r.dataset.columnName);
+        const hidden = this.columnRowTargets
+            .filter((r) => r.dataset.visible === "false")
+            .map((r) => r.dataset.columnName);
+
+        this._writeStorage(
+            this._columnOrderKey,
+            order.length ? JSON.stringify(order) : null,
+        );
+        this._writeStorage(
+            this._hiddenColumnsKey,
+            hidden.length ? JSON.stringify(hidden) : null,
+        );
+    }
+
+    // Apply persisted column state to the DOM only (no server call).
+    // Called during connect() before outlets are available.
+    // Returns true if any state was restored (signals that a server call is needed).
+    _applyLocalState() {
+        const rawOrder = this._readStorage(this._columnOrderKey);
+        const rawHidden = this._readStorage(this._hiddenColumnsKey);
+        if (!rawOrder && !rawHidden) return false;
+
+        const order = rawOrder ? JSON.parse(rawOrder) : null;
+        const hidden = rawHidden ? JSON.parse(rawHidden) : [];
+
+        if (order) this._reorderRows(order);
+
+        // Flip data-visible on each row. The CSS [data-visible] rules handle
+        // showing/hiding the correct eye icon — no querySelector("i") needed.
+        this.columnRowTargets.forEach((row) => {
+            const isHidden = hidden.includes(row.dataset.columnName);
+            row.dataset.visible = (!isHidden).toString();
+            const nameEl = row.querySelector(
+                ".mensa-table__column_customizer__name",
+            );
+            if (nameEl) {
+                nameEl.classList.toggle(
+                    "mensa-table__column_customizer__name--hidden",
+                    isHidden,
+                );
+            }
+        });
+
+        return true;
+    }
+
+    // Writes column_order[] and hidden_columns[] into the mensa-table element's
+    // data-mensa-table-table-url-value attribute so that ourUrl() (used by
+    // filter_pill_list.restoreState) carries the column params in the very first
+    // frame request. Returns true on success.
+    _injectColumnParamsIntoTableUrl() {
+        const tableEl = document.getElementById(
+            `table-${this.turboFrameIdValue}`,
+        );
+        if (!tableEl) return false;
+
+        const urlStr = tableEl.dataset.mensaTableTableUrlValue;
+        if (!urlStr) return false;
+
+        try {
+            const url = new URL(urlStr);
+
+            const toDelete = [];
+            url.searchParams.forEach((_, key) => {
+                if (
+                    key.startsWith("column_order") ||
+                    key.startsWith("hidden_columns")
+                ) {
+                    toDelete.push(key);
+                }
+            });
+            toDelete.forEach((k) => url.searchParams.delete(k));
+
+            this.columnRowTargets.forEach((row) => {
+                url.searchParams.append(
+                    "column_order[]",
+                    row.dataset.columnName,
+                );
+                if (row.dataset.visible === "false") {
+                    url.searchParams.append(
+                        "hidden_columns[]",
+                        row.dataset.columnName,
+                    );
+                }
+            });
+
+            this._preserveActiveView(url);
+            tableEl.dataset.mensaTableTableUrlValue = url.toString();
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    _reorderRows(order) {
+        if (!this.hasColumnRowTarget) return;
+        const list = this.columnRowTargets[0].parentNode;
+        const rowMap = {};
+        this.columnRowTargets.forEach((row) => {
+            rowMap[row.dataset.columnName] = row;
+        });
+        order.forEach((name) => {
+            if (rowMap[name]) list.appendChild(rowMap[name]);
+        });
+        // Append any rows not present in the saved order at the end.
+        this.columnRowTargets.forEach((row) => {
+            if (!order.includes(row.dataset.columnName)) {
+                list.appendChild(row);
+            }
+        });
+    }
+
+    _preserveActiveView(url) {
+        const view =
+            this.mensaTableOutlet?.mensaFilterPillListOutlet?.loadView?.() ||
+            "";
+        if (view) url.searchParams.set("table_view_id", view);
+    }
+
+    get _columnOrderKey() {
+        return `mensa:column_order:${this.tableNameValue}`;
+    }
+
+    get _hiddenColumnsKey() {
+        return `mensa:hidden_columns:${this.tableNameValue}`;
+    }
+
+    _writeStorage(key, value) {
+        try {
+            if (value === null) {
+                window.localStorage.removeItem(key);
+            } else {
+                window.localStorage.setItem(key, value);
+            }
+        } catch (e) {
+            // localStorage unavailable (private mode / disabled) — ignore.
+        }
+    }
+
+    _readStorage(key) {
+        try {
+            return window.localStorage.getItem(key);
+        } catch (e) {
+            return null;
+        }
+    }
+
+    _bindOutsideClick() {
+        this._unbindOutsideClick();
+        this._outsideClickHandler = (event) => {
+            if (!this.element.contains(event.target)) {
+                this.popoverTarget.classList.add("hidden");
+                this._unbindOutsideClick();
+            }
+        };
+        // Defer so the opening click doesn't immediately close the popover.
+        setTimeout(() => {
+            document.addEventListener("click", this._outsideClickHandler);
+        }, 0);
+    }
+
+    _unbindOutsideClick() {
+        if (this._outsideClickHandler) {
+            document.removeEventListener("click", this._outsideClickHandler);
+            this._outsideClickHandler = null;
+        }
+    }
+}

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

@@ -1,5 +1,128 @@
 .mensa-table {
-  &__control_bar {
-    @apply pl-2 pt-1.5 pr-2;
-  }
-}
+    &__control_bar {
+        &__button {
+            @apply h-[26px] inline-flex items-center justify-center gap-1 cursor-pointer rounded-md px-1.5 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none transition-colors;
+        }
+
+        &__badge {
+            @apply absolute -top-1.5 -right-1.5 inline-flex items-center justify-center min-w-[1.125rem] h-[1.125rem] px-1 rounded-full bg-primary-600 text-white text-[0.625rem] font-semibold leading-none ring-2 ring-white dark:ring-gray-800;
+        }
+
+        &__save-dropdown {
+            @apply fixed z-50 min-w-[10rem] rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10 py-1 px-2;
+        }
+
+        &__save-dropdown-item {
+            @apply w-full flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-left;
+        }
+    }
+
+    &__save-reset {
+        @apply flex items-center gap-1;
+    }
+
+    &__export-dialog {
+        @apply w-[34rem] max-w-[92vw] max-h-[85vh] rounded-2xl border-0 p-0 bg-white dark:bg-gray-800 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 text-gray-900 dark:text-gray-100;
+
+        &::backdrop {
+            @apply bg-gray-900/40;
+            backdrop-filter: blur(2px);
+        }
+
+        &__panel {
+            @apply flex flex-col max-h-[85vh] overflow-hidden;
+        }
+
+        &__header {
+            @apply flex items-center justify-between gap-4 px-6 py-4 border-b border-gray-200 dark:border-gray-700;
+        }
+
+        &__title {
+            @apply text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100;
+        }
+
+        &__close {
+            @apply cursor-pointer text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none;
+        }
+
+        &__body {
+            @apply flex flex-col gap-5 p-6 min-h-0 overflow-y-auto;
+        }
+
+        &__section-title {
+            @apply text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2;
+        }
+
+        &__empty {
+            @apply flex h-44 items-center justify-center rounded-lg ring-1 ring-gray-200 dark:ring-gray-700 px-3 text-center text-sm text-gray-500 dark:text-gray-400;
+        }
+
+        &__list {
+            @apply flex flex-col divide-y divide-gray-100 dark:divide-gray-700 rounded-lg ring-1 ring-gray-200 dark:ring-gray-700 h-44 overflow-x-hidden overflow-y-auto;
+        }
+
+        &__item {
+            @apply flex shrink-0 items-center justify-between gap-3 px-3 py-2.5;
+        }
+
+        &__item-info {
+            @apply flex flex-col min-w-0;
+        }
+
+        &__item-name {
+            @apply text-sm font-medium text-gray-900 dark:text-gray-100 truncate;
+        }
+
+        &__item-meta {
+            @apply text-xs text-gray-500 dark:text-gray-400;
+        }
+
+        &__download {
+            @apply inline-flex items-center gap-1.5 rounded-md bg-white dark:bg-gray-700 px-2.5 py-1.5 text-sm font-medium text-primary-600 dark:text-primary-300 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600;
+        }
+
+        &__status {
+            @apply inline-flex items-center gap-1.5 text-sm;
+
+            &--pending {
+                @apply text-gray-500 dark:text-gray-400;
+            }
+
+            &--failed {
+                @apply text-red-600 dark:text-red-400 font-medium;
+            }
+        }
+
+        &__form {
+            @apply flex flex-col gap-5 border-t border-gray-200 dark:border-gray-700 pt-5;
+        }
+
+        &__fieldset {
+            @apply flex flex-col gap-2 border-0 p-0 m-0;
+        }
+
+        &__option {
+            @apply flex items-start gap-2.5 text-sm text-gray-700 dark:text-gray-300 cursor-pointer;
+
+            input {
+                @apply mt-0.5 text-primary-600 focus:ring-primary-500;
+            }
+        }
+
+        &__actions {
+            @apply flex justify-end gap-2 pt-1;
+        }
+
+        &__button {
+            @apply inline-flex items-center gap-1.5 rounded-lg px-3.5 py-2 text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 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 focus:ring-gray-400;
+            }
+
+            &--primary {
+                @apply bg-primary-600 text-white hover:bg-primary-500 focus:ring-primary-500;
+            }
+        }
+    }
+}

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

@@ -1,16 +1,43 @@
 .mensa-table__control_bar data-mensa-table-target="controlBar"
-  .flex.space-x-2.justify-right
-    button.flex.justify-right.cursor-pointer.py-1.5.h-full.text-gray-400 class="#{table.supports_views? ? 'w-8' : 'w-4'}" data-action="mensa-table#openFiltersAndSearch"
-      - if table.supports_views?
-        i class=Mensa.config.icons[:control_bar_search]
-      - if table.supports_filters? && table.filters?
-        i class=Mensa.config.icons[:control_bar_filter]
-    /- if view_columns_sorting?
-      button.cursor-pointer.w-6.h-full.text-gray-400
-        i class=Mensa.config.icons[:control_bar_edit]
-    - if view_condensed_toggle?
-      button.cursor-pointer.w-6.h-full.text-gray-400 data-action="mensa-table#condenseExpand"
-        i data-mensa-table-target="condenseExpandIcon" class=Mensa.config.icons[:control_bar_compress]
-    - if table.config[:render]&.key?(:xlsx)
-      button.cursor-pointer.w-6.h-full.text-gray-400 data-action="mensa-table#export"
+  .flex.items-center.gap-1.py-0
+    / Column customizer (always shown first when available)
+    - if view_columns_ordering?
+      = render Mensa::ColumnCustomizer::Component.new(table: table)
+
+    / Save/Reset buttons — shown when there are unsaved filters or search
+    .mensa-table__save-reset.hidden data-mensa-table-target="saveResetButtons"
+      button.mensa-table__control_bar__button[type="button" title=t('.reset', default: 'Reset') data-action="mensa-table#cancelFiltersAndSearch"]
+        i.fa-solid.fa-rotate-left
+      - if table.current_user && table.supports_custom_views?
+        .relative
+          / Simple save — shown when the default/system view is active
+          button.mensa-table__control_bar__button.hidden[type="button" data-mensa-table-target="saveSimple" data-action="mensa-table#saveAsNewView"]
+            = t('.save', default: 'Save')
+          / Save with dropdown — shown when a user-created view is active
+          button.mensa-table__control_bar__button.hidden[type="button" data-mensa-table-target="saveSplit" data-action="mensa-table#toggleSaveDropdown"]
+            = t('.save', default: 'Save')
+            i.fa-solid.fa-chevron-down.text-xs
+          ul.mensa-table__control_bar__save-dropdown.hidden data-mensa-table-target="saveDropdown"
+            li
+              button.mensa-table__control_bar__save-dropdown-item[type="button" data-action="mensa-table#updateCurrentViewAction"]
+                = t('.update_view', default: 'Update view')
+            li
+              button.mensa-table__control_bar__save-dropdown-item[type="button" data-action="mensa-table#saveAsNewView"]
+                = t('.save_as_new_view', default: 'Save as new view')
+      - else
+        button.mensa-table__control_bar__button[type="button" data-action="mensa-table#saveAsNewView"]
+          = t('.save', default: 'Save')
+
+    / Eye icon — toggles visibility of view-origin filter pills (shown by JS when needed)
+    button.mensa-table__control_bar__button.hidden[type="button" data-mensa-table-target="eyeButton" data-action="click->mensa-table#toggleViewFilters"]
+      i.fa-solid.fa-eye
+
+    / Export
+    - if table.exportable?
+      button.mensa-table__control_bar__button.relative[type="button" data-action="mensa-table#export"]
         i data-mensa-table-target="exportIcon" class=Mensa.config.icons[:control_bar_export]
+        = helpers.render partial: "mensa/exports/badge", locals: {table_name: table.name, user: table.current_user}
+
+  - if table.exportable?
+    = helpers.turbo_stream_from Mensa::Export.stream_name(table.name, table.current_user)
+    = helpers.render partial: "mensa/exports/dialog", locals: {table: table}

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

@@ -9,12 +9,8 @@ module Mensa
         @table = table
       end
 
-      def view_columns_sorting?
-        table.view_columns_sorting?
-      end
-
-      def view_condensed_toggle?
-        table.view_condensed_toggle?
+      def view_columns_ordering?
+        table.view_columns_ordering?
       end
     end
   end