mensa 0.8.0 → 0.8.2

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

@@ -1,37 +1,37 @@
 .mensa-filter-pill {
     @apply inline-flex items-stretch text-xs rounded-md overflow-hidden;
+}
 
-    &__chip {
-        @apply flex items-center gap-1 pl-2 pr-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-md cursor-pointer transition-all;
-    }
+.mensa-filter-pill__chip {
+    @apply flex items-center gap-1 pl-2 pr-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-md cursor-pointer transition-all;
+}
 
-    &:hover &__chip,
-    &:focus-within &__chip {
-        @apply bg-gray-200 dark:bg-gray-600 rounded-r-none;
-    }
+.mensa-filter-pill:hover .mensa-filter-pill__chip,
+.mensa-filter-pill:focus-within .mensa-filter-pill__chip {
+    @apply bg-gray-200 dark:bg-gray-600 rounded-r-none;
+}
 
-    &__column {
-        @apply text-gray-600 dark:text-gray-300;
-    }
+.mensa-filter-pill__column {
+    @apply text-gray-600 dark:text-gray-300;
+}
 
-    &__operator {
-        @apply rounded px-1 bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300;
-    }
+.mensa-filter-pill__operator {
+    @apply rounded px-1 bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-300;
+}
 
-    &__value {
-        @apply rounded pl-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400 font-medium;
-    }
+.mensa-filter-pill__value {
+    @apply rounded pl-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400 font-medium;
+}
 
-    &__remove {
-        @apply inline-flex items-center justify-center w-0 px-0 text-gray-400 bg-gray-100 dark:bg-gray-700 cursor-pointer overflow-hidden opacity-0 -translate-x-1 pointer-events-none transition-all duration-200;
-    }
+.mensa-filter-pill__remove {
+    @apply inline-flex items-center justify-center w-0 px-0 text-gray-400 bg-gray-100 dark:bg-gray-700 cursor-pointer overflow-hidden opacity-0 -translate-x-1 pointer-events-none transition-all duration-200;
+}
 
-    &:hover &__remove,
-    &:focus-within &__remove {
-        @apply w-7 px-1.5 opacity-100 translate-x-0 pointer-events-auto;
-    }
+.mensa-filter-pill:hover .mensa-filter-pill__remove,
+.mensa-filter-pill:focus-within .mensa-filter-pill__remove {
+    @apply w-7 px-1.5 opacity-100 translate-x-0 pointer-events-auto;
+}
 
-    &__remove:hover {
-        @apply text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200;
-    }
+.mensa-filter-pill__remove:hover {
+    @apply text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200;
 }

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

@@ -1,48 +1,46 @@
-.mensa-table {
-    &__search-bar {
-        @apply flex items-center gap-1.5 flex-1 min-w-0 h-full px-2;
-
-        &__pills-area {
-            @apply flex flex-1 flex-wrap items-center gap-1 min-w-0;
-        }
-
-        &__input-wrapper {
-            @apply relative flex items-center flex-1 min-w-[4rem];
-        }
+.mensa-table__search-bar {
+    @apply flex items-center gap-1.5 flex-1 min-w-0 h-full px-2;
+}
 
-        &__search-icon {
-            @apply absolute left-2 text-gray-400 pointer-events-none -ml-4;
-            font-size: 0.9rem;
-            /* icon is after input in DOM but floats left via absolute positioning */
-        }
+.mensa-table__search-bar__pills-area {
+    @apply flex flex-1 flex-wrap items-center gap-1 min-w-0;
+}
 
-        &__input {
-            @apply w-full bg-transparent text-xs text-gray-700 dark:text-gray-200 placeholder:text-gray-400;
-            /* Override @tailwindcss/forms — direct CSS beats attribute selector specificity */
-            background-color: transparent !important;
-            border: none !important;
-            outline: none !important;
-            box-shadow: none !important;
-            padding: 0 0.25rem 0 1.5rem;
+.mensa-table__search-bar__input-wrapper {
+    @apply relative flex items-center flex-1 min-w-[4rem];
+}
 
-            &:focus {
-                border: none !important;
-                outline: none !important;
-                box-shadow: none !important;
-            }
+.mensa-table__search-bar__search-icon {
+    @apply absolute left-2 text-gray-400 pointer-events-none -ml-4;
+    font-size: 0.9rem;
+    /* icon is after input in DOM but floats left via absolute positioning */
+}
 
-            /* Hide the icon that follows when input has content (placeholder not shown) */
-            &:not(:placeholder-shown) ~ .mensa-table__search-bar__search-icon {
-                display: none;
-            }
-        }
+.mensa-table__search-bar__input {
+    @apply w-full bg-transparent text-xs text-gray-700 dark:text-gray-200 placeholder:text-gray-400;
+    /* Override @tailwindcss/forms — direct CSS beats attribute selector specificity */
+    background-color: transparent !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+    padding: 0 0.25rem 0 1.5rem;
+
+    &:focus {
+        border: none !important;
+        outline: none !important;
+        box-shadow: none !important;
+    }
 
-        &__clear {
-            @apply flex-none p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer;
-        }
+    /* Hide the icon that follows when input has content (placeholder not shown) */
+    &:not(:placeholder-shown) ~ .mensa-table__search-bar__search-icon {
+        display: none;
     }
 }
 
+.mensa-table__search-bar__clear {
+    @apply flex-none p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer;
+}
+
 /* Hide placeholder when visible filter pills exist.
    User-added pills (no data-view-filter) are always visible.
    View-filter pills are only visible when the eye toggle is showing them. */

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

@@ -313,7 +313,14 @@ export default class FilterPillListComponentController extends ApplicationContro
             Object.keys(order).length > 0 ||
             columnOrder.length > 0;
 
-        const alreadyRendered = Object.keys(this.renderedFilters()).length > 0;
+        // Pills rendered by the server (e.g. a view's default filters) must not win
+        // over filters the user changed or cleared.
+        const rendered = this.renderedFilters();
+        const filtersDiffer =
+            filtersProvided &&
+            JSON.stringify(rendered) !== JSON.stringify(filters);
+        const alreadyRendered =
+            Object.keys(rendered).length > 0 && !filtersDiffer;
 
         if (!hasState || alreadyRendered || table.frameLoadHandled) {
             if (typeof table.loadFrame === "function") {
@@ -480,8 +487,8 @@ export default class FilterPillListComponentController extends ApplicationContro
                 filter.value = isMultiple
                     ? this.mensaAddFilterOutlet.selectedValues
                     : this.mensaAddFilterOutlet.hasValueTarget
-                      ? this.mensaAddFilterOutlet.valueTarget.value
-                      : "";
+                        ? this.mensaAddFilterOutlet.valueTarget.value
+                        : "";
             }
             filters[this.mensaAddFilterOutlet.selectedFilterColumn] = filter;
         }
@@ -580,7 +587,7 @@ export default class FilterPillListComponentController extends ApplicationContro
         this.updateSearchPlaceholder();
     }
 
-    updateSearchPlaceholder() {}
+    updateSearchPlaceholder() { }
 
     _supportsColumnFilters() {
         return (
@@ -722,7 +729,7 @@ export default class FilterPillListComponentController extends ApplicationContro
             } else {
                 window.localStorage.setItem(key, value);
             }
-        } catch (e) {}
+        } catch (e) { }
     }
 
     readStorage(key) {
@@ -772,7 +779,7 @@ export default class FilterPillListComponentController extends ApplicationContro
 
     // Tables built with different params keep separate browser state.
     get storageName() {
-        return this.storageKeyValue || this.tableNameValue;
+        return this.tableStorageKey || this.storageKeyValue || this.tableNameValue;
     }
 
     get filtersStorageKey() {

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

@@ -1,44 +1,40 @@
-.mensa-table {
-    &__control_bar__button[aria-pressed="true"] {
-        @apply text-primary-600 dark:text-primary-400;
-    }
+.mensa-table__control_bar__button[aria-pressed="true"] {
+    @apply text-primary-600 dark:text-primary-400;
+}
 
-    &__group_by {
-        &__popover {
-            @apply fixed z-50 w-72 max-h-96 overflow-y-auto rounded-xl bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 py-2;
-        }
+.mensa-table__group_by__popover {
+    @apply fixed z-50 w-72 max-h-96 overflow-y-auto rounded-xl bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black/5 py-2;
+}
 
-        &__heading {
-            @apply px-4 pt-2 pb-1 text-sm font-semibold tracking-wider text-gray-900 dark:text-gray-500;
-        }
+.mensa-table__group_by__heading {
+    @apply px-4 pt-2 pb-1 text-sm font-semibold tracking-wider text-gray-900 dark:text-gray-500;
+}
 
-        &__option {
-            @apply w-full flex items-center gap-3 px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer;
-        }
+.mensa-table__group_by__option {
+    @apply w-full flex items-center gap-3 px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer;
+}
 
-        &__check {
-            @apply w-3 flex-none text-xs text-gray-700 dark:text-gray-200;
-        }
+.mensa-table__group_by__check {
+    @apply w-3 flex-none text-xs text-gray-700 dark:text-gray-200;
+}
 
-        &__option:not([aria-checked="true"]) &__check {
-            @apply invisible;
-        }
+.mensa-table__group_by__option:not([aria-checked="true"]) .mensa-table__group_by__check {
+    @apply invisible;
+}
 
-        &__aggregates {
-            @apply mt-1 border-t border-gray-100 dark:border-gray-700 pt-1;
+.mensa-table__group_by__aggregates {
+    @apply mt-1 border-t border-gray-100 dark:border-gray-700 pt-1;
 
-            &[aria-disabled="true"] {
-                @apply opacity-50 pointer-events-none;
-            }
-        }
+    &[aria-disabled="true"] {
+        @apply opacity-50 pointer-events-none;
+    }
+}
 
-        &__aggregate {
-            @apply block px-4 py-1.5;
+.mensa-table__group_by__aggregate {
+    @apply block px-4 py-1.5;
 
-            label {
-                @apply mb-1 block truncate text-sm font-medium text-gray-900 dark:text-gray-100;
-            }
-        }
+    label {
+        @apply mb-1 block truncate text-sm font-medium text-gray-900 dark:text-gray-100;
     }
 }
 

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

@@ -135,11 +135,11 @@ export default class GroupByController extends ApplicationController {
     }
 
     get groupByStorageKey() {
-        return `mensa:group_by:${this.storageKeyValue}`;
+        return `mensa:group_by:${this.tableStorageKey || this.storageKeyValue}`;
     }
 
     get aggregatesStorageKey() {
-        return `mensa:aggregates:${this.storageKeyValue}`;
+        return `mensa:aggregates:${this.tableStorageKey || this.storageKeyValue}`;
     }
 
     _readJson(key) {
@@ -155,7 +155,7 @@ export default class GroupByController extends ApplicationController {
     _writeStorage(key, value) {
         try {
             window.localStorage.setItem(key, value);
-        } catch (e) {}
+        } catch (e) { }
     }
 
     _readStorage(key) {

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

@@ -6,34 +6,32 @@
             @apply pt-3 pb-2 text-gray-900 dark:text-gray-100;
         }
     }
+}
 
-    &__group-header {
-        &__title {
-            @apply flex items-center gap-2;
-        }
+.mensa-table__group-header__title {
+    @apply flex items-center gap-2;
+}
 
-        &__toggle {
-            @apply inline-flex w-4 justify-center text-xs text-gray-500 dark:text-gray-400 transition-transform;
-        }
+.mensa-table__group-header__toggle {
+    @apply inline-flex w-4 justify-center text-xs text-gray-500 dark:text-gray-400 transition-transform;
+}
 
-        &[aria-expanded="false"] &__toggle {
-            @apply -rotate-90;
-        }
+.mensa-table__group-header[aria-expanded="false"] .mensa-table__group-header__toggle {
+    @apply -rotate-90;
+}
 
-        &__value {
-            @apply font-semibold;
-        }
+.mensa-table__group-header__value {
+    @apply font-semibold;
+}
 
-        &__count {
-            @apply rounded-full bg-gray-200 dark:bg-gray-700 px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-300;
-        }
+.mensa-table__group-header__count {
+    @apply rounded-full bg-gray-200 dark:bg-gray-700 px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-300;
+}
 
-        &__aggregate {
-            @apply text-sm font-medium text-gray-700 dark:text-gray-200;
-        }
+.mensa-table__group-header__aggregate {
+    @apply text-sm font-medium text-gray-700 dark:text-gray-200;
+}
 
-        &__aggregate-label {
-            @apply mr-1 text-xs font-normal uppercase text-gray-400 dark:text-gray-500;
-        }
-    }
+.mensa-table__group-header__aggregate-label {
+    @apply mr-1 text-xs font-normal uppercase text-gray-400 dark:text-gray-500;
 }

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

@@ -4,7 +4,12 @@ import ApplicationController from "mensa/controllers/application_controller";
 // remembered per table and group column.
 export default class GroupsController extends ApplicationController {
     static targets = ["header", "row"];
-    static values = { storageKey: String };
+    static values = { column: String };
+
+    // The frame is rendered by Mensa's own controller, so the page's key is read from the table element.
+    get storageKeyValue() {
+        return `mensa:collapsed_groups:${this.tableStorageKey}:${this.columnValue}`;
+    }
 
     connect() {
         super.connect();
@@ -58,6 +63,6 @@ export default class GroupsController extends ApplicationController {
             } else {
                 window.localStorage.removeItem(this.storageKeyValue);
             }
-        } catch (e) {}
+        } catch (e) { }
     }
 }

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

@@ -1,72 +1,70 @@
-.mensa-table {
-    &__search {
-        @apply dark:bg-gray-800 dark:border-gray-800 border-b p-2;
+.mensa-table__search {
+    @apply dark:bg-gray-800 dark:border-gray-800 border-b p-2;
+}
 
-        &__button {
-            @apply cursor-pointer w-6 h-full text-gray-400;
-        }
+.mensa-table__search__button {
+    @apply cursor-pointer w-6 h-full text-gray-400;
+}
 
-        input&__input {
-            @apply pl-2 h-6 w-full border-0 bg-transparent pr-4 text-gray-600 dark:text-gray-400 placeholder:text-gray-400 focus:ring-0 text-sm;
-        }
-    }
+input.mensa-table__search__input {
+    @apply pl-2 h-6 w-full border-0 bg-transparent pr-4 text-gray-600 dark:text-gray-400 placeholder:text-gray-400 focus:ring-0 text-sm;
+}
 
-    &__save-view-dialog {
-        @apply w-[26rem] max-w-[90vw] 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;
+.mensa-table__save-view-dialog {
+    @apply w-[26rem] max-w-[90vw] 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);
-        }
+    &::backdrop {
+        @apply bg-gray-900/40;
+        backdrop-filter: blur(2px);
+    }
+}
 
-        &__form {
-            @apply flex flex-col gap-5 p-6;
-        }
+.mensa-table__save-view-dialog__form {
+    @apply flex flex-col gap-5 p-6;
+}
 
-        &__header {
-            @apply flex flex-col gap-1;
-        }
+.mensa-table__save-view-dialog__header {
+    @apply flex flex-col gap-1;
+}
 
-        &__title {
-            @apply text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100;
-        }
+.mensa-table__save-view-dialog__title {
+    @apply text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100;
+}
 
-        &__subtitle {
-            @apply text-sm text-gray-500 dark:text-gray-400;
-        }
+.mensa-table__save-view-dialog__subtitle {
+    @apply text-sm text-gray-500 dark:text-gray-400;
+}
 
-        &__field {
-            @apply flex flex-col gap-1.5;
-        }
+.mensa-table__save-view-dialog__field {
+    @apply flex flex-col gap-1.5;
+}
 
-        &__label {
-            @apply text-sm font-medium text-gray-700 dark:text-gray-300;
-        }
+.mensa-table__save-view-dialog__label {
+    @apply text-sm font-medium text-gray-700 dark:text-gray-300;
+}
 
-        input&__input,
-        textarea&__textarea {
-            @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;
-        }
+input.mensa-table__save-view-dialog__input,
+textarea.mensa-table__save-view-dialog__textarea {
+    @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;
+}
 
-        textarea&__textarea {
-            @apply resize-y min-h-[5rem];
-        }
+textarea.mensa-table__save-view-dialog__textarea {
+    @apply resize-y min-h-[5rem];
+}
 
-        &__actions {
-            @apply flex justify-end gap-2 pt-1;
-        }
+.mensa-table__save-view-dialog__actions {
+    @apply flex justify-end gap-2 pt-1;
+}
 
-        &__button {
-            @apply 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;
+.mensa-table__save-view-dialog__button {
+    @apply 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;
-            }
+.mensa-table__save-view-dialog__button--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;
-            }
-        }
-    }
+.mensa-table__save-view-dialog__button--primary {
+    @apply bg-primary-600 text-white hover:bg-primary-500 focus:ring-primary-500;
 }

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

@@ -20,10 +20,6 @@
         @apply w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 py-2 pl-3 pr-10 text-gray-900 dark:text-gray-100 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 sm:text-sm;
     }
 
-    &__toolbar {
-        @apply flex items-center gap-2 px-2 py-1 border-b border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800;
-    }
-
     turbo-frame {
         @apply relative block;
     }
@@ -41,8 +37,12 @@
         @apply absolute inset-0 z-10 bg-gray-50/30 dark:bg-gray-900/50;
         pointer-events: all;
     }
+}
 
-    &__search-container {
-        @apply flex flex-1 min-w-0 items-stretch h-8 rounded-md bg-white dark:bg-gray-800;
-    }
+.mensa-table__toolbar {
+    @apply flex items-center gap-2 px-2 py-1 border-b border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800;
+}
+
+.mensa-table__search-container {
+    @apply flex flex-1 min-w-0 items-stretch h-8 rounded-md bg-white dark:bg-gray-800;
 }

data/app/components/mensa/table/component.html.erb

@@ -6,6 +6,7 @@
      data-mensa-table-views-url-value="<%= table.path_with_params(helpers.mensa.table_views_path(table.name)) %>"
      data-mensa-table-exports-url-value="<%= table.path_with_params(helpers.mensa.table_exports_path(table.name)) %>"
      data-controller="mensa-table"
+     data-mensa-table-storage-key-value="<%= table.storage_key %>"
      data-action="click@document->mensa-table#saveDropdownOutsideHandler"
      data-mensa-table-mensa-filter-pill-outlet="[data-controller='mensa-filter-pill']"
      data-mensa-table-mensa-filter-pill-list-outlet="#mensa-filter-pill-list-<%= table.table_id %>"

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

@@ -27,6 +27,7 @@ export default class TableComponentController extends ApplicationController {
         saveViewUrl: String,
         viewsUrl: String,
         exportsUrl: String,
+        storageKey: String,
     };
 
     connect() {
@@ -372,7 +373,7 @@ export default class TableComponentController extends ApplicationController {
         let aggregates = {};
         try {
             aggregates = JSON.parse(element.dataset.aggregates || "{}");
-        } catch (e) {}
+        } catch (e) { }
         this.groupState = {
             group_by: element.dataset.groupBy || "",
             aggregates,
@@ -505,7 +506,7 @@ export default class TableComponentController extends ApplicationController {
             } else {
                 window.localStorage.removeItem(this._viewFiltersStorageKey());
             }
-        } catch (e) {}
+        } catch (e) { }
     }
 
     // --- Export ---

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

@@ -1,4 +1,4 @@
-@import "paging.css";
+@import "./paging.css";
 
 .mensa-batch-bar {
     /* Sits on top of the thead row. Positioned relative to the .overflow-y-auto.relative
@@ -10,18 +10,18 @@
     left: 0;
     z-index: 10;
     @apply pt-[7px] pb-2 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600;
+}
 
-    &__content {
-        @apply h-5 flex items-center gap-2 pl-2;
-    }
+.mensa-batch-bar__content {
+    @apply h-5 flex items-center gap-2 pl-2;
+}
 
-    &__count {
-        @apply text-xs font-medium text-gray-700 dark:text-gray-200 mr-1;
-    }
+.mensa-batch-bar__count {
+    @apply text-xs font-medium text-gray-700 dark:text-gray-200 mr-1;
+}
 
-    &__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;
-    }
+.mensa-batch-bar__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;
 }
 
 .mensa-table {

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

@@ -21,7 +21,7 @@
     <table class="w-full"
            <% if table.grouped? %>
              data-controller="mensa-groups"
-             data-mensa-groups-storage-key-value="<%= "mensa:collapsed_groups:#{table.storage_key}:#{table.group_column.name}" %>"
+             data-mensa-groups-column-value="<%= table.group_column.name %>"
            <% end %>>
       <% if table.show_header? %>
         <thead>

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

@@ -24,11 +24,11 @@
 
                 &:not([href]) {
                     /* disabled links */
-                    @apply bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 hover:dark:bg-gray-800 text-gray-700 dark:text-gray-100 text-opacity-25 dark:text-opacity-50 cursor-default;
+                    @apply bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 hover:dark:bg-gray-800 text-gray-700/25 dark:text-gray-100/50 cursor-default;
                 }
 
                 &[aria-current="page"] {
-                    @apply z-10 bg-primary-200 dark:bg-primary-800 hover:bg-primary-200 hover:dark:bg-primary-800 text-gray-900 dark:text-white text-opacity-100 dark:text-opacity-100 border-none font-semibold;
+                    @apply z-10 bg-primary-200 dark:bg-primary-800 hover:bg-primary-200 hover:dark:bg-primary-800 text-gray-900 dark:text-white border-none font-semibold;
                 }
             }