alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/dashboard/app/pages/RootPage.js

@@ -9,15 +9,13 @@ import {
 import "../../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/pages/RootPage.tsx
+import { Page as PageLayout, PageContent } from "alinea/components";
 import { assert } from "alinea/core/util/Assert";
 import { page, routeAtom } from "alinea/dashboard/atoms/nav";
-import {
-  rootAtoms
-} from "alinea/dashboard/atoms/root";
+import { rootAtoms } from "alinea/dashboard/atoms/root";
 import { Explorer } from "../Explorer.js";
 import { CreateEntryButton } from "../DashboardLayout.js";
 import { NotFoundPanel } from "./EntryPage.js";
-import { Rail, RailBody } from "../ui/Rail.js";
 
 // src/dashboard/app/pages/RootPage.module.css
 var RootPage_default = {
@@ -50,13 +48,13 @@ var rootPage = page(async (page2, get) => {
 function RootEditor({ data, explorerPage, root, view: View }) {
   if (View) {
     const rootData = { ...data, name: root.key };
-    return /* @__PURE__ */ jsx(Rail, { main: true, children: /* @__PURE__ */ jsx(RailBody, { className: styles.RootPage.customView(), children: /* @__PURE__ */ jsx(View, { root: rootData }) }) });
+    return /* @__PURE__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx(PageContent, { className: styles.RootPage.customView(), children: /* @__PURE__ */ jsx(View, { root: rootData }) }) });
   }
   assert(explorerPage, "Explorer page expected");
   return /* @__PURE__ */ jsx(RootBrowser, { page: explorerPage, root });
 }
 function RootBrowser({ page: page2, root }) {
-  return /* @__PURE__ */ jsx(Rail, { main: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx(
     Explorer,
     {
       controls: /* @__PURE__ */ jsx("div", { className: styles.RootPage.mobileActions(), children: /* @__PURE__ */ jsx(CreateEntryButton, { root, toolbar: true }) }),

package/dist/dashboard/app/pages/SplashPage.d.ts

@@ -1,3 +1,22 @@
+import { type EntryAuditUser } from 'alinea/core/Entry';
 import { type Getter } from 'jotai';
 import type { ReactNode } from 'react';
+export interface RecentChangeAudit {
+    createdAt: number | null;
+    createdBy: EntryAuditUser | null;
+    updatedAt: number | null;
+    updatedBy: EntryAuditUser | null;
+}
+export interface RecentChange {
+    action?: 'Created' | 'Edited';
+    actor?: string;
+    /** Milliseconds since the epoch */
+    changedAt?: number;
+}
 export declare function splashPage(get: Getter): Promise<ReactNode>;
+/**
+ * The last change recorded in the audit metadata of an entry or media file:
+ * an update after the creation is an edit, a creation that was not updated
+ * since is the creation
+ */
+export declare function recentChange({ createdAt, createdBy, updatedAt, updatedBy }: RecentChangeAudit): RecentChange;

package/dist/dashboard/app/pages/SplashPage.js

@@ -1,23 +1,38 @@
 import {
   useSetAtom
 } from "../../../chunks/chunk-D6UJHBJJ.js";
-import "../../../chunks/chunk-CFNRVI3Y.js";
+import {
+  atom
+} from "../../../chunks/chunk-CFNRVI3Y.js";
 import {
   styler
 } from "../../../chunks/chunk-I4OYYAX5.js";
 import "../../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/pages/SplashPage.tsx
-import { Button, Icon, Menu, MenuItem, Surface } from "alinea/components";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Heading,
+  Icon,
+  Surface,
+  Text,
+  Timestamp
+} from "alinea/components";
 import { Entry } from "alinea/core/Entry";
 import { timestampFromId } from "alinea/core/Id";
 import { getRoot, getType } from "alinea/core/Internal";
+import { FileData, isFileType } from "alinea/core/media/MediaTypes";
 import { configAtom, graphAtom } from "alinea/dashboard/atoms/core";
 import { shaAtom } from "alinea/dashboard/atoms/graph";
 import { routeAtom } from "alinea/dashboard/atoms/nav";
 import { rootAtoms } from "alinea/dashboard/atoms/root";
 import { workspaceAtom, workspacesAtom } from "alinea/dashboard/atoms/config";
 import { canManageMembersAtom, policyAtom } from "alinea/dashboard/atoms/user";
+import { dispense } from "alinea/dashboard/atoms/utils";
 import { useUser } from "alinea/dashboard/hooks";
 import {
   IcBaselineAccountCircle,
@@ -26,96 +41,123 @@ import {
   LucideFile
 } from "../../icons.js";
 import { AppearanceToggle } from "../AppearanceToggle.js";
+import { fileKindVisual } from "../FileKind.js";
+import { searchShortcutKeys } from "../../hook/UseSearchShortcut.js";
 import { GlobalSearch, WorkspaceAvatar } from "../WorkspaceMenu.js";
 
 // src/dashboard/app/pages/SplashPage.module.css
 var SplashPage_default = {
-  "SplashPage-card-header-title": "alinea-SplashPage-card-header-title",
-  "SplashPageCardHeaderTitle": "alinea-SplashPage-card-header-title",
-  "SplashPage-sidebar": "alinea-SplashPage-sidebar",
-  "SplashPageSidebar": "alinea-SplashPage-sidebar",
   "SplashPage-root": "alinea-SplashPage-root",
   "SplashPageRoot": "alinea-SplashPage-root",
-  "SplashPage-entry-content": "alinea-SplashPage-entry-content",
-  "SplashPageEntryContent": "alinea-SplashPage-entry-content",
-  "SplashPage-entry-primary": "alinea-SplashPage-entry-primary",
-  "SplashPageEntryPrimary": "alinea-SplashPage-entry-primary",
+  "SplashPage-user": "alinea-SplashPage-user",
+  "SplashPageUser": "alinea-SplashPage-user",
+  "SplashPage-card-header-content": "alinea-SplashPage-card-header-content",
+  "SplashPageCardHeaderContent": "alinea-SplashPage-card-header-content",
   "SplashPage-card-header": "alinea-SplashPage-card-header",
   "SplashPageCardHeader": "alinea-SplashPage-card-header",
-  "SplashPage-action": "alinea-SplashPage-action",
-  "SplashPageAction": "alinea-SplashPage-action",
   "SplashPage-entry-visual": "alinea-SplashPage-entry-visual",
   "SplashPageEntryVisual": "alinea-SplashPage-entry-visual",
-  "SplashPage-entry-title": "alinea-SplashPage-entry-title",
-  "SplashPageEntryTitle": "alinea-SplashPage-entry-title",
-  "SplashPage": "alinea-SplashPage",
+  "SplashPage-card-header-button": "alinea-SplashPage-card-header-button",
+  "SplashPageCardHeaderButton": "alinea-SplashPage-card-header-button",
+  "SplashPage-entry-content": "alinea-SplashPage-entry-content",
+  "SplashPageEntryContent": "alinea-SplashPage-entry-content",
+  "SplashPage-card-header-title": "alinea-SplashPage-card-header-title",
+  "SplashPageCardHeaderTitle": "alinea-SplashPage-card-header-title",
+  "SplashPage-content": "alinea-SplashPage-content",
+  "SplashPageContent": "alinea-SplashPage-content",
   "SplashPage-actionIcon": "alinea-SplashPage-actionIcon",
   "SplashPageActionIcon": "alinea-SplashPage-actionIcon",
-  "SplashPage-entry": "alinea-SplashPage-entry",
-  "SplashPageEntry": "alinea-SplashPage-entry",
-  "SplashPage-user": "alinea-SplashPage-user",
-  "SplashPageUser": "alinea-SplashPage-user",
-  "SplashPage-appearance-label": "alinea-SplashPage-appearance-label",
-  "SplashPageAppearanceLabel": "alinea-SplashPage-appearance-label",
-  "SplashPage-card": "alinea-SplashPage-card",
-  "SplashPageCard": "alinea-SplashPage-card",
-  "SplashPage-card-footer": "alinea-SplashPage-card-footer",
-  "SplashPageCardFooter": "alinea-SplashPage-card-footer",
-  "SplashPage-root-menuIcon": "alinea-SplashPage-root-menuIcon",
-  "SplashPageRootMenuIcon": "alinea-SplashPage-root-menuIcon",
   "SplashPage-entries": "alinea-SplashPage-entries",
   "SplashPageEntries": "alinea-SplashPage-entries",
-  "SplashPage-content": "alinea-SplashPage-content",
-  "SplashPageContent": "alinea-SplashPage-content",
-  "SplashPage-card-header-label": "alinea-SplashPage-card-header-label",
-  "SplashPageCardHeaderLabel": "alinea-SplashPage-card-header-label",
   "SplashPage-entry-visual-icon": "alinea-SplashPage-entry-visual-icon",
   "SplashPageEntryVisualIcon": "alinea-SplashPage-entry-visual-icon",
-  "SplashPage-search-label": "alinea-SplashPage-search-label",
-  "SplashPageSearchLabel": "alinea-SplashPage-search-label",
-  "SplashPage-user-label": "alinea-SplashPage-user-label",
-  "SplashPageUserLabel": "alinea-SplashPage-user-label",
-  "SplashPage-sidebar-content": "alinea-SplashPage-sidebar-content",
-  "SplashPageSidebarContent": "alinea-SplashPage-sidebar-content",
+  "SplashPage": "alinea-SplashPage",
+  "SplashPage-card-header-label": "alinea-SplashPage-card-header-label",
+  "SplashPageCardHeaderLabel": "alinea-SplashPage-card-header-label",
+  "SplashPage-sidebar": "alinea-SplashPage-sidebar",
+  "SplashPageSidebar": "alinea-SplashPage-sidebar",
+  "SplashPage-card": "alinea-SplashPage-card",
+  "SplashPageCard": "alinea-SplashPage-card",
+  "SplashPage-card-footer": "alinea-SplashPage-card-footer",
+  "SplashPageCardFooter": "alinea-SplashPage-card-footer",
+  "SplashPage-entry-primary": "alinea-SplashPage-entry-primary",
+  "SplashPageEntryPrimary": "alinea-SplashPage-entry-primary",
+  "SplashPage-action": "alinea-SplashPage-action",
+  "SplashPageAction": "alinea-SplashPage-action",
   "SplashPage-entry-user": "alinea-SplashPage-entry-user",
   "SplashPageEntryUser": "alinea-SplashPage-entry-user",
-  "SplashPage-card-header-button": "alinea-SplashPage-card-header-button",
-  "SplashPageCardHeaderButton": "alinea-SplashPage-card-header-button",
+  "SplashPage-entry": "alinea-SplashPage-entry",
+  "SplashPageEntry": "alinea-SplashPage-entry",
   "SplashPage-grid": "alinea-SplashPage-grid",
   "SplashPageGrid": "alinea-SplashPage-grid",
-  "SplashPage-entry-meta": "alinea-SplashPage-entry-meta",
-  "SplashPageEntryMeta": "alinea-SplashPage-entry-meta",
+  "SplashPage-entry-title": "alinea-SplashPage-entry-title",
+  "SplashPageEntryTitle": "alinea-SplashPage-entry-title",
   "SplashPage-appearance": "alinea-SplashPage-appearance",
   "SplashPageAppearance": "alinea-SplashPage-appearance",
-  "SplashPage-card-header-content": "alinea-SplashPage-card-header-content",
-  "SplashPageCardHeaderContent": "alinea-SplashPage-card-header-content",
-  "SplashPage-entry-time": "alinea-SplashPage-entry-time",
-  "SplashPageEntryTime": "alinea-SplashPage-entry-time"
+  "SplashPage-entry-meta": "alinea-SplashPage-entry-meta",
+  "SplashPageEntryMeta": "alinea-SplashPage-entry-meta",
+  "SplashPage-sidebar-content": "alinea-SplashPage-sidebar-content",
+  "SplashPageSidebarContent": "alinea-SplashPage-sidebar-content"
 };
 
 // src/dashboard/app/pages/SplashPage.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var styles = styler(SplashPage_default);
 var recentEntryCount = 3;
-var recentCandidateWindowSize = recentEntryCount;
 var visibleRootCount = 2;
 var futureTimestampTolerance = 24 * 60 * 60 * 1e3;
-var relativeTimeFormatter = new Intl.RelativeTimeFormat(void 0, {
-  numeric: "auto",
-  style: "narrow"
-});
-var shortDateFormatter = new Intl.DateTimeFormat(void 0, {
-  day: "numeric",
-  month: "short"
-});
-var changedAtFormatter = new Intl.DateTimeFormat(void 0, {
-  dateStyle: "medium",
-  timeStyle: "short"
-});
+var recentEntriesAtom = dispense(
+  (key) => atom(async (get) => {
+    await get(shaAtom);
+    const graph = get(graphAtom);
+    const policy = get(policyAtom);
+    const workspace = get(workspaceAtom(key));
+    const readableRoots = Object.keys(workspace.roots).filter(
+      (root) => policy.canRead({ workspace: key, root })
+    );
+    if (!readableRoots.length) return [];
+    const everyRoot = readableRoots.length === Object.keys(workspace.roots).length;
+    const locales = Math.max(
+      1,
+      ...readableRoots.map(
+        (root) => getRoot(workspace.roots[root]).i18n?.locales.length ?? 1
+      )
+    );
+    const candidates = await Promise.all(
+      [
+        { orderBy: { desc: Entry.updatedAt } },
+        { orderBy: { desc: Entry.id }, filter: { _updatedAt: null } }
+      ].map(
+        (order) => graph.find({
+          ...order,
+          workspace: key,
+          root: everyRoot ? void 0 : { in: readableRoots },
+          status: "preferDraft",
+          take: recentEntryCount * locales,
+          select: recentEntrySelection
+        })
+      )
+    );
+    const readable = candidates.flat().filter((entry) => policy.canRead(entry));
+    const now = Date.now();
+    const trustsIdTimestamps = readable.every((entry) => {
+      const timestamp = timestampFromId(entry.id);
+      return timestamp === void 0 || timestamp <= now + futureTimestampTolerance;
+    });
+    const latest = /* @__PURE__ */ new Map();
+    for (const row of readable) {
+      const entry = toRecentEntry(row, trustsIdTimestamps, now);
+      if (!entry) continue;
+      const seen = latest.get(entry.id);
+      if (!seen || entry.changedAt > seen.changedAt) latest.set(entry.id, entry);
+    }
+    return Array.from(latest.values()).sort(
+      (a, b) => b.changedAt - a.changedAt || (a.id < b.id ? 1 : a.id > b.id ? -1 : 0)
+    ).slice(0, recentEntryCount);
+  })
+);
 async function splashPage(get) {
   const canManageMembers = await get(canManageMembersAtom);
-  await get(shaAtom);
-  const graph = get(graphAtom);
   const config = get(configAtom);
   const policy = get(policyAtom);
   const summaries = await Promise.all(
@@ -124,51 +166,17 @@ async function splashPage(get) {
       const roots = Object.entries(workspace.roots).flatMap(
         ([rootKey, root]) => {
           if (!policy.canRead({ workspace: key, root: rootKey })) return [];
-          const { icon, label } = getRoot(root);
-          return [{ icon: icon ?? LucideFile, key: rootKey, label }];
+          const { label } = getRoot(root);
+          const icon = get(rootAtoms(key, rootKey).icon);
+          return [{ icon, key: rootKey, label }];
         }
       );
-      const candidates = await Promise.all(
-        roots.flatMap(({ key: root }) => [
-          graph.find({
-            workspace: key,
-            root,
-            status: "preferDraft",
-            groupBy: Entry.id,
-            orderBy: { desc: Entry.updatedAt },
-            take: recentCandidateWindowSize,
-            select: recentEntrySelection
-          }),
-          graph.find({
-            workspace: key,
-            root,
-            status: "preferDraft",
-            groupBy: Entry.id,
-            orderBy: { desc: Entry.id, caseSensitive: true },
-            take: recentCandidateWindowSize,
-            select: recentEntrySelection
-          })
-        ])
-      );
-      const readableCandidates = candidates.flat().filter((entry) => policy.canRead(entry));
-      const now = Date.now();
-      const trustsIdTimestamps = readableCandidates.every((entry) => {
-        const timestamp = timestampFromId(entry.id);
-        return timestamp === void 0 || timestamp <= now + futureTimestampTolerance;
-      });
-      const recentEntries = Array.from(
-        new Map(
-          readableCandidates.map((entry) => [
-            entry.id,
-            toRecentEntry(entry, trustsIdTimestamps)
-          ])
-        ).values()
-      ).filter((entry) => Boolean(entry)).sort((a, b) => b.changedAt - a.changedAt).slice(0, recentEntryCount);
+      const recentEntries = await get(recentEntriesAtom(key));
       const entries = recentEntries.map((entry) => {
         const type = config.schema[entry.type];
         return {
           ...entry,
-          icon: type ? getType(type).icon ?? LucideFile : LucideFile
+          icon: isFileType(type) ? fileKindVisual(entry.extension).icon : type ? getType(type).icon ?? LucideFile : LucideFile
         };
       });
       return {
@@ -194,7 +202,9 @@ async function splashPage(get) {
   );
 }
 var recentEntrySelection = {
+  createdAt: Entry.createdAt,
   createdBy: Entry.createdBy,
+  extension: FileData.extension,
   id: Entry.id,
   locale: Entry.locale,
   root: Entry.root,
@@ -204,12 +214,36 @@ var recentEntrySelection = {
   updatedBy: Entry.updatedBy,
   workspace: Entry.workspace
 };
-function toRecentEntry(entry, trustsIdTimestamps) {
-  const changedAt = typeof entry.updatedAt === "number" ? entry.updatedAt * 1e3 : trustsIdTimestamps ? timestampFromId(entry.id) : void 0;
-  if (changedAt === void 0) return void 0;
-  const auditUser = entry.updatedBy ?? entry.createdBy;
-  const actor = auditUser?.name || auditUser?.email || void 0;
-  return { ...entry, actor, changedAt };
+function recentChange({
+  createdAt,
+  createdBy,
+  updatedAt,
+  updatedBy
+}) {
+  const created = typeof createdAt === "number";
+  if (typeof updatedAt === "number" && !(created && updatedAt <= createdAt))
+    return {
+      action: "Edited",
+      actor: auditName(updatedBy),
+      changedAt: updatedAt * 1e3
+    };
+  if (created)
+    return {
+      action: "Created",
+      actor: auditName(createdBy) ?? auditName(updatedBy),
+      changedAt: createdAt * 1e3
+    };
+  return { actor: auditName(updatedBy) ?? auditName(createdBy) };
+}
+function auditName(user) {
+  return user?.name || user?.email || void 0;
+}
+function toRecentEntry(entry, trustsIdTimestamps, now) {
+  const change = recentChange(entry);
+  const changedAt = change.changedAt ?? (trustsIdTimestamps ? timestampFromId(entry.id) : void 0);
+  if (changedAt === void 0 || changedAt > now + futureTimestampTolerance)
+    return void 0;
+  return { ...entry, ...change, changedAt };
 }
 function SplashPage({
   canManageMembers,
@@ -234,42 +268,27 @@ function SplashPage({
                 className: styles.SplashPage.actionIcon()
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: styles.SplashPage.user.label(), children: userName })
+            /* @__PURE__ */ jsx(Text, { weight: "medium", truncate: true, children: userName })
           ] }),
-          searchRoot && /* @__PURE__ */ jsx(GlobalSearch, { initialSearchScope: "everything", root: searchRoot, children: /* @__PURE__ */ jsxs(
+          searchRoot && /* @__PURE__ */ jsx(GlobalSearch, { initialSearchScope: "everything", root: searchRoot, children: /* @__PURE__ */ jsx(
             Button,
             {
-              appearance: "plain",
+              variant: "ghost",
+              icon: IcRoundSearch,
               className: styles.SplashPage.action(),
               "aria-label": "Search content",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon: IcRoundSearch,
-                    className: styles.SplashPage.actionIcon()
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: styles.SplashPage.search.label(), children: "Search content" })
-              ]
+              "aria-keyshortcuts": searchShortcutKeys,
+              children: /* @__PURE__ */ jsx(Text, { truncate: true, children: "Search content" })
             }
           ) }),
-          canManageMembers && /* @__PURE__ */ jsxs(
+          canManageMembers && /* @__PURE__ */ jsx(
             Button,
             {
-              appearance: "plain",
+              variant: "ghost",
+              icon: IcOutlineSettings,
               className: styles.SplashPage.action(),
-              onPress: () => setRoute({ page: "users" }),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon: IcOutlineSettings,
-                    className: styles.SplashPage.actionIcon()
-                  }
-                ),
-                "Manage users"
-              ]
+              onClick: () => setRoute({ page: "users" }),
+              children: "Manage users"
             }
           ),
           /* @__PURE__ */ jsxs(
@@ -278,7 +297,7 @@ function SplashPage({
               "aria-label": "Appearance",
               className: styles.SplashPage.appearance(),
               children: [
-                /* @__PURE__ */ jsx("span", { className: styles.SplashPage.appearance.label(), children: "Appearance" }),
+                /* @__PURE__ */ jsx(Text, { children: "Appearance" }),
                 /* @__PURE__ */ jsx(AppearanceToggle, {})
               ]
             }
@@ -302,61 +321,78 @@ function WorkspaceCard({ summary }) {
   }
   return /* @__PURE__ */ jsxs(Surface, { className: styles.SplashPage.card(), onClick: onCardClick, children: [
     /* @__PURE__ */ jsxs("header", { className: styles.SplashPage.card.header(), children: [
-      /* @__PURE__ */ jsx("h2", { className: styles.SplashPage.card.header.title(), children: /* @__PURE__ */ jsxs(
-        Button,
+      /* @__PURE__ */ jsx(
+        Heading,
         {
-          appearance: "plain",
-          className: styles.SplashPage.card.header.button(),
-          onPress: () => setRoute(openRoute),
-          children: [
-            /* @__PURE__ */ jsx(WorkspaceAvatar, { color: workspace.color, icon: workspace.icon }),
-            /* @__PURE__ */ jsx("span", { className: styles.SplashPage.card.header.content(), children: /* @__PURE__ */ jsx("span", { className: styles.SplashPage.card.header.label(), children: workspace.label }) })
-          ]
+          as: "h2",
+          size: "xs",
+          className: styles.SplashPage.card.header.title(),
+          children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              className: styles.SplashPage.card.header.button(),
+              onClick: () => setRoute(openRoute),
+              children: [
+                /* @__PURE__ */ jsx(WorkspaceAvatar, { color: workspace.color, icon: workspace.icon }),
+                /* @__PURE__ */ jsx("span", { className: styles.SplashPage.card.header.content(), children: /* @__PURE__ */ jsx("span", { className: styles.SplashPage.card.header.label(), children: workspace.label }) })
+              ]
+            }
+          )
         }
-      ) }),
+      ),
       /* @__PURE__ */ jsxs("div", { className: styles.SplashPage.card.footer(), children: [
         visibleRoots.map((root) => /* @__PURE__ */ jsx(
           Button,
           {
-            appearance: "plain",
+            variant: "ghost",
             className: styles.SplashPage.root(),
             icon: root.icon,
-            onPress: () => setRoute({ workspace: key, root: root.key }),
+            onClick: () => setRoute({ workspace: key, root: root.key }),
             children: root.label
           },
           root.key
         )),
-        remainingRoots.length > 0 && /* @__PURE__ */ jsx(
-          Menu,
-          {
-            "aria-label": `More roots in ${workspace.label}`,
-            onAction: (rootKey) => setRoute({ workspace: key, root: String(rootKey) }),
-            popoverProps: { placement: "bottom start" },
-            label: /* @__PURE__ */ jsxs(Button, { appearance: "plain", className: styles.SplashPage.root(), children: [
-              "+",
-              remainingRoots.length,
-              " more"
-            ] }),
-            children: remainingRoots.map((root) => /* @__PURE__ */ jsxs(MenuItem, { id: root.key, textValue: root.label, children: [
-              /* @__PURE__ */ jsx(
-                Icon,
+        remainingRoots.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsxs(
+            DropdownMenuTrigger,
+            {
+              variant: "ghost",
+              className: styles.SplashPage.root(),
+              children: [
+                "+",
+                remainingRoots.length,
+                " more"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownMenuContent,
+            {
+              "aria-label": `More roots in ${workspace.label}`,
+              side: "bottom",
+              align: "start",
+              children: remainingRoots.map((root) => /* @__PURE__ */ jsx(
+                DropdownMenuItem,
                 {
                   icon: root.icon,
-                  className: styles.SplashPage.root.menuIcon()
-                }
-              ),
-              root.label
-            ] }, root.key))
-          }
-        )
+                  textValue: root.label,
+                  onSelect: () => setRoute({ workspace: key, root: root.key }),
+                  children: root.label
+                },
+                root.key
+              ))
+            }
+          )
+        ] })
       ] })
     ] }),
     entries.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.SplashPage.entries(), children: entries.map((entry) => /* @__PURE__ */ jsx(
       Button,
       {
-        appearance: "plain",
+        variant: "ghost",
         className: styles.SplashPage.entry(),
-        onPress: () => setRoute({
+        onClick: () => setRoute({
           workspace: entry.workspace,
           root: entry.root,
           entry: entry.id,
@@ -375,17 +411,11 @@ function WorkspaceCard({ summary }) {
             /* @__PURE__ */ jsx("span", { className: styles.SplashPage.entry.title(), children: /* @__PURE__ */ jsx("span", { title: entry.title, children: entry.title }) })
           ] }),
           /* @__PURE__ */ jsxs("span", { className: styles.SplashPage.entry.meta(), children: [
-            entry.actor && /* @__PURE__ */ jsx("span", { className: styles.SplashPage.entry.user(), children: entry.actor }),
+            entry.action && /* @__PURE__ */ jsx("span", { children: entry.action }),
+            entry.action && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+            /* @__PURE__ */ jsx(Timestamp, { date: entry.changedAt, format: "relative" }),
             entry.actor && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
-            /* @__PURE__ */ jsx(
-              "time",
-              {
-                className: styles.SplashPage.entry.time(),
-                dateTime: new Date(entry.changedAt).toISOString(),
-                title: formatChangedAt(entry.changedAt),
-                children: formatRelativeTime(entry.changedAt)
-              }
-            )
+            entry.actor && /* @__PURE__ */ jsx("span", { className: styles.SplashPage.entry.user(), children: entry.actor })
           ] })
         ] })
       },
@@ -393,22 +423,7 @@ function WorkspaceCard({ summary }) {
     )) })
   ] });
 }
-function formatChangedAt(timestamp) {
-  return changedAtFormatter.format(timestamp);
-}
-function formatRelativeTime(timestamp) {
-  const seconds = Math.round((timestamp - Date.now()) / 1e3);
-  if (Math.abs(seconds) < 60)
-    return relativeTimeFormatter.format(seconds, "second");
-  const minutes = Math.round(seconds / 60);
-  if (Math.abs(minutes) < 60)
-    return relativeTimeFormatter.format(minutes, "minute");
-  const hours = Math.round(minutes / 60);
-  if (Math.abs(hours) < 24) return relativeTimeFormatter.format(hours, "hour");
-  const days = Math.round(hours / 24);
-  if (Math.abs(days) < 7) return relativeTimeFormatter.format(days, "day");
-  return shortDateFormatter.format(timestamp);
-}
 export {
+  recentChange,
   splashPage
 };

package/dist/dashboard/app/pages/UsersPage.d.ts

@@ -1,7 +1,26 @@
+import type { User, UserInput } from 'alinea/core/User';
 import { Page } from '../../atoms/nav.js';
+type UsersAction = {
+    type: 'create';
+    user: UserInput;
+} | {
+    type: 'update';
+    user: UserInput;
+} | {
+    type: 'remove';
+    email: string;
+};
+/** @internal */
+export declare const usersAtom: import("jotai").WritableAtom<Promise<never[] | User[]>, [action: UsersAction], Promise<void>>;
 export declare const usersPage: (page: Page, get: import("jotai").Getter) => import("react").ReactNode | Promise<import("react").ReactNode>;
-export declare function UsersPage(): import("react").JSX.Element;
+export interface UsersPageProps {
+    users: Array<User>;
+    /** Why the users could not be loaded */
+    error?: string;
+}
+export declare function UsersPage({ users, error }: UsersPageProps): import("react").JSX.Element;
 export interface UsersPageSidebarProps {
     page: Page;
 }
 export declare function UsersPageSidebar({ page }: UsersPageSidebarProps): import("react").JSX.Element;
+export {};