oxspeak_server/.junie/plans/frontend-server-scoped-channels-categories-plan.md

sessionId

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.