@antelopejs/dms 0.5.6 → 0.6.0

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

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { NotificationSubject } from "../../../../composables/notification/useNotificationCatalog";
+import type { SaveStatusState } from "#dms-ui/app/components/save-bar/SaveStatus.vue";
+import {
+  MATRIX_GRID_CLASS,
+  MATRIX_SUBJECT_INDENT_CLASS,
+} from "./notificationDisplay";
+
+interface NotificationMatrixSubjectProps {
+  subject: NotificationSubject;
+  enabled: boolean;
+  state: SaveStatusState;
+}
+
+const props = defineProps<NotificationMatrixSubjectProps>();
+const emit = defineEmits<{ toggle: [enabled: boolean]; retry: [] }>();
+const { t } = useI18n();
+
+const label = computed(() => t(props.subject.labelKey));
+const isLocked = computed(() => props.subject.locked === true);
+
+// A second click while the first save is in flight would race it; the row
+// stays interactive-looking (v2 shows the switch at full strength) and the
+// click is dropped instead.
+const onToggle = (value: boolean) => {
+  if (props.state !== "saving") emit("toggle", value);
+};
+</script>
+
+<template>
+  <div
+    :class="MATRIX_GRID_CLASS"
+    class="border-muted min-h-[50px] border-t py-2"
+    role="row"
+  >
+    <div class="min-w-0" :class="MATRIX_SUBJECT_INDENT_CLASS" role="rowheader">
+      <div
+        class="flex flex-wrap items-center gap-2 text-[13px] font-[550]"
+        :class="props.enabled ? 'text-highlighted' : 'text-muted'"
+      >
+        {{ label }}
+        <UIcon
+          v-if="isLocked"
+          name="i-ph-lock-simple"
+          class="text-dimmed size-3.5"
+          :aria-label="t('page.settings.notifications.locked_hint')"
+        />
+        <UBadge
+          v-if="props.subject.badgeKey"
+          color="neutral"
+          size="sm"
+          :label="t(props.subject.badgeKey)"
+        />
+      </div>
+      <p
+        v-if="props.subject.descriptionKey"
+        class="text-muted mt-px text-[12.5px] leading-normal"
+      >
+        {{ t(props.subject.descriptionKey) }}
+      </p>
+    </div>
+    <div class="flex items-center justify-center" role="cell">
+      <USwitch
+        :model-value="props.enabled"
+        :disabled="isLocked"
+        :title="
+          isLocked ? t('page.settings.notifications.locked_hint') : undefined
+        "
+        :aria-label="label"
+        :aria-busy="props.state === 'saving'"
+        @update:model-value="onToggle"
+      />
+    </div>
+    <div
+      class="text-dimmed flex justify-center font-mono text-xs font-medium"
+      role="cell"
+    >
+      —
+    </div>
+    <div class="flex justify-end" role="cell">
+      <DmsSaveStatus
+        v-if="props.state !== 'idle'"
+        :state="props.state"
+        @retry="emit('retry')"
+      />
+    </div>
+  </div>
+</template>

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

@@ -1,291 +1,186 @@
 <script setup lang="ts">
-import NotificationCard from "../../../notification/NotificationCard.vue";
+import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
+import type { NotificationCategory } from "../../../../composables/notification/useNotificationCatalog";
+import { useNotificationPreferences } from "../../../../composables/notification/useNotificationPreferences";
+import { useInstantSaveHeader } from "../../../../../composables/layout/useInstantSaveHeader";
+import NotificationMatrixCategory from "./NotificationMatrixCategory.vue";
+import NotificationMatrixSubject from "./NotificationMatrixSubject.vue";
+import {
+  MATRIX_CONTAINER_CLASS,
+  MATRIX_GRID_CLASS,
+} from "./notificationDisplay";
+import DmsRowSkeleton from "#dms-ui/app/build/components/skeleton/RowSkeleton.vue";
+
+const PREFERENCES_SKELETON_ROWS = 4;
 
-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 {
+  categories,
+  subjectsOf,
+  failedChanges,
+  saveState,
+  isLoading,
+  loadFailed,
+  isEnabled,
+  rowState,
+  toggleableSubjectsOf,
+  toggleSubject,
+  toggleCategory,
+  retry,
+  load,
+} = useNotificationPreferences();
+
+const visibleCategories = computed(() =>
+  categories.value.filter((category) => subjectsOf(category.id).length > 0),
+);
+
+const enabledCountOf = (category: NotificationCategory) =>
+  subjectsOf(category.id).filter(isEnabled).length;
+
+// The master switch reads only the subjects it can change: a locked subject
+// stays on whatever the user picks, so counting it would flip the switch
+// straight back on after turning the category off.
+const isCategoryOn = (category: NotificationCategory) => {
+  const toggleable = toggleableSubjectsOf(category);
+  return toggleable.length > 0
+    ? toggleable.some(isEnabled)
+    : enabledCountOf(category) > 0;
 };
 
-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;
-  });
-};
+// Each switch saves on its own: the page header carries the shared
+// "Saved instantly" pill, which flashes while a row saves.
+useInstantSaveHeader(() => saveState.value);
 
-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;
+/** Names the direction the failed switch went back to, as v2 words it. */
+const failureMessage = computed(() => {
+  const changes = Object.values(failedChanges.value ?? {});
+  if (changes.length !== 1) {
+    return t("page.settings.notifications.save_failed_many");
   }
+  return changes[0]
+    ? t("page.settings.notifications.save_failed_off")
+    : t("page.settings.notifications.save_failed_on");
 });
+
+onMounted(load);
 </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>
-
+  <DmsSection
+    :title="t('page.settings.notifications.preferences_title')"
+    :description="t('page.settings.notifications.preferences_description')"
+  >
+    <div
+      :class="MATRIX_CONTAINER_CLASS"
+      role="table"
+      :aria-label="t('page.settings.notifications.preferences_title')"
+    >
       <div
-        v-if="isCategoryExpanded(category.id)"
-        class="border-muted mt-1 ml-9 space-y-1 border-l pl-4"
+        :class="[
+          MATRIX_GRID_CLASS,
+          EYEBROW_CLASS,
+          'border-default text-dimmed h-[34px] border-b bg-(--dms-bg-muted)',
+        ]"
+        role="row"
       >
-        <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"
+        <span role="columnheader">
+          {{ t("page.settings.notifications.column_subject") }}
+        </span>
+        <span class="text-center" role="columnheader">
+          {{ t("page.settings.notifications.column_in_app") }}
+        </span>
+        <span
+          class="flex items-center justify-center gap-1.5"
+          role="columnheader"
         >
-          <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>
+          {{ t("page.settings.notifications.column_email") }}
+          <UBadge
+            color="neutral"
+            size="sm"
+            class="tracking-[0.04em]"
+            :label="t('page.settings.notifications.soon')"
+          />
+        </span>
+        <span role="columnheader">
+          <span class="sr-only">
+            {{ t("page.settings.notifications.column_state") }}
+          </span>
+        </span>
+      </div>
 
-            <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 v-if="isLoading" class="divide-y divide-(--ui-border-muted)">
+        <DmsRowSkeleton
+          v-for="row in PREFERENCES_SKELETON_ROWS"
+          :key="row"
+          class="px-[18px] py-3.5"
+          well="size-[30px] rounded-lg"
+          :lines="['h-3 w-40', 'h-2.5 w-64']"
+          is-centered
+        />
       </div>
+
+      <DmsEmptyState
+        v-else-if="loadFailed"
+        variant="error"
+        size="sm"
+        :title="t('dms.notifications.preferences.error_loading')"
+        :actions="[
+          {
+            label: t('page.settings.notifications.retry'),
+            icon: 'i-ph-arrows-clockwise',
+            color: 'neutral',
+            variant: 'outline',
+            onClick: load,
+          },
+        ]"
+      />
+
+      <template
+        v-for="(category, index) in visibleCategories"
+        v-else
+        :key="category.id"
+      >
+        <NotificationMatrixCategory
+          :category="category"
+          :enabled-count="enabledCountOf(category)"
+          :on="isCategoryOn(category)"
+          :total="subjectsOf(category.id).length"
+          :disabled="toggleableSubjectsOf(category).length === 0"
+          :first="index === 0"
+          @toggle="(enabled) => toggleCategory(category, enabled)"
+        />
+        <NotificationMatrixSubject
+          v-for="subject in subjectsOf(category.id)"
+          :key="`${category.id}:${subject.id}`"
+          :subject="subject"
+          :enabled="isEnabled(subject)"
+          :state="rowState(subject)"
+          @toggle="(enabled) => toggleSubject(subject, enabled)"
+          @retry="retry"
+        />
+      </template>
     </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 #footer>
+      <template v-if="failedChanges">
+        <span class="text-error flex items-center gap-2" role="alert">
+          <UIcon name="i-ph-warning-circle" class="size-3.5" />
+          {{ failureMessage }}
+        </span>
+        <UButton
+          class="ms-auto"
+          color="neutral"
+          variant="outline"
+          size="xs"
+          icon="i-ph-arrows-clockwise"
+          :label="t('page.settings.notifications.retry')"
+          @click="retry"
+        />
+      </template>
+      <span v-else class="flex items-center gap-1.5 text-xs">
+        <UIcon name="i-ph-info" class="text-dimmed size-3.5" />
+        {{ t("page.settings.notifications.email_hint") }}
+      </span>
+    </template>
+  </DmsSection>
 </template>

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

@@ -0,0 +1,86 @@
+import { MONO_TAG_CLASS } from "#dms-ui/app/build/utils/monoChip";
+import {
+  formatShortDate,
+  type RelativeDayBucket,
+  relativeDayBucket,
+} from "#dms-ui/app/build/components/activity-feed/activityFeedDays";
+import type {
+  NotificationTone,
+  UserNotification,
+} from "../../../../../composables/notification/useNotifications";
+
+/** Notifications without a tone stand out in `primary` until read. */
+export const resolveNotificationTone = (
+  notification: UserNotification,
+): NotificationTone =>
+  notification.tone ?? (notification.isRead ? "neutral" : "primary");
+
+/** Inbox sections, newest first. */
+export type NotificationDayGroupKey = RelativeDayBucket;
+
+export interface NotificationDayGroup {
+  key: NotificationDayGroupKey;
+  items: UserNotification[];
+}
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+const DAY_GROUP_ORDER: NotificationDayGroupKey[] = ["today", "week", "older"];
+
+/** Splits a newest-first feed into Today, Earlier this week and Older. */
+export const groupNotificationsByDay = (
+  items: UserNotification[],
+  now = new Date(),
+): NotificationDayGroup[] => {
+  const buckets = new Map<NotificationDayGroupKey, UserNotification[]>();
+  for (const item of items) {
+    const key = relativeDayBucket(new Date(item.createdAt), now);
+    buckets.set(key, [...(buckets.get(key) ?? []), item]);
+  }
+  return DAY_GROUP_ORDER.filter((key) => buckets.has(key)).map((key) => ({
+    key,
+    items: buckets.get(key) ?? [],
+  }));
+};
+
+/** Mono time stamp: relative within a day, then a short date. */
+export const formatNotificationTime = (
+  createdAt: string,
+  locale: string,
+  formatRecent: (date: string) => string,
+  now = new Date(),
+): string => {
+  const date = new Date(createdAt);
+  if (now.getTime() - date.getTime() < DAY_MS) return formatRecent(createdAt);
+  return formatShortDate(date, now, locale);
+};
+
+/**
+ * The matrix lays out from its own width (`@container/matrix` on the table),
+ * not the viewport's: the settings column at 1024px is narrower than a phone
+ * in landscape, and four fixed columns left the subject about 50px there.
+ */
+export const MATRIX_CONTAINER_CLASS = "@container/matrix";
+
+/**
+ * v2 .cs-matrix grid: subject, in-app, email, state. Under 672px of matrix
+ * the state column goes; under 448px (phones) only the subject and in-app
+ * columns remain.
+ */
+export const MATRIX_GRID_CLASS =
+  "grid grid-cols-[minmax(0,1fr)_80px_96px_168px] items-center gap-x-3 px-[18px] @max-2xl/matrix:grid-cols-[minmax(0,1fr)_80px_96px] @max-2xl/matrix:[&>:nth-child(4)]:hidden @max-md/matrix:grid-cols-[minmax(0,1fr)_60px] @max-md/matrix:[&>:nth-child(n+3)]:hidden";
+
+/** The subject's indent under its category, dropped where only two columns remain. */
+export const MATRIX_SUBJECT_INDENT_CLASS = "pl-[42px] @max-md/matrix:pl-0";
+
+/** v2 .cs-mod: the mono module / source tag. */
+export const SOURCE_TAG_CLASS = `${MONO_TAG_CLASS} inline-flex h-[18px] items-center border border-accented whitespace-nowrap text-muted`;
+
+export const MODULE_TAG_CLASS =
+  "border-(--dms-accent-line) bg-(--dms-accent-tint) text-primary";
+
+/** Where a notification comes from, shown as a mono tag. */
+export interface NotificationSourceTag {
+  label: string;
+  /** A module's own tag (`SaaS`), drawn in the accent. */
+  isModule: boolean;
+}

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/profile/ProfileAccountData.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useAccountData } from "../../../../composables/settings/profile/useAccountData";
+
+const { t } = useI18n();
+const { isExporting, isCheckingDeletion, exportData, deleteAccount } =
+  useAccountData();
+</script>
+
+<template>
+  <div>
+    <DmsFieldRow
+      label="$page.settings.profile.data.export_title"
+      description="$page.settings.profile.data.export_description"
+    >
+      <UButton
+        color="neutral"
+        variant="outline"
+        size="sm"
+        icon="i-ph-download-simple"
+        :loading="isExporting"
+        :label="t('page.settings.profile.data.export_button')"
+        @click="exportData"
+      />
+    </DmsFieldRow>
+    <DmsFieldRow
+      label="$page.settings.profile.data.delete_title"
+      description="$page.settings.profile.data.delete_description"
+    >
+      <UButton
+        color="error"
+        variant="outline"
+        size="sm"
+        icon="i-ph-trash"
+        :loading="isCheckingDeletion"
+        :label="t('page.settings.profile.data.delete_button')"
+        @click="deleteAccount"
+      />
+    </DmsFieldRow>
+  </div>
+</template>