@puredesktop/puredesktop-ui-bridge 2.1.7 → 2.1.9

package/src/components/common/containers/AppHeader.tsx

@@ -4,10 +4,15 @@ import type { PlatformAppManifest } from '../../../bridge/types.js'
 
 export type { PlatformAppManifest }
 
-export interface AppHeaderProps {
-  manifest: PlatformAppManifest
-  /** Optional slot for the app's tools — the header earns its row. */
-  actions?: React.ReactNode
+export interface AppHeaderProps {
+  manifest: PlatformAppManifest
+  /** Optional slot for the app's tools — the header earns its row. */
+  actions?: React.ReactNode
+  /**
+   * Convention: the open document's file name, shown beside the wordmark
+   * (like any document-based app's window title).
+   */
+  documentName?: React.ReactNode
 }
 
 /**
@@ -28,6 +33,21 @@ const StyledHeader = styled.header`
   background: var(--pure-chrome-wordmark-bar, #fbfbfc);
 `
 
+const DocumentName = styled.span`
+  overflow: hidden;
+  max-width: 36ch;
+  color: var(--platform-colors-text-muted, rgb(46 51 56 / 62%));
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::before {
+    content: '·';
+    margin-right: var(--platform-spacing-sm, 8px);
+    color: var(--platform-colors-text-muted, rgb(46 51 56 / 38%));
+  }
+`
+
 const ActionSlot = styled.div`
   display: flex;
   align-items: center;
@@ -46,17 +66,19 @@ const ActionSlot = styled.div`
 
 export const APP_HEADER_ACTIONS_PORTAL_ID = 'purescience-app-header-actions'
 
-export function AppHeader({
-  manifest,
-  actions,
-}: AppHeaderProps): React.ReactElement {
-  return (
-    <StyledHeader>
-      <PureAppWordmark
-        appName={manifest.navigationLabel ?? manifest.slug}
-        size="sm"
-        accentName
-      />
+export function AppHeader({
+  manifest,
+  actions,
+  documentName,
+}: AppHeaderProps): React.ReactElement {
+  return (
+    <StyledHeader>
+      <PureAppWordmark
+        appName={manifest.navigationLabel ?? manifest.slug}
+        size="sm"
+        accentName
+      />
+      {documentName ? <DocumentName>{documentName}</DocumentName> : null}
       <ActionSlot id={APP_HEADER_ACTIONS_PORTAL_ID}>{actions}</ActionSlot>
     </StyledHeader>
   )

package/src/components/common/documents/DocumentHeaderActions.tsx

@@ -0,0 +1,206 @@
+import { useCallback, type ReactElement } from 'react'
+import { styled } from 'styled-components'
+import { MenuButtonDropdown } from '../dropdown/MenuButtonDropdown.js'
+import type { MenuActionItem, MenuEntry } from '../dropdown/menuTypes.js'
+import type { DocumentLifecycle } from '../../../bridge/react/useDocumentLifecycle.js'
+import { bridge } from '../../../bridge/client.mjs'
+import { PLATFORM_BRIDGE_METHODS } from '../../../bridge/methods.mjs'
+import { suggestPlatformDocumentLocation } from '../../../bridge/documents.mjs'
+
+export interface DocumentHeaderActionsProps {
+  lifecycle: DocumentLifecycle
+  /** Current document title, used when a draft is named-and-filed. */
+  title: string
+  /** App's own menu entries, appended after the shared document actions. */
+  menuItems?: MenuEntry[]
+  onSelectMenuItem?: (item: MenuActionItem) => void
+  /** Open the app's DocumentSwitcher (also reachable via ⌘O). */
+  onOpenSwitcher?: () => void
+  /** Explicit save handler for filed documents; defaults to flush(). */
+  onSave?: () => void
+  saveLabel?: string
+  menuLabel?: string
+}
+
+function savedLabel(savedAt: string | null): string {
+  if (!savedAt) return 'Saved'
+  return `Saved ${new Date(savedAt).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  })}`
+}
+
+/**
+ * The shared document lifecycle cluster for an app's existing header row
+ * (AppFrame `headerActions`): quiet autosave status · filing-location chip ·
+ * a dynamic Save / "Name & file" action · the app's menu with the shared
+ * document actions merged in. One component, no extra bars.
+ */
+export function DocumentHeaderActions({
+  lifecycle,
+  title,
+  menuItems = [],
+  onSelectMenuItem,
+  onOpenSwitcher,
+  onSave,
+  saveLabel = 'Save',
+  menuLabel = 'Options',
+}: DocumentHeaderActionsProps): ReactElement {
+  const { doc } = lifecycle
+
+  // The location chip already says "Drafts" — the status only reports save
+  // state, never duplicates location.
+  const statusText = doc.error
+    ? doc.error
+    : doc.saving
+    ? 'Saving…'
+    : doc.status === 'none'
+    ? ''
+    : savedLabel(doc.savedAt)
+
+  const locationLabel =
+    doc.status === 'draft'
+      ? 'Drafts'
+      : doc.status === 'filed'
+      ? doc.path?.split('/').slice(-2, -1)[0] ?? ''
+      : ''
+
+  const moveDocument = useCallback(async () => {
+    const suggestion = await suggestPlatformDocumentLocation().catch(() => null)
+    const picked = await bridge.call<{ path: string | null }>(
+      PLATFORM_BRIDGE_METHODS.DIALOG_OPEN_FOLDER,
+      [
+        {
+          title: 'Choose a folder for this document',
+          defaultPath: suggestion?.dir,
+        },
+      ],
+    )
+    if (!picked?.path) return
+    await lifecycle.promote(title || 'Untitled', picked.path)
+  }, [lifecycle, title])
+
+  const documentMenuItems: MenuEntry[] = [
+    ...(onOpenSwitcher
+      ? [{ id: 'document-open', label: 'Open…', shortcut: '⌘O' }]
+      : []),
+    { id: 'document-move', label: 'Move…', disabled: !doc.path },
+    { id: 'document-duplicate', label: 'Duplicate', disabled: !doc.path },
+    {
+      id: 'document-reveal-files',
+      label: 'Reveal in PureFiles',
+      disabled: !doc.path,
+    },
+    {
+      id: 'document-reveal-finder',
+      label: 'Find in Finder',
+      disabled: !doc.path,
+    },
+  ]
+  const mergedItems: MenuEntry[] = menuItems.length
+    ? [...documentMenuItems, { type: 'divider' }, ...menuItems]
+    : documentMenuItems
+
+  const handleSelect = useCallback(
+    (item: MenuActionItem) => {
+      if (item.id === 'document-open') onOpenSwitcher?.()
+      else if (item.id === 'document-move') void moveDocument()
+      else if (item.id === 'document-duplicate') void lifecycle.duplicate()
+      else if (item.id === 'document-reveal-files') void lifecycle.openInFiles()
+      else if (item.id === 'document-reveal-finder')
+        void lifecycle.revealInFinder()
+      else onSelectMenuItem?.(item)
+    },
+    [lifecycle, moveDocument, onOpenSwitcher, onSelectMenuItem],
+  )
+
+  const handleSave = useCallback(() => {
+    if (doc.status === 'draft') {
+      void lifecycle.promote(title || 'Untitled')
+      return
+    }
+    if (onSave) onSave()
+    else void lifecycle.flush()
+  }, [doc.status, lifecycle, onSave, title])
+
+  return (
+    <Cluster role="group" aria-label="Document">
+      {statusText ? (
+        <StatusText $error={Boolean(doc.error)} aria-live="polite">
+          {statusText}
+        </StatusText>
+      ) : null}
+      {locationLabel ? (
+        <LocationChip
+          type="button"
+          title={doc.path ?? undefined}
+          onClick={() => void moveDocument()}
+        >
+          {locationLabel}
+        </LocationChip>
+      ) : null}
+      <SaveAction type="button" onClick={handleSave}>
+        {doc.status === 'draft' ? 'Name & file' : saveLabel}
+      </SaveAction>
+      <MenuButtonDropdown
+        label={menuLabel}
+        items={mergedItems}
+        variant="subtle"
+        size="sm"
+        onSelectItem={handleSelect}
+      />
+    </Cluster>
+  )
+}
+
+//#region styled-components
+
+const Cluster = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`
+
+const StatusText = styled.span<{ $error?: boolean }>`
+  color: ${props =>
+    props.$error
+      ? 'var(--platform-colors-danger, #b3261e)'
+      : 'var(--platform-colors-text-muted, rgb(46 51 56 / 60%))'};
+  font-size: 11.5px;
+  white-space: nowrap;
+`
+
+const LocationChip = styled.button`
+  padding: 1px 9px;
+  border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 16%));
+  border-radius: 999px;
+  background: transparent;
+  color: var(--platform-colors-text-muted, rgb(46 51 56 / 66%));
+  font-family: var(--platform-typography-font-family-mono, monospace);
+  font-size: 10.5px;
+  letter-spacing: 0.03em;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--platform-colors-accent, #0067b8);
+    color: var(--platform-colors-text, #1c1a17);
+  }
+`
+
+const SaveAction = styled.button`
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--platform-colors-text-muted, rgb(46 51 56 / 72%));
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--platform-colors-text, #1c1a17);
+  }
+`
+
+//#endregion