@revenexx/studio-shared 0.3.2 → 0.4.0

package/dist/runtime/components/DataTable/FacetPanel.vue

@@ -0,0 +1,359 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { AltArrowDown, AltArrowRight, Filter, Magnifier } from "#solar-icons";
+import {
+  Button,
+  Checkbox,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ToolbarFilterTrigger
+} from "@revenexx/studio";
+import {
+  allNodes,
+  copySelection,
+  countInFacet,
+  countSelected,
+  expandTo,
+  flattenNodes,
+  initialExpanded,
+  isEmptyFacetValue,
+  sameSelection,
+  setFacetValue,
+  toggleFacetValue
+} from "../../lib/facets";
+const props = defineProps({
+  facets: { type: Array, required: true },
+  modelValue: { type: Object, required: true },
+  size: { type: String, required: false, default: "sm" }
+});
+const emit = defineEmits(["update:modelValue", "apply", "reset"]);
+const t = useT();
+const open = ref(false);
+const draft = ref(copySelection(props.modelValue));
+const search = ref("");
+const panelFacets = computed(() => props.facets);
+const activeKey = ref("");
+const activeFacet = computed(() => panelFacets.value.find((f) => f.key === activeKey.value) ?? panelFacets.value[0]);
+watch([panelFacets, open], () => {
+  if (!panelFacets.value.some((f) => f.key === activeKey.value)) {
+    activeKey.value = panelFacets.value[0]?.key ?? "";
+  }
+}, { immediate: true });
+watch(open, (isOpen) => {
+  if (isOpen) draft.value = copySelection(props.modelValue);
+  else search.value = "";
+});
+watch(() => props.modelValue, (value) => {
+  if (!open.value) draft.value = copySelection(value);
+}, { deep: true });
+const appliedCount = computed(() => countSelected(props.facets, props.modelValue));
+const dirty = computed(() => !sameSelection(draft.value, props.modelValue));
+const query = computed(() => search.value.trim().toLowerCase());
+function matches(facet, label) {
+  if (!query.value) return true;
+  if (facet.label.toLowerCase().includes(query.value)) return true;
+  return label.toLowerCase().includes(query.value);
+}
+function visibleOptions(facet) {
+  return (facet.options ?? []).filter((option) => matches(facet, option.label));
+}
+const visibleFacets = computed(() => {
+  if (!query.value) return panelFacets.value;
+  return panelFacets.value.filter((facet) => {
+    if (facet.label.toLowerCase().includes(query.value)) return true;
+    if (facet.kind === "check") return visibleOptions(facet).length > 0;
+    if (facet.kind === "tree") return visibleNodes(facet).length > 0;
+    return false;
+  });
+});
+function isTicked(key, value) {
+  const current = draft.value[key];
+  return Array.isArray(current) && current.includes(value);
+}
+function tick(key, value, on) {
+  const single = props.facets.find((f) => f.key === key)?.single;
+  draft.value = toggleFacetValue(draft.value, key, value, on, { single });
+}
+function textValue(key) {
+  const current = draft.value[key];
+  return typeof current === "string" ? current : "";
+}
+function setText(key, value) {
+  draft.value = setFacetValue(draft.value, key, value);
+}
+function range(key) {
+  const current = draft.value[key];
+  return current && typeof current === "object" && !Array.isArray(current) ? current : {};
+}
+function setBound(key, bound, value) {
+  draft.value = setFacetValue(draft.value, key, { ...range(key), [bound]: value });
+}
+const expanded = ref({});
+function expandedFor(facet) {
+  const existing = expanded.value[facet.key];
+  if (existing) return existing;
+  const seed = initialExpanded(facet.nodes ?? []);
+  const applied = props.modelValue[facet.key];
+  if (Array.isArray(applied)) {
+    for (const value of applied) {
+      for (const id of expandTo(facet.nodes ?? [], value)) seed.add(id);
+    }
+  }
+  expanded.value[facet.key] = seed;
+  return seed;
+}
+function toggleBranch(facet, value) {
+  const set = expandedFor(facet);
+  const next = new Set(set);
+  if (next.has(value)) next.delete(value);
+  else next.add(value);
+  expanded.value = { ...expanded.value, [facet.key]: next };
+}
+function isExpanded(facet, value) {
+  return expandedFor(facet).has(value);
+}
+function visibleNodes(facet) {
+  if (query.value) {
+    return allNodes(facet.nodes ?? []).filter((node) => node.label.toLowerCase().includes(query.value)).map((node) => ({ node, depth: 0 }));
+  }
+  return flattenNodes(facet.nodes ?? [], expandedFor(facet));
+}
+function apply() {
+  const next = copySelection(draft.value);
+  emit("update:modelValue", next);
+  emit("apply", next);
+  open.value = false;
+}
+function reset() {
+  draft.value = {};
+  emit("update:modelValue", {});
+  emit("reset");
+  open.value = false;
+}
+const nothingToReset = computed(() => Object.keys(draft.value).every((key) => isEmptyFacetValue(draft.value[key])) && appliedCount.value === 0);
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <ToolbarFilterTrigger
+        icon-only
+        :active="appliedCount > 0"
+        :count="appliedCount"
+        :label="t('shared.facetpanel.trigger.label')"
+        :size="size"
+      >
+        <template #icon>
+          <Filter :size="14" weight="BoldDuotone" />
+        </template>
+      </ToolbarFilterTrigger>
+    </PopoverTrigger>
+
+    <PopoverContent
+      align="start"
+      class="w-[34rem] max-w-[calc(100vw-2rem)] overflow-hidden p-0"
+    >
+      <div class="relative border-b border-border">
+        <Magnifier
+          :size="14"
+          class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
+        />
+        <input
+          v-model="search"
+          type="search"
+          :placeholder="t('shared.facetpanel.search.placeholder')"
+          :aria-label="t('shared.facetpanel.search.placeholder')"
+          class="h-10 w-full bg-transparent pr-3 pl-9 text-sm outline-hidden placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden"
+        >
+      </div>
+
+      <!-- Facets left, the one being edited right. Fixed size at two facets or
+           twenty; the rail's counts are what is left of "everything at once". -->
+      <div class="flex h-72">
+        <div
+          class="w-44 shrink-0 overflow-y-auto border-r border-border p-1.5"
+          role="tablist"
+          :aria-label="t('shared.facetpanel.rail.aria')"
+        >
+          <button
+            v-for="facet in visibleFacets"
+            :key="facet.key"
+            type="button"
+            role="tab"
+            :aria-selected="facet.key === activeFacet?.key"
+            class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors"
+            :class="facet.key === activeFacet?.key ? 'bg-primary/10 font-medium text-primary' : 'text-muted-foreground hover:bg-muted hover:text-foreground'"
+            @click="activeKey = facet.key"
+          >
+            <span class="min-w-0 flex-1 truncate">{{ facet.label }}</span>
+            <span
+              v-if="countInFacet(draft, facet.key)"
+              class="flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.625rem] font-semibold tabular-nums"
+              :class="facet.key === activeFacet?.key ? 'bg-primary text-primary-foreground' : 'bg-primary/15 text-primary'"
+            >{{ countInFacet(draft, facet.key) }}</span>
+          </button>
+          <p v-if="!visibleFacets.length" class="px-2.5 py-4 text-center text-sm text-muted-foreground">
+            {{ t("shared.facetpanel.empty.noFacet") }}
+          </p>
+        </div>
+
+        <div
+          v-if="activeFacet"
+          :key="activeFacet.key"
+          role="tabpanel"
+          class="min-w-0 flex-1 overflow-y-auto p-3"
+        >
+          <!-- Loading its options. A skeleton rather than an empty list, which
+               otherwise reads as "this dimension has no values". -->
+          <div v-if="activeFacet.loading" class="space-y-1.5 p-1">
+            <div v-for="i in 4" :key="i" class="h-6 animate-pulse rounded-md bg-muted" />
+          </div>
+
+          <!-- A set of values. Rows sit close and the hover band separates
+               them, which also makes each a comfortable target. -->
+          <div v-else-if="activeFacet.kind === 'check'" class="space-y-px">
+            <label
+              v-for="option in visibleOptions(activeFacet)"
+              :key="option.value"
+              class="flex items-start gap-2.5 rounded-md px-2 py-1.5 text-sm hover:bg-muted"
+              :class="option.disabled ? 'pointer-events-none opacity-45' : 'cursor-pointer'"
+            >
+              <Checkbox
+                class="mt-0.5"
+                :model-value="isTicked(activeFacet.key, option.value)"
+                :disabled="option.disabled"
+                @update:model-value="(v) => tick(activeFacet.key, option.value, v === true)"
+              />
+              <!-- Wraps rather than truncates: a label reading "Net 30 days,
+                   2% early settlement" is unusable cut off, and the pane cannot
+                   grow to fit it without becoming the layout it replaced. -->
+              <span class="min-w-0 flex-1">{{ option.label }}</span>
+              <span
+                v-if="option.count !== void 0"
+                class="shrink-0 tabular-nums text-muted-foreground"
+              >{{ option.count }}</span>
+            </label>
+            <p v-if="!visibleOptions(activeFacet).length" class="px-1.5 py-6 text-center text-sm text-muted-foreground">
+              {{ query ? t("shared.facetpanel.empty.noMatch", { query: search }) : t("shared.facetpanel.empty.noOption") }}
+            </p>
+          </div>
+
+          <!-- A hierarchy. The caret opens a branch; the box picks it. Two
+               targets, because "show me what is under Tools" and "narrow to
+               Tools" are different instructions and one control for both makes
+               every browse click a filter change. -->
+          <div v-else-if="activeFacet.kind === 'tree'" class="space-y-px">
+            <div
+              v-for="{ node, depth } in visibleNodes(activeFacet)"
+              :key="node.value"
+              class="flex items-start gap-1 rounded-md pr-2 text-sm hover:bg-muted"
+              :style="{ paddingLeft: `${depth * 18}px` }"
+            >
+              <!--
+                A chevron, at Bold weight.
+
+                Weight is the whole point here. The `▸` character it started as
+                rendered like a stray tick above the baseline; the Linear icon
+                that replaced it was two hairlines that read as a smudge beside
+                the checkbox. Bold gives the arrow enough body to be seen as a
+                control at this size without becoming the filled block a duotone
+                turns into at 15px — which would outweigh the checkbox next to
+                it, and the checkbox is what actually changes the list.
+
+                Only a branch gets one. A leaf keeps the spacer: an arrow with
+                nothing under it is a promise the row cannot keep, and the
+                absence is the cheapest way to see at a glance which rows go
+                deeper.
+              -->
+              <button
+                v-if="node.children?.length && !query"
+                type="button"
+                class="mt-1 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:text-primary"
+                :aria-expanded="isExpanded(activeFacet, node.value)"
+                :aria-label="isExpanded(activeFacet, node.value) ? t('shared.facetpanel.tree.collapse', { label: node.label }) : t('shared.facetpanel.tree.expand', { label: node.label })"
+                @click="toggleBranch(activeFacet, node.value)"
+              >
+                <AltArrowDown v-if="isExpanded(activeFacet, node.value)" :size="14" weight="Bold" />
+                <AltArrowRight v-else :size="14" weight="Bold" />
+              </button>
+              <span v-else class="mt-1 size-5 shrink-0" />
+              <label class="flex min-w-0 flex-1 cursor-pointer items-start gap-2.5 py-1.5">
+                <Checkbox
+                  class="mt-0.5"
+                  :model-value="isTicked(activeFacet.key, node.value)"
+                  @update:model-value="(v) => tick(activeFacet.key, node.value, v === true)"
+                />
+                <span class="min-w-0 flex-1">{{ node.label }}</span>
+                <span
+                  v-if="node.count !== void 0"
+                  class="shrink-0 tabular-nums text-muted-foreground"
+                >{{ node.count }}</span>
+              </label>
+            </div>
+            <p v-if="!visibleNodes(activeFacet).length" class="px-1.5 py-6 text-center text-sm text-muted-foreground">
+              {{ query ? t("shared.facetpanel.empty.noMatch", { query: search }) : t("shared.facetpanel.empty.noOption") }}
+            </p>
+          </div>
+
+          <!-- A typed string. Still a facet, still committed with the rest —
+               which is the whole reason it is not a second box in the toolbar. -->
+          <div v-else-if="activeFacet.kind === 'text'" class="p-1">
+            <Input
+              :model-value="textValue(activeFacet.key)"
+              :placeholder="activeFacet.placeholder || activeFacet.label"
+              :aria-label="activeFacet.label"
+              class="h-8 text-sm"
+              @update:model-value="(v) => setText(activeFacet.key, String(v))"
+              @keydown.enter="apply"
+            />
+          </div>
+
+          <!-- A bounded range. Either side alone is a real answer — "everything
+               since the migration" has no upper bound. -->
+          <div v-else-if="activeFacet.kind === 'date-range'" class="flex items-center gap-2 p-1">
+            <input
+              type="date"
+              :value="range(activeFacet.key).from ?? ''"
+              :aria-label="t('shared.facetpanel.range.from', { label: activeFacet.label })"
+              class="h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-xs"
+              @input="setBound(activeFacet.key, 'from', $event.target.value)"
+            >
+            <span class="text-xs text-muted-foreground">–</span>
+            <input
+              type="date"
+              :value="range(activeFacet.key).to ?? ''"
+              :aria-label="t('shared.facetpanel.range.to', { label: activeFacet.label })"
+              class="h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-xs"
+              @input="setBound(activeFacet.key, 'to', $event.target.value)"
+            >
+          </div>
+
+          <p v-if="activeFacet.hint && !activeFacet.loading" class="px-1.5 pt-3 text-xs text-muted-foreground">
+            {{ activeFacet.hint }}
+          </p>
+        </div>
+      </div>
+
+      <!--
+        The commit, in a bar of its own so it sits somewhere fixed rather than
+        floating after the last facet. A ghost and a primary at the same height
+        as every other button in the product — the two flush square-cornered
+        rectangles this pattern is usually drawn with read as a different
+        product, and did so at the one place where the decision gets made.
+
+        The dot is the only thing saying the draft differs from what the list is
+        showing.
+      -->
+      <div class="flex items-center justify-between gap-2 border-t border-border bg-muted/30 px-3 py-2.5">
+        <Button variant="ghost" size="sm" :disabled="nothingToReset" @click="reset">
+          {{ t("shared.facetpanel.action.reset") }}
+        </Button>
+        <Button size="sm" @click="apply">
+          {{ t("shared.facetpanel.action.apply") }}<span v-if="dirty" class="ml-1 opacity-70">•</span>
+        </Button>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>

package/dist/runtime/components/DataTable/FacetPanel.vue.d.ts

@@ -0,0 +1,21 @@
+import type { Facet, FacetSelection } from '../../lib/facets.js';
+type __VLS_Props = {
+    /** Every dimension this list can be narrowed by. All of them live here. */
+    facets: Facet[];
+    /** What is applied right now. */
+    modelValue: FacetSelection;
+    size?: 'sm' | 'default';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reset: () => any;
+    "update:modelValue": (value: FacetSelection) => any;
+    apply: (value: FacetSelection) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReset?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+    onApply?: ((value: FacetSelection) => any) | undefined;
+}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/DataTable/FilterMenu.d.vue.ts

@@ -6,15 +6,16 @@ type __VLS_Props = {
     /** How many are set, for the badge. */
     count?: number;
 };
-declare var __VLS_22: {};
+declare var __VLS_32: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_32) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    active: boolean;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     width: string;
+    active: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/DataTable/FilterMenu.vue.d.ts

@@ -6,15 +6,16 @@ type __VLS_Props = {
     /** How many are set, for the badge. */
     count?: number;
 };
-declare var __VLS_22: {};
+declare var __VLS_32: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_22) => any;
+    default?: (props: typeof __VLS_32) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    active: boolean;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     width: string;
+    active: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/DataTable/SavedViewsMenu.d.vue.ts

@@ -1,6 +1,11 @@
 import type { DataTableSavedViews } from './types.js';
 type __VLS_Props = {
     config: DataTableSavedViews;
+    /** Matches the row it sits in; `sm` is the 32px square its neighbours are. */
+    size?: 'sm' | 'default';
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/DataTable/SavedViewsMenu.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { AltArrowDown, Bookmark, TrashBinMinimalistic } from "#solar-icons";
+import { Bookmark, CheckCircle, Diskette, TrashBinMinimalistic } from "#solar-icons";
 import {
   Button,
   Dialog,
@@ -11,51 +11,33 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Input
 } from "@revenexx/studio";
+import { sameJson } from "../../lib/canonicalJson";
 const props = defineProps({
-  config: { type: Object, required: true }
+  config: { type: Object, required: true },
+  size: { type: String, required: false, default: "sm" }
 });
 const t = useT();
+const store = useSavedViews();
 const views = ref([]);
-function read() {
-  try {
-    if (typeof window === "undefined") return [];
-    const raw = window.localStorage.getItem(props.config.storageKey);
-    if (!raw) return [];
-    const parsed = JSON.parse(raw);
-    if (!Array.isArray(parsed)) return [];
-    return parsed.filter((v) => !!v && typeof v === "object" && typeof v.name === "string");
-  } catch {
-    return [];
-  }
-}
-function persist() {
-  try {
-    if (typeof window === "undefined") return;
-    window.localStorage.setItem(props.config.storageKey, JSON.stringify(views.value));
-  } catch {
-  }
+async function load() {
+  views.value = await store.list(props.config.storageKey);
 }
-onMounted(() => {
-  views.value = read();
-});
-watch(() => props.config.storageKey, () => {
-  views.value = read();
-});
+onMounted(load);
+watch(() => props.config.storageKey, load);
 const allLabel = computed(() => props.config.allLabel ?? t("shared.datatable.savedviews.all.default"));
-function same(a, b) {
-  return JSON.stringify(a) === JSON.stringify(b);
-}
-const isDefault = computed(() => same(props.config.snapshot(), props.config.defaultSnapshot()));
+const isDefault = computed(() => sameJson(props.config.snapshot(), props.config.defaultSnapshot()));
 function isActive(v) {
-  return same(v.snapshot, props.config.snapshot());
+  return sameJson(v.snapshot, props.config.snapshot());
 }
+const appliedView = computed(() => views.value.find(isActive) ?? null);
+const hasAppliedView = computed(() => appliedView.value !== null);
 const activeLabel = computed(() => {
-  const hit = views.value.find(isActive);
-  if (hit) return hit.name;
+  if (appliedView.value) return appliedView.value.name;
   return isDefault.value ? allLabel.value : t("shared.datatable.savedviews.custom");
 });
 function applyDefault() {
@@ -66,25 +48,31 @@ function applyView(v) {
 }
 const saveOpen = ref(false);
 const saveName = ref("");
+const saving = ref(false);
 function openSave() {
-  saveName.value = "";
+  saveName.value = appliedView.value?.name ?? "";
   saveOpen.value = true;
 }
-function save() {
+async function save() {
   const name = saveName.value.trim();
-  if (!name) return;
-  const entry = { name, snapshot: props.config.snapshot() };
-  const idx = views.value.findIndex((v) => v.name === name);
-  if (idx >= 0) views.value.splice(idx, 1, entry);
-  else views.value.push(entry);
-  persist();
-  saveOpen.value = false;
+  if (!name || saving.value) return;
+  saving.value = true;
+  try {
+    const entry = await store.save(props.config.storageKey, name, props.config.snapshot());
+    const at = views.value.findIndex((v) => v.name === name);
+    if (at >= 0) views.value.splice(at, 1, entry);
+    else views.value = [...views.value, entry].sort((a, b) => a.name.localeCompare(b.name));
+    saveOpen.value = false;
+  } finally {
+    saving.value = false;
+  }
 }
 const deleteTarget = ref(null);
-function remove() {
-  if (!deleteTarget.value) return;
-  views.value = views.value.filter((v) => v.name !== deleteTarget.value.name);
-  persist();
+async function remove() {
+  const target = deleteTarget.value;
+  if (!target) return;
+  await store.remove(props.config.storageKey, target.id);
+  views.value = views.value.filter((v) => v.id !== target.id);
   deleteTarget.value = null;
 }
 </script>
@@ -93,34 +81,57 @@ function remove() {
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
       <Button
-        variant="outline"
-        size="sm"
-        class="h-7 max-w-48 gap-1.5 text-sm"
-        :class="isDefault ? '' : 'border-primary/30 text-primary'"
-        :aria-label="t('shared.datatable.savedviews.aria')"
+        :variant="hasAppliedView ? 'default' : 'outline'"
+        :size="size === 'sm' ? 'icon-sm' : 'icon'"
+        :data-active="hasAppliedView"
+        :aria-label="t('shared.datatable.savedviews.trigger.aria', { name: activeLabel })"
+        :title="t('shared.datatable.savedviews.trigger.aria', { name: activeLabel })"
       >
-        <Bookmark :size="13" />
-        <span class="truncate">{{ activeLabel }}</span>
-        <AltArrowDown :size="12" class="opacity-60" />
+        <!--
+          Violet like the filter trigger and the column picker beside it, and
+          filled the same way once a stored view is in effect — the button
+          carries that state rather than a second mark inside it. On the filled
+          face the icon inherits the button's own foreground, or it would be
+          violet on violet.
+        -->
+        <span class="flex shrink-0 items-center" :class="hasAppliedView ? '' : 'text-primary'">
+          <Bookmark :class="size === 'sm' ? 'size-3.5' : 'size-4'" weight="BoldDuotone" />
+        </span>
       </Button>
     </DropdownMenuTrigger>
-    <DropdownMenuContent align="end" class="w-56">
+    <!--
+      `align="start"`, like every other menu in this row. It was `end`, so this
+      was the one control whose menu grew to the LEFT of its trigger while the
+      market switcher's and the column picker's grew right — a menu that opens
+      the other way is one a reader has to re-find every time.
+    -->
+    <DropdownMenuContent align="start" class="w-60">
+      <!-- Named, like the market switcher's "Showing" and the column picker's
+           "Columns": a menu of bare rows does not say what it is a menu OF. -->
+      <DropdownMenuLabel>{{ t("shared.datatable.savedviews.heading") }}</DropdownMenuLabel>
+      <!--
+        A tick, not just violet text. The mark says WHICH row is in effect, and
+        a reader who cannot separate the two hues gets nothing from a colour —
+        the same reason the market switcher puts a check on its active option.
+      -->
       <DropdownMenuItem class="gap-2" @select="applyDefault">
-        <span class="flex-1 truncate">{{ allLabel }}</span>
-        <span v-if="isDefault" class="text-xs text-primary">{{ t("shared.datatable.savedviews.active.badge") }}</span>
+        <span class="flex-1 truncate" :class="isDefault ? 'font-medium text-primary' : ''">{{ allLabel }}</span>
+        <CheckCircle v-if="isDefault" :size="14" weight="Bold" class="shrink-0 text-primary" />
       </DropdownMenuItem>
       <template v-if="views.length">
         <DropdownMenuSeparator />
         <DropdownMenuItem
           v-for="v in views"
-          :key="v.name"
+          :key="v.id"
           class="gap-2"
+          :aria-current="isActive(v) ? 'true' : void 0"
           @select="applyView(v)"
         >
-          <span class="flex-1 truncate">{{ v.name }}</span>
+          <span class="min-w-0 flex-1 truncate" :class="isActive(v) ? 'font-medium text-primary' : ''">{{ v.name }}</span>
+          <CheckCircle v-if="isActive(v)" :size="14" weight="Bold" class="shrink-0 text-primary" />
           <span
             role="button"
-            class="text-muted-foreground transition-colors hover:text-rose-600"
+            class="shrink-0 text-muted-foreground transition-colors hover:text-rose-600"
             :aria-label="t('shared.datatable.savedviews.delete.aria', { name: v.name })"
             @click.stop="deleteTarget = v"
             @pointerdown.stop.prevent
@@ -130,9 +141,18 @@ function remove() {
         </DropdownMenuItem>
       </template>
       <DropdownMenuSeparator />
-      <DropdownMenuItem @select="openSave">
-        {{ t("shared.datatable.savedviews.action.savecurrent") }}
+      <DropdownMenuItem class="gap-2" @select="openSave">
+        <Diskette :size="14" class="shrink-0 text-muted-foreground" />
+        <span class="flex-1">{{ t("shared.datatable.savedviews.action.savecurrent") }}</span>
       </DropdownMenuItem>
+      <!--
+        Where the last read or write actually landed. One line, and only when
+        the answer is the surprising one: a control that claims nothing is
+        better than one that claims a sync it did not get.
+      -->
+      <p v-if="!store.durable" class="px-2 pt-1.5 pb-1 text-xs text-muted-foreground">
+        {{ t("shared.datatable.savedviews.local.note") }}
+      </p>
     </DropdownMenuContent>
   </DropdownMenu>
 
@@ -158,7 +178,7 @@ function remove() {
         <Button variant="outline" @click="saveOpen = false">
           {{ t("shared.datatable.savedviews.savedialog.action.cancel") }}
         </Button>
-        <Button :disabled="!saveName.trim()" @click="save">
+        <Button :disabled="!saveName.trim() || saving" @click="save">
           {{ t("shared.datatable.savedviews.savedialog.action.save") }}
         </Button>
       </DialogFooter>