@antelopejs/dms 0.9.7 → 0.10.0

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

@@ -1,24 +1,29 @@
 <script setup lang="ts">
 import ModuleTile from "./ModuleTile.vue";
+import ModuleSourceLabel from "./ModuleSourceLabel.vue";
+import ModuleStoreOperation from "./ModuleStoreOperation.vue";
 import ModuleStoreRequirements from "./ModuleStoreRequirements.vue";
 import {
   type ModuleStoreEntry,
   type StoreAction,
-  type StoreActionBlock,
-  storeActionBlock,
+  isInstalled,
   storeActions,
-  storeTileStatus,
+  storeBlockMessage,
 } from "../../../utils/module-store-catalog";
-import type {
-  StoreOperationKind,
-  StoreOperationStep,
-} from "../../../../types/module-store";
+import type { StoreOperationKind } from "../../../../types/module-store";
+
+// A module of the catalog, as the store presents it: what it is, whether it
+// is installed here, and Install when it is not. Everything else about an
+// installed module is managed from its tile among the installed modules,
+// which this one links to.
 
 interface ModuleStoreTileProps {
   /** The store module the tile presents. */
   entry: ModuleStoreEntry;
   /** Another module's operation runs: every action waits for it. */
   isLocked?: boolean;
+  /** Where the installed module's own tile is, the one that manages it. */
+  installedTo?: string;
 }
 
 interface ModuleStoreTileEmits {
@@ -27,131 +32,31 @@ interface ModuleStoreTileEmits {
 
 const props = withDefaults(defineProps<ModuleStoreTileProps>(), {
   isLocked: false,
+  installedTo: undefined,
 });
 const emit = defineEmits<ModuleStoreTileEmits>();
 const { t } = useI18n();
 const { processI18n } = useTranslation();
 
 const TOOLTIP_CONTENT = { side: "top", sideOffset: 6 } as const;
-/** The steps an operation shows, in the order they run. */
-const PROGRESS_STEPS: StoreOperationStep[] = [
-  "resolve",
-  "dependencies",
-  "unload",
-  "load",
-  "save",
-];
-/**
- * Steps an operation of this kind goes through. The file is written last:
- * it only ever names a module that loaded.
- */
-const KIND_STEPS: Record<StoreOperationKind, StoreOperationStep[]> = {
-  install: ["resolve", "dependencies", "load", "save"],
-  update: ["resolve", "unload", "load", "save"],
-  enable: ["load", "save"],
-  disable: ["unload", "save"],
-  uninstall: ["unload", "save"],
-  apply: ["load"],
-};
-
-const status = computed(() => storeTileStatus(props.entry));
-const actions = computed(() => storeActions(props.entry));
-const primary = computed<StoreAction | undefined>(() =>
-  actions.value.find((action) => !action.isMenuOnly),
-);
-const secondary = computed(() =>
-  actions.value
-    .filter((action) => action !== primary.value)
-    .map((action) => ({
-      label: t(`modules.store.actions.${action.labelKey}`),
-      icon: action.icon,
-      color: action.kind === "uninstall" ? ("error" as const) : undefined,
-      disabled: storeActionBlock(props.entry, action.kind) !== undefined,
-      onSelect: () => emit("action", action.kind),
-    })),
-);
-
-const isInstalledHere = computed(
-  () => props.entry.installedVersion !== undefined,
+const INSTALLED_STATUS = { tone: "primary", dot: "none" } as const;
+const FOOTER_FACTS_CLASS = "flex min-w-0 items-center gap-2";
+
+const isInstalledHere = computed(() => isInstalled(props.entry));
+const isOperating = computed(() => props.entry.operation !== undefined);
+/** Install, the one action a store tile offers, while it is not installed. */
+const install = computed<StoreAction | undefined>(() =>
+  storeActions(props.entry).find((action) => action.kind === "install"),
 );
-const LIST_SEPARATOR = ", ";
-
-const BLOCK_MESSAGES: Record<StoreActionBlock, () => string> = {
-  no_release: () => t("modules.store.no_release"),
-  incompatible: () =>
-    t("modules.store.incompatible", {
-      range: props.entry.requiredInterfaceRange ?? "",
-    }),
-  frontend: () =>
-    t("modules.store.frontend_requirement.needs", {
-      range: props.entry.frontendRequirement?.range ?? "",
-      running: props.entry.frontendRequirement?.running ?? "",
-    }),
-  interfaces: () =>
-    t("modules.store.requires_first", {
-      interfaces: props.entry.missingInterfaces
-        .map((missing) => missing.interfacePackage)
-        .join(LIST_SEPARATOR),
-    }),
-  dependents: () =>
-    t("modules.store.used_by", {
-      modules: props.entry.dependents.join(LIST_SEPARATOR),
-    }),
-};
 
-/** Why the main action waits, when it does. */
+/** Why Install waits, when it does. */
 const blockedReason = computed(() => {
+  if (!install.value) return undefined;
   if (props.isLocked) return t("modules.store.locked");
-  if (!primary.value) return undefined;
-  const block = storeActionBlock(props.entry, primary.value.kind);
-  return block ? BLOCK_MESSAGES[block]() : undefined;
+  return storeBlockMessage(props.entry, install.value.kind, t);
 });
 const isBlocked = computed(() => blockedReason.value !== undefined);
 
-const operation = computed(() => props.entry.operation);
-/**
- * Whether the running install loads modules for missing interfaces. Kept
- * for the whole operation: once they run, the listing no longer misses them.
- */
-const isInstallingDependencies = ref(false);
-watch(
-  operation,
-  (running) => {
-    if (!running) {
-      isInstallingDependencies.value = false;
-      return;
-    }
-    if (
-      running.step === "dependencies" ||
-      (running.kind === "install" && props.entry.missingInterfaces.length > 0)
-    ) {
-      isInstallingDependencies.value = true;
-    }
-  },
-  { immediate: true },
-);
-
-const steps = computed(() => {
-  const kind = operation.value?.kind;
-  if (!kind) return [];
-  const current = PROGRESS_STEPS.indexOf(operation.value.step);
-  const kindSteps = KIND_STEPS[kind].filter(
-    (step) => step !== "dependencies" || isInstallingDependencies.value,
-  );
-  return kindSteps.map((step) => {
-    const index = PROGRESS_STEPS.indexOf(step);
-    const state =
-      index < current ? "done" : index === current ? "running" : "todo";
-    return { step, state };
-  });
-});
-
-const STEP_ICONS: Record<string, string> = {
-  done: "i-ph-check-circle-fill",
-  running: "i-ph-circle-notch",
-  todo: "i-ph-circle",
-};
-
 const PLAIN_VERSION = /^\d/;
 
 /** A version as the footer shows it: `v1.2.3`, or a range as written. */
@@ -177,77 +82,72 @@ const versionLabel = computed(() => {
     :icon="props.entry.icon"
     :title="processI18n(props.entry.title)"
     :description="processI18n(props.entry.description)"
-    :status="{
-      tone: status.tone,
-      dot: status.dot,
-      label: t(`modules.store.state.${status.labelKey}`),
-    }"
+    :status="
+      isInstalledHere
+        ? { ...INSTALLED_STATUS, label: t('modules.store.installed') }
+        : undefined
+    "
     :is-solid="isInstalledHere"
   >
-    <!-- Running operation: its steps, the current one spinning. -->
-    <ol
-      v-if="steps.length > 0"
-      class="flex flex-col gap-1 text-xs"
-      :aria-label="t(`modules.store.progress.${operation?.kind}`)"
-    >
-      <li
-        v-for="{ step, state } in steps"
-        :key="step"
-        class="flex items-center gap-1.5"
-        :class="state === 'todo' ? 'text-dimmed' : 'text-toned'"
+    <ModuleStoreOperation :entry="props.entry" />
+
+    <template v-if="!isOperating">
+      <p v-if="props.entry.isWorkingCopy" class="text-dimmed text-xs">
+        {{ t("modules.store.working_copy_hint") }}
+      </p>
+
+      <!-- The npm package the module comes from. -->
+      <div
+        v-else-if="!isInstalledHere"
+        class="text-dimmed flex h-[30px] min-w-0 items-center rounded-[8px] border border-(--ui-border) bg-(--dms-bg-muted) px-2.5 font-mono text-[11.5px]"
+        :title="props.entry.package"
       >
-        <UIcon
-          :name="STEP_ICONS[state]"
-          class="size-3.5 shrink-0"
-          :class="{
-            'animate-spin text-(--ui-primary)': state === 'running',
-            'text-(--ui-success)': state === 'done',
-          }"
-        />
-        {{ t(`modules.store.steps.${step}`) }}
-      </li>
-    </ol>
+        <span class="truncate">{{ props.entry.package }}</span>
+      </div>
 
-    <p
-      v-else-if="props.entry.state === 'error' && props.entry.error"
-      class="rounded-[8px] bg-(--ui-error)/8 px-2.5 py-1.5 text-xs text-(--ui-error)"
-      :title="props.entry.error"
-    >
-      <span class="line-clamp-3 break-words">{{ props.entry.error }}</span>
-    </p>
+      <ModuleStoreRequirements v-if="!isInstalledHere" :entry="props.entry" />
 
-    <p
-      v-else-if="props.entry.state === 'pending'"
-      class="text-xs text-(--ui-warning)"
-    >
-      {{ t("modules.store.pending_hint") }}
-    </p>
-
-    <!-- The npm package the module comes from. -->
-    <div
-      v-else
-      class="text-dimmed flex h-[30px] min-w-0 items-center rounded-[8px] border border-(--ui-border) bg-(--dms-bg-muted) px-2.5 font-mono text-[11.5px]"
-      :title="props.entry.package"
-    >
-      <span class="truncate">{{ props.entry.package }}</span>
-    </div>
-
-    <ModuleStoreRequirements v-if="steps.length === 0" :entry="props.entry" />
+      <ULink
+        v-if="isInstalledHere && props.installedTo"
+        :to="props.installedTo"
+        class="text-primary inline-flex items-center gap-1 text-xs font-semibold"
+      >
+        {{ t("modules.store.view_installed") }}
+        <UIcon name="i-ph-arrow-right" class="size-3.5" :aria-hidden="true" />
+      </ULink>
+    </template>
 
     <template #footer>
-      <span class="truncate">
-        {{ processI18n(props.entry.catalogCategory) }}
-      </span>
-      <span
-        v-if="versionLabel"
-        class="shrink-0"
-        :class="props.entry.updateAvailable ? 'text-(--ui-warning)' : ''"
-      >
-        {{ versionLabel }}
+      <!-- v0.5.0 · npm · Content, as on an installed module's tile, and
+           kept whole the same way. -->
+      <span :class="FOOTER_FACTS_CLASS">
+        <span
+          v-if="versionLabel"
+          class="shrink-0"
+          :class="props.entry.updateAvailable ? 'text-(--ui-warning)' : ''"
+        >
+          {{ versionLabel }}
+        </span>
+        <span v-if="versionLabel" aria-hidden="true">·</span>
+        <ModuleSourceLabel :source="props.entry.source" />
+        <span class="min-w-0 truncate">
+          ·
+          {{ processI18n(props.entry.catalogCategory) }}
+        </span>
       </span>
       <span class="ms-auto flex shrink-0 items-center gap-1 font-sans">
+        <!-- An update is made where the module is managed. -->
+        <UButton
+          v-if="isInstalledHere && props.entry.updateAvailable"
+          :to="props.installedTo"
+          size="xs"
+          color="warning"
+          variant="soft"
+          icon="i-ph-arrow-circle-up"
+          :label="t('modules.store.update_available')"
+        />
         <UTooltip
-          v-if="primary"
+          v-else-if="install"
           :text="blockedReason"
           :disabled="!blockedReason"
           :content="TOOLTIP_CONTENT"
@@ -256,37 +156,15 @@ const versionLabel = computed(() => {
                tooltip, which says why it waits. -->
           <UButton
             size="xs"
-            :color="primary.kind === 'update' ? 'warning' : 'neutral'"
-            :variant="primary.kind === 'install' ? 'solid' : 'outline'"
-            :icon="primary.icon"
-            :label="t(`modules.store.actions.${primary.labelKey}`)"
+            color="neutral"
+            variant="solid"
+            :icon="install.icon"
+            :label="t(`modules.store.actions.${install.labelKey}`)"
             :aria-disabled="isBlocked ? 'true' : undefined"
             :class="{ 'cursor-not-allowed opacity-50': isBlocked }"
-            @click="!isBlocked && emit('action', primary.kind)"
+            @click="!isBlocked && emit('action', install.kind)"
           />
         </UTooltip>
-        <UDropdownMenu
-          v-if="secondary.length > 0 && !props.isLocked"
-          :items="secondary"
-          :content="{ align: 'end' }"
-        >
-          <UButton
-            v-if="primary"
-            size="xs"
-            color="neutral"
-            variant="ghost"
-            icon="i-ph-dots-three-vertical"
-            :aria-label="t('modules.store.more_actions')"
-          />
-          <UButton
-            v-else
-            size="xs"
-            color="neutral"
-            variant="outline"
-            trailing-icon="i-ph-caret-down"
-            :label="t('modules.store.actions.manage')"
-          />
-        </UDropdownMenu>
       </span>
     </template>
   </ModuleTile>

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

@@ -20,7 +20,8 @@ interface ModuleTileProps {
   icon: string;
   title: string;
   description: string;
-  status: ModuleTileStatus;
+  /** The pill of the tile's head; a tile without one shows none. */
+  status?: ModuleTileStatus;
   /** Where the tile leads; without it, the tile is a placeholder. */
   to?: string;
   /**
@@ -35,11 +36,16 @@ interface ModuleTileSlots {
   readout?: () => unknown;
   /** Under the description (an install command). */
   default?: () => unknown;
-  /** The footer band's content. */
+  /**
+   * The footer band's content. The band wraps: a facts group (version,
+   * source, category) kept whole, then actions pushed to the end with
+   * `ms-auto`, which drop to a second line when both do not fit.
+   */
   footer: () => unknown;
 }
 
 const props = withDefaults(defineProps<ModuleTileProps>(), {
+  status: undefined,
   to: undefined,
   isSolid: false,
 });
@@ -49,7 +55,7 @@ const theme = tv({
   slots: {
     root: "flex min-h-[228px] flex-col gap-3 overflow-hidden px-4 pt-4",
     footer:
-      "text-dimmed -mx-4 mt-auto flex items-center gap-2 border-t border-(--ui-border-muted) ps-4 pe-3 font-mono text-[11px] font-medium",
+      "text-dimmed -mx-4 mt-auto flex flex-wrap items-center gap-x-2 gap-y-1.5 border-t border-(--ui-border-muted) ps-4 pe-3 font-mono text-[11px] font-medium",
   },
   variants: {
     isPlaceholder: {
@@ -91,6 +97,7 @@ const ui = computed(() =>
         :tone="props.to || props.isSolid ? undefined : 'muted'"
       />
       <DmsStatusPill
+        v-if="props.status"
         :tone="props.status.tone"
         :dot="props.status.dot"
         :label="props.status.label"

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>(() => ({