Refine header emphasis, field-on-layer treatment, and narrow-pane control collapse

src/app/App.tsx

@@ -4,6 +4,7 @@ import { LivePreview } from './components/LivePreview';
 import { ModalShell } from './components/ModalShell';
 import { Onboarding } from './components/Onboarding';
 import { PaneSplitHandle } from './components/PaneSplitHandle';
+import { Icon } from './components/Icon';
 import { PaneToggleStrip } from './components/PaneToggleStrip';
 import { ResizeHandle } from './components/ResizeHandle';
 import { SnippetLibrary } from './components/SnippetLibrary';
@@ -74,6 +75,11 @@ export function App() {
         <h1 className={styles.title}>Astrolabe</h1>
         <span className={styles.version}>v{__APP_VERSION__}</span>
         <span className={styles.spacer} />
+        {/* Header actions establish a hierarchy (Carbon button/usage → one
+            high-emphasis action per region; utilities in dashboards/toolbars read
+            better at low emphasis). The utilities are ghost (borderless) buttons
+            with a leading icon for scanning; a divider then sets off Donate — the
+            one solicitation, given a soft-accent wash — and the theme toggle. */}
         <button
           type="button"
           className={styles.headerButton}
@@ -81,6 +87,7 @@ export function App() {
           aria-keyshortcuts="Meta+K Control+K"
           title="Datasets (⌘/Ctrl+K)"
         >
+          <Icon name="dataset" />
           Datasets
         </button>
         <button
@@ -89,6 +96,7 @@ export function App() {
           onClick={() => fileInputRef.current?.click()}
           title="Import a workspace JSON file"
         >
+          <Icon name="import" />
           Import
         </button>
         <button
@@ -97,6 +105,7 @@ export function App() {
           onClick={() => exportWorkspace()}
           title="Export your workspace to a JSON file"
         >
+          <Icon name="export" />
           Export
         </button>
         <button
@@ -105,11 +114,13 @@ export function App() {
           onClick={() => openModal('about')}
           title="About, keyboard shortcuts, and privacy information"
         >
-          About &amp; Privacy
+          <Icon name="info" />
+          About
         </button>
+        <span className={styles.headerDivider} aria-hidden="true" />
         <button
           type="button"
-          className={styles.headerButton}
+          className={`${styles.headerButton} ${styles.donate}`}
           onClick={() => openModal('donate')}
           title="Support Astrolabe"
         >