rimecms 0.32.1 → 1.0.0

package/dist/panel/components/sections/collection/header/SearchInput.svelte

@@ -7,6 +7,14 @@
   const collection = getCollectionContext();
   let searchValue = $state('');
 
+  // Search 24 documents...
+  const placeholder = $derived.by(() => {
+    if (collection.config.label.search) return collection.config.label.search;
+    const key = collection.isUpload ? 'common.collection_count_files' : 'common.collection_count';
+    const count = t__(collection.total === 1 ? key : `${key}|m|p`, String(collection.total));
+    return t__('common.search', count);
+  });
+
   $effect(() => {
     collection.filterBy(searchValue);
   });
@@ -16,38 +24,21 @@
   <Input
     name="search"
     icon={Search}
-    placeholder={t__('common.search', `${collection.length} document(s)`)}
+    {placeholder}
+    aria-label={placeholder}
     type="text"
     bind:value={searchValue}
   />
 </div>
 
-<style>.rz-header-search-input {
-    position: relative;
-    display: none;
-    height: var(--rz-size-11);
-    align-items: center;
-    width: var(--rz-size-80);
-
-    :global {
-      .rz-input {
-        height: var(--rz-size-9);
-        font-size: var(--rz-text-sm);
-      }
-      .rz-input-wrapper {
-        width: 100%;
-        &:focus-visible {
-          box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
-        }
-      }
-    }
-  }
+<style>
+  .rz-header-search-input {
+    flex: 1;
+    min-width: var(--rz-size-40);
+    max-width: var(--rz-size-80);
 
-  @container (min-width: 720px) {
-    .rz-header-search-input {
-      display: flex;
+    :global(.rz-input) {
+      height: var(--rz-size-8);
     }
   }
 </style>

package/dist/panel/components/sections/collection/header/SelectUI.svelte

@@ -2,61 +2,46 @@
   import { t__ } from '../../../../../core/i18n/index.js';
   import Button from '../../../ui/button/button.svelte';
   import { getCollectionContext } from '../../../../context/collection.svelte.js';
-  import { ListChecks, SquareCheck, SquareMinus, Trash } from '@lucide/svelte';
+  import { SquareCheck, SquareMinus, Trash } from '@lucide/svelte';
 
   const collection = getCollectionContext();
   const selectedCount = $derived(collection.selected.length);
-  const pluralSuffix = $derived(selectedCount > 1 ? 's' : '');
-  const activeListClass = $derived(collection.selectMode ? 'rz-header-select__icon--active' : '');
-</script>
 
-<div class="rz-header-select">
-  <Button
-    size="icon-sm"
-    variant="ghost"
-    onclick={() => (collection.selectMode = !collection.selectMode)}
-    disabled={collection.length === 0}
-  >
-    <ListChecks size={17} class="rz-header-select__icon {activeListClass}" />
-  </Button>
+  // 2 documents, 1 file
+  const countLabel = $derived.by(() => {
+    const key = collection.isUpload ? 'common.collection_count_files' : 'common.collection_count';
+    return t__(selectedCount === 1 ? key : `${key}|m|p`, String(selectedCount));
+  });
+</script>
 
-  {#if collection.selectMode}
+<!-- The actions on the checked documents, while one is checked. -->
+{#if selectedCount > 0}
+  <div class="rz-header-select">
     {#if collection.isAllSelected}
       <Button
-        variant="text"
+        variant="ghost"
         size="sm"
         icon={SquareMinus}
         onclick={() => (collection.selected = [])}
       >
-        Deselect All
+        {t__('common.collection_deselect_all')}
       </Button>
     {:else}
-      <Button variant="text" size="sm" icon={SquareCheck} onclick={collection.selectAll}>
+      <Button variant="ghost" size="sm" icon={SquareCheck} onclick={collection.selectAll}>
         {t__('common.select_all')}
       </Button>
     {/if}
-    <Button
-      disabled={selectedCount === 0}
-      size="sm"
-      icon={Trash}
-      variant="text"
-      onclick={collection.deleteSelection}
-    >
-      {t__('common.delete', `${selectedCount} doc${pluralSuffix}`)}
+    <Button size="sm" icon={Trash} variant="ghost" onclick={collection.deleteSelection}>
+      {t__('common.delete', countLabel)}
     </Button>
-  {/if}
-</div>
+  </div>
+{/if}
 
 <style>
   .rz-header-select {
+    --rz-button-ghost-fg: var(--rz-fg-muted);
     display: flex;
-    gap: var(--rz-size-4);
+    gap: var(--rz-size-1);
     align-items: center;
-
-    :global {
-      .rz-header-select__icon--active {
-        color: hsl(var(--rz-color-spot));
-      }
-    }
   }
 </style>

package/dist/panel/components/sections/collection/list/CollectionList.svelte

@@ -1,88 +1,119 @@
 <script lang="ts">
-  import { isUploadConfig } from '../../../../../core/prototype/collection/upload/util/config';
   import type { CollectionContext } from '../../../../context/collection.svelte.js';
   import Empty from '../Empty.svelte';
-  import Folder from '../folder/FolderWithActions.svelte';
+  import Folders from '../folder/Folders.svelte';
+  import { listColumns } from './columns.js';
+  import ListHeader from './header/Header.svelte';
   import Row from './row/Row.svelte';
 
   type Props = { collection: CollectionContext };
 
   const { collection }: Props = $props();
 
-  const documents = $derived.by(() => {
-    return collection.isUpload
-      ? collection.docs.filter((doc) => doc._path === collection.upload.currentPath)
-      : collection.docs;
-  });
-
-  function onDeleteFolder(path: string) {
-    collection.upload.directories = collection.upload.directories.filter((dir) => dir.id !== path);
-  }
-
-  /**
-   * When a document is moved into a folder
-   * change the document path inside collection.docs
-   */
-  function onDocumentDrop(args: { documentId: string; path: string }) {
-    const { documentId, path } = args;
-    const docIndex = collection.docs.findIndex((doc) => doc.id === documentId);
-    if (docIndex > -1) {
-      collection.docs[docIndex]._path = path;
-    } else {
-      console.error("can't find " + documentId, collection.docs);
-    }
-  }
+  const hasFolders = $derived(
+    collection.isUpload &&
+      !collection.isFiltered &&
+      !!(collection.upload.directories.length || collection.upload.parentDirectory)
+  );
 
+  // A row is dragged onto a folder only when there is one to drop it on.
   const dragEnabled = $derived(
-    isUploadConfig(collection.config) &&
+    collection.isUpload &&
       !!(collection.upload.directories.length || collection.upload.parentDirectory)
   );
+
+  // The tracks, wide; then without the author; then the title and the date alone.
+  const columns = $derived(collection.columns.length);
+  const status = $derived(!!collection.hasDraft);
+  const wide = $derived(listColumns({ columns, status, author: true }));
+  const medium = $derived(listColumns({ columns, status }));
+  const narrow = listColumns({});
 </script>
 
-{#if collection.docs.length}
-  <div class="rz-page-collection__list">
-    <!-- Parent directory -->
-    {#if collection.isUpload && collection.upload.parentDirectory && !collection.isFiltered}
-      <Folder
-        {onDocumentDrop}
-        folder={{ ...collection.upload.parentDirectory, name: '...' }}
-        display="list"
-        collection={collection.config}
-      />
-    {/if}
-
-    {#if !collection.isFiltered && collection.isUpload}
-      {#each collection.upload.directories as folder (folder.id)}
-        <Folder
-          draggable="true"
-          {onDocumentDrop}
-          {folder}
-          collection={collection.config}
-          display="list"
-          onDelete={onDeleteFolder}
+<div class="rz-page-collection__list-view">
+  <Folders {collection} />
+
+  {#if collection.shown.length}
+    <div
+      class="rz-page-collection__list"
+      style:--rz-list-tracks={wide}
+      style:--rz-list-tracks-md={medium}
+      style:--rz-list-tracks-sm={narrow}
+    >
+      <ListHeader />
+      {#each collection.shown as doc (doc.id)}
+        <Row
+          config={collection.config}
+          columns={collection.columns}
+          {doc}
+          path={collection.pathOf(doc)}
+          checked={collection.selected.includes(doc.id)}
+          draggable={dragEnabled ? 'true' : undefined}
+          isSelectMode={collection.selectMode}
+          toggleSelectOf={collection.toggleSelectOf}
         />
       {/each}
-    {/if}
-
-    {#each documents as doc, index (index)}
-      {@const checked = collection.selected.includes(doc.id)}
-      <Row
-        config={collection.config}
-        {doc}
-        {checked}
-        draggable={dragEnabled ? 'true' : undefined}
-        isSelectMode={collection.selectMode}
-        toggleSelectOf={(id) => collection.toggleSelectOf(id)}
-      />
-    {/each}
-  </div>
-{:else}
-  <Empty config={collection.config} />
-{/if}
-
-<style>
+    </div>
+  {:else if !hasFolders}
+    <Empty config={collection.config} />
+  {/if}
+</div>
+
+<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-page-collection__list-view {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-5);
+  }
+
+  /* One raised card: the column labels, then the rows, a hairline between each. */
   .rz-page-collection__list {
-    gap: var(--rz-size-2);
-    display: grid;
+    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;
+
+    :global(:is(.rz-list-row, .rz-list-header)) {
+      grid-template-columns: var(--rz-list-tracks);
+    }
+  }
+
+  /* A narrower list drops the author, then the status and the config's columns. */
+  @container collection-area (max-width: 44rem) {
+    .rz-page-collection__list {
+      :global(:is(.rz-list-row, .rz-list-header)) {
+        grid-template-columns: var(--rz-list-tracks-md);
+      }
+      :global([data-column='author']) {
+        display: none;
+      }
+    }
+  }
+
+  @container collection-area (max-width: 32rem) {
+    .rz-page-collection__list {
+      :global(:is(.rz-list-row, .rz-list-header)) {
+        grid-template-columns: var(--rz-list-tracks-sm);
+      }
+      :global(:is([data-column='status'], [data-column='field'])) {
+        display: none;
+      }
+    }
   }
 </style>

package/dist/panel/components/sections/collection/list/columns.d.ts

@@ -0,0 +1,21 @@
+type Tracks = {
+    /** How many `table()` columns the config adds after the title. */
+    columns?: number;
+    /** A status column, for a collection with drafts. */
+    status?: boolean;
+    /** Who last edited. */
+    author?: boolean;
+};
+/**
+ * The tracks of a list row and of its header: the checkbox, the title, the config's columns,
+ * the status, the author, then when.
+ *
+ * ```ts
+ * listColumns({ columns: 1, status: true, author: true })
+ * // 'var(--rz-size-4) minmax(0, 2fr) minmax(0, 1fr) var(--rz-size-28) var(--rz-size-32) var(--rz-size-24)'
+ * listColumns({})
+ * // 'var(--rz-size-4) minmax(0, 2fr) var(--rz-size-24)'
+ * ```
+ */
+export declare function listColumns({ columns, status, author }: Tracks): string;
+export {};

package/dist/panel/components/sections/collection/list/columns.js

@@ -0,0 +1,23 @@
+/**
+ * The tracks of a list row and of its header: the checkbox, the title, the config's columns,
+ * the status, the author, then when.
+ *
+ * ```ts
+ * listColumns({ columns: 1, status: true, author: true })
+ * // 'var(--rz-size-4) minmax(0, 2fr) minmax(0, 1fr) var(--rz-size-28) var(--rz-size-32) var(--rz-size-24)'
+ * listColumns({})
+ * // 'var(--rz-size-4) minmax(0, 2fr) var(--rz-size-24)'
+ * ```
+ */
+export function listColumns({ columns = 0, status = false, author = false }) {
+    return [
+        'var(--rz-size-4)',
+        'minmax(0, 2fr)',
+        ...Array(columns).fill('minmax(0, 1fr)'),
+        status && 'var(--rz-size-28)',
+        author && 'var(--rz-size-32)',
+        'var(--rz-size-24)'
+    ]
+        .filter(Boolean)
+        .join(' ');
+}

package/dist/panel/components/sections/collection/list/header/Header.svelte

@@ -1,86 +1,134 @@
 <script lang="ts">
   import { t__ } from '../../../../../../core/i18n/index.js';
-  import type { FormField } from '../../../../../../fields/types.js';
   import { getCollectionContext } from '../../../../../context/collection.svelte.js';
-  import { capitalize } from '../../../../../../util/string.js';
   import { ChevronDown, ChevronUp } from '@lucide/svelte';
 
-  type TableColumn = Partial<FormField> & { name: string; label?: string };
-
   const collection = getCollectionContext();
-  let gridTemplateColumn = $state('grid-template-columns: 2fr repeat(1, minmax(0, 1fr));');
-
-  $effect(() => {
-    // The title, the config's own columns, then the two fixed meta columns — who last edited,
-    // and when. Row.svelte counts the same way, and the two have to agree.
-    const columnLength = collection.columns.length + 3;
-    gridTemplateColumn = `grid-template-columns: 2fr repeat(${columnLength - 1}, minmax(0, 1fr));`;
-  });
+
+  // attributes.title -> title
+  const titleName = $derived(collection.config.asTitle.split('.').at(-1) || 'title');
 </script>
 
-{#snippet columnHeader(label: string)}
+{#snippet sortable(name: string, label: string)}
+  {@const active = collection.sortingBy === name}
+  <button
+    onclick={() => collection.sortBy(name)}
+    aria-label={t__('common.sort_by', label)}
+    type="button"
+    class="rz-list-header__sort-button"
+    class:rz-list-header__sort-button--active={active}
+  >
+    {label}
+    {#if active && collection.sortingOrder === 'asc'}
+      <ChevronUp size={12} />
+    {:else}
+      <ChevronDown size={12} />
+    {/if}
+  </button>
+{/snippet}
+
+<!-- The column labels, on the tracks the list gives its rows. -->
+<div class="rz-list-header">
+  <span></span>
+
   <div class="rz-list-header__column">
-    {capitalize(label)}
+    {@render sortable(titleName, t__('common.title'))}
   </div>
-{/snippet}
 
-{#snippet sortableColumnHeader(column: TableColumn)}
-  <div>
-    <button
-      onclick={() => collection.sortBy(column.name)}
-      aria-label="sort {column.name}"
-      type="button"
-      class="rz-list-header__sort-button"
-    >
-      {capitalize(column.label || column.name)}
-
-      {#if collection.sortingBy === column.name && collection.sortingOrder === 'dsc'}
-        <ChevronUp size={12} />
+  {#each collection.columns as column (column.path)}
+    <div class="rz-list-header__column" data-column="field">
+      {#if column.table.sort}
+        {@render sortable(column.name, column.label ?? column.name)}
       {:else}
-        <ChevronDown size={12} />
+        {column.label ?? column.name}
       {/if}
-    </button>
+    </div>
+  {/each}
+
+  {#if collection.hasDraft}
+    <div class="rz-list-header__column" data-column="status">
+      {@render sortable('status', t__('common.status'))}
+    </div>
+  {/if}
+
+  <!-- The author is not sortable. -->
+  <div class="rz-list-header__column" data-column="author">{t__('common.author')}</div>
+
+  <div class="rz-list-header__column rz-list-header__column--date">
+    {@render sortable('updatedAt', t__('common.updated'))}
   </div>
-{/snippet}
+</div>
 
-<div style={gridTemplateColumn} class="rz-list-header">
-  {@render sortableColumnHeader({ name: collection.config.asTitle.split('.').at(-1) || 'title' })}
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
 
-  {#each collection.columns as column, index (index)}
-    {#if column.table.sort}
-      {@render sortableColumnHeader(column)}
-    {:else}
-      {@render columnHeader(column.label || column.name)}
-    {/if}
-  {/each}
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
-  <!-- Not sortable: the column holds user ids, so ordering by it orders by nothing a reader can see. -->
-  {@render columnHeader(t__('common.updated_by'))}
+/* The hover tint, laid over the element's own fill. */
 
-  {@render sortableColumnHeader({ name: 'updatedAt' })}
-</div>
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
 
-<style>.rz-list-header {
+/* 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-list-header {
     display: grid;
-    height: var(--rz-size-14);
-    /* width: calc(100% - var(--rz-size-10)); */
     align-items: center;
-    border-bottom: var(--rz-border);
-    /* margin-left: var(--rz-size-5); */
+    gap: var(--rz-size-3);
+    height: calc(8.5 * var(--rz-unit));
+    padding-inline: var(--rz-size-3) var(--rz-size-3-5);
+    color: var(--rz-fg-subtle);
     font-size: var(--rz-text-sm);
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
   }
 
   .rz-list-header__column {
-    color: hsl(var(--rz-ground-2) / 1);
     display: flex;
     align-items: center;
-    gap: var(--rz-size-1);
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* The date sits on the right, like the dates below it. */
+  .rz-list-header__column--date {
+    justify-content: flex-end;
   }
 
   .rz-list-header__sort-button {
-    color: hsl(var(--rz-ground-2) / 1);
     display: flex;
     align-items: center;
     gap: var(--rz-size-1);
+    border-radius: var(--rz-radius-sm);
+    color: inherit;
+    transition: color 0.15s;
+
+    :global(svg) {
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+
+    &:hover {
+      color: var(--rz-fg);
+    }
+
+    &:hover :global(svg),
+    &.rz-list-header__sort-button--active :global(svg) {
+      opacity: 1;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+  }
+
+  .rz-list-header__sort-button--active {
+    color: var(--rz-fg-muted);
   }
 </style>