@antelopejs/dms 0.8.3 → 0.9.1

package/frontend-vue/layers/dms-layout/app/custom-pages/modules.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Ref, VNode } from "vue";
 import { MONO_CHIP_CLASS } from "#dms-ui/app/build/utils/monoChip";
 import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
@@ -13,6 +14,7 @@ import { useKeyboardPlatform } from "#dms-ui/app/composables/global/keyboardPlat
 import DmsChipGroup from "#dms-ui/app/build/components/form/ChipGroup.vue";
 import ModuleCatalogTile from "../build/components/pages/modules/ModuleCatalogTile.vue";
 import ModuleStoreTile from "../build/components/pages/modules/ModuleStoreTile.vue";
+import ModuleStoreDependencyPicker from "../build/components/pages/modules/ModuleStoreDependencyPicker.vue";
 import { usePageHeaderActions } from "../composables/layout/usePageHeaderActions";
 import {
   ENDPOINT_MODULES_LISTING,
@@ -30,13 +32,33 @@ import {
   type ModuleSortMode,
 } from "../build/utils/modules-catalog";
 import {
-  MODULE_STORE_CATALOG,
-  availableStoreModules,
+  type ModuleStoreEntry,
+  type StoreScope,
+  FRONTEND_BUILD_COMMAND,
+  filterByScope,
+  isAwaitingFrontend,
+  needsDependencyChoice,
+  sortStoreModules,
+  toModuleStoreEntry,
 } from "../build/utils/module-store-catalog";
+import {
+  type DependencyDraft,
+  areDependencyDraftsValid,
+  buildInstallBody,
+  createDependencyDrafts,
+} from "../build/utils/module-store-install";
+import { useModuleStore } from "../composables/page/useModuleStore";
+import {
+  ConfirmActionError,
+  useConfirm,
+} from "#dms-ui/app/composables/confirm";
+import type {
+  StoreActionBody,
+  StoreOperationKind,
+} from "../types/module-store";
 import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
 
 const SKELETON_PLACEHOLDER_COUNT = 6;
-const MODULES_LISTING_DATA_KEY = "modules-page-listing";
 
 const { t } = useI18n();
 const { processI18n } = useTranslation();
@@ -85,37 +107,16 @@ if (!siteLayout.siteLayout.value) {
 // 403 page, the same answer as any page they may not open (the entry is not in
 // their menu either).
 if (!isOwner.value) {
-  throw showError({
+  throw showDmsError({
     statusCode: HTTP_FORBIDDEN,
     statusMessage: "Access denied",
   });
 }
 
-// Whatever is cached from an earlier visit shows at once; stale live figures
-// are then refreshed in the background on mount. The hydration reuses the
-// listing the server rendered: fetched again before hydrating, its live
-// readouts (an uptime a minute on) would no longer match the markup.
-if (isOwner.value) {
-  const { data: renderedListing } = await useDmsAsyncData<
-    ModuleCatalogEntry[] | null
-  >(MODULES_LISTING_DATA_KEY, async () => {
-    await modulesListing.loadModulesListing();
-    return modulesListing.modules.value ?? null;
-  });
-  if (modulesListing.modules.value === undefined) {
-    if (renderedListing.value) {
-      modulesListing.modules.value = renderedListing.value;
-    } else {
-      await modulesListing.loadModulesListing();
-    }
-  }
-}
-
-onMounted(() => {
-  if (isOwner.value && modulesListing.modules.value !== undefined) {
-    void modulesListing.revalidate();
-  }
-});
+// Read with the page, which the server renders and hands over: the
+// hydration reuses the listing the server rendered (read again, its live
+// readouts, an uptime a minute on, would no longer match the markup).
+await modulesListing.loadModulesListing();
 
 const isForbidden = computed(
   () =>
@@ -204,7 +205,7 @@ const trimmedQuery = computed(() => query.value.trim());
 const pageMatch = computed(() => {
   if (visibleModules.value.length > 0 || !trimmedQuery.value) return null;
   const match = findModulePageMatch(
-    siteLayout.siteLayout.value?.pages,
+    siteLayout.siteLayout.value,
     trimmedQuery.value,
     new Set(modules.value.map((entry) => entry.id)),
     processI18n,
@@ -219,26 +220,49 @@ function clearFilters(): void {
   category.value = MODULE_CATEGORY_ALL;
 }
 
-// ── Module store (preview) ─────────────────────────────────────────
-// A static list of the official modules not installed here: nothing installs
-// yet, only the search and the category chips work, locally.
+// ── Module store ───────────────────────────────────────────────────
+const moduleStore = useModuleStore();
+const toast = useToast();
+const { confirm } = useConfirm();
+
+onMounted(() => {
+  if (isOwner.value) void moduleStore.load();
+});
+onBeforeUnmount(() => moduleStore.stop());
+
+const storeListing = computed(() => moduleStore.listing.value);
+const isStoreLoading = computed(
+  () => storeListing.value === undefined && !moduleStore.loadingError.value,
+);
 const storeModules = computed(() =>
-  availableStoreModules(
-    MODULE_STORE_CATALOG,
-    new Set((modulesListing.modules.value ?? []).map((entry) => entry.id)),
+  sortStoreModules(
+    (storeListing.value?.modules ?? []).map(toModuleStoreEntry),
     processI18n,
   ),
 );
+const storeScope = ref<StoreScope>("all");
 const storeQuery = ref("");
 const storeCategory = ref<string>(MODULE_CATEGORY_ALL);
 
+const storeScopeItems = computed(() =>
+  (["all", "available", "installed"] as const).map((scope) => ({
+    value: scope,
+    label: t(`modules.store.scope.${scope}`, {
+      count: filterByScope(storeModules.value, scope).length,
+    }),
+  })),
+);
+const scopedStoreModules = computed(() =>
+  filterByScope(storeModules.value, storeScope.value),
+);
+
 const storeCategoryOptions = computed(() => [
   {
     value: MODULE_CATEGORY_ALL,
     label: t("modules.category.all"),
-    count: storeModules.value.length,
+    count: scopedStoreModules.value.length,
   },
-  ...moduleCategoryOptions(storeModules.value, processI18n),
+  ...moduleCategoryOptions(scopedStoreModules.value, processI18n),
 ]);
 
 watch(storeCategoryOptions, (options) => {
@@ -248,7 +272,7 @@ watch(storeCategoryOptions, (options) => {
 });
 
 const visibleStoreModules = computed(() =>
-  filterModules(storeModules.value, {
+  filterModules(scopedStoreModules.value, {
     query: storeQuery.value,
     category: storeCategory.value,
     resolve: processI18n,
@@ -261,6 +285,153 @@ function clearStoreFilters(): void {
   storeCategory.value = MODULE_CATEGORY_ALL;
 }
 
+/** Store modules whose interface the running frontend does not match yet. */
+const frontendLagging = computed(() =>
+  storeModules.value.filter(
+    (entry) =>
+      isAwaitingFrontend(entry) ||
+      (entry.frontend === "unknown" &&
+        moduleStore.awaitingReload.value.has(entry.id)),
+  ),
+);
+const frontendNotice = computed(() => {
+  const lagging = frontendLagging.value;
+  if (lagging.length === 0) return null;
+  const names = lagging.map((entry) => processI18n(entry.title)).join(", ");
+  const hasReported = lagging.every((entry) => entry.frontend !== "unknown");
+  const key = !hasReported
+    ? "unknown"
+    : storeListing.value?.dev
+      ? "dev"
+      : "production";
+  return { key, names };
+});
+
+/**
+ * Runs `kind` from a dialog: a refusal is worded as the toast words it and
+ * shown in the dialog, which stays open.
+ */
+async function runFromDialog(
+  kind: StoreOperationKind,
+  entry: ModuleStoreEntry,
+  body?: StoreActionBody,
+): Promise<void> {
+  try {
+    await moduleStore.run(kind, entry, body);
+  } catch (error) {
+    throw new ConfirmActionError({
+      title: t("modules.store.action_failed", {
+        module: processI18n(entry.title),
+      }),
+      description: resolveStoreError(error),
+    });
+  }
+}
+
+/** What the owner last picked in a module's install dialog, for a retry. */
+const lastDependencyDrafts = new Map<string, DependencyDraft[]>();
+
+function renderDependencyPicker(
+  entry: ModuleStoreEntry,
+  drafts: Ref<DependencyDraft[]>,
+  showErrors: boolean,
+): VNode {
+  return h(ModuleStoreDependencyPicker, {
+    missing: entry.missingInterfaces,
+    drafts: drafts.value,
+    showErrors,
+    onUpdate: (index: number, patch: Partial<DependencyDraft>) => {
+      drafts.value = drafts.value.map((draft, position) =>
+        position === index ? { ...draft, ...patch } : draft,
+      );
+    },
+  });
+}
+
+/**
+ * Asks which modules implement the interfaces the release misses, then
+ * installs them with it. A refusal shows in the dialog, kept open.
+ */
+async function installWithDependencies(entry: ModuleStoreEntry): Promise<void> {
+  const title = processI18n(entry.title);
+  const drafts = ref(
+    createDependencyDrafts(
+      entry.missingInterfaces,
+      lastDependencyDrafts.get(entry.id),
+    ),
+  );
+  const showErrors = ref(false);
+  await confirm({
+    title: t("modules.store.install_dialog.title", { module: title }),
+    description: t("modules.store.install_dialog.description", {
+      module: title,
+    }),
+    confirmLabel: t("modules.store.actions.install"),
+    confirmIcon: "i-ph-download-simple",
+    icon: "i-ph-puzzle-piece",
+    body: () => renderDependencyPicker(entry, drafts, showErrors.value),
+    validate: () => {
+      showErrors.value = true;
+      return areDependencyDraftsValid(drafts.value);
+    },
+    onConfirm: async () => {
+      lastDependencyDrafts.set(entry.id, drafts.value);
+      await runFromDialog(
+        "install",
+        entry,
+        buildInstallBody(entry.id, drafts.value),
+      );
+    },
+  });
+}
+
+async function runStoreAction(
+  kind: StoreOperationKind,
+  entry: ModuleStoreEntry,
+): Promise<void> {
+  const title = processI18n(entry.title);
+  if (needsDependencyChoice(entry, kind)) {
+    await installWithDependencies(entry);
+    return;
+  }
+  if (kind === "uninstall") {
+    await confirm({
+      title: t("modules.store.uninstall_confirm.title", { module: title }),
+      description: t("modules.store.uninstall_confirm.description", {
+        module: title,
+      }),
+      confirmLabel: t("modules.store.actions.uninstall"),
+      color: "error",
+      icon: "i-ph-trash",
+      onConfirm: () => runFromDialog(kind, entry),
+    });
+    return;
+  }
+  try {
+    await moduleStore.run(kind, entry);
+  } catch (error) {
+    toast.add({
+      color: "error",
+      icon: "i-ph-warning-circle",
+      title: t("modules.store.action_failed", { module: title }),
+      description: resolveStoreError(error),
+    });
+  }
+}
+
+/** What a refused store request carries: the server's error key, if any. */
+interface StoreRequestError {
+  data?: unknown;
+  message?: string;
+}
+
+function resolveStoreError(error: unknown): string {
+  const details = error as StoreRequestError | undefined;
+  const key = typeof details?.data === "string" ? details.data : undefined;
+  if (!key) return details?.message ?? "";
+  return t(`modules.store.errors.${key.replace("error.", "")}`);
+}
+
 // ── Actions ────────────────────────────────────────────────────────
 async function retry(): Promise<void> {
   if (isRetrying.value) return;
@@ -528,49 +699,141 @@ const summaryCards = computed<StatGroupItem[]>(() =>
         </div>
       </section>
 
-      <!-- Module store: a preview, nothing installs from here yet. -->
+      <!-- Module store: the official modules, installed or not. -->
       <section class="mt-10" aria-labelledby="module-store-title">
         <DmsSectionHeader
           class="mb-3"
-          :count="isInitiallyLoading ? undefined : storeModules.length"
+          :count="isStoreLoading ? undefined : storeModules.length"
           :description="t('modules.store.description')"
         >
           <template #title>
             <span id="module-store-title">{{ t("modules.store.title") }}</span>
           </template>
-          <template #badge>
-            <DmsStatusPill
-              tone="info"
-              :label="t('modules.store.soon')"
+          <template #trailing>
+            <span
+              v-if="storeListing?.frontendVersion"
+              :class="[
+                MONO_CHIP_CLASS,
+                'text-dimmed border border-(--ui-border) text-[11px] max-sm:hidden',
+              ]"
+              :title="
+                storeListing.frontendVersionSource
+                  ? t(
+                      `modules.store.frontend_version.${storeListing.frontendVersionSource}`,
+                    )
+                  : undefined
+              "
+            >
+              {{
+                t("modules.store.frontend_version.label", {
+                  version: storeListing.frontendVersion,
+                })
+              }}
+            </span>
+            <DmsSegmented
+              v-model="storeScope"
+              :items="storeScopeItems"
               size="sm"
-              uppercase
+              :aria-label="t('modules.store.scope.label')"
             />
           </template>
         </DmsSectionHeader>
 
         <DmsBanner
+          v-if="storeListing?.configError"
+          class="mb-4"
+          tone="error"
+          size="sm"
+          icon="i-ph-file-x"
+          :title="t('modules.store.config_error')"
+          :description="storeListing.configError"
+        />
+        <DmsBanner
+          v-else-if="storeListing && !storeListing.enabled"
           class="mb-4"
           tone="info"
           size="sm"
-          icon="i-ph-storefront"
-          :title="t('modules.store.banner.title')"
-          :description="t('modules.store.banner.description')"
+          icon="i-ph-lock-simple"
+          :title="t('modules.store.disabled.title')"
+          :description="t('modules.store.disabled.description')"
         />
 
-        <!-- Which modules are installed is unknown until the listing loads:
-             the store list waits for it. -->
-        <DmsCard
-          v-if="!isInitiallyLoading && storeModules.length === 0"
-          :padded="false"
+        <!-- The interface lags behind the backend: say what follows. -->
+        <DmsBanner
+          v-if="frontendNotice"
+          class="mb-4"
+          :tone="frontendNotice.key === 'dev' ? 'info' : 'warning'"
+          size="sm"
+          :icon="
+            frontendNotice.key === 'dev'
+              ? 'i-ph-circle-notch'
+              : 'i-ph-arrows-clockwise'
+          "
+          :title="
+            t(`modules.store.frontend.${frontendNotice.key}.title`, {
+              modules: frontendNotice.names,
+            })
+          "
         >
-          <DmsEmptyState
-            icon="i-ph-check-circle"
-            :title="t('modules.store.all_installed.title')"
-            :description="t('modules.store.all_installed.description')"
-          />
-        </DmsCard>
+          <template #description>
+            <i18n-t
+              :keypath="`modules.store.frontend.${frontendNotice.key}.description`"
+              scope="global"
+              tag="span"
+            >
+              <template #command>
+                <code
+                  :class="[
+                    MONO_CHIP_CLASS,
+                    'bg-elevated text-highlighted text-xs',
+                  ]"
+                >
+                  {{ FRONTEND_BUILD_COMMAND }}
+                </code>
+              </template>
+            </i18n-t>
+          </template>
+        </DmsBanner>
 
-        <template v-else-if="!isInitiallyLoading">
+        <div v-if="isStoreLoading" :class="TILE_GRID_CLASS" aria-busy="true">
+          <DmsCard
+            v-for="placeholder in skeletonItems"
+            :key="placeholder"
+            :padded="false"
+            class="flex min-h-[228px] flex-col gap-3 p-4"
+          >
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="size-9 rounded-[10px]"
+            />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="mt-auto h-2.5 w-3/5"
+            />
+          </DmsCard>
+        </div>
+
+        <!-- Only when nothing is on screen yet: a follow-up read that fails
+             while the frontend restarts keeps the tiles and tries again. -->
+        <DmsBanner
+          v-else-if="moduleStore.loadingError.value && !storeListing"
+          tone="error"
+          size="sm"
+          icon="i-ph-plugs"
+          :title="t('modules.store.load_error')"
+        >
+          <template #actions>
+            <UButton
+              color="error"
+              size="sm"
+              icon="i-ph-arrows-clockwise"
+              :label="t('modules.error.retry')"
+              @click="moduleStore.load()"
+            />
+          </template>
+        </DmsBanner>
+
+        <template v-else>
           <div :class="TOOLBAR_CLASS">
             <DmsSearchInput
               v-model="storeQuery"
@@ -586,7 +849,18 @@ const summaryCards = computed<StatGroupItem[]>(() =>
             />
           </div>
 
-          <DmsCard v-if="visibleStoreModules.length === 0" :padded="false">
+          <DmsCard
+            v-if="scopedStoreModules.length === 0 && storeScope === 'available'"
+            :padded="false"
+          >
+            <DmsEmptyState
+              icon="i-ph-check-circle"
+              :title="t('modules.store.all_installed.title')"
+              :description="t('modules.store.all_installed.description')"
+            />
+          </DmsCard>
+
+          <DmsCard v-else-if="visibleStoreModules.length === 0" :padded="false">
             <DmsEmptyState
               variant="no-result"
               :title="
@@ -614,6 +888,11 @@ const summaryCards = computed<StatGroupItem[]>(() =>
               v-for="entry in visibleStoreModules"
               :key="entry.id"
               :entry="entry"
+              :is-locked="
+                !storeListing?.enabled ||
+                (storeListing?.busy === true && entry.state !== 'busy')
+              "
+              @action="runStoreAction($event, entry)"
             />
           </div>
         </template>

package/frontend-vue/layers/dms-layout/app/emails/components/EmailLayout.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
+import type { DmsLogoSources } from "#dms-core/shared/types/app-config";
 import { emailLogoUrl, emailStyles } from "./index";
 
+interface EmailLogoConfig {
+  default?: Partial<DmsLogoSources>;
+  email?: Partial<DmsLogoSources>;
+}
+
 interface EmailAppConfig {
   branding?: {
-    logo?: {
-      default?: {
-        light?: string;
-      };
-    };
+    logo?: EmailLogoConfig;
   };
 }
 
+const DARK_SCHEME_MEDIA = "(prefers-color-scheme: dark)";
+
 const props = withDefaults(
   defineProps<{
     /** Shown as the email's heading; no heading when omitted. */
@@ -33,13 +37,20 @@ const props = withDefaults(
 const appConfig = useDmsAppConfig() as EmailAppConfig;
 const runtimeConfig = useDmsRuntimeConfig();
 
-const logoPath = appConfig.branding?.logo?.default?.light;
+const logo = appConfig.branding?.logo;
 const clientBaseUrl = runtimeConfig.public.dms?.clientBaseUrl ?? "";
-const logoUrl = props.publicLogoOnly
-  ? emailLogoUrl(logoPath, clientBaseUrl)
-  : logoPath?.startsWith("/")
-    ? `${clientBaseUrl}${logoPath}`
-    : logoPath;
+
+function logoSource(path: string | undefined): string {
+  if (props.publicLogoOnly) return emailLogoUrl(path, clientBaseUrl);
+  return path?.startsWith("/") ? `${clientBaseUrl}${path}` : (path ?? "");
+}
+
+const logoUrl = logoSource(logo?.email?.light || logo?.default?.light);
+// Offered to the mail clients that follow the reader's dark mode; the others
+// skip the picture's source and draw the light image. Taken from the email
+// slot only, so an instance that sets none keeps its single image.
+const darkCandidate = logoSource(logo?.email?.dark);
+const darkLogoUrl = darkCandidate === logoUrl ? "" : darkCandidate;
 </script>
 
 <template>
@@ -52,7 +63,16 @@ const logoUrl = props.publicLogoOnly
       <EContainer :style="emailStyles.container">
         <ESection :style="emailStyles.card">
           <ESection v-if="logoUrl" :style="emailStyles.logo">
+            <picture v-if="darkLogoUrl">
+              <source :media="DARK_SCHEME_MEDIA" :srcset="darkLogoUrl" />
+              <EImg
+                :src="logoUrl"
+                :alt="logoAlt"
+                :style="emailStyles.logoImage"
+              />
+            </picture>
             <EImg
+              v-else
               :src="logoUrl"
               :alt="logoAlt"
               :style="emailStyles.logoImage"

package/frontend-vue/layers/dms-layout/app/error.vue

@@ -4,6 +4,7 @@ import StageCard, {
   type StageCardTone,
 } from "./build/components/layout/StageCard.vue";
 import EmptyLayout from "./custom-layouts/EmptyLayout.vue";
+import { publicErrorMessage } from "./build/utils/publicErrorMessage";
 
 interface ErrorConfig {
   icon: string;
@@ -66,10 +67,12 @@ const statusCode = computed(
   () => props.error.statusCode || DEFAULT_STATUS_CODE,
 );
 
+// Never the backend's address a failed request names (see
+// `publicErrorMessage`).
 const visibleErrorMessage = computed(() =>
   STATUSES_WITHOUT_ERROR_MESSAGE.has(statusCode.value)
     ? undefined
-    : props.error.message,
+    : publicErrorMessage(props.error.message),
 );
 
 const errorConfig = computed(
@@ -89,7 +92,7 @@ const description = computed(() =>
 );
 
 const handleError = async () => {
-  clearError();
+  clearDmsError();
   if (!loggedIn.value) {
     await redirectToAuth(homepage);
   } else {

package/frontend-vue/layers/dms-layout/app/middleware/module-routing.global.ts

@@ -89,7 +89,7 @@ export default defineDmsMiddleware(async (to, from) => {
   const moduleEntry = siteLayout.modules.value?.[moduleId];
 
   if (!moduleId || !moduleEntry) {
-    throw createError({
+    throw createDmsError({
       statusCode: MODULE_NOT_FOUND_STATUS,
       statusMessage: MODULE_NOT_FOUND_MESSAGE,
       data: { kind: MODULE_NOT_FOUND_KIND },

package/frontend-vue/layers/dms-layout/app/middleware/page-leave-guard.global.ts

@@ -8,7 +8,7 @@ export default defineDmsMiddleware(async (to, from) => {
   // Unsaved changes anywhere (the page's forms, an open drawer or modal, a
   // settings panel): one warning dialog, whatever holds them.
   if (!(await confirmLeave())) {
-    return abortNavigation();
+    return abortDmsNavigation();
   }
 
   const { executeGuards } = useLeaveGuard();
@@ -17,6 +17,6 @@ export default defineDmsMiddleware(async (to, from) => {
   const canLeave = await executeGuards(pageKey);
 
   if (!canLeave) {
-    return abortNavigation();
+    return abortDmsNavigation();
   }
 });