---
sessionId: session-260727-090636-1x6i
---

# Requirements

### Overview & Goals
The goal of this task is to adapt the frontend data-loading policy for channels and categories. Previously, all channels and categories were fetched globally once upon initial load. Now, whenever the user swaps servers (or enters a server view), channels and categories should be reloaded specifically for that active server using the backend query parameters (`server_id`) implemented in the previous backend task.

### Scope
- **In Scope**:
  - Updating `useChannelStore` and `useCategoryStore` in Pinia to accept a `serverId` query parameter when fetching channels and categories.
  - Updating `src/pages/server/index.vue` (and/or router navigation / lifecycle hooks) to trigger fetching of channels and categories filtered by the current `serverId` whenever the active server changes.
  - Resetting or clearing channel and category state appropriately when switching servers.
- **Out of Scope**:
  - Backend changes (already completed in previous task).
  - Changes to other entities (servers, messages, etc.) unless directly related to channel/category scoping.

### User Stories
- **As a user**, when I switch from one server to another, I want the channels and categories list to be reloaded automatically for the newly selected server so that I only see relevant content.

### Functional Requirements
1. **Store Actions (`fetchChannels`, `fetchCategories`)**:
   - Both actions must accept an optional `serverId?: string`.
   - When `serverId` is provided, requests must be made to `/channels?server_id=...` and `/categories?server_id=...`.
2. **Server View Component (`/src/pages/server/index.vue`)**:
   - On component mount or when `serverId` route parameter changes (e.g. via `watch(() => route.params.serverId, ...)`), trigger fetching of channels and categories for the new `serverId`.
   - Clear existing channels/categories or show loading states during the fetch transition.

# Technical Design

### Current Implementation
- Currently, `useSessionStore.loadInitialData()` calls `serverStore.fetchServers()`, `categoryStore.fetchCategories()`, and `channelStore.fetchChannels()` without parameters, retrieving all records from `/channels` and `/categories`.
- `src/pages/server/index.vue` displays `channels` from `useChannelStore`, but does not trigger refetching when switching between different servers.

### Key Decisions
- **Query Parameter Usage**: Leverage the backend endpoints `/channels?server_id=<id>` and `/categories?server_id=<id>` that were created previously.
- **Store & Lifecycle Integration**: Use Vue router route watchers in `src/pages/server/index.vue` (or a dedicated composable/watcher) to detect `serverId` changes and invoke store fetch actions.

### Proposed Changes
1. **`src/stores/channel.ts`**:
   - Modify `fetchChannels(serverId?: string)` to build query string `?server_id=${serverId}` if `serverId` is provided.
2. **`src/stores/category.ts`**:
   - Modify `fetchCategories(serverId?: string)` to build query string `?server_id=${serverId}` if `serverId` is provided.
3. **`src/pages/server/index.vue`**:
   - Add a watcher on `route.params.serverId` (or `serverId` prop).
   - On mount and when `serverId` changes, call `channelStore.fetchChannels(serverId)` and `categoryStore.fetchCategories(serverId)`.

### File Structure
- **Modified Files**:
  - `frontend/src/stores/channel.ts`
  - `frontend/src/stores/category.ts`
  - `frontend/src/pages/server/index.vue`

### Risks & Mitigations
- **Race conditions during rapid server switching**: Mitigated by handling loading states or canceling/ignoring stale promises if necessary, or simply allowing the latest fetch response to overwrite the store state.

# Delivery Steps

### ✓ Step 1: Update channel and category stores to support server-scoped fetching
Update Pinia stores for channels and categories to support filtered fetching by server_id.
- Update `useChannelStore.fetchChannels(serverId?: string)` to accept an optional `serverId` and pass it as a query parameter (`/channels?server_id=...`).
- Update `useCategoryStore.fetchCategories(serverId?: string)` to accept an optional `serverId` and pass it as a query parameter (`/categories?server_id=...`).
- Clear channels and categories when no server is selected or when swapping servers.

### ✓ Step 2: Integrate server-scoped data loading into server view and router navigation
Integrate server-scoped loading into the server view lifecycle and route changes.
- Update `/src/pages/server/index.vue` to watch `serverId` (or trigger on route parameter change / component mount) and fetch channels and categories specifically for the active `serverId`.
- Clear channels and categories when switching between servers or leaving the server view.
- Ensure proper loading states and error handling during server switching.