feat: countdown anniversaries and birthdays like ticktick

frontend/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import {
-  ArchiveRestore, CalendarDays, Check, ChevronDown, ChevronRight, CirclePlus, Folder,
+  ArchiveRestore, CalendarDays, CalendarHeart, Check, ChevronDown, ChevronRight, CirclePlus, Folder,
   GripVertical, Inbox, ListChecks, ListTodo, Menu, Pencil, Plus, Search,
   Settings, Trash2, X, Repeat2, Ellipsis,
 } from 'lucide-vue-next'
@@ -9,11 +9,12 @@ import { filterTasks, fromDateTimeLocal, groupTaskTree, renderMarkdown, toDateTi
 import { defaultView, isTaskView, quickTaskFields, shouldToggleRowSwipe } from './lib/mvp-utils'
 import { csrfHeader } from './lib/csrf'
 import MvpPanel from './MvpPanel.vue'
+import CountdownPanel from './CountdownPanel.vue'
 
 type FolderItem = { id: string; name: string }
 type TaskList = { id: string; folder_id: string | null; name: string; is_inbox: boolean }
 type Task = { id: string; list_id: string; parent_id: string | null; title: string; description: string; priority: number; completed: boolean; version: number; due_at: string | null; subtasks?: Task[] }
-type View = 'tasks' | 'today' | 'upcoming' | 'trash' | 'habits' | 'settings'
+type View = 'tasks' | 'today' | 'upcoming' | 'trash' | 'habits' | 'countdowns' | 'settings'
 
 const initialized = ref<boolean | null>(null)
 const authReady = ref(false)
@@ -79,6 +80,7 @@ const activeName = computed(() => {
   if (activeView.value === 'today') return '今天'
   if (activeView.value === 'upcoming') return '最近 7 天'
   if (activeView.value === 'habits') return '习惯'
+  if (activeView.value === 'countdowns') return '倒数日'
   if (activeView.value === 'settings') return '设置与数据'
   return lists.value.find((item) => item.id === activeList.value)?.name || '收集箱'
 })
@@ -406,6 +408,7 @@ onMounted(bootstrap)
       <nav class="primary-nav">
         <button :class="{ active: activeView==='tasks' && lists.find(l=>l.id===activeList)?.is_inbox }" @click="switchView('tasks', lists.find(l=>l.is_inbox)?.id)"><Inbox />收集箱</button>
         <button :class="{ active: activeView==='today' }" @click="switchView('today')"><ListTodo />今天</button>
+        <button :class="{ active: activeView==='countdowns' }" @click="switchView('countdowns')"><CalendarHeart />倒数日</button>
         <button :class="{ active: activeView==='upcoming' }" @click="switchView('upcoming')"><CalendarDays />最近 7 天</button>
         <button :class="{ active: activeView==='habits' }" @click="switchView('habits')"><Repeat2 />习惯</button>
         <button :class="{ active: activeView==='trash' }" @click="switchView('trash')"><Trash2 />回收站</button>
@@ -434,6 +437,7 @@ onMounted(bootstrap)
       <template v-if="['habits','settings'].includes(activeView)">
         <MvpPanel :key="activeView" :view="activeView as 'habits'|'settings'" @changed="refreshAll" @notice="toast" />
       </template>
+      <CountdownPanel v-else-if="activeView==='countdowns'" @notice="toast" />
       <template v-else>
         <template v-if="activeView==='today'">
           <h3 class="section-heading"><ListTodo/>今日任务</h3>
@@ -480,7 +484,7 @@ onMounted(bootstrap)
     </aside>
 
     <div v-if="mobileMore" class="more-mask" @click.self="mobileMore=false"><section id="mobile-more-menu" class="more-sheet" role="dialog" aria-modal="true" aria-label="更多导航"><div class="more-sheet-head"><b>更多</b><button class="icon" aria-label="关闭更多菜单" @click="mobileMore=false"><X/></button></div><button @click="switchView('settings')"><Settings/>设置与数据</button></section></div>
-    <nav class="bottom three-items" aria-label="主要导航"><button :class="{active:activeView==='today'}" @click="switchView('today')"><ListTodo/><span>今天</span></button><button :class="{active:activeView==='habits'}" @click="switchView('habits')"><Repeat2/><span>习惯</span></button><button :class="{active:mobileMore||['tasks','upcoming','trash','settings'].includes(activeView)}" aria-haspopup="dialog" aria-controls="mobile-more-menu" :aria-expanded="mobileMore" @click="mobileMore=!mobileMore"><Ellipsis/><span>更多</span></button></nav>
+    <nav class="bottom" aria-label="主要导航"><button :class="{active:activeView==='today'}" @click="switchView('today')"><ListTodo/><span>今天</span></button><button :class="{active:activeView==='habits'}" @click="switchView('habits')"><Repeat2/><span>习惯</span></button><button :class="{active:activeView==='countdowns'}" @click="switchView('countdowns')"><CalendarHeart/><span>倒数日</span></button><button :class="{active:mobileMore||['tasks','upcoming','trash','settings'].includes(activeView)}" aria-haspopup="dialog" aria-controls="mobile-more-menu" :aria-expanded="mobileMore" @click="mobileMore=!mobileMore"><Ellipsis/><span>更多</span></button></nav>
     <button v-if="['tasks','today','upcoming'].includes(activeView)" class="fab" aria-label="添加任务" @click="focusQuick"><CirclePlus/></button>
     <Transition name="toast"><div v-if="notice" class="toast" role="status">{{notice}}</div></Transition>
     <div v-if="error" class="error-toast" role="alert">{{error}}<button @click="error=''"><X/></button></div>