Max Litruv Boonzaayer
e058165830
Bump Vite 8, matrix-js-sdk, and related deps; fix immer/vanilla-extract imports for new majors. Replace blocking sync error dialog with background recovery on wake/offline, and disable Vite auto-open in dev. Add feature handoff documentation index.
101 lines
3.2 KiB
Markdown
101 lines
3.2 KiB
Markdown
# Home & sidebar — handoff
|
|
|
|
## Summary
|
|
|
|
The **Home** panel lists joined rooms (with sub-room nesting), and the **sidebar** switches between Home, DMs, Explore, Inbox, Search, Create, and Settings tabs. Room ordering, categories, and unread badges are rendered here.
|
|
|
|
## User-facing behavior
|
|
|
|
- Home: hierarchical room list with categories, drag reorder, unread/highlight states
|
|
- Sidebar tabs with Paarrot logo states (normal/unread/highlight) on Home
|
|
- Space tabs when inside a space context
|
|
- Threads category on home (`HomeThreadsCategory`)
|
|
- Sync status in client chrome
|
|
|
|
## Architecture
|
|
|
|
```
|
|
SidebarNav → tab routes (HomeTab, DirectTab, ExploreTab, ...)
|
|
Home.tsx
|
|
→ useHomeRooms.ts (room list + sub-room flattening)
|
|
→ RoomNavItem / RoomNavCategoryButton / UnjoinedSubRoomItem
|
|
DirectTab.tsx → useDirectRooms.ts
|
|
```
|
|
|
|
## Key files
|
|
|
|
| Path | Role |
|
|
|------|------|
|
|
| `cinny/src/app/pages/client/home/Home.tsx` | Home room list UI |
|
|
| `cinny/src/app/pages/client/home/useHomeRooms.ts` | Room list logic + Paarrot room kind |
|
|
| `cinny/src/app/pages/client/SidebarNav.tsx` | Sidebar tab bar |
|
|
| `cinny/src/app/pages/client/sidebar/HomeTab.tsx` | Home tab |
|
|
| `cinny/src/app/pages/client/sidebar/DirectTab.tsx` | DMs tab + favicon logos |
|
|
| `cinny/src/app/pages/client/sidebar/InboxTab.tsx` | Inbox tab |
|
|
| `cinny/src/app/pages/client/sidebar/ExploreTab.tsx` | Explore tab |
|
|
| `cinny/src/app/pages/client/sidebar/SearchTab.tsx` | Search tab |
|
|
| `cinny/src/app/pages/client/sidebar/SettingsTab.tsx` | Settings tab |
|
|
| `cinny/src/app/pages/client/sidebar/SpaceTabs.tsx` | Space context tabs |
|
|
| `cinny/src/app/pages/client/home/HomeThreadsCategory.tsx` | Threads grouping |
|
|
| `cinny/src/app/hooks/useRoomListReorder.ts` | DnD reorder |
|
|
| `cinny/src/app/hooks/useSidebarItems.ts` | Sidebar item model |
|
|
|
|
## Data model
|
|
|
|
| Source | Data |
|
|
|--------|------|
|
|
| `allRoomsAtom` | Joined rooms |
|
|
| `roomToUnreadAtom` | Badge state |
|
|
| `mDirectAtom` | DM room mapping |
|
|
| `im.paarrot.sub_rooms` | Nested children (see sub-rooms) |
|
|
| `im.paarrot.room.kind` | Room classification |
|
|
| localStorage | Category collapse, room order |
|
|
|
|
## Dependencies
|
|
|
|
- Jotai room list atoms
|
|
- `matrix-js-sdk` room summaries
|
|
|
|
## Integration points
|
|
|
|
- **sub-rooms**: tree flattening in Home.tsx
|
|
- **room-nav**: nav item components
|
|
- **routing-and-navigation**: tab routes
|
|
- **background-notifications**: unread → favicon in DirectTab
|
|
|
|
## Testing
|
|
|
|
### Manual
|
|
|
|
1. Verify room order drag persists.
|
|
2. Sub-room nesting indent and unjoined state.
|
|
3. Unread badge on sidebar tab.
|
|
4. Category collapse/expand.
|
|
5. Switch tabs; active state correct.
|
|
|
|
### Automated
|
|
|
|
- None
|
|
|
|
## Known issues & gotchas
|
|
|
|
- `useHomeRooms` filters top-level vs sub-room IDs — easy to break tree
|
|
- DirectTab uses custom Paarrot SVGs for badge states
|
|
- Mobile hides sidebar in favor of bottom/full-page nav
|
|
|
|
## Future work
|
|
|
|
- Unified sidebar component between home and space contexts
|
|
- Virtualize long room lists
|
|
|
|
## Related docs
|
|
|
|
- [sub-rooms HANDOFF](../sub-rooms/HANDOFF.md)
|
|
- [room-nav HANDOFF](../room-nav/HANDOFF.md)
|
|
- [routing-and-navigation HANDOFF](../routing-and-navigation/HANDOFF.md)
|
|
|
|
## Add your extra things here
|
|
|
|
- `RoomNavCategoryButton` for collapsible sections
|
|
- `useClosedNavCategoriesAtom` for collapsed state
|