rimecms 0.33.0 → 1.0.1

package/dist/panel/components/sections/collection/folder/Folder.svelte

@@ -29,9 +29,24 @@
   {@render children()}
 </h3>
 
-<style>:root {
-    --rz-folder-light: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-6)));
-    --rz-folder-dark: light-dark(hsl(var(--rz-gray-12)), hsl(var(--rz-gray-4)));
+<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. */
+:root {
+    --rz-folder-light: var(--rz-bg-active);
+    --rz-folder-dark: var(--rz-bg-well);
   }
 
   h3 {

package/dist/panel/components/sections/collection/folder/FolderEdit.svelte

@@ -6,6 +6,7 @@
   import RenderFields from '../../../fields/RenderFields.svelte';
   import Button from '../../../ui/button/button.svelte';
   import * as Dialog from '../../../ui/dialog/index.js';
+  import { useCommands } from '../../../../context/commands.svelte.js';
   import { getConfigContext } from '../../../../context/config.svelte.js';
   import { setDocumentFormContext } from '../../../../context/documentForm.svelte.js';
   import { getUserContext } from '../../../../context/user.svelte.js';
@@ -31,33 +32,40 @@
     afterSuccess: () => (open = false)
   });
 
-  function handleKeyDown(event: KeyboardEvent) {
-    if (!open) return;
-    if (!formElement) throw Error('formElement is not defined');
-    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
-      event.preventDefault();
-      if (!form.canSubmit) return;
-      const saveButton = formElement.querySelector('button[data-submit]');
-      if (saveButton) {
-        formElement.requestSubmit(saveButton as HTMLButtonElement);
-      } else {
-        // Fallback to default submit if no specific button found
-        formElement.requestSubmit();
-      }
+  /** ⌘S while the dialog is up. */
+  useCommands(() => [
+    {
+      id: 'folder.save',
+      label: t__('common.save'),
+      keys: 'mod+s',
+      inField: true,
+      hidden: true,
+      when: () => open,
+      run: submit
     }
+  ]);
+
+  function submit() {
+    if (!formElement) throw Error('formElement is not defined');
+    if (!form.canSubmit) return;
+    const saveButton = formElement.querySelector('button[data-submit]');
+    if (saveButton) formElement.requestSubmit(saveButton as HTMLButtonElement);
+    else formElement.requestSubmit();
   }
 </script>
 
-<svelte:window onkeydown={handleKeyDown} />
-
 <Dialog.Root bind:open>
   <Dialog.Content>
     {#snippet child({ props })}
       <form use:form.enhance bind:this={formElement} {...props}>
         <RenderFields {form} fields={config.fields} />
-        <Dialog.Footer --rz-justify-content="space-between">
-          <Button data-submit disabled={!form.canSubmit} type="submit">{t__('common.save')}</Button>
-          <Button onclick={() => (open = false)} variant="secondary">{t__('common.cancel')}</Button>
+        <Dialog.Footer>
+          <Button data-submit disabled={!form.canSubmit} type="submit" kbd="enter">
+            {t__('common.save')}
+          </Button>
+          <Button onclick={() => (open = false)} variant="secondary" kbd="escape">
+            {t__('common.cancel')}
+          </Button>
         </Dialog.Footer>
       </form>
     {/snippet}

package/dist/panel/components/sections/collection/folder/FolderWithActions.svelte

@@ -13,10 +13,9 @@
   import * as Dialog from '../../../ui/dialog/index.js';
   import { getAPIProxyContext } from '../../../../context/api-proxy.svelte.js';
   import { trycatchFetch } from '../../../../../util/function.js';
-  import { Pencil, Trash2 } from '@lucide/svelte';
+  import { Folder, FolderUp, Pencil, Trash2 } from '@lucide/svelte';
   import { toast } from 'svelte-sonner';
   import { t__ } from '../../../../../core/i18n/index.js';
-  import Folder from './Folder.svelte';
   import FolderEdit from './FolderEdit.svelte';
 
   type Props = {
@@ -25,16 +24,8 @@
     onDelete?: (path: string) => void;
     onDocumentDrop: (args: { documentId: string; path: string }) => void;
     draggable?: 'true';
-    display?: 'grid' | 'list';
   };
-  const {
-    folder,
-    collection,
-    onDelete,
-    onDocumentDrop,
-    draggable,
-    display = 'grid'
-  }: Props = $props();
+  const { folder, collection, onDelete, onDocumentDrop, draggable }: Props = $props();
 
   let deleteConfirmOpen = $state(false);
   let editFolderDialogOpen = $state(false);
@@ -54,6 +45,12 @@
   );
   const childFolders = $derived(APIProxy.getRessource<{ docs: GenericDoc[] }>(childFoldersURL));
   const childFoldersCount = $derived(childFolders.data?.docs?.length || 0);
+  // What the folder holds, files and folders, once both counts are in.
+  const itemsCount = $derived(
+    !isFolderUpperPath && childFiles.data && childFolders.data
+      ? childFilesCount + childFoldersCount
+      : null
+  );
 
   async function handleGetDeleteInfos() {
     message = t__(
@@ -150,10 +147,25 @@
   }
 </script>
 
+{#snippet tile()}
+  <span class="rz-folder__tile">
+    {#if isFolderUpperPath}
+      <FolderUp size={15} />
+    {:else}
+      <Folder size={15} />
+    {/if}
+    <span class="rz-folder__name">{folder.name}</span>
+    {#if itemsCount !== null}
+      <span class="rz-folder__count">{itemsCount}</span>
+    {/if}
+  </span>
+{/snippet}
+
 <button
   bind:this={rootElement}
+  type="button"
   onclick={handleGoToFolder}
-  class="rz-folder rz-folder--{display}"
+  class="rz-folder"
   class:rz-folder--dragging={isDragging}
   ondragleave={handleDragLeave}
   ondragover={!isDragging ? handleDragEnter : null}
@@ -164,11 +176,9 @@
 >
   {#if !isFolderUpperPath}
     <ContextMenu>
-      <!--  -->
       {#snippet trigger()}
-        <Folder>{folder.name}</Folder>
+        {@render tile()}
       {/snippet}
-      <!--  -->
       {#snippet content()}
         <ContextMenuItem onclick={handleGetDeleteInfos}>
           <Trash2 size="12" /> Delete
@@ -177,15 +187,10 @@
           <Pencil size="12" /> Edit
         </ContextMenuItem>
       {/snippet}
-      <!--  -->
     </ContextMenu>
   {:else}
-    <div>
-      <Folder>{folder.name}</Folder>
-    </div>
+    {@render tile()}
   {/if}
-
-  <span></span>
 </button>
 
 <Dialog.Root bind:open={deleteConfirmOpen}>
@@ -194,65 +199,100 @@
       {t__('common.delete_dialog_title', folder.name)}
     </Dialog.Header>
     <p>{message}</p>
-    <Dialog.Footer --rz-justify-content="space-between">
-      <Button onclick={handleDelete}>Delete</Button>
-      <Button onclick={() => (deleteConfirmOpen = false)} variant="secondary">Cancel</Button>
+    <Dialog.Footer>
+      <Button onclick={handleDelete} kbd="enter">Delete</Button>
+      <Button onclick={() => (deleteConfirmOpen = false)} variant="secondary" kbd="escape">
+        {t__('common.cancel')}
+      </Button>
     </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>
 
 <FolderEdit bind:open={editFolderDialogOpen} {folder} {collection} />
 
-<style>
-  :root {
-    --rz-folder-hover-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-1)));
-  }
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
 
-  .rz-folder--dragging {
-    pointer-events: none;
-    opacity: 0.5;
-  }
+/* 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 small raised tile: the icon, the name, what it holds. */
   .rz-folder {
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
+    display: flex;
     width: 100%;
-    padding: var(--rz-size-5);
+    height: calc(10.5 * var(--rz-unit));
     border-radius: var(--rz-radius-lg);
+    text-align: left;
+
+    &:hover {
+      background-image: linear-gradient(var(--rz-bg-hover) 0 0);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--rz-accent-border);
+      outline-offset: 2px;
+    }
+
+    /* The context menu's trigger fills the tile. */
+    > :global(div) {
+      display: flex;
+      flex: 1;
+      min-width: 0;
+    }
 
     :global {
       &.rz-folder--dragover {
-        background-color: var(--rz-folder-hover-bg);
+        background-color: var(--rz-accent-tint);
+        box-shadow: 0 0 0 1px var(--rz-accent-border);
       }
     }
   }
 
-  .rz-folder.rz-folder--grid {
-    aspect-ratio: 4 / 5;
+  .rz-folder--dragging {
+    pointer-events: none;
+    opacity: 0.5;
   }
-  .rz-folder.rz-folder--list {
-    height: var(--rz-row-height);
-    padding: var(--rz-size-1-5);
 
-    :global {
-      > div {
-        padding: 0;
-        display: flex;
-        gap: var(--rz-size-4);
-        align-items: center;
-        justify-content: flex-start;
-        h3 {
-          font-size: var(--rz-text-md);
-        }
-        svg {
-          display: block;
-          height: auto;
-          width: 2rem;
-          transform: translateY(-0.12em);
-        }
-      }
+  .rz-folder__tile {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--rz-size-2-5);
+    min-width: 0;
+    padding-inline: var(--rz-size-3);
+
+    :global(svg) {
+      flex-shrink: 0;
+      color: var(--rz-fg-subtle);
     }
   }
 
-  .rz-folder.rz-folder--grid:hover {
-    background-color: var(--rz-folder-hover-bg);
+  .rz-folder__name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-variation-settings: 'wght' 500;
+    font-weight: 500;
+  }
+
+  .rz-folder__count {
+    color: var(--rz-fg-subtle);
+    font-size: var(--rz-text-sm);
+    font-variant-numeric: tabular-nums;
   }
 </style>

package/dist/panel/components/sections/collection/folder/FolderWithActions.svelte.d.ts

@@ -9,7 +9,6 @@ type Props = {
         path: string;
     }) => void;
     draggable?: 'true';
-    display?: 'grid' | 'list';
 };
 declare const FolderWithActions: import("svelte").Component<Props, {}, "">;
 type FolderWithActions = ReturnType<typeof FolderWithActions>;

package/dist/panel/components/sections/collection/folder/Folders.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { CollectionContext } from '../../../../context/collection.svelte.js';
+  import Folder from './FolderWithActions.svelte';
+
+  type Props = { collection: CollectionContext };
+  const { collection }: Props = $props();
+
+  // A search lists files only.
+  const show = $derived(
+    collection.isUpload &&
+      !collection.isFiltered &&
+      !!(collection.upload.parentDirectory || collection.upload.directories.length)
+  );
+
+  function onDeleteFolder(path: string) {
+    collection.upload.directories = collection.upload.directories.filter((dir) => dir.id !== path);
+  }
+
+  /** A document dropped on a folder takes the folder's path. */
+  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);
+    }
+  }
+</script>
+
+<!-- The folders of an upload collection, the parent one first, above its files. -->
+{#if show}
+  <div class="rz-folders">
+    {#if collection.upload.parentDirectory}
+      <Folder
+        {onDocumentDrop}
+        folder={{ ...collection.upload.parentDirectory, name: '...' }}
+        collection={collection.config}
+      />
+    {/if}
+
+    {#each collection.upload.directories as folder (folder.id)}
+      <Folder
+        draggable="true"
+        {onDocumentDrop}
+        {folder}
+        collection={collection.config}
+        onDelete={onDeleteFolder}
+      />
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .rz-folders {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--rz-size-40), 1fr));
+    gap: var(--rz-size-2);
+  }
+</style>

package/dist/panel/components/sections/collection/folder/Folders.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CollectionContext } from '../../../../context/collection.svelte.js';
+type Props = {
+    collection: CollectionContext;
+};
+declare const Folders: import("svelte").Component<Props, {}, "">;
+type Folders = ReturnType<typeof Folders>;
+export default Folders;

package/dist/panel/components/sections/collection/grid/CollectionGrid.svelte

@@ -5,24 +5,11 @@
   import type { CollectionContext } from '../../../../context/collection.svelte.js';
   import { FolderPlus } from '@lucide/svelte';
   import Empty from '../Empty.svelte';
-  import Folder from '../folder/FolderWithActions.svelte';
-  import CreateDirectoryDialog from './create-directory-dialog/CreateDirectoryDialog.svelte';
+  import Folders from '../folder/Folders.svelte';
   import GridItem from './grid-item/GridItem.svelte';
 
-  type Props = { collection: CollectionContext };
-  const { collection }: Props = $props();
-
-  let createDirectoryDialogOpen = $state(false);
-
-  const currentPathDocuments = $derived(
-    collection.docs.filter((doc) =>
-      !collection.isUpload ? true : doc._path === collection.upload.currentPath
-    )
-  );
-
-  function onDeleteFolder(path: string) {
-    collection.upload.directories = collection.upload.directories.filter((dir) => dir.id !== path);
-  }
+  type Props = { collection: CollectionContext; oncreatefolder: () => void };
+  const { collection, oncreatefolder }: Props = $props();
 
   const hasContentUnfiltered = $derived(
     !collection.isFiltered &&
@@ -33,20 +20,7 @@
 
   const hasDocsFiltered = $derived(collection.isFiltered && collection.docs.length);
 
-  /**
-   * 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);
-    }
-  }
-
+  // An item is dragged onto a folder only when there is one to drop it on.
   const dragEnabled = $derived(
     collection.isUpload &&
       !!(collection.upload.directories.length || collection.upload.parentDirectory)
@@ -55,58 +29,39 @@
 
 {#if hasContentUnfiltered || hasDocsFiltered}
   <div class="rz-page-collection__grid">
-    <div class="rz-page-collection__grid-inner">
-      <!-- Parent directory -->
-      {#if collection.isUpload && collection.upload.parentDirectory && !collection.isFiltered}
-        <Folder
-          {onDocumentDrop}
-          folder={{ ...collection.upload.parentDirectory, name: '...' }}
-          collection={collection.config}
-        />
-      {/if}
+    <Folders {collection} />
 
-      <!-- All children directories -->
-      {#if !collection.isFiltered && collection.isUpload}
-        {#each collection.upload.directories as folder (folder.id)}
-          <Folder
-            draggable="true"
-            {onDocumentDrop}
-            {folder}
-            collection={collection.config}
-            onDelete={onDeleteFolder}
+    {#if collection.shown.length}
+      <div class="rz-page-collection__grid-inner">
+        {#each collection.shown as doc (doc.id)}
+          <GridItem
+            config={collection.config}
+            toggleSelectOf={collection.toggleSelectOf}
+            isSelectMode={collection.selectMode}
+            draggable={dragEnabled ? 'true' : undefined}
+            {doc}
+            checked={collection.selected.includes(doc.id)}
           />
         {/each}
-      {/if}
-
-      <!-- All children docs -->
-      {#each currentPathDocuments as doc (doc.id)}
-        {@const checked = collection.selected.includes(doc.id)}
-        <GridItem
-          config={collection.config}
-          toggleSelectOf={collection.toggleSelectOf}
-          isSelectMode={collection.selectMode}
-          draggable={dragEnabled ? 'true' : undefined}
-          {doc}
-          {checked}
-        />
-      {/each}
+      </div>
+    {:else if collection.statusFilter !== 'all' || collection.kindFilter !== 'all'}
+      <Empty config={collection.config} />
+    {/if}
 
+    <!-- A right click on the empty space around the items offers a new folder. -->
+    {#if collection.isUpload}
       <ContextMenu>
         {#snippet trigger()}
           <div class="rz-collection-grid__context-menu-trigger"></div>
         {/snippet}
         {#snippet content()}
-          <ContextMenuItem onclick={() => (createDirectoryDialogOpen = true)}>
+          <ContextMenuItem onclick={oncreatefolder}>
             <FolderPlus size="14" />
             {t__('common.create_folder')}
           </ContextMenuItem>
         {/snippet}
       </ContextMenu>
-
-      {#if collection.isUpload}
-        <CreateDirectoryDialog {collection} bind:open={createDirectoryDialogOpen} />
-      {/if}
-    </div>
+    {/if}
   </div>
 {:else}
   <Empty config={collection.config} />
@@ -115,14 +70,19 @@
 <style>
   .rz-page-collection__grid {
     position: relative;
-    min-height: calc(100vh - 16rem);
     z-index: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-5);
+    min-height: calc(100vh - 20rem);
   }
+
   .rz-page-collection__grid-inner {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: var(--rz-size-4);
+    grid-template-columns: repeat(auto-fill, minmax(calc(34 * var(--rz-unit)), 1fr));
+    gap: calc(4.5 * var(--rz-unit)) var(--rz-size-3-5);
   }
+
   .rz-collection-grid__context-menu-trigger {
     position: absolute;
     inset: 0;

package/dist/panel/components/sections/collection/grid/CollectionGrid.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { CollectionContext } from '../../../../context/collection.svelte.js';
 type Props = {
     collection: CollectionContext;
+    oncreatefolder: () => void;
 };
 declare const CollectionGrid: import("svelte").Component<Props, {}, "">;
 type CollectionGrid = ReturnType<typeof CollectionGrid>;

package/dist/panel/components/sections/collection/grid/create-directory-dialog/CreateDirectoryDialog.svelte

@@ -43,11 +43,13 @@
       <form use:form.enhance bind:this={formElement} {...props}>
         <Dialog.Header>{t__('common.create_folder')}</Dialog.Header>
         <RenderFields {form} fields={directoriesConfig.fields} />
-        <Dialog.Footer --rz-justify-content="space-between">
-          <Button data-submit disabled={!form.canSubmit} type="submit">
+        <Dialog.Footer>
+          <Button data-submit disabled={!form.canSubmit} type="submit" kbd="enter">
             {t__('common.create')}
           </Button>
-          <Button variant="secondary" onclick={() => (open = false)}>Cancel</Button>
+          <Button variant="secondary" onclick={() => (open = false)} kbd="escape">
+            {t__('common.cancel')}
+          </Button>
         </Dialog.Footer>
       </form>
     {/snippet}