ui: semantic window layout — header/nav/main/footer (custom markup, body flex-stretched)

src/ui.tsx

@@ -6,8 +6,6 @@ import {
   VerticalSpace,
   Divider,
   Stack,
-  Columns,
-  Inline,
   Modal,
   IconButton,
   IconExpand24,
@@ -323,38 +321,37 @@ function Plugin () {
   return (
     <div className="plugin-root" style={{ position: 'relative', width: '100%', height: '100%' }}>
       <Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-        {/* Top: header + divider (Stack == vertical rhythm, divider is part of it) */}
+        {/* Header — navigation bar */}
-        <Stack space="small">
+        <header style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto' }}>
-          <Columns space="medium">
+          <Text style={{ fontSize: '13px', fontWeight: 600 }}>Settings</Text>
-            <Text style={{ fontSize: '13px', fontWeight: 600 }}>Settings</Text>
+          <nav style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', marginLeft: 'auto' }}>
-            <div style={{ flex: 1 }} />
+            <IconButton title="Stub action" onClick={function () {}}>
-            <Inline space="small">
+              <IconWand24 />
-              <IconButton title="Stub action" onClick={function () {}}>
+            </IconButton>
-                <IconWand24 />
+            <IconButton title="Stub action" onClick={function () {}}>
-              </IconButton>
+              <IconComponent24 />
-              <IconButton title="Stub action" onClick={function () {}}>
+            </IconButton>
-                <IconComponent24 />
+            <IconButton
-              </IconButton>
+              title={isMaximized ? 'Restore window' : 'Maximize window'}
-              <IconButton
+              onClick={toggleWindowSize}
-                title={isMaximized ? 'Restore window' : 'Maximize window'}
+            >
-                onClick={toggleWindowSize}
+              {isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
-              >
+            </IconButton>
-                {isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
+            <IconButton title="More" onClick={function () { setMoreOpen(true) }}>
-              </IconButton>
+              <IconMore24 />
-              <IconButton title="More" onClick={function () { setMoreOpen(true) }}>
+            </IconButton>
-                <IconMore24 />
+          </nav>
-              </IconButton>
+        </header>
-            </Inline>
+        <Divider />
-          </Columns>
+        {/* Body — semantic <main>, stretches via flex child of the column */}
-          <Divider />
+        <main style={{ flex: '1 1 auto', overflow: 'auto' }}>
-        </Stack>
+          {/* empty placeholder for now */}
-        {/* Body — stretches (flex child of the Container column); empty placeholder for now */}
+        </main>
-        <div style={{ flex: 1 }} />
+        {/* Footer — status bar */}
-        {/* Bottom: divider + footer status bar (Stack) */}
+        <Divider />
-        <Stack space="small">
+        <footer style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto' }}>
-          <Divider />
           <Muted style={{ fontSize: '11px' }}>Version {PLUGIN_VERSION}</Muted>
-        </Stack>
+        </footer>
       </Container>
       {/* More-menu modal — old-plugin style: library Modal + Container + Stack of MenuItem */}
       <Modal open={moreOpen} onClose={function () { setMoreOpen(false) }} onOverlayClick={function () { setMoreOpen(false) }}>