Add real workspace channels

frontend/src/features/channels/views/ChannelsView.vue

@@ -1,5 +1,5 @@
 <script setup>
-    import { computed, reactive, ref, watch } from 'vue';
+    import { computed, onMounted, reactive, ref, watch } from 'vue';
     import { useRoute } from 'vue-router';
     import { useI18n } from 'vue-i18n';
     import { useWorkspaceStore } from '@/features/workspaces/stores/workspaceStore.js';
@@ -87,11 +87,11 @@
         isCreateFormVisible.value = true;
     }
 
-    function submitForm() {
+    async function submitForm() {
         formError.value = null;
 
         try {
-            channelsStore.createChannel({
+            await channelsStore.createChannel({
                 name: form.name,
                 network: form.network,
             });
@@ -118,6 +118,10 @@
         },
         { immediate: true }
     );
+
+    onMounted(() => {
+        channelsStore.fetchChannels();
+    });
 </script>
 
 <template>
@@ -178,15 +182,30 @@
                 <button
                     class="primary"
                     type="button"
+                    :disabled="channelsStore.isCreating"
                     @click="submitForm"
                 >
-                    {{ t('channels.createTitle') }}
+                    {{ channelsStore.isCreating ? t('common.saving') : t('channels.createTitle') }}
                 </button>
             </div>
         </div>
 
         <div
-            v-if="channelsForActiveNetwork.length"
+            v-if="channelsStore.isLoading"
+            class="page-message"
+        >
+            {{ t('loading') }}
+        </div>
+
+        <div
+            v-else-if="channelsStore.error"
+            class="page-message error"
+        >
+            {{ channelsStore.error }}
+        </div>
+
+        <div
+            v-else-if="channelsForActiveNetwork.length"
             class="channel-grid"
         >
             <article