@cavulsqa/create 2.9.3 → 2.10.0

package/templates/m3e-app/src/modules/gallery/components/sections/GalleryTables.vue

@@ -0,0 +1,185 @@
+<template>
+  <GalleryBlock :title="t('gallery.tables.orders')" :note="t('gallery.tables.ordersNote')" stack>
+    <div class="flex flex-wrap items-center gap-2">
+      <M3Chip
+        kind="filter"
+        :label="t('gallery.tables.dense')"
+        :selected="dense"
+        @update:selected="dense = $event"
+      />
+      <M3Chip
+        v-for="count in ORDER_COUNTS"
+        :key="count"
+        kind="filter"
+        :label="t('gallery.tables.rowCount', { count: count.toLocaleString(locale) })"
+        :selected="size === count"
+        @update:selected="size = count"
+      />
+      <span class="type-body-medium ms-auto text-on-surface-variant">{{
+        t("gallery.tables.selected", { count: selected.length }, selected.length)
+      }}</span>
+    </div>
+    <M3DataTable
+      v-model:sort="sort"
+      v-model:selected="selected"
+      v-model:group="layout.group"
+      v-model:pinned="layout.pinned"
+      v-model:hidden="layout.hidden"
+      class="-mx-2"
+      :rows="orders"
+      :columns="columns"
+      :row-key="orderKey"
+      :label="t('gallery.tables.orders')"
+      :locale="locale"
+      selectable
+      sticky-first-column
+      max-height="420px"
+      :dense="dense"
+      :select-all-label="t('gallery.tables.selectAll')"
+      :select-row-label="selectRowLabel"
+      :select-group-label="selectGroupLabel"
+      :group-count-label="groupCount"
+      :menu-labels="menuLabels"
+      @row-click="openOrder"
+    >
+      <template #cell="{ row, column, text }">
+        <span
+          v-if="column.key === 'status'"
+          :class="['gallery-status', `gallery-status--${row.status}`]"
+          >{{ text }}</span
+        >
+        <template v-else>{{ text }}</template>
+      </template>
+      <template #footer>
+        <tr>
+          <td :colspan="span" class="text-end tabular-nums">
+            {{ t("gallery.tables.total") }} · {{ money(total) }}
+          </td>
+        </tr>
+      </template>
+    </M3DataTable>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import type { DataColumn, DataSort } from "@cavulsqa/m3e-vue";
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+import { ORDER_COUNTS, makeOrders, type Order } from "@/modules/gallery/composables/demoOrders";
+
+const { t, locale } = useI18n();
+const snackbar = useSnackbar();
+const sort = ref<DataSort | null>({ key: "date", direction: "descending" });
+const selected = ref<(string | number)[]>([]);
+const dense = ref(false);
+const size = ref<(typeof ORDER_COUNTS)[number]>(ORDER_COUNTS[0]);
+const orders = shallowRef<Order[]>(makeOrders(size.value));
+watch(size, (count) => {
+  selected.value = [];
+  orders.value = makeOrders(count);
+});
+const layout = useLocalStorage<{ group: string | null; pinned: string[]; hidden: string[] }>(
+  "gallery.orders.layout",
+  { group: null, pinned: [], hidden: [] },
+);
+
+const money = (cents: number) =>
+  new Intl.NumberFormat(locale.value, { style: "currency", currency: "DZD" }).format(cents / 100);
+
+const columns = computed<DataColumn<Order>[]>(() => [
+  { key: "ref", label: t("gallery.tables.ref"), sortable: true },
+  { key: "customer", label: t("gallery.tables.customer"), sortable: true },
+  { key: "wilaya", label: t("gallery.inputs.wilaya"), sortable: true },
+  {
+    key: "date",
+    label: t("gallery.tables.date"),
+    sortable: true,
+    format: (value) =>
+      typeof value === "string" ? new Date(value).toLocaleDateString(locale.value) : "",
+  },
+  {
+    key: "status",
+    label: t("gallery.tables.status"),
+    sortable: true,
+    format: (value) => t(`gallery.inputs.statuses.${String(value)}`),
+  },
+  {
+    key: "totalCents",
+    label: t("gallery.tables.totalColumn"),
+    numeric: true,
+    sortable: true,
+    summary: "sum",
+    format: (value) => (typeof value === "number" ? money(value) : ""),
+    formatSummary: money,
+  },
+]);
+
+const span = computed(() => columns.value.length - layout.value.hidden.length + 1);
+
+const menuLabels = computed(() => ({
+  sortAscending: t("gallery.tables.menu.sortAscending"),
+  sortDescending: t("gallery.tables.menu.sortDescending"),
+  clearSort: t("gallery.tables.menu.clearSort"),
+  groupBy: t("gallery.tables.menu.groupBy"),
+  ungroup: t("gallery.tables.menu.ungroup"),
+  pin: t("gallery.tables.menu.pin"),
+  unpin: t("gallery.tables.menu.unpin"),
+  hide: t("gallery.tables.menu.hide"),
+  columns: t("gallery.tables.menu.columns"),
+}));
+
+function groupCount(count: number) {
+  return t("gallery.tables.groupCount", { count }, count);
+}
+
+function selectGroupLabel(label: string) {
+  return t("gallery.tables.selectGroup", { label });
+}
+
+const total = computed(() => {
+  const chosen = new Set(selected.value);
+  let sum = 0;
+  for (const order of orders.value) {
+    if (chosen.size === 0 || chosen.has(order.ref)) sum += order.totalCents;
+  }
+  return sum;
+});
+
+function openOrder(order: Order) {
+  void snackbar.show(t("gallery.tables.opened", { ref: order.ref }));
+}
+
+function orderKey(order: Order) {
+  return order.ref;
+}
+
+function selectRowLabel(order: Order) {
+  return t("gallery.tables.selectRow", { ref: order.ref });
+}
+</script>
+
+<style scoped>
+.gallery-status {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 12px;
+  font: var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size) /
+    var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);
+}
+
+.gallery-status--draft {
+  background: var(--md-sys-color-surface-container-highest);
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+.gallery-status--confirmed {
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+.gallery-status--delivered {
+  background: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
+}
+</style>

package/templates/m3e-app/src/modules/gallery/components/surfaces/SurfacesContainerTransform.vue

@@ -0,0 +1,46 @@
+<template>
+  <GalleryBlock
+    :title="t('gallery.surfaces.containerTransform')"
+    :note="t('gallery.surfaces.containerTransformNote')"
+    stack
+  >
+    <div ref="grid" class="grid grid-cols-2 gap-3">
+      <M3Card
+        v-for="(story, index) in featuredStories"
+        :key="story.id"
+        variant="filled"
+        clickable
+        :class="[TONE_CLASSES[story.tone], index === 0 && 'col-span-2']"
+        @click="openStory(story, $event)"
+      >
+        <div class="flex h-full flex-col gap-3 p-4" :class="index === 0 && 'min-h-36'">
+          <M3Shape :shape="story.shape" class="size-12 bg-surface/60">
+            <component :is="story.icon" class="size-6" />
+          </M3Shape>
+          <span class="mt-auto flex flex-col gap-1">
+            <span class="type-title-medium">{{ t(`gallery.featured.${story.id}.title`) }}</span>
+            <span class="type-body-medium opacity-80">{{
+              t(`gallery.featured.${story.id}.text`)
+            }}</span>
+          </span>
+        </div>
+      </M3Card>
+    </div>
+  </GalleryBlock>
+</template>
+
+<script setup lang="ts">
+import GalleryBlock from "@/modules/gallery/components/GalleryBlock.vue";
+import { featuredStories, type FeaturedStory } from "@/modules/gallery/composables/featuredStories";
+import { TONE_CLASSES } from "@/shared/utils/tone";
+
+const { t } = useI18n();
+const grid = useTemplateRef<HTMLElement>("grid");
+const { router } = useViewRouter(grid);
+const { open } = useContainerTransform();
+
+function openStory(story: FeaturedStory, event: MouseEvent) {
+  const current = router();
+  if (current) open(current, event, `/gallery/featured/${story.id}/`);
+}
+</script>

package/templates/m3e-app/src/modules/gallery/composables/chatTeam.ts

@@ -0,0 +1,18 @@
+import type { MessageInvite, MessagePoll, RsvpAnswer } from "@cavulsqa/m3e-vue";
+
+/** A teammate's vote on option `index`: counted, but not the owner's. */
+export function teammateVote(poll: MessagePoll, index: number): MessagePoll {
+  const target = poll.options[index % Math.max(1, poll.options.length)];
+  if (!target) return poll;
+  return {
+    ...poll,
+    options: poll.options.map((option) =>
+      option.id === target.id ? { ...option, votes: option.votes + 1 } : option,
+    ),
+  };
+}
+
+/** A teammate's answer to an invite: counted, but not the owner's. */
+export function teammateAnswer(invite: MessageInvite, answer: RsvpAnswer): MessageInvite {
+  return { ...invite, answers: { ...invite.answers, [answer]: invite.answers[answer] + 1 } };
+}

package/templates/m3e-app/src/modules/gallery/composables/composeKind.ts

@@ -0,0 +1,2 @@
+/** What the attach sheet hands to a composer rather than sending directly. */
+export type ComposeKind = "location" | "contact" | "poll" | "event";

package/templates/m3e-app/src/modules/gallery/composables/currentPosition.ts

@@ -0,0 +1,35 @@
+export type PositionFailure = "unsupported" | "denied" | "unavailable" | "timeout";
+
+export class PositionError extends Error {
+  constructor(readonly reason: PositionFailure) {
+    super(`location ${reason}`);
+    this.name = "PositionError";
+  }
+}
+
+const REASONS: Record<number, PositionFailure> = { 1: "denied", 2: "unavailable", 3: "timeout" };
+
+/**
+ * Where the device is, through the WebView's own geolocation - no plugin. Coarse first: a fix from
+ * the network comes back in a second where GPS can take a minute, and a shared pin needs no more.
+ * On Android the app's manifest must declare `ACCESS_COARSE_LOCATION` (and `ACCESS_FINE_LOCATION`
+ * for precise fixes); Capacitor's web view then asks the person for permission when this runs.
+ */
+export function currentPosition(timeout = 10_000): Promise<{ lat: number; lng: number }> {
+  return new Promise((resolve, reject) => {
+    if (typeof navigator === "undefined" || !navigator.geolocation) {
+      reject(new PositionError("unsupported"));
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      (position) => resolve({ lat: position.coords.latitude, lng: position.coords.longitude }),
+      (error) => reject(new PositionError(REASONS[error.code] ?? "unavailable")),
+      { enableHighAccuracy: false, timeout, maximumAge: 60_000 },
+    );
+  });
+}
+
+/** A link that opens a place in the maps app the person uses. */
+export function mapsLink(lat: number, lng: number): string {
+  return `https://www.google.com/maps/search/?api=1&query=${lat},${lng}`;
+}

package/templates/m3e-app/src/modules/gallery/composables/demoOrders.ts

@@ -0,0 +1,29 @@
+import { WILAYAS } from "@/modules/gallery/composables/wilayas";
+
+export type OrderStatus = "draft" | "confirmed" | "delivered";
+
+export interface Order {
+  ref: string;
+  customer: string;
+  wilaya: string;
+  date: string;
+  status: OrderStatus;
+  totalCents: number;
+}
+
+export const ORDER_COUNTS = [30, 1000, 5000] as const;
+
+const STATUSES: OrderStatus[] = ["draft", "confirmed", "delivered"];
+const CUSTOMERS = ["Oran Market", "Blida Gros", "Épicerie Saïd", "Annaba Fresh", "Tlemcen Dist."];
+
+/** `count` orders, the same every time, so the table demo can be measured at any size. */
+export function makeOrders(count: number): Order[] {
+  return Array.from({ length: count }, (_, index) => ({
+    ref: `SO-${1001 + index}`,
+    customer: CUSTOMERS[(index * 3) % CUSTOMERS.length]!,
+    wilaya: WILAYAS[(index * 11) % WILAYAS.length]!,
+    date: `2026-${String(1 + ((index >> 5) % 12)).padStart(2, "0")}-${String(1 + (index % 28)).padStart(2, "0")}`,
+    status: STATUSES[(index * 7) % STATUSES.length]!,
+    totalCents: ((index * 7919) % 90000) * 100 + 150000,
+  }));
+}

package/templates/m3e-app/src/modules/gallery/composables/featuredStories.ts

@@ -0,0 +1,73 @@
+import type { MaterialShapeName } from "@cavulsqa/m3e";
+import type { Component } from "vue";
+import DistanceIcon from "~icons/material-symbols/distance-outline-rounded";
+import DrinkIcon from "~icons/material-symbols/local-drink-outline-rounded";
+import EventIcon from "~icons/material-symbols/event-available-outline-rounded";
+import InventoryIcon from "~icons/material-symbols/inventory-2-outline-rounded";
+import MapIcon from "~icons/material-symbols/map-outline-rounded";
+import PinIcon from "~icons/material-symbols/pin-drop-rounded";
+import ReceiptIcon from "~icons/material-symbols/receipt-long-outline-rounded";
+import RouteIcon from "~icons/material-symbols/route-outline-rounded";
+import ScheduleIcon from "~icons/material-symbols/schedule-outline-rounded";
+import StoreIcon from "~icons/material-symbols/storefront-outline-rounded";
+import WaterIcon from "~icons/material-symbols/water-drop-outline-rounded";
+import type { Tone } from "@/shared/utils/tone";
+
+export interface StoryFact {
+  id: string;
+  icon: Component;
+  value: number;
+}
+
+export interface FeaturedStory {
+  id: string;
+  tone: Tone;
+  shape: MaterialShapeName;
+  icon: Component;
+  facts: readonly StoryFact[];
+}
+
+/**
+ * The cards of the container-transform demo. Each opens `/gallery/featured/<id>/`, and its tone is
+ * the colour the card hands to the page as it grows. Icons are imported once here and never made
+ * reactive, so they need no `markRaw`.
+ */
+export const featuredStories: readonly FeaturedStory[] = [
+  {
+    id: "range",
+    tone: "primary",
+    shape: "cookie9Sided",
+    icon: DrinkIcon,
+    facts: [
+      { id: "products", icon: InventoryIcon, value: 12 },
+      { id: "flavours", icon: WaterIcon, value: 4 },
+      { id: "wilayas", icon: MapIcon, value: 9 },
+    ],
+  },
+  {
+    id: "stores",
+    tone: "tertiary",
+    shape: "clover4Leaf",
+    icon: StoreIcon,
+    facts: [
+      { id: "opened", icon: StoreIcon, value: 7 },
+      { id: "visits", icon: EventIcon, value: 21 },
+      { id: "orders", icon: ReceiptIcon, value: 15 },
+    ],
+  },
+  {
+    id: "route",
+    tone: "secondary",
+    shape: "gem",
+    icon: RouteIcon,
+    facts: [
+      { id: "stops", icon: PinIcon, value: 14 },
+      { id: "distance", icon: DistanceIcon, value: 186 },
+      { id: "hours", icon: ScheduleIcon, value: 9 },
+    ],
+  },
+];
+
+export function findStory(id: string): FeaturedStory | undefined {
+  return featuredStories.find((story) => story.id === id);
+}

package/templates/m3e-app/src/modules/gallery/composables/fieldFormats.ts

@@ -0,0 +1,36 @@
+/** 0 to 4: how much a password resists guessing, by its length and the kinds of character in it. */
+export function passwordScore(value: string): 0 | 1 | 2 | 3 | 4 {
+  if (value.length < 6) return 0;
+  const kinds = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((kind) => kind.test(value)).length;
+  let score = (value.length >= 8 ? 1 : 0) + (value.length >= 12 ? 1 : 0) + Math.max(0, kinds - 1);
+  if (kinds === 1) score = Math.min(score, 1);
+  return Math.min(4, Math.max(1, score)) as 1 | 2 | 3 | 4;
+}
+
+/**
+ * The nine national digits of an Algerian mobile number from whatever was typed: spaces and dashes
+ * go, and so does a leading 0 or 213 dialling prefix, so "0555 12 34 56" and "+213 555123456" agree.
+ */
+export function mobileDigits(raw: string): string {
+  let digits = raw.replace(/\D/g, "");
+  if (digits.startsWith("213")) digits = digits.slice(3);
+  if (digits.startsWith("0")) digits = digits.slice(1);
+  return digits.slice(0, 9);
+}
+
+/** The national digits grouped as they are read aloud: "5 55 12 34 56". */
+export function formatMobile(digits: string): string {
+  const groups = [
+    digits.slice(0, 1),
+    digits.slice(1, 3),
+    digits.slice(3, 5),
+    digits.slice(5, 7),
+    digits.slice(7, 9),
+  ];
+  return groups.filter((group) => group.length > 0).join(" ");
+}
+
+/** Whether nine national digits make a mobile number: it starts 5, 6 or 7. */
+export function isMobile(digits: string): boolean {
+  return /^[567]\d{8}$/.test(digits);
+}

package/templates/m3e-app/src/modules/gallery/composables/openExternal.ts

@@ -0,0 +1,11 @@
+import { Capacitor } from "@capacitor/core";
+
+/**
+ * Opens a link outside the app. On a device Capacitor hands any navigation to another host to the
+ * system, so a maps link opens the maps app and a web page the browser; in a browser it opens a new
+ * tab, so `vp dev` keeps the app it is running.
+ */
+export function openExternal(url: string): void {
+  if (Capacitor.isNativePlatform()) window.location.assign(url);
+  else window.open(url, "_blank", "noopener,noreferrer");
+}

package/templates/m3e-app/src/modules/gallery/composables/routePlan.ts

@@ -0,0 +1,90 @@
+import { WILAYAS } from "@/modules/gallery/composables/wilayas";
+
+export type VisitState = "done" | "next" | "planned";
+
+export interface Visit {
+  id: string;
+  time: string;
+  /** Minutes since midnight. */
+  start: number;
+  end: number;
+  customer: string;
+  city: string;
+  state: VisitState;
+}
+
+const SHOPS = [
+  "Supérette El Feth",
+  "Alimentation Bachir",
+  "Market Ennour",
+  "Supérette Djamel",
+  "Épicerie Yacine",
+  "Mini-market Salam",
+  "Alimentation Rachid",
+  "Supérette El Baraka",
+];
+
+const WEEKEND = new Set([5, 6]);
+
+function seed(day: string): number {
+  let hash = 0;
+  for (const char of day) hash = (hash * 31 + char.charCodeAt(0)) | 0;
+  return Math.abs(hash);
+}
+
+/**
+ * A rep's visits for a day, the same every time for the same date, so the agenda demo needs no
+ * database. Friday and Saturday are the weekend. Past days are done; today, what ended before `now`
+ * (minutes since midnight) is done and the first one still running or ahead is next.
+ */
+export function visitsFor(day: string, today: string, now = 0): Visit[] {
+  const weekday = new Date(`${day}T00:00:00Z`).getUTCDay();
+  if (WEEKEND.has(weekday)) return [];
+  const base = seed(day);
+  const count = 3 + (base % 4);
+  const visits = Array.from({ length: count }, (_, index) => {
+    const minutes = 8 * 60 + index * 75 + ((base >> index) % 3) * 10;
+    const duration = 30 + ((base >> (index + 2)) % 4) * 15;
+    const time = `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+    return {
+      id: `${day}-${index}`,
+      time,
+      start: minutes,
+      end: minutes + duration,
+      customer: SHOPS[(base + index * 3) % SHOPS.length]!,
+      city: WILAYAS[(base + index * 7) % WILAYAS.length]!,
+      state: "planned" as VisitState,
+    };
+  });
+  const next = day === today ? visits.findIndex((visit) => visit.end > now) : -1;
+  for (const [index, visit] of visits.entries()) {
+    if (day < today || (day === today && (next === -1 || index < next))) visit.state = "done";
+    else if (index === next) visit.state = "next";
+  }
+  return visits;
+}
+
+/** How many visits each day from `from` to `to`, both included, holds - the dots on a calendar. */
+export function marksBetween(from: string, to: string, today: string): Record<string, number> {
+  const marks: Record<string, number> = {};
+  const last = Date.parse(`${to}T00:00:00Z`);
+  for (let time = Date.parse(`${from}T00:00:00Z`); time <= last; time += 86_400_000) {
+    const date = new Date(time).toISOString().slice(0, 10);
+    const count = visitsFor(date, today).length;
+    if (count > 0) marks[date] = count;
+  }
+  return marks;
+}
+
+/** The visits on the weeks around `day`, for the week strip's dots. */
+export function marksAround(day: string, today: string): Record<string, number> {
+  const centre = Date.parse(`${day}T00:00:00Z`);
+  const at = (offset: number) => new Date(centre + offset * 86_400_000).toISOString().slice(0, 10);
+  return marksBetween(at(-21), at(21), today);
+}
+
+/** The visits on every day a month grid shows, its outside days included. */
+export function marksForMonth(year: number, month: number, today: string): Record<string, number> {
+  const at = (day: number) => new Date(Date.UTC(year, month, day)).toISOString().slice(0, 10);
+  return marksBetween(at(-6), at(38), today);
+}

package/templates/m3e-app/src/modules/gallery/composables/useAgenda.ts

@@ -0,0 +1,61 @@
+import { formatIso, todayIso, type YearMonth } from "@cavulsqa/m3e-vue";
+import { marksAround, marksForMonth, visitsFor } from "@/modules/gallery/composables/routePlan";
+
+export const AGENDA_VIEWS = ["day", "week", "month"] as const;
+export type AgendaView = (typeof AGENDA_VIEWS)[number];
+
+/**
+ * The route agenda's state: which view is on (remembered between visits), the chosen day, its
+ * visits, and the dots for whichever week or month is on screen. The month grid reports the month
+ * it turns to, so its dots follow the arrows rather than only the chosen day.
+ */
+export function useAgenda() {
+  const { t, locale } = useI18n();
+  const today = todayIso();
+  const day = ref(today);
+  const stored = useLocalStorage<AgendaView>("gallery.agenda.view", "week");
+  const view = computed<AgendaView>({
+    get: () => (AGENDA_VIEWS.includes(stored.value) ? stored.value : "week"),
+    set: (next) => (stored.value = next),
+  });
+
+  const shownMonth = shallowRef<YearMonth>(monthOf(today));
+  watch(day, (next) => (shownMonth.value = monthOf(next)));
+
+  const clock = useNow({ interval: 60_000 });
+  const visits = computed(() =>
+    visitsFor(day.value, today, clock.value.getHours() * 60 + clock.value.getMinutes()),
+  );
+  const weekMarks = computed(() => marksAround(day.value, today));
+  const monthMarks = computed(() =>
+    marksForMonth(shownMonth.value.year, shownMonth.value.month, today),
+  );
+
+  const month = computed(() =>
+    formatIso(day.value, locale.value, { month: "long", year: "numeric" }),
+  );
+  const heading = computed(() =>
+    formatIso(day.value, locale.value, { weekday: "long", day: "numeric", month: "long" }),
+  );
+
+  function visitsLabel(count: number) {
+    return t("gallery.agenda.visits", { count }, count);
+  }
+
+  return {
+    today,
+    day,
+    view,
+    visits,
+    weekMarks,
+    monthMarks,
+    shownMonth,
+    month,
+    heading,
+    visitsLabel,
+  };
+}
+
+function monthOf(iso: string): YearMonth {
+  return { year: Number(iso.slice(0, 4)), month: Number(iso.slice(5, 7)) - 1 };
+}

package/templates/m3e-app/src/modules/gallery/composables/useChatCustomers.ts

@@ -0,0 +1,31 @@
+import { listCustomers } from "@/domains/sales/sales.repository";
+import { getDatabase } from "@/shared/database/database";
+import { useReactiveQuery } from "@/shared/database/queries";
+
+/**
+ * The customers a chat can share as contacts. Deferred until `wanted` first turns true, so opening
+ * the conversation does not spend the database thread on a list nobody may ask for; after that it
+ * stays live, and a customer added elsewhere shows up in the picker.
+ */
+export function useChatCustomers(wanted: Readonly<Ref<boolean>>) {
+  const asked = shallowRef(false);
+  watch(
+    wanted,
+    (value) => {
+      if (value) asked.value = true;
+    },
+    { immediate: true },
+  );
+
+  const query = useReactiveQuery(() => listCustomers(getDatabase().db), {
+    tables: ["customer"],
+    queryKey: ["gallery:customers"],
+    enabled: asked,
+  });
+
+  return {
+    customers: computed(() => query.data.value ?? []),
+    loading: query.loading,
+    failed: computed(() => query.error.value !== null),
+  };
+}