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">
-            {header.leading}
-            <h2 className="main-content__title">
-              {header.title}
-              {header.subtitle ? (
-                <span className="main-content__subtitle">{header.subtitle}</span>
-              ) : null}
-            </h2>
-            <div className="panel-actions__spacer" />
-            {header.actions}
-          </div>
+          <PanelHeader
+            className="main-content__header"
+            leading={header.leading}
+            title={headerTitle}
+            titleTag="h2"
+            actions={header.actions}
+          />
         ) : null}
         <div className={bodyClass}>{surface.content}</div>
         {surface.detail || null}