@antelopejs/dms 0.9.8 → 0.10.0

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

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import ModuleTile from "./ModuleTile.vue";
-import type { Tone } from "#dms-ui/app/types/tone";
+import ModuleManageMenu from "./ModuleManageMenu.vue";
+import ModuleSourceLabel from "./ModuleSourceLabel.vue";
+import ModuleStoreOperation from "./ModuleStoreOperation.vue";
+import ModuleStoreRequirements from "./ModuleStoreRequirements.vue";
 import type {
   CheckListItem,
   CheckListState,
@@ -8,27 +11,52 @@ import type {
 import type {
   ModuleCatalogEntry,
   ModuleReadoutTone,
-  ModuleStatus,
 } from "../../../../types/page";
-import { moduleCategory, moduleStatus } from "../../../utils/modules-catalog";
+import type { StoreOperationKind } from "../../../../types/module-store";
+import { moduleCategory } from "../../../utils/modules-catalog";
+import {
+  type ModuleStoreEntry,
+  type StoreAction,
+  installedTileStatus,
+  storeActions,
+  storeBlockMessage,
+} from "../../../utils/module-store-catalog";
+
+// An installed module: its state, a live readout, and the one place it is
+// managed. Its button opens it on its landing page, or resumes it while it
+// is paused; the store actions it offers are in its Manage menu.
 
 interface ModuleCatalogTileProps {
   entry: ModuleCatalogEntry;
-  /** Where the tile leads: the last page visited in the module, or its landing page. */
-  to: string;
+  /** Where Open leads: the module's landing page, when it has pages. */
+  to?: string;
+  /** What the module store says of it, when the store lists it. */
+  storeEntry?: ModuleStoreEntry;
+  /** Another module's operation runs, or the store is read-only. */
+  isLocked?: boolean;
+}
+
+interface ModuleCatalogTileEmits {
+  action: [kind: StoreOperationKind];
 }
 
-const props = defineProps<ModuleCatalogTileProps>();
+const props = withDefaults(defineProps<ModuleCatalogTileProps>(), {
+  to: undefined,
+  storeEntry: undefined,
+  isLocked: false,
+});
+const emit = defineEmits<ModuleCatalogTileEmits>();
 const { t } = useI18n();
 const { processI18n } = useTranslation();
 
-// v2 .module-tile__state: a mono uppercase pill with a leading dot.
-const STATUS_TONES: Record<ModuleStatus, Tone> = {
-  live: "success",
-  beta: "secondary",
-  update: "warning",
-  attention: "error",
-};
+const TOOLTIP_CONTENT = { side: "top", sideOffset: 6 } as const;
+// Takes what the actions leave rather than wrapping them under it: the band
+// stays one line, and only the category is cut when even that is too short.
+// The facts never shrink below the version and the source (the category's
+// zero width keeps its text out of that floor): a tile too narrow for those
+// and the actions drops the actions to a second line rather than run the
+// source under them.
+const FOOTER_FACTS_CLASS = "flex grow basis-0 items-center gap-2";
 
 // v2 .module-tile__viz: each readout line opens with a tone glyph.
 const READOUT_STATES: Record<ModuleReadoutTone, CheckListState> = {
@@ -38,7 +66,9 @@ const READOUT_STATES: Record<ModuleReadoutTone, CheckListState> = {
   error: "error",
 };
 
-const status = computed(() => moduleStatus(props.entry));
+const status = computed(() =>
+  installedTileStatus(props.entry, props.storeEntry),
+);
 const readout = computed<CheckListItem[]>(() =>
   (props.entry.readout ?? []).map((line, index) => ({
     id: String(index),
@@ -47,18 +77,41 @@ const readout = computed<CheckListItem[]>(() =>
   })),
 );
 const title = computed(() => processI18n(props.entry.title));
+const category = computed(() => processI18n(moduleCategory(props.entry)));
+
+const actions = computed<StoreAction[]>(() =>
+  props.storeEntry ? storeActions(props.storeEntry) : [],
+);
+/** The store action the button runs when there is nothing to open. */
+const primary = computed<StoreAction | undefined>(() =>
+  props.to ? undefined : actions.value.find((action) => !action.isMenuOnly),
+);
+const menuActions = computed(() =>
+  actions.value.filter((action) => action !== primary.value),
+);
+const isOperating = computed(() => props.storeEntry?.operation !== undefined);
+
+/** Why the button waits, when it does. */
+const blockedReason = computed(() => {
+  if (!primary.value || !props.storeEntry) return undefined;
+  if (props.isLocked) return t("modules.store.locked");
+  return storeBlockMessage(props.storeEntry, primary.value.kind, t);
+});
+const isBlocked = computed(() => blockedReason.value !== undefined);
 </script>
 
 <template>
   <ModuleTile
-    :to="props.to"
+    :id="`module-${props.entry.id}`"
     :icon="props.entry.icon"
     :title="title"
     :description="processI18n(props.entry.description)"
     :status="{
-      tone: STATUS_TONES[status],
-      label: t(`modules.status.${status}`),
+      tone: status.tone,
+      dot: status.dot,
+      label: t(status.labelKey),
     }"
+    is-solid
   >
     <template #readout>
       <DmsCheckList
@@ -72,26 +125,70 @@ const title = computed(() => processI18n(props.entry.title));
       />
     </template>
 
+    <template v-if="props.storeEntry">
+      <ModuleStoreOperation :entry="props.storeEntry" />
+      <p
+        v-if="!isOperating && props.storeEntry.state === 'pending'"
+        class="text-xs text-(--ui-warning)"
+      >
+        {{ t("modules.store.pending_hint") }}
+      </p>
+      <ModuleStoreRequirements v-if="!isOperating" :entry="props.storeEntry" />
+    </template>
+
     <template #footer>
-      <span v-if="props.entry.version" class="whitespace-nowrap">
-        v{{ props.entry.version }}
+      <!-- v0.5.0 · [icon] npm · Content, as the store tile says it: the
+           state is the pill's to say. Only the category gives way to Open
+           and Manage; the version and the source stay whole. -->
+      <span :class="FOOTER_FACTS_CLASS">
+        <span v-if="props.entry.version" class="shrink-0 whitespace-nowrap">
+          v{{ props.entry.version }}
+        </span>
+        <template v-if="props.entry.source">
+          <span v-if="props.entry.version" aria-hidden="true">·</span>
+          <ModuleSourceLabel :source="props.entry.source" />
+        </template>
+        <span class="w-0 min-w-0 grow truncate" :title="category">
+          <template v-if="props.entry.version || props.entry.source">
+            ·
+          </template>
+          {{ category }}
+        </span>
       </span>
-      <span v-if="status === 'update'" class="text-warning truncate">
-        <template v-if="props.entry.version">·</template>
-        {{ t("modules.update_available") }}
-      </span>
-      <span v-else class="truncate">
-        <template v-if="props.entry.version">·</template>
-        {{ processI18n(moduleCategory(props.entry)) }}
-      </span>
-      <span
-        class="text-primary ms-auto inline-flex shrink-0 items-center gap-1 font-sans text-xs font-semibold"
-      >
-        {{ t("modules.open") }}
-        <UIcon
-          name="i-ph-arrow-right"
-          class="size-3.5 transition-transform group-hover:translate-x-0.5"
-          :aria-hidden="true"
+      <span class="ms-auto flex shrink-0 items-center gap-1 font-sans">
+        <UButton
+          v-if="props.to"
+          :to="props.to"
+          size="xs"
+          color="primary"
+          variant="soft"
+          trailing-icon="i-ph-arrow-right"
+          :label="t('modules.open')"
+        />
+        <UTooltip
+          v-else-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="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>
+        <ModuleManageMenu
+          v-if="props.storeEntry && !props.isLocked"
+          :entry="props.storeEntry"
+          :actions="menuActions"
+          @action="emit('action', $event)"
         />
       </span>
     </template>

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import {
+  type ModuleStoreEntry,
+  type StoreAction,
+  storeBlockMessage,
+} from "../../../utils/module-store-catalog";
+import type { StoreOperationKind } from "../../../../types/module-store";
+
+// The Manage menu of an installed module: the store actions its tile does
+// not show as its button. One that cannot run stays listed, disabled, with
+// why under it.
+
+interface ModuleManageMenuProps {
+  entry: ModuleStoreEntry;
+  actions: StoreAction[];
+}
+
+interface ModuleManageMenuEmits {
+  action: [kind: StoreOperationKind];
+}
+
+const props = defineProps<ModuleManageMenuProps>();
+const emit = defineEmits<ModuleManageMenuEmits>();
+const { t } = useI18n();
+
+const items = computed(() =>
+  props.actions.map((action) => {
+    const blocked = storeBlockMessage(props.entry, action.kind, t);
+    return {
+      label: t(`modules.store.actions.${action.labelKey}`),
+      description: blocked,
+      icon: action.icon,
+      color: action.kind === "uninstall" ? ("error" as const) : undefined,
+      disabled: blocked !== undefined,
+      onSelect: () => emit("action", action.kind),
+    };
+  }),
+);
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="items.length > 0"
+    :items="items"
+    :content="{ align: 'end' }"
+    :ui="{
+      content: 'max-w-72',
+      itemDescription: 'whitespace-normal text-muted text-xs',
+    }"
+  >
+    <UButton
+      size="xs"
+      color="neutral"
+      variant="outline"
+      trailing-icon="i-ph-caret-down"
+      :label="t('modules.store.actions.manage')"
+    />
+  </UDropdownMenu>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ModuleSourceKind } from "../../../../types/module-store";
+import { MODULE_SOURCE_ICONS } from "../../../utils/module-store-catalog";
+
+// Where a module's code comes from, as a tile's footer names it: an icon
+// and a short name (npm, GitHub, GitLab, Git, Local).
+
+interface ModuleSourceLabelProps {
+  source: ModuleSourceKind;
+}
+
+const props = defineProps<ModuleSourceLabelProps>();
+const { t } = useI18n();
+</script>
+
+<template>
+  <span class="inline-flex shrink-0 items-center gap-1 whitespace-nowrap">
+    <UIcon
+      :name="MODULE_SOURCE_ICONS[props.source]"
+      class="size-3.5"
+      :aria-hidden="true"
+    />
+    {{ t(`modules.source.${props.source}`) }}
+  </span>
+</template>

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>