UI 設計ガイド (Developer) 🛠️

このプロジェクトの UI 実装についての技術的な解説だよ。

1. 技術スタック

• Vite + React (TypeScript): 高速な開発と型安全性を両立。
• Material UI (MUI) v6: 洗練されたデザインとアクセシビリティを提供。
• Emotion (CSS-in-JS): 柔軟なスタイリング。

2. タブ構造の設計

各機能は src/components/tabs 配下にカプセル化されているよ。 基本的には、以下の Containers と Components の分離パターンを採用しているんだ。

• Containers/: useOverlayStore (Zustand) や Hooks を呼び出し、ロジックとデータを管理。
• Components/: 外部から渡された Props に基づいて純粋に描画を行うコンポーネント。

TIP

新しいタブを追加する際は、src/components/ControlPanel.tsx を修正してルーティング（タブ切り替え）に登録してね！

3. テーマと共通コンポーネント

• src/theme.ts: アプリ全体の配色やフォント、影のつき方を管理しているよ。
• src/components/tabs/common: ボタン、アバター、テーブルなど、プロジェクト共通の UI 部品が詰まってるよ。再利用性を高めるために、まずはここをチェック！✨

4. レスポンシブとレイアウト

コントロールパネルはデスクトップアプリ（Electron）として最適化されているけど、設定タブなどのレイアウトは MUI の Box や Stack を使って柔軟に組まれているよ。

デザイナーさんも開発者さんも、この一貫性を大切にして最強の UI を作っていこー！🚀