quarto-dev · cscheid · Jun 11, 2026 · Jun 11, 2026 · Jun 11, 2026
diff --git a/hub-client/src/components/MinimalHeader.css b/hub-client/src/components/MinimalHeader.css
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 16px;
+  padding: 6px 12px;
   background: var(--editor-header-bg);
   border-bottom: 1px solid var(--editor-header-border);
   min-height: 36px;
@@ -14,16 +14,97 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 6px;
+}
+
+/* Shared icon action button (switch / share / preview). */
+.minimal-header .icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--editor-text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.minimal-header .icon-btn:hover {
+  background: var(--view-toggle-hover-bg);
+  color: var(--editor-text);
+}
+
+/* Preview is the primary action: filled accent pill with icon + label. */
+.minimal-header .preview-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 12px;
+  background: var(--header-preview-bg);
+  border: 1px solid var(--header-preview-bg);
+  border-radius: 6px;
+  color: var(--header-preview-text);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.minimal-header .preview-btn:hover {
+  background: var(--header-preview-hover);
+  border-color: var(--header-preview-hover);
+}
+
+/* Vertical divider separating the actions from the document identity. */
+.header-divider {
+  width: 1px;
+  align-self: stretch;
+  margin: 4px 2px;
+  background: var(--editor-header-border);
+  flex-shrink: 0;
+}
+
+/* Document identity: project name / file path. */
+.header-doc {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.header-doc .project-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--editor-text);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.header-doc .path-sep {
+  color: var(--editor-text-muted);
+  font-size: 13px;
+  flex-shrink: 0;
 }
 
-.minimal-header .file-path {
+.header-doc .file-path {
   font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
   font-size: 13px;
   color: var(--editor-text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 
-.minimal-header .file-path.empty {
+.header-doc .file-path.empty {
   color: var(--editor-text-muted);
   font-style: italic;
 }
@@ -39,11 +120,14 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 10px;
+  box-sizing: border-box;
+  height: 28px;
+  padding: 0 10px;
   background: var(--editor-header-bg);
   border: 1px solid var(--editor-disconnected-border);
   border-radius: 4px;
   font-size: 12px;
+  line-height: 1;
   user-select: none;
 }
 
@@ -77,71 +161,3 @@
   color: var(--editor-text-dim);
   font-weight: 500;
 }
-
-.header-right .project-name {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--editor-text-muted);
-  min-width: 120px;
-  max-width: 400px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: right;
-}
-
-.header-right .preview-btn {
-  padding: 6px 16px;
-  background: var(--header-preview-bg);
-  border: 2px solid var(--header-preview-bg);
-  border-radius: 6px;
-  color: var(--header-preview-text);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.15s;
-  box-shadow: 0 2px 8px var(--header-preview-shadow);
-}
-
-.header-right .preview-btn:hover {
-  background: var(--header-preview-hover);
-  border-color: var(--header-preview-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px var(--header-preview-shadow-hover);
-}
-
-.header-right .preview-btn:active {
-  transform: translateY(0);
-}
-
-.header-right .choose-project-btn {
-  padding: 4px 10px;
-  background: none;
-  border: 1px solid var(--editor-disconnected-border);
-  border-radius: 4px;
-  color: var(--editor-text-muted);
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.header-right .choose-project-btn:hover {
-  border-color: var(--sidebar-active-accent);
-  color: var(--sidebar-active-accent);
-}
-
-.header-right .share-btn {
-  padding: 4px 10px;
-  background: var(--header-share-bg);
-  border: 1px solid var(--header-share-bg);
-  border-radius: 4px;
-  color: #fff;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.header-right .share-btn:hover {
-  background: var(--header-share-hover);
-  border-color: var(--header-share-hover);
-}
diff --git a/hub-client/src/components/MinimalHeader.tsx b/hub-client/src/components/MinimalHeader.tsx
@@ -1,8 +1,8 @@
 /**
  * Minimal Header Component
  *
- * A slim header bar that displays the current file path on the left
- * and project name with navigation on the right.
+ * Slim header bar. Left: switch/share actions + project / file identity.
+ * Right: online status, layout toggle, fullscreen-preview action.
  */
 
 import ViewToggleControl from './ViewToggleControl';
@@ -20,6 +20,73 @@ interface MinimalHeaderProps {
   isOnline?: boolean;
 }
 
+/** Grid of four squares — "switch / all projects". */
+function SwitchIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="3" y="3" width="7" height="7" rx="1" />
+      <rect x="14" y="3" width="7" height="7" rx="1" />
+      <rect x="3" y="14" width="7" height="7" rx="1" />
+      <rect x="14" y="14" width="7" height="7" rx="1" />
+    </svg>
+  );
+}
+
+/** Connected nodes — "share". */
+function ShareIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="18" cy="5" r="3" />
+      <circle cx="6" cy="12" r="3" />
+      <circle cx="18" cy="19" r="3" />
+      <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+      <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+    </svg>
+  );
+}
+
+/** Outward corners — "fullscreen preview". */
+function PreviewIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M8 3H5a2 2 0 0 0-2 2v3" />
+      <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
+      <path d="M3 16v3a2 2 0 0 0 2 2h3" />
+      <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
+    </svg>
+  );
+}
+
 export default function MinimalHeader({
   currentFilePath,
   projectName,
@@ -32,12 +99,34 @@ export default function MinimalHeader({
   return (
     <header className="minimal-header">
       <div className="header-left">
-        <ViewToggleControl />
-        {currentFilePath ? (
-          <span className="file-path">{currentFilePath}</span>
-        ) : (
-          <span className="file-path empty">No file selected</span>
+        <button
+          className="icon-btn"
+          onClick={onChooseNewProject}
+          title="Switch project"
+          aria-label="Switch project"
+        >
+          <SwitchIcon />
+        </button>
+        {onShare && (
+          <button
+            className="icon-btn"
+            onClick={onShare}
+            title="Share this project"
+            aria-label="Share this project"
+          >
+            <ShareIcon />
+          </button>
         )}
+        <span className="header-divider" aria-hidden="true" />
+        <div className="header-doc">
+          <span className="project-name">{projectName}</span>
+          <span className="path-sep" aria-hidden="true">
+            |
+          </span>
+          <span className={`file-path${currentFilePath ? '' : ' empty'}`}>
+            {currentFilePath ?? 'No file selected'}
+          </span>
+        </div>
       </div>
       <div className="header-right">
         <div
@@ -51,20 +140,18 @@ export default function MinimalHeader({
           <span className="connection-dot" />
           <span className="connection-text">{isOnline ? 'Online' : 'Offline'}</span>
         </div>
-        <span className="project-name">{projectName}</span>
-        {onShare && (
-          <button className="share-btn" onClick={onShare} title="Share this project">
-            Share
-          </button>
-        )}
+        <ViewToggleControl />
         {onToggleFullscreenPreview && !isFullscreenPreview && (
-          <button className="preview-btn" onClick={onToggleFullscreenPreview}>
-            Preview
+          <button
+            className="preview-btn"
+            onClick={onToggleFullscreenPreview}
+            title="Fullscreen preview"
+            aria-label="Fullscreen preview"
+          >
+            <PreviewIcon />
+            <span>Preview</span>
           </button>
         )}
-        <button className="choose-project-btn" onClick={onChooseNewProject}>
-          Switch
-        </button>
       </div>
     </header>
   );

diff --git a/hub-client/src/components/ViewToggleControl.tsx b/hub-client/src/components/ViewToggleControl.tsx
@@ -2,7 +2,7 @@ import { useViewMode } from './ViewModeContext';
 import './ViewToggleControl.css';
 
 /**
- * Compact horizontal view toggle at the top of the sidebar.
+ * Compact horizontal view toggle in the header.
  * Three small square buttons with layout-split icons.
  */
 export default function ViewToggleControl() {

diff --git a/hub-client/src/theme.css b/hub-client/src/theme.css
@@ -281,9 +281,9 @@
   --replay-tooltip-bg: #0f0f1e;
 
   /* Minimal header */
-  --header-preview-bg: #ffffff;
-  --header-preview-text: #1e3a8a;
-  --header-preview-hover: #f0f0f0;
+  --header-preview-bg: var(--posit-blue);
+  --header-preview-text: #ffffff;
+  --header-preview-hover: var(--posit-blue-dark-1);
   --header-preview-shadow: rgba(255, 255, 255, 0.3);
   --header-preview-shadow-hover: rgba(255, 255, 255, 0.4);
   --header-share-bg: #646cff;