init

frontend/.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+dist/

frontend/src/pages/server/index.vue

@@ -1,18 +1,44 @@
 <script lang="ts" setup>
 import {storeToRefs} from 'pinia'
 import {useChannelStore} from '@/stores/channel'
-import {ref} from 'vue'
+import {useCategoryStore} from '@/stores/category'
+import {ref, watch, onMounted} from 'vue'
 import {useRoute} from 'vue-router'
 
 const props = defineProps<{
   serverId: string
   channelId?: string
 }>();
-const serverId = props.serverId
 
 const route = useRoute()
 const channelStore = useChannelStore()
+const categoryStore = useCategoryStore()
 const {channels} = storeToRefs(channelStore)
+const {categories} = storeToRefs(categoryStore)
+
+const loadServerData = async (targetServerId: string) => {
+  if (!targetServerId) return
+  channelStore.reset()
+  categoryStore.reset()
+  try {
+    await Promise.all([
+      channelStore.fetchChannels(targetServerId),
+      categoryStore.fetchCategories(targetServerId)
+    ])
+  } catch (error) {
+    console.error('Failed to load server-scoped channels and categories:', error)
+  }
+}
+
+watch(
+  () => props.serverId,
+  async (newServerId) => {
+    if (newServerId) {
+      await loadServerData(newServerId)
+    }
+  },
+  {immediate: true}
+)
 
 const showDialog = ref(false)
 const formData = ref({

frontend/src/stores/category.ts

@@ -6,9 +6,13 @@ export const useCategoryStore = defineStore("category", {
     categories: []
   }),
   actions: {
-    async fetchCategories() {
+    async fetchCategories(serverId?: string) {
       let api = useApi();
-      let response = await api.get("/categories");
+      let url = "/categories";
+      if (serverId) {
+        url += `?server_id=${serverId}`;
+      }
+      let response = await api.get(url);
       this.categories = await response.json();
     },
     reset() {

frontend/src/stores/channel.ts

@@ -23,9 +23,13 @@ export const useChannelStore = defineStore('channel', {
     error: null as string | null
   }),
   actions: {
-    async fetchChannels() {
+    async fetchChannels(serverId?: string) {
       let api = useApi();
-      let response = await api.get("/channels");
+      let url = "/channels";
+      if (serverId) {
+        url += `?server_id=${serverId}`;
+      }
+      let response = await api.get(url);
       this.channels = await response.json();
     },
     async createChannel(payload: {