@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/support/page.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useModuleOn } from "../_shell/modules-context";
+import { PageTabs, Pagination, useTabParam } from "../_ui";
+import { CasesTab } from "./cases-tab";
+import { InboxAddress } from "./inbox-address";
+import { InboxHeader } from "./inbox-header";
+import { useQueueFilters } from "./queue-filters";
+import { SavedRepliesTab } from "./saved-replies/saved-replies-tab";
+import { useQueueCases } from "./use-queue-cases";
+import { useSupportAnalytics, useSupportViewer } from "./use-support-insights";
+import { SupportWorkspace } from "./workspace/support-workspace";
+const PAGE_SIZE = 20;
+const TABS = [
+  { id: "cases", label: "Cases" },
+  { id: "saved-replies", label: "Saved replies" }
+];
+const TAB_KEYS = TABS.map((tab) => tab.id);
+function useWaitingLine() {
+  const waiting = useSupportAnalytics().data?.byStatus?.waiting_on_potter;
+  if (waiting === void 0) return "Merchant cases and the replies we send";
+  if (waiting === 0) return "No cases waiting on a reply";
+  return `${waiting.toLocaleString()} ${waiting === 1 ? "case" : "cases"} waiting on a reply`;
+}
+function SupportDesk() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const { me, canManage } = useSupportViewer();
+  const [tab, setTab] = useTabParam(TAB_KEYS);
+  const waitingLine = useWaitingLine();
+  const takesEmail = useModuleOn("supportEmail");
+  const selected = params.get("case");
+  const setSelected = (id) => router.replace(id ? `/admin/support?case=${id}` : "/admin/support", {
+    scroll: false
+  });
+  const filters = useQueueFilters(me, PAGE_SIZE);
+  const cases = useQueueCases(filters);
+  const pager = cases.data && cases.data.total > 0 ? /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      page: filters.page,
+      totalPages: Math.max(
+        1,
+        Math.ceil(cases.data.total / Math.max(1, cases.data.pageSize))
+      ),
+      total: cases.data.total,
+      noun: "cases",
+      onPage: filters.setPage
+    }
+  ) : void 0;
+  if (selected)
+    return /* @__PURE__ */ jsx(
+      SupportWorkspace,
+      {
+        caseId: selected,
+        filters,
+        cases,
+        me,
+        canManage,
+        onSelect: setSelected,
+        pager
+      }
+    );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      InboxHeader,
+      {
+        title: "Merchant support",
+        description: waitingLine,
+        actions: takesEmail ? /* @__PURE__ */ jsx(InboxAddress, {}) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(PageTabs, { tabs: TABS, active: tab, onChange: setTab }),
+    tab === "cases" ? /* @__PURE__ */ jsx(
+      CasesTab,
+      {
+        filters,
+        cases,
+        me,
+        selected,
+        onOpen: setSelected,
+        pager
+      }
+    ) : /* @__PURE__ */ jsx(SavedRepliesTab, { canManage })
+  ] });
+}
+function AdminSupportPage() {
+  return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(SupportDesk, {}) });
+}
+export {
+  AdminSupportPage as default
+};
+//# sourceMappingURL=page.js.map

package/dist/admin/support/page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/page.tsx"],"sourcesContent":["'use client';\n\nimport { Suspense } from 'react';\nimport { useRouter, useSearchParams } from 'next/navigation';\nimport { useModuleOn } from '../_shell/modules-context';\nimport { PageTabs, Pagination, useTabParam } from '../_ui';\nimport { CasesTab } from './cases-tab';\nimport { InboxAddress } from './inbox-address';\nimport { InboxHeader } from './inbox-header';\nimport { useQueueFilters } from './queue-filters';\nimport { SavedRepliesTab } from './saved-replies/saved-replies-tab';\nimport { useQueueCases } from './use-queue-cases';\nimport { useSupportAnalytics, useSupportViewer } from './use-support-insights';\nimport { SupportWorkspace } from './workspace/support-workspace';\n\nconst PAGE_SIZE = 20;\n\nconst TABS = [\n  { id: 'cases', label: 'Cases' },\n  { id: 'saved-replies', label: 'Saved replies' },\n] as const;\nconst TAB_KEYS = TABS.map((tab) => tab.id);\n\n/** The header's one line: how many cases wait on us right now. */\nfunction useWaitingLine() {\n  const waiting = useSupportAnalytics().data?.byStatus?.waiting_on_potter;\n  if (waiting === undefined) return 'Merchant cases and the replies we send';\n  if (waiting === 0) return 'No cases waiting on a reply';\n  return `${waiting.toLocaleString()} ${waiting === 1 ? 'case' : 'cases'} waiting on a reply`;\n}\n\nfunction SupportDesk() {\n  const router = useRouter();\n  const params = useSearchParams();\n  const { me, canManage } = useSupportViewer();\n  const [tab, setTab] = useTabParam(TAB_KEYS);\n  const waitingLine = useWaitingLine();\n  const takesEmail = useModuleOn('supportEmail');\n  const selected = params.get('case');\n  const setSelected = (id: string | null) =>\n    router.replace(id ? `/admin/support?case=${id}` : '/admin/support', {\n      scroll: false,\n    });\n  const filters = useQueueFilters(me, PAGE_SIZE);\n  const cases = useQueueCases(filters);\n  const pager =\n    cases.data && cases.data.total > 0 ? (\n      <Pagination\n        page={filters.page}\n        totalPages={Math.max(\n          1,\n          Math.ceil(cases.data.total / Math.max(1, cases.data.pageSize)),\n        )}\n        total={cases.data.total}\n        noun=\"cases\"\n        onPage={filters.setPage}\n      />\n    ) : undefined;\n\n  // A case in the address opens the workspace on it; none shows the tabs.\n  if (selected)\n    return (\n      <SupportWorkspace\n        caseId={selected}\n        filters={filters}\n        cases={cases}\n        me={me}\n        canManage={canManage}\n        onSelect={setSelected}\n        pager={pager}\n      />\n    );\n\n  return (\n    <div>\n      <InboxHeader\n        title=\"Merchant support\"\n        description={waitingLine}\n        actions={takesEmail ? <InboxAddress /> : undefined}\n      />\n      <PageTabs tabs={TABS} active={tab} onChange={setTab} />\n      {tab === 'cases' ? (\n        <CasesTab\n          filters={filters}\n          cases={cases}\n          me={me}\n          selected={selected}\n          onOpen={setSelected}\n          pager={pager}\n        />\n      ) : (\n        <SavedRepliesTab canManage={canManage} />\n      )}\n    </div>\n  );\n}\n\nexport default function AdminSupportPage() {\n  return (\n    <Suspense>\n      <SupportDesk />\n    </Suspense>\n  );\n}\n"],"mappings":";AA+CM,cA2BF,YA3BE;AA7CN,SAAS,gBAAgB;AACzB,SAAS,WAAW,uBAAuB;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,UAAU,YAAY,mBAAmB;AAClD,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB,wBAAwB;AACtD,SAAS,wBAAwB;AAEjC,MAAM,YAAY;AAElB,MAAM,OAAO;AAAA,EACX,EAAE,IAAI,SAAS,OAAO,QAAQ;AAAA,EAC9B,EAAE,IAAI,iBAAiB,OAAO,gBAAgB;AAChD;AACA,MAAM,WAAW,KAAK,IAAI,CAAC,QAAQ,IAAI,EAAE;AAGzC,SAAS,iBAAiB;AACxB,QAAM,UAAU,oBAAoB,EAAE,MAAM,UAAU;AACtD,MAAI,YAAY,OAAW,QAAO;AAClC,MAAI,YAAY,EAAG,QAAO;AAC1B,SAAO,GAAG,QAAQ,eAAe,CAAC,IAAI,YAAY,IAAI,SAAS,OAAO;AACxE;AAEA,SAAS,cAAc;AACrB,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,gBAAgB;AAC/B,QAAM,EAAE,IAAI,UAAU,IAAI,iBAAiB;AAC3C,QAAM,CAAC,KAAK,MAAM,IAAI,YAAY,QAAQ;AAC1C,QAAM,cAAc,eAAe;AACnC,QAAM,aAAa,YAAY,cAAc;AAC7C,QAAM,WAAW,OAAO,IAAI,MAAM;AAClC,QAAM,cAAc,CAAC,OACnB,OAAO,QAAQ,KAAK,uBAAuB,EAAE,KAAK,kBAAkB;AAAA,IAClE,QAAQ;AAAA,EACV,CAAC;AACH,QAAM,UAAU,gBAAgB,IAAI,SAAS;AAC7C,QAAM,QAAQ,cAAc,OAAO;AACnC,QAAM,QACJ,MAAM,QAAQ,MAAM,KAAK,QAAQ,IAC/B;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ;AAAA,MACd,YAAY,KAAK;AAAA,QACf;AAAA,QACA,KAAK,KAAK,MAAM,KAAK,QAAQ,KAAK,IAAI,GAAG,MAAM,KAAK,QAAQ,CAAC;AAAA,MAC/D;AAAA,MACA,OAAO,MAAM,KAAK;AAAA,MAClB,MAAK;AAAA,MACL,QAAQ,QAAQ;AAAA;AAAA,EAClB,IACE;AAGN,MAAI;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA;AAAA,IACF;AAGJ,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAa;AAAA,QACb,SAAS,aAAa,oBAAC,gBAAa,IAAK;AAAA;AAAA,IAC3C;AAAA,IACA,oBAAC,YAAS,MAAM,MAAM,QAAQ,KAAK,UAAU,QAAQ;AAAA,IACpD,QAAQ,UACP;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA;AAAA,IACF,IAEA,oBAAC,mBAAgB,WAAsB;AAAA,KAE3C;AAEJ;AAEe,SAAR,mBAAoC;AACzC,SACE,oBAAC,YACC,8BAAC,eAAY,GACf;AAEJ;","names":[]}

package/dist/admin/support/queue-card.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./queue-card.module.css";
+function QueueCard({
+  title,
+  count,
+  caption,
+  toolbar,
+  footer,
+  busy,
+  height = "560px",
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: styles.card,
+      "aria-label": title,
+      "aria-busy": busy || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: styles.head, "data-toolbar": toolbar ? "" : void 0, children: [
+          /* @__PURE__ */ jsxs("h2", { className: styles.title, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.titleText, children: title }),
+            count !== void 0 && /* @__PURE__ */ jsx("span", { className: styles.count, children: count.toLocaleString() })
+          ] }),
+          caption && /* @__PURE__ */ jsx("span", { className: "adm-caption", children: caption }),
+          toolbar
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.scroll,
+            style: { maxHeight: height },
+            tabIndex: 0,
+            "aria-label": `${title} list`,
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ jsx("footer", { className: styles.footer, children: footer })
+      ]
+    }
+  );
+}
+export {
+  QueueCard
+};
+//# sourceMappingURL=queue-card.js.map

package/dist/admin/support/queue-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/queue-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport styles from './queue-card.module.css';\n\n/**\n * A work queue: a titled card whose toolbar (search, filters) and footer\n * (pagination) stay put while the rows scroll inside a fixed height, under\n * a sticky column header. Panel's shape, plus the toolbar row a list needs.\n */\nexport function QueueCard({\n  title,\n  count,\n  caption,\n  toolbar,\n  footer,\n  busy,\n  height = '560px',\n  children,\n}: {\n  title: string;\n  count?: number;\n  /** The window or unit, stated once. */\n  caption?: ReactNode;\n  toolbar?: ReactNode;\n  footer?: ReactNode;\n  /** Rows are loading: the region is busy and the skeleton is aria-hidden. */\n  busy?: boolean;\n  height?: string;\n  children: ReactNode;\n}) {\n  return (\n    <section\n      className={styles.card}\n      aria-label={title}\n      aria-busy={busy || undefined}\n    >\n      {/* Title and count on the left, filters on the right of one row;\n          the filters wrap under the title as a group when it is narrow. */}\n      <header className={styles.head} data-toolbar={toolbar ? '' : undefined}>\n        <h2 className={styles.title}>\n          <span className={styles.titleText}>{title}</span>\n          {count !== undefined && (\n            <span className={styles.count}>{count.toLocaleString()}</span>\n          )}\n        </h2>\n        {caption && <span className=\"adm-caption\">{caption}</span>}\n        {toolbar}\n      </header>\n      <div\n        className={styles.scroll}\n        style={{ maxHeight: height }}\n        tabIndex={0}\n        aria-label={`${title} list`}\n      >\n        {children}\n      </div>\n      {footer && <footer className={styles.footer}>{footer}</footer>}\n    </section>\n  );\n}\n"],"mappings":"AAsCQ,SACE,KADF;AArCR,OAAO,YAAY;AAOZ,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,GAWG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,cAAY;AAAA,MACZ,aAAW,QAAQ;AAAA,MAInB;AAAA,6BAAC,YAAO,WAAW,OAAO,MAAM,gBAAc,UAAU,KAAK,QAC3D;AAAA,+BAAC,QAAG,WAAW,OAAO,OACpB;AAAA,gCAAC,UAAK,WAAW,OAAO,WAAY,iBAAM;AAAA,YACzC,UAAU,UACT,oBAAC,UAAK,WAAW,OAAO,OAAQ,gBAAM,eAAe,GAAE;AAAA,aAE3D;AAAA,UACC,WAAW,oBAAC,UAAK,WAAU,eAAe,mBAAQ;AAAA,UAClD;AAAA,WACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,OAAO,EAAE,WAAW,OAAO;AAAA,YAC3B,UAAU;AAAA,YACV,cAAY,GAAG,KAAK;AAAA,YAEnB;AAAA;AAAA,QACH;AAAA,QACC,UAAU,oBAAC,YAAO,WAAW,OAAO,QAAS,kBAAO;AAAA;AAAA;AAAA,EACvD;AAEJ;","names":[]}

package/dist/admin/support/queue-card.module.css

@@ -0,0 +1,88 @@
+/* A queue card: fixed toolbar and footer, rows scroll between them. */
+
+.card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--adm-card-radius);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-base);
+}
+
+.head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+}
+
+.head[data-toolbar] {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.title {
+  display: flex;
+  flex: 1 0 auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+.titleText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.count {
+  color: var(--text-tertiary);
+  font-size: 13px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  line-height: 20px;
+}
+
+/* The saved-views strip sits between the title and the filter group. */
+.head > [role='tablist'] {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* When saved views are present, the filter group always starts its own
+   row below them: a steady two-row header instead of one that reflows
+   by how many controls the active view happens to show. */
+.head:has([role='tablist']) > [role='search'] {
+  flex: 1 1 100%;
+}
+
+.scroll {
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.scroll:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: -2px;
+}
+
+/* Column header with a hairline, not a shadow. */
+.scroll thead th {
+  background: var(--bg-base);
+  box-shadow: inset 0 -1px 0 var(--border-subtle);
+  white-space: nowrap;
+}
+
+.footer {
+  padding: 0 16px 12px;
+  border-top: 1px solid var(--border-subtle);
+}

package/dist/admin/support/queue-filters.js

@@ -0,0 +1,119 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FilterPress, FilterSearch, FilterSelect, Filters } from "../_ui";
+import { PRIORITY_OPTIONS, STATUS_OPTIONS } from "./support-options";
+import { SupportViews, viewOf } from "./support-views";
+import { useViewCounts } from "./use-view-counts";
+const UNASSIGNED_WINDOW = 100;
+const STATUS_FILTER = [{ value: "", label: "Any status" }, ...STATUS_OPTIONS];
+const PRIORITY_FILTER = [
+  { value: "", label: "Any priority" },
+  ...PRIORITY_OPTIONS
+];
+function useQueueFilters(me, pageSize) {
+  const [view, setView] = useState("all");
+  const [search, setSearch] = useState("");
+  const [status, setStatus] = useState("");
+  const [priority, setPriority] = useState("");
+  const [mine, setMine] = useState(false);
+  const [page, setPage] = useState(1);
+  const preset = viewOf(view);
+  const unassignedOnly = view === "unassigned";
+  const set = (setter) => (value) => {
+    setter(value);
+    setPage(1);
+  };
+  return {
+    view,
+    search,
+    status,
+    priority,
+    mine,
+    page,
+    setPage,
+    setView: set(setView),
+    setSearch: set(setSearch),
+    setStatus: set(setStatus),
+    setPriority: set(setPriority),
+    setMine: set(setMine),
+    narrowed: Boolean(search || status || priority || mine || view !== "all"),
+    clear: () => {
+      setView("all");
+      setSearch("");
+      setStatus("");
+      setPriority("");
+      setMine(false);
+      setPage(1);
+    },
+    /** Unassigned is filtered here, as the API cannot ask for "nobody". */
+    unassignedOnly,
+    query: {
+      page: unassignedOnly ? 1 : page,
+      pageSize: unassignedOnly ? UNASSIGNED_WINDOW : pageSize,
+      search: search || void 0,
+      status: preset.status ?? (status || void 0),
+      priority: preset.priority ?? (priority || void 0),
+      assignedAdminUserId: mine || view === "mine" ? me : void 0
+    }
+  };
+}
+function QueueToolbar({
+  filters,
+  me
+}) {
+  const counts = useViewCounts(me);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SupportViews,
+      {
+        view: filters.view,
+        counts,
+        onChange: filters.setView
+      }
+    ),
+    /* @__PURE__ */ jsxs(Filters, { label: "Filter cases", children: [
+      !viewOf(filters.view).status && /* @__PURE__ */ jsx(
+        FilterSelect,
+        {
+          label: "Status",
+          value: filters.status,
+          options: STATUS_FILTER,
+          onChange: (value) => filters.setStatus(value)
+        }
+      ),
+      !viewOf(filters.view).priority && /* @__PURE__ */ jsx(
+        FilterSelect,
+        {
+          label: "Priority",
+          value: filters.priority,
+          options: PRIORITY_FILTER,
+          onChange: (value) => filters.setPriority(value)
+        }
+      ),
+      me && filters.view !== "mine" && /* @__PURE__ */ jsx(
+        FilterPress,
+        {
+          on: filters.mine,
+          onToggle: () => filters.setMine(!filters.mine),
+          children: "Mine"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FilterSearch,
+        {
+          value: filters.search,
+          onChange: filters.setSearch,
+          placeholder: "Search reference or subject",
+          label: "Search reference or subject"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  QueueToolbar,
+  UNASSIGNED_WINDOW,
+  useQueueFilters
+};
+//# sourceMappingURL=queue-filters.js.map

package/dist/admin/support/queue-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/queue-filters.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport type {\n  ServiceCasePriority,\n  ServiceCaseStatus,\n} from '@withpotter/lib/admin-service-operations-api';\nimport { FilterPress, FilterSearch, FilterSelect, Filters } from '../_ui';\nimport { PRIORITY_OPTIONS, STATUS_OPTIONS } from './support-options';\nimport { SupportViews, viewOf, type SupportView } from './support-views';\nimport { useViewCounts } from './use-view-counts';\n\n/** The Unassigned view reads this many of the latest cases and filters. */\nexport const UNASSIGNED_WINDOW = 100;\n\nconst STATUS_FILTER = [{ value: '', label: 'Any status' }, ...STATUS_OPTIONS];\nconst PRIORITY_FILTER = [\n  { value: '', label: 'Any priority' },\n  ...PRIORITY_OPTIONS,\n];\n\n/** The queue's view, search and filters, and the case query they make. */\nexport function useQueueFilters(me: string | undefined, pageSize: number) {\n  const [view, setView] = useState<SupportView>('all');\n  const [search, setSearch] = useState('');\n  const [status, setStatus] = useState<ServiceCaseStatus | ''>('');\n  const [priority, setPriority] = useState<ServiceCasePriority | ''>('');\n  const [mine, setMine] = useState(false);\n  const [page, setPage] = useState(1);\n  const preset = viewOf(view);\n  const unassignedOnly = view === 'unassigned';\n  /** Every change goes back to page one. */\n  const set =\n    <T,>(setter: (value: T) => void) =>\n    (value: T) => {\n      setter(value);\n      setPage(1);\n    };\n\n  return {\n    view,\n    search,\n    status,\n    priority,\n    mine,\n    page,\n    setPage,\n    setView: set(setView),\n    setSearch: set(setSearch),\n    setStatus: set(setStatus),\n    setPriority: set(setPriority),\n    setMine: set(setMine),\n    narrowed: Boolean(search || status || priority || mine || view !== 'all'),\n    clear: () => {\n      setView('all');\n      setSearch('');\n      setStatus('');\n      setPriority('');\n      setMine(false);\n      setPage(1);\n    },\n    /** Unassigned is filtered here, as the API cannot ask for \"nobody\". */\n    unassignedOnly,\n    query: {\n      page: unassignedOnly ? 1 : page,\n      pageSize: unassignedOnly ? UNASSIGNED_WINDOW : pageSize,\n      search: search || undefined,\n      status: preset.status ?? (status || undefined),\n      priority: preset.priority ?? (priority || undefined),\n      assignedAdminUserId: mine || view === 'mine' ? me : undefined,\n    },\n  };\n}\n\n/** Saved views as tabs, then search, status, priority and \"Mine\". */\nexport function QueueToolbar({\n  filters,\n  me,\n}: {\n  filters: ReturnType<typeof useQueueFilters>;\n  me: string | undefined;\n}) {\n  const counts = useViewCounts(me);\n\n  return (\n    <>\n      <SupportViews\n        view={filters.view}\n        counts={counts}\n        onChange={filters.setView}\n      />\n      <Filters label=\"Filter cases\">\n        {!viewOf(filters.view).status && (\n          <FilterSelect\n            label=\"Status\"\n            value={filters.status}\n            options={STATUS_FILTER}\n            onChange={(value) =>\n              filters.setStatus(value as ServiceCaseStatus | '')\n            }\n          />\n        )}\n        {!viewOf(filters.view).priority && (\n          <FilterSelect\n            label=\"Priority\"\n            value={filters.priority}\n            options={PRIORITY_FILTER}\n            onChange={(value) =>\n              filters.setPriority(value as ServiceCasePriority | '')\n            }\n          />\n        )}\n        {me && filters.view !== 'mine' && (\n          <FilterPress\n            on={filters.mine}\n            onToggle={() => filters.setMine(!filters.mine)}\n          >\n            Mine\n          </FilterPress>\n        )}\n        <FilterSearch\n          value={filters.search}\n          onChange={filters.setSearch}\n          placeholder=\"Search reference or subject\"\n          label=\"Search reference or subject\"\n        />\n      </Filters>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/support/reply-picker-body.js

@@ -0,0 +1,122 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+import Link from "next/link";
+import { SearchField } from "@withpotter/ui-kit";
+import { categoryLabel } from "@withpotter/lib/admin-saved-replies-api";
+import { ReplyBody } from "./saved-replies/reply-preview";
+import { ReplyFacts } from "./saved-replies/reply-list";
+import { ALL, categoryCounts, filterReplies } from "./saved-replies/reply-meta";
+import styles from "./reply-picker.module.css";
+const LIBRARY = "/admin/support?tab=saved-replies";
+const STEP = { ArrowDown: 1, ArrowUp: -1 };
+function ReplyPickerBody({
+  replies,
+  isLoading,
+  category,
+  onPick
+}) {
+  const listId = useId();
+  const [query, setQuery] = useState("");
+  const [filter, setFilter] = useState(ALL);
+  const [index, setIndex] = useState(0);
+  const rows = useMemo(
+    () => filterReplies(replies, { category: filter, query, prefer: category }),
+    [replies, filter, query, category]
+  );
+  const active = rows[Math.min(index, rows.length - 1)] ?? null;
+  const chips = [{ key: ALL, label: "All" }, ...categoryCounts(replies ?? [])];
+  const onKeyDown = (event) => {
+    const step = STEP[event.key];
+    if (step && rows.length) {
+      event.preventDefault();
+      setIndex((current) => {
+        const from = Math.min(current, rows.length - 1);
+        return (from + step + rows.length) % rows.length;
+      });
+      return;
+    }
+    if (event.key === "Enter" && active) {
+      event.preventDefault();
+      onPick(active);
+    }
+  };
+  if (isLoading) return /* @__PURE__ */ jsx("p", { className: styles.note, children: "Loading replies\u2026" });
+  if (!replies?.length) {
+    return /* @__PURE__ */ jsxs("p", { className: styles.note, children: [
+      "No saved replies yet. ",
+      /* @__PURE__ */ jsx(Link, { href: LIBRARY, children: "Create the first one" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles.body, onKeyDown, children: [
+    /* @__PURE__ */ jsx(
+      SearchField,
+      {
+        autoFocus: true,
+        value: query,
+        onChange: (value) => {
+          setQuery(value);
+          setIndex(0);
+        },
+        placeholder: "Search saved replies"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.chips, role: "group", "aria-label": "Category", children: chips.map((chip) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles.chip,
+        "aria-pressed": chip.key === filter,
+        onClick: () => {
+          setFilter(chip.key);
+          setIndex(0);
+        },
+        children: chip.label
+      },
+      chip.key
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.split, children: [
+      /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          id: listId,
+          role: "listbox",
+          "aria-label": "Saved replies",
+          className: styles.list,
+          children: [
+            rows.map((reply, at) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                role: "option",
+                "aria-selected": reply === active,
+                ref: reply === active ? (node) => node?.scrollIntoView({ block: "nearest" }) : void 0,
+                className: styles.option,
+                onMouseEnter: () => setIndex(at),
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => onPick(reply),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.optionTitle, children: reply.title }),
+                  /* @__PURE__ */ jsx("span", { className: styles.optionHint, children: categoryLabel(reply.category) })
+                ]
+              },
+              reply.id
+            )),
+            !rows.length && /* @__PURE__ */ jsx("li", { className: styles.note, children: "No reply matches" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles.preview, tabIndex: 0, "aria-label": "Reply preview", children: active && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ReplyFacts, { reply: active }),
+        /* @__PURE__ */ jsx(ReplyBody, { body: active.body })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.foot, children: [
+      /* @__PURE__ */ jsx("span", { children: "\u2191\u2193 to move \xB7 \u21B5 to insert \xB7 esc to close" }),
+      /* @__PURE__ */ jsx(Link, { href: LIBRARY, children: "Manage saved replies" })
+    ] })
+  ] });
+}
+export {
+  ReplyPickerBody
+};
+//# sourceMappingURL=reply-picker-body.js.map

package/dist/admin/support/reply-picker-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/reply-picker-body.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo, useState, type KeyboardEvent } from 'react';\nimport Link from 'next/link';\nimport { SearchField } from '@withpotter/ui-kit';\nimport { categoryLabel, type SavedReply } from '@withpotter/lib/admin-saved-replies-api';\nimport { ReplyBody } from './saved-replies/reply-preview';\nimport { ReplyFacts } from './saved-replies/reply-list';\nimport { ALL, categoryCounts, filterReplies } from './saved-replies/reply-meta';\nimport styles from './reply-picker.module.css';\n\nconst LIBRARY = '/admin/support?tab=saved-replies';\nconst STEP: Record<string, number> = { ArrowDown: 1, ArrowUp: -1 };\n\n/**\n * Search, categories, the replies and a preview of the highlighted one.\n * Arrow keys move the highlight, hovering moves it too, Enter inserts.\n */\nexport function ReplyPickerBody({\n  replies,\n  isLoading,\n  category,\n  onPick,\n}: {\n  replies: SavedReply[] | undefined;\n  isLoading: boolean;\n  /** The case's category; its replies are listed first. */\n  category: string;\n  onPick: (reply: SavedReply) => void;\n}) {\n  const listId = useId();\n  const [query, setQuery] = useState('');\n  const [filter, setFilter] = useState(ALL);\n  const [index, setIndex] = useState(0);\n  const rows = useMemo(\n    () => filterReplies(replies, { category: filter, query, prefer: category }),\n    [replies, filter, query, category],\n  );\n  const active = rows[Math.min(index, rows.length - 1)] ?? null;\n  const chips = [{ key: ALL, label: 'All' }, ...categoryCounts(replies ?? [])];\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    const step = STEP[event.key];\n    if (step && rows.length) {\n      event.preventDefault();\n      setIndex((current) => {\n        const from = Math.min(current, rows.length - 1);\n        return (from + step + rows.length) % rows.length;\n      });\n      return;\n    }\n    if (event.key === 'Enter' && active) {\n      event.preventDefault();\n      onPick(active);\n    }\n  };\n\n  if (isLoading) return <p className={styles.note}>Loading replies…</p>;\n\n  if (!replies?.length) {\n    return (\n      <p className={styles.note}>\n        No saved replies yet. <Link href={LIBRARY}>Create the first one</Link>\n      </p>\n    );\n  }\n\n  return (\n    <div className={styles.body} onKeyDown={onKeyDown}>\n      <SearchField\n        autoFocus\n        value={query}\n        onChange={(value) => {\n          setQuery(value);\n          setIndex(0);\n        }}\n        placeholder=\"Search saved replies\"\n      />\n      <div className={styles.chips} role=\"group\" aria-label=\"Category\">\n        {chips.map((chip) => (\n          <button\n            key={chip.key}\n            type=\"button\"\n            className={styles.chip}\n            aria-pressed={chip.key === filter}\n            onClick={() => {\n              setFilter(chip.key);\n              setIndex(0);\n            }}\n          >\n            {chip.label}\n          </button>\n        ))}\n      </div>\n      <div className={styles.split}>\n        <ul\n          id={listId}\n          role=\"listbox\"\n          aria-label=\"Saved replies\"\n          className={styles.list}\n        >\n          {rows.map((reply, at) => (\n            <li\n              key={reply.id}\n              role=\"option\"\n              aria-selected={reply === active}\n              ref={\n                reply === active\n                  ? (node) => node?.scrollIntoView({ block: 'nearest' })\n                  : undefined\n              }\n              className={styles.option}\n              onMouseEnter={() => setIndex(at)}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => onPick(reply)}\n            >\n              <span className={styles.optionTitle}>{reply.title}</span>\n              <span className={styles.optionHint}>\n                {categoryLabel(reply.category)}\n              </span>\n            </li>\n          ))}\n          {!rows.length && <li className={styles.note}>No reply matches</li>}\n        </ul>\n        <div className={styles.preview} tabIndex={0} aria-label=\"Reply preview\">\n          {active && (\n            <>\n              <ReplyFacts reply={active} />\n              <ReplyBody body={active.body} />\n            </>\n          )}\n        </div>\n      </div>\n      <div className={styles.foot}>\n        <span>↑↓ to move · ↵ to insert · esc to close</span>\n        <Link href={LIBRARY}>Manage saved replies</Link>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/support/reply-picker.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Popover from "@radix-ui/react-popover";
+import { Button } from "@withpotter/ui-kit";
+import { Kbd } from "./kbd";
+import { ReplyPickerBody } from "./reply-picker-body";
+import styles from "./reply-picker.module.css";
+function ReplyPicker({
+  open,
+  onOpenChange,
+  replies,
+  isLoading,
+  category,
+  onPick
+}) {
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        size: "sm",
+        variant: open ? "secondary" : "ghost",
+        "aria-keyshortcuts": "#",
+        children: [
+          "Saved replies",
+          /* @__PURE__ */ jsx(Kbd, { children: "#" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        side: "top",
+        align: "end",
+        sideOffset: 8,
+        collisionPadding: 16,
+        "aria-label": "Saved replies",
+        className: styles.popover,
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          ReplyPickerBody,
+          {
+            replies,
+            isLoading,
+            category,
+            onPick
+          }
+        )
+      }
+    ) })
+  ] });
+}
+export {
+  ReplyPicker
+};
+//# sourceMappingURL=reply-picker.js.map

package/dist/admin/support/reply-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/support/reply-picker.tsx"],"sourcesContent":["'use client';\n\nimport * as Popover from '@radix-ui/react-popover';\nimport { Button } from '@withpotter/ui-kit';\nimport type { SavedReply } from '@withpotter/lib/admin-saved-replies-api';\nimport { Kbd } from './kbd';\nimport { ReplyPickerBody } from './reply-picker-body';\nimport styles from './reply-picker.module.css';\n\n/**\n * The composer's one way into saved replies: this button, or # in the box.\n * Opens a picker above the composer; inserting closes it and hands focus\n * back to the message, where the reply now sits.\n */\nexport function ReplyPicker({\n  open,\n  onOpenChange,\n  replies,\n  isLoading,\n  category,\n  onPick,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  replies: SavedReply[] | undefined;\n  isLoading: boolean;\n  category: string;\n  onPick: (reply: SavedReply) => void;\n}) {\n  return (\n    <Popover.Root open={open} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>\n        <Button\n          size=\"sm\"\n          variant={open ? 'secondary' : 'ghost'}\n          aria-keyshortcuts=\"#\"\n        >\n          Saved replies\n          <Kbd>#</Kbd>\n        </Button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          side=\"top\"\n          align=\"end\"\n          sideOffset={8}\n          collisionPadding={16}\n          aria-label=\"Saved replies\"\n          className={styles.popover}\n          // Inserting focuses the message itself; don't pull focus back.\n          onCloseAutoFocus={(event) => event.preventDefault()}\n        >\n          <ReplyPickerBody\n            replies={replies}\n            isLoading={isLoading}\n            category={category}\n            onPick={onPick}\n          />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"],"mappings":";AAgCQ,SAME,KANF;AA9BR,YAAY,aAAa;AACzB,SAAS,cAAc;AAEvB,SAAS,WAAW;AACpB,SAAS,uBAAuB;AAChC,OAAO,YAAY;AAOZ,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,SACE,qBAAC,QAAQ,MAAR,EAAa,MAAY,cACxB;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,OAAO,cAAc;AAAA,QAC9B,qBAAkB;AAAA,QACnB;AAAA;AAAA,UAEC,oBAAC,OAAI,eAAC;AAAA;AAAA;AAAA,IACR,GACF;AAAA,IACA,oBAAC,QAAQ,QAAR,EACC;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAClB,cAAW;AAAA,QACX,WAAW,OAAO;AAAA,QAElB,kBAAkB,CAAC,UAAU,MAAM,eAAe;AAAA,QAElD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}