feat(reader): let the mobile reader replay its gesture hint - #550
Merged
Conversation
The gesture hint showed once per device and was then unreachable: the first-open path wrote reader-mobile-gesture-hint-seen before showing it, and nothing else could bring it back. Add a "?" button to the reader toolbar that replays the same hint on the same 4s timer, lifting it above the chrome so it does not land under the button that recalled it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CE5UjUaYrwpXViv5Pj2G17
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
問題
行動版閱讀器的手勢說明（點中央開工具列、左右滑翻章）一台裝置只顯示一次：
onMounted讀到reader-mobile-gesture-hint-seen就直接 return，而寫入旗標與顯示提示是同一次進入書本時發生的，之後整個閱讀器沒有任何說明入口，錯過就只能亂試重新發現。改法
在工具列尾端加一顆「?」按鈕，把首次自動顯示與手動叫出收斂到同一個
showHint()：重設既有 timer、顯示提示、4 秒後自動收起。onMounted的旗標判斷與寫入邏輯完全沒動，只是改成呼叫showHint()。提示原本固定在畫面底部 28px，那正是工具列（bottom 10px、高 60px）的位置——從工具列叫出來會被自己的按鈕蓋住，所以 chrome 顯示時多掛一個
mobile-reader-hint-above-chrome把它抬到 82px。修在
MobileReaderView.vue這層而不是抽共用元件：提示、旗標、timer 三者本來就都是這個元件的私有狀態，加一顆按鈕不需要跨層。按鈕文字用「?」而非新增 icon，跟工具列現有的A−／A+／Aa文字按鈕一致，也不必動icons/registry.ts。驗收
MobileReaderView.test.ts「recalls the hint from the toolbar after it has been seen」；e2e 在 reload（旗標已寫入、提示不再自動出現）之後按下按鈕，斷言提示重新可見，且其底緣不低於工具列頂緣localStorage旗標的斷言未修改boundingBox寬高皆 ≥ 44px；reader-fonts.spec.ts同樣在 320px 下驗證五顆仍排在同一列另外把提示重複按下時「重設而非疊加 timer」也寫成測試，避免兩顆 timer 讓提示提早消失。
檢查
已執行（Node 23.6.0，因為
docs/development/setup.md記載 Node 26 會讓前端套件整批在 import 階段失敗）：npm --prefix frontend test— 127 files / 1266 tests passednpm --prefix frontend run buildnpm --prefix frontend run check-boundariesnpm --prefix frontend run check-licensesnpx playwright test mobile-reader.spec.ts、reader-fonts.spec.ts— 皆 passed未執行：三個 Go module 的
go test與golangci-lint。本 diff 沒有任何 Go 變更（只動frontend/、e2e/、docs/、CHANGELOG.md），留給 CI 覆蓋。順帶修改
reader-fonts.spec.ts原本硬寫「工具列有 4 顆按鈕」，本次刻意新增第五顆，故同步改為 5——這是有意的契約更新，不是為了讓測試變綠。Ticket: https://app.notion.com/p/3cb190bf023b81d3ac34de16826e482f