Implement creating threads from messages

src/components/Thread.vue

@@ -17,14 +17,14 @@
             </div>
         </template>
         <div v-else-if="event.type === 'create-thread'" class="self-center mb-2 italic text-gray-500 text-center" @mousedown="start(i)" @mouseup="stop" @contextmenu="e => openmenu(e, i)">
-            {{ sourceObj.contacts[event.contact].name }} created a new thread called "<RouterLink :to="`${baseUrl}/${source}/${sourceItem}/${event.thread}`" class="text-blue-500">{{ item.threads[event.thread].title }}</RouterLink>"
+            {{ sourceObj.contacts[event.contact].name }} created a new thread called "<RouterLink :to="`/source/${source}/${sourceItem}/${event.thread}`" class="text-blue-500">{{ item.threads[event.thread].title }}</RouterLink>"
         </div>
-        <div v-if="selectedMessage === i" class="bg-gray-300 flex justify-around mb-4 p-2 text-blue-500">
+        <div v-if="selectedMessage === i && event.type === 'message'" class="bg-gray-300 flex justify-around mb-4 p-2 text-blue-500">
             <button v-if="ownsMessage && event.type === 'message'" @click="startEditing">Edit</button>
             <button v-if="ownsMessage" @click="deleteMessage(i)">Delete</button>
-            <button>Create thread</button>
+            <button v-if="event.type === 'message'" @click="createThread(i)">Create thread</button>
-            <button>Create to do</button>
+            <button v-if="event.type === 'message'">Create to do</button>
-            <button>Add to garden</button>
+            <button v-if="event.type === 'message'">Add to garden</button>
         </div>
     </template>
 </div>
@@ -37,7 +37,9 @@
 import { computed, onUnmounted, ref, watch } from 'vue';
 import { items, sources } from '../state';
 import Avatar from './Avatar.vue';
-import { RouterLink } from 'vue-router';
+import { RouterLink, useRouter } from 'vue-router';
+
+const router = useRouter();
 
 const props = defineProps<{
     source: number;
@@ -160,6 +162,27 @@ function deleteMessage(event: number) {
     threadItem.value.timeline.splice(event, 1);
     selectedMessageIndex.value = undefined;
 }
+
+function createThread(event: number) {
+    const messageEvent = threadItem.value.timeline[event];
+    if (messageEvent.type !== "message") {
+        return;
+    }
+
+    const threadId = Object.keys(item.value.threads).reduce((acc, curr) => Math.max(acc, parseInt(curr)), 0) + 1;
+    item.value.threads[threadId] = {
+        id: threadId,
+        timeline: [messageEvent],
+        title: messageEvent.message
+    };
+    threadItem.value.timeline.push({
+        contact: sourceObj.value.selfContact,
+        type: "create-thread",
+        time: Date.now(),
+        thread: threadId
+    });
+    router.push(`/source/${props.source}/${props.sourceItem}/${threadId}`);
+}
 </script>
 
 <style scoped>