@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/shell/SettingsNav.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
+import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
+import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
+import {
+  findActiveSettingsPath,
+  useSettingsNavigation,
+  type SettingsNavGroup,
+  type SettingsNavPage,
+} from "../../../../composables/settings/useSettingsNavigation";
+
+const SETTINGS_INDEX_PATH = "/settings";
+const ALL_SETTINGS_ICON = "i-ph-squares-four";
+
+// v2 settings nav: title, search, "All settings", then one eyebrow-labelled
+// group per scope. Under lg it folds into a horizontal strip of items.
+const theme = tv({
+  slots: {
+    root: "flex gap-1.5 overflow-x-auto no-scrollbar max-lg:-mx-4 max-lg:px-4 lg:grid lg:gap-[18px] lg:overflow-visible",
+    title:
+      "hidden px-2.5 text-[17px] font-[650] tracking-[-0.03em] text-highlighted lg:block",
+    search: "hidden lg:block",
+    group: "contents lg:grid lg:gap-px",
+    groupLabel:
+      "hidden px-2.5 pb-1.5 font-mono text-[10.5px] font-semibold tracking-[0.12em] text-dimmed uppercase lg:block",
+    item: "flex h-8 shrink-0 items-center gap-2.5 rounded-md px-2.5 text-[13.5px] font-medium whitespace-nowrap text-muted transition-colors hover:bg-elevated hover:text-highlighted max-lg:border max-lg:border-default",
+    itemIcon: "size-[17px] shrink-0",
+    itemLabel: "min-w-0 truncate",
+    trailBadge:
+      "ms-auto hidden rounded-full bg-elevated px-1.5 font-mono text-[10.5px] font-semibold tabular-nums text-muted lg:inline",
+    trailDot: "ms-auto hidden size-[7px] shrink-0 rounded-full lg:block",
+    empty: "hidden px-2.5 text-[12.5px] text-muted lg:block",
+    previewLock: "ms-auto size-3.5 shrink-0",
+  },
+  variants: {
+    active: {
+      true: {
+        item: "bg-primary/10 font-semibold text-primary hover:bg-primary/10 hover:text-primary max-lg:border-primary/35",
+      },
+    },
+    status: {
+      success: { trailDot: "bg-success" },
+      warning: { trailDot: "bg-warning" },
+      error: { trailDot: "bg-error" },
+    },
+    // "Preview as role" only, the same hatches as the sidebar's: red for a
+    // page the role could not open, orange for one it opens partially.
+    previewState: {
+      hidden: {
+        item: "text-muted dms-hatch-locked",
+        previewLock: "text-error",
+      },
+      partial: {
+        item: "dms-hatch-partial",
+        previewLock: "text-warning",
+      },
+    },
+  },
+});
+
+// Registered id of the settings index ("All settings").
+const SETTINGS_INDEX_ID = "settings";
+
+const ui = computed(() => theme());
+
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+const route = useDmsRoute();
+const { groups } = useSettingsNavigation();
+
+const query = ref("");
+
+const matchesQuery = (page: SettingsNavPage, needle: string): boolean =>
+  [page.label, page.description].some((text) =>
+    processI18n(text).toLocaleLowerCase().includes(needle),
+  );
+
+const visibleGroups = computed<SettingsNavGroup[]>(() => {
+  const needle = query.value.trim().toLocaleLowerCase();
+  if (!needle) return groups.value;
+  return groups.value
+    .map((group) => ({
+      ...group,
+      pages: group.pages.filter((page) => matchesQuery(page, needle)),
+    }))
+    .filter((group) => group.pages.length > 0);
+});
+
+// Only the most specific entry is active: on pending invitations, Members
+// (whose path it lies under) is not. Read from every entry, not the searched
+// ones, so a search never moves the highlight.
+const activePath = computed(() =>
+  findActiveSettingsPath(
+    route.path,
+    groups.value.flatMap((group) => group.pages.map((page) => page.to)),
+  ),
+);
+const isActive = (to: string): boolean => activePath.value === to;
+
+// Under lg the nav is a horizontal strip wider than the screen: the active
+// item is centred in it on load and on every page change, so a page late in
+// the list (Roles, Member invitations) is not highlighted out of sight.
+const navRoot = useTemplateRef<HTMLElement>("navRoot");
+function revealActiveItem(): void {
+  const root = navRoot.value;
+  if (!root || root.scrollWidth <= root.clientWidth) return;
+  const item = root.querySelector<HTMLElement>('[aria-current="page"]');
+  if (!item) return;
+  const itemBox = item.getBoundingClientRect();
+  const rootBox = root.getBoundingClientRect();
+  root.scrollLeft +=
+    itemBox.left - rootBox.left - (root.clientWidth - itemBox.width) / 2;
+}
+onMounted(revealActiveItem);
+watch(() => route.path, revealActiveItem, { flush: "post" });
+
+// The page's badge, counted by the server when the menu loads (`navBadge`)
+// or declared, then kept fresh by the page that shows the count.
+const { badges: navBadges } = useNavBadges();
+const badgeOf = (page: SettingsNavPage): string | undefined =>
+  navBadges.value[page.fullId] ?? page.badge;
+
+// "Preview as role": a settings page the role could not open stays listed,
+// locked, so the preview shows what the role loses; one it opens without all
+// of it is drawn partially locked.
+const preview = usePermissionPreview();
+const PREVIEW_STATE_LABELS = {
+  hidden: "page.settings.roles.preview.menu_hidden",
+  partial: "page.settings.roles.preview.menu_partial",
+} as const;
+const previewStateLabel = (
+  state: keyof typeof PREVIEW_STATE_LABELS | null,
+): string | undefined =>
+  state
+    ? t(PREVIEW_STATE_LABELS[state], {
+        role: preview.session.value?.roleName ?? "",
+      })
+    : undefined;
+</script>
+
+<template>
+  <nav ref="navRoot" :class="ui.root()" :aria-label="t('page.settings.title')">
+    <h2 :class="ui.title()">{{ t("page.settings.title") }}</h2>
+
+    <!-- "/" belongs to this search on every settings page; a page with a
+      search of its own focuses it with ⌘ / or Ctrl / instead, never "/". -->
+    <DmsSearchInput
+      v-model="query"
+      :placeholder="t('page.settings.shell.search_placeholder')"
+      shortcut="nav"
+      size="sm"
+      :class="ui.search()"
+    />
+
+    <DmsLink
+      :to="SETTINGS_INDEX_PATH"
+      :class="
+        ui.item({
+          active: route.path === SETTINGS_INDEX_PATH,
+          previewState: preview.entryState(SETTINGS_INDEX_ID) ?? undefined,
+        })
+      "
+      :aria-current="route.path === SETTINGS_INDEX_PATH ? 'page' : undefined"
+    >
+      <UIcon :name="ALL_SETTINGS_ICON" :class="ui.itemIcon()" />
+      <span :class="ui.itemLabel()">
+        {{ t("page.settings.shell.all_settings") }}
+      </span>
+      <UIcon
+        v-if="preview.entryState(SETTINGS_INDEX_ID)"
+        name="i-ph-lock-simple"
+        :class="
+          ui.previewLock({
+            previewState: preview.entryState(SETTINGS_INDEX_ID) ?? undefined,
+          })
+        "
+        role="img"
+        :aria-label="previewStateLabel(preview.entryState(SETTINGS_INDEX_ID))"
+      />
+    </DmsLink>
+
+    <div v-for="group in visibleGroups" :key="group.id" :class="ui.group()">
+      <span :class="ui.groupLabel()">{{ processI18n(group.label) }}</span>
+      <DmsLink
+        v-for="page in group.pages"
+        :key="page.fullId"
+        :to="page.to"
+        :class="
+          ui.item({
+            active: isActive(page.to),
+            previewState: preview.entryState(page.fullId) ?? undefined,
+          })
+        "
+        :aria-current="isActive(page.to) ? 'page' : undefined"
+      >
+        <UIcon :name="page.icon" :class="ui.itemIcon()" />
+        <span :class="ui.itemLabel()">{{ processI18n(page.label) }}</span>
+        <UIcon
+          v-if="preview.entryState(page.fullId)"
+          name="i-ph-lock-simple"
+          :class="
+            ui.previewLock({
+              previewState: preview.entryState(page.fullId) ?? undefined,
+            })
+          "
+          role="img"
+          :aria-label="previewStateLabel(preview.entryState(page.fullId))"
+        />
+        <span v-else-if="badgeOf(page)" :class="ui.trailBadge()">
+          {{ badgeOf(page) }}
+        </span>
+        <span
+          v-else-if="page.status && page.status !== 'neutral'"
+          :class="ui.trailDot({ status: page.status })"
+          role="img"
+        />
+      </DmsLink>
+    </div>
+
+    <p v-if="query && visibleGroups.length === 0" :class="ui.empty()">
+      {{ t("page.settings.shell.no_results") }}
+    </p>
+  </nav>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/shell/SettingsShell.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import SettingsNav from "./SettingsNav.vue";
+</script>
+
+<template>
+  <!-- v2 settings shell: one width for every settings page, the nav column
+       sticking while the content scrolls. top-0: the scroll area's own top
+       padding already gives the gap; any extra offset pushed the nav below
+       its place whenever the content was tall enough, so it jumped on page
+       changes and sat higher on short pages. -->
+  <div
+    class="mx-auto grid w-full max-w-[1200px] gap-4 lg:grid-cols-[216px_minmax(0,1fr)] lg:gap-6 xl:gap-10"
+  >
+    <SettingsNav class="lg:sticky lg:top-0 lg:self-start" />
+    <!-- The content column is a size container: at lg the app sidebar and
+         this nav leave it narrower than a phone in landscape, so the pages
+         lay out from its width (@…/settings variants), not the viewport's. -->
+    <div class="@container/settings min-w-0">
+      <slot />
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/shortcut/KeyboardShortcut.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-// Keyboard combo (design .kcombo): Nuxt UI <UKbd> caps joined by dimmed "+"
-// separators. The .kkey look (mono, inset surface, thicker bottom edge) is
-// applied via the size="lg" variant in app.config (ui.kbd), not here.
+// v2 .kbd-combo: the keys of a combination side by side, without separators.
 interface Props {
   keys: string[];
 }
@@ -10,10 +8,7 @@ defineProps<Props>();
 </script>
 
 <template>
-  <div class="inline-flex items-center gap-1.5">
-    <template v-for="(key, index) in keys" :key="index">
-      <span v-if="index > 0" class="text-dimmed text-[11px]">+</span>
-      <UKbd size="lg" :value="key" />
-    </template>
+  <div class="inline-flex shrink-0 items-center gap-[3px]">
+    <UKbd v-for="(key, index) in keys" :key="index" :value="key" />
   </div>
 </template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/AppearanceAccessibility.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import DmsSegmented from "#dms-ui/app/components/segmented/Segmented.vue";
+import type { ReduceMotionPreference } from "#dms-ui/app/build/utils/accessibilityPreferences";
+import { useAppearanceSave } from "./useAppearanceSave";
+
+const reduceMotionValues: ReduceMotionPreference[] = ["auto", "on", "off"];
+
+const { t } = useI18n();
+const { preferences, pick } = useAppearanceSave();
+
+const reduceMotionItems = computed(() =>
+  reduceMotionValues.map((value) => ({
+    value,
+    label: t(`page.settings.appearance.accessibility.motion_${value}`),
+  })),
+);
+
+function setReduceMotion(value: string | number | undefined): void {
+  const next = reduceMotionValues.find((option) => option === value);
+  if (next) pick("reduceMotion", next);
+}
+</script>
+
+<template>
+  <div>
+    <DmsFieldRow
+      label="$page.settings.appearance.accessibility.reduce_motion"
+      description="$page.settings.appearance.accessibility.reduce_motion_hint"
+    >
+      <DmsSegmented
+        :model-value="preferences.reduceMotion.value"
+        :items="reduceMotionItems"
+        :aria-label="t('page.settings.appearance.accessibility.reduce_motion')"
+        @update:model-value="setReduceMotion"
+      />
+    </DmsFieldRow>
+    <DmsFieldRow
+      label="$page.settings.appearance.accessibility.increase_contrast"
+      description="$page.settings.appearance.accessibility.increase_contrast_hint"
+    >
+      <USwitch
+        :model-value="preferences.increaseContrast.value"
+        @update:model-value="pick('increaseContrast', $event)"
+        :aria-label="
+          t('page.settings.appearance.accessibility.increase_contrast')
+        "
+      />
+    </DmsFieldRow>
+    <DmsFieldRow
+      label="$page.settings.appearance.accessibility.underline_links"
+      description="$page.settings.appearance.accessibility.underline_links_hint"
+    >
+      <USwitch
+        :model-value="preferences.underlineLinks.value"
+        @update:model-value="pick('underlineLinks', $event)"
+        :aria-label="
+          t('page.settings.appearance.accessibility.underline_links')
+        "
+      />
+    </DmsFieldRow>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/AppearanceDeveloper.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
+import CssVariablesList from "./CssVariablesList.vue";
+
+// Number of `--ui-*` variables, shown in the summary.
+const cssVariableCount = ref<number | null>(null);
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <!-- Collapsed by default: only module authors need the tokens. -->
+  <details class="group">
+    <summary
+      class="hover:bg-elevated/60 flex cursor-pointer list-none items-center gap-3 px-[18px] py-3.5"
+    >
+      <DmsIconWell icon="i-ph-brackets-curly" tone="muted" size="md" />
+      <span class="min-w-0 flex-1">
+        <span class="text-highlighted block text-[13px] font-semibold">
+          {{ t("page.settings.appearance.css_variables") }}
+        </span>
+        <span class="text-muted block text-[12.5px]">
+          {{ t("page.settings.appearance.css_variables_description") }}
+          ·
+          <!-- The variables are read after mount: a placeholder holds
+               the count's place until then. -->
+          <USkeleton
+            v-if="cssVariableCount === null"
+            aria-hidden="true"
+            class="inline-block h-2.5 w-20 align-middle"
+          />
+          <span v-else class="font-mono tabular-nums">
+            {{
+              t("page.settings.appearance.css_vars.count", {
+                count: cssVariableCount,
+              })
+            }}
+          </span>
+        </span>
+      </span>
+      <UIcon
+        name="i-ph-caret-down"
+        class="text-dimmed size-4 transition-transform group-open:rotate-180"
+      />
+    </summary>
+    <div class="border-default border-t">
+      <CssVariablesList @loaded="cssVariableCount = $event" />
+    </div>
+  </details>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/AppearanceOptionTile.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+
+interface AppearanceOptionTileProps {
+  /** Radio group name shared by the tiles of one choice. */
+  name: string;
+  value: string;
+  label: string;
+  hint?: string;
+  icon?: string;
+}
+
+const props = defineProps<AppearanceOptionTileProps>();
+const selected = defineModel<string>({ required: true });
+
+// v2 .cs-tile: a preview on a muted tile; the chosen one lifts onto the card
+// color with an accent border and halo.
+const theme = tv({
+  slots: {
+    root: "group flex cursor-pointer flex-col gap-3 rounded-[10px] border p-2.5 pb-3 transition has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-primary/60",
+    preview: "overflow-hidden rounded-md ring-1 ring-(--ui-border)",
+    footer: "flex items-center gap-2.5 px-1",
+    icon: "size-4 shrink-0 text-muted",
+    text: "min-w-0 flex-1",
+    label: "text-[13px] font-semibold text-highlighted",
+    // Wraps rather than truncates: three tiles in the narrow lg settings
+    // column cut every hint to a word.
+    hint: "text-[12px] leading-snug text-pretty text-muted",
+    radio:
+      "grid size-4 shrink-0 place-items-center rounded-full ring-1 ring-inset ring-(--ui-border-accented)",
+    radioDot: "size-1.5 rounded-full bg-(--dms-accent-on-fill)",
+  },
+  variants: {
+    active: {
+      true: {
+        root: "border-primary bg-(--ui-bg) ring-[6px] ring-primary/10",
+        icon: "text-primary",
+        radio: "bg-(--dms-accent-fill) ring-(--dms-accent-fill)",
+      },
+      false: {
+        root: "border-default bg-(--dms-bg-muted) hover:border-accented",
+      },
+    },
+  },
+});
+
+const ui = computed(() => theme({ active: selected.value === props.value }));
+const { processI18n } = useTranslation();
+</script>
+
+<template>
+  <label :class="ui.root()">
+    <input
+      v-model="selected"
+      type="radio"
+      :name="props.name"
+      :value="props.value"
+      class="sr-only"
+    />
+    <div :class="ui.preview()">
+      <slot name="preview" />
+    </div>
+    <div :class="ui.footer()">
+      <UIcon v-if="props.icon" :name="props.icon" :class="ui.icon()" />
+      <div :class="ui.text()">
+        <div :class="ui.label()">{{ processI18n(props.label) }}</div>
+        <div v-if="props.hint" :class="ui.hint()">
+          {{ processI18n(props.hint) }}
+        </div>
+      </div>
+      <span :class="ui.radio()" aria-hidden="true">
+        <span v-if="selected === props.value" :class="ui.radioDot()" />
+      </span>
+    </div>
+  </label>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/AppearanceScale.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import AppearanceOptionTile from "./AppearanceOptionTile.vue";
+import ScalePreview from "./ScalePreview.vue";
+import { useAppearanceSave } from "./useAppearanceSave";
+
+interface AppearanceScaleOption {
+  value: InterfaceScale;
+  label: string;
+  hint: string;
+}
+
+const scaleOptions: AppearanceScaleOption[] = [
+  {
+    value: "small",
+    label: "$page.settings.appearance.scale_small",
+    hint: "$page.settings.appearance.scale_small_hint",
+  },
+  {
+    value: "normal",
+    label: "$page.settings.appearance.scale_normal",
+    hint: "$page.settings.appearance.scale_normal_hint",
+  },
+  {
+    value: "large",
+    label: "$page.settings.appearance.scale_large",
+    hint: "$page.settings.appearance.scale_large_hint",
+  },
+];
+
+const { preferences, pick } = useAppearanceSave();
+
+function pickScale(value: string): void {
+  const option = scaleOptions.find((entry) => entry.value === value);
+  if (option) pick("interfaceScale", option.value);
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-3.5 p-[18px] sm:grid-cols-3">
+    <AppearanceOptionTile
+      v-for="option in scaleOptions"
+      :key="option.value"
+      :model-value="preferences.interfaceScale.value"
+      name="interface-scale"
+      :value="option.value"
+      :label="option.label"
+      :hint="option.hint"
+      @update:model-value="pickScale"
+    >
+      <template #preview>
+        <ScalePreview :scale="option.value" class="h-[118px] w-full" />
+      </template>
+    </AppearanceOptionTile>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/AppearanceSidebar.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useAppearanceSave } from "./useAppearanceSave";
+
+const { t } = useI18n();
+const { preferences, pick } = useAppearanceSave();
+</script>
+
+<template>
+  <DmsFieldRow
+    label="$page.settings.appearance.sidebar_start_collapsed"
+    description="$page.settings.appearance.sidebar_start_collapsed_hint"
+  >
+    <USwitch
+      :model-value="preferences.sidebarStartCollapsed.value"
+      @update:model-value="pick('sidebarStartCollapsed', $event)"
+      :aria-label="t('page.settings.appearance.sidebar_start_collapsed')"
+    />
+  </DmsFieldRow>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/theme/AppearanceTheme.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import AppearanceOptionTile from "./AppearanceOptionTile.vue";
+import ThemePreview from "./ThemePreview.vue";
+import { useAppearanceSave } from "./useAppearanceSave";
+
+interface AppearanceColorOption {
+  value: ColorModePreference;
+  label: string;
+  hint: string;
+  icon: string;
+}
+
+const colorOptions: AppearanceColorOption[] = [
+  {
+    value: "system",
+    label: "$page.settings.appearance.system",
+    hint: "$page.settings.appearance.system_hint",
+    icon: "i-ph-desktop",
+  },
+  {
+    value: "light",
+    label: "$page.settings.appearance.light",
+    hint: "$page.settings.appearance.light_hint",
+    icon: "i-ph-sun",
+  },
+  {
+    value: "dark",
+    label: "$page.settings.appearance.dark",
+    hint: "$page.settings.appearance.dark_hint",
+    icon: "i-ph-moon",
+  },
+];
+
+const { preferences, pick } = useAppearanceSave();
+
+function pickColorMode(value: string): void {
+  const option = colorOptions.find((entry) => entry.value === value);
+  if (option) pick("colorMode", option.value);
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-3.5 p-[18px] sm:grid-cols-3">
+    <AppearanceOptionTile
+      v-for="option in colorOptions"
+      :key="option.value"
+      :model-value="preferences.colorMode.value"
+      name="color-mode"
+      :value="option.value"
+      :label="option.label"
+      :hint="option.hint"
+      :icon="option.icon"
+      @update:model-value="pickColorMode"
+    >
+      <template #preview>
+        <ThemePreview :mode="option.value" class="h-[118px] w-full" />
+      </template>
+    </AppearanceOptionTile>
+  </div>
+</template>