Added snooze button to panel title

src/components/PanelTitle.vue

@@ -1,6 +1,9 @@
 <template>
     <div class="w-full flex mb-4">
         <div class="text-3xl grow">{{ title }}</div>
+        <button class="mx-4" @click="emits('snooze')">
+            <FontAwesomeIcon class="w-6 h-6" :icon="faClockRotateLeft" />
+        </button>
         <button @click="emits('toggleRead')">
             <FontAwesomeIcon class="w-6 h-6" :icon="isRead ? faEnvelopeOpen : faCheck" />
         </button>
@@ -8,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { faCheck, faEnvelopeOpen } from '@fortawesome/free-solid-svg-icons';
+import { faCheck, faClockRotateLeft, faEnvelopeOpen } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 defineProps<{
@@ -18,6 +21,7 @@ defineProps<{
 
 const emits = defineEmits<{
     toggleRead: [];
+    snooze: [];
 }>();
 </script>
 

src/components/pages/ItemsView.vue

@@ -15,12 +15,20 @@
             </div>
         </div>
         <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" :isRead="isRead" @toggleRead="toggleRead" />
+            <PanelTitle
+                :title="threadTitle"
+                :isRead="isRead"
+                @toggleRead="toggleRead"
+                @snooze="() => snoozeItem(selectedItem!.source, selectedItem!.sourceItem, selectedItem!.thread)" />
             <Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" />
         </div>
         <Modal :model-value="showThread" class="block xl:hidden" @update:model-value="close">
             <template v-slot:header>
-                <PanelTitle :title="threadTitle" :isRead="isRead" @toggleRead="toggleRead" />
+                <PanelTitle
+                    :title="threadTitle"
+                    :isRead="isRead"
+                    @toggleRead="toggleRead"
+                    @snooze="() => snoozeItem(selectedItem!.source, selectedItem!.sourceItem, selectedItem!.thread)" />
             </template>
             <template v-slot:body>
                 <Thread

src/components/pages/Source.vue

@@ -11,11 +11,21 @@
                 @deselect="close" />
         </div>
         <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" :isRead="isRead" @toggleRead="toggleRead" />
+            <PanelTitle
+                :title="threadTitle"
+                :isRead="isRead"
+                @toggleRead="toggleRead"
+                @snooze="() => snoozeItem(sourceId, selectedItem!.sourceItem, selectedItem!.thread)" />
             <Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" :highlighted="highlightedEvent" />
         </div>
         <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:header>
+                <PanelTitle
+                    :title="threadTitle"
+                    :isRead="isRead"
+                    @toggleRead="toggleRead"
+                    @snooze="() => snoozeItem(sourceId, selectedItem!.sourceItem, selectedItem!.thread)" />
+            </template>
             <template v-slot:body>
                 <Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" :highlighted="highlightedEvent" />
             </template>

src/components/pages/Unsorted.vue

@@ -11,11 +11,21 @@
                 @deselect="close" />
         </div>
         <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" :isRead="isRead" @toggleRead="toggleRead" />
+            <PanelTitle
+                :title="threadTitle"
+                :isRead="isRead"
+                @toggleRead="toggleRead"
+                @snooze="() => snoozeItem(selectedItem!.source, selectedItem!.sourceItem, selectedItem!.thread)" />
             <Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" />
         </div>
         <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:header>
+                <PanelTitle
+                    :title="threadTitle"
+                    :isRead="isRead"
+                    @toggleRead="toggleRead"
+                    @snooze="() => snoozeItem(selectedItem!.source, selectedItem!.sourceItem, selectedItem!.thread)" />
+                </template>
             <template v-slot:body><Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" /></template>
         </Modal>
         <SnoozeModal :snoozing="snoozing" :threadRef="snoozingItem" @close="stopSnoozing" />

src/utils.tsx

@@ -1,6 +1,8 @@
 import { Ref, computed, ref, watch } from "vue";
 import { RouteLocationNormalizedLoaded, Router, RouterLink } from "vue-router";
 import { MessageEvent, SourceThread, ThreadRef, items, sources } from "./state";
+import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 // Modified from https://www.basedash.com/blog/how-to-merge-two-sorted-lists-in-javascript
 export function mergeSortedLists<T>(arr1: Array<T>, arr2: Array<T>): Array<T> {
@@ -29,6 +31,7 @@ export function setupSelectedThread(baseUrl: Ref<string>, route: RouteLocationNo
     const selectedItem = ref<ThreadRef | undefined>();
     const snoozingItem = ref<ThreadRef | undefined>();
     const snoozing = ref(false);
+    const snoozed = ref<number | 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);
@@ -119,6 +122,7 @@ export function setupSelectedThread(baseUrl: Ref<string>, route: RouteLocationNo
     function snoozeItem(source: number, sourceItem: number, thread: number) {
         snoozingItem.value = { source, sourceItem, thread };
         snoozing.value = true;
+        snoozed.value = items.value.find(item => item.source === source && item.sourceItem === sourceItem && thread in item.threads)?.threads[thread]?.snoozedUntil;
     }
     
     function close() {
@@ -128,7 +132,9 @@ export function setupSelectedThread(baseUrl: Ref<string>, route: RouteLocationNo
     }
     
     function stopSnoozing() {
-        if (snoozingItem.value?.source === selectedItem.value?.source &&
+        const snoozedUntil = items.value.find(item => item.source === snoozingItem.value?.source && item.sourceItem === snoozingItem.value?.sourceItem && snoozingItem.value?.thread in item.threads)?.threads[snoozingItem.value?.thread ?? 0]?.snoozedUntil;
+        if (snoozed.value != snoozedUntil &&
+            snoozingItem.value?.source === selectedItem.value?.source &&
             snoozingItem.value?.sourceItem === selectedItem.value?.sourceItem &&
             (snoozingItem.value?.thread === -1 || snoozingItem.value?.thread === selectedItem.value?.thread)
         ) {
@@ -194,7 +200,7 @@ export function parseString(message: string) {
             parts.push(<span class="px-2 bg-emerald-200/25 rounded-2xl">
             { referencedMessage.message }
             <RouterLink class="text-slate-600 pl-2 text-sm" to={`/source/${sourceId}/${sourceItemId}/${threadId}/${messageId}`}>
-                goto message
+                <FontAwesomeIcon icon={faUpRightFromSquare} />
             </RouterLink>
         </span>);
         }