Dates

Author: Explosion-Scratch

bun.lock

@@ -25,6 +25,7 @@
     "@tiptap/extension-task-list": "^2.11.2",
     "@tiptap/pm": "^2.11.2",
     "@tiptap/starter-kit": "^2.11.2",
+    "chrono-node": "^2.9.0",
     "phosphor-svelte": "^3.0.1",
     "tiptap-markdown": "^0.8.10"
   }

package.json

@@ -47,6 +47,13 @@
     }
   }, 1000)
 
+  // Reset scroll when zoom changes
+  $: if ($zoomedItemId || $zoomedItemId === null) {
+      if (containerRef) {
+        containerRef.scrollTop = 0;
+      }
+  }
+
   items.subscribe(() => {
     if (isInitialLoad) {
       isInitialLoad = false
@@ -697,6 +704,7 @@
       item={$filteredItems.tree}
       isTop={true}
       highlightPhrase={$highlightPhrase}
+      activeZoomedItemId={$zoomedItemId}
     />
   </div>
 </div>

src/App.svelte

@@ -1,10 +1,12 @@
 <script>
   import { createEventDispatcher, onMount, onDestroy } from 'svelte'
+  import { formatRelativeTime, formatAbsoluteDate } from '../utils/dateParser.js'
 
   export let items = []
   export let coords = { top: 0, left: 0 }
   export let query = ''
   export let visible = false
+  export let dateItem = null
 
   const dispatch = createEventDispatcher()
 
@@ -25,8 +27,21 @@
     return text?.toLowerCase().includes(query.toLowerCase())
   })
 
-  $: if (filteredItems.length > 0 && selectedIndex >= filteredItems.length) {
-    selectedIndex = filteredItems.length - 1
+  $: dateDisplayItem = dateItem ? {
+    _isDate: true,
+    date: dateItem.date,
+    relativeText: formatRelativeTime(dateItem.date),
+    absoluteText: formatAbsoluteDate(dateItem.date)
+  } : null
+
+  $: allDisplayItems = dateDisplayItem 
+    ? [dateDisplayItem, ...filteredItems]
+    : filteredItems
+
+  $: totalLength = allDisplayItems.length
+
+  $: if (totalLength > 0 && selectedIndex >= totalLength) {
+    selectedIndex = totalLength - 1
   }
 
   function handleKeyDown(event) {
@@ -35,16 +50,16 @@
     if (event.key === 'ArrowDown') {
       event.preventDefault()
       event.stopPropagation()
-      selectedIndex = (selectedIndex + 1) % filteredItems.length
+      selectedIndex = (selectedIndex + 1) % totalLength
     } else if (event.key === 'ArrowUp') {
       event.preventDefault()
       event.stopPropagation()
-      selectedIndex = (selectedIndex - 1 + filteredItems.length) % filteredItems.length
+      selectedIndex = (selectedIndex - 1 + totalLength) % totalLength
     } else if (event.key === 'Enter' || event.key === 'Tab') {
-      if (filteredItems.length > 0) {
+      if (totalLength > 0) {
         event.preventDefault()
         event.stopPropagation()
-        selectItem(filteredItems[selectedIndex])
+        selectItem(allDisplayItems[selectedIndex])
       }
     } else if (event.key === 'Escape') {
       event.preventDefault()
@@ -66,22 +81,37 @@
   })
 </script>
 
-{#if visible && filteredItems.length > 0}
+{#if visible && totalLength > 0}
   <div 
     bind:this={menuElement}
     class="autocomplete-menu"
     style="top: {coords.bottom + 4}px; left: {coords.left}px;"
   >
-    {#each filteredItems as item, index}
-      <button
-        type="button"
-        class="autocomplete-item"
-        class:selected={index === selectedIndex}
-        on:click={() => selectItem(item)}
-        on:mouseenter={() => selectedIndex = index}
-      >
-        {truncateText(getItemText(item))}
-      </button>
+    {#each allDisplayItems as item, index}
+      {#if item._isDate}
+        <button
+          type="button"
+          class="autocomplete-item date-item"
+          class:selected={index === selectedIndex}
+          on:click={() => selectItem(item)}
+          on:mouseenter={() => selectedIndex = index}
+          title={item.absoluteText}
+        >
+          <span class="date-icon">📅</span>
+          <span class="date-relative">{item.relativeText}</span>
+          <span class="date-absolute">{item.absoluteText}</span>
+        </button>
+      {:else}
+        <button
+          type="button"
+          class="autocomplete-item"
+          class:selected={index === selectedIndex}
+          on:click={() => selectItem(item)}
+          on:mouseenter={() => selectedIndex = index}
+        >
+          {truncateText(getItemText(item))}
+        </button>
+      {/if}
     {/each}
   </div>
 {/if}
@@ -95,7 +125,7 @@
     border-radius: 6px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     min-width: 140px;
-    max-width: 260px;
+    max-width: 280px;
     max-height: 180px;
     overflow-y: auto;
     padding: 3px;
@@ -121,4 +151,29 @@
     background: rgba(0, 0, 0, 0.05);
     color: #333;
   }
+
+  .autocomplete-item.date-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    margin-bottom: 2px;
+    padding-bottom: 8px;
+  }
+
+  .date-icon {
+    font-size: 12px;
+    flex-shrink: 0;
+  }
+
+  .date-relative {
+    font-weight: 500;
+    color: var(--accent, #49baf2);
+  }
+
+  .date-absolute {
+    font-size: 11px;
+    color: #999;
+    margin-left: auto;
+  }
 </style>

src/components/AutocompleteMenu.svelte

@@ -7,6 +7,7 @@
   import { itemStore } from '../stores/itemStore.js'
   import { parseStatusPrefix } from '../utils/serializer.js'
   import { focusItem, focusDescription } from '../utils/focus.js'
+  import { send, receive } from '../utils/transitions.js'
 
   export let item
   export let isSelected = false
@@ -21,6 +22,7 @@
 
   $: hasDescription = !!item.description?.trim()
   $: hasChildren = item.children?.length > 0
+  
   $: editorValue = item.hasCheckbox 
     ? (item.completed ? '[x] ' : '[ ] ') + (item.text || '')
     : (item.text || '')
@@ -116,6 +118,10 @@
     itemStore.navigateToItem(event.detail.id)
   }
 
+  function handleDateClick(event) {
+    itemStore.setSearch(event.detail.searchStr)
+  }
+
   function handleTextChange(event) {
     const rawText = event.detail.value
     const statusInfo = parseStatusPrefix(rawText)
@@ -246,7 +252,11 @@
           background={hasChildren && !item.open}
           on:click={handleZoom}
         />
-        <div class="title-editor">
+        <div 
+          class="title-editor"
+          in:receive={{key: 'title_' + item.id}}
+          out:send={{key: 'title_' + item.id}}
+        >
           <RichEditor
             bind:this={titleEditorRef}
             value={editorValue}
@@ -270,12 +280,17 @@
             on:description={handleShowDescription}
             on:hashtagclick={handleHashtagClick}
             on:itemrefclick={handleItemRefClick}
+            on:dateclick={handleDateClick}
           />
         </div>
       </div>
 
       {#if hasDescription || showDescriptionEditor}
-        <div class="description-editor">
+        <div 
+          class="description-editor"
+          in:receive={{key: 'desc_' + item.id}}
+          out:send={{key: 'desc_' + item.id}}
+        >
           <RichEditor
             bind:value={item.description}
             isDescription={true}
@@ -288,6 +303,7 @@
             on:togglecomplete={handleToggleComplete}
             on:hashtagclick={handleHashtagClick}
             on:itemrefclick={handleItemRefClick}
+            on:dateclick={handleDateClick}
           />
         </div>
       {/if}
@@ -378,8 +394,4 @@
     min-width: 0;
   }
 
-  .description-editor {
-    margin-left: 1.3rem;
-    font-size: 0.85rem;
-  }
 </style>

src/components/Item.svelte

@@ -7,6 +7,8 @@
   import { parseStatusPrefix } from '../utils/serializer.js'
   import { focusItem, focusDescription, getItemAbove, getItemBelow, flattenVisible } from '../utils/focus.js'
   import { get } from 'svelte/store'
+  import { send, receive } from '../utils/transitions.js'
+  import { flip } from 'svelte/animate'
 
   function handleHashtagClick(event) {
     itemStore.setSearch(event.detail.hashtag)
@@ -16,20 +18,25 @@
     itemStore.navigateToItem(event.detail.id)
   }
 
+  function handleDateClick(event) {
+    itemStore.setSearch(event.detail.searchStr)
+  }
+
   export let item
   export let isTop = false
   export let outermost = false
   export let highlightPhrase = null
+  export let activeZoomedItemId = null
 
   const dispatch = createEventDispatcher()
 
-  const { zoomedItemId, selection, selectionAnchor, selectionDirection } = itemStore
+  const { selection, selectionAnchor, selectionDirection, transitionMode } = itemStore
 
   let containerElement
   let showDescriptionEditor = false
   let zoomedTitleEditorRef
 
-  $: isZoomedRoot = isTop && !!$zoomedItemId && item.id === $zoomedItemId
+  $: isZoomedRoot = isTop && !!activeZoomedItemId && item.id === activeZoomedItemId
   $: hasDescription = !!item.description?.trim()
   $: titleEditorValue = item.hasCheckbox 
     ? (item.completed ? '[x] ' : '[ ] ') + (item.text || '')
@@ -308,8 +315,13 @@
   class:outermost
 >
   {#if isZoomedRoot}
-    {#key item.id}
-      <h1 class="zoomed_title" class:completed={item.completed} id="item_{item.id}">
+    <h1 
+        class="zoomed_title" 
+        class:completed={item.completed} 
+        id="item_{item.id}"
+        in:receive={{key: 'title_' + item.id}}
+        out:send={{key: 'title_' + item.id}}
+      >
         <RichEditor
           bind:this={zoomedTitleEditorRef}
           value={titleEditorValue}
@@ -322,6 +334,7 @@
           on:change={handleTitleTextChange}
           on:hashtagclick={handleHashtagClick}
           on:itemrefclick={handleItemRefClick}
+          on:dateclick={handleDateClick}
           on:togglecomplete={handleTitleToggleComplete}
           on:checkboxtoggle={handleTitleCheckboxToggle}
           on:checkboxremoved={handleTitleCheckboxRemoved}
@@ -330,7 +343,11 @@
       </h1>
 
       {#if hasDescription || showDescriptionEditor}
-        <div class="zoomed_description">
+        <div 
+          class="zoomed_description"
+          in:receive={{key: 'desc_' + item.id}}
+          out:send={{key: 'desc_' + item.id}}
+        >
           <RichEditor
             bind:value={item.description}
             isDescription={true}
@@ -345,14 +362,23 @@
           />
         </div>
       {:else}
-        <button class="add-description-btn" on:click={handleDescriptionClick}>
+        <button 
+          class="add-description-btn" 
+          on:click={handleDescriptionClick}
+          in:receive={{key: 'desc_' + item.id}}
+          out:send={{key: 'desc_' + item.id}}
+        >
           Click to add description...
         </button>
       {/if}
-    {/key}
   {:else if isTop && item.text?.length && !outermost}
-    {#key item.id}
-      <h2 class="item_title" class:completed={item.completed} id="item_{item.id}">
+    <h2 
+        class="item_title" 
+        class:completed={item.completed} 
+        id="item_{item.id}"
+        in:receive={{key: 'title_' + item.id}}
+        out:send={{key: 'title_' + item.id}}
+      >
         <RichEditor
           value={titleEditorValue}
           {highlightPhrase}
@@ -363,19 +389,22 @@
           on:change={handleTitleTextChange}
           on:hashtagclick={handleHashtagClick}
           on:itemrefclick={handleItemRefClick}
+          on:dateclick={handleDateClick}
           on:togglecomplete={handleTitleToggleComplete}
           on:checkboxtoggle={handleTitleCheckboxToggle}
           on:checkboxremoved={handleTitleCheckboxRemoved}
           on:checkboxadded={handleTitleCheckboxAdded}
         />
-      </h2>
-    {/key}
+    </h2>
   {/if}
 
   {#if item.children?.length && (item.open || isTop)}
-    <ul class:children={!isTop} on:click={handleEmptyAreaClick}>
+    <ul class:children={!isTop} on:click={handleEmptyAreaClick} on:keydown={() => {}}>
       {#each item.children as child (child.id)}
-        <div class="item-row">
+        <div 
+          class="item-row" 
+          animate:flip={{duration: $transitionMode === 'move' ? 300 : 0}}
+        >
           <Item
             item={child}
             isSelected={$selection.has(child.id)}