From 5635b12ca40e30ac52efa90ba329fecb8a0928e4 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 8 Apr 2024 10:10:10 -0500
Subject: [PATCH] Sending messages and styling pass

---
 src/App.vue                   |  6 +--
 src/components/Item.vue       | 22 +++++---
 src/components/Nav.vue        | 24 +++++----
 src/components/PanelTitle.vue | 18 +++++++
 src/components/Thread.vue     | 96 +++++++++++++++++++++++++++--------
 src/components/Todo.vue       | 48 ++++++++++--------
 src/main.ts                   |  8 ++-
 tailwind.config.js            |  6 +++
 8 files changed, 162 insertions(+), 66 deletions(-)
 create mode 100644 src/components/PanelTitle.vue

diff --git a/src/App.vue b/src/App.vue
index 66cb2a0..d0f7fa7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import Nav from './components/Nav.vue'
-import { useRoute, RouterView } from 'vue-router'
-
-const route = useRoute()
+import { RouterView } from 'vue-router'
 </script>
 
 <template>
   <Nav />
-  <div class="p-4 md:ml-64 min-h-screen">
+  <div class="md:ml-64 h-screen overflow-hidden">
     <RouterView />
   </div>
 </template>
diff --git a/src/components/Item.vue b/src/components/Item.vue
index 29698a0..dbc297f 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -1,9 +1,10 @@
 <template>
     <div v-if="Object.keys(sourceItem.threads).length === 1 && '0' in sourceItem.threads"
         class="p-4 border-2 -mt-2px cursor-pointer bg-gray-200 border-gray-800" :class="isSelected(0) ? 'selected shadow-md scale-105' : ''" @click="emits('select', 0)">
-        <div class="flex">
-            <Avatar v-if="contact" v-bind="contact" class="mr-2" />
-            <span class="grow">{{ item.threads[0].preview }}</span>
+        <div class="flex items-center">
+            <Avatar v-if="getContact(0)" v-bind="getContact(0)!" class="mr-2" />
+            <span class="bg-gray-300 px-2 py-1 rounded-2xl block overflow-hidden text-nowrap text-ellipsis">{{ item.threads[0].preview }}</span>
+            <span class="grow" />
             <span v-if="item.threads[0].count > 1" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">{{ item.threads[0].count }}</span>
         </div>
         <div class="flex -mb-2 text-gray-500 text-sm font-normal">
@@ -18,10 +19,11 @@
                 <span>{{ source.name }}</span>
             </div>
         </div>
-        <div v-for="(thread, id) in item.threads" class="p-4 border-2 -mt-2px cursor-pointer bg-slate-300 border-gray-800" :class="isSelected(id) ? 'selected shadow-md scale-105 thread' : ''" @click="emits('select', parseInt(id as unknown as string))">
-            <div class="flex">
-                <Avatar v-if="contact" v-bind="contact" class="mr-2" />
-                <span class="grow">{{ thread.preview }}</span>
+        <div v-for="(thread, id) in item.threads" class="p-4 border-2 -mt-2px cursor-pointer bg-slate-300 border-gray-800" :class="isSelected(id) ? 'selected shadow-md -mx-2 thread' : ''" @click="emits('select', parseInt(id as unknown as string))">
+            <div class="flex items-center">
+                <Avatar v-if="getContact(id)" v-bind="getContact(id)!" class="mr-2" />
+                <span class="bg-gray-100 px-2 py-1 rounded-2xl block overflow-hidden text-nowrap text-ellipsis">{{ thread.preview }}</span>
+                <span class="grow" />
                 <span v-if="thread.count > 1" class="inline-flex items-center justify-center w-3 h-3 p-3 ms-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">{{ thread.count }}</span>
             </div>
             <div class="flex -mb-2 text-gray-500 text-sm font-normal">
@@ -48,7 +50,11 @@ const emits = defineEmits<{
 
 const source = computed(() => sources.value[props.item.source]);
 const sourceItem = computed(() => source.value.items[props.item.sourceItem]);
-const contact = computed(() => props.item.threads[0].contact == null ? null : sources.value[props.item.source].contacts[props.item.threads[0].contact])
+
+function getContact(thread: number) {
+    const contact = props.item.threads[thread].contact;
+    return contact == null ? undefined : sources.value[props.item.source].contacts[contact];
+}
 
 function isSelected(thread: number | string) {
     if (typeof thread === "string") {
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 5ecd4af..e313d13 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -8,13 +8,13 @@
         <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800 flex flex-col">
         <ul class="space-x-2 py-2 flex flex-row overflow-x-hidden hover:overflow-x-auto">
             <li v-for="contact in urgentContacts" class="shrink-0">
-                <RouterLink :to="`source/${contact.source}/${contact.sourceItem}/${contact.thread}`" class="flex items-center text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group relative">
+                <RouterLink :to="`source/${contact.source}/${contact.sourceItem}/${contact.thread}`" class="flex items-center text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group relative" active-class="bg-gray-100 dark:bg-gray-700">
                     <Avatar :image="contact.image" :name="contact.name" :status="contact.status ?? 'unknown'" />
                     <span class="absolute bg-gray-800 bottom-0 right-0 h-4 w-4 text-center rounded-full">{{ Math.min(contact.count, 9) }}</span>
                 </RouterLink>
             </li>
             <li v-for="contact in pinned" class="shrink-0">
-                <RouterLink :to="`source/${contact.source}/${contact.id}/${contact.thread}`" class="flex items-center text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group relative">
+                <RouterLink :to="`source/${contact.source}/${contact.id}/${contact.thread}`" class="flex items-center text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group relative" active-class="bg-gray-100 dark:bg-gray-700">
                     <Avatar :image="contact.image" :name="contact.name" :status="contact.status ?? 'unknown'" />
                     <span v-if="contact.count > 0" class="absolute bg-gray-800 bottom-0 right-0 h-4 w-4 text-center rounded-full">{{ Math.min(contact.count, 9) }}</span>
                     <FontAwesomeIcon v-else :icon="faThumbTack" class="star absolute drop-shadow-2xl	 bottom-0 right-0 h-4 w-4 text-center rounded-full" />
@@ -24,7 +24,7 @@
         <hr/>
         <ul class="space-y-2 font-medium pt-2">
             <li>
-                <RouterLink to="/todo" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <RouterLink to="/todo" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group" active-class="bg-gray-100 dark:bg-gray-700" :class="route.name === 'home' ? 'bg-gray-100 dark:bg-gray-700' : ''">
                     <FontAwesomeIcon :icon="faListCheck" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
                     <span class="ms-3">To Do</span>
                     <span class="flex-grow" />
@@ -32,19 +32,19 @@
                 </RouterLink>
             </li>
             <li>
-                <RouterLink to="/low" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <RouterLink to="/low" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group" active-class="bg-gray-100 dark:bg-gray-700">
                     <FontAwesomeIcon :icon="faList" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
                     <span class="ms-3">Low Priority</span>
                 </RouterLink>
             </li>
             <li>
-                <RouterLink to="/garden" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <RouterLink to="/garden" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group" active-class="bg-gray-100 dark:bg-gray-700">
                     <FontAwesomeIcon :icon="faLeaf" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
                     <span class="ms-3">Garden</span>
                 </RouterLink>
             </li>
             <li>
-                <RouterLink to="/me" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <RouterLink to="/me" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group" active-class="bg-gray-100 dark:bg-gray-700">
                     <FontAwesomeIcon :icon="faFaceSmile" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
                     <span class="ms-3">My messages</span>
                 </RouterLink>
@@ -55,7 +55,7 @@
                     <div>Sources</div>
                     <ul class="space-y-2 p-2 text-sm">
                         <li v-for="source in sources">
-                            <RouterLink :to="`/source/${source.id}`" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                            <RouterLink :to="`/source/${source.id}`" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group" active-class="bg-gray-100 dark:bg-gray-700">
                                 {{ source.name }}
                             </RouterLink>
                         </li>
@@ -67,19 +67,19 @@
         <ul class="space-y-2 font-medium">
             <li><hr/></li>
             <li>
-                <RouterLink to="/snoozed" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <RouterLink to="/snoozed" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group" active-class="bg-gray-100 dark:bg-gray-700">
                     <FontAwesomeIcon :icon="faClock" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
                     <span class="ms-3">Snoozed</span>
                 </RouterLink>
             </li>
             <li>
-                <RouterLink to="/unsorted" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <RouterLink to="/unsorted" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group" active-class="bg-gray-100 dark:bg-gray-700">
                     <FontAwesomeIcon :icon="faShuffle" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
                     <span class="ms-3">Unsorted</span>
                 </RouterLink>
             </li>
             <li>
-                <RouterLink to="/settings" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                <RouterLink to="/settings" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group" active-class="bg-gray-100 dark:bg-gray-700">
                     <FontAwesomeIcon :icon="faGear" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
                     <span class="ms-3">Settings</span>
                 </RouterLink>
@@ -94,11 +94,13 @@ import { faBars, faClock, faFaceSmile, faGear, faLeaf, faList, faListCheck, faSh
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { initFlowbite } from 'flowbite'
 import { computed, onMounted } from 'vue'
-import { RouterLink } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
 import type { ContactStatus } from "../state"
 import { categories, favorites, sources, todoItems, urgentItems } from '../state'
 import Avatar from "./Avatar.vue"
 
+const route = useRoute();
+
 onMounted(() => {
     initFlowbite();
 });
diff --git a/src/components/PanelTitle.vue b/src/components/PanelTitle.vue
new file mode 100644
index 0000000..92d2820
--- /dev/null
+++ b/src/components/PanelTitle.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="text-3xl mb-4 shrink-0">{{ title }}</div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    title: string;
+}>();
+</script>
+
+<style scoped>
+div {
+    width: calc((100vw - 23rem) / 2);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+</style>
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 90a0b30..1d17843 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -1,31 +1,31 @@
 <template>
-<div class="flex flex-col grow">
-    <div class="flex flex-col grow shrink">
-        <template v-for="(event, i) in threadItem.timeline">
-            <template v-if="event.type === 'message'">
-                <div v-if="i === threadItem.timeline.length - 1 || threadItem.timeline[i + 1].type !== 'message' || threadItem.timeline[i + 1].contact !== event.contact" style="max-width: 80%;" class="flex mb-2" :class="event.contact === sourceObj.selfContact ? 'self self-end flex-row-reverse' : 'other self-start'">
-                    <Avatar v-bind="sourceObj.contacts[event.contact]" class="self-end" />
-                    <div class="flex flex-col">
-                        <span class="message mx-2 px-2 py-1 flex items-center rounded-full">{{ event.message }}</span>
-                        <span class="author px-2 text-sm italic mx-2">{{ sourceObj.contacts[event.contact].name }}</span>
-                    </div>
+<div class="flex flex-col grow shrink thread overflow-y-auto mb-4 -mr-4 pr-4">
+    <template v-for="(event, i) in threadItem.timeline">
+        <template v-if="event.type === 'message'">
+            <div v-if="i === threadItem.timeline.length - 1 || threadItem.timeline[i + 1].type !== 'message' || threadItem.timeline[i + 1].contact !== event.contact" style="max-width: 80%;" class="flex mb-2" :class="event.contact === sourceObj.selfContact ? 'self self-end flex-row-reverse' : 'other self-start'">
+                <Avatar v-if="event.contact !== sourceObj.selfContact" v-bind="sourceObj.contacts[event.contact]" class="self-end" />
+                <div class="flex flex-col">
+                    <span class="message px-2 py-1 flex items-center rounded-2xl" :class="getRoundedCornersClasses(i) + (event.contact === sourceObj.selfContact ? ' ml-13' : ' ml-2')">{{ event.message }}</span>
+                    <span v-if="event.contact !== sourceObj.selfContact" class="author px-2 text-sm italic mx-2">{{ sourceObj.contacts[event.contact].name }}</span>
                 </div>
-                <div v-else style="max-width: 80%;" class="flex mb-2" :class="event.contact === sourceObj.selfContact ? 'self self-end flex-row-reverse' : 'other self-start text-gray-200'">
-                    <span class="message px-2 py-1 flex items-center rounded-full" :class="event.contact === sourceObj.selfContact ? 'mr-13' : 'ml-13'">{{ event.message }}</span>
-                </div>
-            </template>
-            <div v-else-if="event.type === 'create-thread'" class="self-center mb-2 italic text-gray-500">
-                {{ 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>"
+            </div>
+            <div v-else style="max-width: 80%;" class="flex mb-px" :class="event.contact === sourceObj.selfContact ? 'self self-end flex-row-reverse' : 'other self-start text-gray-200'">
+                <span class="message px-2 py-1 flex items-center rounded-2xl ml-13" :class="getRoundedCornersClasses(i)">{{ event.message }}</span>
             </div>
         </template>
-    </div>
-    <input type="text" />
+        <div v-else-if="event.type === 'create-thread'" class="self-center mb-2 italic text-gray-500 text-center">
+            {{ 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>"
+        </div>
+    </template>
 </div>
+<form @submit="sendMessage" class="shrink-0">
+    <input id="message_input" class="w-full" ref="messageInput" autofocus type="text" v-model="message" />
+</form>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { sources } from '../state';
+import { computed, ref } from 'vue';
+import { items, sources } from '../state';
 import Avatar from './Avatar.vue';
 import { RouterLink } from 'vue-router';
 
@@ -39,9 +39,65 @@ const props = defineProps<{
 const sourceObj = computed(() => sources.value[props.source]);
 const item = computed(() => sourceObj.value.items[props.sourceItem]);
 const threadItem = computed(() => item.value.threads[props.thread]);
+
+const message = ref("");
+const messageInput = ref();
+
+function sendMessage() {
+    if (message.value.trim() === "") {
+        return;
+    }
+
+    threadItem.value.timeline.push({
+        type: "message",
+        contact: sourceObj.value.selfContact,
+        message: message.value,
+        time: Date.now()
+    });
+
+    let item = items.value.find(item => item.source === props.source && item.sourceItem === props.sourceItem);
+    if (item == null) {
+        item = { source: props.source, sourceItem: props.sourceItem, threads: {}, updatedAt: Date.now() };
+        items.value.push(item);
+    }
+    if (item.threads[props.thread] == null) {
+        item.threads[props.thread] = {
+            count: 1,
+            preview: message.value,
+            updatedAt: Date.now(),
+            contact: sourceObj.value.selfContact
+        }
+    } else {
+        item.threads[props.thread].count++;
+        item.threads[props.thread].preview = message.value;
+        item.threads[props.thread].updatedAt = Date.now();
+        item.threads[props.thread].contact = sourceObj.value.selfContact;
+    }
+    
+    message.value = "";
+    messageInput.value?.focus();
+    return false;
+}
+
+function getRoundedCornersClasses(index: number) {
+    const contact = threadItem.value.timeline[index]?.contact;
+    if (contact == null) {
+        return "";
+    }
+    const side = contact === sourceObj.value.selfContact ? 'r' : 'l';
+    let classes = `rounded-b${side}-none`;
+    if (threadItem.value.timeline[index - 1] != null && threadItem.value.timeline[index - 1].type === 'message' && threadItem.value.timeline[index - 1].contact === contact) {
+        classes += ` rounded-t${side}-none`;
+    }
+    return classes;
+}
 </script>
 
 <style scoped>
+.thread > * {
+    min-width: calc((100vw - 23rem) / 2);
+}
+
 .other .message {
     background-color: gray;
     color: rgb(229 231 235);
diff --git a/src/components/Todo.vue b/src/components/Todo.vue
index 5d6c6b2..05dfea2 100644
--- a/src/components/Todo.vue
+++ b/src/components/Todo.vue
@@ -1,45 +1,50 @@
 <template>
-    <div class="flex gap-x-4">
-        <div class="grow basis-6/12">
+    <div class="flex h-full">
+        <div class="grow basis-6/12 p-4 overflow-x-hidden">
             <div class="text-3xl mb-4">Todo</div>
             <div v-for="category in todoCategories">
                 <CategoryHeader v-bind="category" />
-                <ItemGroup :items="category.activeItems" :selected-thread="selectedItem" @select-item="selectItem" />
+                <ItemGroup :items="category.activeItems" :selected-thread="showThread ? selectedItem : undefined" @select-item="selectItem" />
             </div>
         </div>
-        <div class="hidden xl:flex grow basis-6/12 bg-slate-200 p-4 -m-4 ml-0 min-h-screen flex-col" v-if="selectedItem">
-            <div class="text-3xl mb-4">{{ threadTitle }}</div>
-            <Thread :source="selectedItem.source" :sourceItem="selectedItem.sourceItem" :thread="selectedItem.thread" base-url="/todo" />
+        <div class="hidden xl:flex bg-slate-200 ml-0 h-screen flex-col overflow-hidden" :class="showThread ? 'p-4 basis-6/12' : 'basis-0'">
+            <PanelTitle :title="threadTitle" />
+            <Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" base-url="/todo" />
         </div>
-        <Modal :model-value="true" class="block xl:hidden" v-if="selectedItem" @update:model-value="close">
+        <Modal :model-value="showThread" class="block xl:hidden" @update:model-value="close">
             <template v-slot:header><div class="text-3xl">{{ threadTitle }}</div></template>
-            <template v-slot:body><Thread :source="selectedItem.source" :sourceItem="selectedItem.sourceItem" :thread="selectedItem.thread" base-url="/todo" /></template>
+            <template v-slot:body><Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" base-url="/todo" /></template>
         </Modal>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ThreadRef, sources, todoCategories } from '../state';
 import CategoryHeader from "./CategoryHeader.vue";
 import ItemGroup from "./ItemGroup.vue";
 import Modal from './Modal.vue';
+import PanelTitle from './PanelTitle.vue';
 import Thread from './Thread.vue';
 
 const route = useRoute();
 const router = useRouter();
 
-const selectedItem = computed<ThreadRef | undefined>(() => {
-    const { source, sourceItem, thread } = route.params;
+const showThread = ref(false);
+const selectedItem = ref<ThreadRef | undefined>();
+watch([() => route.params.source, () => route.params.sourceItem, () => route.params.thread], ([source, sourceItem, thread]) => {
     const sourceInt = parseInt(Array.isArray(source) ? source[0] : source);
     const sourceItemInt = parseInt(Array.isArray(sourceItem) ? sourceItem[0] : sourceItem);
     const threadInt = parseInt(Array.isArray(thread) ? thread[0] : thread);
     if (!isNaN(sourceInt) && !isNaN(sourceItemInt) && !isNaN(threadInt)) {
-        return { source: sourceInt, sourceItem: sourceItemInt, thread: threadInt };
+        selectedItem.value = { source: sourceInt, sourceItem: sourceItemInt, thread: threadInt };
+        showThread.value = true;
+    } else {
+        // Intentionally leave selectedItem so animations look right
+        showThread.value = false;
     }
-    return undefined;
-});
+}, { immediate: true });
 
 const threadTitle = computed(() => {
     const selected = selectedItem.value;
@@ -50,18 +55,19 @@ const threadTitle = computed(() => {
 });
 
 function selectItem(source: number, sourceItem: number, thread: number) {
-    console.log("!!", selectedItem.value, source, sourceItem, thread)
-    if (selectedItem.value != null) {
-        const s = selectedItem.value;
-        if (source === s.source && sourceItem === s.sourceItem && thread === s.thread) {
-            close();
-            return;
-        }
+    const p = route.params;
+    const sourceInt = parseInt(Array.isArray(p.source) ? p.source[0] : p.source);
+    const sourceItemInt = parseInt(Array.isArray(p.sourceItem) ? p.sourceItem[0] : p.sourceItem);
+    const threadInt = parseInt(Array.isArray(p.thread) ? p.thread[0] : p.thread);
+    if (source === sourceInt && sourceItem === sourceItemInt && thread === threadInt) {
+        close();
+        return;
     }
     router.push(`/todo/${source}/${sourceItem}/${thread}`);
 }
 
 function close() {
+    console.log("closing thread")
     router.push("/todo");
 }
 </script>
diff --git a/src/main.ts b/src/main.ts
index f68c8ac..ab6708c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,8 +6,8 @@ import App from "./App.vue";
 import Todo from "./components/Todo.vue";
 
 const routes: RouteRecordRaw[] = [
-    { path: '/', component: Todo },
-    { path: '/todo/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Todo },
+    { path: '/', component: Todo, name: 'home' },
+    { path: '/todo/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Todo, name: 'todo' },
 ];
 
 const router = createRouter({
@@ -16,3 +16,7 @@ const router = createRouter({
 });
 
 createApp(App).use(router).mount("#app");
+
+document.onkeypress = function() {
+    document.getElementById("message_input")?.focus();
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 4d0911a..be4fe6e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,4 +12,10 @@ export default {
     require('flowbite/plugin')
   ],
   darkMode: 'selector',
+  safelist: [
+    'rounded-tr-none',
+    'rounded-tl-none',
+    'rounded-br-none',
+    'rounded-bl-none'
+  ]
 }