# 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