panelheader

frontend/src/app/DocumentsRoute.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAppShell } from '../appShellContext';
 import DocumentsLayout from './DocumentsLayout';
 import { useWorkspaceSurface } from './useWorkspaceSurface';
+import PanelHeader from '../ui/PanelHeader';
 
 const DocumentsRoute = () => {
   const {
@@ -103,6 +104,17 @@ const DocumentsRoute = () => {
 
   const header = surface.header || null;
 
+  const headerTitle = header
+    ? header.subtitle
+      ? (
+          <h2 className="main-content__title">
+            {header.title}
+            <span className="main-content__subtitle">{header.subtitle}</span>
+          </h2>
+        )
+      : header.title
+    : null;
+
   return (
     <DocumentsLayout
       sidebarProps={sidebarPropsWithActions}
@@ -110,17 +122,13 @@ const DocumentsRoute = () => {
     >
       <div className={mainContentClass}>
         {header ? (
-          <div className="panel-header main-content__header">
+          <PanelHeader
-            {header.leading}
+            className="main-content__header"
-            <h2 className="main-content__title">
+            leading={header.leading}
-              {header.title}
+            title={headerTitle}
-              {header.subtitle ? (
+            titleTag="h2"
-                <span className="main-content__subtitle">{header.subtitle}</span>
+            actions={header.actions}
-              ) : null}
+          />
-            </h2>
-            <div className="panel-actions__spacer" />
-            {header.actions}
-          </div>
         ) : null}
         <div className={bodyClass}>{surface.content}</div>
         {surface.detail || null}

frontend/src/detail/DetailPanel.jsx

@@ -9,6 +9,7 @@ import {
   WindowMaximizeIcon,
   TextScanIcon,
 } from '../ui/icons';
+import PanelHeader from '../ui/PanelHeader';
 import { getTagColorStyle } from '../utils/colors';
 import { formatFileSize } from '../utils/format';
 import { resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
@@ -1239,11 +1240,10 @@ const DetailPanel = ({
   const isBulkSelection = selectedCount > 1;
   const showOcrAction = Boolean(singleDoc && singleHasOcr);
 
-  return (
+  const headerLeading = [
-    <>
+    (
-      <aside className="detail-panel panel">
-        <div className="panel-header">
       <button
+        key="close"
         type="button"
         className="icon-button"
         onClick={onClose}
@@ -1252,8 +1252,13 @@ const DetailPanel = ({
       >
         <ChevronsRightIcon />
       </button>
-          {singleDoc ? (
+    ),
+  ];
+
+  if (singleDoc) {
+    headerLeading.push(
       <button
+        key="preview"
         type="button"
         className="icon-button"
         onClick={(event) => {
@@ -1265,12 +1270,16 @@ const DetailPanel = ({
         disabled={!singleHasPreview}
       >
         <WindowMaximizeIcon />
-            </button>
+      </button>,
-          ) : null}
+    );
-          <h3 className="panel-header__title">{headerTitle}</h3>
+  }
-          <div className="panel-actions__spacer" />
+
-          {isBulkSelection && onBulkReanalyze ? (
+  const headerActions = [];
+
+  if (isBulkSelection && onBulkReanalyze) {
+    headerActions.push(
       <button
+        key="bulk-reanalyze"
         type="button"
         className="icon-button"
         onClick={(event) => {
@@ -1281,10 +1290,14 @@ const DetailPanel = ({
         title="Re-run analysis for selection"
       >
         <AnalyzeIcon />
-            </button>
+      </button>,
-          ) : null}
+    );
-          {singleDoc && singleDownloadHref ? (
+  }
+
+  if (singleDoc && singleDownloadHref) {
+    headerActions.push(
       <a
+        key="download"
         className="icon-button"
         href={singleDownloadHref}
         target="_blank"
@@ -1294,10 +1307,14 @@ const DetailPanel = ({
         onClick={(event) => event.stopPropagation()}
       >
         <DownloadIcon />
-            </a>
+      </a>,
-          ) : null}
+    );
-          {showOcrAction ? (
+  }
+
+  if (showOcrAction) {
+    headerActions.push(
       <button
+        key="ocr"
         type="button"
         className="icon-button"
         onClick={(event) => {
@@ -1308,10 +1325,14 @@ const DetailPanel = ({
         title="View OCR text"
       >
         <TextScanIcon />
-            </button>
+      </button>,
-          ) : null}
+    );
-          {singleDoc ? (
+  }
+
+  if (singleDoc) {
+    headerActions.push(
       <button
+        key="reanalyze"
         type="button"
         className="icon-button"
         onClick={(event) => {
@@ -1322,9 +1343,19 @@ const DetailPanel = ({
         title="Re-run analysis"
       >
         <AnalyzeIcon />
-            </button>
+      </button>,
-          ) : null}
+    );
-        </div>
+  }
+
+  return (
+    <>
+      <aside className="detail-panel panel">
+        <PanelHeader
+          leading={headerLeading}
+          title={headerTitle}
+          titleTag="h3"
+          actions={headerActions.length ? headerActions : null}
+        />
         <div className="panel-body">
           {selectedCount <= 1 ? renderSingle() : renderBulk()}
         </div>

frontend/src/sidebar/Sidebar.jsx

@@ -13,6 +13,7 @@ import {
   FolderPlusIcon,
   RestoreIcon,
 } from '../ui/icons';
+import PanelHeader from '../ui/PanelHeader';
 
 import { getTagColorStyle } from '../utils/colors';
 
@@ -351,7 +352,10 @@ const Sidebar = ({
   const rootNode = folderNodes.get('root');
   return (
     <aside className="sidebar">
-      <div className="panel-header sidebar__header">
+      <PanelHeader
+        className="sidebar__header"
+        leading={(
+          <>
             <button
               type="button"
               className={`sidebar__title-button${tenantMenuOpen ? ' is-open' : ''}`}
@@ -422,9 +426,14 @@ const Sidebar = ({
                 </div>
               </div>
             ) : null}
-        <div className="panel-actions__spacer" />
+          </>
-        {onCollapse ? (
+        )}
+        actions={
+          onCollapse
+            ? [
+                (
                   <button
+                    key="collapse"
                     type="button"
                     className="icon-button"
                     onClick={onCollapse}
@@ -433,8 +442,11 @@ const Sidebar = ({
                   >
                     <ChevronsLeftIcon />
                   </button>
-        ) : null}
+                ),
-      </div>
+              ]
+            : null
+        }
+      />
       <div className="panel-body sidebar__body">
         {status && (
           <div className="sidebar__status">

frontend/src/styles.css

@@ -1223,6 +1223,7 @@ button.danger:hover:not([disabled]) {
   font-size: 1rem;
   font-weight: 600;
   color: var(--fg);
+  padding-left: 0.25rem;
 }
 
 .sidebar__tenant {
@@ -2198,11 +2199,17 @@ button.danger:hover:not([disabled]) {
 .panel-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 0.75rem;
   padding: 0.5rem;
 }
 
+.panel-header__leading,
+.panel-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .panel-header__title {
   margin: 0;
   font-size: 1rem;
@@ -2215,26 +2222,18 @@ button.danger:hover:not([disabled]) {
   min-width: 0;
 }
 
+.panel-header > .panel-header__title:first-child {
+  padding-left: 0.5rem;
+}
+
+.panel-header__actions {
+  margin-left: auto;
+}
+
 .panel-body {
   padding: 0.5rem 1rem;
 }
 
-.panel-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex: 1 1 auto;
-}
-
-.panel-actions__spacer {
-  flex-grow: 1;
-}
-
-.panel-actions > h1:first-child,
-.panel-actions > h2:first-child {
-  padding-left: 0.5rem;
-}
-
 .detail-panel .panel-body {
   flex: 1;
   display: flex;

frontend/src/ui/PanelHeader.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+const composeClassName = (base, extra) => (extra ? `${base} ${extra}` : base);
+
+const PanelHeader = ({
+  className = '',
+  leading = null,
+  title = null,
+  titleTag = 'h2',
+  titleProps = {},
+  actions = null,
+}) => {
+  const headerClassName = composeClassName('panel-header', className);
+
+  const renderTitle = () => {
+    if (title == null) {
+      return null;
+    }
+
+    if (React.isValidElement(title)) {
+      if (title.type === React.Fragment) {
+        return (
+          <span className="panel-header__title" {...titleProps}>
+            {title}
+          </span>
+        );
+      }
+
+      const mergedClassName = composeClassName('panel-header__title', title.props.className || '');
+      return React.cloneElement(title, {
+        ...titleProps,
+        className: mergedClassName,
+      });
+    }
+
+    const HeadingTag = titleTag;
+    return (
+      <HeadingTag className="panel-header__title" {...titleProps}>
+        {title}
+      </HeadingTag>
+    );
+  };
+
+  return (
+    <div className={headerClassName}>
+      {leading ? <div className="panel-header__leading">{leading}</div> : null}
+      {renderTitle()}
+      {actions ? <div className="panel-header__actions">{actions}</div> : null}
+    </div>
+  );
+};
+
+export default PanelHeader;