@antelopejs/dms 0.9.8 → 0.11.0

package/frontend-vue/layers/dms-layout/app/build/components/pages/modules/ModuleTileSkeleton.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+// The placeholder of a ModuleTile while the grid loads, block for block the
+// tile's size: the 36px icon well and the 20px pill, the title's 28px line,
+// two description lines, and the footer band with its xs button. Nothing
+// moves once the tiles replace it.
+
+interface ModuleTileSkeletonProps {
+  /**
+   * A store tile still to install: no status pill, and the 30px npm package
+   * line under the description.
+   */
+  isStore?: boolean;
+}
+
+const props = withDefaults(defineProps<ModuleTileSkeletonProps>(), {
+  isStore: false,
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div
+    class="dms-card flex min-h-[228px] flex-col gap-3 overflow-hidden px-4 pt-4"
+    aria-hidden="true"
+  >
+    <div class="flex items-start justify-between gap-2.5">
+      <USkeleton
+        :aria-label="t('dms.a11y.loading')"
+        class="size-9 rounded-[10px]"
+      />
+      <USkeleton
+        v-if="!props.isStore"
+        :aria-label="t('dms.a11y.loading')"
+        class="h-5 w-16 rounded-full"
+      />
+    </div>
+
+    <div class="flex h-7 items-center">
+      <USkeleton :aria-label="t('dms.a11y.loading')" class="h-4 w-2/5" />
+    </div>
+    <!-- The description's two lines, each its line height tall. -->
+    <div class="-mt-1.5 text-sm leading-[1.45]">
+      <div class="flex h-[1.45em] items-center">
+        <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-full" />
+      </div>
+      <div class="flex h-[1.45em] items-center">
+        <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-3/5" />
+      </div>
+    </div>
+
+    <USkeleton
+      v-if="props.isStore"
+      :aria-label="t('dms.a11y.loading')"
+      class="h-[30px] rounded-[8px]"
+    />
+
+    <div
+      class="-mx-4 mt-auto flex items-center justify-between gap-2 border-t border-(--ui-border-muted) bg-(--dms-bg-muted) py-[7px] ps-4 pe-3"
+    >
+      <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-24" />
+      <USkeleton
+        :aria-label="t('dms.a11y.loading')"
+        class="h-6 w-16 rounded-md"
+      />
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationInboxDisplay.vue

@@ -4,6 +4,7 @@ import { formatRelativeTime } from "#dms-core/app/utils/formatter";
 import TableEmpty from "#dms-ui/app/build/components/table/Empty.vue";
 import TablePagination from "#dms-ui/app/build/components/table/Pagination.vue";
 import type { TableViewDisplayContext } from "#dms-ui/app/composables/table-view/types/display";
+import { useConfirm } from "#dms-ui/app/composables/confirm";
 import { useNotificationCatalog } from "../../../../composables/notification/useNotificationCatalog";
 import {
   type UserNotification,
@@ -31,6 +32,7 @@ const SKELETON_ROWS = 3;
 
 const { t, locale } = useI18n();
 const toast = useToast();
+const { confirm } = useConfirm();
 const catalog = useNotificationCatalog();
 const {
   unreadCount,
@@ -97,16 +99,30 @@ const toggleRead = (notification: UserNotification) =>
       : markAsRead(notification._id),
   );
 
+// A deletion cannot be undone, and its button sits next to Mark read: it is
+// asked first, as "Delete all" is, with the safe answer focused.
+const removeNotification = async (notification: UserNotification) => {
+  const isConfirmed = await confirm({
+    title: t("page.settings.notifications.delete_one_title"),
+    description: t("page.settings.notifications.delete_one_description"),
+    icon: "i-ph-trash",
+    color: "error",
+    confirmIcon: "i-ph-trash",
+    confirmLabel: t("page.settings.notifications.delete"),
+    cancelLabel: t("page.settings.notifications.cancel"),
+    initialFocus: "cancel",
+  });
+  if (isConfirmed) {
+    await runThenRefresh(() => deleteNotification(notification._id));
+  }
+};
+
 // What the stream changes elsewhere (a notification arriving, read in
 // another tab) is listed again here: once per change of the count or of the
 // newest notification, not each time the bell's lists are rebuilt.
-watch(
-  [unreadCount, () => notifications.value[0]?._id],
-  () => {
-    if (ownChanges === 0) void props.context.refresh();
-  },
-);
-
+watch([unreadCount, () => notifications.value[0]?._id], () => {
+  if (ownChanges === 0) void props.context.refresh();
+});
 </script>
 
 <template>
@@ -136,7 +152,7 @@ watch(
           :source="sourceOf(notification)"
           @open="openNotification(notification)"
           @toggle-read="toggleRead(notification)"
-          @delete="runThenRefresh(() => deleteNotification(notification._id))"
+          @delete="removeNotification(notification)"
         />
       </section>
     </template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationInboxItem.vue

@@ -32,12 +32,15 @@ const readToggleLabel = computed(() =>
     ? t("page.settings.notifications.mark_read")
     : t("page.settings.notifications.mark_unread"),
 );
-// Row actions stay compact until the row is hovered or holds focus, then
-// show their labels (v2 C07).
-// Hover or focus spells the actions out, except on phones: a tap focuses
-// the row, and the labels would squeeze the text there.
+// Row actions stay quiet until the row is hovered or holds focus, then
+// show their labels (v2 C07). The labels only fade in: they keep their room
+// laid out, so the buttons never move under the pointer on the way to one
+// (a label appearing used to slide Delete under a Mark read click). Phones
+// show the icons alone: a tap focuses the row, and the labels would squeeze
+// the text there.
 const actionLabelUi = {
-  label: "hidden sm:group-hover:inline sm:group-focus-within:inline",
+  label:
+    "hidden sm:inline sm:opacity-0 sm:transition-opacity sm:duration-150 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100",
 };
 </script>
 

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/region/RegionTimeZoneInput.vue

@@ -54,6 +54,7 @@ const options = computed(() => [
     :filter-fields="['label', 'value', 'offset']"
     :search-input="{ placeholder: t('page.settings.region.time_zone_search') }"
     :virtualize="{ estimateSize: ITEM_HEIGHT }"
+    :aria-label="t('dms.a11y.show_options')"
   >
     <template #item-trailing="{ item }">
       <span class="text-dimmed font-mono text-[11px]">{{ item.offset }}</span>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/role-permissions.ts

@@ -393,6 +393,25 @@ export function revokePermission(
   return remaining;
 }
 
+/**
+ * The "added automatically" hints still true of a selection: a node no
+ * longer granted loses its hint, and a hint stops naming what is no longer
+ * granted, so a revoke that cascades (unticking a list takes the edit that
+ * had added it) leaves no hint on an unticked row.
+ */
+export function keepGrantedAutoAdded(
+  autoAdded: Map<string, string[]>,
+  selection: Set<string>,
+): Map<string, string[]> {
+  const kept = new Map<string, string[]>();
+  for (const [id, added] of autoAdded) {
+    if (!selection.has(id)) continue;
+    const granted = added.filter((addedId) => selection.has(addedId));
+    if (granted.length > 0) kept.set(id, granted);
+  }
+  return kept;
+}
+
 function matchesQuery(
   node: RolePermissionNode,
   query: string,

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/useRoleEditor.ts

@@ -5,6 +5,7 @@ import {
   buildPermissionIndex,
   diffPermissions,
   grantPermission,
+  keepGrantedAutoAdded,
   revokePermission,
 } from "./role-permissions";
 import {
@@ -173,7 +174,7 @@ export function useRoleEditor(data: Ref<RolesPageData | null>) {
     } else {
       selection.value = revokePermission(index.value, selection.value, id);
     }
-    autoAdded.value = nextAutoAdded;
+    autoAdded.value = keepGrantedAutoAdded(nextAutoAdded, selection.value);
   }
 
   const payload = computed<RoleDraft>(() => ({

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

@@ -1,35 +1,22 @@
 import type { Ref } from "vue";
+import {
+  RESIZE_KEYBOARD_STEP_PX,
+  useResizableSize,
+} from "#dms-ui/app/build/composables/containers/useResizableSize";
 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;
-}
+export const SIDE_PANEL_KEYBOARD_STEP_PX = RESIZE_KEYBOARD_STEP_PX;
 
 /** @internal */
 export interface SidePanelWidth {
@@ -54,60 +41,34 @@ export interface SidePanelWidth {
 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));
-  }
+  const resizable = useResizableSize({
+    side: "right",
+    bounds: {
+      defaultSize: bounds.defaultWidth,
+      minSize: bounds.minWidth,
+      maxSize: bounds.maxWidth,
+    },
+    storage: {
+      read: () => readSidePanelPreferences(preferences.value).widths[panel.id],
+      write: (width) =>
+        storeSidePanelWidth(
+          preferences,
+          panel.id,
+          width ?? bounds.defaultWidth,
+        ),
+    },
+    liveSize: useSidePanelDragWidth(),
+  });
 
   return {
-    width,
+    // The panel always has a default width: its size is never natural.
+    width: computed(() => resizable.size.value ?? bounds.defaultWidth),
     bounds,
-    isDragging: computed(() => dragWidth.value !== null),
-    startDrag,
-    drag,
-    endDrag,
-    resizeFromKey,
-    reset: () => commit(bounds.defaultWidth),
+    isDragging: resizable.isDragging,
+    startDrag: resizable.startDrag,
+    drag: resizable.drag,
+    endDrag: resizable.endDrag,
+    resizeFromKey: (event) => resizable.resizeFromKey(event),
+    reset: resizable.reset,
   };
 }

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

@@ -28,12 +28,22 @@ function writeStorage(key: string, value: string): void {
  * 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.
+ *
+ * The kept state is read once mounted: the server cannot see it, so the
+ * server render and the browser hydrating it both draw every group folded,
+ * and a kept group opens right after (reading it in setup left the
+ * collapsible open on one side and folded on the other).
  */
 export const useNotificationGroupsOpen = () => {
   const picked = ref<Record<string, boolean>>({});
+  const isMounted = ref(false);
+  onMounted(() => {
+    isMounted.value = true;
+  });
 
   const isOpen = (categoryId: string): boolean =>
-    picked.value[categoryId] ?? readStorage(storageKey(categoryId)) === OPEN;
+    picked.value[categoryId] ??
+    (isMounted.value && readStorage(storageKey(categoryId)) === OPEN);
 
   const toggleOpen = (categoryId: string) => {
     const open = !isOpen(categoryId);

package/frontend-vue/layers/dms-layout/app/build/utils/dev-reload-stream.ts

@@ -1,5 +1,13 @@
+import { type Ref, watch } from "vue";
+import {
+  type CrossTabEnvironment,
+  shareAcrossTabs,
+} from "#dms-core/app/build/utils/crossTab";
+
 const RELOAD_EVENT_NAME = "reload";
 const REOPEN_DELAY_MS = 2000;
+const SHARED_STREAM_NAME_PREFIX = "dms-dev-reload";
+const RELOAD_MESSAGE = "reload";
 
 export interface DevReloadStreamOptions {
   endpoint: string;
@@ -78,3 +86,76 @@ export function openDevReloadStream(
     },
   };
 }
+
+/**
+ * The `reload` stream of every tab of the browser, held by one of them: a
+ * stream per tab would take one of the browser's six HTTP/1.1 connections to
+ * the dev server each. When the holding tab goes, another one opens it.
+ */
+export function openSharedDevReloadStream(
+  options: DevReloadStreamOptions,
+  environment?: CrossTabEnvironment,
+): DevReloadStream {
+  const leave = shareAcrossTabs(
+    `${SHARED_STREAM_NAME_PREFIX}:${options.endpoint}`,
+    (emit) =>
+      openDevReloadStream({
+        endpoint: options.endpoint,
+        onReload: () => emit(RELOAD_MESSAGE),
+      }).close,
+    (message) => {
+      if (message === RELOAD_MESSAGE) options.onReload();
+    },
+    environment,
+  );
+  return { close: leave };
+}
+
+/** The user's realtime connection, as far as the reload signal goes. */
+export interface DevReloadCarrier {
+  /**
+   * The topic the open connection carries the reload signal under, as the
+   * backend named it; unset while it carries none.
+   */
+  devReloadTopic: Ref<string | undefined>;
+  subscribe: (topic: string, handler: () => void) => () => void;
+}
+
+/**
+ * Follows the backend's reloads over the user's realtime connection while it
+ * is open and carries them, and over the reload stream the browser's tabs
+ * share only while it does not (signed out, reconnecting): a tab adds no
+ * long-lived connection of its own to the six HTTP/1.1 allows per host.
+ */
+export function followDevReload(
+  options: DevReloadStreamOptions,
+  carrier: DevReloadCarrier,
+  environment?: CrossTabEnvironment,
+): DevReloadStream {
+  let stream: DevReloadStream | undefined;
+  let unsubscribe: (() => void) | undefined;
+  const stopWatching = watch(
+    carrier.devReloadTopic,
+    (topic) => {
+      unsubscribe?.();
+      unsubscribe = undefined;
+      if (topic) {
+        unsubscribe = carrier.subscribe(topic, () => options.onReload());
+        stream?.close();
+        stream = undefined;
+        return;
+      }
+      stream ??= openSharedDevReloadStream(options, environment);
+    },
+    { immediate: true },
+  );
+  return {
+    close: () => {
+      stopWatching();
+      unsubscribe?.();
+      unsubscribe = undefined;
+      stream?.close();
+      stream = undefined;
+    },
+  };
+}

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

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