rimecms 0.32.1 → 1.0.0

package/dist/panel/components/sections/collection/tree/CollectionTreeNode.svelte

@@ -1,66 +1,162 @@
 <script lang="ts">
+  import { t__ } from '../../../../../core/i18n/index.js';
   import type { GenericDoc } from '../../../../../core/prototype/types.js';
   import { panelUrl } from '../../../../../core/routes/util.js';
   import type { CollectionContext } from '../../../../context/collection.svelte.js';
-  import { GripVertical } from '@lucide/svelte';
-  import StatusDot from '../StatusDot.svelte';
+  import { ChevronDown, ChevronRight, GripVertical } from '@lucide/svelte';
+  import Avatar from '../Avatar.svelte';
+  import DocStatus from '../DocStatus.svelte';
+  import When from '../When.svelte';
   import CollectionTreeNode from './CollectionTreeNode.svelte';
-  import { countRows } from './util';
 
-  type Props = { parentId: string; doc: GenericDoc; collection: CollectionContext };
-  const { parentId, doc, collection }: Props = $props();
+  type Props = {
+    parentId: string;
+    doc: GenericDoc;
+    collection: CollectionContext;
+    /** How deep the node sits: 0 at the root. */
+    depth?: number;
+  };
+  const { parentId, doc, collection, depth = 0 }: Props = $props();
+
+  const children = $derived<GenericDoc[]>(doc._children ?? []);
+  const author = $derived<string>(doc.updatedBy?.name ?? '');
+  // "Anthony Ivol" -> "Anthony"
+  const firstName = $derived(author.split(/\s+/)[0]);
+
+  /** The browser keeps the folded ones: `rz-tree-folded:<id>` is set while one is folded. */
+  const FOLDED_KEY = 'rz-tree-folded:';
+  let folded = $state(false);
+
+  $effect(() => {
+    folded = localStorage.getItem(FOLDED_KEY + doc.id) === '1';
+  });
+
+  function toggleFolded() {
+    folded = !folded;
+    if (folded) localStorage.setItem(FOLDED_KEY + doc.id, '1');
+    else localStorage.removeItem(FOLDED_KEY + doc.id);
+  }
 </script>
 
 {#key `${parentId}-${doc.id}-${doc._position}`}
+  <!-- A row, then the list of its children: the depth is the list's, so a dragged row takes the depth of the list it is over. -->
   <div data-parent={parentId} data-id={doc.id} class="rz-collection-node">
-    <a href={panelUrl(doc._type, doc.id)} class="rz-collection-node__row">
-      <div class="rz-collection-node__grip"><GripVertical size="12" /></div>
-      <div>
-        {doc.title}
-      </div>
-      {#if collection.hasDraft}
-        <StatusDot --rz-dot-size="0.3rem" status={doc.status} />
+    <div class="rz-tree-row rz-collection-node__row">
+      <span class="rz-tree-row__grip rz-collection-node__grip" aria-hidden="true">
+        <GripVertical size={12} />
+      </span>
+
+      <!-- Only a page with children has one: the others start their title there. -->
+      {#if children.length}
+        <button
+          type="button"
+          class="rz-tree-row__fold rz-collection-node__fold"
+          aria-expanded={!folded}
+          aria-label={folded ? t__('fields.unfold') : t__('fields.fold')}
+          onclick={toggleFolded}
+        >
+          {#if folded}<ChevronRight size={14} />{:else}<ChevronDown size={14} />{/if}
+        </button>
+      {/if}
+
+      <!-- The title covers the whole row: a click anywhere but the grip and the chevron opens it. -->
+      <a href={panelUrl(doc._type, doc.id)} class="rz-tree-row__title rz-collection-node__title">
+        {doc.title || '[untitled]'}
+      </a>
+
+      {#if folded && children.length}
+        <span class="rz-tree-row__count">{children.length}</span>
       {/if}
-    </a>
+
+      <span class="rz-collection-node__cells">
+        {#if collection.hasDraft}
+          <span class="rz-collection-node__cell" data-column="status">
+            {#if doc.status}<DocStatus status={doc.status} />{/if}
+          </span>
+        {/if}
+        <span class="rz-collection-node__cell" data-column="author" title={author}>
+          {#if author}
+            <Avatar size="xs" name={author} />
+            <span class="rz-collection-node__author">{firstName}</span>
+          {/if}
+        </span>
+        <span class="rz-collection-node__cell" data-column="date">
+          {#if doc.updatedAt}<When date={doc.updatedAt} />{/if}
+        </span>
+      </span>
+    </div>
+
     <div
-      class="rz-collection-sortable"
-      style="--data-rows-count:{countRows(doc._children)}"
+      class="rz-collection-sortable rz-tree-rows"
       data-id={doc.id}
+      style:--rz-tree-depth={depth + 1}
+      hidden={folded}
     >
-      {#if doc._children && doc._children.length > 0}
-        {#each doc._children as child (child.id)}
-          <CollectionTreeNode {collection} doc={child} parentId={doc.id} />
-        {/each}
-      {/if}
+      {#each children as child (child.id)}
+        <CollectionTreeNode {collection} doc={child} parentId={doc.id} depth={depth + 1} />
+      {/each}
     </div>
   </div>
 {/key}
 
-<style>
-  .rz-collection-node__grip {
-    cursor: grab;
-  }
-  .rz-collection-node__row {
-    background-color: hsl(var(--rz-row-bg));
-    display: flex;
-    border: var(--rz-border);
-    border-radius: var(--rz-radius-lg);
-    height: var(--rz-row-height);
-    align-items: center;
+<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-collection-node__row {
     gap: var(--rz-size-2);
-    padding: 0 1rem;
-    justify-self: self-start;
-    width: 100%;
+  }
+
+  /* Above the title's cover, so they keep their own clicks. */
+  .rz-collection-node__grip,
+  .rz-collection-node__fold {
+    z-index: 1;
+  }
+
+  .rz-collection-node__fold {
     position: relative;
   }
-  .rz-collection-node:not([data-parent='root']) .rz-collection-node__row::before {
-    content: '';
-    border-top: var(--rz-border);
-    translate: calc(-1 * var(--rz-size-6)) calc(var(--half-h) - 1px);
-    position: absolute;
-    top: 0;
-    bottom: var(--half-h);
-    left: 0;
-    width: var(--rz-size-6);
+
+  .rz-collection-node__title {
+    font-size: var(--rz-text-md);
+    color: var(--rz-fg);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+    &:focus-visible::after {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+      outline-offset: -2px;
+    }
+  }
+
+  /* The columns on the right, the widths of the list's. */
+  .rz-collection-node__cells {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--rz-size-3);
+    margin-left: auto;
+    padding-left: var(--rz-size-3);
+    color: var(--rz-fg-muted);
+    font-size: var(--rz-text-md);
   }
 </style>

package/dist/panel/components/sections/collection/tree/CollectionTreeNode.svelte.d.ts

@@ -5,6 +5,8 @@ type Props = {
     parentId: string;
     doc: GenericDoc;
     collection: CollectionContext;
+    /** How deep the node sits: 0 at the root. */
+    depth?: number;
 };
 declare const CollectionTreeNode: import("svelte").Component<Props, {}, "">;
 type CollectionTreeNode = ReturnType<typeof CollectionTreeNode>;

package/dist/panel/components/sections/collection/upload-thumb-cell/UploadThumbCell.svelte

@@ -42,7 +42,7 @@
 
 <style>
   :root {
-    --rz-upload-preview-cell-bg: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-0)));
+    --rz-upload-preview-cell-bg: var(--rz-bg-well);
     --rz-upload-preview-cell-fit: contain;
   }
 

package/dist/panel/components/sections/commands/CommandButton.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { t__ } from '../../../../core/i18n/index.js';
+  import { getCommandsContext } from '../../../context/commands.svelte.js';
+  import { Search } from '@lucide/svelte';
+  import Button from '../../ui/button/button.svelte';
+  import Kbd from '../../ui/kbd/Kbd.svelte';
+
+  /**
+   * `kbd` is the key alone; `input` is the key in something that looks like a search box;
+   * `icon` is the search box folded to its magnifier.
+   */
+  type Props = { variant?: 'kbd' | 'input' | 'icon' };
+  const { variant = 'kbd' }: Props = $props();
+
+  const commands = getCommandsContext();
+</script>
+
+<!-- The key, and a way in for whoever does not know it. -->
+{#if variant === 'input' || variant === 'icon'}
+  <button
+    type="button"
+    class="rz-cmdk-input"
+    class:rz-cmdk-input--icon={variant === 'icon'}
+    aria-label={t__('common.commands')}
+    onclick={() => commands?.palette.show()}
+  >
+    <Search size="15" />
+    {#if variant === 'input'}
+      <span class="rz-cmdk-input__label">{t__('common.type_a_command')}</span>
+      <Kbd keys="mod+k" />
+    {/if}
+  </button>
+{:else}
+  <Button
+    class="rz-cmdk"
+    aria-label={t__('common.commands')}
+    variant="ghost"
+    size="sm"
+    onclick={() => commands?.palette.show()}
+  >
+    <Kbd keys="mod+k" plain />
+  </Button>
+{/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. */
+
+/* An input with an error. */
+.rz-cmdk-input {
+    background-color: var(--rz-bg-well);
+    border: 1px solid var(--rz-border);
+    &:hover {
+    border-color: var(--rz-border-strong);
+  }
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-2);
+    width: 100%;
+    height: var(--rz-size-8);
+    padding: 0 var(--rz-size-1-5) 0 var(--rz-size-2-5);
+    border-radius: var(--rz-radius-lg);
+    color: var(--rz-fg-subtle);
+    text-align: left;
+    transition: color 0.15s;
+
+    &:hover {
+      color: var(--rz-fg-muted);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+  }
+
+  .rz-cmdk-input--icon {
+    justify-content: center;
+    width: var(--rz-size-8);
+    padding: 0;
+  }
+
+  .rz-cmdk-input__label {
+    flex: 1;
+    overflow: hidden;
+    font-size: var(--rz-text-md);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/dist/panel/components/sections/commands/CommandButton.svelte.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `kbd` is the key alone; `input` is the key in something that looks like a search box;
+ * `icon` is the search box folded to its magnifier.
+ */
+type Props = {
+    variant?: 'kbd' | 'input' | 'icon';
+};
+declare const CommandButton: import("svelte").Component<Props, {}, "">;
+type CommandButton = ReturnType<typeof CommandButton>;
+export default CommandButton;

package/dist/panel/components/sections/commands/CommandPalette.svelte

@@ -0,0 +1,275 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import type { ResolvedPathname } from '$app/types';
+  import { PARAMS } from '../../../../core/constants.js';
+  import { t__ } from '../../../../core/i18n/index.js';
+  import { apiUrl, panelPath } from '../../../../core/routes/util.js';
+  import * as Command from '../../ui/command/index.js';
+  import {
+    getCommandsContext,
+    useCommands,
+    type Command as CommandType
+  } from '../../../context/commands.svelte.js';
+  import { getConfigContext } from '../../../context/config.svelte.js';
+  import { getUserContext } from '../../../context/user.svelte.js';
+  import type { Route } from '../../../types.js';
+  import Kbd from '../../ui/kbd/Kbd.svelte';
+  import type { IconProps } from '@lucide/svelte';
+  import { computeCommandScore } from 'bits-ui';
+  import type { Component } from 'svelte';
+
+  type Props = { routes?: Record<string, Route[]> };
+  const { routes = {} }: Props = $props();
+
+  /** One line of the palette: a command, or a document the search found. */
+  type Line = {
+    id: string;
+    label: string;
+    group: string;
+    icon?: Component<IconProps>;
+    keys?: string;
+    run: () => unknown;
+  };
+
+  const commands = getCommandsContext()!;
+  const config = getConfigContext();
+  const user = getUserContext();
+
+  const pages = $derived(Object.values(routes).flat());
+
+  /** A route's icon is the slug of the collection it opens; the documents search goes there. */
+  const collections = $derived(
+    pages.flatMap((route) => {
+      const collection = config.raw.collections.find((c) => c.slug === route.icon);
+      return collection ? [collection] : [];
+    })
+  );
+
+  const createPath = (collection: (typeof collections)[number]) => {
+    const path = panelPath(collection.kebab, 'create');
+    return collection.upload ? (`${path}?${PARAMS.UPLOAD_PATH}=root` as ResolvedPathname) : path;
+  };
+
+  /**
+   * The outermost scope, so its lines come last: ⌘K, then what the panel offers wherever the
+   * user is, create a document, go to a collection or an area.
+   */
+  useCommands(
+    () => [
+      {
+        id: 'palette',
+        label: t__('common.commands'),
+        keys: 'mod+k',
+        inField: true,
+        hidden: true,
+        run: () => commands.palette.toggle()
+      },
+      ...collections
+        .filter((collection) => collection.access.create(user.attributes, {}))
+        .map((collection) => ({
+          id: `create.${collection.slug}`,
+          label: collection.label.create || t__('common.create_new', collection.label.singular),
+          group: t__('common.create'),
+          icon: config.raw.icons[collection.slug],
+          run: () => goto(createPath(collection))
+        })),
+      ...pages.map((route) => ({
+        id: `go_to.${route.url}`,
+        label: route.title,
+        group: t__('common.go_to'),
+        icon: config.raw.icons[route.icon],
+        run: () => goto(route.url as ResolvedPathname)
+      }))
+    ],
+    { depth: 0 }
+  );
+
+  const toLine = (command: CommandType): Line => ({
+    id: command.id,
+    label: command.label,
+    group: command.group ?? '',
+    icon: command.icon,
+    keys: command.keys,
+    run: () => command.run()
+  });
+
+  const commandLines = $derived(
+    commands.palette.commands
+      .filter((command) => !commands.palette.group || command.group === commands.palette.group)
+      .map(toLine)
+  );
+
+  /* ------------------------------------------------------------- search */
+
+  /** What the query names, in the order the lines came: the page's own first. */
+  const matching = (lines: Line[], query: string) =>
+    query ? lines.filter((line) => computeCommandScore(line.label, query) > 0) : lines;
+
+  /** The documents whose title says the query, five per collection the user can open. */
+  async function searchDocuments(query: string): Promise<Line[]> {
+    const found = await Promise.all(
+      collections.map(async (collection) => {
+        const where = `where[${collection.asTitle}][like]=${encodeURIComponent(`%${query}%`)}`;
+        const url = `${apiUrl(collection.kebab)}?${where}&select=${collection.asTitle}&limit=5`;
+        const response = await fetch(url).catch(() => null);
+        if (!response?.ok) return [];
+        const { docs } = (await response.json()) as { docs: Record<string, unknown>[] };
+        return docs.map((doc) => ({
+          id: `${collection.slug}/${doc.id}`,
+          label: String(doc[collection.asTitle] ?? doc.id),
+          group: collection.label.plural,
+          icon: config.raw.icons[collection.slug],
+          run: () => goto(panelPath(collection.kebab, String(doc.id)))
+        }));
+      })
+    );
+    return found
+      .flat()
+      .map((line) => ({ line, score: computeCommandScore(line.label, query) }))
+      .sort((a, b) => b.score - a.score)
+      .map((scored) => scored.line);
+  }
+
+  let found = $state.raw<Line[]>([]);
+
+  $effect(() => {
+    if (!commands.palette.open) return;
+    const query = commands.palette.query.trim();
+    found = [];
+    if (query.length < 2) return;
+    let stale = false;
+    const timer = setTimeout(async () => {
+      const documents = await searchDocuments(query);
+      if (!stale) found = documents;
+    }, 200);
+    return () => {
+      stale = true;
+      clearTimeout(timer);
+    };
+  });
+
+  /** The commands the query names, then the documents it found. */
+  const lines = $derived([...matching(commandLines, commands.palette.query.trim()), ...found]);
+
+  /** The lines under their heading, in the order the headings first appear. */
+  const groups = $derived.by(() => {
+    const out: { name: string; lines: Line[] }[] = [];
+    for (const line of lines) {
+      const group = out.find((candidate) => candidate.name === line.group);
+      if (group) group.lines.push(line);
+      else out.push({ name: line.group, lines: [line] });
+    }
+    return out;
+  });
+
+  /**
+   * The chosen line runs once the dialog has closed and given the focus back to where it was:
+   * a command that focuses something, or opens a dialog of its own, comes after that.
+   */
+  let chosen: Line | null = null;
+
+  function select(line: Line) {
+    chosen = line;
+    commands.palette.open = false;
+  }
+
+  function onCloseAutoFocus() {
+    const line = chosen;
+    chosen = null;
+    if (line) setTimeout(() => line.run(), 0);
+  }
+</script>
+
+<!--
+  One list: what the page offers on top, what the panel offers below, then the documents the
+  query found. The order is the scopes', so the list does its own filtering.
+-->
+<Command.Dialog bind:open={commands.palette.open} shouldFilter={false} {onCloseAutoFocus}>
+  <Command.Input placeholder={t__('common.type_a_command')} bind:value={commands.palette.query}>
+    {#snippet end()}
+      <Kbd keys="escape" />
+    {/snippet}
+  </Command.Input>
+  <Command.List class="rz-command-palette__list">
+    <Command.Empty>{t__('common.nothing_found')}</Command.Empty>
+    {#each groups as group (group.name)}
+      <Command.Group heading={group.name}>
+        {#each group.lines as line (line.id)}
+          <Command.Item
+            class="rz-command-palette__item"
+            value="{line.label} {line.id}"
+            onSelect={() => select(line)}
+          >
+            {#if line.icon}
+              {@const Icon = line.icon}
+              <span class="rz-command-palette__icon"><Icon size={16} /></span>
+            {/if}
+            <span class="rz-command-palette__label">{line.label}</span>
+            {#if line.keys}
+              <Kbd keys={line.keys} />
+            {/if}
+          </Command.Item>
+        {/each}
+      </Command.Group>
+    {/each}
+  </Command.List>
+  <footer class="rz-command-palette__foot">
+    <span><Kbd keys="arrowup" /><Kbd keys="arrowdown" /> {t__('common.palette_move')}</span>
+    <span><Kbd keys="enter" /> {t__('common.palette_run')}</span>
+    <span><Kbd keys="escape" /> {t__('common.palette_close')}</span>
+  </footer>
+</Command.Dialog>
+
+<style>
+  :global(.rz-command-palette__list) {
+    max-height: min(60vh, 22rem);
+    padding: var(--rz-size-1) var(--rz-size-1-5) var(--rz-size-1-5);
+  }
+
+  :global(.rz-command-palette__list .rz-command-group__heading) {
+    padding: var(--rz-size-2-5) var(--rz-size-2-5) var(--rz-size-1);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+  }
+
+  :global(.rz-command-palette__item.rz-command-item) {
+    display: flex;
+    min-height: var(--rz-size-8);
+    align-items: center;
+    gap: var(--rz-size-2-5);
+    padding-inline: var(--rz-size-2-5);
+    padding-block: 0;
+    border-radius: var(--rz-radius-lg);
+    font-size: var(--rz-text-md);
+  }
+
+  .rz-command-palette__icon {
+    display: flex;
+    color: var(--rz-fg-subtle);
+  }
+
+  :global(.rz-command-palette__item[aria-selected='true']) .rz-command-palette__icon {
+    color: var(--rz-fg);
+  }
+
+  .rz-command-palette__label {
+    flex: 1;
+  }
+
+  .rz-command-palette__foot {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-4);
+    height: var(--rz-size-9);
+    padding: 0 var(--rz-size-3-5);
+    border-top: 1px solid var(--rz-border);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+
+    span {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rz-size-1);
+    }
+  }
+</style>

package/dist/panel/components/sections/commands/CommandPalette.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Route } from '../../../types.js';
+import type { Component } from 'svelte';
+type Props = {
+    routes?: Record<string, Route[]>;
+};
+declare const CommandPalette: Component<Props, {}, "">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/panel/components/sections/commands/Commands.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { setCommandsContext } from '../../../context/commands.svelte.js';
+  import type { Route } from '../../../types.js';
+  import type { Snippet } from 'svelte';
+  import CommandPalette from './CommandPalette.svelte';
+
+  type Props = { routes?: Record<string, Route[]>; children: Snippet };
+  const { routes = {}, children }: Props = $props();
+
+  const commands = setCommandsContext();
+</script>
+
+<!-- Every key of the panel comes here, and the one palette lives here. -->
+<svelte:window onkeydown={commands.dispatch} />
+
+<CommandPalette {routes} />
+
+{@render children()}

package/dist/panel/components/sections/commands/Commands.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Route } from '../../../types.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    routes?: Record<string, Route[]>;
+    children: Snippet;
+};
+declare const Commands: import("svelte").Component<Props, {}, "">;
+type Commands = ReturnType<typeof Commands>;
+export default Commands;