@antelopejs/dms 0.0.1

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

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import type { BreadcrumbItem, DropdownMenuItem } from "@nuxt/ui";
+import NotificationPopover from "../notification/NotificationPopover.vue";
+import QuickActionsPopover from "./QuickActionsPopover.vue";
+import { useSidebarState } from "./sidebarState";
+
+const BUILDER_POPOVER_OPEN_DELAY_MS = 80;
+
+const { t } = useI18n();
+const appConfig = useDmsAppConfig();
+const { open: sidebarOpen, collapsed: sidebarCollapsed } = useSidebarState();
+
+// Modules register their own header buttons through this generic registry, so
+// core has no knowledge of any specific module.
+const { actions: registeredActions } = useHeaderActions();
+
+// The builder button is the one exception: it exists in the chrome whether or
+// not a module backs it, so the action that claims it drives it instead of
+// being rendered as another icon beside it.
+const builderAction = computed(() =>
+  registeredActions.value.find((action) => action.id === BUILDER_ACTION_ID),
+);
+const headerActions = computed(() =>
+  registeredActions.value.filter((action) => action.id !== BUILDER_ACTION_ID),
+);
+
+const { user } = useCurrentUser();
+const { logout } = useLogout();
+
+const userMenuOptions = computed<DropdownMenuItem[][]>(() => [
+  [
+    {
+      label: user.value?.name,
+      type: "label" as const,
+    },
+  ],
+  [
+    ...ACCOUNT_MENU_ENTRIES.map((entry) => ({
+      label: t(entry.labelKey),
+      icon: entry.icon,
+      to: entry.to,
+    })),
+    {
+      label: t("button.logout"),
+      icon: "i-ph-sign-out-light",
+      color: "error",
+      onSelect: () => {
+        void logout();
+      },
+    },
+  ],
+]);
+
+const route = useDmsRoute();
+const homepage = useHomepage();
+const siteLayout = useSiteLayout();
+const { processI18n } = useTranslation();
+const favoritePages = useFavoritePages();
+
+const currentPageInfo = computed((): FavoritePage | null => {
+  const currentPath = route.path;
+  const matchedRoute = siteLayout.findMatchingRoute(currentPath);
+
+  if (!matchedRoute) {
+    return null;
+  }
+
+  return {
+    id: matchedRoute.metadata.id || currentPath,
+    path: currentPath,
+    title:
+      matchedRoute.metadata.displayName ||
+      route.name?.toString() ||
+      currentPath,
+    icon: matchedRoute.metadata.icon,
+  };
+});
+
+const isCurrentPageFavorite = computed(() => {
+  if (!currentPageInfo.value) {
+    return false;
+  }
+  return favoritePages.isFavorite(currentPageInfo.value.path);
+});
+
+const toggleCurrentPageFavorite = () => {
+  if (!currentPageInfo.value) {
+    return;
+  }
+  favoritePages.toggleFavorite(currentPageInfo.value);
+};
+
+const breadcrumb = computed((): BreadcrumbItem[] => {
+  const base: BreadcrumbItem[] = [{ label: "home", to: homepage || "/" }];
+
+  if (route.fullPath === (homepage || "/")) {
+    return base;
+  }
+
+  const paths = route.fullPath.split("/").filter((path) => path);
+
+  return base.concat(
+    paths
+      .map((path, index): BreadcrumbItem | null => {
+        const to = `/${paths.slice(0, index + 1).join("/")}`;
+
+        const matchingRoute = siteLayout.findMatchingRouteOrCategory(to);
+
+        if (!matchingRoute) {
+          return null;
+        }
+
+        const isPage = "layoutUrl" in matchingRoute.metadata;
+
+        return {
+          label: processI18n(matchingRoute.metadata?.displayName || path),
+          ...(isPage ? { to } : {}),
+        };
+      })
+      .filter((item) => item !== null),
+  );
+});
+
+const mobileBreadcrumb = computed(
+  (): (BreadcrumbItem & { children?: DropdownMenuItem[] })[] => {
+    if (breadcrumb.value.length <= 2) {
+      return breadcrumb.value;
+    }
+
+    return [
+      { icon: "i-ph-house-light", to: "/" },
+      {
+        icon: "i-ph-dots-three-light",
+        children: breadcrumb.value.slice(1, -1).map((x) => ({
+          label: x.label,
+          to: x.to,
+        })),
+      },
+      breadcrumb.value.slice(-1)[0]!,
+    ];
+  },
+);
+</script>
+
+<template>
+  <div data-dms-persistent-header>
+    <UDashboardNavbar>
+      <template #leading>
+        <UButton
+          class="lg:hidden"
+          color="neutral"
+          variant="ghost"
+          :icon="
+            sidebarOpen ? appConfig.ui.icons.close : appConfig.ui.icons.menu
+          "
+          :aria-label="sidebarOpen ? 'Close sidebar' : 'Open sidebar'"
+          :ui="{ leadingIcon: 'size-[18px]' }"
+          @click="sidebarOpen = !sidebarOpen"
+        />
+        <UButton
+          class="hidden lg:flex"
+          color="neutral"
+          variant="ghost"
+          :icon="
+            sidebarCollapsed
+              ? appConfig.ui.icons.panelOpen
+              : appConfig.ui.icons.panelClose
+          "
+          :aria-label="sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+          :ui="{ leadingIcon: 'size-[18px]' }"
+          @click="sidebarCollapsed = !sidebarCollapsed"
+        />
+
+        <UButton
+          :icon="isCurrentPageFavorite ? 'i-ph-star-fill' : 'i-ph-star-light'"
+          variant="ghost"
+          :color="isCurrentPageFavorite ? 'primary' : 'neutral'"
+          :disabled="!currentPageInfo"
+          :ui="{ leadingIcon: 'size-[18px]' }"
+          @click="toggleCurrentPageFavorite"
+        />
+      </template>
+
+      <template #title>
+        <UBreadcrumb
+          :items="breadcrumb"
+          :ui="{ linkLabel: 'first-letter:uppercase' }"
+          class="hidden md:block"
+        />
+      </template>
+
+      <template #right>
+        <UButton
+          v-if="builderAction"
+          :icon="builderAction.icon || 'i-ph-hammer-light'"
+          variant="ghost"
+          :color="builderAction.isActive?.() ? 'primary' : 'neutral'"
+          :title="builderAction.label"
+          :aria-label="builderAction.label"
+          :ui="{ leadingIcon: 'size-[18px]' }"
+          @click="builderAction.onSelect()"
+        />
+
+        <UPopover
+          v-else
+          mode="hover"
+          :open-delay="BUILDER_POPOVER_OPEN_DELAY_MS"
+          :content="{ align: 'end', side: 'bottom' }"
+          :ui="{ content: 'w-72' }"
+        >
+          <UButton
+            icon="i-ph-hammer-light"
+            variant="ghost"
+            color="neutral"
+            :title="t('builder.button')"
+            :aria-label="t('builder.button')"
+            :ui="{ leadingIcon: 'size-[18px]' }"
+          />
+
+          <template #content>
+            <div class="flex flex-col gap-2 p-4">
+              <div class="flex items-center justify-between gap-2">
+                <p class="text-highlighted text-sm font-semibold">
+                  {{ t("builder.title") }}
+                </p>
+                <UBadge color="primary" variant="subtle" size="sm">
+                  {{ t("builder.soon") }}
+                </UBadge>
+              </div>
+              <p class="text-muted text-xs leading-relaxed">
+                {{ t("builder.description") }}
+              </p>
+            </div>
+          </template>
+        </UPopover>
+
+        <UButton
+          v-for="action in headerActions"
+          :key="action.id"
+          :icon="action.icon"
+          variant="ghost"
+          color="neutral"
+          :title="action.label"
+          :aria-label="action.label"
+          :ui="{ leadingIcon: 'size-[18px]' }"
+          @click="action.onSelect?.()"
+        />
+
+        <QuickActionsPopover />
+
+        <NotificationPopover />
+
+        <UDropdownMenu :items="userMenuOptions" :ui="{ content: 'w-48' }" arrow>
+          <UButton
+            icon="i-ph-user-light"
+            variant="ghost"
+            color="neutral"
+            :ui="{ leadingIcon: 'size-[18px]' }"
+          />
+        </UDropdownMenu>
+      </template>
+    </UDashboardNavbar>
+
+    <div class="border-default border-b px-6 py-2 md:hidden">
+      <UBreadcrumb
+        :items="mobileBreadcrumb"
+        :ui="{ linkLabel: 'first-letter:uppercase' }"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,341 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+import {
+  convertSiteLayoutTreeToTreeItems,
+  convertSiteLayoutTreeToTreeItemsForModule,
+} from "#dms-ui/app/build/types/tree";
+import {
+  isSidebarWidgetVisible,
+  resolveSidebarWidgetPosition,
+  SidebarWidgetPosition,
+} from "../../../composables/useSidebarWidgets";
+import { useSidebarState } from "./sidebarState";
+
+const SETTINGS_PATH = "/settings";
+const MODULES_PATH = "/modules";
+const MODULES_TREE_KEY = "modules";
+const SETTINGS_ICON = "i-ph-gear-light";
+const MODULES_ICON = "i-ph-squares-four-light";
+const BACK_ICON = "i-ph-arrow-left-light";
+const ESCAPE_KEY = "Escape";
+
+const { t } = useI18n();
+const appConfig = useDmsAppConfig();
+const { processI18n } = useTranslation();
+const route = useDmsRoute();
+const { open: sidebarOpen, collapsed: sidebarCollapsed } = useSidebarState();
+
+function closeMobileSidebar(event?: KeyboardEvent): void {
+  if (event && event.key !== ESCAPE_KEY) return;
+  sidebarOpen.value = false;
+}
+
+onMounted(() => window.addEventListener("keydown", closeMobileSidebar));
+onBeforeUnmount(() =>
+  window.removeEventListener("keydown", closeMobileSidebar),
+);
+
+const siteLayout = useSiteLayout();
+if (!siteLayout.siteLayout.value) {
+  void siteLayout.loadSiteLayout();
+}
+
+const favoritePages = useFavoritePages();
+
+favoritePages.cleanupInvalidFavorites(
+  (path) => siteLayout.findMatchingRoute(path) !== null,
+);
+
+const isOwner = useIsOwner();
+const currentModule = useCurrentModule();
+const isInModule = computed(() => currentModule.value !== null);
+const { widgets: sidebarWidgets } = useSidebarWidgets();
+// Scope and position are independent axes: a widget renders where its
+// `position` says, but only while its module — none for a global one — is the
+// one being browsed.
+const visibleSidebarWidgets = computed(() =>
+  sidebarWidgets.value.filter((widget) =>
+    isSidebarWidgetVisible(widget, currentModule.value?.id),
+  ),
+);
+const widgetsAtPosition = (position: SidebarWidgetPosition) =>
+  computed(() =>
+    visibleSidebarWidgets.value.filter(
+      (widget) => resolveSidebarWidgetPosition(widget) === position,
+    ),
+  );
+const widgetsAboveSearchBar = widgetsAtPosition(
+  SidebarWidgetPosition.ABOVE_SEARCH_BAR,
+);
+const widgetsBelowSearchBar = widgetsAtPosition(
+  SidebarWidgetPosition.BELOW_SEARCH_BAR,
+);
+const homepage = useHomepage();
+
+// Use the matched page/category's `fullId` to drive sidebar expansion.
+// URL-based matching would miss hidden pages (registered but not in the menu
+// tree) and custom-pages whose urlSlug escapes the parent category's URL.
+const currentFullId = computed(() => {
+  const match = siteLayout.findMatchingRouteOrCategory(route.path);
+  return match?.metadata.fullId ?? null;
+});
+
+// Query parameters are part of the highlight: several entries can share one page
+// and only differ by them (`/project?project=<id>`).
+const currentRoute = computed<MenuRouteState>(() => ({
+  path: route.path,
+  query: route.query,
+}));
+
+const moduleRootNode = computed(() => {
+  if (!currentModule.value || !siteLayout.siteLayoutTree.value) {
+    return null;
+  }
+  const modulesNode =
+    siteLayout.siteLayoutTree.value.children[MODULES_TREE_KEY];
+  if (!modulesNode) return null;
+  for (const childId of modulesNode.childrenOrders) {
+    const child = modulesNode.children[childId];
+    if (child?.isModuleRoot && child.id === currentModule.value.id) {
+      return child;
+    }
+  }
+  return null;
+});
+
+const favoriteItems = computed((): NavigationMenuItem[][] => {
+  if (isInModule.value) {
+    return [];
+  }
+
+  if (favoritePages.sortedFavorites.value.length === 0) {
+    return [];
+  }
+
+  return [
+    [
+      {
+        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,
+        })),
+      },
+    ],
+  ];
+});
+
+const items = computed((): NavigationMenuItem[][] => {
+  if (isInModule.value) {
+    if (!moduleRootNode.value) {
+      return [];
+    }
+    const moduleMenuItems = convertSiteLayoutTreeToTreeItemsForModule(
+      moduleRootNode.value,
+    );
+    const translatedItems = translateMenuItems(moduleMenuItems, processI18n);
+    const openItems = addDefaultOpenToMenuItems(
+      translatedItems,
+      currentFullId.value,
+    );
+    return addActiveStateToMenuItems(
+      openItems,
+      currentFullId.value,
+      currentRoute.value,
+    );
+  }
+
+  if (!siteLayout.siteLayoutTree.value) {
+    return [];
+  }
+
+  const menuItems = convertSiteLayoutTreeToTreeItems(
+    siteLayout.siteLayoutTree.value,
+  );
+  const translatedItems = translateMenuItems(menuItems, processI18n);
+  const openItems = addDefaultOpenToMenuItems(
+    translatedItems,
+    currentFullId.value,
+  );
+  return addActiveStateToMenuItems(
+    openItems,
+    currentFullId.value,
+    currentRoute.value,
+  );
+});
+
+const openCategories = ref<string[]>([]);
+
+watch(
+  () => items.value,
+  (menuItems) => {
+    const requiredIds = getExpandedItemIds(menuItems, currentFullId.value);
+    const current = new Set(openCategories.value);
+    for (const id of requiredIds) {
+      current.add(id);
+    }
+    openCategories.value = [...current];
+  },
+  { immediate: true },
+);
+
+const footerItems = computed((): NavigationMenuItem[] => {
+  const result: NavigationMenuItem[] = [];
+
+  if (isInModule.value) {
+    result.push({
+      label: t("menu.back"),
+      icon: BACK_ICON,
+      to: isOwner.value ? MODULES_PATH : homepage,
+      exact: true,
+    });
+  }
+
+  // Settings highlights its sub-pages; Back and Modules only highlight their
+  // destinations, regardless of the router's default prefix matching.
+  result.push(
+    addActiveStateToMenuItem(
+      {
+        label: t("menu.section.settings"),
+        to: SETTINGS_PATH,
+        icon: SETTINGS_ICON,
+      },
+      currentFullId.value,
+      currentRoute.value,
+    ),
+  );
+
+  if (isOwner.value) {
+    result.push({
+      label: t("menu.modules"),
+      to: MODULES_PATH,
+      icon: MODULES_ICON,
+      exact: true,
+    });
+  }
+
+  return result;
+});
+</script>
+
+<template>
+  <button
+    v-if="sidebarOpen"
+    type="button"
+    aria-hidden="true"
+    tabindex="-1"
+    class="bg-elevated/75 fixed inset-0 z-40 lg:hidden"
+    @click="closeMobileSidebar()"
+  />
+
+  <UDashboardSidebar
+    data-dms-persistent-sidebar
+    :open="false"
+    v-model:collapsed="sidebarCollapsed"
+    :ui="{
+      footer: 'lg:border-t lg:border-default',
+      toggle: 'hidden',
+    }"
+    :toggle="false"
+    collapsible
+    resizable
+    class="bg-default"
+    :class="{
+      'fixed inset-y-0 start-0 z-50 flex w-80 max-w-[85vw] shadow-xl':
+        sidebarOpen,
+    }"
+  >
+    <template #header="{ collapsed }">
+      <DmsLink :to="homepage" class="flex w-full justify-center">
+        <UColorModeImage
+          :light="
+            collapsed
+              ? appConfig.branding?.logo?.collapsed.light
+              : appConfig.branding?.logo?.default.light
+          "
+          :dark="
+            collapsed
+              ? appConfig.branding?.logo?.collapsed.dark
+              : appConfig.branding?.logo?.default.dark
+          "
+          class="h-14 w-auto object-contain"
+          :alt="t('navigation.goToHomepage')"
+        />
+      </DmsLink>
+    </template>
+
+    <template #default="{ collapsed }">
+      <component
+        :is="widget.component"
+        v-for="widget in widgetsAboveSearchBar"
+        :key="widget.id"
+        :collapsed="collapsed"
+      />
+
+      <UDashboardSearchButton
+        :collapsed="collapsed"
+        class="bg-elevated ring-default"
+      />
+
+      <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 }"
+      >
+        <span
+          class="border-primary/25 bg-default text-primary grid size-[30px] shrink-0 place-items-center rounded-lg border"
+        >
+          <UIcon :name="currentModule.info.icon" class="size-4" />
+        </span>
+        <span
+          v-if="!collapsed"
+          class="text-highlighted min-w-0 truncate text-sm font-semibold"
+        >
+          {{ processI18n(currentModule.info.title) }}
+        </span>
+      </div>
+
+      <component
+        :is="widget.component"
+        v-for="widget in widgetsBelowSearchBar"
+        :key="widget.id"
+        :collapsed="collapsed"
+      />
+
+      <DmsNavigationMenu
+        v-if="favoriteItems.length > 0"
+        :collapsed="collapsed"
+        :items="favoriteItems"
+        orientation="vertical"
+      />
+
+      <DmsNavigationMenu
+        v-model="openCategories"
+        :collapsed="collapsed"
+        :items="items"
+        orientation="vertical"
+      />
+    </template>
+
+    <template #footer="{ collapsed }">
+      <DmsNavigationMenu
+        v-if="footerItems.length > 0"
+        :collapsed="collapsed"
+        :items="footerItems"
+        orientation="vertical"
+        class="w-full"
+      />
+    </template>
+  </UDashboardSidebar>
+
+  <DmsDashboardSearch />
+</template>
+
+<style>
+[data-slot="toggle"][aria-label$="sidebar"] {
+  display: none !important;
+}
+</style>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { SelectItem } from "@nuxt/ui";
+
+const { locale, setLocale, t } = useI18n();
+const { uniqueLocales } = useUniqueLocales();
+const { links } = useFooterLinks();
+
+const localesOptions: SelectItem[] = uniqueLocales.value.map((lang) => ({
+  label: lang.name,
+  value: lang.code,
+}));
+
+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"
+      >
+        <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"
+        />
+      </div>
+    </UContainer>
+  </footer>
+</template>