diff --git a/src/ui.tsx b/src/ui.tsx index 8dcb681..d54d2f7 100644 --- a/src/ui.tsx +++ b/src/ui.tsx @@ -4,9 +4,16 @@ import { Text, Muted, VerticalSpace, + Divider, + Button, + Stack, + Modal, IconButton, IconExpand24, - IconCollapse24 + IconCollapse24, + IconMore24, + IconWand24, + IconComponent24 } from '@create-figma-plugin/ui' import { emit, on } from '@create-figma-plugin/utilities' import { h, Fragment } from 'preact' @@ -17,6 +24,9 @@ const MIN_WINDOW_SIZE = { width: 320, height: 200 } // and the upper bound of drag-resize also comes from there. useWindowResize max is set // very high — actual clamp is done by main via clampWindowSize (bounds*zoom). +// Full plugin version shown in the footer status bar. Keep in sync with package.json "version". +const PLUGIN_VERSION = '0.1.0' + function Plugin () { const [currentWindowSize, setCurrentWindowSize] = useState(MIN_WINDOW_SIZE) const resizeRef = useRef({ active: false, dir: '', startX: 0, startY: 0, startW: 0, startH: 0, fixedAxis: 'none' as 'none' | 'x' | 'y' }) @@ -275,6 +285,7 @@ function Plugin () { }) } + const [moreOpen, setMoreOpen] = useState(false) const [isMaxToggled, setIsMaxToggled] = useState(false) // Resize-handle visibility is state-driven (not CSS :hover/:has) for Figma webview // reliability. Handles appear only after the cursor has rested in the window for 500ms @@ -310,27 +321,54 @@ function Plugin () { return (
-
- Hello, Figma ✦ - - AI assistant (MVP) — bootstrap + {/* Header — navigation bar: title (left) | spacer (middle) | icon buttons (right) */} +
+ Settings +
+
+ + + + + + + + {isMaximized ? : } + + + + +
+ + + + {/* Body — empty placeholder for now */} +
+ {/* Footer — status bar */} + + + Version {PLUGIN_VERSION} - - {isMaximized ? : } - + {/* More-menu modal (opened by the three-dots button in the header) — stubs for now */} + {moreOpen && ( + + + Stub actions + + + + + )} {/* Decorative drag-handle icon in the bottom-right corner (as in the old plugin). pointerEvents:none — the actual drag is caught by the invisible corner div. */}