Make items links

src/components/Item.vue

@@ -1,11 +1,15 @@
 <template>
-    <div v-if="Object.keys(sourceItem.threads).length === 1 && '0' in sourceItem.threads" class="relative">
+    <div
-        <div
+        v-if="Object.keys(sourceItem.threads).length === 1 && '0' in sourceItem.threads" 
+        class="relative"
+        :ref="isSelected(0) ? 'highlightedElement' : ''">
+        <a
+            draggable="false"
             :style="style()"
-            :ref="isSelected(0) ? 'highlightedElement' : ''"
+            class="block p-4 border-2 -mt-2px cursor-pointer bg-gray-200 border-gray-800 select-none relative z-20"
-            class="p-4 border-2 -mt-2px cursor-pointer bg-gray-200 border-gray-800 select-none relative z-20"
             :class="isSelected(0) ? 'selected shadow-md -mx-2' : ''"
-            @click="select(0)"
+            :href="isSelected(0) ? baseUrl : `${baseUrl}/${item.source}/${item.sourceItem}/0`"
+            @click="e => openThread(e, 0)"
             @mousedown="e => startDrag(e)"
             @touchstart="e => startDrag(e)">
             <div class="flex items-center">
@@ -30,7 +34,7 @@
                 class="mt-4 text-sm text-yellow-600">
                 Snoozed until {{ new Date(item.threads[0].snoozedUntil).toLocaleString() }}
             </div>
-        </div>
+        </a>
         <component :is="actionIndicators" />
     </div>
     <template v-else>
@@ -51,18 +55,21 @@
             </div>
             <component :is="actionIndicators" />
         </div>
-        <div v-for="(thread, id) in activeThreads" class="relative">
+        <div
-            <div
+            v-for="(thread, id) in activeThreads"
-                class="p-4 border-2 -mt-2px cursor-pointer bg-slate-300 border-gray-800 select-none relative z-20"
+            class="relative"
-                :ref="isSelected(id) ? 'highlightedElement' : ''"
+            :ref="isSelected(id) ? 'highlightedElement' : ''">
+            <a
+                class="block p-4 border-2 -mt-2px cursor-pointer bg-slate-300 border-gray-800 select-none relative z-20"
                 :class="isSelected(id) ? 'selected shadow-md -mx-2 thread' : ''"
                 :style="style(parseInt(id as unknown as string))"
-                @click="select(parseInt(id as unknown as string))"
+                :href="isSelected(id) ? baseUrl : `${baseUrl}/${item.source}/${item.sourceItem}/${id}`"
+                @click="e => openThread(e, id)"
                 @mousemove="drag"
-                @mousedown="e => startDrag(e, id as unknown as string)"
+                @mousedown="(e: MouseEvent | TouchEvent) => startDrag(e, id as unknown as string)"
                 @mouseup="endDrag"
                 @touchmove="drag"
-                @touchstart="e => startDrag(e, id as unknown as string)"
+                @touchstart="(e: MouseEvent | TouchEvent) => startDrag(e, id as unknown as string)"
                 @touchend="endDrag">
                 <div class="flex items-center">
                     <Avatar v-if="getContact(id)" v-bind="getContact(id)!" class="mr-2" />
@@ -84,7 +91,7 @@
                     class="mt-4 text-sm text-yellow-600">
                     Snoozed until {{ new Date(thread.snoozedUntil).toLocaleString() }}
                 </div>
-            </div>
+            </a>
             <component :is="actionIndicators" />
         </div>
     </template>
@@ -94,6 +101,7 @@
 import { faCheck, faClockRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import type { Item, ItemThread, ThreadRef } from "../state";
 import { items, sources } from '../state';
 import { parseString } from '../utils';
@@ -103,10 +111,10 @@ const props = defineProps<{
     item: Item;
     selectedThread?: ThreadRef;
     showSnoozed?: boolean;
+    baseUrl: string;
 }>();
 
 const emits = defineEmits<{
-    select: [thread: number];
     snoozeItem: [thread: number];
     deselect: [];
 }>();
@@ -119,6 +127,8 @@ const activeThreads = computed(() => Object.keys(props.item.threads).reduce((acc
     return acc;
 }, {} as Record<number, ItemThread>));
 
+const router = useRouter();
+
 const dragging = ref(false);
 const dragged = ref(false);
 const draggingX = ref(0);
@@ -214,12 +224,6 @@ function endDrag(e: MouseEvent | TouchEvent) {
     window.onpointerleave = null;
 }
 
-function select(thread: number) {
-    if (!dragged.value) {
-        emits("select", thread);
-    }
-}
-
 function deleteItem() {
     const index = items.value.findIndex(item => item.source === props.item.source && item.sourceItem === props.item.sourceItem);
     const newItems = items.value.slice();
@@ -232,6 +236,15 @@ function deleteItem() {
     }
 }
 
+function openThread(e: MouseEvent | TouchEvent, index: number) {
+    e.preventDefault();
+    if (!dragged.value) {
+        router.push(
+            isSelected(index) ? props.baseUrl :
+            `${props.baseUrl}/${props.item.source}/${props.item.sourceItem}/${index}`);
+    }
+}
+
 const actionIndicators = () => <div class={{
     absolute: true,
     "top-0": true,

src/components/ItemGroup.vue

@@ -4,7 +4,7 @@
             :item="item"
             :selected-thread="selectedThread"
             :show-snoozed="showSnoozed"
-            @select="thread => emits('selectItem', item.source, item.sourceItem, thread)"
+            :base-url="baseUrl"
             @snoozeItem="thread => emits('snoozeItem', item.source, item.sourceItem, thread)"
             @deselect="emits('deselect')" />
     </div>
@@ -24,5 +24,6 @@ defineProps<{
     items: StateItem[];
     selectedThread?: ThreadRef;
     showSnoozed?: boolean;
+    baseUrl: string;
 }>();
 </script>

src/components/pages/ItemsView.vue

@@ -9,7 +9,7 @@
                     :items="showSnoozed ? category.snoozedItems : category.activeItems"
                     :selected-thread="showThread ? selectedItem : undefined"
                     :show-snoozed="showSnoozed"
-                    @select-item="selectItem"
+                    :base-url="baseUrl"
                     @snooze-item="snoozeItem"
                     @deselect="close" />
             </div>
@@ -67,7 +67,6 @@ const {
     snoozingItem,
     snoozing,
     threadTitle,
-    selectItem,
     snoozeItem,
     close,
     stopSnoozing,

src/components/pages/Source.vue

@@ -6,7 +6,7 @@
             <Item v-for="item in items"
                 :item="item"
                 :selected-thread="showThread ? selectedItem : undefined"
-                @select="thread => selectItem(item.sourceItem, thread)"
+                base-url="/source"
                 @snoozeItem="thread => snoozeItem(sourceId, item.sourceItem, thread)"
                 @deselect="close" />
         </div>
@@ -90,19 +90,6 @@ const items = computed(() => Object.keys(source.value.items).map(item => {
     }
 }));
 
-
-function selectItem(sourceItem: number, thread: number) {
-    const p = route.params;
-    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 (sourceItem === sourceItemInt && thread === threadInt) {
-        close();
-        return false;
-    }
-    router.push(`${baseUrl.value}/${sourceItem}/${thread}`);
-    return true;
-}
-
 const {
     showThread,
     selectedItem,

src/components/pages/Unsorted.vue

@@ -6,7 +6,7 @@
             <Item v-for="item in unsortedItems"
                 :item="item"
                 :selected-thread="showThread ? selectedItem : undefined"
-                @select="thread => selectItem(item.source, item.sourceItem, thread)"
+                :base-url="baseUrl"
                 @snoozeItem="thread => snoozeItem(item.source, item.sourceItem, thread)"
                 @deselect="close" />
         </div>
@@ -51,7 +51,6 @@ const {
     snoozingItem,
     snoozing,
     threadTitle,
-    selectItem,
     snoozeItem,
     close,
     stopSnoozing,

src/utils.tsx

@@ -106,19 +106,6 @@ export function setupSelectedThread(baseUrl: Ref<string>, route: RouteLocationNo
         }
     }
     
-    function selectItem(source: number, sourceItem: number, thread: number) {
-        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 false;
-        }
-        router.push(`${baseUrl.value}/${source}/${sourceItem}/${thread}`);
-        return true;
-    }
-    
     function snoozeItem(source: number, sourceItem: number, thread: number) {
         snoozingItem.value = { source, sourceItem, thread };
         snoozing.value = true;
@@ -150,7 +137,6 @@ export function setupSelectedThread(baseUrl: Ref<string>, route: RouteLocationNo
         snoozingItem,
         snoozing,
         threadTitle,
-        selectItem,
         snoozeItem,
         close,
         stopSnoozing,