holy ai genereated fuzzy date matcher

Author: refact0r

src/lib/components/AddTask.svelte

@@ -0,0 +1,105 @@
+<script>
+    import { createEventDispatcher } from 'svelte'
+
+    export let value = ''
+    export let parsed = null
+    export let placeholder = 'new task'
+    export let disabled = false
+    export let loading = false
+
+    const dispatch = createEventDispatcher()
+
+    const handleSubmit = (event) => {
+        event.preventDefault()
+        dispatch('submit')
+    }
+
+    const handleInput = (event) => {
+        dispatch('input', event.target.value)
+    }
+
+    $: match = parsed?.match
+    $: before = match ? value.slice(0, match.start) : value
+    $: matchedText = match ? value.slice(match.start, match.end) : ''
+    $: after = match ? value.slice(match.end) : ''
+    $: showPlaceholder = !value
+</script>
+
+<form class="add-task-form" onsubmit={handleSubmit}>
+    <span class="dark">+</span>
+    <div class="input-shell">
+        <div class="input-overlay" aria-hidden="true">
+            {#if showPlaceholder}
+                <span class="placeholder">{placeholder}</span>
+            {:else if match}
+                <span>{before}</span><span class="date-highlight"
+                    >{matchedText}</span
+                ><span>{after}</span>
+            {:else}
+                <span>{value}</span>
+            {/if}
+        </div>
+        <input
+            class="add-task-input"
+            type="text"
+            bind:value
+            {placeholder}
+            oninput={handleInput}
+            disabled={disabled || loading}
+            aria-label="Add task"
+            autocomplete="off"
+        />
+    </div>
+</form>
+
+<style>
+    .add-task-form {
+        opacity: 0;
+        display: flex;
+        gap: 1ch;
+        transition: opacity 0.2s ease;
+        flex: 1;
+        align-items: center;
+    }
+    .add-task-form:hover,
+    .add-task-form:focus-within {
+        opacity: 1;
+    }
+    .input-shell {
+        position: relative;
+        flex: 1;
+        min-width: 0;
+    }
+    .input-overlay {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        white-space: pre;
+        overflow: hidden;
+        font: inherit;
+        color: var(--txt-2);
+        line-height: 1.5;
+    }
+    .placeholder {
+        color: var(--txt-3);
+    }
+    .date-highlight {
+        color: var(--txt-1);
+    }
+    .add-task-input {
+        flex: 1;
+        background: transparent;
+        padding: 0;
+        border: none;
+        color: transparent;
+        caret-color: var(--txt-1);
+        height: 1.5rem;
+        width: 100%;
+    }
+    .add-task-input::placeholder {
+        color: transparent;
+    }
+    .add-task-input:disabled {
+        opacity: 0.5;
+    }
+</style>

src/lib/components/Todoist.svelte

@@ -2,6 +2,12 @@
     import { onMount, onDestroy, untrack } from 'svelte'
     import TodoistAPI from '../todoist-api.js'
     import { settings } from '../settings-store.svelte.js'
+    import AddTask from './AddTask.svelte'
+    import {
+        parseSmartDate,
+        stripDateMatch,
+        formatTodoistDue,
+    } from '../date-matcher.js'
 
     let api = null
     let tasks = $state([])
@@ -11,6 +17,7 @@
     let taskCount = $derived(tasks.filter((task) => !task.checked).length)
     let newTaskContent = $state('')
     let addingTask = $state(false)
+    let parsedDate = $state(null)
 
     function handleVisibilityChange() {
         if (document.visibilityState === 'visible' && api) {
@@ -29,6 +36,14 @@
         initializeAPI(token, true)
     })
 
+    $effect(() => {
+        const parsed = parseSmartDate(newTaskContent)
+        parsedDate = parsed
+        if (parsed) {
+            console.log('Parsed date:', parsed)
+        }
+    })
+
     async function initializeAPI(token, clearLocalData = false) {
         if (!token) {
             api = null
@@ -61,11 +76,20 @@
 
     async function addTask(event) {
         event.preventDefault()
-        if (!newTaskContent.trim() || !api || addingTask) return
+        const raw = newTaskContent.trim()
+        if (!raw || !api || addingTask) return
 
+        const parsed = parsedDate || parseSmartDate(raw)
+        let content = raw
+        let due = null
+        if (parsed?.match) {
+            const cleaned = stripDateMatch(raw, parsed.match)
+            content = cleaned || raw
+            due = formatTodoistDue(parsed.date, parsed.hasTime)
+        }
         try {
             addingTask = true
-            await api.addTask(newTaskContent.trim())
+            await api.addTask(content, due)
             newTaskContent = ''
             await loadTasks()
         } catch (err) {
@@ -204,16 +228,13 @@
                         ? ''
                         : 's'}
                 </a>
-                <form onsubmit={addTask}>
-                    <span class="dark">+</span>
-                    <input
-                        type="text"
-                        class="add-task-input"
-                        placeholder="new task"
-                        bind:value={newTaskContent}
-                        disabled={addingTask}
-                    />
-                </form>
+                <AddTask
+                    bind:value={newTaskContent}
+                    parsed={parsedDate}
+                    disabled={addingTask}
+                    loading={addingTask}
+                    on:submit={addTask}
+                />
             </div>
 
             <br />
@@ -289,29 +310,4 @@
     .overdue-date {
         color: var(--txt-err);
     }
-    form {
-        opacity: 0;
-        display: flex;
-        gap: 1ch;
-        transition: opacity 0.2s ease;
-        flex: 1;
-    }
-    form:hover,
-    form:focus-within {
-        opacity: 1;
-    }
-    .add-task-input {
-        flex: 1;
-        background: transparent;
-        padding: 0;
-        border: none;
-        color: var(--txt-2);
-        height: 1.5rem;
-    }
-    .add-task-input::placeholder {
-        color: var(--txt-3);
-    }
-    .add-task-input:disabled {
-        opacity: 0.5;
-    }
 </style>