@antelopejs/dms 0.5.6 → 0.6.1

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

@@ -10,26 +10,74 @@ import {
   SidebarWidgetPosition,
 } from "../../../composables/useSidebarWidgets";
 import { useSidebarState } from "./sidebarState";
+import { useKeyboardPlatform } from "#dms-ui/app/composables/global/keyboardPlatform";
+import { useMediaQuery } from "@vueuse/core";
+import DmsSidebarUserMenu from "./SidebarUserMenu.vue";
 
 const SETTINGS_PATH = "/settings";
 const MODULES_PATH = "/modules";
+// Registered ids of the footer entries, so "Preview as role" can lock them.
+const SETTINGS_FULL_ID = "settings";
+const MODULES_FULL_ID = "modules";
 const MODULES_TREE_KEY = "modules";
-const SETTINGS_ICON = "i-ph-gear-light";
+const SETTINGS_ICON = "i-ph-gear-six-light";
 const MODULES_ICON = "i-ph-squares-four-light";
 const BACK_ICON = "i-ph-arrow-left-light";
 const ESCAPE_KEY = "Escape";
+const SIDEBAR_DEFAULT_WIDTH_PX = 240;
+const SIDEBAR_MIN_WIDTH_PX = 200;
+const SIDEBAR_MAX_WIDTH_PX = 320;
+const SIDEBAR_COLLAPSED_WIDTH_PX = 60;
+const SEARCH_SHORTCUT_KEYS = ["meta", "k"];
+const DESKTOP_QUERY = "(min-width: 1024px)";
+// On a short screen the menu overflows the body, which then scrolls: without
+// this the flex column squeezed the search field and widgets instead.
+const SIDEBAR_UI = { body: "*:shrink-0" };
 
 const { t } = useI18n();
 const appConfig = useDmsAppConfig();
 const { processI18n } = useTranslation();
 const route = useDmsRoute();
 const { open: sidebarOpen, collapsed: sidebarCollapsed } = useSidebarState();
+const { formatShortcut } = useKeyboardPlatform();
+// The palette's own key (Nuxt UI binds `meta_k`: ⌘ on macOS, Ctrl elsewhere),
+// printed for the platform: "⌘K" or "Ctrl K".
+const searchShortcutHint = computed(() => formatShortcut(SEARCH_SHORTCUT_KEYS));
+// The collapsed rail shows only the icon: its tooltip (shown only while
+// collapsed, labelled with the button's label) adds the key.
+const searchTooltip = computed(() => ({ kbds: [searchShortcutHint.value] }));
 
 function closeMobileSidebar(event?: KeyboardEvent): void {
   if (event && event.key !== ESCAPE_KEY) return;
   sidebarOpen.value = false;
 }
 
+// The drawer only exists below `lg`: widening past it (a tablet turned to
+// landscape) closes it, so the desktop sidebar never stays pinned as one.
+const isDesktop = useMediaQuery(DESKTOP_QUERY);
+watch(isDesktop, (desktop) => {
+  if (desktop) sidebarOpen.value = false;
+});
+
+// Going to a page closes the drawer, wherever the navigation came from (a
+// menu link, the user menu, the palette).
+watch(
+  () => route.path,
+  () => closeMobileSidebar(),
+);
+
+// A link to the page already shown changes no route: close on the click.
+function closeOnLinkClick(event: MouseEvent): void {
+  if (!sidebarOpen.value) return;
+  if ((event.target as Element | null)?.closest("a[href]")) {
+    closeMobileSidebar();
+  }
+}
+
+// The drawer always shows the full menu, even when the desktop sidebar was
+// collapsed to its rail.
+const isRail = (collapsed: boolean): boolean => collapsed && !sidebarOpen.value;
+
 onMounted(() => window.addEventListener("keydown", closeMobileSidebar));
 onBeforeUnmount(() =>
   window.removeEventListener("keydown", closeMobileSidebar),
@@ -118,11 +166,17 @@ const favoriteItems = computed((): NavigationMenuItem[][] => {
         label: t("menu.favorites"),
         icon: "i-ph-star-light",
         defaultOpen: true,
-        children: favoritePages.sortedFavorites.value.map((favorite) => ({
-          label: processI18n(favorite.title),
-          icon: favorite.icon || DEFAULT_PAGE_ICON,
-          to: favorite.path,
-        })),
+        children: favoritePages.sortedFavorites.value.map(
+          (favorite): DmsMenuItem => ({
+            // The page's registered id, for the preview's locks.
+            fullId: siteLayout.findMatchingRoute(
+              stripQueryAndHash(favorite.path),
+            )?.metadata.fullId,
+            label: processI18n(favorite.title),
+            icon: favorite.icon || DEFAULT_PAGE_ICON,
+            to: favorite.path,
+          }),
+        ),
       },
     ],
   ];
@@ -182,6 +236,15 @@ watch(
   { immediate: true },
 );
 
+const moduleCount = computed(() => {
+  const modulesNode =
+    siteLayout.siteLayoutTree.value?.children[MODULES_TREE_KEY];
+  if (!modulesNode) return 0;
+  return modulesNode.childrenOrders.filter(
+    (childId) => modulesNode.children[childId]?.isModuleRoot,
+  ).length;
+});
+
 const footerItems = computed((): NavigationMenuItem[] => {
   const result: NavigationMenuItem[] = [];
 
@@ -199,10 +262,11 @@ const footerItems = computed((): NavigationMenuItem[] => {
   result.push(
     addActiveStateToMenuItem(
       {
+        fullId: SETTINGS_FULL_ID,
         label: t("menu.section.settings"),
         to: SETTINGS_PATH,
         icon: SETTINGS_ICON,
-      },
+      } as DmsMenuItem,
       currentFullId.value,
       currentRoute.value,
     ),
@@ -210,10 +274,21 @@ const footerItems = computed((): NavigationMenuItem[] => {
 
   if (isOwner.value) {
     result.push({
+      fullId: MODULES_FULL_ID,
       label: t("menu.modules"),
       to: MODULES_PATH,
       icon: MODULES_ICON,
       exact: true,
+      ...(moduleCount.value > 0
+        ? {
+            badge: {
+              label: String(moduleCount.value),
+              color: "neutral",
+              variant: "subtle",
+              size: "sm",
+            },
+          }
+        : {}),
     });
   }
 
@@ -235,74 +310,82 @@ const footerItems = computed((): NavigationMenuItem[] => {
     data-dms-persistent-sidebar
     :open="false"
     v-model:collapsed="sidebarCollapsed"
-    :ui="{
-      footer: 'lg:border-t lg:border-default',
-      toggle: 'hidden',
-    }"
+    :default-size="SIDEBAR_DEFAULT_WIDTH_PX"
+    :min-size="SIDEBAR_MIN_WIDTH_PX"
+    :max-size="SIDEBAR_MAX_WIDTH_PX"
+    :collapsed-size="SIDEBAR_COLLAPSED_WIDTH_PX"
     :toggle="false"
+    :ui="SIDEBAR_UI"
     collapsible
     resizable
-    class="bg-default"
+    class="bg-(--dms-bg-sidebar)"
     :class="{
-      'fixed inset-y-0 start-0 z-50 flex w-80 max-w-[85vw] shadow-xl':
+      'fixed inset-y-0 start-0 z-50 flex w-[280px] max-w-[85vw] shadow-xl':
         sidebarOpen,
     }"
+    @click="closeOnLinkClick"
   >
-    <template #header="{ collapsed }">
-      <DmsLink :to="homepage" class="flex w-full justify-center">
+    <template #header="{ collapsed: sidebarRail }">
+      <DmsLink
+        :to="homepage"
+        class="flex w-full items-center"
+        :class="{ 'justify-center': isRail(sidebarRail) }"
+      >
         <UColorModeImage
           :light="
-            collapsed
+            isRail(sidebarRail)
               ? appConfig.branding?.logo?.collapsed.light
               : appConfig.branding?.logo?.default.light
           "
           :dark="
-            collapsed
+            isRail(sidebarRail)
               ? appConfig.branding?.logo?.collapsed.dark
               : appConfig.branding?.logo?.default.dark
           "
-          class="h-14 w-auto object-contain"
+          :class="isRail(sidebarRail) ? 'size-7' : 'h-12 w-auto'"
+          class="object-contain"
           :alt="t('navigation.goToHomepage')"
         />
       </DmsLink>
     </template>
 
-    <template #default="{ collapsed }">
+    <template #default="{ collapsed: sidebarRail }">
       <component
         :is="widget.component"
         v-for="widget in widgetsAboveSearchBar"
         :key="widget.id"
-        :collapsed="collapsed"
+        :collapsed="isRail(sidebarRail)"
       />
 
       <UDashboardSearchButton
-        :collapsed="collapsed"
+        :collapsed="isRail(sidebarRail)"
         :label="t('commandPalette.button')"
-        :kbds="['⌘K']"
+        :kbds="[searchShortcutHint]"
+        :tooltip="searchTooltip"
         icon="i-ph-magnifying-glass-light"
         variant="outline"
-        class="border-default bg-elevated text-dimmed hover:border-accented hover:bg-elevated hover:text-muted w-full justify-between rounded-md border px-2.5 py-2 text-[12.5px] font-normal"
+        class="border-default text-dimmed hover:border-accented hover:text-muted h-8 w-full justify-start rounded-md border bg-(--dms-bg-field) py-0 ps-2.5 pe-1.5 text-[13px] font-normal ring-0 hover:bg-(--dms-bg-field)"
         :ui="{
           base: 'gap-2',
           leadingIcon: 'size-[15px]',
           trailing:
-            '[&>kbd]:rounded-[4px] [&>kbd]:border [&>kbd]:border-accented [&>kbd]:px-[5px] [&>kbd]:py-px [&>kbd]:text-[10px] [&>kbd]:font-normal [&>kbd]:tracking-normal',
+            '[&>kbd]:border-accented [&>kbd]:text-muted [&>kbd]:h-5 [&>kbd]:rounded-[5px] [&>kbd]:border [&>kbd]:border-b-2 [&>kbd]:bg-(--ui-bg) [&>kbd]:px-[5px] [&>kbd]:text-[11px] [&>kbd]:font-medium [&>kbd]:tracking-normal [&>kbd]:ring-0',
         }"
       />
 
       <div
         v-if="currentModule"
-        class="border-primary/25 bg-primary/5 flex items-center gap-3 rounded-md border px-3 py-2.5"
-        :class="{ 'justify-center': collapsed }"
+        class="border-primary/35 bg-primary/5 flex items-center gap-2.5 rounded-md border px-2 py-[7px]"
+        :class="{ 'justify-center': isRail(sidebarRail) }"
       >
         <span
-          class="border-primary/25 bg-default text-primary grid size-[30px] shrink-0 place-items-center rounded-lg border"
+          class="bg-primary/10 text-primary grid size-7 shrink-0 place-items-center rounded-[7px]"
         >
           <UIcon :name="currentModule.info.icon" class="size-4" />
         </span>
         <span
-          v-if="!collapsed"
-          class="text-highlighted min-w-0 truncate text-sm font-semibold"
+          v-if="!isRail(sidebarRail)"
+          class="text-highlighted min-w-0 truncate text-[13px] font-semibold"
         >
           {{ processI18n(currentModule.info.title) }}
         </span>
@@ -312,32 +395,33 @@ const footerItems = computed((): NavigationMenuItem[] => {
         :is="widget.component"
         v-for="widget in widgetsBelowSearchBar"
         :key="widget.id"
-        :collapsed="collapsed"
+        :collapsed="isRail(sidebarRail)"
       />
 
       <DmsNavigationMenu
         v-if="favoriteItems.length > 0"
-        :collapsed="collapsed"
+        :collapsed="isRail(sidebarRail)"
         :items="favoriteItems"
         orientation="vertical"
       />
 
       <DmsNavigationMenu
         v-model="openCategories"
-        :collapsed="collapsed"
+        :collapsed="isRail(sidebarRail)"
         :items="items"
         orientation="vertical"
       />
     </template>
 
-    <template #footer="{ collapsed }">
+    <template #footer="{ collapsed: sidebarRail }">
       <DmsNavigationMenu
         v-if="footerItems.length > 0"
-        :collapsed="collapsed"
+        :collapsed="isRail(sidebarRail)"
         :items="footerItems"
         orientation="vertical"
         class="w-full"
       />
+      <DmsSidebarUserMenu :collapsed="isRail(sidebarRail)" />
     </template>
   </UDashboardSidebar>
 

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

@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import type { SelectItem } from "@nuxt/ui";
 
+const EXTERNAL_LINK_PATTERN = /^https?:\/\//;
+const GITHUB_REPOSITORY = "AntelopeJS/dms";
+const GITHUB_REPOSITORY_URL = `https://github.com/${GITHUB_REPOSITORY}`;
+const GITHUB_REPOSITORY_API = `https://api.github.com/repos/${GITHUB_REPOSITORY}`;
+const GITHUB_STARS_CACHE_KEY = "dms-github-stars";
+// GitHub allows 60 anonymous API calls an hour per visitor: the count is
+// cached for the session and refreshed hourly.
+const GITHUB_STARS_CACHE_TTL_MS = 60 * 60 * 1000;
+
 const { locale, setLocale, t } = useI18n();
 const { uniqueLocales } = useUniqueLocales();
 const { links } = useFooterLinks();
@@ -10,39 +19,152 @@ const localesOptions: SelectItem[] = uniqueLocales.value.map((lang) => ({
   value: lang.code,
 }));
 
+function isExternal(to: string): boolean {
+  return EXTERNAL_LINK_PATTERN.test(to);
+}
+
+interface CachedStars {
+  count: number;
+  fetchedAt: number;
+}
+
+const githubStars = ref<number | null>(null);
+// The count is fetched after mount: a placeholder holds its place until then,
+// and the segment only goes away if no count could be read.
+const githubStarsSettled = ref(false);
+const formattedGithubStars = computed(() =>
+  githubStars.value === null
+    ? ""
+    : new Intl.NumberFormat(locale.value, { notation: "compact" }).format(
+        githubStars.value,
+      ),
+);
+
+function readCachedStars(): CachedStars | null {
+  try {
+    const raw = sessionStorage.getItem(GITHUB_STARS_CACHE_KEY);
+    return raw ? (JSON.parse(raw) as CachedStars) : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeCachedStars(count: number): void {
+  try {
+    sessionStorage.setItem(
+      GITHUB_STARS_CACHE_KEY,
+      JSON.stringify({ count, fetchedAt: Date.now() } satisfies CachedStars),
+    );
+  } catch {
+    /* storage unavailable: the count is fetched again next time */
+  }
+}
+
+// Starring itself happens on GitHub (it needs the visitor's GitHub session);
+// the button shows the live count and opens the repository.
+async function loadGithubStars(): Promise<void> {
+  const cached = readCachedStars();
+  if (cached && Date.now() - cached.fetchedAt < GITHUB_STARS_CACHE_TTL_MS) {
+    githubStars.value = cached.count;
+    return;
+  }
+  try {
+    const response = await fetch(GITHUB_REPOSITORY_API, {
+      headers: { Accept: "application/vnd.github+json" },
+    });
+    if (!response.ok) return;
+    const { stargazers_count: count } = (await response.json()) as {
+      stargazers_count?: unknown;
+    };
+    if (typeof count !== "number") return;
+    githubStars.value = count;
+    writeCachedStars(count);
+  } catch {
+    /* offline or rate-limited: the button shows without a count */
+  }
+}
+
+onMounted(async () => {
+  await loadGithubStars();
+  githubStarsSettled.value = true;
+});
+
 async function onLocaleChange(code: unknown) {
   await setLocale(code as typeof locale.value);
 }
 </script>
 
 <template>
-  <footer class="border-default mt-12 border-t">
-    <UContainer class="p-4">
-      <div
-        class="text-muted flex flex-col items-center gap-3 text-sm md:flex-row md:justify-between md:gap-4"
+  <!-- v2 .au-foot: one quiet 12.5px row, the locale switcher pushed right.
+       On phones the links get a taller invisible hit area and the star
+       button grows to 32px, so each stays easy to tap. -->
+  <footer
+    class="border-default text-dimmed flex flex-wrap items-center gap-x-[18px] gap-y-1.5 border-t px-5 py-3 text-[12.5px] max-sm:justify-center"
+  >
+    <span>&copy; Antelope</span>
+    <template v-for="link in links" :key="link.id">
+      <a
+        v-if="isExternal(link.to)"
+        :href="link.to"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="hover:text-highlighted transition-colors max-sm:relative max-sm:after:absolute max-sm:after:-inset-x-1 max-sm:after:-inset-y-1.5 max-sm:after:content-['']"
       >
-        <div class="flex flex-col items-center gap-2 md:flex-row md:gap-4">
-          <span>&copy; Antelope</span>
-          <DmsLink
-            v-for="link in links"
-            :key="link.id"
-            :to="link.to"
-            class="hover:text-default"
-          >
-            {{ t(link.label) }}
-          </DmsLink>
-        </div>
-
-        <USelect
-          :model-value="locale"
-          :items="localesOptions"
-          :ui="{ value: 'text-muted' }"
-          color="neutral"
-          variant="none"
-          class="w-auto"
-          @update:model-value="onLocaleChange"
+        {{ t(link.label) }}
+      </a>
+      <DmsLink
+        v-else
+        :to="link.to"
+        class="hover:text-highlighted transition-colors max-sm:relative max-sm:after:absolute max-sm:after:-inset-x-1 max-sm:after:-inset-y-1.5 max-sm:after:content-['']"
+      >
+        {{ t(link.label) }}
+      </DmsLink>
+    </template>
+
+    <!-- GitHub star button: icon + "Star" | live count, opens the repository. -->
+    <a
+      :href="GITHUB_REPOSITORY_URL"
+      target="_blank"
+      rel="noopener noreferrer"
+      :aria-label="t('empty_layout.footer.github_star_label')"
+      :title="t('empty_layout.footer.github_star_label')"
+      class="border-default text-muted hover:text-highlighted hover:border-accented hover:bg-elevated inline-flex h-6 items-stretch overflow-hidden rounded-md border transition-colors max-sm:h-8"
+    >
+      <span class="flex items-center gap-1.5 px-2 font-medium">
+        <UIcon name="i-ph-github-logo" class="size-3.5" :aria-hidden="true" />
+        <UIcon name="i-ph-star" class="size-3" :aria-hidden="true" />
+        {{ t("empty_layout.footer.github_star") }}
+      </span>
+      <span
+        v-if="githubStars !== null || !githubStarsSettled"
+        class="border-default flex items-center border-s px-2 font-mono tabular-nums"
+      >
+        <USkeleton
+          v-if="githubStars === null"
+          aria-hidden="true"
+          class="h-2.5 w-6"
         />
-      </div>
-    </UContainer>
+        <template v-else>{{ formattedGithubStars }}</template>
+      </span>
+    </a>
+
+    <USelect
+      :model-value="locale"
+      :items="localesOptions"
+      :aria-label="t('empty_layout.footer.language')"
+      icon="i-ph-globe"
+      trailing-icon="i-ph-caret-up-down"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      class="ms-auto w-auto max-sm:ms-0"
+      :ui="{
+        base: 'text-muted hover:text-highlighted hover:bg-elevated gap-1.5 bg-transparent text-[12.5px] shadow-none ring-0 md:text-[12.5px]',
+        leadingIcon: 'text-muted size-3.5',
+        trailingIcon: 'text-dimmed size-3',
+        value: 'text-inherit',
+      }"
+      @update:model-value="onLocaleChange"
+    />
   </footer>
 </template>

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

@@ -4,17 +4,19 @@ import type { ClassNameValue } from "tailwind-merge";
 
 const theme = tv({
   slots: {
-    root: "flex gap-4 items-start",
+    // Wraps so the actions drop under the title once both no longer fit (the
+    // layout puts them on their own full-width row below `md`).
+    root: "flex flex-wrap gap-x-3.5 gap-y-4 items-start",
     badge:
-      "rounded-lg bg-primary/10 shrink-0 ring ring-primary/20 flex items-center justify-center size-12",
+      "mt-px rounded-[9px] bg-primary/10 shrink-0 ring ring-inset ring-primary/35 flex items-center justify-center size-9",
     icon: "text-primary",
 
-    content: "flex-1 min-w-0",
-    // Design .page-head h1: 22px display, approximated with Tailwind's
-    // leading-tight (1.25) and tracking-tight (-0.025em).
+    // From `md` the title keeps at least 16rem before the actions wrap.
+    content: "flex-1 min-w-0 md:flex-[1_1_16rem]",
+    // v2 .page-header__title: 24px, weight 650, line-height 1.2, -0.03em.
     title:
-      "text-highlighted text-[22px] font-semibold leading-tight tracking-tight",
-    description: "text-muted text-sm mt-1",
+      "text-highlighted text-2xl font-[650] leading-[1.2] tracking-[-0.03em]",
+    description: "text-muted text-sm mt-1 max-w-[68ch]",
   },
 });
 
@@ -42,7 +44,7 @@ const { processI18n } = useTranslation();
       <UIcon
         :name="props.icon"
         :class="themeStyles.icon({ class: props.ui?.icon })"
-        size="1.375rem"
+        size="1.1875rem"
       />
     </div>