From 798725ad29802f21723cd98ef85294596f3f39bf Mon Sep 17 00:00:00 2001
From: bboysoul <bboysoulcn@gmail.com>
Date: Tue, 8 Sep 2026 11:24:39 +0800
Subject: [PATCH] fix: persist completed item visibility

---
 frontend/src/App.vue               |  8 +++++---
 frontend/src/MvpPanel.vue          |  8 +++++---
 frontend/src/lib/mvp-utils.test.ts | 15 ++++++++++++++-
 frontend/src/lib/mvp-utils.ts      | 15 +++++++++++++++
 frontend/src/style.test.ts         |  9 ++++++++-
 5 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7ccb148..d1e5cb1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,7 +6,7 @@ import {
   Settings, Trash2, X, Repeat2,
 } from 'lucide-vue-next'
 import { buildTaskRrule, defaultTaskDueAt, filterTasks, fromDateTimeLocal, groupTaskTree, moveItemWithinScope, parseTaskRrule, renderMarkdown, toDateTimeLocal, type TaskRepeatConfig } from './lib/task-utils'
-import { defaultView, isTaskView, nextTotalAfterLocalTaskAdd, shouldToggleRowSwipe, writeCountdownCache } from './lib/mvp-utils'
+import { defaultView, isTaskView, nextTotalAfterLocalTaskAdd, readStoredBoolean, shouldToggleRowSwipe, writeCountdownCache, writeStoredBoolean } from './lib/mvp-utils'
 import { csrfHeader } from './lib/csrf'
 import MvpPanel from './MvpPanel.vue'
 import CountdownPanel from './CountdownPanel.vue'
@@ -43,7 +43,8 @@ const mobileDetail = ref(false)
 const mobileMore = ref(false)
 const moreSettingsOpen = ref(false)
 const markdownPreview = ref(false)
-const showCompleted = ref(true)
+const SHOW_COMPLETED_STORAGE_KEY = 'dodo.show-completed'
+const showCompleted = ref(readStoredBoolean(window.localStorage, SHOW_COMPLETED_STORAGE_KEY, true))
 const page = ref(1)
 const pageSize = 50
 const totalTasks = ref(0)
@@ -242,7 +243,8 @@ watch(query, () => {
   page.value = 1
   searchTimer = window.setTimeout(() => loadAll(), 250)
 })
-watch(showCompleted, () => {
+watch(showCompleted, (value) => {
+  writeStoredBoolean(window.localStorage, SHOW_COMPLETED_STORAGE_KEY, value)
   if (isTaskView(activeView.value)) { page.value = 1; loadAll() }
 })
 
diff --git a/frontend/src/MvpPanel.vue b/frontend/src/MvpPanel.vue
index 13e2e21..053aa38 100644
--- a/frontend/src/MvpPanel.vue
+++ b/frontend/src/MvpPanel.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { Activity, ArchiveRestore, Check, Download, FileJson, GripVertical, LogOut, Trash2, X } from 'lucide-vue-next'
 import { moveItemWithinScope } from './lib/task-utils'
-import { dateKey, habitButtonNotice, habitButtonValue, isHabitComplete, isHabitScheduledToday, mergePage, nextHabitSwipeValue, previousHabitSwipeValue, readHabitGridCache, shouldToggleRowSwipe, writeHabitGridCache } from './lib/mvp-utils'
+import { dateKey, habitButtonNotice, habitButtonValue, isHabitComplete, isHabitScheduledToday, mergePage, nextHabitSwipeValue, previousHabitSwipeValue, readHabitGridCache, readStoredBoolean, shouldToggleRowSwipe, writeHabitGridCache, writeStoredBoolean } from './lib/mvp-utils'
 import { csrfHeader } from './lib/csrf'
 
 type View = 'habits' | 'today-habits' | 'settings'
@@ -34,10 +34,12 @@ const habitPointerStart = ref<{ id: string; x: number; y: number } | null>(null)
 const habitSwipeOffsets = ref<Record<string, number>>({})
 const habitReorder = ref<{ id: string; startY: number; offsetY: number } | null>(null)
 const habitReorderTarget = ref('')
-const hideCompletedHabits = ref(false)
+const HIDE_COMPLETED_HABITS_STORAGE_KEY = 'dodo.hide-completed-habits'
+const hideCompletedHabits = ref(readStoredBoolean(window.localStorage, HIDE_COMPLETED_HABITS_STORAGE_KEY, false))
 const todayHabits = computed(() => habits.value.filter((item) => isHabitScheduledToday(item, todayKey.value)))
 const visibleTodayHabits = computed(() => hideCompletedHabits.value ? todayHabits.value.filter((item) => !isDone(item, todayKey.value)) : todayHabits.value)
 const visibleHabits = computed(() => hideCompletedHabits.value ? habits.value.filter((item) => !isDone(item, todayKey.value)) : habits.value)
+watch(hideCompletedHabits, (value) => writeStoredBoolean(window.localStorage, HIDE_COMPLETED_HABITS_STORAGE_KEY, value))
 let dayRolloverTimer: ReturnType<typeof setInterval> | undefined
 
 function formatErrorMessage(detail: unknown): string {
diff --git a/frontend/src/lib/mvp-utils.test.ts b/frontend/src/lib/mvp-utils.test.ts
index f6e6394..875d938 100644
--- a/frontend/src/lib/mvp-utils.test.ts
+++ b/frontend/src/lib/mvp-utils.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { calendarModeLabel, clampFabPosition, countdownDayText, countdownKindLabel, dateKey, defaultView, habitButtonNotice, habitButtonValue, habitWeek, isFabDrag, isHabitComplete, isHabitScheduledToday, isTaskView, nextHabitSwipeValue, nextTotalAfterLocalTaskAdd, numericHabitInputValue, previousHabitSwipeValue, quickTaskFields, readCountdownCache, readHabitGridCache, shouldToggleRowSwipe, writeCountdownCache, writeHabitGridCache } from './mvp-utils'
+import { calendarModeLabel, clampFabPosition, countdownDayText, countdownKindLabel, dateKey, defaultView, habitButtonNotice, habitButtonValue, habitWeek, isFabDrag, isHabitComplete, isHabitScheduledToday, isTaskView, nextHabitSwipeValue, nextTotalAfterLocalTaskAdd, numericHabitInputValue, previousHabitSwipeValue, quickTaskFields, readCountdownCache, readHabitGridCache, readStoredBoolean, shouldToggleRowSwipe, writeCountdownCache, writeHabitGridCache, writeStoredBoolean } from './mvp-utils'
 
 describe('MVP view utilities', () => {
   it('formats a local date as YYYY-MM-DD', () => {
@@ -77,6 +77,19 @@ describe('MVP view utilities', () => {
     expect(habitButtonNotice('boolean', 1, 0)).toBe('已取消完成')
   })
 
+  it('persists boolean display preferences across page refreshes', () => {
+    const storage = new Map<string, string>()
+    const fakeStorage = {
+      getItem: (key: string) => storage.get(key) ?? null,
+      setItem: (key: string, value: string) => storage.set(key, value),
+    }
+    expect(readStoredBoolean(fakeStorage, 'dodo.show-completed', true)).toBe(true)
+    writeStoredBoolean(fakeStorage, 'dodo.show-completed', false)
+    expect(readStoredBoolean(fakeStorage, 'dodo.show-completed', true)).toBe(false)
+    storage.set('dodo.show-completed', 'invalid')
+    expect(readStoredBoolean(fakeStorage, 'dodo.show-completed', true)).toBe(true)
+  })
+
   it('reuses the current week habit grid while refreshing in the background', () => {
     const habits = [{ id: 'habit-1', name: '喝水' }]
     writeHabitGridCache('2026-09-07', habits)
diff --git a/frontend/src/lib/mvp-utils.ts b/frontend/src/lib/mvp-utils.ts
index 51dae21..3053e7d 100644
--- a/frontend/src/lib/mvp-utils.ts
+++ b/frontend/src/lib/mvp-utils.ts
@@ -1,3 +1,18 @@
+type BooleanStorage = Pick<Storage, 'getItem' | 'setItem'>
+
+export function readStoredBoolean(storage: BooleanStorage, key: string, fallback: boolean) {
+  try {
+    const value = storage.getItem(key)
+    if (value === 'true') return true
+    if (value === 'false') return false
+  } catch { /* storage may be unavailable */ }
+  return fallback
+}
+
+export function writeStoredBoolean(storage: BooleanStorage, key: string, value: boolean) {
+  try { storage.setItem(key, String(value)) } catch { /* storage may be unavailable */ }
+}
+
 export function dateKey(date: Date) {
   const y = date.getFullYear()
   const m = `${date.getMonth() + 1}`.padStart(2, '0')
diff --git a/frontend/src/style.test.ts b/frontend/src/style.test.ts
index 1eab09b..8ec1620 100644
--- a/frontend/src/style.test.ts
+++ b/frontend/src/style.test.ts
@@ -120,8 +120,15 @@ describe('task and habit row decoration', () => {
     expect(css).toContain('.habit-progress{margin-left:auto;')
   })
 
+  it('restores the completed-item visibility choices from local storage', () => {
+    expect(app).toContain("readStoredBoolean(window.localStorage, SHOW_COMPLETED_STORAGE_KEY, true)")
+    expect(app).toContain("writeStoredBoolean(window.localStorage, SHOW_COMPLETED_STORAGE_KEY, value)")
+    expect(mvpPanel).toContain("readStoredBoolean(window.localStorage, HIDE_COMPLETED_HABITS_STORAGE_KEY, false)")
+    expect(mvpPanel).toContain("writeStoredBoolean(window.localStorage, HIDE_COMPLETED_HABITS_STORAGE_KEY, value)")
+  })
+
   it('can hide completed habits in both Today and full habit views', () => {
-    expect(mvpPanel).toContain('const hideCompletedHabits = ref(false)')
+    expect(mvpPanel).toContain("const hideCompletedHabits = ref(readStoredBoolean(window.localStorage, HIDE_COMPLETED_HABITS_STORAGE_KEY, false))")
     expect(mvpPanel).toContain('const visibleTodayHabits = computed')
     expect(mvpPanel).toContain('const visibleHabits = computed')
     expect(mvpPanel).toContain('v-model="hideCompletedHabits"')