Make session list panel collapsible — top app bar toggle (Compose-local state, animated) #138

New issue

Closed

opened 2025-12-22 12:23:15 +00:00 by rwachters · 0 comments

rwachters commented

2025-12-22 12:23:15 +00:00

(Migrated from github.com)

Implementation details (updated per design decisions):

Keep collapse state in Compose, not in the ViewModel.
- Use var isSessionListCollapsed by remember { mutableStateOf(false) } in ChatScreen.
- Provide onToggleSessionList: () -> Unit to toggle it.
Icon choice: use Icons.AutoMirrored.Filled.ViewSidebar for the toggle.
- Consider rotating the icon when collapsed for better feedback (e.g. Modifier.rotate()), but this is optional.
Animation: use AnimatedVisibility with explicit enter and exit params:
- enter = slideInHorizontally()
- exit = slideOutHorizontally()
Files to update:
1. app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/ChatScreen.kt
  - Add local isSessionListCollapsed state and onToggleSessionList lambda.
  - Pass isSessionListCollapsed and the toggle lambda into TopBar content (via the existing TopBarContentProvider usage of ChatTopBarContent) and into ChatScreenContent.
2. app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ChatTopBarContent.kt
  - Add parameters: isSessionListCollapsed: Boolean and onToggleSessionList: () -> Unit.
  - In the left-aligned Row, add an IconButton with Icons.AutoMirrored.Filled.ViewSidebar that calls onToggleSessionList. Add a contentDescription like "Toggle session list panel".
3. app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/ChatScreenContent.kt
  - Add parameter isSessionListCollapsed: Boolean.
  - Wrap the session list Box with AnimatedVisibility(visible = !isSessionListCollapsed, enter = slideInHorizontally(), exit = slideOutHorizontally()).
  - Change chat area weight from 0.75f to 1f so it expands when the session list is hidden.
Accessibility: set a clear contentDescription for the toggle button, e.g., "Toggle session list panel".
Tests / QA criteria:
- Toggle button present in top app bar left area when on Chat screen.
- Clicking the toggle hides/shows the session list with a slide animation.
- When hidden, the chat area expands to use available space.
- Collapse state is kept only in Compose (no ViewModel changes).
- No persistence required across restarts.
Acceptance criteria:
1. UI contains a toggle in the Chat screen top bar left area that toggles the session list panel.
2. The panel uses AnimatedVisibility with slideInHorizontally/slideOutHorizontally.
3. Icon is Icons.AutoMirrored.Filled.ViewSidebar and has a content description.
4. No ViewModel/stateflow changes required.

Notes / follow-ups (out-of-scope for this issue):

Persisting collapse state between sessions (store in settings).
Adding a left vertical sidebar with multiple panel icons and navigation between panels.

We want to add a toggle button in the top app bar (left side) to collapse/expand the session list panel. The collapse state should be stored locally in Compose (not in the ViewModel). The session list panel should animate on show/hide using explicit enter/exit animations. No persistence is required. Implementation details (updated per design decisions): - Keep collapse state in Compose, not in the ViewModel. - Use `var isSessionListCollapsed by remember { mutableStateOf(false) }` in `ChatScreen`. - Provide `onToggleSessionList: () -> Unit` to toggle it. - Icon choice: use `Icons.AutoMirrored.Filled.ViewSidebar` for the toggle. - Consider rotating the icon when collapsed for better feedback (e.g. `Modifier.rotate()`), but this is optional. - Animation: use `AnimatedVisibility` with explicit `enter` and `exit` params: - `enter = slideInHorizontally()` - `exit = slideOutHorizontally()` - Files to update: 1. `app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/ChatScreen.kt` - Add local `isSessionListCollapsed` state and `onToggleSessionList` lambda. - Pass `isSessionListCollapsed` and the toggle lambda into `TopBar` content (via the existing `TopBarContentProvider` usage of `ChatTopBarContent`) and into `ChatScreenContent`. 2. `app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/chatarea/ChatTopBarContent.kt` - Add parameters: `isSessionListCollapsed: Boolean` and `onToggleSessionList: () -> Unit`. - In the left-aligned `Row`, add an `IconButton` with `Icons.AutoMirrored.Filled.ViewSidebar` that calls `onToggleSessionList`. Add a `contentDescription` like "Toggle session list panel". 3. `app/src/commonMain/kotlin/eu/torvian/chatbot/app/compose/ChatScreenContent.kt` - Add parameter `isSessionListCollapsed: Boolean`. - Wrap the session list `Box` with `AnimatedVisibility(visible = !isSessionListCollapsed, enter = slideInHorizontally(), exit = slideOutHorizontally())`. - Change chat area weight from `0.75f` to `1f` so it expands when the session list is hidden. - Accessibility: set a clear `contentDescription` for the toggle button, e.g., "Toggle session list panel". - Tests / QA criteria: - Toggle button present in top app bar left area when on Chat screen. - Clicking the toggle hides/shows the session list with a slide animation. - When hidden, the chat area expands to use available space. - Collapse state is kept only in Compose (no ViewModel changes). - No persistence required across restarts. - Acceptance criteria: 1. UI contains a toggle in the Chat screen top bar left area that toggles the session list panel. 2. The panel uses `AnimatedVisibility` with `slideInHorizontally`/`slideOutHorizontally`. 3. Icon is `Icons.AutoMirrored.Filled.ViewSidebar` and has a content description. 4. No ViewModel/stateflow changes required. Notes / follow-ups (out-of-scope for this issue): - Persisting collapse state between sessions (store in settings). - Adding a left vertical sidebar with multiple panel icons and navigation between panels.

Rows
Columns