@antelopejs/dms 0.0.1

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+import type { ClassNameValue } from "tailwind-merge";
+
+const theme = tv({
+  slots: {
+    root: "flex gap-4 items-start",
+    badge:
+      "rounded-lg bg-primary/10 shrink-0 ring ring-primary/20 flex items-center justify-center size-12",
+    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).
+    title:
+      "text-highlighted text-[22px] font-semibold leading-tight tracking-tight",
+    description: "text-muted text-sm mt-1",
+  },
+});
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  icon?: string;
+
+  class?: ClassNameValue;
+  ui?: Partial<typeof theme.slots>;
+}
+
+const props = defineProps<PageHeaderProps>();
+const themeStyles = computed(() => theme());
+
+const { processI18n } = useTranslation();
+</script>
+
+<template>
+  <section :class="themeStyles.root({ class: [props.class, props.ui?.root] })">
+    <div
+      v-if="props.icon"
+      :class="themeStyles.badge({ class: props.ui?.badge })"
+    >
+      <UIcon
+        :name="props.icon"
+        :class="themeStyles.icon({ class: props.ui?.icon })"
+        size="1.375rem"
+      />
+    </div>
+
+    <div :class="themeStyles.content({ class: props.ui?.content })">
+      <h1 :class="themeStyles.title({ class: props.ui?.title })">
+        <slot name="title">
+          {{ processI18n(props.title) }}
+        </slot>
+      </h1>
+      <p
+        v-if="props.description"
+        :class="themeStyles.description({ class: props.ui?.description })"
+      >
+        <slot name="description">
+          {{ processI18n(props.description) }}
+        </slot>
+      </p>
+    </div>
+
+    <slot name="actions" />
+  </section>
+</template>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from "@nuxt/ui";
+
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+const { categoryGroups } = useQuickActions();
+
+const TITLE_GROUP_CLASS =
+  "text-sm font-semibold text-default normal-case tracking-normal px-3 pt-2 pb-3";
+
+function buildActionEntry(action: QuickActionInfo): DropdownMenuItem {
+  return {
+    label: processI18n(action.displayName),
+    icon: action.icon,
+    onSelect: () => {
+      void dispatchQuickActionTarget(action.target);
+    },
+  };
+}
+
+function buildCategoryGroup(
+  group: QuickActionCategoryGroup,
+): DropdownMenuItem[] {
+  const header: DropdownMenuItem = {
+    label: processI18n(group.category.displayName).toUpperCase(),
+    type: "label" as const,
+  };
+  return [header, ...group.actions.map(buildActionEntry)];
+}
+
+const groupedItems = computed((): DropdownMenuItem[][] => {
+  const groups = categoryGroups.value;
+  if (groups.length === 0) return [];
+
+  const titleGroup: DropdownMenuItem[] = [
+    {
+      label: t("quickActions.title"),
+      type: "label" as const,
+      class: TITLE_GROUP_CLASS,
+    },
+  ];
+
+  return [titleGroup, ...groups.map(buildCategoryGroup)];
+});
+
+const hasItems = computed(() => groupedItems.value.length > 1);
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="hasItems"
+    :items="groupedItems"
+    :content="{ align: 'end' }"
+    :ui="{
+      content: 'w-72 p-2',
+      label: 'text-xs font-semibold tracking-wider text-muted px-3 pt-3 pb-2',
+      item: 'gap-3 px-3 py-2',
+      itemLeadingIcon: 'size-5',
+    }"
+  >
+    <UButton
+      icon="i-ph-lightning-light"
+      variant="ghost"
+      color="neutral"
+      :ui="{ leadingIcon: 'size-[18px]' }"
+    />
+  </UDropdownMenu>
+</template>

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

@@ -0,0 +1,17 @@
+import type { Ref } from "vue";
+
+interface SidebarState {
+  open: Ref<boolean>;
+  collapsed: Ref<boolean>;
+}
+
+const SIDEBAR_OPEN_STATE_KEY = "dms-sidebar-open";
+const SIDEBAR_COLLAPSED_STATE_KEY = "dms-sidebar-collapsed";
+
+/** Returns the sidebar state shared by the current application. */
+export function useSidebarState(): SidebarState {
+  return {
+    open: useDmsState(SIDEBAR_OPEN_STATE_KEY, () => false),
+    collapsed: useDmsState(SIDEBAR_COLLAPSED_STATE_KEY, () => false),
+  };
+}

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

@@ -0,0 +1,99 @@
+<script lang="ts">
+export const CARD_MODE = {
+  CARD: "card",
+  LIST: "list",
+  LIST_TOP: "list-top",
+  LIST_BOTTOM: "list-bottom",
+  BORDERLESS: "borderless",
+} as const;
+
+export type CardMode = (typeof CARD_MODE)[keyof typeof CARD_MODE];
+</script>
+
+<script setup lang="ts">
+interface CardProps {
+  clickable?: boolean;
+  dimmed?: boolean;
+  to?: string;
+  mode?: CardMode;
+  actionsOnHover?: boolean;
+}
+
+const props = withDefaults(defineProps<CardProps>(), {
+  clickable: false,
+  dimmed: false,
+  mode: CARD_MODE.CARD,
+  actionsOnHover: false,
+});
+
+const emit = defineEmits<{
+  click: [];
+}>();
+
+const cardClasses = computed(() => {
+  const classes = [];
+
+  if (props.clickable || props.to) {
+    classes.push("cursor-pointer hover:bg-muted/50 transition-colors");
+  }
+
+  if (props.dimmed) {
+    classes.push("opacity-60");
+  }
+
+  if (props.actionsOnHover) {
+    classes.push("group");
+  }
+
+  return classes.join(" ");
+});
+
+const actionsClasses = computed(() =>
+  props.actionsOnHover
+    ? "opacity-0 group-hover:opacity-100 transition-opacity"
+    : "",
+);
+
+const CARD_MODE_STYLES: Record<CardMode, string> = {
+  [CARD_MODE.CARD]: "mb-3",
+  [CARD_MODE.LIST]:
+    "bg-transparent ring-0 rounded-none border-b border-default",
+  [CARD_MODE.LIST_TOP]:
+    "bg-transparent ring-0 rounded-none border-t border-default",
+  [CARD_MODE.LIST_BOTTOM]:
+    "bg-transparent ring-0 rounded-none border-b border-default",
+  [CARD_MODE.BORDERLESS]: "bg-transparent ring-0 rounded-none",
+};
+
+const cardUi = computed(() => ({
+  body: "sm:p-4",
+  root: CARD_MODE_STYLES[props.mode],
+}));
+
+const handleClick = () => {
+  if (props.to) {
+    navigateDms(props.to);
+  }
+  emit("click");
+};
+</script>
+
+<template>
+  <UCard :ui="cardUi" :class="cardClasses" @click="handleClick">
+    <div class="flex items-start gap-3">
+      <slot name="icon" />
+
+      <div class="min-w-0 flex-1">
+        <slot name="title" />
+        <slot name="description" />
+        <slot name="footer" />
+      </div>
+
+      <slot name="meta" />
+
+      <div :class="actionsClasses">
+        <slot name="actions" />
+      </div>
+    </div>
+  </UCard>
+</template>

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

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { formatRelativeTime } from "#dms-core/app/utils/formatter";
+import NotificationCard from "./NotificationCard.vue";
+
+const MAX_DISPLAYED_COUNT = 99;
+
+const { t, locale } = useI18n();
+const { loggedIn } = useUserSession();
+const { processI18n } = useTranslation();
+const {
+  unreadCount,
+  notifications,
+  hasMore,
+  fetchUnreadCount,
+  fetchNotifications,
+  markAllAsRead,
+} = useNotifications();
+const isOpen = ref(false);
+const sentinel = ref<HTMLElement | null>(null);
+const hasBeenOpened = ref(false);
+
+const { isLoadingMore, setupObserver, disconnectObserver } = useInfiniteScroll(
+  sentinel,
+  () => fetchNotifications(),
+  hasMore,
+);
+
+const handleNotificationEvent = async () => {
+  if (!isOpen.value) {
+    await fetchUnreadCount();
+  }
+};
+
+const handleFormSubmitSuccess = async (event: Event) => {
+  const customEvent = event as CustomEvent;
+  const submitUrl = customEvent.detail?.data?.submitUrl;
+
+  if (submitUrl && submitUrl.includes("/api/notification/")) {
+    if (!isOpen.value) {
+      await fetchUnreadCount();
+    }
+  }
+};
+
+const markNotificationsAsRead = async () => {
+  if (hasBeenOpened.value) {
+    await markAllAsRead();
+    hasBeenOpened.value = false;
+  }
+};
+
+const handleBeforeUnload = () => {
+  if (hasBeenOpened.value) {
+    navigator.sendBeacon("/api/settings/user/notifications/mark-all-read");
+  }
+};
+
+onMounted(async () => {
+  if (!loggedIn.value) return;
+  await fetchUnreadCount();
+
+  window.addEventListener(
+    NotificationEvents.NOTIFICATION_RECEIVED,
+    handleNotificationEvent as EventListener,
+  );
+  window.addEventListener(
+    FormEvents.SUBMIT_SUCCESS,
+    handleFormSubmitSuccess as EventListener,
+  );
+  window.addEventListener("beforeunload", handleBeforeUnload);
+});
+
+onUnmounted(() => {
+  disconnectObserver();
+
+  window.removeEventListener(
+    NotificationEvents.NOTIFICATION_RECEIVED,
+    handleNotificationEvent as EventListener,
+  );
+  window.removeEventListener(
+    FormEvents.SUBMIT_SUCCESS,
+    handleFormSubmitSuccess as EventListener,
+  );
+  window.removeEventListener("beforeunload", handleBeforeUnload);
+});
+
+watch(isOpen, async (isNowOpen) => {
+  if (isNowOpen) {
+    hasBeenOpened.value = true;
+    await fetchNotifications(true);
+    await nextTick();
+    setupObserver();
+  } else {
+    disconnectObserver();
+    await markNotificationsAsRead();
+  }
+});
+
+const handleNotificationClick = async (notification: UserNotification) => {
+  isOpen.value = false;
+  if (notification.linkTo) {
+    await navigateDms(notification.linkTo);
+  }
+};
+
+const goToNotifications = () => {
+  isOpen.value = false;
+  navigateDms("/settings/user/notifications");
+};
+</script>
+
+<template>
+  <UPopover
+    v-model:open="isOpen"
+    :ui="{ content: 'w-[460px]' }"
+    :popper="{ placement: 'bottom-end' }"
+  >
+    <UButton
+      icon="i-ph-bell-light"
+      variant="ghost"
+      color="neutral"
+      class="relative"
+      :ui="{ leadingIcon: 'size-[18px]' }"
+    >
+      <span
+        v-if="unreadCount > 0"
+        class="bg-error absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-none font-semibold text-white ring-2 ring-(--ui-bg)"
+      >
+        {{
+          unreadCount > MAX_DISPLAYED_COUNT
+            ? `${MAX_DISPLAYED_COUNT}+`
+            : unreadCount
+        }}
+      </span>
+    </UButton>
+
+    <template #content>
+      <div class="p-4">
+        <div class="mb-2 flex items-center justify-between">
+          <h3 class="text-highlighted text-sm font-semibold">
+            {{ $t("notification.dropdown.title") }}
+          </h3>
+        </div>
+
+        <USeparator class="-mx-4 mt-2 w-[calc(100%+2rem)]" />
+
+        <div
+          v-if="notifications.length === 0"
+          class="text-dimmed py-6 text-center text-sm"
+        >
+          {{ $t("notification.dropdown.no_notifications") }}
+        </div>
+
+        <div
+          v-else
+          class="-mr-2 -ml-2 max-h-96 overflow-y-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        >
+          <NotificationCard
+            v-for="notification in notifications"
+            :key="notification._id"
+            :clickable="true"
+            mode="borderless"
+            @click="handleNotificationClick(notification)"
+          >
+            <template #icon>
+              <div
+                :class="[
+                  'flex size-10 items-center justify-center rounded-lg',
+                  notification.isRead ? 'bg-accented' : 'bg-primary/10',
+                ]"
+              >
+                <UIcon
+                  :name="notification.icon"
+                  :class="[
+                    'size-5',
+                    notification.isRead ? 'text-muted' : 'text-primary',
+                  ]"
+                />
+              </div>
+            </template>
+
+            <template #title>
+              <div class="text-highlighted mb-0.5 text-xs font-medium">
+                {{ processI18n(notification.title, notification.params) }}
+              </div>
+            </template>
+
+            <template #description>
+              <div class="text-dimmed line-clamp-2 text-xs">
+                {{ processI18n(notification.description, notification.params) }}
+              </div>
+              <div class="text-muted mt-1 text-[10px]">
+                {{ formatRelativeTime(notification.createdAt, t, locale) }}
+              </div>
+            </template>
+
+            <template #meta>
+              <div
+                v-if="!notification.isRead"
+                class="bg-primary size-2 rounded-full"
+              />
+            </template>
+          </NotificationCard>
+
+          <div
+            v-if="hasMore"
+            ref="sentinel"
+            class="flex h-4 items-center justify-center"
+          >
+            <UIcon
+              v-if="isLoadingMore"
+              name="i-ph-spinner"
+              class="size-4 animate-spin"
+            />
+          </div>
+        </div>
+
+        <USeparator class="-mx-4 mb-2 w-[calc(100%+2rem)]" />
+
+        <UButton
+          :label="$t('notification.dropdown.view_all')"
+          variant="ghost"
+          color="neutral"
+          block
+          class="-mb-2"
+          @click="goToNotifications"
+        />
+      </div>
+    </template>
+  </UPopover>
+</template>