Implemented unsorted items/page

src/components/pages/Snoozed.vue

@@ -4,8 +4,20 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { categories } from '../../state';
+import { categories, unsortedItemsSnoozed } from '../../state';
 import ItemsView from './ItemsView.vue';
 
-const snoozedCategories = computed(() => categories.value.filter(c => Object.keys(c.snoozedItems).length > 0));
+const snoozedCategories = computed(() => {
+    const snoozedCategories = categories.value.filter(c => Object.keys(c.snoozedItems).length > 0);
+    if (unsortedItemsSnoozed.value.length > 0) {
+        snoozedCategories.push({
+            activeItems: [],
+            id: -1,
+            name: "Unsorted",
+            snoozedItems: unsortedItemsSnoozed.value,
+            priority: "bottom"
+        });
+    }
+    return snoozedCategories;
+});
 </script>

src/components/pages/Unsorted.vue

@@ -0,0 +1,40 @@
+<template>    
+    <div class="flex h-full">
+        <div class="grow basis-6/12 p-4 overflow-x-hidden relative">
+            <div class="text-3xl mb-4">Unsorted</div>
+            <div v-if="unsortedItems.length === 0" class="absolute center text-9xl">∅</div>
+            <Item v-for="item in unsortedItems"
+                :item="item"
+                :selected-thread="showThread ? selectedItem : undefined"
+                @select="thread => selectItem(item.source, item.sourceItem, thread)"
+                @snoozeItem="thread => snoozeItem(item.source, item.sourceItem, thread)"
+                @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" />
+            <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: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" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { setupSelectedThread } from '../../utils';
+import Item from '../Item.vue';
+import Modal from '../Modal.vue';
+import PanelTitle from '../PanelTitle.vue';
+import SnoozeModal from '../SnoozeModal.vue';
+import Thread from '../Thread.vue';
+import { unsortedItems } from '../../state';
+
+const baseUrl = ref("/unsorted");
+
+const { showThread, selectedItem, snoozingItem, snoozing, threadTitle, selectItem, snoozeItem, close, stopSnoozing } =
+    setupSelectedThread(baseUrl, useRoute(), useRouter());
+</script>

src/main.ts

@@ -7,6 +7,7 @@ import Todo from "./components/pages/Todo.vue";
 import Snoozed from "./components/pages/Snoozed.vue";
 import LowPriority from "./components/pages/LowPriority.vue";
 import Source from "./components/pages/Source.vue";
+import Unsorted from "./components/pages/Unsorted.vue";
 
 const routes: RouteRecordRaw[] = [
     { path: '/', component: Todo, name: 'home' },
@@ -14,6 +15,7 @@ const routes: RouteRecordRaw[] = [
     { path: '/snoozed/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Snoozed, name: 'snoozed' },
     { path: '/low/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: LowPriority, name: 'low' },
     { path: '/source/:source(\\d+)/:sourceItem(\\d+)?/:thread(\\d+)?', component: Source, name: 'source' },
+    { path: '/unsorted/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Unsorted, name: 'unsorted' },
 ];
 
 const router = createRouter({

src/state.ts

@@ -79,7 +79,7 @@ export interface IsDmRule {
 
 export type Rule = LogicalRule | IsDmRule;
 
-export type Priority = "urgent" | "notify" | "todo" | "garden";
+export type Priority = "urgent" | "notify" | "todo" | "garden" | "bottom";
 
 export interface Category {
     id: number;
@@ -197,6 +197,19 @@ export const items = ref<Item[]>([
             }
         }
     },
+    {
+        source: 0,
+        sourceItem: 2,
+        updatedAt: Date.now(),
+        threads: {
+            0: {
+                count: 1,
+                preview: "Confusingly complex message",
+                contact: 0,
+                updatedAt: Date.now()
+            }
+        }
+    },
     {
         source: 0,
         sourceItem: 1,