@antelopejs/dms 0.0.1

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationPreferencesForm.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import NotificationCard from "../../../notification/NotificationCard.vue";
+
+type NotificationSubject = {
+  id: string;
+  category: NotificationCategory;
+  labelKey: string;
+  descriptionKey?: string;
+  togglePermission?: TogglePermission;
+};
+
+type NotificationCategory = {
+  id: string;
+  labelKey: string;
+  descriptionKey?: string;
+  icon: string;
+  togglePermission?: TogglePermission;
+};
+
+type TogglePermission = "allowed" | "forbidden" | "default";
+
+const { $authFetch } = useAuthFetch();
+const categories = ref<NotificationCategory[]>([]);
+const subjects = ref<NotificationSubject[]>([]);
+const preferences = ref<Record<string, boolean>>({});
+const expandedCategories = ref<Set<string>>(new Set());
+const isLoading = ref(true);
+const isSaving = ref(false);
+const toast = useToast();
+const { t } = useI18n();
+
+const canToggle = (data: NotificationSubject | NotificationCategory) => {
+  const parentToggle =
+    "category" in data
+      ? (data as NotificationSubject).category.togglePermission
+      : undefined;
+
+  if (parentToggle === "default") {
+    return data.togglePermission !== "forbidden";
+  }
+
+  return parentToggle !== "forbidden" || data.togglePermission !== "forbidden";
+};
+
+const toggleCategoryExpand = (categoryId: string) => {
+  if (expandedCategories.value.has(categoryId)) {
+    expandedCategories.value.delete(categoryId);
+  } else {
+    expandedCategories.value.add(categoryId);
+  }
+};
+
+const isCategoryExpanded = (categoryId: string) =>
+  expandedCategories.value.has(categoryId);
+
+const buildPreferenceKey = (categoryId: string, subjectId: string): string => {
+  return `${categoryId}:${subjectId}`;
+};
+
+const fetchCategories = async () => {
+  const response = await $authFetch<{
+    categories: NotificationCategory[];
+    subjects: NotificationSubject[];
+  }>("/settings/user/notifications/categories");
+
+  categories.value = response.categories;
+  subjects.value = response.subjects;
+};
+
+const fetchPreferences = async () => {
+  try {
+    preferences.value = await $authFetch<Record<string, boolean>>(
+      "/settings/user/notifications/preferences",
+    );
+  } catch {
+    toast.add({
+      title: t("dms.notifications.preferences.error_loading"),
+      color: "error",
+    });
+  }
+};
+
+const savePreferences = async () => {
+  isSaving.value = true;
+  try {
+    await $authFetch("/settings/user/notifications/preferences", {
+      method: "PUT",
+      body: preferences.value,
+    });
+
+    toast.add({
+      title: t("dms.notifications.preferences.success"),
+      color: "success",
+    });
+  } catch {
+    toast.add({
+      title: t("dms.notifications.preferences.error_saving"),
+      color: "error",
+    });
+  } finally {
+    isSaving.value = false;
+  }
+};
+
+const isCategoryFullyEnabled = (category: NotificationCategory): boolean => {
+  const categorySubjects = subjects.value.filter(
+    (subject) => subject.category.id === category.id,
+  );
+  return categorySubjects.every((subject) => {
+    const key = buildPreferenceKey(category.id, subject.id);
+    return preferences.value[key] ?? true;
+  });
+};
+
+const toggleCategory = (category: NotificationCategory, newValue: boolean) => {
+  const categorySubjects = subjects.value.filter(
+    (subject) => subject.category.id === category.id,
+  );
+  for (const subject of categorySubjects) {
+    if (canToggle(subject) || newValue) {
+      const key = buildPreferenceKey(category.id, subject.id);
+      preferences.value[key] = newValue;
+    }
+  }
+  savePreferences();
+};
+
+const toggleSubject = (
+  categoryId: string,
+  subjectId: string,
+  newValue: boolean,
+) => {
+  const key = buildPreferenceKey(categoryId, subjectId);
+  preferences.value[key] = newValue;
+  savePreferences();
+};
+
+onMounted(async () => {
+  try {
+    await Promise.all([fetchCategories(), fetchPreferences()]);
+  } finally {
+    isLoading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div v-if="!isLoading" class="space-y-2">
+    <div v-for="category in categories" :key="category.id">
+      <NotificationCard
+        mode="list-top"
+        :clickable="true"
+        @click="toggleCategoryExpand(category.id)"
+      >
+        <template #icon>
+          <div
+            class="bg-accented flex size-10 items-center justify-center rounded-lg"
+          >
+            <UIcon :name="category.icon" class="size-5" />
+          </div>
+        </template>
+
+        <template #title>
+          <div class="flex flex-col gap-0.5">
+            <span class="text-highlighted font-medium">
+              {{ $t(category.labelKey) }}
+            </span>
+            <span
+              v-if="category.descriptionKey"
+              class="text-dimmed text-xs font-normal"
+            >
+              {{ $t(category.descriptionKey) }}
+            </span>
+          </div>
+        </template>
+
+        <template #meta>
+          <UIcon
+            name="i-ph-caret-right"
+            :class="[
+              'text-muted size-4 transition-transform duration-200',
+              isCategoryExpanded(category.id) ? 'rotate-90' : '',
+            ]"
+          />
+        </template>
+      </NotificationCard>
+
+      <div
+        v-if="isCategoryExpanded(category.id)"
+        class="border-muted mt-1 ml-9 space-y-1 border-l pl-4"
+      >
+        <NotificationCard>
+          <template #title>
+            <div class="flex flex-col gap-0.5">
+              <span class="text-highlighted text-sm font-medium">
+                {{ $t("dms.notifications.preferences.allow_notifications") }}
+              </span>
+            </div>
+          </template>
+
+          <template #actions>
+            <div class="flex items-center gap-2">
+              <UTooltip
+                v-if="!canToggle(category)"
+                :delay-duration="0"
+                :text="$t('dms.notifications.preferences.mandatory_tooltip')"
+              >
+                <UButton
+                  icon="i-ph-question"
+                  variant="link"
+                  color="neutral"
+                  size="xs"
+                  class="cursor-help"
+                />
+              </UTooltip>
+              <USwitch
+                :model-value="isCategoryFullyEnabled(category)"
+                :disabled="!canToggle(category) || isSaving"
+                :ui="{
+                  base: !canToggle(category)
+                    ? 'bg-(--ui-bg-accented)!'
+                    : 'data-[state=unchecked]:bg-(--ui-text-dimmed)',
+                }"
+                @update:model-value="
+                  (value: boolean) => toggleCategory(category, value)
+                "
+              />
+            </div>
+          </template>
+        </NotificationCard>
+
+        <div
+          v-for="subject in subjects.filter(
+            (subject) => subject.category.id === category.id,
+          )"
+          :key="subject.id"
+        >
+          <NotificationCard>
+            <template #title>
+              <div class="flex flex-col gap-0.5">
+                <span class="text-highlighted text-sm font-medium">
+                  {{ $t(subject.labelKey) }}
+                </span>
+                <span v-if="subject.descriptionKey" class="text-dimmed text-xs">
+                  {{ $t(subject.descriptionKey) }}
+                </span>
+              </div>
+            </template>
+
+            <template #actions>
+              <div class="flex items-center gap-2">
+                <UTooltip
+                  v-if="!canToggle(subject)"
+                  :delay-duration="0"
+                  :text="$t('dms.notifications.preferences.mandatory_tooltip')"
+                >
+                  <UButton
+                    icon="i-ph-question"
+                    variant="link"
+                    color="neutral"
+                    size="xs"
+                    class="cursor-help"
+                  />
+                </UTooltip>
+                <USwitch
+                  :model-value="
+                    preferences[buildPreferenceKey(category.id, subject.id)] ??
+                    true
+                  "
+                  :disabled="!canToggle(subject) || isSaving"
+                  :ui="{
+                    base: !canToggle(subject)
+                      ? 'bg-(--ui-bg-accented)!'
+                      : 'data-[state=unchecked]:bg-(--ui-text-dimmed)',
+                  }"
+                  @update:model-value="
+                    (value: boolean) =>
+                      toggleSubject(category.id, subject.id, value)
+                  "
+                />
+              </div>
+            </template>
+          </NotificationCard>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else class="flex items-center justify-center py-8">
+    <UIcon name="i-ph-spinner" class="size-8 animate-spin" />
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationsList.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { formatRelativeTime } from "#dms-core/app/utils/formatter";
+import NotificationCard from "../../../notification/NotificationCard.vue";
+
+const { t, locale } = useI18n();
+const { processI18n } = useTranslation();
+const toast = useToast();
+const {
+  notifications,
+  hasMore,
+  fetchNotifications,
+  markAsRead,
+  deleteNotification,
+  markAllAsRead,
+  deleteAll,
+} = useNotifications();
+const sentinel = ref<HTMLElement | null>(null);
+
+const isMarkingAllRead = ref(false);
+const isDeletingAll = ref(false);
+
+const hasNotifications = computed(() => notifications.value.length > 0);
+
+const { isLoadingMore, setupObserver } = useInfiniteScroll(
+  sentinel,
+  () => fetchNotifications(),
+  hasMore,
+);
+
+onMounted(async () => {
+  await fetchNotifications(true);
+  setupObserver();
+});
+
+const handleNotificationClick = async (notification: UserNotification) => {
+  if (!notification.isRead) {
+    await markAsRead(notification._id);
+  }
+
+  if (notification.linkTo) {
+    await navigateDms(notification.linkTo);
+  }
+};
+
+const handleDelete = async (notificationId: string, event: Event) => {
+  event.stopPropagation();
+  await deleteNotification(notificationId);
+};
+
+const handleMarkAsReadSingle = async (notificationId: string, event: Event) => {
+  event.stopPropagation();
+  await markAsRead(notificationId);
+};
+
+const handleMarkAllAsRead = async () => {
+  isMarkingAllRead.value = true;
+
+  try {
+    await markAllAsRead();
+    toast.add({
+      title: t("page.settings.notifications.mark_all_read_success"),
+      color: "success",
+    });
+  } catch {
+    toast.add({
+      title: t("dms.form.error_title"),
+      color: "error",
+    });
+  } finally {
+    isMarkingAllRead.value = false;
+  }
+};
+
+const handleDeleteAll = async () => {
+  isDeletingAll.value = true;
+
+  try {
+    await deleteAll();
+    toast.add({
+      title: t("page.settings.notifications.delete_all_success"),
+      color: "success",
+    });
+  } catch {
+    toast.add({
+      title: t("dms.form.error_title"),
+      color: "error",
+    });
+  } finally {
+    isDeletingAll.value = false;
+  }
+};
+</script>
+
+<template>
+  <div>
+    <section class="mb-6 space-y-6">
+      <div class="flex items-start justify-between gap-4">
+        <div class="space-y-1">
+          <h2 class="text-highlighted text-2xl font-semibold sm:text-xl">
+            {{ $t("page.settings.notifications.list_title") }}
+          </h2>
+          <p class="text-dimmed text-base sm:text-sm">
+            {{ $t("page.settings.notifications.list_description") }}
+          </p>
+        </div>
+
+        <div class="flex gap-2">
+          <UButton
+            variant="ghost"
+            color="neutral"
+            icon="i-ph-checks"
+            :disabled="!hasNotifications"
+            :loading="isMarkingAllRead"
+            @click="handleMarkAllAsRead"
+          >
+            {{ $t("page.settings.notifications.mark_all_read") }}
+          </UButton>
+          <UButton
+            variant="ghost"
+            color="neutral"
+            icon="i-ph-broom"
+            :disabled="!hasNotifications"
+            :loading="isDeletingAll"
+            @click="handleDeleteAll"
+          >
+            {{ $t("page.settings.notifications.delete_all") }}
+          </UButton>
+        </div>
+      </div>
+    </section>
+
+    <div>
+      <UEmpty
+        v-if="notifications.length === 0"
+        icon="i-ph-bell-slash"
+        :title="$t('page.settings.notifications.no_notifications')"
+      />
+
+      <NotificationCard
+        v-for="notification in notifications"
+        :key="notification._id"
+        :clickable="true"
+        :dimmed="notification.isRead"
+        mode="list"
+        actions-on-hover
+        @click="handleNotificationClick(notification)"
+      >
+        <template #icon>
+          <div class="relative">
+            <div
+              v-if="!notification.isRead"
+              class="bg-primary absolute top-4 -left-4 size-2 rounded-full"
+            />
+            <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>
+          </div>
+        </template>
+
+        <template #title>
+          <div class="text-highlighted mb-1 text-sm font-medium">
+            {{ processI18n(notification.title, notification.params) }}
+          </div>
+        </template>
+
+        <template #description>
+          <div class="text-dimmed text-xs">
+            {{ processI18n(notification.description, notification.params) }}
+          </div>
+        </template>
+
+        <template #meta>
+          <span class="text-muted text-xs whitespace-nowrap">
+            {{ formatRelativeTime(notification.createdAt, t, locale) }}
+          </span>
+        </template>
+
+        <template #actions>
+          <div class="flex min-w-14 items-center justify-end gap-1">
+            <UButton
+              v-if="!notification.isRead"
+              icon="i-ph-check"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              @click="
+                (event: Event) =>
+                  handleMarkAsReadSingle(notification._id, event)
+              "
+            />
+            <UButton
+              icon="i-ph-broom"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              @click="(event: Event) => handleDelete(notification._id, event)"
+            />
+          </div>
+        </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>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/shortcut/KeyboardShortcut.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// Keyboard combo (design .kcombo): Nuxt UI <UKbd> caps joined by dimmed "+"
+// separators. The .kkey look (mono, inset surface, thicker bottom edge) is
+// applied via the size="lg" variant in app.config (ui.kbd), not here.
+interface Props {
+  keys: string[];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div class="inline-flex items-center gap-1.5">
+    <template v-for="(key, index) in keys" :key="index">
+      <span v-if="index > 0" class="text-dimmed text-[11px]">+</span>
+      <UKbd size="lg" :value="key" />
+    </template>
+  </div>
+</template>