init

frontend/src/pages/server/channel/index.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
-import {computed, onMounted, ref} from 'vue';
+import {computed, onMounted, ref, watch} from 'vue';
 import {useRoute} from 'vue-router';
 import {storeToRefs} from 'pinia'; // Import crucial
 import {useMessageStore} from '@/stores/message';
 
+const props = defineProps<{
+  serverId: string
+  channelId: string
+}>();
+
+const channelId = computed(() => props.channelId);
+
 const route = useRoute();
 const messageStore = useMessageStore();
 
@@ -11,7 +18,7 @@ const messageStore = useMessageStore();
 const {messages, loading} = storeToRefs(messageStore);
 
 const newMessage = ref('');
-const channelId = computed(() => route.params.channelId as string);
+
 
 const sendMessage = async () => {
   if (!newMessage.value.trim()) return;
@@ -31,6 +38,11 @@ onMounted(() => {
     messageStore.fetchMessages(channelId.value);
   }
 });
+watch(channelId, (newChannelId) => {
+  if (newChannelId) {
+    messageStore.fetchMessages(newChannelId);
+  }
+}, {immediate: true})
 </script>
 
 <template>

frontend/src/pages/server/index.vue

@@ -1,12 +1,16 @@
 <script lang="ts" setup>
 import {storeToRefs} from 'pinia'
 import {useChannelStore} from '@/stores/channel'
-import {computed, ref} from 'vue'
+import {ref} from 'vue'
 import {useRoute} from 'vue-router'
 
-const route = useRoute()
-const serverId = computed(() => route.params.serverId as string)
+const props = defineProps<{
+  serverId: string
+  channelId?: string
+}>();
+const serverId = props.serverId
 
+const route = useRoute()
 const channelStore = useChannelStore()
 const {channels} = storeToRefs(channelStore)