Add multi-workspace selector scope

frontend/src/features/channels/stores/channelsStore.js

@@ -14,6 +14,7 @@ export const useChannelsStore = defineStore('channels', () => {
     const isCreating = ref(false);
     const error = ref(null);
     const loadedWorkspaceId = ref(null);
+    const allWorkspacesKey = '__all__';
 
     const availableNetworks = [
         'Instagram',
@@ -28,15 +29,16 @@ export const useChannelsStore = defineStore('channels', () => {
 
     async function fetchChannels({ force = false } = {}) {
         const currentWorkspaceId = workspaceStore.activeWorkspaceId;
+        const currentScopeKey = currentWorkspaceId ?? workspaceStore.workspaceScopeKey ?? allWorkspacesKey;
 
-        if (!authStore.isAuthenticated || !currentWorkspaceId) {
+        if (!authStore.isAuthenticated) {
             channels.value = [];
             error.value = null;
             loadedWorkspaceId.value = null;
             return;
         }
 
-        if (!force && loadedWorkspaceId.value === currentWorkspaceId) {
+        if (!force && loadedWorkspaceId.value === currentScopeKey) {
             return;
         }
 
@@ -46,12 +48,14 @@ export const useChannelsStore = defineStore('channels', () => {
         try {
             const response = await client.get('/api/channels', {
                 params: {
-                    workspaceId: currentWorkspaceId,
+                    workspaceId: currentWorkspaceId ?? undefined,
                 },
             });
 
-            channels.value = response.data ?? [];
-            loadedWorkspaceId.value = currentWorkspaceId;
+            channels.value = (response.data ?? []).filter(channel =>
+                workspaceStore.isWorkspaceVisible(channel.workspaceId)
+            );
+            loadedWorkspaceId.value = currentScopeKey;
         } catch (fetchError) {
             console.error('Failed to fetch channels:', fetchError);
             channels.value = [];
@@ -101,9 +105,9 @@ export const useChannelsStore = defineStore('channels', () => {
     }
 
     watch(
-        () => [authStore.isAuthenticated, workspaceStore.activeWorkspaceId],
-        async ([isAuthenticated, workspaceId]) => {
-            if (!isAuthenticated || !workspaceId) {
+        () => [authStore.isAuthenticated, workspaceStore.workspaceScopeKey],
+        async ([isAuthenticated]) => {
+            if (!isAuthenticated) {
                 channels.value = [];
                 error.value = null;
                 loadedWorkspaceId.value = null;

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

@@ -47,10 +47,12 @@
             .filter(channel => channel.network)
             .map(channel => {
                 const metrics = buildMetrics(channel.name);
+                const workspace = workspaceStore.workspaces.find(candidate => candidate.id === channel.workspaceId);
 
                 return {
                     ...channel,
                     ...metrics,
+                    workspaceName: workspace?.name ?? t('nav.noWorkspace'),
                 };
             })
     );
@@ -215,7 +217,7 @@
             >
                 <div class="channel-header">
                     <strong>{{ channel.name }}</strong>
-                    <span>{{ workspaceStore.activeWorkspace?.name || t('nav.noWorkspace') }}</span>
+                    <span>{{ channel.workspaceName }}</span>
                 </div>
 
                 <div class="channel-metrics">