rimecms 0.32.1 → 1.0.0

package/dist/panel/pages/dashboard/DashboardCard.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { IconProps } from '@lucide/svelte';
+  import type { Component, Snippet } from 'svelte';
+
+  type Props = {
+    title: string;
+    icon?: Component<IconProps>;
+    /** How many documents the card stands for, after the title. */
+    count?: number | null;
+    description?: string | null;
+    actions?: Snippet;
+    children: Snippet;
+  };
+  const { title, icon: Icon, count, description, actions, children }: Props = $props();
+</script>
+
+<section class="rz-dashboard-card">
+  <header class="rz-dashboard-card__head">
+    <h2 class="rz-dashboard-card__title">
+      {#if Icon}
+        <Icon size={14} aria-hidden="true" />
+      {/if}
+      {title}
+      {#if typeof count === 'number'}
+        <span class="rz-dashboard-card__count">{count}</span>
+      {/if}
+    </h2>
+    {#if description}
+      <p class="rz-dashboard-card__description">{description}</p>
+    {/if}
+    {#if actions}
+      <div class="rz-dashboard-card__actions">
+        {@render actions()}
+      </div>
+    {/if}
+  </header>
+
+  {@render children()}
+</section>
+
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+.rz-dashboard-card {
+    container: rz-dashboard-card / inline-size;
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
+    border-radius: var(--rz-radius-lg);
+    overflow: hidden;
+  }
+
+  .rz-dashboard-card__head {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    min-height: calc(10.5 * var(--rz-unit));
+    padding: 0 var(--rz-size-1-5) 0 var(--rz-size-3-5);
+  }
+
+  .rz-dashboard-card__title {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--rz-size-2);
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+
+    :global(svg) {
+      color: var(--rz-fg-subtle);
+    }
+  }
+
+  .rz-dashboard-card__count {
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+    font-variant-numeric: tabular-nums;
+    font-variation-settings: 'wght' 400;
+    font-weight: 400;
+  }
+
+  .rz-dashboard-card__description {
+    min-width: 0;
+    color: var(--rz-fg-subtle);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .rz-dashboard-card__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-0-5);
+    margin-left: auto;
+  }
+</style>

package/dist/panel/pages/dashboard/DashboardCard.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { IconProps } from '@lucide/svelte';
+import type { Component, Snippet } from 'svelte';
+type Props = {
+    title: string;
+    icon?: Component<IconProps>;
+    /** How many documents the card stands for, after the title. */
+    count?: number | null;
+    description?: string | null;
+    actions?: Snippet;
+    children: Snippet;
+};
+declare const DashboardCard: Component<Props, {}, "">;
+type DashboardCard = ReturnType<typeof DashboardCard>;
+export default DashboardCard;

package/dist/panel/pages/dashboard/DashboardCollection.svelte

@@ -1,91 +1,214 @@
 <script lang="ts">
+  import type { ResolvedPathname } from '$app/types';
+  import { PARAMS } from '../../../core/constants.js';
   import { t__ } from '../../../core/i18n/index.js';
-  import Empty from '../../components/sections/collection/Empty.svelte';
+  import { UPLOAD_PATH } from '../../../core/prototype/collection/upload/constant.js';
+  import type { GenericDoc } from '../../../core/prototype/types.js';
+  import { apiUrl, panelPath } from '../../../core/routes/util.js';
+  import Avatar from '../../components/sections/collection/Avatar.svelte';
+  import DocStatus from '../../components/sections/collection/DocStatus.svelte';
+  import When from '../../components/sections/collection/When.svelte';
+  import BulkUploadDialog from '../../components/sections/collection/bulk-upload/BulkUploadDialog.svelte';
   import GridItem from '../../components/sections/collection/grid/grid-item/GridItem.svelte';
   import ButtonCreate from '../../components/sections/collection/header/ButtonCreate.svelte';
-  import Row from '../../components/sections/collection/list/row/Row.svelte';
   import Button from '../../components/ui/button/button.svelte';
   import { getConfigContext } from '../../context/config.svelte.js';
-  import { ChevronRight } from '@lucide/svelte';
-
+  import { capitalize } from '../../../util/string.js';
+  import { ChevronRight, Upload } from '@lucide/svelte';
+  import DashboardCard from './DashboardCard.svelte';
+  import DashboardRow from './DashboardRow.svelte';
   import type { DashboardEntry } from './types.js';
 
-  type Props = { entry: DashboardEntry & { prototype: 'collection' } };
-  const { entry }: Props = $props();
+  type Props = { entry: DashboardEntry & { prototype: 'collection' }; now: Date };
+  const { entry, now }: Props = $props();
 
   const config = getConfigContext();
   const collectionConfig = $derived(config.getCollection(entry.slug));
+  const docs = $derived(entry.lastEdited ?? []);
+  const hasDrafts = $derived(!!collectionConfig.versions?.draft);
+  const isUpload = $derived(!!collectionConfig.upload);
+  // The people of an auth collection show as avatars, their role after their name.
+  const isPeople = $derived(!!collectionConfig.auth);
+  let uploadOpen = $state(false);
+
+  // /panel/pages/create, and /panel/medias/create?uploadPath=root for an upload collection
+  const createHref = $derived.by((): ResolvedPathname => {
+    const createPath = panelPath(collectionConfig.kebab, 'create');
+    if (!isUpload) return createPath;
+    return `${createPath}?${PARAMS.UPLOAD_PATH}=${UPLOAD_PATH.ROOT_NAME}` as ResolvedPathname;
+  });
+
+  // The files uploaded from the dashboard land in the root folder.
+  const uploadTarget = $derived({
+    url: apiUrl(collectionConfig.kebab),
+    path: UPLOAD_PATH.ROOT_NAME,
+    accept: collectionConfig.upload?.accept
+  });
+
+  const nameOf = (doc: GenericDoc): string => doc.name || doc.title || '[untitled]';
+
+  // ['editor'] -> 'Editor'
+  const roleOf = (doc: GenericDoc): string =>
+    Array.isArray(doc.roles) && typeof doc.roles[0] === 'string' ? capitalize(doc.roles[0]) : '';
 </script>
 
-<section>
-  <header>
-    <div>
-      <h2>{entry.title}</h2>
+<DashboardCard
+  title={entry.title}
+  icon={config.raw.icons[entry.slug]}
+  count={entry.count}
+  description={entry.description}
+>
+  {#snippet actions()}
+    {#if entry.canCreate && isUpload}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        class="rz-dashboard-collection__upload"
+        icon={Upload}
+        aria-label={t__('common.collection_upload')}
+        title={t__('common.collection_upload')}
+        onclick={() => (uploadOpen = true)}
+      />
+    {:else if entry.canCreate}
+      <ButtonCreate config={collectionConfig} size="sm" />
+    {/if}
+    <a class="rz-dashboard-collection__more" href={entry.link}>
+      {t__('common.view_all')}<span class="rz-sr-only"> {entry.title}</span>
+      <ChevronRight size={12} aria-hidden="true" />
+    </a>
+  {/snippet}
+
+  {#if docs.length === 0}
+    <p class="rz-dashboard-collection__empty">
+      {collectionConfig.label.none || t__('common.no_documents_yet', entry.title)}
       {#if entry.canCreate}
-        <ButtonCreate config={collectionConfig} size="sm" />
+        <a href={createHref}>{t__('common.create_first_one')}</a>
       {/if}
-      <p>{entry.description}</p>
+    </p>
+  {:else if entry.layout === 'grid'}
+    <div class="rz-dashboard-collection__grid">
+      {#each docs as doc (doc.id)}
+        <GridItem isSelectMode={false} config={collectionConfig} {doc} checked={false} />
+      {/each}
     </div>
-    <Button variant="text" href={entry.link}>
-      {t__('common.view_all')}
-      <ChevronRight size={12} />
-    </Button>
-  </header>
-  {#if entry.lastEdited?.length === 0}
-    <Empty config={collectionConfig} />
   {:else}
-    <div class="rz-dashboard-collection__list rz-dashboard-collection__list--{entry.layout}">
-      {#each entry.lastEdited as doc, index (index)}
-        {#if entry.layout === 'grid'}
-          <GridItem isSelectMode={false} config={collectionConfig} {doc} checked={false} />
+    <ul class="rz-dashboard-collection__rows">
+      {#each docs as doc (doc.id)}
+        {#if isPeople}
+          <DashboardRow href={panelPath(collectionConfig.kebab, doc.id)} title={nameOf(doc)}>
+            {#snippet lead()}
+              <Avatar name={nameOf(doc)} />
+            {/snippet}
+            {#if roleOf(doc)}
+              <span class="rz-dashboard-collection__role">{roleOf(doc)}</span>
+            {/if}
+          </DashboardRow>
         {:else}
-          <Row isSelectMode={false} config={collectionConfig} {doc} checked={false} />
+          <DashboardRow
+            href={panelPath(collectionConfig.kebab, doc.id)}
+            title={doc.title || '[untitled]'}
+          >
+            {#if hasDrafts && doc.status}
+              <DocStatus status={doc.status} />
+            {/if}
+            {#if doc.updatedAt}
+              <When date={doc.updatedAt} {now} />
+            {/if}
+          </DashboardRow>
         {/if}
       {/each}
-    </div>
+    </ul>
   {/if}
-</section>
+</DashboardCard>
+
+{#if entry.canCreate && isUpload}
+  <BulkUploadDialog target={uploadTarget} bind:open={uploadOpen} />
+{/if}
+
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
 
-<style>header {
-    display: flex;
-    gap: var(--rz-size-2);
+/* An input with an error. */
+/* A plain upload arrow, subtle until hovered, like the plus of the other cards. */
+  :global(.rz-button.rz-dashboard-collection__upload) {
+    width: var(--rz-size-7);
+    height: var(--rz-size-7);
+    border-radius: var(--rz-radius-md);
+    color: var(--rz-fg-subtle);
+
+    &:hover {
+      color: var(--rz-fg);
+    }
+  }
+
+  .rz-dashboard-collection__more {
+    display: inline-flex;
     align-items: center;
-    justify-content: space-between;
-    margin-bottom: var(--rz-size-2);
-    > div {
-      display: flex;
-      gap: var(--rz-size-2);
-      align-items: center;
+    gap: var(--rz-size-0-5);
+    height: var(--rz-size-7);
+    padding: 0 var(--rz-size-1-5) 0 var(--rz-size-2);
+    border-radius: var(--rz-radius-sm);
+    color: var(--rz-fg-muted);
+    font-size: var(--rz-text-sm);
+    white-space: nowrap;
+
+    &:hover {
+      background-color: var(--rz-bg-hover);
+      color: var(--rz-fg);
     }
-    p {
-      opacity: 0.5;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
+
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
     }
   }
-  h2 {
-    font-weight: 600;
-    font-size: var(--rz-size-4);
+
+  .rz-dashboard-collection__empty {
+    padding: var(--rz-size-3) var(--rz-size-3-5) var(--rz-size-3-5);
+    box-shadow: inset 0 1px 0 var(--rz-border);
+    color: var(--rz-fg-subtle);
+
+    a {
+      color: var(--rz-accent-text);
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--rz-accent-border);
+        outline-offset: 2px;
+      }
+    }
   }
 
-  .rz-dashboard-collection__list {
+  .rz-dashboard-collection__grid {
     display: grid;
-    gap: var(--rz-size-2);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--rz-size-3);
+    padding: var(--rz-size-0-5) var(--rz-size-3-5) var(--rz-size-3-5);
   }
 
-  .rz-dashboard-collection__list--grid {
-    --columns: 1;
-    grid-template-columns: repeat(var(--columns), minmax(150px, 1fr));
-    @media (min-width: 640px) {
-      --columns: 2;
-    }
-    @media (min-width: 1024px) {
-      --columns: 3;
-    }
-    @media (min-width: 1280px) {
-      --columns: 4;
+  @container rz-dashboard-card (min-width: 30rem) {
+    .rz-dashboard-collection__grid {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+
+  .rz-dashboard-collection__role {
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+    white-space: nowrap;
+  }
 </style>

package/dist/panel/pages/dashboard/DashboardCollection.svelte.d.ts

@@ -3,6 +3,7 @@ type Props = {
     entry: DashboardEntry & {
         prototype: 'collection';
     };
+    now: Date;
 };
 declare const DashboardCollection: import("svelte").Component<Props, {}, "">;
 type DashboardCollection = ReturnType<typeof DashboardCollection>;

package/dist/panel/pages/dashboard/DashboardRow.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { ResolvedPathname } from '$app/types';
+  import type { IconProps } from '@lucide/svelte';
+  import type { Component, Snippet } from 'svelte';
+
+  type Props = {
+    href: ResolvedPathname;
+    title: string;
+    icon?: Component<IconProps>;
+    /** Before the title, in place of an icon: an avatar. */
+    lead?: Snippet;
+    description?: string | null;
+    /** After the title: a status, a role, a date. */
+    children?: Snippet;
+  };
+  const { href, title, icon: Icon, lead, description, children }: Props = $props();
+</script>
+
+<li>
+  <a class="rz-dashboard-row" {href}>
+    {#if lead}
+      {@render lead()}
+    {:else if Icon}
+      <Icon size={14} aria-hidden="true" />
+    {/if}
+    <span class="rz-dashboard-row__text">
+      <span class="rz-dashboard-row__title">{title}</span>
+      {#if description}
+        <span class="rz-dashboard-row__description">{description}</span>
+      {/if}
+    </span>
+    {@render children?.()}
+  </a>
+</li>
+
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+.rz-dashboard-row {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2-5);
+    min-height: calc(9.5 * var(--rz-unit));
+    padding: var(--rz-size-1-5) var(--rz-size-3-5);
+    box-shadow: inset 0 1px 0 var(--rz-border);
+
+    &:hover {
+      background-color: var(--rz-bg-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow:
+        inset 0 1px 0 var(--rz-border),
+        inset 0 0 0 2px var(--rz-accent-border);
+    }
+
+    > :global(svg) {
+      flex-shrink: 0;
+      color: var(--rz-fg-subtle);
+    }
+  }
+
+  .rz-dashboard-row__text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .rz-dashboard-row__title,
+  .rz-dashboard-row__description {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .rz-dashboard-row__description {
+    color: var(--rz-fg-subtle);
+  }
+</style>

package/dist/panel/pages/dashboard/DashboardRow.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ResolvedPathname } from '$app/types';
+import type { IconProps } from '@lucide/svelte';
+import type { Component, Snippet } from 'svelte';
+type Props = {
+    href: ResolvedPathname;
+    title: string;
+    icon?: Component<IconProps>;
+    /** Before the title, in place of an icon: an avatar. */
+    lead?: Snippet;
+    description?: string | null;
+    /** After the title: a status, a role, a date. */
+    children?: Snippet;
+};
+declare const DashboardRow: Component<Props, {}, "">;
+type DashboardRow = ReturnType<typeof DashboardRow>;
+export default DashboardRow;

package/dist/panel/pages/dashboard/load.server.js

@@ -1,3 +1,4 @@
+import { VERSIONS_STATUS } from '../../../core/prototype/shared/versions/constant.js';
 import { capitalize } from '../../../util/string.js';
 export const dashboardLoad = async (event) => {
     const { locale, user, rime } = event.locals;
@@ -8,20 +9,17 @@ export const dashboardLoad = async (event) => {
      * `panel !== false` is already filtered below, so `c.panel` here is either what the author wrote
      * or nothing at all. Layout precedence, widest to narrowest: what the author put on the
      * collection, then what a feature offered through `_dashboardLayout` (`upload` asks for a grid),
-     * then rows.
-     *
-     * The collection prototype used to seed all of this in an `configurePanel`, which meant `panel`
-     * was always an object by the time it got here — so `panel: false` never survived to be read,
-     * and these defaults ran twice.
+     * then rows. The author's `maxEntries` wins, else 3 rows or 4 grid items.
      */
     const normalizedPanelConfig = (c) => {
         const incomingConfig = c.panel || {};
         const incomingDashboardConfig = incomingConfig.dashboard || {};
+        const layout = incomingDashboardConfig.layout ?? c._dashboardLayout ?? 'rows';
         return {
             ...incomingConfig,
             dashboard: {
-                layout: incomingDashboardConfig.layout ?? c._dashboardLayout ?? 'rows',
-                maxEntries: incomingDashboardConfig.maxEntries || 8
+                layout,
+                maxEntries: incomingDashboardConfig.maxEntries || (layout === 'grid' ? 4 : 3)
             }
         };
     };
@@ -38,7 +36,7 @@ export const dashboardLoad = async (event) => {
             layout: panelConfig.dashboard.layout
         };
     };
-    const getLastEdited = async (c, limit = 8) => {
+    const getLastEdited = async (c, limit) => {
         try {
             return await rime.collection(c.slug).find({
                 limit,
@@ -52,15 +50,42 @@ export const dashboardLoad = async (event) => {
             return [];
         }
     };
+    /** How many documents a collection holds, and how many of them wait as drafts. */
+    const countDocuments = async (c) => {
+        try {
+            const docs = await rime.collection(c.slug).find({ locale, latest: true, select: ['status'] });
+            const drafts = c.versions?.draft
+                ? docs.filter((doc) => doc.status === VERSIONS_STATUS.DRAFT).length
+                : 0;
+            return { count: docs.length, drafts };
+        }
+        catch (err) {
+            console.error(`Error counting documents of collection ${c.slug}:`);
+            console.error(err);
+            return { count: null, drafts: 0 };
+        }
+    };
     const promiseEntries = rime.config.raw.collections
         .filter((collection) => user && collection.access.read(user, {}))
         .filter((collection) => collection.panel !== false && collection.panel?.dashboard !== false)
-        // No `if (collection.panel)` branch: the filter above has already dropped the collections that
-        // switched the panel or the dashboard off, so everything reaching here wants its documents
-        // listed. The branch existed because `configurePanel` made `panel` unconditionally truthy, which
-        // made its `else` unreachable — take the augment away and it would have started silently
-        // emptying every collection that authored no `panel` at all.
-        .map(async (collection) => getLastEdited(collection, normalizedPanelConfig(collection).dashboard.maxEntries).then((docs) => ({ ...buildBaseEntry(collection), lastEdited: docs })));
+        // Every collection left wants its latest documents listed, and counted.
+        .map(async (collection) => {
+        const [docs, counts] = await Promise.all([
+            getLastEdited(collection, normalizedPanelConfig(collection).dashboard.maxEntries),
+            countDocuments(collection)
+        ]);
+        return { ...buildBaseEntry(collection), lastEdited: docs, ...counts };
+    });
+    /** When an area was last saved, or `null` when it cannot say. */
+    const lastUpdate = async (slug) => {
+        try {
+            const doc = await rime.area(slug).find({ locale, latest: true, select: ['updatedAt'] });
+            return doc?.updatedAt ?? null;
+        }
+        catch {
+            return null;
+        }
+    };
     try {
         const collectionEntries = await Promise.all(promiseEntries);
         entries.push(...collectionEntries);
@@ -69,17 +94,16 @@ export const dashboardLoad = async (event) => {
         console.error('Error retrieving collection entries:');
         console.error(err);
     }
-    for (const area of rime.config.raw.areas.filter((a) => a.panel !== false)) {
-        if (user && area.access.read(user, {})) {
-            entries.push({
-                prototype: 'area',
-                description: (area.panel && area.panel?.description) || null,
-                slug: area.slug,
-                link: rime.routes.panelUrl(area.kebab),
-                title: area.label || capitalize(area.slug)
-            });
-        }
-    }
+    const areas = rime.config.raw.areas.filter((area) => area.panel !== false && user && area.access.read(user, {}));
+    const areaEntries = await Promise.all(areas.map(async (area) => ({
+        prototype: 'area',
+        description: (area.panel && area.panel?.description) || null,
+        slug: area.slug,
+        link: rime.routes.panelUrl(area.kebab),
+        title: area.label || capitalize(area.slug),
+        updatedAt: await lastUpdate(area.slug)
+    })));
+    entries.push(...areaEntries);
     const aria = [{ title: 'Dashboard', icon: 'dashboard', url: rime.routes.panelUrl() }];
     return { entries, aria };
 };

package/dist/panel/pages/dashboard/time.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The greeting key for an hour of the day.
+ *
+ * ```ts
+ * greetingKey(9)   // 'common.good_morning'    5 to 11
+ * greetingKey(15)  // 'common.good_afternoon'  12 to 17
+ * greetingKey(22)  // 'common.good_evening'    18 to 4
+ * ```
+ */
+export declare function greetingKey(hour: number): "common.good_morning" | "common.good_afternoon" | "common.good_evening";
+/**
+ * The day, spelled out, capitalized.
+ *
+ * ```ts
+ * formatDay(now, 'en')  // 'Saturday, September 26'
+ * formatDay(now, 'fr')  // 'Samedi 26 septembre'
+ * ```
+ */
+export declare function formatDay(date: Date, lang: string): string;