@antelopejs/dms 0.9.8 → 0.11.0

package/frontend-vue/layers/dms-layout/app/build/components/layout/RowSidePanel.vue

@@ -1,47 +1,52 @@
 <script setup lang="ts">
 /**
  * The body of the side panel a `sidePanel` action target opens on a row (see
- * `rowSidePanel.ts`). The DMS draws the header: the title, the row's position
- * among the rows the table shows, previous and next (J and K too) and close
- * (Escape too). Below it, the module's component receives the row as a
- * drawer's component does, mounted anew on each row. The position follows the
- * table: a refresh that moves or drops the row updates it. A row the link
- * names but its route answered 404 for shows the "not found" state instead,
- * with a close button.
+ * `rowSidePanel.ts`). The DMS draws the header (`RowHeader`, shared with a
+ * row drawer): the title, the row's position among the rows the table shows,
+ * previous and next (J and K too) and close (Escape too). Below it, the
+ * module's component receives the row as a drawer's component does, mounted
+ * anew on each row. The position follows the table: a refresh or live rows
+ * that move it update it, and a row past the rows loaded (a deep link) is
+ * located in the table's whole result. A row the link names but its route answered 404
+ * for shows the "not found" state instead, with a close button.
  */
-import { computed, onBeforeUnmount, onMounted } from "vue";
-import DmsEmptyState from "#dms-ui/app/components/empty-state/EmptyState.vue";
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import DmsRowHeader from "#dms-ui/app/build/components/containers/row/RowHeader.vue";
+import DmsRowNotFound from "#dms-ui/app/build/components/containers/row/RowNotFound.vue";
 import {
   listenRowPanelClose,
   listenRowSteps,
-  rowNavigation,
+  trackRowNavigation,
 } from "#dms-ui/app/build/composables/actions/rowNavigation";
 import {
   closeRowSidePanel,
   useRowSidePanelContent,
 } from "../../composables/layout/rowSidePanel";
 
-const DEFAULT_POSITION_KEY = "side_panel.position";
-
 const { t } = useI18n();
-const { processI18n } = useTranslation();
 const content = useRowSidePanelContent();
 
-const navigation = computed(() => {
-  const current = content.value;
-  if (!current?.row || !current.source) return undefined;
-  return rowNavigation(current.source, current.row, current.showRow);
-});
-
-const position = computed(() => {
-  if (!navigation.value) return undefined;
-  const params = {
-    index: navigation.value.index + 1,
-    total: navigation.value.total,
-  };
-  const label = content.value?.positionLabel;
-  return label ? processI18n(label, params) : t(DEFAULT_POSITION_KEY, params);
-});
+const navigation = shallowRef<RowNavigation>();
+let stopNavigation: (() => void) | undefined;
+watch(
+  content,
+  (current) => {
+    stopNavigation?.();
+    stopNavigation = undefined;
+    navigation.value = undefined;
+    if (!current?.row || !current.source) return;
+    stopNavigation = trackRowNavigation(
+      current.source,
+      current.row,
+      current.showRow,
+      (next) => {
+        navigation.value = next;
+      },
+    );
+  },
+  // At once: a second J right after the first steps from the row it opened.
+  { immediate: true, flush: "sync" },
+);
 
 const componentProps = computed(() => ({
   ...content.value?.componentOptions,
@@ -53,16 +58,6 @@ const heading = computed(() => content.value?.rowTitle || content.value?.title);
 
 const close = () => closeRowSidePanel();
 
-const notFoundActions = computed(() => [
-  {
-    label: t("side_panel.close"),
-    icon: "i-ph-x",
-    color: "neutral" as const,
-    variant: "outline" as const,
-    onClick: close,
-  },
-]);
-
 let stopKeys: Array<() => void> = [];
 
 onMounted(() => {
@@ -76,6 +71,7 @@ onMounted(() => {
 // longer open.
 onBeforeUnmount(() => {
   stopKeys.forEach((stop) => stop());
+  stopNavigation?.();
   close();
 });
 </script>
@@ -85,45 +81,12 @@ onBeforeUnmount(() => {
     <header
       class="border-default flex shrink-0 items-start gap-2 border-b py-3 ps-4 pe-3"
     >
-      <div class="min-w-0 flex-1 self-center">
-        <h2
-          class="text-highlighted truncate text-[15px] leading-[1.3] font-[650] tracking-[-0.015em]"
-        >
-          {{ heading }}
-        </h2>
-        <p
-          v-if="position"
-          data-dms-row-side-panel-position
-          class="text-muted mt-0.5 text-[12.5px] tabular-nums"
-        >
-          {{ position }}
-        </p>
-      </div>
-      <div class="flex shrink-0 items-center gap-0.5">
-        <template v-if="navigation">
-          <UButton
-            data-dms-row-side-panel-prev
-            icon="i-ph-caret-up"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            square
-            :aria-label="t('side_panel.previous')"
-            :disabled="!navigation.hasPrev"
-            @click="navigation.prev()"
-          />
-          <UButton
-            data-dms-row-side-panel-next
-            icon="i-ph-caret-down"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            square
-            :aria-label="t('side_panel.next')"
-            :disabled="!navigation.hasNext"
-            @click="navigation.next()"
-          />
-        </template>
+      <DmsRowHeader
+        part="dms-row-side-panel"
+        :heading="heading"
+        :position-label="content.positionLabel"
+        :navigation="navigation"
+      >
         <UButton
           data-dms-row-side-panel-close
           icon="i-ph-x"
@@ -134,17 +97,15 @@ onBeforeUnmount(() => {
           :aria-label="t('side_panel.close')"
           @click="close"
         />
-      </div>
+      </DmsRowHeader>
     </header>
     <div class="min-h-0 flex-1 overflow-y-auto p-4">
-      <DmsEmptyState
+      <DmsRowNotFound
         v-if="content.notFound"
         data-dms-row-side-panel-not-found
-        variant="no-result"
         :title="content.notFound.title"
         :description="content.notFound.description"
-        :actions="notFoundActions"
-        class="py-10"
+        @close="close"
       />
       <Suspense v-else>
         <component

package/frontend-vue/layers/dms-layout/app/build/components/layout/SidebarUserMenu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import UserIdentity from "./UserIdentity.vue";
+import { useSidebarState } from "./sidebarState";
 import type { DropdownMenuItem } from "@nuxt/ui";
 
 interface Props {
@@ -27,11 +28,32 @@ const COLOR_MODE_ENTRIES: ColorModeEntry[] = [
 ];
 
 const { t, locale } = useI18n();
+const route = useDmsRoute();
 const { user } = useCurrentUser();
 const { logout } = useLogout();
 const colorModePreference = useColorModePreference();
 const { uniqueLocales } = useUniqueLocales();
 const { changeLanguage } = useUserLanguage();
+const { open: sidebarOpen } = useSidebarState();
+
+// The picture the profile saved, read from the session user: a profile save
+// refreshes that user, so a new picture shows here at once.
+const avatarUrls = useFileReadUrls();
+const avatarKey = computed(() => user.value?.avatar?.key);
+const avatarSrc = computed(() =>
+  avatarKey.value ? avatarUrls.getUrl(avatarKey.value) : undefined,
+);
+watch(avatarKey, (key) => key && void avatarUrls.resolve(key), {
+  immediate: true,
+});
+
+// The settings have no sidebar entry: their only way in is this menu, so its
+// trigger is drawn active while a settings page is open.
+const isOnSettings = computed(
+  () =>
+    route.path === SETTINGS_ROUTE ||
+    route.path.startsWith(`${SETTINGS_ROUTE}/`),
+);
 
 // v2 user menu: account links, then the per-user preferences as submenus,
 // then logging out.
@@ -67,6 +89,11 @@ const menuItems = computed<DropdownMenuItem[][]>(() => [
     label: t(entry.labelKey),
     icon: entry.icon,
     to: entry.to,
+    // The menu renders in a portal, outside the sidebar whose link clicks
+    // close the phone drawer: its own entries close it themselves.
+    onSelect: () => {
+      sidebarOpen.value = false;
+    },
   })),
   preferenceItems.value,
   [
@@ -91,12 +118,25 @@ const menuItems = computed<DropdownMenuItem[][]>(() => [
     <button
       type="button"
       class="hover:bg-elevated data-[state=open]:bg-elevated flex w-full items-center gap-2.5 rounded-md p-1.5 text-start transition-colors"
-      :class="{ 'justify-center': props.collapsed }"
+      :class="{
+        'justify-center': props.collapsed,
+        'bg-elevated': isOnSettings,
+      }"
       :aria-label="user?.name"
+      :data-active="isOnSettings || undefined"
     >
-      <UAvatar v-if="props.collapsed" :alt="user?.name" size="sm" />
+      <UAvatar
+        v-if="props.collapsed"
+        :src="avatarSrc"
+        :alt="user?.name"
+        size="sm"
+      />
       <template v-else>
-        <UserIdentity :name="user?.name" :email="user?.email" />
+        <UserIdentity
+          :name="user?.name"
+          :email="user?.email"
+          :avatar-src="avatarSrc"
+        />
         <UIcon :name="TRIGGER_ICON" class="text-dimmed size-4 shrink-0" />
       </template>
     </button>
@@ -105,6 +145,7 @@ const menuItems = computed<DropdownMenuItem[][]>(() => [
       <UserIdentity
         :name="user?.name"
         :email="user?.email"
+        :avatar-src="avatarSrc"
         avatar-size="md"
         class="border-default border-b px-2.5 py-2.5"
       />

package/frontend-vue/layers/dms-layout/app/build/components/layout/UserIdentity.vue

@@ -1,25 +1,33 @@
 <script setup lang="ts">
 import type { AvatarProps } from "@nuxt/ui";
 
-// The signed-in user as the shell shows them: initials avatar, name, then
-// the e-mail in mono (the sidebar menu's trigger and its header).
+// The signed-in user as the shell shows them: their picture (initials
+// without one), name, then the e-mail in mono (the sidebar menu's trigger and
+// its header).
 
 interface UserIdentityProps {
   name?: string;
   email?: string;
+  avatarSrc?: string;
   avatarSize?: AvatarProps["size"];
 }
 
 const props = withDefaults(defineProps<UserIdentityProps>(), {
   name: undefined,
   email: undefined,
+  avatarSrc: undefined,
   avatarSize: "sm",
 });
 </script>
 
 <template>
   <span class="flex min-w-0 flex-1 items-center gap-2.5">
-    <UAvatar :alt="props.name" :size="props.avatarSize" class="shrink-0" />
+    <UAvatar
+      :src="props.avatarSrc"
+      :alt="props.name"
+      :size="props.avatarSize"
+      class="shrink-0"
+    />
     <span class="flex min-w-0 flex-1 flex-col">
       <span
         class="text-highlighted truncate text-[13px] leading-tight font-semibold"

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>