@antelopejs/dms 0.9.8 → 0.11.0

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { MONO_CHIP_CLASS } from "#dms-ui/app/build/utils/monoChip";
+import { FRONTEND_BUILD_COMMAND } from "../../../utils/module-store-catalog";
+import type { StoreListing } from "../../../../types/module-store";
+import type { StoreFrontendNotice } from "../../../../composables/page/useModuleStoreActions";
+
+// What keeps the store from changing modules here, and what follows a
+// change while the interface lags behind the backend: shown above the
+// installed modules and the store alike.
+
+interface ModuleStoreBannersProps {
+  listing: StoreListing | undefined;
+  frontendNotice: StoreFrontendNotice | null;
+}
+
+const props = defineProps<ModuleStoreBannersProps>();
+const { t } = useI18n();
+</script>
+
+<template>
+  <DmsBanner
+    v-if="props.listing?.configError"
+    class="mb-4"
+    tone="error"
+    size="sm"
+    icon="i-ph-file-x"
+    :title="t('modules.store.config_error')"
+    :description="props.listing.configError"
+  />
+  <DmsBanner
+    v-else-if="props.listing && !props.listing.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="props.frontendNotice"
+    class="mb-4"
+    :tone="props.frontendNotice.key === 'dev' ? 'info' : 'warning'"
+    size="sm"
+    :icon="
+      props.frontendNotice.key === 'dev'
+        ? 'i-ph-circle-notch'
+        : 'i-ph-arrows-clockwise'
+    "
+    :title="
+      t(`modules.store.frontend.${props.frontendNotice.key}.title`, {
+        modules: props.frontendNotice.names,
+      })
+    "
+  >
+    <template #description>
+      <i18n-t
+        :keypath="`modules.store.frontend.${props.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>

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

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { ModuleStoreEntry } from "../../../utils/module-store-catalog";
+import type {
+  StoreOperationKind,
+  StoreOperationStep,
+} from "../../../../types/module-store";
+
+// What the store is doing to a module, on whichever tile shows it: the steps
+// of the running operation, the current one spinning, or the error the last
+// one left.
+
+interface ModuleStoreOperationProps {
+  entry: ModuleStoreEntry;
+}
+
+const props = defineProps<ModuleStoreOperationProps>();
+const { t } = useI18n();
+
+/** 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 STEP_ICONS: Record<string, string> = {
+  done: "i-ph-check-circle-fill",
+  running: "i-ph-circle-notch",
+  todo: "i-ph-circle",
+};
+
+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 };
+  });
+});
+</script>
+
+<template>
+  <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>
+</template>

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

@@ -18,7 +18,10 @@ const missingInterfaces = computed(() =>
     .map((missing) => missing.interfacePackage)
     .join(LIST_SEPARATOR),
 );
-const dependents = computed(() => props.entry.dependents.join(LIST_SEPARATOR));
+// A working copy offers no action, so who uses it changes nothing there.
+const dependents = computed(() =>
+  props.entry.isWorkingCopy ? "" : props.entry.dependents.join(LIST_SEPARATOR),
+);
 </script>
 
 <template>
@@ -92,7 +95,9 @@ const dependents = computed(() => props.entry.dependents.join(LIST_SEPARATOR));
     {{ t("modules.store.requires", { interfaces: missingInterfaces }) }}
   </p>
 
-  <p v-if="dependents" class="text-xs text-(--ui-warning)">
-    {{ t("modules.store.used_by", { modules: dependents }) }}
+  <!-- Informative only: what it takes to pause or remove the module is
+       said in the Manage menu, where those actions are. -->
+  <p v-if="dependents" class="text-dimmed truncate text-xs" :title="dependents">
+    {{ t("modules.store.dependents", { modules: dependents }) }}
   </p>
 </template>

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"