Scroll to selected items

src/components/Item.vue

@@ -1,26 +1,49 @@
 <template>
     <div v-if="Object.keys(sourceItem.threads).length === 1 && '0' in sourceItem.threads" class="relative">
-        <div :style="style()" 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)" @mousedown="e => startDrag(e)" @touchstart="e => startDrag(e)">
+        <div
+            :style="style()"
+            :ref="isSelected(0) ? 'highlightedElement' : ''"
+            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)"
+            @mousedown="e => startDrag(e)"
+            @touchstart="e => startDrag(e)">
             <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">
                     <component :is="parseString(item.threads[0].preview)" />
                 </span>
                 <span class="grow" />
-                <span v-if="item.threads[0].count > 0" 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>
+                <span
+                    v-if="item.threads[0].count > 0"
+                    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>
                 <span v-else><FontAwesomeIcon class="w-6 h-6 text-lime-600" :icon="faCheck" /></span>
             </div>
             <div class="flex -mb-2 text-gray-500 text-sm font-normal">
                 <span class="grow">{{ sourceItem.title }}</span>
                 <span>{{ source.name }}</span>
             </div>
-            <div v-if="item.threads[0].snoozedUntil != null" class="mt-4 text-sm text-yellow-600">Snoozed until {{ new Date(item.threads[0].snoozedUntil).toLocaleString() }}</div>
+            <div
+                v-if="item.threads[0].snoozedUntil != null"
+                class="mt-4 text-sm text-yellow-600">
+                Snoozed until {{ new Date(item.threads[0].snoozedUntil).toLocaleString() }}
+            </div>
         </div>
         <component :is="actionIndicators" />
     </div>
     <template v-else>
         <div class="relative">
-            <div class="p-4 border-2 -mt-2px bg-gray-200 border-gray-800 select-none relative z-20" :style="style()" @mousemove="drag" @mousedown="e => startDrag(e)" @mouseup="endDrag" @touchmove="drag" @touchstart="e => startDrag(e)" @touchend="endDrag">
+            <div
+                class="p-4 border-2 -mt-2px bg-gray-200 border-gray-800 select-none relative z-20" 
+                :style="style()"
+                @mousemove="drag"
+                @mousedown="e => startDrag(e)"
+                @mouseup="endDrag"
+                @touchmove="drag"
+                @touchstart="e => startDrag(e)"
+                @touchend="endDrag">
                 <div class="flex -mb-2 text-gray-500 text-sm font-normal">
                     <span class="grow">{{ sourceItem.title }}</span>
                     <span>{{ source.name }}</span>
@@ -29,19 +52,38 @@
             <component :is="actionIndicators" />
         </div>
         <div v-for="(thread, id) in activeThreads" class="relative">
-            <div class="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))" @mousemove="drag" @mousedown="e => startDrag(e, id as unknown as string)" @mouseup="endDrag" @touchmove="drag" @touchstart="e => startDrag(e, id as unknown as string)" @touchend="endDrag">
+            <div
+                class="p-4 border-2 -mt-2px cursor-pointer bg-slate-300 border-gray-800 select-none relative z-20"
+                :ref="isSelected(id) ? 'highlightedElement' : ''"
+                :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))"
+                @mousemove="drag"
+                @mousedown="e => startDrag(e, id as unknown as string)"
+                @mouseup="endDrag"
+                @touchmove="drag"
+                @touchstart="e => 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" />
                     <span class="bg-gray-100 px-2 py-1 rounded-2xl block overflow-hidden text-nowrap text-ellipsis">
                         <component :is="parseString(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>
+                    <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">
                     <span class="grow">{{ sourceItem.threads[id].title }}</span>
                 </div>
-                <div v-if="thread.snoozedUntil != null" class="mt-4 text-sm text-yellow-600">Snoozed until {{ new Date(thread.snoozedUntil).toLocaleString() }}</div>
+                <div
+                    v-if="thread.snoozedUntil != null"
+                    class="mt-4 text-sm text-yellow-600">
+                    Snoozed until {{ new Date(thread.snoozedUntil).toLocaleString() }}
+                </div>
             </div>
             <component :is="actionIndicators" />
         </div>
@@ -51,7 +93,7 @@
 <script setup lang="tsx">
 import { faCheck, faClockRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { Item, ItemThread, ThreadRef } from "../state";
 import { items, sources } from '../state';
 import { parseString } from '../utils';
@@ -90,6 +132,16 @@ const style = (id?: number) =>
 const source = computed(() => sources.value[props.item.source]);
 const sourceItem = computed(() => source.value.items[props.item.sourceItem]);
 
+// Gets assigned on any thread item that should be highlighted
+const highlightedElement = ref();
+watch(highlightedElement, element => {
+    if (Array.isArray(element)) {
+        element.forEach(el => el?.scrollIntoView());
+    } else {
+        element?.scrollIntoView();
+    }
+});
+
 function getContact(thread: number) {
     const contact = props.item.threads[thread].contact;
     return contact == null ? undefined : sources.value[props.item.source].contacts[contact];