@antelopejs/dms 0.9.8 → 0.11.0

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

@@ -1,5 +1,4 @@
 <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,8 +12,8 @@ import type { Tone } from "#dms-ui/app/types/tone";
 import { useKeyboardPlatform } from "#dms-ui/app/composables/global/keyboardPlatform";
 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 ModuleStoreBanners from "../build/components/pages/modules/ModuleStoreBanners.vue";
+import ModuleTileSkeleton from "../build/components/pages/modules/ModuleTileSkeleton.vue";
 import { usePageHeaderActions } from "../composables/layout/usePageHeaderActions";
 import {
   ENDPOINT_MODULES_LISTING,
@@ -24,7 +23,10 @@ import { useModuleHistory } from "../composables/page/useModuleHistory";
 import type { ModuleCatalogEntry } from "../types/page";
 import {
   MODULE_CATEGORY_ALL,
+  MODULE_STORE_PATH,
+  MODULE_TILE_GRID_CLASS,
   filterModules,
+  parseModuleSortMode,
   findModulePageMatch,
   moduleCategoryOptions,
   sortModules,
@@ -32,35 +34,19 @@ import {
   type ModuleSortMode,
 } from "../build/utils/modules-catalog";
 import {
-  type ModuleStoreEntry,
-  type StoreScope,
-  FRONTEND_BUILD_COMMAND,
-  filterByScope,
-  isAwaitingFrontend,
-  needsDependencyChoice,
   sortStoreModules,
+  storeOnlyModules,
+  storeOpenTarget,
   toModuleStoreEntry,
+  withStoreDetails,
 } 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 { useModuleStoreActions } from "../composables/page/useModuleStoreActions";
 import DmsSearchInput from "#dms-ui/app/build/components/form/SearchInput.vue";
 
 const SKELETON_PLACEHOLDER_COUNT = 6;
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 const { processI18n } = useTranslation();
 const { keyLabel } = useKeyboardPlatform();
 const isOwner = useIsOwner();
@@ -84,6 +70,15 @@ usePageHeaderActions(() => {
         t("modules.owner_badge"),
       ],
     ),
+    h(UButton, {
+      label: t("modules.browse_store"),
+      icon: "i-ph-storefront",
+      to: MODULE_STORE_PATH,
+      color: "primary",
+      variant: "soft",
+      ui: { label: "max-sm:sr-only" },
+      "aria-label": t("modules.browse_store"),
+    }),
     h(UButton, {
       label: t("modules.refresh"),
       icon: "i-ph-arrows-clockwise",
@@ -113,10 +108,14 @@ if (!isOwner.value) {
   });
 }
 
-// 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();
+// Declared before the installed modules, which take the version, category and
+// source a registration leaves out from it, and the store actions.
+const moduleStore = useModuleStore();
+
+// Both listings are read with the page (`useApiData`): a server render waits
+// for them and hands them to the browser, which hydrates on them without
+// reading again. Nothing awaits them here: a client navigation shows the
+// tile skeletons, sized like the tiles, until they answer.
 
 const isForbidden = computed(
   () =>
@@ -135,16 +134,32 @@ const isInitiallyLoading = computed(
 );
 const isRetrying = ref(false);
 
-const modules = computed<ModuleCatalogEntry[]>(() =>
-  (modulesListing.modules.value ?? []).filter((entry) => entry.hasAccess),
+const storeModules = computed(() =>
+  sortStoreModules(
+    (moduleStore.listing.value?.modules ?? []).map((entry) =>
+      toModuleStoreEntry(entry, modulesListing.modules.value ?? []),
+    ),
+    processI18n,
+    locale.value,
+  ),
+);
+const storeEntries = computed(
+  () => new Map(storeModules.value.map((entry) => [entry.id, entry])),
 );
-const summary = computed(() => summarizeModules(modules.value));
 
-// ── Navigation targets ─────────────────────────────────────────────
-function moduleTarget(entry: ModuleCatalogEntry): string {
-  return moduleHistory.getLast(entry.id) ?? entry.landingSlug;
-}
+// The modules that run, and the installed ones that register nothing (paused,
+// not started, or without pages): antelope.config.ts declares them all.
+const modules = computed<ModuleCatalogEntry[]>(() => {
+  const registered = withStoreDetails(
+    (modulesListing.modules.value ?? []).filter((entry) => entry.hasAccess),
+    storeModules.value,
+  );
+  return [...registered, ...storeOnlyModules(storeModules.value, registered)];
+});
+const summary = computed(() => summarizeModules(modules.value));
 
+// The history only orders the grid by last use: a tile always opens the
+// module on its landing page, never where it was left.
 const visitedAt = computed(
   () =>
     new Map(
@@ -155,16 +170,19 @@ const visitedAt = computed(
     ),
 );
 
-// The installed modules, their skeleton and the store share one grid and
-// one search toolbar.
-const TILE_GRID_CLASS =
-  "grid grid-cols-[repeat(auto-fill,minmax(268px,1fr))] gap-4";
 const TOOLBAR_CLASS = "mb-[18px] flex flex-wrap items-center gap-2.5";
 
 // ── Search, category, sort ─────────────────────────────────────────
 const query = ref("");
 const category = ref<string>(MODULE_CATEGORY_ALL);
-const sortMode = ref<ModuleSortMode>("recent");
+// Remembered per browser in the preferences cookie, so the server renders the
+// grid in the order the browser hydrates it with.
+const SORT_MODE_PREFERENCE_KEY = "modulesPage.sort";
+const { getPreference, setPreference } = usePreferences();
+const sortMode = computed<ModuleSortMode>({
+  get: () => parseModuleSortMode(getPreference(SORT_MODE_PREFERENCE_KEY)),
+  set: (mode) => setPreference(SORT_MODE_PREFERENCE_KEY, mode),
+});
 
 const categoryOptions = computed(() => [
   {
@@ -183,8 +201,8 @@ watch(categoryOptions, (options) => {
 });
 
 const sortItems = computed(() => [
-  { value: "recent", label: t("modules.sort.recent") },
   { value: "name", label: t("modules.sort.name") },
+  { value: "recent", label: t("modules.sort.recent") },
 ]);
 
 const visibleModules = computed(() =>
@@ -197,6 +215,7 @@ const visibleModules = computed(() =>
     sortMode.value,
     visitedAt.value,
     processI18n,
+    locale.value,
   ),
 );
 
@@ -221,217 +240,22 @@ function clearFilters(): void {
 }
 
 // ── Module store ───────────────────────────────────────────────────
-const moduleStore = useModuleStore();
-const toast = useToast();
-const { confirm } = useConfirm();
-
 onMounted(() => {
-  if (isOwner.value) void moduleStore.load();
+  if (isOwner.value) moduleStore.start();
 });
 onBeforeUnmount(() => moduleStore.stop());
 
 const storeListing = computed(() => moduleStore.listing.value);
-const isStoreLoading = computed(
-  () => storeListing.value === undefined && !moduleStore.loadingError.value,
-);
-const storeModules = computed(() =>
-  sortStoreModules(
-    (storeListing.value?.modules ?? []).map((entry) =>
-      toModuleStoreEntry(entry, modulesListing.modules.value ?? []),
-    ),
-    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: scopedStoreModules.value.length,
-  },
-  ...moduleCategoryOptions(scopedStoreModules.value, processI18n),
-]);
-
-watch(storeCategoryOptions, (options) => {
-  if (!options.some((option) => option.value === storeCategory.value)) {
-    storeCategory.value = MODULE_CATEGORY_ALL;
-  }
-});
-
-const visibleStoreModules = computed(() =>
-  filterModules(scopedStoreModules.value, {
-    query: storeQuery.value,
-    category: storeCategory.value,
-    resolve: processI18n,
-  }),
-);
-const trimmedStoreQuery = computed(() => storeQuery.value.trim());
-
-function clearStoreFilters(): void {
-  storeQuery.value = "";
-  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 { runStoreAction, frontendNotice } = useModuleStoreActions(
+  moduleStore,
+  storeModules,
 );
-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.", "")}`);
+/** Whether a tile's store actions wait: read-only, or another one runs. */
+function isTileLocked(moduleId: string): boolean {
+  const listing = storeListing.value;
+  if (!listing?.enabled) return true;
+  return listing.busy && storeEntries.value.get(moduleId)?.state !== "busy";
 }
 
 // ── Actions ────────────────────────────────────────────────────────
@@ -544,6 +368,11 @@ const summaryCards = computed<StatGroupItem[]>(() =>
         :loading="isInitiallyLoading"
       />
 
+      <ModuleStoreBanners
+        :listing="storeListing"
+        :frontend-notice="frontendNotice"
+      />
+
       <!-- Installed -->
       <section>
         <DmsSectionHeader
@@ -582,38 +411,13 @@ const summaryCards = computed<StatGroupItem[]>(() =>
         <!-- Loading -->
         <div
           v-if="isInitiallyLoading"
-          :class="TILE_GRID_CLASS"
+          :class="MODULE_TILE_GRID_CLASS"
           aria-busy="true"
         >
-          <DmsCard
+          <ModuleTileSkeleton
             v-for="placeholder in skeletonItems"
             :key="placeholder"
-            :padded="false"
-            class="flex min-h-[228px] flex-col gap-3 p-4"
-          >
-            <div class="flex items-start justify-between">
-              <USkeleton
-                :aria-label="t('dms.a11y.loading')"
-                class="size-9 rounded-[10px]"
-              />
-              <USkeleton
-                :aria-label="t('dms.a11y.loading')"
-                class="h-5 w-12 rounded-full"
-              />
-            </div>
-            <USkeleton
-              :aria-label="t('dms.a11y.loading')"
-              class="h-2.5 w-4/5"
-            />
-            <USkeleton
-              :aria-label="t('dms.a11y.loading')"
-              class="h-2.5 w-3/5"
-            />
-            <USkeleton
-              :aria-label="t('dms.a11y.loading')"
-              class="mt-auto h-4 w-2/5"
-            />
-          </DmsCard>
+          />
         </div>
 
         <!-- Nothing installed -->
@@ -691,214 +495,23 @@ const summaryCards = computed<StatGroupItem[]>(() =>
           </DmsEmptyState>
         </DmsCard>
 
-        <div v-else :class="TILE_GRID_CLASS">
+        <div v-else :class="MODULE_TILE_GRID_CLASS">
           <ModuleCatalogTile
             v-for="entry in visibleModules"
             :key="entry.id"
             :entry="entry"
-            :to="moduleTarget(entry)"
+            :to="storeOpenTarget(entry, modules)"
+            :store-entry="storeEntries.get(entry.id)"
+            :is-locked="isTileLocked(entry.id)"
+            @action="
+              (kind) => {
+                const storeEntry = storeEntries.get(entry.id);
+                if (storeEntry) void runStoreAction(kind, storeEntry);
+              }
+            "
           />
         </div>
       </section>
-
-      <!-- Module store: the official modules, installed or not. -->
-      <section class="mt-10" aria-labelledby="module-store-title">
-        <DmsSectionHeader
-          class="mb-3"
-          :count="isStoreLoading ? undefined : storeModules.length"
-          :description="t('modules.store.description')"
-        >
-          <template #title>
-            <span id="module-store-title">{{ t("modules.store.title") }}</span>
-          </template>
-          <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"
-              :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-lock-simple"
-          :title="t('modules.store.disabled.title')"
-          :description="t('modules.store.disabled.description')"
-        />
-
-        <!-- 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,
-            })
-          "
-        >
-          <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>
-
-        <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"
-              size="sm"
-              :placeholder="t('modules.store.search_placeholder')"
-              class="w-[300px] max-md:w-full"
-            />
-            <DmsChipGroup
-              :items="storeCategoryOptions"
-              :selected="[storeCategory]"
-              :label="t('modules.store.category_label')"
-              @pick="storeCategory = $event"
-            />
-          </div>
-
-          <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="
-                trimmedStoreQuery
-                  ? t('modules.store.no_result.title', {
-                      query: trimmedStoreQuery,
-                    })
-                  : t('modules.store.no_result.title_filtered')
-              "
-            >
-              <template #actions>
-                <UButton
-                  color="neutral"
-                  variant="outline"
-                  size="sm"
-                  :label="t('modules.no_result.clear')"
-                  @click="clearStoreFilters"
-                />
-              </template>
-            </DmsEmptyState>
-          </DmsCard>
-
-          <div v-else :class="TILE_GRID_CLASS">
-            <ModuleStoreTile
-              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>
-      </section>
     </template>
   </div>
 </template>

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

@@ -88,6 +88,9 @@ export default defineDmsMiddleware(async (to, from) => {
 
   const moduleEntry = siteLayout.modules.value?.[moduleId];
 
+  // A page of the Modules page itself (the module store), not of a module.
+  if (!moduleEntry && siteLayout.findMatchingRoute(to.path)?.metadata) return;
+
   if (!moduleId || !moduleEntry) {
     throw createDmsError({
       statusCode: MODULE_NOT_FOUND_STATUS,