continue scaffolding and refine the basic foundation

app/composables/useTopics.ts

@@ -1,17 +1,23 @@
 import type { Topic } from "~~/types";
 
 export const useTopics = async () => {
+    const appState = useAppState()
     const fetchingTopics = ref(false);
-    const topics: Ref<Topic[] | null> = useState('topics', () => null);
+    const topics: Ref<any[] | null> = useState('topics', () => null);
+
+    /**
+     * Compute topics for the currently active agent
+     */
+    const topicsForActiveAgent = computed(() => {
+        if (topics.value === null || !appState.activeAgentId.value) return [];
+        return topics.value.filter(topic => topic.agentId === appState.activeAgentId.value);
+    });
+
     const activeTopic = computed(() => {
-        if (topics.value === null) return;
-
-        const routeId = useRoute().query.topicId;
-        if (routeId === undefined) return;
-
-        const topic = topics.value.find(topic => topic.id === routeId);
-        if (topic === undefined) return;
+        if (topicsForActiveAgent.value.length === 0) return;
+        if (!appState.activeTopicId.value) return;
 
+        const topic = topicsForActiveAgent.value.find(topic => topic.id === appState.activeTopicId.value);
         return topic;
     });
 
@@ -19,16 +25,17 @@ export const useTopics = async () => {
         if (fetchingTopics.value) return;
         fetchingTopics.value = true;
 
-        const { data, error } = await useFetch('/api/topics');
-        if (error.value) throw error;
-        topics.value = data.value!;
-
-        fetchingTopics.value = false;
+        try {
+            const { data, error } = await useFetch('/api/topics');
+            if (error.value) throw error;
+            topics.value = data.value!;
+        } finally {
+            fetchingTopics.value = false;
+        }
     }
 
     if (topics.value === null) await refreshTopics();
 
-
     const createTopic = async (name: string, agentId: string) => {
         const res = await fetch('/api/topics', {
             method: 'POST',
@@ -42,8 +49,11 @@ export const useTopics = async () => {
             throw new Error('Failed to create topic')
         }
 
-        return res.json()
+        const newTopic = await res.json()
+        if (topics.value === null) topics.value = []
+        topics.value.push(newTopic)
+        return newTopic
     }
 
-    return { createTopic, activeTopic, topics }
+    return { createTopic, activeTopic, topics, topicsForActiveAgent, fetchingTopics, refreshTopics }
 }