@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-layout/app/build/components/pages/modules/ModuleTile.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+import { DmsLink } from "#dms/frontend-module";
+import type { Tone } from "#dms-ui/app/types/tone";
+import type { StatusPillDot } from "#dms-ui/app/components/status-pill/StatusPill.vue";
+
+// v2 .mc-tile, the frame of the Modules page's tiles: an installed module's
+// card (a link into it) or a store module's dashed placeholder. Both read
+// the same: icon and status, the name low in the tile, its description, a
+// mono footer band.
+
+/** The status pill of the tile's head. */
+export interface ModuleTileStatus {
+  tone: Tone;
+  label: string;
+  dot?: StatusPillDot;
+}
+
+interface ModuleTileProps {
+  icon: string;
+  title: string;
+  description: string;
+  status: ModuleTileStatus;
+  /** Where the tile leads; without it, the tile is a placeholder. */
+  to?: string;
+}
+
+interface ModuleTileSlots {
+  /** Above the name (a live readout). */
+  readout?: () => unknown;
+  /** Under the description (an install command). */
+  default?: () => unknown;
+  /** The footer band's content. */
+  footer: () => unknown;
+}
+
+const props = withDefaults(defineProps<ModuleTileProps>(), {
+  to: undefined,
+});
+defineSlots<ModuleTileSlots>();
+
+const theme = tv({
+  slots: {
+    root: "flex min-h-[228px] flex-col gap-3 overflow-hidden px-4 pt-4",
+    footer:
+      "text-dimmed -mx-4 mt-0.5 flex items-center gap-2 border-t border-(--ui-border-muted) ps-4 pe-3 font-mono text-[11px] font-medium",
+  },
+  variants: {
+    isPlaceholder: {
+      false: {
+        root: "group dms-card dms-card--interactive text-inherit",
+        footer: "bg-(--dms-bg-muted) py-[9px]",
+      },
+      // A dashed, transparent tile with a quiet icon: the module does not
+      // run here.
+      true: {
+        root: "rounded-(--dms-radius-card) border border-dashed border-(--ui-border-accented)",
+        footer: "py-[7px]",
+      },
+    },
+  },
+});
+
+const ui = computed(() => theme({ isPlaceholder: !props.to }));
+</script>
+
+<template>
+  <component
+    :is="props.to ? DmsLink : 'article'"
+    :to="props.to"
+    :aria-label="props.to ? undefined : props.title"
+    :class="ui.root()"
+  >
+    <div class="flex items-start justify-between gap-2.5">
+      <DmsIconWell :icon="props.icon" :tone="props.to ? undefined : 'muted'" />
+      <DmsStatusPill
+        :tone="props.status.tone"
+        :dot="props.status.dot"
+        :label="props.status.label"
+        size="sm"
+        uppercase
+      />
+    </div>
+
+    <slot name="readout" />
+
+    <div
+      class="text-highlighted mt-auto truncate text-lg font-[650] tracking-[-0.02em]"
+    >
+      {{ props.title }}
+    </div>
+    <p class="text-muted -mt-1.5 line-clamp-2 text-sm leading-[1.45]">
+      {{ props.description }}
+    </p>
+
+    <slot />
+
+    <div :class="ui.footer()">
+      <slot name="footer" />
+    </div>
+  </component>
+</template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/members/MemberRolePicker.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import {
+  formFieldInjectionKey,
+  formStateInjectionKey,
+  useFormField,
+} from "@nuxt/ui/composables/useFormField";
+import DmsChipGroup, {
+  type ChipGroupItem,
+} from "#dms-ui/app/build/components/form/ChipGroup.vue";
+
+/**
+ * The roles of a member as pills, one per role of the workspace, each with
+ * what it grants: the invite form and the members table's "Change roles"
+ * form both pick roles with it. A form field: `v-model` is the list of role
+ * ids, the wrapping `UFormField`'s error rings the pills in the error ink.
+ */
+
+interface RoleOption {
+  _id: string;
+  name: string;
+  permissionIds: string[];
+}
+
+interface RoleOptionsResponse {
+  roles: RoleOption[];
+  totalPermissions: number;
+}
+
+interface Props {
+  id?: string;
+  /** Route answering the roles on offer (`InviteRoleOptions`). */
+  rolesUrl: string;
+  /** The roles page, linked as "Compare roles". */
+  rolesPageUrl?: string;
+  disabled?: boolean;
+  /** While the form loads its values: the pills wait for them. */
+  loading?: boolean;
+  /**
+   * The value the form loaded, whose order a role picked again goes back to:
+   * unpicking and picking it again leaves the form clean. Role ids, or the
+   * roles as the data API loads them (see `keyMapping`).
+   */
+  initialValue?: unknown[] | null;
+  /**
+   * As on a relation field, read by the form to load the member's roles
+   * (`{ _id, name }` each) as ids: `keyMapping.value` names the id.
+   */
+  keyMapping?: { label?: string; value?: string };
+  /** As on a relation field: always several roles. */
+  multiple?: boolean;
+  /**
+   * A boolean field of the same form making the member an owner: while it is
+   * on, the roles stay visible but inert, as an owner holds every permission.
+   */
+  ownerField?: string;
+  /**
+   * Whether no role at all is a valid choice (a member then keeps what every
+   * member can do). Off, the empty hint asks for one.
+   */
+  allowEmpty?: boolean;
+}
+
+const props = defineProps<Props>();
+const model = defineModel<string[] | null | undefined>();
+
+const { t } = useI18n();
+const { $authFetch } = useAuthFetch();
+// The wrapping UFormField's error ("pick at least one role") marks the group
+// invalid, describes it and rings the pills in the error ink.
+const { ariaAttrs } = useFormField();
+const formField = inject(formFieldInjectionKey, undefined);
+const formState = inject(formStateInjectionKey, undefined);
+const hasFieldError = computed(() => !!formField?.value?.error);
+
+const isOwner = computed(
+  () => !!props.ownerField && formState?.value?.[props.ownerField] === true,
+);
+const isInert = computed(() => props.disabled || isOwner.value);
+// Without an owner field (the invite form), the form disables the roles for
+// an owner only.
+const showsOwnerHint = computed(() =>
+  props.ownerField ? isOwner.value : props.disabled,
+);
+
+const options = ref<RoleOptionsResponse>({ roles: [], totalPermissions: 0 });
+const isFetching = ref(true);
+const isLoading = computed(() => isFetching.value || props.loading);
+
+onMounted(async () => {
+  try {
+    options.value = await $authFetch<RoleOptionsResponse>(props.rolesUrl);
+  } finally {
+    isFetching.value = false;
+  }
+});
+
+const selectedIds = computed(() => new Set(model.value ?? []));
+const roleItems = computed<ChipGroupItem[]>(() =>
+  options.value.roles.map((role) => ({ value: role._id, label: role.name })),
+);
+const selectedRoles = computed(() =>
+  options.value.roles.filter((role) => selectedIds.value.has(role._id)),
+);
+const grantedCount = computed(
+  () => new Set(selectedRoles.value.flatMap((role) => role.permissionIds)).size,
+);
+
+const hint = computed(() => {
+  if (showsOwnerHint.value) {
+    return t("page.settings.members.invite.roles_owner_hint");
+  }
+  if (selectedRoles.value.length === 0) {
+    return props.allowEmpty
+      ? t("page.settings.members.form.roles_hint_none")
+      : t("page.settings.members.invite.roles_hint_empty");
+  }
+  return t("page.settings.members.invite.roles_hint", {
+    roles: selectedRoles.value.map((role) => role.name).join(" + "),
+    count: grantedCount.value,
+    total: options.value.totalPermissions,
+  });
+});
+
+/** Role ids of a loaded value, whose roles may be `{ _id, name }` objects. */
+function toRoleIds(value: unknown[] | null | undefined): string[] {
+  const idKey = props.keyMapping?.value ?? "_id";
+  return (value ?? []).map((item) =>
+    item !== null && typeof item === "object"
+      ? String((item as Record<string, unknown>)[idKey])
+      : String(item),
+  );
+}
+
+/** The picked ids, the loaded ones first in their loaded order. */
+function inLoadedOrder(ids: string[]): string[] {
+  const loaded = toRoleIds(props.initialValue);
+  const rank = (id: string) => {
+    const index = loaded.indexOf(id);
+    return index === -1 ? loaded.length : index;
+  };
+  // A stable sort: ids picked in this form keep the order they were picked in.
+  return [...ids].sort((left, right) => rank(left) - rank(right));
+}
+
+function toggle(roleId: string) {
+  if (isInert.value) return;
+  const current = model.value ?? [];
+  const next = selectedIds.value.has(roleId)
+    ? current.filter((id) => id !== roleId)
+    : [...current, roleId];
+  model.value = inLoadedOrder(next);
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-1.5">
+    <USkeleton v-if="isLoading" class="h-7 w-48 rounded-full" />
+    <span
+      v-else-if="options.roles.length === 0"
+      class="text-dimmed text-[12.5px]"
+    >
+      {{ t("page.settings.members.invite.no_roles") }}
+    </span>
+    <DmsChipGroup
+      v-else
+      :id="props.id"
+      :items="roleItems"
+      :selected="model ?? []"
+      :label="t('page.settings.members.invite.field.roles')"
+      multiple
+      :disabled="isInert"
+      :invalid="hasFieldError"
+      v-bind="ariaAttrs"
+      @pick="toggle"
+    />
+    <p class="text-muted text-xs">
+      {{ hint }}
+      <ULink v-if="props.rolesPageUrl" :to="props.rolesPageUrl" class="ms-1">
+        {{ t("page.settings.members.invite.compare_roles") }}
+      </ULink>
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { formatRelativeTime } from "#dms-core/app/utils/formatter";
+import TableEmpty from "#dms-ui/app/build/components/table/Empty.vue";
+import TablePagination from "#dms-ui/app/build/components/table/Pagination.vue";
+import type { TableViewDisplayContext } from "#dms-ui/app/composables/table-view/types/display";
+import { useNotificationCatalog } from "../../../../composables/notification/useNotificationCatalog";
+import {
+  type UserNotification,
+  useNotifications,
+} from "../../../../../composables/notification/useNotifications";
+import NotificationInboxItem from "./NotificationInboxItem.vue";
+import {
+  formatNotificationTime,
+  groupNotificationsByDay,
+  type NotificationSourceTag,
+} from "./notificationDisplay";
+import DmsRowSkeleton from "#dms-ui/app/build/components/skeleton/RowSkeleton.vue";
+
+// The `dms:inbox` display of the notifications page's table: the user's feed
+// as v2 inbox rows under day headings. The table brings the tabs, the
+// buttons, the empty states and the infinite pagination.
+
+interface NotificationInboxDisplayProps {
+  context: TableViewDisplayContext<UserNotification>;
+}
+
+const props = defineProps<NotificationInboxDisplayProps>();
+
+const SKELETON_ROWS = 3;
+
+const { t, locale } = useI18n();
+const toast = useToast();
+const catalog = useNotificationCatalog();
+const {
+  unreadCount,
+  notifications,
+  markAsRead,
+  markAsUnread,
+  deleteNotification,
+} = useNotifications();
+
+const groups = computed(() => groupNotificationsByDay(props.context.items));
+const isFirstLoad = computed(
+  () => props.context.loading && props.context.items.length === 0,
+);
+
+const timeOf = (notification: UserNotification) =>
+  formatNotificationTime(notification.createdAt, locale.value, (date) =>
+    formatRelativeTime(date, t, locale.value),
+  );
+
+/** A module's category tag wins; core notifications show their subject. */
+const sourceOf = (
+  notification: UserNotification,
+): NotificationSourceTag | undefined => {
+  const category = catalog.findCategory(notification.categoryId);
+  if (category?.tagKey) return { label: t(category.tagKey), isModule: true };
+  const subject = catalog.findSubject(
+    notification.categoryId,
+    notification.subjectId,
+  );
+  const labelKey = subject?.labelKey ?? category?.labelKey;
+  return labelKey ? { label: t(labelKey), isModule: false } : undefined;
+};
+
+// A change of a row is listed again, from the server.
+const runThenRefresh = async (action: () => Promise<unknown>) => {
+  try {
+    await action();
+  } catch {
+    toast.add({ title: t("dms.form.error_title"), color: "error" });
+  }
+  await props.context.refresh();
+};
+
+const openNotification = async (notification: UserNotification) => {
+  if (!notification.isRead) {
+    await runThenRefresh(() => markAsRead(notification._id));
+  }
+  if (notification.linkTo) await navigateDms(notification.linkTo);
+};
+
+const toggleRead = (notification: UserNotification) =>
+  runThenRefresh(() =>
+    notification.isRead
+      ? markAsUnread(notification._id)
+      : markAsRead(notification._id),
+  );
+
+// What the stream changes elsewhere (a notification arriving, read in
+// another tab) is listed again here.
+watch(
+  () => [unreadCount.value, notifications.value[0]?._id],
+  () => void props.context.refresh(),
+);
+
+onMounted(() => {
+  if (!catalog.isLoaded.value) void catalog.loadCatalog();
+});
+</script>
+
+<template>
+  <div>
+    <div v-if="isFirstLoad" class="space-y-4 px-[18px] py-5">
+      <DmsRowSkeleton
+        v-for="row in SKELETON_ROWS"
+        :key="row"
+        well="size-[34px] rounded-[9px]"
+        :lines="['h-3 w-56 max-w-full', 'h-2.5 w-80 max-w-full']"
+      />
+    </div>
+
+    <template v-else-if="context.items.length > 0">
+      <section v-for="(group, index) in groups" :key="group.key">
+        <DmsEyebrow
+          as="h3"
+          class="border-muted bg-(--dms-bg-muted) pt-2 pr-[18px] pb-1.5 pl-[18px]"
+          :class="{ 'border-t': index > 0 }"
+          :label="t(`page.settings.notifications.day_${group.key}`)"
+        />
+        <NotificationInboxItem
+          v-for="notification in group.items"
+          :key="notification._id"
+          :notification="notification"
+          :time="timeOf(notification)"
+          :source="sourceOf(notification)"
+          @open="openNotification(notification)"
+          @toggle-read="toggleRead(notification)"
+          @delete="runThenRefresh(() => deleteNotification(notification._id))"
+        />
+      </section>
+    </template>
+
+    <TableEmpty v-else />
+
+    <TablePagination />
+  </div>
+</template>

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

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { UserNotification } from "../../../../../composables/notification/useNotifications";
+import {
+  MODULE_TAG_CLASS,
+  type NotificationSourceTag,
+  SOURCE_TAG_CLASS,
+  resolveNotificationTone,
+} from "./notificationDisplay";
+
+interface NotificationInboxItemProps {
+  notification: UserNotification;
+  time: string;
+  source?: NotificationSourceTag;
+}
+
+const props = defineProps<NotificationInboxItemProps>();
+const emit = defineEmits<{
+  open: [];
+  toggleRead: [];
+  delete: [];
+}>();
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+
+const isUnread = computed(() => !props.notification.isRead);
+const iconWellTone = computed(() => {
+  const tone = resolveNotificationTone(props.notification);
+  return tone === "neutral" ? "muted" : tone;
+});
+const readToggleLabel = computed(() =>
+  isUnread.value
+    ? t("page.settings.notifications.mark_read")
+    : t("page.settings.notifications.mark_unread"),
+);
+// Row actions stay compact until the row is hovered or holds focus, then
+// show their labels (v2 C07).
+// Hover or focus spells the actions out, except on phones: a tap focuses
+// the row, and the labels would squeeze the text there.
+const actionLabelUi = {
+  label: "hidden sm:group-hover:inline sm:group-focus-within:inline",
+};
+</script>
+
+<template>
+  <DmsListRow
+    as="article"
+    size="sm"
+    marker="leading"
+    mono
+    interactive
+    :unread="isUnread"
+    :unread-label="t('page.settings.notifications.unread')"
+    :icon="props.notification.icon"
+    :tone="iconWellTone"
+    class="group relative cursor-pointer focus-within:shadow-[inset_0_0_0_2px_var(--dms-accent-line)] max-sm:grid-cols-1 max-sm:gap-y-1.5"
+    @click="emit('open')"
+  >
+    <button
+      type="button"
+      class="block text-left outline-none"
+      @click.stop="emit('open')"
+    >
+      {{
+        processI18n(props.notification.title ?? "", props.notification.params)
+      }}
+    </button>
+    <template #description>
+      {{
+        processI18n(
+          props.notification.description ?? "",
+          props.notification.params,
+        )
+      }}
+    </template>
+    <template #meta>
+      <time :datetime="props.notification.createdAt">{{ props.time }}</time>
+      <span
+        v-if="props.source"
+        :class="[SOURCE_TAG_CLASS, props.source.isModule && MODULE_TAG_CLASS]"
+      >
+        {{ props.source.label }}
+      </span>
+    </template>
+    <template #trailing>
+      <!-- Phones: the actions drop under the text, end-aligned, instead of
+           taking a column from it (the row is one column there). -->
+      <div
+        class="flex items-center gap-1 opacity-55 transition-opacity duration-150 group-focus-within:opacity-100 group-hover:opacity-100 max-sm:ms-auto"
+        @click.stop
+      >
+        <UButton
+          :icon="isUnread ? 'i-ph-check' : 'i-ph-envelope-simple'"
+          :label="readToggleLabel"
+          :aria-label="readToggleLabel"
+          :title="readToggleLabel"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :ui="actionLabelUi"
+          class="group-focus-within:ring-accented group-hover:ring-accented group-focus-within:ring group-hover:ring"
+          @click="emit('toggleRead')"
+        />
+        <UButton
+          icon="i-ph-trash"
+          :label="t('page.settings.notifications.delete')"
+          :aria-label="t('page.settings.notifications.delete_one')"
+          :title="t('page.settings.notifications.delete')"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :ui="actionLabelUi"
+          class="group-focus-within:text-error group-hover:text-error"
+          @click="emit('delete')"
+        />
+      </div>
+    </template>
+  </DmsListRow>
+</template>

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { NotificationCategory } from "../../../../composables/notification/useNotificationCatalog";
+import {
+  MATRIX_GRID_CLASS,
+  MODULE_TAG_CLASS,
+  SOURCE_TAG_CLASS,
+} from "./notificationDisplay";
+
+interface NotificationMatrixCategoryProps {
+  category: NotificationCategory;
+  /** Subjects of the category that are on, out of `total`. */
+  enabledCount: number;
+  /** State of the master switch: one of the subjects it can change is on. */
+  on: boolean;
+  total: number;
+  /** Every subject is locked: the master switch has nothing to change. */
+  disabled: boolean;
+  /** Directly under the column header, which already draws the rule. */
+  first?: boolean;
+}
+
+const props = defineProps<NotificationMatrixCategoryProps>();
+const emit = defineEmits<{ toggle: [enabled: boolean] }>();
+const { t } = useI18n();
+
+const label = computed(() => t(props.category.labelKey));
+const iconWellTone = computed(() =>
+  props.category.tagKey ? "primary" : "muted",
+);
+</script>
+
+<template>
+  <div
+    :class="[MATRIX_GRID_CLASS, props.first ? 'border-t-0' : 'border-t']"
+    class="border-default min-h-14 bg-[color-mix(in_srgb,var(--dms-bg-muted)_55%,transparent)] py-2.5"
+    role="row"
+  >
+    <div class="flex min-w-0 items-center gap-3" role="rowheader">
+      <DmsIconWell :icon="props.category.icon" :tone="iconWellTone" size="xs" />
+      <div class="min-w-0">
+        <div
+          class="text-highlighted flex flex-wrap items-center gap-2 text-[13px] font-[650]"
+        >
+          {{ label }}
+          <span
+            v-if="props.category.tagKey"
+            :class="[SOURCE_TAG_CLASS, MODULE_TAG_CLASS]"
+          >
+            {{ t(props.category.tagKey) }}
+          </span>
+        </div>
+        <p
+          v-if="props.category.descriptionKey"
+          class="text-muted mt-px text-xs"
+        >
+          {{ t(props.category.descriptionKey) }}
+        </p>
+      </div>
+    </div>
+    <div class="flex items-center justify-center" role="cell">
+      <USwitch
+        :model-value="props.on"
+        :disabled="props.disabled"
+        :aria-label="
+          t('page.settings.notifications.category_switch', { name: label })
+        "
+        @update:model-value="(value: boolean) => emit('toggle', value)"
+      />
+    </div>
+    <div
+      class="text-dimmed flex justify-center font-mono text-xs font-medium"
+      role="cell"
+    >
+      —
+    </div>
+    <div class="flex justify-end" role="cell">
+      <span class="text-dimmed font-mono text-[11px] font-medium">
+        {{
+          t("page.settings.notifications.category_count", {
+            count: props.enabledCount,
+            total: props.total,
+          })
+        }}
+      </span>
+    </div>
+  </div>
+</template>