init

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({