fuck

frontend/src/documents/DocumentSummarySection.tsx

@@ -1,14 +1,16 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import type { FormEvent } from 'react';
-import { EditIcon, IconX, PlusIcon } from '../ui/icons';
-import SelectionAssignmentMenu, { SelectionAssignmentMenuItem } from './SelectionAssignmentMenu';
+import React, { useCallback, useEffect, useMemo, useState, type ReactNode, type FormEvent } from 'react';
+import { EditIcon, IconX, CheckIcon, PlusIcon } from '../ui/icons';
+import SelectionAssignmentMenu, {
+  SelectionAssignmentMenuItem,
+  type NormalizedSelectionAssignmentItem,
+} from './SelectionAssignmentMenu';
 import { getTagColorStyle } from '../utils/colors';
 import {
   formatDate,
   toDateInputValue,
   toIssuedTimestamp,
 } from '../utils/date';
-import { describeDocumentSummary } from './documentSummary';
+import { describeDocumentSummary, type DocumentSummaryRow } from './documentSummary';
 import { isPlainObject } from '../utils/typeGuards';
 
 type Identifier = string | number;
@@ -70,7 +72,14 @@ export interface DocumentSummarySectionProps {
   onUpdateTitle?: (docId: Identifier | undefined, title: string) => Promise<boolean> | boolean;
   onUpdateIssued?: (docId: Identifier | undefined, timestamp: number | null) => Promise<boolean> | boolean;
   layout?: 'default' | 'compact';
-  detailItems?: Array<{ label?: string; value?: string }>;
+}
+
+interface MetaItem {
+  key: string;
+  label: string;
+  valueContent?: React.ReactNode | null;
+  fallbackValue?: string | null;
+  error?: string | null;
 }
 
 export const sortCorrespondents = (entries = []) =>
@@ -122,7 +131,7 @@ const resolveOptionName = (source?: QuickAddOption | string | null): string => {
   return `${source}`.trim();
 };
 
-const normalizeQuickAddOption = (option: QuickAddOption | string | null | undefined): QuickAddEntry | null => {
+const normalizeQuickAddOption = (option?: QuickAddOption | string | null): QuickAddEntry | null => {
   if (option == null) {
     return null;
   }
@@ -227,7 +236,7 @@ export const TagSection: React.FC<TagSectionProps> = ({
   }, [normalizedOptions, tags]);
 
   const handleAssignmentSelect = useCallback(
-    (item: SelectionAssignmentMenuItem | null) => {
+    (item: NormalizedSelectionAssignmentItem) => {
       if (!item) {
         return;
       }
@@ -271,11 +280,7 @@ export const TagSection: React.FC<TagSectionProps> = ({
           showCounts={false}
           positionStrategy="fixed"
           triggerClassName="quick-add__chip quick-add__trigger"
-          triggerContent={(
-            <span className="quick-add__chip-label">
-              <PlusIcon className="icon-inline" aria-hidden="true" /> Add tag
-            </span>
-          )}
+      triggerContent={<PlusIcon className="icon-inline" aria-hidden="true" />}
         />
       ) : null}
       {!tags.length && !showQuickAdd ? <span className="tag-list__empty meta">{emptyMessage}</span> : null}
@@ -356,7 +361,7 @@ export const CorrespondentSection: React.FC<CorrespondentSectionProps> = ({
   }, [normalizedOptions, entries]);
 
   const handleAssignmentSelect = useCallback(
-    (item: SelectionAssignmentMenuItem | null) => {
+    (item: NormalizedSelectionAssignmentItem) => {
       if (!onAdd || !item) {
         return;
       }
@@ -411,11 +416,7 @@ export const CorrespondentSection: React.FC<CorrespondentSectionProps> = ({
           showCounts={false}
           positionStrategy="fixed"
           triggerClassName="quick-add__chip quick-add__trigger"
-          triggerContent={(
-            <span className="quick-add__chip-label">
-              <PlusIcon className="icon-inline" aria-hidden="true" /> Add correspondent
-            </span>
-          )}
+      triggerContent={<PlusIcon className="icon-inline" aria-hidden="true" />}
         />
       ) : null}
     </div>
@@ -435,20 +436,9 @@ const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
   onUpdateTitle,
   onUpdateIssued,
   layout = 'default',
-  detailItems = [],
 }) => {
   const isCompactLayout = layout === 'compact';
-  const summary = useMemo(() => {
-    if (!document) {
-      return {
-        title: '',
-        originalName: '',
-        sizeLabel: '—',
-        pageCount: null,
-      };
-    }
-    return describeDocumentSummary(document);
-  }, [document]);
+  const summaryRows = useMemo(() => describeDocumentSummary(document), [document]);
   const issuedDateLabel = useMemo(
     () => formatDate(document?.issued_at, { fallback: null }),
     [document?.issued_at],
@@ -475,8 +465,8 @@ const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
     return sortCorrespondents(document?.correspondents || []);
   }, [correspondents, document?.correspondents]);
 
-  const metaRows = useMemo(() => {
-    const rows: { key: string; label: string; value: string | null }[] = [];
+  const extraSummaryRows = useMemo(() => {
+    const rows: DocumentSummaryRow[] = [];
     const currentVersionNumber = document?.current_version?.version_number;
     if (Number.isFinite(currentVersionNumber)) {
       rows.push({
@@ -485,17 +475,8 @@ const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
         value: `#${currentVersionNumber}`,
       });
     }
-
-    if (summary.sizeLabel && summary.sizeLabel !== '—') {
-      rows.push({ key: 'size', label: 'Size', value: summary.sizeLabel });
-    }
-
-    if (Number.isFinite(summary.pageCount)) {
-      rows.push({ key: 'pages', label: 'Pages', value: String(summary.pageCount) });
-    }
-
     return rows;
-  }, [document?.current_version?.version_number, summary]);
+  }, [document?.current_version?.version_number]);
 
   const [titleDraft, setTitleDraft] = useState('');
   const [titleSaving, setTitleSaving] = useState(false);
@@ -595,57 +576,60 @@ const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
     return null;
   }
 
-  const TitleSection = () => (
-    editableTitle && isTitleEditing ? (
-      <form className="doc-title-edit" onSubmit={submitTitleEdit}>
-        <input
-          value={titleDraft}
-          onChange={(event) => {
-            setTitleDraft(event.target.value);
-            if (titleError) {
-              setTitleError(null);
-            }
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Escape') {
-              event.preventDefault();
-              cancelTitleEdit();
-            }
-          }}
-          aria-label="Document title"
-          autoFocus
-          disabled={titleSaving}
-        />
-        <button type="submit" disabled={titleSaving}>
-          Save
-        </button>
-        <button
-          type="button"
-          className="secondary"
-          onClick={cancelTitleEdit}
-          disabled={titleSaving}
-        >
-          Cancel
-        </button>
-      </form>
-    ) : (
-      <>
-        <h3 className="doc-title-row__title">{summary.title}</h3>
-        {editableTitle ? (
-          <button
-            type="button"
-            className="icon-button"
-            onClick={startTitleEdit}
-            aria-label="Edit title"
-            title="Edit title"
-          >
-            <EditIcon className="icon-inline" />
-          </button>
-        ) : null}
-      </>
-    )
+  const renderTitleEditForm = (extraClassName?: string) => (
+    <form className={`doc-title-edit${extraClassName ? ` ${extraClassName}` : ''}`} onSubmit={submitTitleEdit}>
+      <input
+        value={titleDraft}
+        onChange={(event) => {
+          setTitleDraft(event.target.value);
+          if (titleError) {
+            setTitleError(null);
+          }
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            event.preventDefault();
+            cancelTitleEdit();
+          }
+        }}
+        aria-label="Document title"
+        autoFocus
+        disabled={titleSaving}
+      />
+      <button type="submit" className="icon-button icon-button--accent" disabled={titleSaving} aria-label="Save title">
+        <CheckIcon size={16} />
+      </button>
+      <button
+        type="button"
+        className="icon-button"
+        onClick={cancelTitleEdit}
+        disabled={titleSaving}
+        aria-label="Cancel"
+      >
+        <IconX size={16} />
+      </button>
+    </form>
   );
 
+  const titleMetaDisplay = editableTitle && isTitleEditing
+    ? renderTitleEditForm('doc-title-edit--inline')
+    : (
+        <>
+          <span className="detail-meta__value">{document?.title}</span>
+          {editableTitle ? (
+            <button
+              type="button"
+              className="icon-button"
+              onClick={startTitleEdit}
+              aria-label="Edit title"
+              title="Edit title"
+            >
+              <EditIcon className="icon-inline" />
+            </button>
+          ) : null}
+        </>
+      );
+
   const issuedDisplay = editableIssued && isIssuedEditing ? (
     <form className="doc-issued-edit" onSubmit={submitIssuedEdit}>
       <input
@@ -660,16 +644,17 @@ const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
         aria-label="Issued on"
         disabled={issuedSaving}
       />
-      <button type="submit" disabled={issuedSaving}>
-        Save
+      <button type="submit" className="icon-button icon-button--accent" disabled={issuedSaving} aria-label="Save issued date">
+        <CheckIcon size={16} />
       </button>
       <button
         type="button"
-        className="secondary"
+        className="icon-button"
         onClick={cancelIssuedEdit}
         disabled={issuedSaving}
+        aria-label="Cancel"
       >
-        Cancel
+        <IconX size={16} />
       </button>
     </form>
   ) : (
@@ -689,184 +674,98 @@ const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
     </>
   );
 
-  const metaItems = [
-    {
-      key: 'issued',
-      label: 'Issued',
-      valueContent: issuedDisplay,
-      error: issuedError,
-    },
-    ...metaRows.map((row) => ({
-      key: row.key,
-      label: row.label,
-      fallbackValue: row.value,
-    })),
-  ];
-
-  const detailRows = Array.isArray(detailItems)
-    ? detailItems.map((item, index) => ({
-        key: `detail-${item?.label || index}`,
-        label: item?.label || '—',
-        fallbackValue: item?.value,
-      }))
-    : [];
-
-  const compactRows = [...metaItems, ...detailRows];
-
-  const renderTags = () => (
-    <section className="document-summary__section document-summary__section--tags">
-      <TagSection
-        tags={resolvedTags}
-        onRemove={
-          onTagRemove
-            ? (tag) => onTagRemove(document.id, tag.id)
-            : undefined
-        }
-        onAdd={
-          onTagAdd
-            ? ({ value, option }) => onTagAdd(document, value, { option })
-            : undefined
-        }
-        datalistOptions={tagOptions}
-        className="document-summary__tags"
-      />
-    </section>
+  const tagsValueContent = (
+    <TagSection
+      tags={resolvedTags}
+      onRemove={
+        onTagRemove
+          ? (tag) => onTagRemove(document.id, tag.id)
+          : undefined
+      }
+      onAdd={
+        onTagAdd
+          ? ({ value, option }) => onTagAdd(document, value, { option })
+          : undefined
+      }
+      datalistOptions={tagOptions}
+      className="document-summary__tags"
+    />
   );
 
-  const renderCorrespondents = () => (
-    <section className="document-summary__section document-summary__section--correspondents">
-      <CorrespondentSection
-        entries={resolvedCorrespondents}
-        onRemove={
-          onCorrespondentRemove
-            ? (entry) =>
-                onCorrespondentRemove({
-                  documentId: document.id,
-                  correspondentId: entry.id,
-                })
-            : undefined
-        }
-        onAdd={
-          onCorrespondentAdd
-            ? ({ name, option }) =>
-                onCorrespondentAdd({
-                  document,
-                  name,
-                  option,
-                })
-            : undefined
-        }
-        showCount
-        datalistOptions={correspondentOptions}
-        className="document-summary__correspondents"
-      />
-    </section>
+  const correspondentsValueContent = (
+    <CorrespondentSection
+      entries={resolvedCorrespondents}
+      onRemove={
+        onCorrespondentRemove
+          ? (entry) =>
+              onCorrespondentRemove({
+                documentId: document.id,
+                correspondentId: entry.id,
+              })
+          : undefined
+      }
+      onAdd={
+        onCorrespondentAdd
+          ? ({ name, option }) =>
+              onCorrespondentAdd({
+                document,
+                name,
+                option,
+              })
+          : undefined
+      }
+      showCount
+      datalistOptions={correspondentOptions}
+      className="document-summary__correspondents"
+    />
   );
 
-  if (isCompactLayout) {
-    return (
-      <div className="document-summary document-summary--compact">
-        <section className="document-summary__section document-summary__title-row">
-          <TitleSection />
-        </section>
-        {titleError ? <div className="status-inline error">{titleError}</div> : null}
-        {renderTags()}
-        {renderCorrespondents()}
-        {compactRows.length ? (
-          <section className="document-summary__section document-summary__meta document-summary__meta--compact">
-            <dl className="document-summary__details-list document-summary__details-list--meta">
-              {compactRows.map((item) => (
-                <div key={item.key} className="document-summary__details-row">
-                  <dt>{item.label}</dt>
-                  <dd>
-                    {item.valueContent != null && item.valueContent !== ''
-                      ? item.valueContent
-                      : item.fallbackValue || '—'}
-                  </dd>
-                  {item.error ? <div className="status-inline error">{item.error}</div> : null}
-                </div>
-              ))}
-            </dl>
-          </section>
-        ) : null}
-      </div>
-    );
-  }
+  const summaryRowOverrides = useMemo(
+    () => ({
+      title: { valueContent: titleMetaDisplay, error: titleError },
+      issued: { valueContent: issuedDisplay, error: issuedError },
+      tags: { valueContent: tagsValueContent },
+      correspondents: { valueContent: correspondentsValueContent },
+    }),
+    [titleMetaDisplay, titleError, issuedDisplay, issuedError, tagsValueContent, correspondentsValueContent],
+  );
+
+  const baseRows: MetaItem[] = useMemo(
+    () => [...summaryRows, ...extraSummaryRows].map((row) => {
+      const overrides = summaryRowOverrides[row.key] || {};
+      return {
+        key: row.key,
+        label: row.label,
+        valueContent: overrides.valueContent ?? null,
+        fallbackValue: overrides.valueContent ? row.value : row.value,
+        error: overrides.error ?? null,
+      };
+    }),
+    [summaryRows, extraSummaryRows, summaryRowOverrides],
+  );
+
+  const allRows = baseRows;
+  const summaryClass = `document-summary${isCompactLayout ? ' document-summary--compact' : ''}`;
+  const sectionClass = `document-summary__section document-summary__meta${isCompactLayout ? ' document-summary__meta--compact' : ''}`;
+  const listClass = `document-summary__details-list${isCompactLayout ? ' document-summary__details-list--meta' : ''}`;
 
   return (
-    <div className="document-summary">
-      <div className="doc-title-row">
-        <div className="doc-title-row__primary">
-          {editableTitle && isTitleEditing ? (
-            <form className="doc-title-edit" onSubmit={submitTitleEdit}>
-              <input
-                value={titleDraft}
-                onChange={(event) => {
-                  setTitleDraft(event.target.value);
-                  if (titleError) {
-                    setTitleError(null);
-                  }
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === 'Escape') {
-                    event.preventDefault();
-                    cancelTitleEdit();
-                  }
-                }}
-                aria-label="Document title"
-                autoFocus
-                disabled={titleSaving}
-              />
-              <button type="submit" disabled={titleSaving}>
-                Save
-              </button>
-              <button
-                type="button"
-                className="secondary"
-                onClick={cancelTitleEdit}
-                disabled={titleSaving}
-              >
-                Cancel
-              </button>
-            </form>
-          ) : (
-            <>
-              <h3 className="doc-title-row__title">{summary.title}</h3>
-              {editableTitle ? (
-                <button
-                  type="button"
-                  className="icon-button"
-                  onClick={startTitleEdit}
-                  aria-label="Edit title"
-                  title="Edit title"
-                >
-                  <EditIcon className="icon-inline" />
-                </button>
-              ) : null}
-            </>
-          )}
-        </div>
-      </div>
-
-      {titleError ? <div className="status-inline error">{titleError}</div> : null}
-
-      <div className="detail-meta">
-        <div className="detail-meta__row">
-          <span className="detail-meta__label">Issued:</span>
-          {issuedDisplay}
-        </div>
-        {issuedError ? <div className="status-inline error">{issuedError}</div> : null}
-
-        {metaRows.map((row) => (
-          <div key={row.key} className="detail-meta__row">
-            <span className="detail-meta__label">{row.label}:</span>
-            <span className="detail-meta__value">{row.value}</span>
-          </div>
-        ))}
-      </div>
-
-      {renderTags()}
-      {renderCorrespondents()}
+    <div className={summaryClass}>
+      <section className={sectionClass}>
+        <dl className={listClass}>
+          {allRows.map((item) => (
+            <div key={item.key} className="document-summary__details-row">
+              <dt>{item.label}</dt>
+              <dd>
+                {item.valueContent != null && item.valueContent !== ''
+                  ? item.valueContent
+                  : item.fallbackValue || '—'}
+              </dd>
+              {item.error ? <div className="status-inline error">{item.error}</div> : null}
+            </div>
+          ))}
+        </dl>
+      </section>
     </div>
   );
 };