Skip to content

Commit 4e30222

Browse files
spencrmartinspencrmartin
authored
Spence/vision channelsfix (#5960)
1 parent 46b9b71 commit 4e30222

File tree

11 files changed

+934
-31
lines changed

11 files changed

+934
-31
lines changed

‎NAVIGATION_STYLES.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# Navigation Styles Implementation
2+
3+
## Overview
4+
Added support for two navigation styles in the Goose Desktop app:
5+
1. **Expanded** - Large tile-based navigation (existing design)
6+
2. **Condensed** - Compact row-based navigation (new design)
7+
8+
## Files Created
9+
10+
### 1. `ui/desktop/src/components/settings/app/NavigationStyleSelector.tsx`
11+
- React component for selecting navigation style
12+
- Two options: Expanded (tiles) and Condensed (rows)
13+
- Stores preference in localStorage under key `navigation_style`
14+
- Dispatches `navigation-style-changed` custom event when changed
15+
- Visual icons for each style option
16+
17+
### 2. `ui/desktop/src/components/Layout/CondensedNavigation.tsx`
18+
- New condensed navigation component
19+
- Row-based layout with icon + label + badge
20+
- Supports all 4 positions (top, bottom, left, right)
21+
- Maintains drag-and-drop reordering functionality
22+
- Excludes widget tiles (clock, activity, tokens) for simplicity
23+
- Matches animation style of expanded navigation
24+
- Smaller footprint: 240px width for vertical, auto height for horizontal
25+
26+
## Files Modified
27+
28+
### 1. `ui/desktop/src/components/settings/app/AppSettingsSection.tsx`
29+
- Added import for `NavigationStyleSelector`
30+
- Added new "Navigation Style" card in settings
31+
- Positioned between "Navigation Position" and "Background Image" sections
32+
33+
### 2. `ui/desktop/src/components/Layout/AppLayout.tsx`
34+
- Added import for `CondensedNavigation` and `NavigationStyle` type
35+
- Added state management for `navigationStyle`
36+
- Added event listener for `navigation-style-changed` events
37+
- Updated navigation component rendering to switch between styles:
38+
- `navigationStyle === 'expanded'` → `TopNavigation`
39+
- `navigationStyle === 'condensed'` → `CondensedNavigation`
40+
41+
## Features
42+
43+
### Expanded Style (Existing)
44+
- Large square tiles in a grid layout
45+
- Includes widget tiles (clock, activity heatmap, token counter)
46+
- Rich visual design with tags, descriptions, and animations
47+
- Drag-and-drop reordering
48+
- Responsive grid: 2-12 columns depending on screen size
49+
50+
### Condensed Style (New)
51+
- Compact horizontal rows
52+
- Icon + label + badge in a single row
53+
- Simplified design focused on navigation
54+
- Drag-and-drop reordering maintained
55+
- Smaller footprint for more screen space
56+
- No widget tiles (navigation items only)
57+
58+
## User Experience
59+
60+
### Settings Location
61+
1. Open Settings (gear icon in navigation or `/settings` route)
62+
2. Navigate to "App" section
63+
3. Find "Navigation Style" card
64+
4. Choose between "Expanded" and "Condensed"
65+
66+
### Behavior
67+
- Changes apply immediately (no page reload required)
68+
- Preference persists across sessions (localStorage)
69+
- Works with all 4 navigation positions (top, bottom, left, right)
70+
- Smooth animations when toggling navigation visibility
71+
- Drag-and-drop reordering works in both styles
72+
73+
## Technical Details
74+
75+
### State Management
76+
- Uses localStorage for persistence
77+
- Custom events for cross-component communication
78+
- React hooks for state management (`useState`, `useEffect`)
79+
80+
### Styling
81+
- Tailwind CSS for responsive design
82+
- Framer Motion for animations
83+
- Consistent with existing design system
84+
85+
### Layout Calculations
86+
- **Expanded (Vertical)**: 360px width, full height, scrollable
87+
- **Condensed (Vertical)**: 240px width, full height, scrollable
88+
- **Expanded (Horizontal)**: Full width, auto height, responsive grid
89+
- **Condensed (Horizontal)**: Full width, auto height, single row
90+
91+
## Testing Checklist
92+
93+
- [ ] Test expanded style with all 4 positions
94+
- [ ] Test condensed style with all 4 positions
95+
- [ ] Test switching between styles
96+
- [ ] Test drag-and-drop in both styles
97+
- [ ] Verify localStorage persistence
98+
- [ ] Test responsive behavior
99+
- [ ] Test animations and transitions
100+
- [ ] Verify all navigation items work correctly
101+
- [ ] Test with different screen sizes
102+
103+
## Future Enhancements
104+
105+
Possible improvements:
106+
1. Add more navigation styles (e.g., icon-only, minimal)
107+
2. Allow customization of which items appear in condensed view
108+
3. Add keyboard shortcuts for navigation style switching
109+
4. Sync navigation style preference across devices (if user sync is implemented)
110+
5. Add preview thumbnails in the style selector

‎NAVIGATION_VISUAL_GUIDE.md‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
# Navigation Styles Visual Guide
2+
3+
## Settings UI
4+
5+
### Navigation Style Selector
6+
Located in: **Settings > App > Navigation Style**
7+
8+
```
9+
┌─────────────────────────────────────────────┐
10+
│ Navigation Style │
11+
│ Choose between expanded tiles or condensed │
12+
│ rows │
13+
├─────────────────────────────────────────────┤
14+
│ │
15+
│ ┌──────────────┐ ┌──────────────┐ │
16+
│ │ [GRID] │ │ [ROWS] │ │
17+
│ │ │ │ │ │
18+
│ │ Expanded │ │ Condensed │ │
19+
│ │ Large tiles │ │ Compact rows│ │
20+
│ │ with details│ │ │ │
21+
│ └──────────────┘ └──────────────┘ │
22+
│ │
23+
└─────────────────────────────────────────────┘
24+
```
25+
26+
## Expanded Style (Existing)
27+
28+
### Top Position
29+
```
30+
┌─────────────────────────────────────────────────────────────┐
31+
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
32+
│ │ Home │ │ Chat │ │History │ │Recipes │ │ Clock │ │
33+
│ │ 2:30PM │ │ 3 today│ │ 42 tot │ │ 8 │ │ [⌚] │ │
34+
│ │ 🏠 │ │ 💬 │ │ 📜 │ │ 📄 │ │ │ │
35+
│ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ │
36+
└─────────────────────────────────────────────────────────────┘
37+
│ │
38+
│ Main Content Area │
39+
│ │
40+
```
41+
42+
### Left Position
43+
```
44+
┌──────────┬────────────────────────────────────────┐
45+
│ ┌──────┐ │ │
46+
│ │ Home │ │ │
47+
│ │ 2:30 │ │ │
48+
│ │ 🏠 │ │ │
49+
│ └──────┘ │ │
50+
│ ┌──────┐ │ │
51+
│ │ Chat │ │ Main Content Area │
52+
│ │ 3 │ │ │
53+
│ │ 💬 │ │ │
54+
│ └──────┘ │ │
55+
│ ┌──────┐ │ │
56+
│ │Histor│ │ │
57+
│ │ 42 │ │ │
58+
│ │ 📜 │ │ │
59+
│ └──────┘ │ │
60+
└──────────┴────────────────────────────────────────┘
61+
```
62+
63+
## Condensed Style (New)
64+
65+
### Top Position
66+
```
67+
┌─────────────────────────────────────────────────────────────┐
68+
│ ┌─────────────────────────────────────────────────────────┐ │
69+
│ │ 🏠 Home 2:30PM │ 💬 Chat 3 │ 📜 History 42 │ 📄 Recipes 8│ │
70+
│ └─────────────────────────────────────────────────────────┘ │
71+
└─────────────────────────────────────────────────────────────┘
72+
│ │
73+
│ Main Content Area │
74+
│ │
75+
```
76+
77+
### Left Position
78+
```
79+
┌──────────────┬──────────────────────────────────────┐
80+
│ 🏠 Home 2:30 │ │
81+
│ 💬 Chat 3 │ │
82+
│ 📜 History 42│ Main Content Area │
83+
│ 📄 Recipes 8 │ │
84+
│ 🧩 Ext. 5/12 │ │
85+
│ ⚙️ Settings │ │
86+
└──────────────┴──────────────────────────────────────┘
87+
```
88+
89+
### Bottom Position
90+
```
91+
│ │
92+
│ Main Content Area │
93+
│ │
94+
┌─────────────────────────────────────────────────────────────┐
95+
│ ┌─────────────────────────────────────────────────────────┐ │
96+
│ │ 🏠 Home 2:30PM │ 💬 Chat 3 │ 📜 History 42 │ 📄 Recipes 8│ │
97+
│ └─────────────────────────────────────────────────────────┘ │
98+
└─────────────────────────────────────────────────────────────┘
99+
```
100+
101+
### Right Position
102+
```
103+
┌──────────────────────────────────────┬──────────────┐
104+
│ │ 🏠 Home 2:30 │
105+
│ │ 💬 Chat 3 │
106+
│ Main Content Area │ 📜 History 42│
107+
│ │ 📄 Recipes 8 │
108+
│ │ 🧩 Ext. 5/12 │
109+
│ │ ⚙️ Settings │
110+
└──────────────────────────────────────┴──────────────┘
111+
```
112+
113+
## Key Differences
114+
115+
| Feature | Expanded Style | Condensed Style |
116+
|---------------------|-------------------------|------------------------|
117+
| Layout | Grid of tiles | Single row/column |
118+
| Size | Large (140px squares) | Compact (48px height) |
119+
| Widgets | Included (clock, etc.) | Excluded |
120+
| Information | Rich (tags, desc.) | Minimal (badge only) |
121+
| Space Usage | More screen space | Less screen space |
122+
| Visual Impact | High | Low |
123+
| Best For | Discovery, overview | Quick navigation |
124+
125+
## Drag & Drop
126+
127+
Both styles support drag-and-drop reordering:
128+
129+
### Expanded
130+
```
131+
┌────────┐ ┌────────┐ ┌────────┐
132+
│ Home │ --> │ Chat │ │History │
133+
│ (drag) │ │ │ │ │
134+
└────────┘ └────────┘ └────────┘
135+
```
136+
137+
### Condensed
138+
```
139+
│ 🏠 Home │ --> │ 💬 Chat │ │ 📜 History │
140+
│ (drag) │ │ │ │ │
141+
```
142+
143+
## Animation
144+
145+
Both styles feature smooth spring animations:
146+
- Expand/collapse: Spring animation (300ms stiffness, 30 damping)
147+
- Item entrance: Staggered fade-in (30ms delay per item)
148+
- Hover: Scale 1.02
149+
- Tap: Scale 0.98
150+
- Drag: Opacity 0.5, scale 0.95
151+
152+
## Responsive Behavior
153+
154+
### Expanded Style
155+
- **Small screens**: 2 columns
156+
- **Medium screens**: 3-4 columns
157+
- **Large screens**: 6 columns
158+
- **Ultra-wide (2536px+)**: 12 columns
159+
160+
### Condensed Style
161+
- **Horizontal**: Scrollable row if needed
162+
- **Vertical**: Scrollable column if needed
163+
- Always maintains compact size

‎ui/desktop/src/components/Layout/AppLayout.tsx‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ import DocumentEditor from '../DocumentEditor';
1313
import WebViewer from '../WebViewer';
1414

1515
import { TopNavigation } from './TopNavigation';
16+
import { CondensedNavigation } from './CondensedNavigation';
1617
import { NavigationPosition } from '../settings/app/NavigationPositionSelector';
18+
import { NavigationStyle } from '../settings/app/NavigationStyleSelector';
1719

1820
// Create context for navigation state
1921
const NavigationContext = createContext<{
@@ -43,6 +45,10 @@ const AppLayoutContent: React.FC<AppLayoutProps> = ({ setIsGoosehintsModalOpen }
4345
const stored = localStorage.getItem('navigation_position');
4446
return (stored as NavigationPosition) || 'top';
4547
});
48+
const [navigationStyle, setNavigationStyle] = useState<NavigationStyle>(() => {
49+
const stored = localStorage.getItem('navigation_style');
50+
return (stored as NavigationStyle) || 'expanded';
51+
});
4652

4753
// Listen for navigation position changes
4854
useEffect(() => {
@@ -55,6 +61,17 @@ const AppLayoutContent: React.FC<AppLayoutProps> = ({ setIsGoosehintsModalOpen }
5561
return () => window.removeEventListener('navigation-position-changed', handlePositionChange);
5662
}, []);
5763

64+
// Listen for navigation style changes
65+
useEffect(() => {
66+
const handleStyleChange = (e: Event) => {
67+
const customEvent = e as CustomEvent<{ style: NavigationStyle }>;
68+
setNavigationStyle(customEvent.detail.style);
69+
};
70+
71+
window.addEventListener('navigation-style-changed', handleStyleChange);
72+
return () => window.removeEventListener('navigation-style-changed', handleStyleChange);
73+
}, []);
74+
5875
// Bento box state management
5976
const [bentoBoxContainers, setBentoBoxContainers] = useState<SidecarContainer[]>([]);
6077

@@ -332,13 +349,19 @@ const AppLayoutContent: React.FC<AppLayoutProps> = ({ setIsGoosehintsModalOpen }
332349
</div>
333350
);
334351

335-
// Render navigation component
336-
const navigationComponent = (
352+
// Render navigation component based on style
353+
const navigationComponent = navigationStyle === 'expanded' ? (
337354
<TopNavigation
338355
isExpanded={isNavExpanded}
339356
setIsExpanded={setIsNavExpanded}
340357
position={navigationPosition}
341358
/>
359+
) : (
360+
<CondensedNavigation
361+
isExpanded={isNavExpanded}
362+
setIsExpanded={setIsNavExpanded}
363+
position={navigationPosition}
364+
/>
342365
);
343366

344367
return (

0 commit comments

Comments
 (0)