rimecms 0.33.0 → 1.0.0

package/dist/panel/components/sections/collection/list/row/Row.svelte

@@ -3,82 +3,82 @@
   import type { GenericDoc } from '../../../../../../core/prototype/types.js';
   import { panelPath } from '../../../../../../core/routes/util.js';
   import Checkbox from '../../../../ui/checkbox/checkbox.svelte';
-  import { getLocaleContext } from '../../../../../context/locale.svelte';
   import { getValueAtPath } from '../../../../../../util/object';
-  import StatusDot from '../../StatusDot.svelte';
+  import Avatar from '../../Avatar.svelte';
+  import DocStatus from '../../DocStatus.svelte';
   import UploadThumbCell from '../../upload-thumb-cell/UploadThumbCell.svelte';
+  import When from '../../When.svelte';
 
   type Props = {
     checked: boolean;
     doc: GenericDoc;
+    /** On while a row is checked: the title then picks its row. */
     isSelectMode?: boolean;
     config: BuiltCollection;
+    /** Given, the row has a checkbox: shown on hover, and always once a row is checked. */
     toggleSelectOf?: (id: string) => void;
     columns?: Array<{ path: string; cell?: any }>;
+    /** The document's path, after its title: `/studio`. */
+    path?: string;
     draggable?: 'true';
   };
 
-  const { checked, doc, config, isSelectMode, toggleSelectOf, columns, draggable }: Props =
+  const { checked, doc, config, isSelectMode, toggleSelectOf, columns, path, draggable }: Props =
     $props();
 
-  const locale = getLocaleContext();
-
-  let gridTemplateColumn = $state('grid-template-columns: 2fr repeat(1, minmax(0, 1fr));');
-
-  $effect(() => {
-    // See the note in Header.svelte, which counts the same columns.
-    const columnLength = (columns?.length ?? 0) + 3;
-    gridTemplateColumn = `grid-template-columns: 2fr repeat(${columnLength - 1}, minmax(0, 1fr));`;
-  });
-
-  const formattedDate = $derived(
-    doc.updatedAt ? locale.dateFormat(doc.updatedAt, { short: true }) : ''
-  );
+  const title = $derived(doc.title || '[untitled]');
+  const hasDraft = $derived(!!(config.versions && config.versions.draft));
+  const author = $derived<string>(doc.updatedBy?.name ?? '');
+  // "Anthony Ivol" -> "Anthony"
+  const firstName = $derived(author.split(/\s+/)[0]);
 
   function handleDragStart(e: DragEvent) {
     e.dataTransfer?.setData('text/plain', doc.id);
   }
 </script>
 
+<!-- The tracks come from the list: `--rz-list-tracks`. -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  style={gridTemplateColumn}
   class="rz-list-row"
+  class:rz-list-row--checked={checked}
+  class:rz-list-row--select-mode={isSelectMode}
   draggable={draggable || null}
   ondragstart={draggable ? handleDragStart : null}
 >
+  {#if toggleSelectOf}
+    <Checkbox
+      id="checkbox-{doc.id}"
+      class="rz-list-row__checkbox"
+      aria-label={title}
+      {checked}
+      onCheckedChange={() => toggleSelectOf(doc.id)}
+    />
+  {:else}
+    <span></span>
+  {/if}
+
   <div class="rz-list-row__main">
+    {#if config.upload || doc._thumbnail}
+      <UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
+    {/if}
+
+    <!-- The title covers the whole row: a click opens the document, or picks it while selecting. -->
     {#if isSelectMode}
-      <!-- On select mode show the checkbox  -->
-      <Checkbox
-        id="checkbox-{doc.id}"
-        class="rz-list-row__checkbox"
-        {checked}
-        onCheckedChange={() => toggleSelectOf?.(doc.id)}
-      />
-      {#if doc._thumbnail}
-        <UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
-      {/if}
-      <label for="checkbox-{doc.id}" class="rz-list-row__title">{doc.title || '[untitled]'}</label>
+      <label for="checkbox-{doc.id}" class="rz-list-row__title">{title}</label>
     {:else}
-      <a class="rz-list-row__link" href={panelPath(config.kebab, doc.id)}>
-        {#if doc._thumbnail}
-          <UploadThumbCell url={doc._thumbnail} mimeType={doc.mimeType} />
-        {:else}
-          {@const Icon = config.icon}
-          <div class="rz-list-row__icon"><Icon size="13" /></div>
-        {/if}
-
-        <span class="rz-list-row__title">{doc.title || '[untitled]'}</span>
-        {#if config.versions && config.versions.draft}
-          <StatusDot --rz-dot-size="0.28rem" status={doc.status} />
-        {/if}
+      <a class="rz-list-row__link rz-list-row__title" href={panelPath(config.kebab, doc.id)}>
+        {title}
       </a>
     {/if}
+
+    {#if path}
+      <span class="rz-list-row__path">{path}</span>
+    {/if}
   </div>
 
-  {#each columns as column, index (index)}
-    <div class="rz-list-row__cell">
+  {#each columns as column (column.path)}
+    <div class="rz-list-row__cell" data-column="field">
       {#if column.cell}
         {@const ColumnTableCell = column.cell}
         <ColumnTableCell value={getValueAtPath(column.path, doc)} />
@@ -88,72 +88,155 @@
     </div>
   {/each}
 
-  <div class="rz-list-row__cell">
-    {doc.updatedBy?.name ?? ''}
+  {#if hasDraft}
+    <div class="rz-list-row__cell" data-column="status">
+      {#if doc.status}
+        <DocStatus status={doc.status} />
+      {/if}
+    </div>
+  {/if}
+
+  <div class="rz-list-row__cell rz-list-row__author" data-column="author" title={author}>
+    {#if author}
+      <Avatar size="xs" name={author} />
+      <span class="rz-list-row__author-name">{firstName}</span>
+    {/if}
   </div>
 
-  <div class="rz-list-row__cell">
-    {formattedDate}
+  <div class="rz-list-row__cell rz-list-row__cell--date">
+    {#if doc.updatedAt}
+      <When date={doc.updatedAt} />
+    {/if}
   </div>
 </div>
 
-<style>.rz-list-row {
+<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. */
+/* A flat row with a hairline on top; the card around the list draws the frame. */
+  .rz-list-row {
     --rz-upload-preview-cell-fit: cover;
+    --rz-upload-preview-cell-size: var(--rz-size-6);
+    --rz-checkbox-size: var(--rz-size-3);
 
+    position: relative;
     display: grid;
-    height: var(--rz-row-height);
     align-items: center;
-    border: var(--rz-border);
-    border-radius: var(--rz-radius-md);
-    background-color: hsl(var(--rz-row-bg));
-
-    .rz-list-row__icon {
-      height: var(--rz-size-9);
-      width: var(--rz-size-9);
-      border-radius: var(--rz-radius-sm);
-      display: flex;
-      flex-shrink: 0;
-      flex-grow: 0;
-      align-items: center;
-      justify-content: center;
-      background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-1)));
-    }
+    gap: var(--rz-size-3);
+    height: var(--rz-row-height);
+    padding-inline: var(--rz-size-3) var(--rz-size-3-5);
+    box-shadow: inset 0 1px 0 var(--rz-border);
+    transition: background-color 0.15s;
 
-    :global {
-      .rz-list-row__checkbox {
-        margin-left: var(--rz-size-2);
-        background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
-        border: var(--rz-border);
-      }
+    &:hover {
+      background-color: var(--rz-bg-hover);
     }
   }
 
-  .rz-list-row__main {
-    display: flex;
-    align-items: center;
-    gap: var(--rz-size-3);
-    padding-left: var(--rz-size-1);
-    padding-right: var(--rz-size-5);
+  .rz-list-row--checked,
+  .rz-list-row--checked:hover {
+    background-color: var(--rz-accent-tint);
+  }
+
+  /* Above the title's cover, and hidden until the row is hovered, focused or a row is checked. */
+  .rz-list-row :global(.rz-list-row__checkbox) {
+    position: relative;
+    z-index: 1;
+    justify-self: center;
+    opacity: 0;
+    transition: opacity 0.15s;
   }
 
-  .rz-list-row__link {
+  .rz-list-row:is(:hover, :focus-within, .rz-list-row--select-mode, .rz-list-row--checked)
+    :global(.rz-list-row__checkbox) {
+    opacity: 1;
+  }
+
+  /* The title, then its path, which gives way first. */
+  .rz-list-row__main {
     display: flex;
     align-items: center;
-    gap: var(--rz-size-4);
+    gap: var(--rz-size-2);
+    min-width: 0;
+
+    :global(.rz-upload-preview-cell) {
+      margin-right: var(--rz-size-0-5);
+    }
   }
 
   .rz-list-row__title {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+    flex-shrink: 1;
+    min-width: 0;
     overflow: hidden;
-    word-break: break-all;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
   }
+
   label.rz-list-row__title {
     cursor: pointer;
   }
 
+  .rz-list-row__link:focus-visible {
+    outline: none;
+
+    &::after {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+      outline-offset: -2px;
+    }
+  }
+
+  .rz-list-row__path {
+    flex-shrink: 100;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+  }
+
   .rz-list-row__cell {
-    color: hsl(var(--rz-foreground) / 0.6);
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--rz-fg-muted);
+  }
+
+  .rz-list-row__author {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-1-5);
+  }
+
+  .rz-list-row__author-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .rz-list-row__cell--date {
+    text-align: right;
   }
 </style>

package/dist/panel/components/sections/collection/list/row/Row.svelte.d.ts

@@ -3,13 +3,17 @@ import type { GenericDoc } from '../../../../../../core/prototype/types.js';
 type Props = {
     checked: boolean;
     doc: GenericDoc;
+    /** On while a row is checked: the title then picks its row. */
     isSelectMode?: boolean;
     config: BuiltCollection;
+    /** Given, the row has a checkbox: shown on hover, and always once a row is checked. */
     toggleSelectOf?: (id: string) => void;
     columns?: Array<{
         path: string;
         cell?: any;
     }>;
+    /** The document's path, after its title: `/studio`. */
+    path?: string;
     draggable?: 'true';
 };
 declare const Row: import("svelte").Component<Props, {}, "">;

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

@@ -1,11 +1,12 @@
 <script lang="ts">
+  import { t__ } from '../../../../../core/i18n/index.js';
+  import '../../../ui/tree/tree-rows.css';
   import type { CollectionContext } from '../../../../context/collection.svelte';
   import Sortable from 'sortablejs';
   import { onDestroy } from 'svelte';
   import { toast } from 'svelte-sonner';
   import Empty from '../Empty.svelte';
   import CollectionTreeNode from './CollectionTreeNode.svelte';
-  import { countRows } from './util';
 
   type Props = { collection: CollectionContext };
   const { collection }: Props = $props();
@@ -21,6 +22,8 @@
     handle: '.rz-collection-node__grip',
     animation: 150,
     swapThreshold: 0.93,
+    // A childless node's list has no height: a drop this close to it nests under that node.
+    emptyInsertThreshold: 8,
     group: {
       name: `list-nested`
     },
@@ -93,55 +96,100 @@
 
 {#key `${collectionStamp}`}
   {#if collection.docs.length}
-    <div
-      class="rz-collection-sortable rz-collection-sortable--root"
-      data-id="root"
-      style="--data-rows-count={countRows(collection.nested)}"
-      data-empty={collection.nested.length === 0 ? '' : null}
-    >
-      {#each collection.nested as doc, index (index)}
-        <CollectionTreeNode {collection} parentId="root" {doc} />
-      {/each}
+    <!-- One raised card, like the list: the column labels, then the rows. -->
+    <div class="rz-collection-tree rz-tree-card">
+      <div class="rz-collection-tree__head">
+        <span class="rz-collection-tree__head-title">{t__('common.title')}</span>
+        {#if collection.hasDraft}
+          <span data-column="status">{t__('common.status')}</span>
+        {/if}
+        <span data-column="author">{t__('common.author')}</span>
+        <span data-column="date">{t__('common.updated')}</span>
+      </div>
+
+      <div
+        class="rz-collection-sortable rz-tree-rows rz-tree-rows--root"
+        data-id="root"
+        style:--rz-tree-depth="0"
+      >
+        {#each collection.nested as doc, index (index)}
+          <CollectionTreeNode {collection} parentId="root" {doc} />
+        {/each}
+      </div>
     </div>
   {:else}
     <Empty config={collection.config} />
   {/if}
 {/key}
 
-<style>
-  .rz-collection-sortable {
-    --gap: var(--rz-size-2);
-    --h: var(--rz-row-height);
-    --half-h: calc(var(--rz-row-height) / 2);
-
-    height: 100%;
-    background-color: hsl(var(--rz-color-bg));
-    background-position: 0 0;
-    position: relative;
-
-    & :global {
-      .rz-collection-sortable {
-        display: grid;
-        margin-left: var(--rz-size-12);
-        min-height: var(--gap);
-      }
-      .rz-collection-sortable:has(.rz-collection-node) {
-        --rows: var(--data-rows-count);
-        &::before {
-          border-bottom-left-radius: 1rem;
-          content: '';
-          border-left: var(--rz-border);
-          translate: calc(-1 * var(--rz-size-6)) calc(-1 * var(--gap));
-          position: absolute;
-          top: 0;
-          height: calc(
-            var(--gap) + var(--half-h) + (var(--rows) - 1) * calc(var(--h) + var(--gap))
-          );
-          left: 0;
-        }
-        margin-top: var(--gap);
-        position: relative;
-      }
+<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-tree {
+    border-radius: var(--rz-radius-lg);
+  }
+
+  /* The column labels: the list's, without sorting, the order being the tree's. */
+  .rz-collection-tree__head {
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-3);
+    height: calc(8.5 * var(--rz-unit));
+    padding-left: var(--rz-size-6);
+    padding-right: var(--rz-size-2);
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+  }
+
+  .rz-collection-tree__head-title {
+    flex: 1;
+  }
+
+  /* The right columns share their widths with the rows. */
+  .rz-collection-tree :global([data-column]) {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--rz-size-2);
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .rz-collection-tree :global([data-column='status']) {
+    width: var(--rz-size-28);
+  }
+  .rz-collection-tree :global([data-column='author']) {
+    width: var(--rz-size-32);
+  }
+  .rz-collection-tree :global([data-column='date']) {
+    justify-content: flex-end;
+    width: var(--rz-size-24);
+  }
+
+  /* Narrower: without the author, then without the status. */
+  @container collection-area (max-width: 44rem) {
+    .rz-collection-tree :global([data-column='author']) {
+      display: none;
+    }
+  }
+
+  @container collection-area (max-width: 32rem) {
+    .rz-collection-tree :global([data-column='status']) {
+      display: none;
     }
   }
 </style>

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

@@ -1,3 +1,4 @@
+import '../../../ui/tree/tree-rows.css';
 import type { CollectionContext } from '../../../../context/collection.svelte';
 type Props = {
     collection: CollectionContext;