Skip to content

Commit b1f03c3

Browse files
DLhuglyDLhugly
committed
feat(ui): refactor panel management system for reliability
- Replaces glitchy layout preset system with a unified visibility state - Removes leftPanel/rightPanel slots in favor of direct panel toggles - Adds Agent toggle button to TopBar - Simplifies architecture in uiStore and settingsStore - Includes documentation for the new system
1 parent a34e1b9 commit b1f03c3

12 files changed

Lines changed: 533 additions & 200 deletions

File tree

‎PANEL_LAYOUT.md‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
# ClifPad Panel Layout System
2+
3+
## New Simplified Layout
4+
5+
```
6+
┌─────────────────────────────────────────────────────────────────┐
7+
│ TopBar: [Agent] [Files] [Browser] [Theme] [Security] │
8+
├─────────────┬─────────────────────────────┬────────────────────┤
9+
│ │ │ │
10+
│ Terminal │ Editor │ Files/Git │
11+
│ │ (Monaco) │ │
12+
│ (xterm.js) │ │ (RightSidebar) │
13+
│ │ │ │
14+
│ │ │ │
15+
│ [tabs] │ │ [Files] [Git] │
16+
│ │ │ │
17+
│ │ │ OR │
18+
│ │ │ │
19+
│ │ │ Agent Panel │
20+
│ │ │ (AI Chat) │
21+
│ │ │ │
22+
├─────────────┴─────────────────────────────┴────────────────────┤
23+
│ StatusBar: [Terminal] [Git] [Editor] | [Agent] [Version] │
24+
└─────────────────────────────────────────────────────────────────┘
25+
```
26+
27+
## Panel States
28+
29+
Each panel can be independently toggled:
30+
31+
| Panel | Toggle Location | Default State | Purpose |
32+
|----------|-------------------|---------------|----------------------------------|
33+
| Terminal | StatusBar (left) | ✅ Visible | Integrated shell, multiple tabs |
34+
| Editor | StatusBar (mid) | ✅ Visible | Monaco code editor |
35+
| Files | TopBar (right) | ✅ Visible | File tree + Git operations |
36+
| Agent | TopBar/StatusBar | ❌ Hidden | AI coding assistant chat |
37+
38+
## Flexible Layouts
39+
40+
Users can create any combination:
41+
42+
### Default (3-panel)
43+
```
44+
[Terminal] [Editor] [Files]
45+
```
46+
47+
### Agent Mode (3-panel)
48+
```
49+
[Terminal] [Editor] [Agent]
50+
```
51+
52+
### Minimal (2-panel)
53+
```
54+
[Terminal] [Editor]
55+
```
56+
or
57+
```
58+
[Editor] [Files]
59+
```
60+
61+
### Zen Mode (1-panel)
62+
```
63+
[Editor]
64+
```
65+
66+
### Full Productivity (4-panel)
67+
```
68+
[Terminal] [Editor] [Files + Agent visible simultaneously]
69+
```
70+
Note: Since Agent and Files share the right space, only one is visible at a time. Toggle between them with TopBar/StatusBar buttons.
71+
72+
## Panel Controls
73+
74+
### TopBar (Right Section)
75+
- **Agent Button** - Toggle AI chat panel on/off
76+
- **Files Button** - Toggle file explorer/git panel on/off
77+
78+
### StatusBar
79+
- **Left**: Terminal toggle, Git status, Launch buttons
80+
- **Middle**: Editor toggle, Language indicator
81+
- **Right**: Agent toggle, Version info
82+
83+
## Keyboard Shortcuts (can be registered)
84+
85+
Suggested shortcuts in keybindings:
86+
- `Ctrl/Cmd + ~` - Toggle Terminal
87+
- `Ctrl/Cmd + B` - Toggle Files
88+
- `Ctrl/Cmd + .` - Toggle Agent
89+
- `Ctrl/Cmd + Shift + E` - Toggle Editor
90+
91+
## Resizing
92+
93+
All panels support drag-to-resize:
94+
- **Terminal**: Drag right edge to resize width (20-80%)
95+
- **Files/Agent**: Drag left edge to resize width (180-500px)
96+
- **Agent**: Can be wider than Files (280-full width minus 100px)
97+
98+
Panel sizes are **persistent** across sessions (stored in uiStore signals).
99+
100+
## State Management
101+
102+
### Core State (uiStore)
103+
```typescript
104+
visiblePanels: Set<Panel> = Set(["terminal", "files", "editor"])
105+
terminalWidth: number = 50 // percentage
106+
sidebarWidth: number = 240 // pixels
107+
agentWidth: number = 380 // pixels
108+
```
109+
110+
### Derived (computed on demand)
111+
```typescript
112+
terminalVisible() = visiblePanels.has("terminal")
113+
filesVisible() = visiblePanels.has("files")
114+
agentVisible() = visiblePanels.has("agent")
115+
editorVisible() = visiblePanels.has("editor")
116+
```
117+
118+
## Architecture Benefits
119+
120+
1. **No conflicts** - Single source of truth eliminates race conditions
121+
2. **Easy debugging** - Check one place: `visiblePanels()`
122+
3. **Predictable** - Same action always produces same result
123+
4. **Flexible** - Any combination of panels can be shown
124+
5. **Clean** - Removed 200+ lines of preset management code
125+
126+
## Migration from Old System
127+
128+
The old preset system (`"default"`, `"agent-mode"`, `"terminal-only"`, etc.) has been removed. Users now have **more control** with simpler toggle buttons instead of having to remember preset names.

‎PANEL_SYSTEM_REFACTOR.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
# Panel System Refactor
2+
3+
## Problem
4+
The tab/panel system for Terminal, Agent, Files/Git, and Editor was glitchy and inconsistent because there were **two separate systems** managing panel visibility:
5+
6+
1. **Layout Preset System** - Used `leftPanel`/`rightPanel` signals with preset configurations
7+
2. **Direct Toggle Functions** - Used individual visibility signals (`terminalVisible`, `sidebarVisible`, `agentVisible`, `editorVisible`)
8+
9+
These two systems weren't synchronized, causing issues like:
10+
- Closing panels could leave them "pinned" in unexpected positions
11+
- Agent panel wasn't integrated with the preset system
12+
- Toggling panels from different locations (TopBar vs StatusBar) could produce inconsistent results
13+
14+
## Solution
15+
**Unified Panel Management System** with a single source of truth:
16+
17+
### New Architecture
18+
- **Single state**: `visiblePanels` - a `Set<Panel>` containing: `"terminal"`, `"agent"`, `"files"`, `"editor"`
19+
- **Derived signals**: All visibility checks computed from the single state
20+
- **Simple API**: `togglePanel()`, `showPanel()`, `hidePanel()`, `setPanelVisibility()`
21+
22+
### Key Changes
23+
24+
#### 1. `src/stores/uiStore.ts`
25+
- **Removed**: `PanelSlot`, `LayoutPreset`, `LAYOUT_PRESETS`, `leftPanel`, `rightPanel`, layout preset functions
26+
- **Added**: `Panel` type, `visiblePanels` signal, unified panel management functions
27+
- **Kept for compatibility**: All existing toggle/setter functions now route through the unified system
28+
29+
#### 2. `src/components/layout/TopBar.tsx`
30+
- **Removed**: Layout dropdown with presets
31+
- **Added**: Simple Agent toggle button (matches the existing Files toggle pattern)
32+
- Agent and Files toggles now sit side-by-side in the top bar
33+
34+
#### 3. `src/stores/settingsStore.ts`
35+
- **Removed**: `leftPanel` and `rightPanel` from Settings interface
36+
- Panel visibility is now ephemeral (not persisted across sessions)
37+
38+
#### 4. `src/App.tsx`
39+
- **Removed**: Layout restoration logic from settings
40+
41+
## Benefits
42+
✅ **Single source of truth** - No more conflicting state
43+
✅ **Predictable behavior** - Toggling a panel always does the same thing
44+
✅ **Simpler UI** - Direct toggle buttons instead of complex preset system
45+
✅ **Better flexibility** - Users can show/hide any combination of panels
46+
✅ **Backward compatible** - All existing toggle functions still work
47+
48+
## User-Facing Changes
49+
- **Layout dropdown removed** from top bar
50+
- **Agent toggle button added** to top bar (next to Files toggle)
51+
- Users now have direct control over each panel independently
52+
- Panel visibility resets to default (Terminal, Files, Editor) on app restart
53+
54+
## Migration Notes
55+
- Existing saved layout preferences (`leftPanel`/`rightPanel` in settings) will be ignored
56+
- No data loss - just reverts to showing Terminal, Files, and Editor by default
57+
- Users can quickly toggle panels on/off using:
58+
- TopBar: Agent button, Files button
59+
- StatusBar: Terminal button, Agent button, Editor button
60+
61+
## Technical Details
62+
63+
### Before:
64+
```typescript
65+
// Two competing systems
66+
const [leftPanel, setLeftPanel] = createSignal<PanelSlot>("terminal");
67+
const [rightPanel, setRightPanel] = createSignal<PanelSlot>("sidebar");
68+
const [terminalVisible, setTerminalVisible] = createSignal(true);
69+
const [agentVisible, setAgentVisible] = createSignal(false);
70+
// ... could get out of sync
71+
```
72+
73+
### After:
74+
```typescript
75+
// Single source of truth
76+
const [visiblePanels, setVisiblePanels] = createSignal<Set<Panel>>(
77+
new Set(["terminal", "files", "editor"])
78+
);
79+
80+
// Derived signals (always consistent)
81+
const terminalVisible = () => visiblePanels().has("terminal");
82+
const agentVisible = () => visiblePanels().has("agent");
83+
```
84+
85+
## Testing Checklist
86+
- [ ] Toggle Terminal from StatusBar
87+
- [ ] Toggle Agent from TopBar
88+
- [ ] Toggle Agent from StatusBar
89+
- [ ] Toggle Files from TopBar
90+
- [ ] Toggle Editor from StatusBar
91+
- [ ] Close all panels except one - verify no "pinning" issues
92+
- [ ] Open multiple panels simultaneously
93+
- [ ] Restart app - verify default layout loads correctly
94+
- [ ] Resize panels - verify they maintain proper widths

‎README.md‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,19 @@ Two products, one monorepo:
3737
Both use any LLM via OpenRouter, OpenAI, Anthropic, or Ollama (fully local). No Electron. No telemetry. No subscription.
3838

3939
<p align="center">
40-
<img src="SplashScreen.png" alt="ClifPad Screenshot" width="800" />
40+
<img src="clif-pad-ide/www/117shots_so.png" alt="ClifPad Screenshot 1" width="800" />
41+
</p>
42+
43+
<p align="center">
44+
<img src="clif-pad-ide/www/30shots_so.png" alt="ClifPad Screenshot 2" width="800" />
45+
</p>
46+
47+
<p align="center">
48+
<img src="clif-pad-ide/www/900shots_so.png" alt="ClifPad Screenshot 3" width="800" />
49+
</p>
50+
51+
<p align="center">
52+
<img src="SplashScreen.png" alt="ClifPad Logo" width="800" />
4153
</p>
4254

4355
---

0 commit comments

Comments
 (0)