@antelopejs/dms 0.6.1 → 0.7.0

package/frontend-vue/layers/dms-layout/app/build/composables/layout/useSidePanelWidth.ts

@@ -0,0 +1,113 @@
+import type { Ref } from "vue";
+import {
+  resolveSidePanelWidthBounds,
+  type SidePanel,
+  type SidePanelWidthBounds,
+} from "../../../composables/useAppSidePanels";
+import {
+  clampSidePanelWidth,
+  readSidePanelPreferences,
+  storedSidePanelWidth,
+  storeSidePanelWidth,
+  useSidePanelDragWidth,
+  useSidePanelPreferences,
+} from "./sidePanelState";
+
+/** @internal */
+export const SIDE_PANEL_KEYBOARD_STEP_PX = 16;
+
+type WidthStep = (width: number, bounds: SidePanelWidthBounds) => number;
+
+// The panel sits on the right: the arrow pointing away from it widens it.
+const KEYBOARD_STEPS: Record<string, WidthStep> = {
+  ArrowLeft: (width) => width + SIDE_PANEL_KEYBOARD_STEP_PX,
+  ArrowRight: (width) => width - SIDE_PANEL_KEYBOARD_STEP_PX,
+  Home: (_, bounds) => bounds.minWidth,
+  End: (_, bounds) => bounds.maxWidth,
+};
+
+interface DragStart {
+  x: number;
+  width: number;
+}
+
+/** @internal */
+export interface SidePanelWidth {
+  width: Readonly<Ref<number>>;
+  bounds: SidePanelWidthBounds;
+  isDragging: Readonly<Ref<boolean>>;
+  startDrag: (event: PointerEvent, renderedWidth: number) => void;
+  drag: (event: PointerEvent) => void;
+  endDrag: () => void;
+  resizeFromKey: (event: KeyboardEvent) => void;
+  reset: () => void;
+}
+
+/**
+ * The width of a side panel and the handlers of its resize handle: dragging,
+ * the arrow / Home / End keys, and a reset to the default width. The width is
+ * kept per panel id in the side panel cookie, written once a change settles;
+ * while the handle is dragged, the shared drag width moves the page with it.
+ *
+ * @internal
+ */
+export function useSidePanelWidth(panel: SidePanel): SidePanelWidth {
+  const bounds = resolveSidePanelWidthBounds(panel);
+  const preferences = useSidePanelPreferences();
+  const dragWidth = useSidePanelDragWidth();
+  const width = computed(
+    () =>
+      dragWidth.value ??
+      storedSidePanelWidth(
+        readSidePanelPreferences(preferences.value),
+        panel.id,
+        bounds,
+      ),
+  );
+  let dragStart: DragStart | null = null;
+
+  function commit(next: number): void {
+    storeSidePanelWidth(
+      preferences,
+      panel.id,
+      clampSidePanelWidth(next, bounds),
+    );
+  }
+
+  function startDrag(event: PointerEvent, renderedWidth: number): void {
+    event.preventDefault();
+    dragStart = { x: event.clientX, width: renderedWidth };
+    dragWidth.value = clampSidePanelWidth(renderedWidth, bounds);
+  }
+
+  function drag(event: PointerEvent): void {
+    if (dragStart === null) return;
+    const next = dragStart.width + dragStart.x - event.clientX;
+    dragWidth.value = clampSidePanelWidth(next, bounds);
+  }
+
+  function endDrag(): void {
+    if (dragStart === null) return;
+    dragStart = null;
+    commit(width.value);
+    dragWidth.value = null;
+  }
+
+  function resizeFromKey(event: KeyboardEvent): void {
+    const step = KEYBOARD_STEPS[event.key];
+    if (!step) return;
+    event.preventDefault();
+    commit(step(width.value, bounds));
+  }
+
+  return {
+    width,
+    bounds,
+    isDragging: computed(() => dragWidth.value !== null),
+    startDrag,
+    drag,
+    endDrag,
+    resizeFromKey,
+    reset: () => commit(bounds.defaultWidth),
+  };
+}

package/frontend-vue/layers/dms-layout/app/build/composables/navigation/useCategoryNavCards.ts

@@ -1,5 +1,6 @@
 import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
 import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
+import type { Tone } from "#dms-ui/app/types/tone";
 import { findTreeNode, listCategoryPages } from "../../utils/categoryPages";
 
 const DEFAULT_PAGE_ICON = "i-ph-file";
@@ -13,7 +14,9 @@ export interface CategoryNavCard {
   icon: string;
   to: string;
   /** The page's navigation badge, as the menu shows it. */
-  state?: string;
+  badge?: string;
+  /** The badge's tone, as the menu draws it. */
+  badgeTone?: Tone;
 }
 
 /**
@@ -24,21 +27,25 @@ export interface CategoryNavCard {
  */
 export function useCategoryNavCards(categoryId: () => string | undefined) {
   const siteLayout = useSiteLayout();
-  const { badges } = useNavBadges();
+  const { navBadgeOf } = useNavBadges();
   const cards = computed<CategoryNavCard[]>(() => {
     const id = categoryId();
     const category = id
       ? findTreeNode(siteLayout.siteLayoutTree.value, id)
       : undefined;
     if (!category) return [];
-    return listCategoryPages(category).map((page) => ({
-      id: page.fullId,
-      title: page.displayName,
-      description: page.description,
-      icon: page.icon || DEFAULT_PAGE_ICON,
-      to: page.fullSlug,
-      state: (badges.value[page.fullId] ?? page.badge) || undefined,
-    }));
+    return listCategoryPages(category).map((page) => {
+      const badge = navBadgeOf(page);
+      return {
+        id: page.fullId,
+        title: page.displayName,
+        description: page.description,
+        icon: page.icon || DEFAULT_PAGE_ICON,
+        to: page.fullSlug,
+        badge: badge?.label,
+        badgeTone: badge?.tone,
+      };
+    });
   });
   return { cards };
 }

package/frontend-vue/layers/dms-layout/app/build/composables/notification/useNotificationGroupsOpen.ts

@@ -0,0 +1,45 @@
+/** `localStorage` key prefix of the open or folded state of each preferences group. */
+export const NOTIFICATION_GROUP_STORAGE_PREFIX = "dms-notification-group:";
+
+const OPEN = "open";
+const FOLDED = "folded";
+
+function storageKey(categoryId: string): string {
+  return `${NOTIFICATION_GROUP_STORAGE_PREFIX}${categoryId}`;
+}
+
+function readStorage(key: string): string | null {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+function writeStorage(key: string, value: string): void {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    /* storage unavailable (private mode, quota): the group folds on reload */
+  }
+}
+
+/**
+ * Which groups of the preferences matrix are open. A group starts folded,
+ * so the page opens short and each group row's count sums it up; the state
+ * the viewer picks is kept per group in this browser.
+ */
+export const useNotificationGroupsOpen = () => {
+  const picked = ref<Record<string, boolean>>({});
+
+  const isOpen = (categoryId: string): boolean =>
+    picked.value[categoryId] ?? readStorage(storageKey(categoryId)) === OPEN;
+
+  const toggleOpen = (categoryId: string) => {
+    const open = !isOpen(categoryId);
+    picked.value = { ...picked.value, [categoryId]: open };
+    writeStorage(storageKey(categoryId), open ? OPEN : FOLDED);
+  };
+
+  return { isOpen, toggleOpen };
+};

package/frontend-vue/layers/dms-layout/app/build/composables/settings/profile/useProfilePreferences.ts

@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from "vue";
 import { useUserRegionalPreferences } from "#dms-core/app/composables/user/useUserRegionalPreferences";
 import { useUniqueLocales } from "#dms-core/app/composables/translation/useUniqueLocales";
 import { formatDate } from "#dms-core/app/utils/formatter";
+import { iconWellToneOf } from "#dms-ui/app/build/utils/tone";
 import { useAccessibilityPreferences } from "../../../../composables/general/useAccessibilityPreferences";
 import { useColorModePreference } from "../../../../composables/general/useColorModePreference";
 import { useInterfaceScale } from "../../../../composables/general/useInterfaceScale";
@@ -118,7 +119,7 @@ export function useProfilePreferences() {
 
   const notificationPreferences = useNotificationPreferences();
   const { subjects } = useNotificationCatalog();
-  const { unreadCount, areCountsLoaded } = useNotifications();
+  const { unreadCount, unreadTone, areCountsLoaded } = useNotifications();
   const isNotificationsLoading = computed(
     () => notificationPreferences.isLoading.value || !areCountsLoaded.value,
   );
@@ -132,6 +133,11 @@ export function useProfilePreferences() {
   const hasUnread = computed(
     () => !isNotificationsLoading.value && unreadCount.value > 0,
   );
+  // The well takes the unread badge's tone, the bell's and the navigation's,
+  // which the server weighs; quiet when nothing is unread.
+  const notificationsTone = computed(() =>
+    hasUnread.value ? iconWellToneOf(unreadTone.value) : "muted",
+  );
 
   const colorMode = useColorModePreference();
   const scale = useInterfaceScale();
@@ -192,6 +198,7 @@ export function useProfilePreferences() {
     regionSummary,
     notificationsSummary,
     hasUnread,
+    notificationsTone,
     appearanceSummary,
     placeholders,
   };

package/frontend-vue/layers/dms-layout/app/build/composables/settings/security/useSecurityOverview.ts

@@ -1,4 +1,5 @@
 import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
+import type { Tone } from "#dms-ui/app/types/tone";
 
 /** Base URL of the Security page API. */
 export const SECURITY_ENDPOINT = "/settings/user/security";
@@ -29,6 +30,13 @@ export interface SecurityOverview {
   activeSessions: number;
   /** What needs the user's attention, most important first. */
   attention: SecurityAttention[];
+  /**
+   * The strongest tone of `attention`, which the navigation badge takes;
+   * null when nothing needs attention.
+   */
+  attentionTone: Tone | null;
+  /** The tone of each item of `attention`. */
+  attentionTones: Partial<Record<SecurityAttention, Tone>>;
 }
 
 /** What the API returns to enrol an authenticator app. */
@@ -47,11 +55,23 @@ export type SecurityAttention =
   | "backup_codes_unsaved"
   | "backup_codes_low";
 
+/** Strongest first, as the server ranks the attention tones. */
+const ATTENTION_TONE_ORDER: Tone[] = [
+  "error",
+  "warning",
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "neutral",
+];
+
 /**
  * Shared Security summary: the status strip, every Security block and the
  * profile pointer card read the same state, and any change refreshes it for
  * all of them. It also keeps the navigation badge of the Security page, the
- * count of what needs attention, in sync after a change.
+ * count of what needs attention in the tone the server gives it, in sync
+ * after a change.
  */
 export function useSecurityOverview() {
   const overview = useDmsState<SecurityOverview | null>(
@@ -68,6 +88,22 @@ export function useSecurityOverview() {
   const attention = computed<SecurityAttention[]>(
     () => overview.value?.attention ?? [],
   );
+  const attentionTone = computed<Tone | undefined>(
+    () => overview.value?.attentionTone ?? undefined,
+  );
+
+  /**
+   * The strongest tone the server gives to those of `items` that need
+   * attention; undefined when none does. A block concerned by several items
+   * (the backup codes: unsaved, running low) is drawn in it.
+   */
+  function attentionToneOf(items: SecurityAttention[]): Tone | undefined {
+    const tones = overview.value?.attentionTones ?? {};
+    const present = items
+      .map((item) => tones[item])
+      .filter((tone): tone is Tone => !!tone);
+    return ATTENTION_TONE_ORDER.find((tone) => present.includes(tone));
+  }
 
   async function refresh(): Promise<void> {
     try {
@@ -78,8 +114,19 @@ export function useSecurityOverview() {
       return;
     }
     const count = attention.value.length;
-    setNavBadge(SECURITY_PAGE_ID, count > 0 ? String(count) : "");
+    setNavBadge(
+      SECURITY_PAGE_ID,
+      count > 0 ? String(count) : "",
+      attentionTone.value,
+    );
   }
 
-  return { overview, attention, isUnavailable, refresh };
+  return {
+    overview,
+    attention,
+    attentionTone,
+    attentionToneOf,
+    isUnavailable,
+    refresh,
+  };
 }

package/frontend-vue/layers/dms-layout/app/build/composables/settings/useSettingsNavigation.ts

@@ -17,6 +17,8 @@ export interface SettingsNavPage {
   to: string;
   /** Badge the server counted or the page declared for its entry. */
   badge?: string;
+  /** The tone of a counted badge; neutral when absent. */
+  badgeTone?: MenuItemBadgeTone;
   /** Dot the page declared for its entry. */
   status?: MenuItemStatus;
 }
@@ -36,6 +38,7 @@ const toNavPage = (node: SiteLayoutTree): SettingsNavPage => ({
   icon: node.icon || DEFAULT_SETTINGS_ICON,
   to: node.fullSlug,
   badge: node.badge,
+  badgeTone: node.badgeTone,
   status: node.status,
 });
 

package/frontend-vue/layers/dms-layout/app/build/utils/categoryPages.ts

@@ -24,8 +24,7 @@ const isOpenablePage = (node: SiteLayoutTree): boolean =>
 
 /**
  * The pages the viewer can open among `nodes` and under them, in menu order,
- * each one followed by the pages nested under it (Member invitations under
- * Members). The page answering at `landingSlug` leads to the others rather
+ * each one followed by the pages nested under it. The page answering at `landingSlug` leads to the others rather
  * than being one of them.
  */
 export function listPagesAmong(

package/frontend-vue/layers/dms-layout/app/build/utils/github-repository.ts

@@ -0,0 +1,5 @@
+/** The DMS repository on GitHub, as `owner/name`. */
+export const GITHUB_REPOSITORY = "AntelopeJS/dms";
+
+/** Opened by the auth footer's star button and by the dashboard's star prompt. */
+export const GITHUB_REPOSITORY_URL = `https://github.com/${GITHUB_REPOSITORY}`;

package/frontend-vue/layers/dms-layout/app/components/layout/DashboardSearch.vue

@@ -1,7 +1,59 @@
 <script setup lang="ts">
+import { computed, nextTick, useTemplateRef } from "vue";
+import CommandPaletteAssistantAnswer from "../../build/components/layout/CommandPaletteAssistantAnswer.vue";
+import { ASSISTANT_MODE_KEY } from "../../build/composables/command-palette/assistantGroups";
+import { useCommandPaletteAssistantMode } from "../../build/composables/command-palette/useCommandPaletteAssistantMode";
+
 const { t } = useI18n();
-const { groups } = useCommandPaletteGroups();
+const appConfig = useDmsAppConfig();
+const { groups: sourceGroups } = useCommandPaletteGroups();
 const fuse = COMMAND_PALETTE_FUSE_OPTIONS;
+const {
+  isOpen,
+  searchTerm,
+  assistant,
+  isAssistantMode,
+  answer,
+  groups,
+  announcement,
+  setMode,
+  onInputKeydown,
+} = useCommandPaletteAssistantMode(sourceGroups);
+
+const footerRef = useTemplateRef<HTMLElement>("footer");
+const input = { onKeydown: onInputKeydown };
+// The halo eases between the accent ring and the violet assistant ring.
+const MODAL_TRANSITION_CLASS = "transition-shadow duration-300";
+// In assistant mode, the empty slot holds the DMS's own padded states.
+const ASSISTANT_EMPTY_CLASS = "p-0 text-start";
+const SEARCH_UI = { modal: MODAL_TRANSITION_CLASS };
+const ASSISTANT_UI = {
+  modal: `${MODAL_TRANSITION_CLASS} shadow-[var(--dms-shadow-cmdk),var(--dms-assistant-halo)]`,
+  input: "[&_input]:caret-secondary [&_[data-slot=leadingIcon]]:text-secondary",
+  empty: ASSISTANT_EMPTY_CLASS,
+};
+
+const paletteUi = computed(() =>
+  isAssistantMode.value ? ASSISTANT_UI : SEARCH_UI,
+);
+
+/** Brings focus back to the prompt after the control that held it goes away. */
+async function focusInput(): Promise<void> {
+  await nextTick();
+  footerRef.value
+    ?.closest('[role="dialog"]')
+    ?.querySelector<HTMLInputElement>("input")
+    ?.focus();
+}
+
+function switchMode(): void {
+  setMode(isAssistantMode.value ? "search" : "assistant");
+  void focusInput();
+}
+
+function close(): void {
+  isOpen.value = false;
+}
 </script>
 
 <template>
@@ -9,26 +61,76 @@ const fuse = COMMAND_PALETTE_FUSE_OPTIONS;
        leaving these props out exposes those raw keys as the dialog's
        accessible name. -->
   <UDashboardSearch
+    v-model:open="isOpen"
+    v-model:search-term="searchTerm"
     :groups="groups"
     :fuse="fuse"
+    :color-mode="!isAssistantMode"
+    :input="input"
+    :icon="isAssistantMode ? assistant?.icon : undefined"
+    :placeholder="isAssistantMode ? assistant?.placeholder : undefined"
+    :ui="paletteUi"
     :title="t('commandPalette.dialog.title')"
     :description="t('commandPalette.dialog.description')"
   >
+    <template v-if="assistant && isAssistantMode" #empty>
+      <CommandPaletteAssistantAnswer
+        v-if="answer"
+        :key="answer.id"
+        :label="assistant.label"
+        :icon="assistant.icon"
+        :component="assistant.answerComponent"
+        :prompt="answer.prompt"
+        :close="close"
+      />
+      <p v-else class="text-muted px-6 py-8 text-center text-sm">
+        {{ t("commandPalette.assistant.emptyPrompt") }}
+      </p>
+    </template>
+
     <!-- v2 footer band: the keys that drive the palette. -->
     <template #footer>
-      <span class="inline-flex items-center gap-1.5">
-        <UKbd value="↑" size="sm" />
-        <UKbd value="↓" size="sm" />
-        {{ t("commandPalette.footer.navigate") }}
+      <span ref="footer" class="sr-only" aria-live="polite">
+        {{ announcement }}
       </span>
-      <span class="inline-flex items-center gap-1.5">
+      <span v-if="isAssistantMode" class="inline-flex items-center gap-1.5">
         <UKbd value="↵" size="sm" />
-        {{ t("commandPalette.footer.open") }}
+        {{ t("commandPalette.footer.send") }}
       </span>
+      <template v-else>
+        <span class="inline-flex items-center gap-1.5">
+          <UKbd value="↑" size="sm" />
+          <UKbd value="↓" size="sm" />
+          {{ t("commandPalette.footer.navigate") }}
+        </span>
+        <span class="inline-flex items-center gap-1.5">
+          <UKbd value="↵" size="sm" />
+          {{ t("commandPalette.footer.open") }}
+        </span>
+      </template>
       <span class="inline-flex items-center gap-1.5">
         <UKbd value="Esc" size="sm" />
         {{ t("commandPalette.footer.close") }}
       </span>
+      <UButton
+        v-if="assistant"
+        class="text-muted hover:text-secondary ms-auto gap-1.5 px-2 py-0.5 text-xs hover:bg-(--dms-assistant-tint)"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        :icon="isAssistantMode ? appConfig.ui.icons.search : assistant.icon"
+        :ui="{ leadingIcon: isAssistantMode ? undefined : 'text-secondary' }"
+        data-slot="assistantToggle"
+        @mousedown.prevent
+        @click="switchMode"
+      >
+        {{
+          isAssistantMode
+            ? t("commandPalette.footer.backToSearch")
+            : t("commandPalette.footer.askAi")
+        }}
+        <UKbd :value="ASSISTANT_MODE_KEY" size="sm" />
+      </UButton>
     </template>
   </UDashboardSearch>
 </template>

package/frontend-vue/layers/dms-layout/app/components/navigation/NavigationMenu.vue

@@ -50,13 +50,16 @@ const VARIANT_CLASSES: Record<MenuItemVariant, MenuVariantClasses> = {
 
 const STATUS_DOT_ICON = "i-ph-circle-fill";
 const STATUS_DOT_SIZE = "size-1.5";
-/** v2 nav trail badge: a small neutral pill with a mono count. */
+/**
+ * v2 nav trail badge: a small soft pill with a mono count, in the tone the
+ * count carries (neutral grey without one).
+ */
 const MENU_BADGE_PROPS = {
-  color: "neutral",
   variant: "soft",
   size: "sm",
   class: "font-mono tabular-nums",
 } as const;
+const DEFAULT_BADGE_TONE: MenuItemBadgeTone = "neutral";
 
 /** The per-item slot classes Nuxt UI accepts on a navigation menu item. */
 type MenuItemUi = NonNullable<DmsMenuItem["ui"]>;
@@ -110,11 +113,18 @@ function buildItemUi(
     : undefined;
 }
 
-// A plain badge value (a page's `badge`) gets the v2 look; a badge already
-// given as props is the caller's own choice.
-function resolveMenuBadge(badge: DmsMenuItem["badge"]): DmsMenuItem["badge"] {
+// A plain badge value (a page's `badge`) gets the v2 look in its tone; a
+// badge already given as props is the caller's own choice.
+function resolveMenuBadge(
+  badge: DmsMenuItem["badge"],
+  tone: MenuItemBadgeTone | undefined,
+): DmsMenuItem["badge"] {
   if (typeof badge === "string" || typeof badge === "number") {
-    return { ...MENU_BADGE_PROPS, label: String(badge) };
+    return {
+      ...MENU_BADGE_PROPS,
+      color: tone ?? DEFAULT_BADGE_TONE,
+      label: String(badge),
+    };
   }
   return badge;
 }
@@ -177,8 +187,8 @@ const { badges: navBadges } = useNavBadges();
 function badgeOf(item: DmsMenuItem): DmsMenuItem["badge"] {
   const live =
     item.fullId === undefined ? undefined : navBadges.value[item.fullId];
-  if (live === undefined) return item.badge;
-  return live || undefined;
+  if (live === undefined) return resolveMenuBadge(item.badge, item.badgeTone);
+  return live.label ? resolveMenuBadge(live.label, live.tone) : undefined;
 }
 
 // A status dot lands in the trailing slot, which a parent entry already uses for
@@ -187,7 +197,7 @@ function badgeOf(item: DmsMenuItem): DmsMenuItem["badge"] {
 function decorateMenuItem(item: DmsMenuItem): DmsMenuItem {
   const variant = VARIANT_CLASSES[item.variant ?? "default"];
   const hasChildren = (item.children?.length ?? 0) > 0;
-  const badge = resolveMenuBadge(badgeOf(item));
+  const badge = badgeOf(item);
   const statusClass =
     item.status && !hasChildren && !badge
       ? MENU_STATUS_TEXT_CLASSES[item.status]