Persist tuning settings to AsyncStorage

[TinyKitten]

Summary

This PR adds persistence for tuning settings to AsyncStorage, ensuring that user preferences for header/bottom transition intervals and delays, as well as developer overlay and untouchable mode settings, are retained across app sessions.

Key Changes

• TuningSettings.tsx: Modified handler functions to persist setting changes to AsyncStorage immediately when values change

  • handleHeaderIntervalChange, handleHeaderDelayChange, and handleBottomDelayChange now save values to AsyncStorage
  • toggleDevOverlayEnabled and toggleUntouchableModeEnabled now persist their state
  • toggleTelemetryEnabled simplified to always persist changes (removed conditional alert logic)

• Permitted.tsx: Added initialization logic to restore persisted tuning settings from AsyncStorage on app startup

  • Retrieves four new tuning-related keys from AsyncStorage
  • Parses and validates numeric values before applying them to state
  • Restores headerTransitionInterval, headerTransitionDelay, bottomTransitionInterval, and untouchableModeEnabled

• asyncStorage.ts: Added four new AsyncStorage keys for the tuning settings

  • HEADER_TRANSITION_INTERVAL
  • HEADER_TRANSITION_DELAY
  • BOTTOM_TRANSITION_INTERVAL
  • UNTOUCHABLE_MODE_ENABLED

Implementation Details

• Settings are persisted immediately upon change rather than on app exit, ensuring no data loss
• Numeric values are validated during restoration to prevent corrupted data from breaking the app
• The pattern follows existing persistence patterns used for other settings like telemetry and dev overlay

https://claude.ai/code/session_01JR8c8hRFxj73aLTZkFHmcR

Summary by CodeRabbit

リリースノート

• 新機能

  • ヘッダーおよびボトムトランジション間隔をカスタマイズできるようになりました
  • タッチ無効化モード設定が追加されました

• 改善

  • 設定の変更がリアルタイムで保存されるようになりました
  • 数値設定がより安全に処理されるようになりました

[coderabbitai]

📝 Walkthrough

Walkthrough

AsyncStorageキーの4つの新しい定数を定義し、アプリケーション起動時とユーザー設定変更時にそれらの値を読み取り・永続化する機能を追加。ヘッダーとボトム遷移のアニメーション制御とuntouchableモード設定に対応。

Changes

Cohort / File(s)	Summary
AsyncStorage定数定義 src/constants/asyncStorage.ts	HEADER_TRANSITION_INTERVAL、HEADER_TRANSITION_DELAY、BOTTOM_TRANSITION_INTERVAL、UNTOUCHABLE_MODE_ENABLEDの4つのキーをASYNC_STORAGE_KEYSに追加。
AsyncStorage設定読み込み src/components/Permitted.tsx	起動時の設定読み込みロジックで、新規追加の4つのキーから値を取得し、Number/boolean型にパースしてtuning状態を更新。NaN値は安全にスキップ。
ユーザー設定パネル改善 src/components/TuningSettings.tsx	ヘッダー間隔、ヘッダー遅延、ボトム遷移間隔のハンドラーを改良し、値変更時に即座にAsyncStorageに永続化。toggleUntouchableModeEnabledとtoggleDevOverlayEnabledの動作を統一し、確認ダイアログなしで直接永続化。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• バックグラウンド音声機能解放 #4047: Permitted.txとasyncStorage.tsの設定読み込みロジック変更で関連。
• アンタッチャブルモード実装 #4458: untouchableModeEnabledフィーチャーの実装で直接関連。
• 設定画面にウォークスルーを追加 #5060: ASYNC_STORAGE_KEYSマッピング拡張で関連。

Suggested labels

react

Poem

🐰 新しいキーを AsyncStorage に加えて、
アニメーション の時間を自由に操る。
タッチ禁止モードも しっかり記憶し、
ウサギのように素早く設定を保存するのだ！
✨ 永続化の魔法で、快適さ向上 🎉

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title accurately summarizes the main change: persisting tuning settings to AsyncStorage, which is the core objective of all three modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/persist-tuning-settings-FTWcZ

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/components/TuningSettings.tsx (1)

144-177: AsyncStorage操作のエラーハンドリングを検討してください。

AsyncStorage.setItemがfire-and-forgetパターンで呼び出されており、永続化に失敗した場合、状態は更新されますがストレージには反映されません。Permitted.tsx（248-263行目）では同様の操作でtry/catchとロールバックが実装されています。

この既存パターン（handleEnVoiceNameChange等）に合わせているのは理解していますが、一貫性のためエラーハンドリングの追加を検討いただけますでしょうか。

♻️ エラーハンドリング追加の提案例

 const handleHeaderIntervalChange = (text: string) => {
+  const prevValue = settings.headerTransitionInterval;
   const value = parseNumberFromText(settings.headerTransitionInterval, text);
   setSettings((prev) => ({
     ...prev,
     headerTransitionInterval: value,
   }));
-  AsyncStorage.setItem(
-    ASYNC_STORAGE_KEYS.HEADER_TRANSITION_INTERVAL,
-    String(value)
-  );
+  AsyncStorage.setItem(
+    ASYNC_STORAGE_KEYS.HEADER_TRANSITION_INTERVAL,
+    String(value)
+  ).catch((error) => {
+    console.error(error);
+    setSettings((prev) => ({
+      ...prev,
+      headerTransitionInterval: prevValue,
+    }));
+  });
 };

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/TuningSettings.tsx` around lines 144 - 177, The three handlers
(handleHeaderIntervalChange, handleHeaderDelayChange, handleBottomDelayChange)
call AsyncStorage.setItem fire-and-forget; update them to mirror the pattern
used in Permitted.tsx (e.g., handleEnVoiceNameChange): wrap the
AsyncStorage.setItem call in try/catch, attempt to persist the new value derived
via parseNumberFromText and ASYNC_STORAGE_KEYS, and on failure log the error and
rollback the in-memory state to the previous value (use the prev state captured
before setSettings) so UI state and storage remain consistent.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/TuningSettings.tsx`:
- Around line 144-177: The three handlers (handleHeaderIntervalChange,
handleHeaderDelayChange, handleBottomDelayChange) call AsyncStorage.setItem
fire-and-forget; update them to mirror the pattern used in Permitted.tsx (e.g.,
handleEnVoiceNameChange): wrap the AsyncStorage.setItem call in try/catch,
attempt to persist the new value derived via parseNumberFromText and
ASYNC_STORAGE_KEYS, and on failure log the error and rollback the in-memory
state to the previous value (use the prev state captured before setSettings) so
UI state and storage remain consistent.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1b7cc94b-7ea6-4c0d-857d-b640b26ce7f5

📥 Commits

Reviewing files that changed from the base of the PR and between 7f87ca5 and 4d4ab69.

📒 Files selected for processing (3)

• src/components/Permitted.tsx
• src/components/TuningSettings.tsx
• src/constants/asyncStorage.ts