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

# Requirements

### Overview & Goals
The goal of this task is to add an "Add Server" button and creation modal on the frontend (leveraging existing backend server creation endpoints), and investigate/address any server scoping issues with channels and categories when multiple servers exist.

### Scope
- **In Scope**:
  - Adding an "Add Server" button in the frontend layout/navigation (e.g. in `AppLayout.vue` or sidebar) with a creation dialog supporting server name, password, and default flags.
  - Verifying and ensuring that channel and category queries correctly filter and isolate data per server.
- **Out of Scope**:
  - Major backend restructuring (existing CRUD and filter endpoints are already fully implemented).

### User Stories
- **As a user**, I want an "Add Server" button in the UI so that I can easily create a new server.
- **As a user**, when I switch between servers, I want to ensure that channels and categories are strictly scoped to the active server.

### Functional Requirements
1. **Add Server UI (`AppLayout.vue`)**:
   - Provide a prominent button in the sidebar to open the "Create Server" dialog.
   - Collect server details (`name`, optional `password`, `is_default`) and call `serverStore.createServer`.
   - On successful creation, navigate to the new server's view (`/server/${newServer.id}`).
2. **Server Scoping Verification**:
   - Ensure channels and categories fetched for a server correctly correspond to that server ID.

# Technical Design

### Current Implementation
- Backend server creation (`POST /servers`) and listing (`GET /servers`) are fully implemented.
- Frontend `useServerStore` has `createServer` and `fetchServers`.
- `AppLayout.vue` already includes a dialog structure for creating servers triggered by an `mdi-plus` icon in the navigation drawer.

### Proposed Changes
1. **`frontend/src/layouts/AppLayout.vue`**:
   - Ensure the server creation dialog and form bindings are fully wired up and intuitive.
2. **Review Channel & Category Scoping**:
   - Verify that `useChannelStore.fetchChannels(serverId)` and `useCategoryStore.fetchCategories(serverId)` correctly pass `server_id` and that the backend filters properly.