@antelopejs/dms 0.8.3 → 0.9.1

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

@@ -1,23 +1,175 @@
 <script setup lang="ts">
 import ModuleTile from "./ModuleTile.vue";
+import ModuleStoreRequirements from "./ModuleStoreRequirements.vue";
 import {
-  MODULE_INSTALL_COMMAND,
-  moduleInstallCommand,
   type ModuleStoreEntry,
+  type StoreAction,
+  type StoreActionBlock,
+  storeActionBlock,
+  storeActions,
+  storeTileStatus,
 } from "../../../utils/module-store-catalog";
+import type {
+  StoreOperationKind,
+  StoreOperationStep,
+} from "../../../../types/module-store";
 
 interface ModuleStoreTileProps {
   /** The store module the tile presents. */
   entry: ModuleStoreEntry;
+  /** Another module's operation runs: every action waits for it. */
+  isLocked?: boolean;
 }
 
-const props = defineProps<ModuleStoreTileProps>();
+interface ModuleStoreTileEmits {
+  action: [kind: StoreOperationKind];
+}
+
+const props = withDefaults(defineProps<ModuleStoreTileProps>(), {
+  isLocked: false,
+});
+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 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. */
+const blockedReason = computed(() => {
+  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;
+});
+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 command = computed(() => moduleInstallCommand(props.entry));
+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. */
+function formatVersion(version: string): string {
+  return PLAIN_VERSION.test(version) ? `v${version}` : version;
+}
+
+const versionLabel = computed(() => {
+  const { installedVersion, latestVersion, operation: running } = props.entry;
+  if (running?.targetVersion && installedVersion && running.kind === "update") {
+    return `${formatVersion(installedVersion)} → ${formatVersion(running.targetVersion)}`;
+  }
+  if (props.entry.updateAvailable && installedVersion && latestVersion) {
+    return `${formatVersion(installedVersion)} → ${formatVersion(latestVersion)}`;
+  }
+  const version = installedVersion ?? latestVersion;
+  return version ? formatVersion(version) : undefined;
+});
 </script>
 
 <template>
@@ -26,49 +178,115 @@ const command = computed(() => moduleInstallCommand(props.entry));
     :title="processI18n(props.entry.title)"
     :description="processI18n(props.entry.description)"
     :status="{
-      tone: 'neutral',
-      dot: 'none',
-      label: t('modules.store.available_soon'),
+      tone: status.tone,
+      dot: status.dot,
+      label: t(`modules.store.state.${status.labelKey}`),
     }"
+    :is-solid="isInstalledHere"
   >
-    <!-- The CLI command that adds the module today, shown muted: the store
-         will run it for you once installing from here is possible. -->
+    <!-- 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'"
+      >
+        <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>
+
+    <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>
+
+    <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
-      class="text-dimmed flex h-[30px] min-w-0 items-center gap-1.5 rounded-[8px] border border-(--ui-border) bg-(--dms-bg-muted) px-2.5 font-mono text-[11.5px]"
-      :title="command"
+      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="sr-only">{{ t("modules.store.command_label") }}:</span>
-      <!-- The package name never truncates: the CLI prefix gives way first. -->
-      <span class="min-w-0 truncate">
-        <span aria-hidden="true" class="opacity-70">$</span>
-        {{ MODULE_INSTALL_COMMAND }}
-      </span>
-      <b class="text-toned shrink-0 font-semibold">
-        {{ props.entry.packageName }}
-      </b>
+      <span class="truncate">{{ props.entry.package }}</span>
     </div>
 
+    <ModuleStoreRequirements v-if="steps.length === 0" :entry="props.entry" />
+
     <template #footer>
       <span class="truncate">
         {{ processI18n(props.entry.catalogCategory) }}
       </span>
-      <!-- aria-disabled rather than disabled: the button stays focusable and
-           hoverable so its "Coming soon" tooltip can explain why. -->
-      <span class="ms-auto shrink-0 font-sans">
+      <span
+        v-if="versionLabel"
+        class="shrink-0"
+        :class="props.entry.updateAvailable ? 'text-(--ui-warning)' : ''"
+      >
+        {{ versionLabel }}
+      </span>
+      <span class="ms-auto flex shrink-0 items-center gap-1 font-sans">
         <UTooltip
-          :text="t('modules.store.install_soon')"
+          v-if="primary"
+          :text="blockedReason"
+          :disabled="!blockedReason"
           :content="TOOLTIP_CONTENT"
         >
+          <!-- aria-disabled rather than disabled: the button keeps its
+               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}`)"
+            :aria-disabled="isBlocked ? 'true' : undefined"
+            :class="{ 'cursor-not-allowed opacity-50': isBlocked }"
+            @click="!isBlocked && emit('action', primary.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"
-            icon="i-ph-download-simple"
-            :label="t('modules.store.install')"
-            aria-disabled="true"
-            @click.prevent
+            trailing-icon="i-ph-caret-down"
+            :label="t('modules.store.actions.manage')"
           />
-        </UTooltip>
+        </UDropdownMenu>
       </span>
     </template>
   </ModuleTile>

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

@@ -23,6 +23,11 @@ interface ModuleTileProps {
   status: ModuleTileStatus;
   /** Where the tile leads; without it, the tile is a placeholder. */
   to?: string;
+  /**
+   * A tile with no link that still stands for a module running here (one
+   * the store manages): drawn solid rather than dashed.
+   */
+  isSolid?: boolean;
 }
 
 interface ModuleTileSlots {
@@ -36,6 +41,7 @@ interface ModuleTileSlots {
 
 const props = withDefaults(defineProps<ModuleTileProps>(), {
   to: undefined,
+  isSolid: false,
 });
 defineSlots<ModuleTileSlots>();
 
@@ -58,10 +64,18 @@ const theme = tv({
         footer: "py-[7px]",
       },
     },
+    isSolid: {
+      true: {
+        root: "dms-card border-solid",
+        footer: "bg-(--dms-bg-muted) py-[7px]",
+      },
+    },
   },
 });
 
-const ui = computed(() => theme({ isPlaceholder: !props.to }));
+const ui = computed(() =>
+  theme({ isPlaceholder: !props.to, isSolid: !props.to && props.isSolid }),
+);
 </script>
 
 <template>
@@ -72,7 +86,10 @@ const ui = computed(() => theme({ isPlaceholder: !props.to }));
     :class="ui.root()"
   >
     <div class="flex items-start justify-between gap-2.5">
-      <DmsIconWell :icon="props.icon" :tone="props.to ? undefined : 'muted'" />
+      <DmsIconWell
+        :icon="props.icon"
+        :tone="props.to || props.isSolid ? undefined : 'muted'"
+      />
       <DmsStatusPill
         :tone="props.status.tone"
         :dot="props.status.dot"

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/members/MemberRolePicker.vue

@@ -67,7 +67,6 @@ const props = defineProps<Props>();
 const model = defineModel<string[] | null | undefined>();
 
 const { t } = useI18n();
-const { $authFetch } = useAuthFetch();
 // The wrapping UFormField's error ("pick at least one role") marks the group
 // invalid, describes it and rings the pills in the error ink.
 const { ariaAttrs } = useFormField();
@@ -84,17 +83,19 @@ const showsOwnerHint = computed(() =>
   props.ownerField ? isOwner.value : props.disabled,
 );
 
-const options = ref<RoleOptionsResponse>({ roles: [], totalPermissions: 0 });
-const isFetching = ref(true);
-const isLoading = computed(() => isFetching.value || props.loading);
-
-onMounted(async () => {
-  try {
-    options.value = await $authFetch<RoleOptionsResponse>(props.rolesUrl);
-  } finally {
-    isFetching.value = false;
-  }
-});
+// Read with the form: a page-mode form renders the pills on the server; a
+// drawer opened again shows the roles at once and reads them again in the
+// background (one may have been added since).
+const roleOptions = useApiData<RoleOptionsResponse>(() => props.rolesUrl);
+const options = computed<RoleOptionsResponse>(
+  () => roleOptions.data.value ?? { roles: [], totalPermissions: 0 },
+);
+const isLoading = computed(
+  () =>
+    props.loading ||
+    roleOptions.status.value === "idle" ||
+    roleOptions.status.value === "pending",
+);
 
 const selectedIds = computed(() => new Set(model.value ?? []));
 const roleItems = computed<ChipGroupItem[]>(() =>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { nextTick } from "vue";
 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";
@@ -63,12 +64,21 @@ const sourceOf = (
   return labelKey ? { label: t(labelKey), isModule: false } : undefined;
 };
 
-// A change of a row is listed again, from the server.
+// A change made here moves the counts too (the write's answer, then its
+// realtime echo): the watcher below leaves it to the one read that follows it.
+let ownChanges = 0;
+
+// A change of a row is listed again, from the server, once.
 const runThenRefresh = async (action: () => Promise<unknown>) => {
+  ownChanges++;
   try {
     await action();
+    // What the action changed reaches the watcher before the guard drops.
+    await nextTick();
   } catch {
     toast.add({ title: t("dms.form.error_title"), color: "error" });
+  } finally {
+    ownChanges--;
   }
   await props.context.refresh();
 };
@@ -88,15 +98,15 @@ const toggleRead = (notification: UserNotification) =>
   );
 
 // What the stream changes elsewhere (a notification arriving, read in
-// another tab) is listed again here.
+// 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.value, notifications.value[0]?._id],
-  () => void props.context.refresh(),
+  [unreadCount, () => notifications.value[0]?._id],
+  () => {
+    if (ownChanges === 0) void props.context.refresh();
+  },
 );
 
-onMounted(() => {
-  if (!catalog.isLoaded.value) void catalog.loadCatalog();
-});
 </script>
 
 <template>

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

@@ -65,7 +65,6 @@ const failureMessage = computed(() => {
     : t("page.settings.notifications.save_failed_on");
 });
 
-onMounted(load);
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/profile/ProfilePersonalInfo.vue

@@ -47,9 +47,9 @@ const toast = useToast();
 const { $authFetch } = useAuthFetch();
 const { processApiMessage } = useTranslation();
 const { user, refresh: refreshSession } = useCurrentUser();
-const { upload, resolveUrl } = useProfileAvatar(
-  () => props.avatarField?.component?.options ?? {},
-);
+const avatarOptions = () => props.avatarField?.component?.options ?? {};
+const { upload } = useProfileAvatar(avatarOptions);
+const avatarUrls = useFileReadUrls(avatarOptions().storage);
 // A refused name or picture shows under its field; a failed request is a
 // toast.
 const fieldErrors = useFieldErrors({
@@ -57,13 +57,29 @@ const fieldErrors = useFieldErrors({
   codes: { [INVALID_AVATAR]: "avatar" },
 });
 
-const saved = ref<ProfileResponse>({
-  name: user.value?.name,
-  email: user.value?.email,
-});
+// Read with the page: the server renders the name, the address with its
+// verification, and the picture. The form edits a copy of it.
+const profile = await useApiData<ProfileResponse>(() => props.endpoint);
+const isProfileLoaded = computed(
+  () => profile.status.value === "success" || profile.status.value === "error",
+);
+
+const saved = ref<ProfileResponse>(
+  profile.data.value ?? { name: user.value?.name, email: user.value?.email },
+);
 const name = ref(saved.value.name ?? "");
-const avatar = ref<AvatarValue | null>(null);
-const avatarUrl = ref<string | null>(null);
+const avatar = ref<AvatarValue | null>(saved.value.avatar ?? null);
+// A picture picked here shows from the file until the profile is saved.
+const pickedAvatarUrl = ref<string | null>(null);
+const avatarUrl = computed(() => {
+  if (!avatar.value) return null;
+  return pickedAvatarUrl.value ?? avatarUrls.getUrl(avatar.value.key) ?? null;
+});
+watch(
+  () => avatar.value?.key,
+  (key) => key && void avatarUrls.resolve(key),
+  { immediate: true },
+);
 const isUploading = ref(false);
 const isSaving = ref(false);
 const fileInput = useTemplateRef<HTMLInputElement>("fileInput");
@@ -86,14 +102,12 @@ const canSave = computed(() => !!name.value.trim() && !isUploading.value);
 
 watch(name, () => fieldErrors.clear("name"));
 
-async function applyProfile(profile: ProfileResponse): Promise<void> {
+function applyProfile(answer: ProfileResponse): void {
   fieldErrors.clear();
-  saved.value = profile;
-  name.value = profile.name ?? "";
-  avatar.value = profile.avatar ?? null;
-  avatarUrl.value = profile.avatar
-    ? await resolveUrl(profile.avatar.key)
-    : null;
+  saved.value = answer;
+  name.value = answer.name ?? "";
+  avatar.value = answer.avatar ?? null;
+  pickedAvatarUrl.value = null;
 }
 
 function pickFile(): void {
@@ -117,7 +131,7 @@ async function onFileChange(event: Event): Promise<void> {
       return;
     }
     avatar.value = { key: result.key! };
-    avatarUrl.value = URL.createObjectURL(file);
+    pickedAvatarUrl.value = URL.createObjectURL(file);
   } catch {
     toast.add({
       title: t("page.settings.profile.avatar_error"),
@@ -131,11 +145,11 @@ async function onFileChange(event: Event): Promise<void> {
 function removeAvatar(): void {
   fieldErrors.clear("avatar");
   avatar.value = null;
-  avatarUrl.value = null;
+  pickedAvatarUrl.value = null;
 }
 
-async function discard(): Promise<void> {
-  await applyProfile(saved.value);
+function discard(): void {
+  applyProfile(saved.value);
 }
 
 async function save(): Promise<void> {
@@ -146,11 +160,11 @@ async function save(): Promise<void> {
   if (!canSave.value) return;
   isSaving.value = true;
   try {
-    const profile = await $authFetch<ProfileResponse>(props.endpoint, {
+    const answer = await $authFetch<ProfileResponse>(props.endpoint, {
       method: "POST",
       body: { name: name.value.trim(), avatar: avatar.value },
     });
-    await applyProfile(profile);
+    applyProfile(answer);
     toast.add({ title: t("page.settings.profile.saved"), color: "success" });
     await refreshSession();
   } catch (error) {
@@ -162,17 +176,6 @@ async function save(): Promise<void> {
   }
 }
 
-// The verification state comes with the profile, fetched after mount: a
-// skeleton holds the badge's place until then.
-const isProfileLoaded = ref(false);
-
-onMounted(async () => {
-  try {
-    await applyProfile(await $authFetch<ProfileResponse>(props.endpoint));
-  } finally {
-    isProfileLoaded.value = true;
-  }
-});
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/profile/ProfileSecuritySummary.vue

@@ -7,7 +7,7 @@ import { iconWellToneOf } from "#dms-ui/app/build/utils/tone";
 import ProfileSummaryRow from "./ProfileSummaryRow.vue";
 
 const { t, locale } = useI18n();
-const { overview, attention, attentionTone, isUnavailable, refresh } =
+const { overview, attention, attentionTone, isUnavailable } =
   useSecurityOverview();
 
 const needsAttention = computed(() => attention.value.length > 0);
@@ -52,7 +52,6 @@ const placeholder = computed(
     )}`,
 );
 
-onMounted(refresh);
 </script>
 
 <template>

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

@@ -1,4 +1,5 @@
-/** A permission of the roles editor tree (`GET /settings/workspace/roles/editor-tree`). */
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
+/** A permission of the roles editor tree (`GET /dms/pages/settings/workspace/roles/editor-tree`). */
 export interface RolePermissionNode {
   id: string;
   label: string;
@@ -17,7 +18,7 @@ export interface RoleMemberPreview {
   name: string;
 }
 
-/** One role of the roles list (`GET /settings/workspace/roles/overview`). */
+/** One role of the roles list (`GET /dms/pages/settings/workspace/roles/overview`). */
 export interface RoleSummary {
   _id: string;
   name: string;
@@ -42,7 +43,7 @@ export interface RoleEditorCapabilities {
   canDelete: boolean;
 }
 
-/** Payload of `GET /settings/workspace/roles/overview`. */
+/** Payload of `GET /dms/pages/settings/workspace/roles/overview`. */
 export interface RolesOverview {
   roles: RoleSummary[];
   owners: RoleOwnersSummary;
@@ -78,7 +79,7 @@ export const OWNER_ENTRY_ID = "__owner__";
 export const NEW_ROLE_ENTRY_ID = "__new__";
 
 /** Base path of the roles page API. */
-export const ROLES_API_PATH = "/settings/workspace/roles";
+export const ROLES_API_PATH = pageRoutePath("/settings/workspace/roles");
 
 /** The roles' table data routes, which delete a role. */
 export const ROLES_TABLE_API_PATH = "/api/tables/roles";