rimecms 0.33.0 → 1.0.0

package/dist/panel/components/sections/document/Header.svelte

@@ -3,8 +3,11 @@
   import type { BuiltArea, BuiltCollection } from '../../../../core/config/types';
   import { PARAMS } from '../../../../core/constants';
   import { t__ } from '../../../../core/i18n/index.js';
+  import { getConfigContext } from '../../../context/config.svelte.js';
   import type { DocumentFormContext } from '../../../context/documentForm.svelte.js';
   import { getLocaleContext } from '../../../context/locale.svelte.js';
+  import { formatWhen } from '../../../util/time.js';
+  import { capitalize } from '../../../../util/string.js';
   import { ExternalLink, PencilRuler, X } from '@lucide/svelte';
   import { Button } from '../../ui/button';
   import LanguageSwitcher from '../../ui/language-switcher/LanguageSwitcher.svelte';
@@ -12,6 +15,7 @@
   import SpinLoader from '../../ui/spin-loader/SpinLoader.svelte';
   import ButtonSave from './ButtonSave.svelte';
   import ButtonStatus from './ButtonStatus.svelte';
+  import DocumentUrl from './DocumentUrl.svelte';
   import Settings from './Settings.svelte';
 
   // Props
@@ -25,8 +29,8 @@
   const { form, onClose, config, onLocaleSwitch = invalidateAll }: Props = $props();
 
   const onCloseIsDefined = $derived(!!onClose);
-  const buttonLabel = $derived(form.values.id ? t__('common.save') : t__('common.create'));
   const locale = getLocaleContext();
+  const { raw } = getConfigContext();
 
   /**
    * A word on the auto-save, beside the buttons: a spinner while one is on its way, the reason
@@ -39,6 +43,36 @@
   );
   const autoSavedAt = $derived(form.lastAutoSavedAt ?? form.values.updatedAt);
 
+  /** The heading: the document's title, "Untitled" until it has one. */
+  const untitled = $derived(!form.title || form.title === '[untitled]');
+  const heading = $derived(untitled ? t__('common.untitled') : form.title);
+
+  /**
+   * The line under the heading: what the document is, then who edited it last, and when.
+   *
+   * ```
+   * Page · edited by Anthony, 2 h ago     a collection's document
+   * Edited yesterday                      an area, nobody named
+   * Page                                  a document being created
+   * ```
+   *
+   * A relative time reads mid-sentence, lowercased; a date keeps its case.
+   */
+  const WEEK = 7 * 24 * 60 * 60 * 1000;
+  const meta = $derived.by(() => {
+    const parts: string[] = [];
+    if (config.type === 'collection') parts.push(config.label.singular);
+    if (form.values.id && form.values.updatedAt) {
+      const now = new Date();
+      const formatted = formatWhen(form.values.updatedAt, now, raw.panel.language);
+      const isRelative = now.getTime() - new Date(form.values.updatedAt).getTime() < WEEK;
+      const when = isRelative ? formatted.charAt(0).toLowerCase() + formatted.slice(1) : formatted;
+      const who = form.values.updatedBy?.name;
+      parts.push(who ? t__('common.edited_by', who, when) : t__('common.edited', when));
+    }
+    return capitalize(parts.join(' · '));
+  });
+
   function buildDocumentURL() {
     let url = form.values.url;
     if (url && form.values.versionId) {
@@ -53,116 +87,159 @@
   <Button onclick={() => onClose()} icon={X} variant="text">{t__('common.close')}</Button>
 {/snippet}
 
-<PageHeader topLeft={onCloseIsDefined ? topLeft : undefined}>
-  {#snippet title()}
-    {form.title}
-  {/snippet}
+{#snippet title()}
+  <span class="rz-document-title" data-empty={untitled ? '' : null}>{heading}</span>
+{/snippet}
 
-  {#snippet bottomRight()}
-    {#if showAutoSave}
-      <span class="rz-auto-save-state" data-auto-save-state={form.autoSaveState}>
-        {#if form.autoSaveState === 'saving'}
-          <SpinLoader />
-        {:else if form.autoSaveState === 'paused'}
-          {t__('common.auto_save_paused', form.autoSaveReason ?? '')}
-        {:else if autoSavedAt}
-          {t__(
-            'common.auto_saved_at',
-            locale.dateFormat(autoSavedAt, { short: true, withTime: true })
-          )}
-        {/if}
-      </span>
-    {/if}
-
-    {#if form.values.url}
-      <Button
-        icon={ExternalLink}
-        target="_blank"
-        href={buildDocumentURL()}
-        size="icon-sm"
-        variant="secondary"
-      />
-    {/if}
-
-    {#if config.live && form.values._live}
-      <Button
-        size="icon-sm"
-        variant="secondary"
-        disabled={form.readOnly}
-        class="rz-button-live"
-        icon={PencilRuler}
-        href={form.values._live}
-      ></Button>
-    {/if}
-
-    {#if form.values.id}
-      {/* @ts-ignore form doc is GenericDoc as form.values.id is defined */ null}
-      <Settings {form} />
-    {/if}
-
-    {#if !form.config.versions}
-      <!-- scenario 1: no versions -->
-      <ButtonSave
-        size="sm"
-        label={buttonLabel}
-        disabled={!form.canSubmit}
-        processing={form.processing}
-      />
-    {:else if form.config.versions && !form.config.versions.draft}
-      <!-- scenario 2: versions without draft, a version per save -->
-      <ButtonSave
-        size="sm"
-        label={buttonLabel}
-        disabled={!form.canSubmit}
-        processing={form.processing}
-        data-fork
-        data-submit
-      />
-    {:else if form.config.versions && form.config.versions.draft && form.values.status === 'published'}
-      {#if form.values.id}
+{#snippet metaLine()}
+  <span class="rz-document-meta">{meta}</span>
+{/snippet}
+
+{#snippet urlLine()}
+  <DocumentUrl {form} {config} />
+{/snippet}
+
+<!-- The bar: the breadcrumb, then the actions. Under it, the heading and the meta line. -->
+<PageHeader
+  topLeft={onCloseIsDefined ? topLeft : undefined}
+  {title}
+  meta={meta ? metaLine : undefined}
+  aside={form.values.url ? urlLine : undefined}
+>
+  {#snippet topRight()}
+    <!-- Ghost buttons, then the primary one: open, language, status, menu, save. -->
+    <div class="rz-document-actions">
+      {#if showAutoSave}
+        <span class="rz-auto-save-state" data-auto-save-state={form.autoSaveState}>
+          {#if form.autoSaveState === 'saving'}
+            <SpinLoader />
+          {:else if form.autoSaveState === 'paused'}
+            {t__('common.auto_save_paused', form.autoSaveReason ?? '')}
+          {:else if autoSavedAt}
+            {t__(
+              'common.auto_saved_at',
+              locale.dateFormat(autoSavedAt, { short: true, withTime: true })
+            )}
+          {/if}
+        </span>
+      {/if}
+
+      {#if form.values.url}
+        <Button
+          icon={ExternalLink}
+          target="_blank"
+          href={buildDocumentURL()}
+          size="icon-sm"
+          variant="ghost"
+          class="rz-document-actions__open"
+          aria-label={t__('common.view_page')}
+        />
+      {/if}
+
+      {#if config.live && form.values._live}
+        <Button
+          size="icon-sm"
+          variant="ghost"
+          disabled={form.readOnly}
+          class="rz-button-live"
+          icon={PencilRuler}
+          href={form.values._live}
+        ></Button>
+      {/if}
+
+      {#if form.nestedLevel === 0}
+        <LanguageSwitcher onLocalClick={onLocaleSwitch} />
+      {/if}
+
+      {#if form.config.versions?.draft && form.values.id}
         <ButtonStatus {form} />
       {/if}
 
-      <!-- scenario 3: versions and draft, on a published doc -->
-      <ButtonSave
-        size="sm"
-        disabled={!form.canSubmit}
-        processing={form.processing}
-        label={buttonLabel}
-        data-status="published"
-        data-submit
-      />
-    {:else if form.config.versions && form.config.versions.draft && form.values.status === 'draft'}
       {#if form.values.id}
-        <ButtonStatus {form} />
+        {/* @ts-ignore form doc is GenericDoc as form.values.id is defined */ null}
+        <Settings {form} />
       {/if}
-      <!-- scenario 4: versions and draft, on a draft doc -->
-
-      <!-- PUBLISH -->
-      <ButtonSave
-        size="sm"
-        disabled={!form.canSubmit}
-        processing={form.processing}
-        label={buttonLabel}
-        data-submit
-      />
-    {/if}
-  {/snippet}
 
-  {#snippet topRight()}
-    <LanguageSwitcher onLocalClick={onLocaleSwitch} />
+      <ButtonSave {form} size="sm" />
+    </div>
   {/snippet}
 </PageHeader>
 
 <style>
+  /*
+   * The bar's buttons, 28px high: ghost ones in the muted ink, their icons subtler, both
+   * darkening on hover or while their menu is open; the primary one last, a little apart.
+   */
+  .rz-document-actions {
+    --rz-button-ghost-fg: var(--rz-fg-muted);
+    display: flex;
+    align-items: center;
+    gap: var(--rz-size-0-5);
+
+    :global(.rz-button) {
+      height: var(--rz-size-7);
+      gap: var(--rz-size-1-5);
+      padding-inline: var(--rz-size-2-5);
+    }
+
+    :global(.rz-button--size-icon-sm) {
+      width: var(--rz-size-7);
+      padding: 0;
+    }
+
+    :global(.rz-button__icon) {
+      width: auto;
+      height: auto;
+    }
+
+    :global(.rz-button--ghost svg) {
+      color: var(--rz-fg-subtle);
+      transition: color 0.15s;
+    }
+
+    :global(
+      .rz-button--ghost:is(:hover, [aria-expanded='true'], [data-state='open']):not(:disabled)
+    ) {
+      color: var(--rz-fg);
+    }
+
+    :global(
+      .rz-button--ghost:is(:hover, [aria-expanded='true'], [data-state='open']):not(:disabled) svg
+    ) {
+      color: var(--rz-fg);
+    }
+
+    :global(.rz-button--default) {
+      margin-left: var(--rz-size-1-5);
+      padding-inline: var(--rz-size-3);
+    }
+  }
+
   .rz-auto-save-state {
     display: inline-flex;
     align-items: center;
+    margin-right: var(--rz-size-2);
     font-size: var(--rz-text-xs);
-    color: hsl(var(--rz-gray-10));
+    color: var(--rz-fg-subtle);
     white-space: nowrap;
   }
   .rz-auto-save-state[data-auto-save-state='paused'] {
-    color: hsl(var(--rz-color-warn));
+    color: var(--rz-warn);
+  }
+
+  /* On a narrow page the auto-save note and the open button go. */
+  @container main (max-width: 30rem) {
+    .rz-auto-save-state,
+    .rz-document-actions :global(.rz-document-actions__open) {
+      display: none;
+    }
+  }
+
+  .rz-document-title[data-empty] {
+    color: var(--rz-fg-subtle);
+  }
+
+  .rz-document-meta {
+    font-size: var(--rz-text-sm);
   }
 </style>