Initial commit

src/components/layout/LeftPanel.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { useAppStore, type LeftPanelTab } from '../../store/appStore';
+import StaticBrowser from '../asset/StaticBrowser';
+import ScriptTree from '../script/ScriptTree';
+import GumpBrowser from '../gump/GumpBrowser';
+import styles from './LeftPanel.module.css';
+
+const TABS: { id: LeftPanelTab; label: string }[] = [
+  { id: 'scripts', label: 'Scripts' },
+  { id: 'statics', label: 'Statics' },
+  { id: 'mobiles', label: 'Mobiles' },
+  { id: 'gumps', label: 'Gumps' },
+];
+
+export default function LeftPanel() {
+  const { activeTab, setActiveTab } = useAppStore();
+  const [search, setSearch] = useState('');
+
+  return (
+    <div className={styles.panel}>
+      <div className={styles.tabs}>
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            className={`${styles.tab} ${activeTab === t.id ? styles.active : ''}`}
+            onClick={() => { setActiveTab(t.id); setSearch(''); }}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <div className={styles.search}>
+        <input
+          type="text"
+          placeholder="Search…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className={styles.searchInput}
+        />
+      </div>
+
+      <div className={styles.content}>
+        {activeTab === 'statics' && <StaticBrowser search={search} />}
+        {activeTab === 'scripts' && <ScriptTree search={search} />}
+        {activeTab === 'mobiles' && (
+          <div className={styles.placeholder}>Mobile browser — Phase 1 (coming)</div>
+        )}
+        {activeTab === 'gumps' && <GumpBrowser search={search} />}
+      </div>
+    </div>
+  );
+}