rimecms 0.33.0 → 1.0.0

package/dist/panel/pages/collection/CollectionPage.svelte

@@ -1,13 +1,24 @@
 <script lang="ts">
-  import { invalidateAll } from '$app/navigation';
+  import { goto, invalidateAll } from '$app/navigation';
+  import type { ResolvedPathname } from '$app/types';
+  import { PARAMS } from '../../../core/constants.js';
+  import { t__ } from '../../../core/i18n/index.js';
+  import { panelPath } from '../../../core/routes/util.js';
+  import { UPLOAD_PATH } from '../../../core/prototype/collection/upload/constant.js';
   import type { Directory } from '../../../core/prototype/collection/upload/types.js';
+  import { VERSIONS_STATUS } from '../../../core/prototype/shared/versions/constant.js';
   import type { GenericDoc } from '../../../core/prototype/types';
   import BulkUploadDialog from '../../components/sections/collection/bulk-upload/BulkUploadDialog.svelte';
+  import PageDrop from '../../components/sections/collection/bulk-upload/PageDrop.svelte';
   import CollectionGrid from '../../components/sections/collection/grid/CollectionGrid.svelte';
+  import CreateDirectoryDialog from '../../components/sections/collection/grid/create-directory-dialog/CreateDirectoryDialog.svelte';
   import ButtonCreate from '../../components/sections/collection/header/ButtonCreate.svelte';
-  import CollectionHeader from '../../components/sections/collection/header/Header.svelte';
+  import DisplayMode from '../../components/sections/collection/header/DisplayMode.svelte';
+  import FilterMenu from '../../components/sections/collection/header/FilterMenu.svelte';
   import SearchInput from '../../components/sections/collection/header/SearchInput.svelte';
-  import Separator from '../../components/sections/collection/header/Separator.svelte';
+  import SelectUI from '../../components/sections/collection/header/SelectUI.svelte';
+  import type { KindFilter, StatusFilter } from '../../context/collection.svelte.js';
+  import { fileSizeLabel, type UploadTarget } from '../../util/upload-file.js';
   import CollectionList from '../../components/sections/collection/list/CollectionList.svelte';
   import CollectionTree from '../../components/sections/collection/tree/CollectionTree.svelte';
   import Page from '../../components/sections/page-layout/Page.svelte';
@@ -15,10 +26,19 @@
   import Button from '../../components/ui/button/button.svelte';
   import LanguageSwitcher from '../../components/ui/language-switcher/LanguageSwitcher.svelte';
   import PageHeader from '../../components/ui/page-header/PageHeader.svelte';
-  import { setCollectionContext } from '../../context/collection.svelte.js';
+  import { DISPLAY_MODE, setCollectionContext } from '../../context/collection.svelte.js';
+  import { useCommands } from '../../context/commands.svelte.js';
   import { getConfigContext } from '../../context/config.svelte.js';
   import { getTitleContext } from '../../context/title';
-  import { CopyPlus } from '@lucide/svelte';
+  import {
+    CirclePlus,
+    FolderPlus,
+    LayoutGrid,
+    List,
+    ListTree,
+    Search,
+    Upload
+  } from '@lucide/svelte';
 
   type Props = {
     slug: string;
@@ -38,6 +58,7 @@
   const config = getConfigContext();
   const collectionConfig = $derived(config.getCollection(slug));
   let bulkDialogOpen = $state(false);
+  let folderDialogOpen = $state(false);
 
   // Created once: `Collection.svelte` keys this page on slug, locale and upload folder, so a
   // change that needs a new store remounts it. The effects below carry a reload into it.
@@ -66,81 +87,235 @@
   $effect(() => {
     titleContext.value = collection.config.label.plural;
   });
+
+  /** A count in words: `1 file`, `24 documents`, `3 drafts`. */
+  const counted = (key: string, count: number) =>
+    t__(count === 1 ? key : `${key}|m|p`, String(count));
+
+  // 24 documents · 3 drafts, or 486 files · 1.2 GB · drop files anywhere to upload them
+  const metaLine = $derived.by(() => {
+    const countKey = collection.isUpload
+      ? 'common.collection_count_files'
+      : 'common.collection_count';
+    const parts = [counted(countKey, collection.total)];
+    if (collection.draftsCount) {
+      parts.push(counted('common.collection_count_drafts', collection.draftsCount));
+    }
+    if (collection.isUpload && collection.totalSize) {
+      parts.push(fileSizeLabel(collection.totalSize));
+    }
+    if (collection.isUpload && collection.canCreate) {
+      parts.push(t__('common.drop_anywhere'));
+    }
+    return parts.join(' · ');
+  });
+
+  const statusOptions = $derived([
+    { value: 'all', label: t__('common.all') },
+    { value: VERSIONS_STATUS.DRAFT, label: t__('common.draft') },
+    { value: VERSIONS_STATUS.PUBLISHED, label: t__('common.published') }
+  ]);
+
+  // All types, Images, Documents… from the files the collection holds.
+  const kindOptions = $derived([
+    { value: 'all', label: t__('fields.all_types') },
+    ...collection.kinds.map((kind) => ({ value: kind, label: t__(`common.media_kind_${kind}`) }))
+  ]);
+
+  /** Where uploaded files go: the folder on screen. */
+  const uploadTarget = $derived<UploadTarget | null>(
+    collection.isUpload
+      ? {
+          url: collection.apiUrl,
+          path: collection.upload.currentPath,
+          accept: collection.config.upload?.accept
+        }
+      : null
+  );
+
+  // root:press:team -> team; root -> the collection's name
+  const folderName = $derived.by(() => {
+    if (!collection.isUpload) return '';
+    const name = collection.upload.currentPath.split(UPLOAD_PATH.SEPARATOR).at(-1);
+    return !name || name === UPLOAD_PATH.ROOT_NAME ? collection.title : name;
+  });
+
+  const createPath = () => {
+    const path = panelPath(collection.config.kebab, 'create');
+    return collection.isUpload
+      ? (`${path}?${PARAMS.UPLOAD_PATH}=${collection.upload.currentPath}` as ResolvedPathname)
+      : path;
+  };
+
+  const searchInput = () =>
+    document.querySelector<HTMLInputElement>('.rz-header-search-input input');
+
+  /** What the list offers: a document, the search, the folders and uploads, the display. */
+  useCommands(() => {
+    const group = collection.title;
+    const label = collection.config.label;
+    const displays = [
+      { mode: DISPLAY_MODE.LIST, label: t__('common.show_as_list'), icon: List },
+      { mode: DISPLAY_MODE.GRID, label: t__('common.show_as_grid'), icon: LayoutGrid },
+      ...(collection.config.nested
+        ? [{ mode: DISPLAY_MODE.NESTED, label: t__('common.show_as_tree'), icon: ListTree }]
+        : [])
+    ];
+    return [
+      {
+        id: 'collection.create',
+        label: label.create || t__('common.create_new', label.singular),
+        group,
+        icon: CirclePlus,
+        // An upload collection creates its documents through the upload.
+        when: () => collection.canCreate && !collection.isUpload,
+        run: () => goto(createPath())
+      },
+      {
+        id: 'collection.search',
+        label: t__('common.search_in', collection.title),
+        group,
+        icon: Search,
+        when: () => !!searchInput()?.offsetParent,
+        run: () => searchInput()?.focus()
+      },
+      ...(collection.isUpload
+        ? [
+            {
+              id: 'collection.folder',
+              label: t__('common.create_folder'),
+              group,
+              icon: FolderPlus,
+              run: () => (folderDialogOpen = true)
+            },
+            {
+              id: 'collection.bulk_upload',
+              label: t__('common.collection_upload'),
+              group,
+              icon: Upload,
+              when: () => collection.canCreate,
+              run: () => (bulkDialogOpen = true)
+            }
+          ]
+        : []),
+      ...displays.map((display) => ({
+        id: `collection.display.${display.mode}`,
+        label: display.label,
+        group,
+        icon: display.icon,
+        when: () => collection.display !== display.mode,
+        run: () => (collection.display = display.mode)
+      }))
+    ];
+  });
 </script>
 
 {#if data.status === 200}
   <Page>
     {#snippet main()}
-      <PageHeader>
-        {#snippet title()}
-          {collection.title}
-        {/snippet}
-
-        {#snippet bottomLeft()}
-          {#if collection.canCreate}
-            <ButtonCreate config={collection.config} size="sm" />
-          {/if}
-          {#if collection.isUpload}
-            <Separator />
-            <Button
-              onclick={() => (bulkDialogOpen = true)}
-              icon={CopyPlus}
-              size="sm"
-              variant="text"
-            >
-              Bulk upload
-            </Button>
+      <div class="rz-collection">
+        <PageHeader>
+          {#snippet topRight()}
+            {#each config.raw.panel.components.collectionHeader || [] as CustomHeaderComponent, index (index)}
+              <CustomHeaderComponent config={collectionConfig} />
+            {/each}
+
+            <LanguageSwitcher onLocalClick={() => invalidateAll()} />
+
+            {#if collection.isUpload}
+              <Button
+                variant="ghost"
+                size="sm"
+                icon={FolderPlus}
+                aria-label={t__('common.create_folder')}
+                onclick={() => (folderDialogOpen = true)}
+              >
+                <span class="rz-collection__folder-label">{t__('common.create_folder')}</span>
+              </Button>
+              {#if collection.canCreate}
+                <Button size="sm" icon={Upload} onclick={() => (bulkDialogOpen = true)}>
+                  {t__('common.collection_upload')}
+                </Button>
+              {/if}
+            {:else if collection.canCreate}
+              <ButtonCreate config={collection.config} variant="default" />
+            {/if}
+          {/snippet}
+
+          {#snippet title()}
+            {collection.title}
+          {/snippet}
+
+          {#snippet meta()}
+            {metaLine}
+          {/snippet}
+
+          {#snippet bottomLeft()}
+            <SearchInput />
+            {#if !collection.isNested()}
+              {#if collection.hasDraft}
+                <FilterMenu
+                  label={t__('common.status')}
+                  options={statusOptions}
+                  value={collection.statusFilter}
+                  onchange={(value) => (collection.statusFilter = value as StatusFilter)}
+                />
+              {/if}
+              {#if collection.isUpload}
+                <FilterMenu
+                  label={t__('fields.all_types')}
+                  options={kindOptions}
+                  value={collection.kindFilter}
+                  onchange={(value) => (collection.kindFilter = value as KindFilter)}
+                />
+              {/if}
+            {/if}
+            <DisplayMode />
+            {#if !collection.isNested()}
+              <SelectUI />
+            {/if}
+          {/snippet}
+        </PageHeader>
+
+        <div class="rz-collection__docs">
+          {#if collection.isNested()}
+            <CollectionTree {collection} />
+          {:else if collection.isGrid()}
+            <CollectionGrid {collection} oncreatefolder={() => (folderDialogOpen = true)} />
+          {:else}
+            <CollectionList {collection} />
           {/if}
-          <CollectionHeader />
-        {/snippet}
-
-        {#snippet topRight()}
-          {#each config.raw.panel.components.collectionHeader || [] as CustomHeaderComponent, index (index)}
-            <CustomHeaderComponent config={collectionConfig} />
-          {/each}
-
-          <LanguageSwitcher onLocalClick={() => invalidateAll()} />
-        {/snippet}
-
-        {#snippet bottomRight()}
-          <SearchInput />
-        {/snippet}
-      </PageHeader>
-
-      <div class="rz-collection__docs">
-        {#if collection.isNested()}
-          <CollectionTree {collection} />
-        {:else if collection.isGrid()}
-          <CollectionGrid {collection} />
-        {:else}
-          <CollectionList {collection} />
-        {/if}
+        </div>
       </div>
     {/snippet}
   </Page>
 
-  <BulkUploadDialog {collection} bind:open={bulkDialogOpen} />
+  {#if uploadTarget}
+    <BulkUploadDialog target={uploadTarget} bind:open={bulkDialogOpen} />
+    <CreateDirectoryDialog {collection} bind:open={folderDialogOpen} />
+    {#if collection.canCreate}
+      <PageDrop target={uploadTarget} folder={folderName} disabled={bulkDialogOpen} />
+    {/if}
+  {/if}
 {:else}
   <Unauthorized />
 {/if}
 
 <style>
+  /* The documents run the full width, inside the page's gutter, like the title and the toolbar. */
   .rz-collection__docs {
     container: collection-area / inline-size;
     width: 100%;
     text-align: left;
-    padding: var(--rz-size-6) var(--rz-page-gutter);
-    & :global(.rz-scroll-area) {
-      height: calc(100vh - 7.5rem);
-      width: 100%;
-    }
-    & :global(.rz-scroll-area--grid) {
-      height: calc(100vh - 3.5rem);
-      background-color: hsl(var(--rz-gray-10));
-    }
-    & :global(.rz-scroll-area--nested) {
-      height: calc(100vh - 3.5rem);
-      background-color: hsl(var(--rz-gray-10));
+    padding-top: var(--rz-size-2);
+    padding-bottom: var(--rz-size-20);
+    padding-inline: var(--rz-page-gutter);
+  }
+
+  /* On a narrow page, "New folder" keeps its icon alone. */
+  @container main (max-width: 40rem) {
+    .rz-collection__folder-label {
+      display: none;
     }
   }
 </style>

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

@@ -23,7 +23,7 @@ export async function collectionLoad(event) {
         latest: true
     });
     let aria = [
-        { title: 'Dashboard', url: rime.routes.panelUrl() },
+        { title: 'Dashboard', icon: 'dashboard', url: rime.routes.panelUrl() },
         { title: collection.config.label.plural }
     ];
     let data = {

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

@@ -2,32 +2,63 @@
   import { invalidateAll } from '$app/navigation';
   import type { User } from '../../../core/auth/types.js';
   import { t__ } from '../../../core/i18n/index.js';
+  import When from '../../components/sections/collection/When.svelte';
   import Page from '../../components/sections/page-layout/Page.svelte';
   import Button from '../../components/ui/button/button.svelte';
   import LanguageSwitcher from '../../components/ui/language-switcher/LanguageSwitcher.svelte';
   import PageHeader from '../../components/ui/page-header/PageHeader.svelte';
   import { getConfigContext } from '../../context/config.svelte.js';
   import { Eye } from '@lucide/svelte';
+  import DashboardCard from './DashboardCard.svelte';
   import DashboardCollection from './DashboardCollection.svelte';
+  import DashboardRow from './DashboardRow.svelte';
+  import { formatDay, greetingKey } from './time.js';
   import type { DashboardEntry } from './types.js';
 
+  type CollectionEntry = Extract<DashboardEntry, { prototype: 'collection' }>;
+  type AreaEntry = Extract<DashboardEntry, { prototype: 'area' }>;
+
   type Props = { entries: DashboardEntry[]; user?: User };
   const { entries, user }: Props = $props();
 
   const config = getConfigContext();
+  const language = $derived(config.raw.panel.language);
+  const CustomDashBoard = $derived(config.raw.panel.components.dashboard);
+
+  const now = new Date();
+  const firstName = $derived(user?.name.split(' ')[0] ?? '');
+
+  const collections = $derived(
+    entries.filter((e): e is CollectionEntry => e.prototype === 'collection')
+  );
+  const areas = $derived(entries.filter((e): e is AreaEntry => e.prototype === 'area'));
+  const areasIcon = $derived(
+    config.raw.panel.navigation.groups.find((group) => group.label === 'areas')?.icon
+  );
+
+  // The content on the left; the site's areas and its people on the right.
+  const isPeople = (entry: CollectionEntry) => !!config.getCollection(entry.slug).auth;
+  const contents = $derived(collections.filter((entry) => !isPeople(entry)));
+  const people = $derived(collections.filter(isPeople));
+  const hasSide = $derived(areas.length > 0 || people.length > 0);
+
+  // Saturday, September 26 · 3 drafts waiting
+  const metaLine = $derived.by(() => {
+    const drafts = collections.reduce((sum, entry) => sum + (entry.drafts ?? 0), 0);
+    const day = formatDay(now, language);
+    if (!drafts) return day;
+    const key = drafts === 1 ? 'common.drafts_waiting' : 'common.drafts_waiting|m|p';
+    return `${day} · ${t__(key, String(drafts))}`;
+  });
 </script>
 
 <Page>
   {#snippet main()}
     <div class="rz-dashboard">
       <PageHeader>
-        {#snippet title()}
-          {t__('common.welcome')} {user!.name}
-        {/snippet}
-
         {#snippet topRight()}
           {#if config.raw.siteUrl}
-            <Button variant="text" target="_blank" icon={Eye} href={config.raw.siteUrl}>
+            <Button variant="ghost" size="sm" target="_blank" icon={Eye} href={config.raw.siteUrl}>
               {t__('common.view_site')}
             </Button>
           {/if}
@@ -39,114 +70,128 @@
         {/snippet}
       </PageHeader>
 
-      {#if config.raw.panel.components.dashboard}
-        {@const CustomDashBoard = config.raw.panel.components.dashboard}
-        <CustomDashBoard {entries} />
-      {:else}
-        <div class="rz-dashboard__content">
-          <div class="rz-dashboard__collections">
-            {#each entries.filter((e) => e.prototype === 'collection') as entry, index (index)}
-              <DashboardCollection {entry} />
-            {/each}
-          </div>
-          <div class="rz-dashboard__areas">
-            {#each entries.filter((e) => e.prototype === 'area') as entry, index (index)}
-              {@const Icon = config.raw.icons[entry.slug]}
-              <a class="rz-dashboard__area" href={entry.link}>
-                <div class="rz-dashboard__area-icon">
-                  <Icon size="16" strokeWidth="1" />
-                </div>
-                <div>
-                  <header>
-                    <h2>{entry.title}</h2>
-                  </header>
-                  {#if entry.description}
-                    <p class="rz-dashboard__area-description">{entry.description}</p>
-                  {/if}
-                </div>
-              </a>
-            {/each}
+      <div class="rz-dashboard__body">
+        <header class="rz-dashboard__head">
+          <h1 class="rz-dashboard__title">{t__(greetingKey(now.getHours()), firstName)}</h1>
+          <p class="rz-dashboard__meta">{metaLine}</p>
+        </header>
+
+        {#if !CustomDashBoard}
+          <div
+            class="rz-dashboard__content"
+            class:rz-dashboard__content--split={contents.length > 0 && hasSide}
+          >
+            {#if contents.length}
+              <div class="rz-dashboard__collections">
+                {#each contents as entry (entry.slug)}
+                  <DashboardCollection {entry} {now} />
+                {/each}
+              </div>
+            {/if}
+
+            {#if hasSide}
+              <div class="rz-dashboard__areas">
+                {#if areas.length}
+                  <DashboardCard title={t__('common.areas')} icon={areasIcon}>
+                    <ul>
+                      {#each areas as entry (entry.slug)}
+                        <DashboardRow
+                          href={entry.link}
+                          title={entry.title}
+                          icon={config.raw.icons[entry.slug]}
+                          description={entry.description}
+                        >
+                          {#if entry.updatedAt}
+                            <When date={entry.updatedAt} {now} />
+                          {/if}
+                        </DashboardRow>
+                      {/each}
+                    </ul>
+                  </DashboardCard>
+                {/if}
+                {#each people as entry (entry.slug)}
+                  <DashboardCollection {entry} {now} />
+                {/each}
+              </div>
+            {/if}
           </div>
-        </div>
+        {/if}
+      </div>
+
+      {#if CustomDashBoard}
+        <CustomDashBoard {entries} />
       {/if}
     </div>
   {/snippet}
 </Page>
 
-<style>.rz-dashboard {
-    background-color: hsl(var(--rz-color-bg));
-    min-height: 100vh;
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
 
-    h2 {
-      font-size: var(--rz-text-lg);
-      font-variation-settings: 'wght' 500;
-      font-weight: 500;
-    }
-  }
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
 
-  .rz-dashboard__collections {
-    grid-column: span 2;
-    display: grid;
-    gap: var(--rz-size-6);
+/* 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 {
+    background-color: var(--rz-bg-page);
+    min-height: 100vh;
   }
 
-  .rz-dashboard__areas {
-    grid-column: span 1;
-    gap: var(--rz-size-4);
+  /* The full width, inside the page's gutter. */
+  .rz-dashboard__body {
+    container: rz-dashboard / inline-size;
     display: flex;
     flex-direction: column;
+    gap: var(--rz-size-5);
+    padding: var(--rz-size-4) var(--rz-page-gutter) var(--rz-size-6);
   }
 
-  .rz-dashboard__area {
-    background-color: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-3)));
-    border: var(--rz-border);
-    border-radius: var(--rz-radius-xl);
-    padding: var(--rz-size-4);
-    position: relative;
-    min-height: 130px;
+  .rz-dashboard__head {
     display: flex;
     flex-direction: column;
-    gap: var(--rz-size-4);
-    transition: background-color 0.3s ease-out;
-
-    &:hover {
-      background-color: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-4)));
-    }
-
-    :global(svg) {
-      opacity: 0.7;
-      z-index: 0;
-    }
-
-    header {
-      display: flex;
-      align-items: center;
-      gap: var(--rz-size-2);
-    }
+    gap: var(--rz-size-1-5);
   }
-  .rz-dashboard__area-icon {
-    width: var(--rz-size-8);
-    height: var(--rz-size-8);
-    background-color: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-0)));
-    border-radius: var(--rz-size-10);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+
+  .rz-dashboard__title {
+    font-size: var(--rz-text-4xl);
+    font-variation-settings: 'wght' 600;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    line-height: 1.15;
   }
 
-  .rz-dashboard__area-description {
-    opacity: 0.5;
-    margin-top: var(--rz-size-1);
+  .rz-dashboard__meta {
+    color: var(--rz-fg-subtle);
   }
 
   .rz-dashboard__content {
     display: grid;
-    gap: var(--rz-size-16);
-    padding: var(--rz-size-8) var(--rz-page-gutter);
-    height: 100%;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    @media (min-width: 1024px) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--rz-size-3-5);
+    align-items: start;
+    padding-bottom: var(--rz-size-14);
+  }
+
+  /* Collections on the left, areas on the right, once there is room for both. */
+  @container rz-dashboard (min-width: 44rem) {
+    .rz-dashboard__content--split {
+      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
     }
   }
+
+  .rz-dashboard__collections,
+  .rz-dashboard__areas {
+    display: flex;
+    flex-direction: column;
+    gap: var(--rz-size-3-5);
+    min-width: 0;
+  }
 </style>