From e263c469af105b2c4f2b00389447608d3086e68f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 21 Dec 2025 20:26:16 +0000 Subject: [PATCH 1/3] Initial plan From 149f0595ce0931d8108cf5642766bd9a0ef8744f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 21 Dec 2025 20:31:00 +0000 Subject: [PATCH 2/3] Add IslandPanel component with light/dark mode support Co-authored-by: lebduska <11066249+lebduska@users.noreply.github.com> --- blendmate-app/src/App.tsx | 8 +- .../src/components/IslandPanelDemo.tsx | 131 ++++++++++++++++++ blendmate-app/src/components/layout/HUD.tsx | 6 +- .../src/components/ui/IslandPanel.tsx | 91 ++++++++++++ blendmate-app/src/index.css | 33 ++++- 5 files changed, 260 insertions(+), 9 deletions(-) create mode 100644 blendmate-app/src/components/IslandPanelDemo.tsx create mode 100644 blendmate-app/src/components/ui/IslandPanel.tsx diff --git a/blendmate-app/src/App.tsx b/blendmate-app/src/App.tsx index c581a5b..bd72343 100644 --- a/blendmate-app/src/App.tsx +++ b/blendmate-app/src/App.tsx @@ -4,10 +4,11 @@ import NodeHelpView from "./components/NodeHelpView"; import HUD from "./components/layout/HUD"; import Footer from "./components/layout/Footer"; import Card from "./components/ui/Card"; +import IslandPanelDemo from "./components/IslandPanelDemo"; export default function App() { const { status, lastMessage, sendJson } = useBlendmateSocket(); - const [activeTab, setActiveTab] = useState<'nodes' | 'stats' | 'chat'>('nodes'); + const [activeTab, setActiveTab] = useState<'nodes' | 'stats' | 'chat' | 'demo'>('demo'); const [frame, setFrame] = useState(1); const [currentNodeId, setCurrentNodeId] = useState('GeometryNodeInstanceOnPoints'); @@ -60,12 +61,15 @@ export default function App() {
- +
)} + {/* Island Panel Demo */} + {activeTab === 'demo' && } + {/* Other Tabs content placeholders... */} {activeTab === 'chat' && (
diff --git a/blendmate-app/src/components/IslandPanelDemo.tsx b/blendmate-app/src/components/IslandPanelDemo.tsx new file mode 100644 index 0000000..d3667b1 --- /dev/null +++ b/blendmate-app/src/components/IslandPanelDemo.tsx @@ -0,0 +1,131 @@ +import IslandPanel from './ui/IslandPanel'; + +/** + * Demo component showcasing the IslandPanel in various configurations + */ +export default function IslandPanelDemo() { + return ( +
+ {/* Basic panel with just content */} + +

+ This is a basic Island panel with just content. It automatically adapts to light/dark mode. +

+ + + {/* Panel with title */} + +

+ This panel has a title in the header. The header has a subtle background to separate it from the content. +

+ + + {/* Panel with title and subtitle */} + +
+

+ This panel demonstrates all features: title, subtitle, and content. +

+

+ The colors automatically adjust based on your system's light/dark mode preference. +

+
+ + + {/* Panel with actions */} + + + + + } + > +

+ Actions in the header provide quick access to common operations. +

+ + + {/* Nested content example */} + +
+
+

+ Nested Section +

+

+ You can nest other elements with system colors inside the panel. +

+
+ +
+
+

+ Grid Item 1 +

+
+
+

+ Grid Item 2 +

+
+
+
+ + + {/* Info box about the component */} +
+

+ About Island Panels +

+
    +
  • • Rounded corners (16px) for modern aesthetic
    • +
  • • Subtle shadow for depth and elevation
    • +
  • • Automatic light/dark mode via prefers-color-scheme
    • +
  • • Uses CSS variables for system colors
    • +
  • • No hard-coded brand palette
    • +
+
+
+ ); +} diff --git a/blendmate-app/src/components/layout/HUD.tsx b/blendmate-app/src/components/layout/HUD.tsx index 9d36796..62d55c1 100644 --- a/blendmate-app/src/components/layout/HUD.tsx +++ b/blendmate-app/src/components/layout/HUD.tsx @@ -1,7 +1,7 @@ interface HUDProps { status: string; - activeTab: 'nodes' | 'stats' | 'chat'; - setActiveTab: (tab: 'nodes' | 'stats' | 'chat') => void; + activeTab: 'nodes' | 'stats' | 'chat' | 'demo'; + setActiveTab: (tab: 'nodes' | 'stats' | 'chat' | 'demo') => void; } export default function HUD({ status, activeTab, setActiveTab }: HUDProps) { @@ -21,7 +21,7 @@ export default function HUD({ status, activeTab, setActiveTab }: HUDProps) {
- {(['nodes', 'stats', 'chat'] as const).map((tab) => ( + {(['demo', 'nodes', 'stats', 'chat'] as const).map((tab) => ( + + + } +> +

Panel content

+ +``` + +### Props + +- `title` (optional): String - Title displayed in the panel header +- `subtitle` (optional): String - Subtitle or description below the title +- `actions` (optional): ReactNode - Actions to display in the header (buttons, icons, etc.) +- `children`: ReactNode - Main content of the panel +- `className` (optional): String - Additional CSS classes for customization + +### CSS Variables + +The component uses the following CSS variables defined in `index.css`: + +**Light mode:** +- `--island-bg`: rgb(255 255 255) +- `--island-bg-secondary`: rgb(249 249 249) +- `--island-border`: rgb(229 229 229) +- `--island-text`: rgb(23 23 23) +- `--island-text-secondary`: rgb(115 115 115) +- `--island-shadow`: rgba(0 0 0 / 0.08) +- `--island-hover`: rgb(245 245 245) + +**Dark mode:** +- `--island-bg`: rgb(30 30 30) +- `--island-bg-secondary`: rgb(23 23 23) +- `--island-border`: rgb(64 64 64) +- `--island-text`: rgb(250 250 250) +- `--island-text-secondary`: rgb(163 163 163) +- `--island-shadow`: rgba(0 0 0 / 0.3) +- `--island-hover`: rgb(40 40 40) + +### Design Philosophy + +The Island panel follows modern OS UI conventions: +- Uses system-defined colors that adapt to user preferences +- No hard-coded brand colors in the component itself +- Maintains consistency with native OS aesthetics +- Provides visual hierarchy through subtle shadows and backgrounds