ui: rebuild Settings shell on Stack/Columns/Inline layout primitives (dividers in stack; body flex-stretched)

src/ui.tsx

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