From c7da36d89c1d3a81aaa7e1095ee9a8a064a570b5 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 12 Oct 2024 20:12:26 -0700
Subject: feat(tools): add simple tracker

---
 bun.lockb                            | Bin 367541 -> 367870 bytes
 package.json                         |   1 +
 src/lib/Database/IDB/tracker.ts      |  23 ++++++
 src/lib/Tools/Picker.svelte          |   2 +-
 src/lib/Tools/Tracker/Tool.svelte    | 142 +++++++++++++++++++++++++++++++++++
 src/lib/Tools/tools.ts               |   7 ++
 src/routes/tools/+page.svelte        |   2 +-
 src/routes/tools/[tool]/+page.svelte |   3 +
 8 files changed, 178 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/Database/IDB/tracker.ts
 create mode 100644 src/lib/Tools/Tracker/Tool.svelte

diff --git a/bun.lockb b/bun.lockb
index 8ff1fb56..30d1b9d4 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 211422dc..6b3e1f53 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "svelte-i18n": "^4.0.0",
     "svelte-markdown": "^0.4.1",
     "svelte-notifications": "^0.9.98",
+    "uuid": "^10.0.0",
     "wanakana": "^5.3.1",
     "web-push": "^3.6.7"
   }
diff --git a/src/lib/Database/IDB/tracker.ts b/src/lib/Database/IDB/tracker.ts
new file mode 100644
index 00000000..dc25c8fd
--- /dev/null
+++ b/src/lib/Database/IDB/tracker.ts
@@ -0,0 +1,23 @@
+import Dexie, { type Table } from 'dexie';
+
+export interface TrackerEntry {
+  id: string;
+  url: string;
+  title: string;
+  progress: number;
+}
+
+export class TrackerDatabase extends Dexie {
+  entries: Table<TrackerEntry>;
+
+  constructor() {
+    super('tracker');
+    this.version(1).stores({
+      entries: 'id, url, title, progress',
+    });
+
+    this.entries = this.table('entries');
+  }
+}
+
+export const database = new TrackerDatabase();
diff --git a/src/lib/Tools/Picker.svelte b/src/lib/Tools/Picker.svelte
index 583a7a0d..3f20300f 100644
--- a/src/lib/Tools/Picker.svelte
+++ b/src/lib/Tools/Picker.svelte
@@ -16,7 +16,7 @@
   >
     <option value="default" selected disabled hidden>Select a tool to continue</option>
 
-    {#each Object.keys(tools).filter((t) => t !== 'default') as t}
+    {#each Object.keys(tools).filter((t) => t !== 'default' && !tools[t].hidden) as t}
       <option value={t}>{tools[t].short || tools[t].name()}</option>
     {/each}
   </select>
diff --git a/src/lib/Tools/Tracker/Tool.svelte b/src/lib/Tools/Tracker/Tool.svelte
new file mode 100644
index 00000000..8906e72d
--- /dev/null
+++ b/src/lib/Tools/Tracker/Tool.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+  import { v6 as uuidv6 } from 'uuid';
+  import { database, type TrackerEntry } from '$lib/Database/IDB/tracker';
+  import { onMount } from 'svelte';
+  import Message from '$lib/Loading/Message.svelte';
+
+  let url = '';
+  let title = '';
+  let progress = 0;
+  let error = '';
+  let masterList: TrackerEntry[] | null = null;
+  let confirmDelete = 0;
+
+  $: listAccess = masterList || [];
+
+  onMount(async () => {
+    masterList = await database.entries.toArray();
+  });
+
+  const adjustEntry = (id: string, to: number) => {
+    const entry = listAccess.find((entry) => entry.id === id);
+
+    if (!entry) return;
+
+    entry.progress = Math.max(0, to);
+
+    database.entries.update(id, { progress: entry.progress });
+
+    masterList = listAccess.map((entry) =>
+      entry.id === id ? { ...entry, progress: entry.progress } : entry
+    );
+  };
+
+  const addEntry = async (url: string, title: string, progress: number) => {
+    if (!url || !title) {
+      error = 'URL and title are required fields';
+
+      return;
+    }
+
+    if (listAccess.some((entry) => entry.url === url)) {
+      error =
+        'Entry with URL already exists: ' + listAccess.find((entry) => entry.url === url)?.title;
+
+      return;
+    }
+
+    await database.entries.add({ url, title, progress, id: uuidv6() });
+
+    masterList = await database.entries.toArray();
+  };
+
+  const deleteEntry = async (id: string) => {
+    if (confirmDelete !== 1) {
+      confirmDelete = 1;
+      error = 'Click again to confirm deletion';
+
+      return;
+    }
+
+    await database.entries.delete(id);
+
+    masterList = await database.entries.toArray();
+    confirmDelete = 0;
+    error = '';
+  };
+</script>
+
+<div class="card">
+  {#if error}
+    <p><b>Error</b>: {error}</p>
+  {/if}
+
+  <input type="url" placeholder="URL" bind:value={url} />
+  <input type="text" placeholder="Title" bind:value={title} />
+  <input type="number" placeholder="Progress (defaults to 0)" bind:value={progress} />
+  <button class="button-lined" on:click={() => addEntry(url, title, progress)}> Add </button>
+
+  <p />
+
+  {#if masterList === null}
+    <Message message="Loading entries ..." />
+  {:else}
+    <ul>
+      {#each listAccess.sort((a, b) => a.title.localeCompare(b.title)) as entry}
+        <li>
+          <div class="entry" id={entry.id}>
+            <a href={entry.url} title={entry.id}>
+              {entry.title}
+            </a>
+
+            <span class="opaque">|</span>
+
+            <input
+              type="number"
+              value={entry.progress}
+              size={3}
+              on:change={(e) =>
+                adjustEntry(entry.id, e.target ? e.target.value || entry.progress : entry.progress)}
+            />
+
+            <span class="entry-adjust">
+              <span class="opaque">|</span>
+              <button
+                class="button-square button-action"
+                on:click={() => adjustEntry(entry.id, entry.progress - 1)}
+                >-
+              </button>
+              <button
+                class="button-square button-action"
+                on:click={() => adjustEntry(entry.id, entry.progress + 1)}
+              >
+                +
+              </button>
+              <span class="opaque">|</span>
+              <button on:click={() => deleteEntry(entry.id)}>Remove</button>
+            </span>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .entry {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    width: 100%;
+  }
+
+  .entry-adjust {
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  .entry:hover .entry-adjust {
+    opacity: 1;
+    transition: opacity 0.2s;
+  }
+</style>
diff --git a/src/lib/Tools/tools.ts b/src/lib/Tools/tools.ts
index b85ff7f6..06249ab3 100644
--- a/src/lib/Tools/tools.ts
+++ b/src/lib/Tools/tools.ts
@@ -7,6 +7,7 @@ export const tools: {
     short?: string;
     description?: () => string;
     id: string;
+    hidden?: boolean;
   };
 } = {
   default: {
@@ -35,6 +36,12 @@ export const tools: {
       "Find media with prequels you haven't seen yet for any given simulcast season",
     id: 'sequel_spy'
   },
+  tracker: {
+    name: () => 'Tracker',
+    description: () => 'Track your anime and manga progress with ease, intended for media that doesn\'t qualify for an AniList entry',
+    id: 'tracker',
+    hidden: true
+  },
   uma_musume_birthdays: {
     name: () => {
       return 'Uma Musume: Pretty Derby Character Birthdays';
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 97e27e0e..d1650b34 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -13,7 +13,7 @@
 
 <div class="card">
   <div class="tool-grid">
-    {#each Object.keys(tools).filter((t) => t !== 'default') as t}
+    {#each Object.keys(tools).filter((t) => t !== 'default' && !tools[t].hidden) as t}
       <a href={root(`/tools/${tools[t].id}`)} on:click={() => (tool = t)}>
         <div class="tool-grid-tool card">
           <span class="title">
diff --git a/src/routes/tools/[tool]/+page.svelte b/src/routes/tools/[tool]/+page.svelte
index 9140ae1c..c811cf2a 100644
--- a/src/routes/tools/[tool]/+page.svelte
+++ b/src/routes/tools/[tool]/+page.svelte
@@ -19,6 +19,7 @@
   import Popup from '$lib/Layout/Popup.svelte';
   import HololiveBirthdays from '$lib/Tools/HololiveBirthdays.svelte';
   import SequelCatcher from '$lib/Tools/SequelCatcher/Tool.svelte';
+  import Tracker from '$lib/Tools/Tracker/Tool.svelte';
 
   export let data;
 
@@ -80,5 +81,7 @@
     <HololiveBirthdays />
   {:else if tool === 'sequel_catcher'}
     <SequelCatcher user={data.user} />
+  {:else if tool === 'tracker'}
+    <Tracker />
   {/if}
 {/if}
-- 
cgit v1.2.3