refactor: introduce SettingsGroup/SettingsItem layout components and auto-save for text fields

Author: huoshen80

src/components/PathSettingsModal.tsx

@@ -1,6 +1,6 @@
 import { listen } from "@tauri-apps/api/event";
 import { open as openurl } from "@tauri-apps/plugin-shell";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { buildManualBgmAuth, completeBgmAuth } from "@/api/bgm";
 import { useAllSettings, useUpdateSettings } from "@/hooks/queries/useSettings";
@@ -36,6 +36,7 @@ export function useBgmAuthController() {
 	const [isOAuthLoading, setIsOAuthLoading] = useState(isBgmOAuthRunning);
 	const [isCompletingAuth, setIsCompletingAuth] = useState(false);
 	const [isSavingToken, setIsSavingToken] = useState(false);
+	const isSavingTokenRef = useRef(false);
 
 	useEffect(() => {
 		setInputToken(bgmToken);
@@ -55,8 +56,16 @@ export function useBgmAuthController() {
 
 	const handleSaveToken = async () => {
 		const accessToken = inputToken.trim();
+		if (accessToken === bgmToken || isSavingTokenRef.current) return;
+
 		try {
+			isSavingTokenRef.current = true;
 			setIsSavingToken(true);
+			if (!accessToken) {
+				await logoutBgmAuth();
+				return;
+			}
+
 			const auth = await buildManualBgmAuth(accessToken);
 
 			await updateSettingsMutation.mutateAsync({
@@ -75,12 +84,32 @@ export function useBgmAuthController() {
 				),
 			);
 		} finally {
+			isSavingTokenRef.current = false;
 			setIsSavingToken(false);
 		}
 	};
 
-	const handleClearToken = () => {
+	const handleClearToken = async () => {
 		setInputToken("");
+		if (!bgmToken || isSavingTokenRef.current) return;
+
+		try {
+			isSavingTokenRef.current = true;
+			setIsSavingToken(true);
+			await logoutBgmAuth();
+			snackbar.success(
+				t("pages.Settings.bgmTokenSettings.logoutSuccess", "已退出 BGM 登录"),
+			);
+		} catch (error) {
+			console.error(error);
+			setInputToken(bgmToken);
+			snackbar.error(
+				t("pages.Settings.bgmTokenSettings.logoutError", "退出登录失败"),
+			);
+		} finally {
+			isSavingTokenRef.current = false;
+			setIsSavingToken(false);
+		}
 	};
 
 	const handleOAuthLogin = useCallback(async () => {

src/hooks/features/useBgmAuthController.ts

@@ -613,13 +613,17 @@
 				"userInfo": "User info"
 			},
 			"cardClickMode": {
+				"description": "Controls single-click behavior for game cards in the library and collections. Double-click always launches the game.",
 				"navigate": "Navigation Mode (Single click to view details)",
 				"select": "Selection Mode (Single click to select game)",
 				"title": "Card Click Mode"
 			},
 			"closeApp": "Exit application",
+			"closeAppDescription": "Close the window and end the application process.",
 			"closeSettings": "Close Settings",
+			"closeSettingsDescription": "Choose whether closing the window asks for confirmation and what happens when confirmation is skipped.",
 			"closeToTray": "Minimize to tray",
+			"closeToTrayDescription": "Keep the application running in the system tray after closing the window.",
 			"collectionSync": {
 				"bgmDescription": "Try to read the BGM collection status when adding a game, and sync local status changes back to BGM.",
 				"bgmTitle": "Enable Bangumi collection sync",
@@ -630,6 +634,7 @@
 			},
 			"databaseBackup": {
 				"autoBackupOnExit": "Auto backup on exit",
+				"autoBackupOnExitDescription": "When enabled, the database is backed up when the application exits normally. Also backing up custom covers may delay exit.",
 				"autoIncludeCovers": "Also back up custom covers",
 				"autoMinIntervalHelp": "Use 0 to back up every time you exit",
 				"autoMinIntervalHours": "Minimum interval (hours)",
@@ -723,6 +728,7 @@
 				"systemDescription": "Manage startup, logs, close behavior, and time tracking mode."
 			},
 			"skipCloseRemind": "Don't remind again",
+			"skipCloseRemindDescription": "Skip the close confirmation and immediately perform the selected default action.",
 			"spoilerLevel": {
 				"description": "Select spoiler level to get appropriate tag content",
 				"level0": "0 - No Spoiler",

src/locales/en-US.json

@@ -600,13 +600,17 @@
 				"userInfo": "ユーザー情報"
 			},
 			"cardClickMode": {
+				"description": "ライブラリとコレクションのゲームカードをシングルクリックしたときの動作です。どちらのモードでもダブルクリックでゲームを起動できます。",
 				"navigate": "ナビゲーションモード（シングルクリックで詳細表示）",
 				"select": "選択モード（シングルクリックでゲーム選択）",
 				"title": "カードクリックモード"
 			},
 			"closeApp": "アプリを終了",
+			"closeAppDescription": "ウィンドウを閉じてアプリケーションを終了します。",
 			"closeSettings": "終了設定",
+			"closeSettingsDescription": "ウィンドウを閉じる際の確認表示と、確認を省略した場合の既定動作を設定します。",
 			"closeToTray": "トレイに最小化",
+			"closeToTrayDescription": "ウィンドウを閉じた後もシステムトレイでアプリを実行します。",
 			"collectionSync": {
 				"bgmDescription": "ゲーム追加時に BGM のコレクション状態を読み取り、ローカルで状態を変更したときに BGM に同期します。",
 				"bgmTitle": "Bangumi コレクション同期を有効化",
@@ -617,6 +621,7 @@
 			},
 			"databaseBackup": {
 				"autoBackupOnExit": "終了時に自動バックアップ",
+				"autoBackupOnExitDescription": "有効にすると、アプリが正常終了する際にデータベースを自動でバックアップします。カスタムカバーも同時にバックアップすると、終了に時間がかかる場合があります。",
 				"autoIncludeCovers": "カスタムカバーもバックアップ",
 				"autoMinIntervalHelp": "0 にすると終了ごとにバックアップします",
 				"autoMinIntervalHours": "最小間隔（時間）",
@@ -710,6 +715,7 @@
 				"systemDescription": "起動、ログ、終了動作、時間計測モードを管理します。"
 			},
 			"skipCloseRemind": "再度確認しない",
+			"skipCloseRemindDescription": "終了確認を表示せず、下で選択した既定動作をすぐに実行します。",
 			"spoilerLevel": {
 				"description": "ネタバレレベルを選択して、適切なタグコンテンツを取得する",
 				"level0": "0 - ネタバレなし",

src/locales/ja-JP.json

@@ -600,13 +600,17 @@
 				"userInfo": "用户信息"
 			},
 			"cardClickMode": {
+				"description": "仓库与收藏夹游戏卡片单击的行为（两种模式下均可双击游戏卡片启动游戏）。",
 				"navigate": "导航模式（单击跳转详情页）",
 				"select": "选择模式（单击选择游戏）",
 				"title": "卡片点击模式"
 			},
 			"closeApp": "直接退出应用",
+			"closeAppDescription": "关闭窗口后结束应用进程。",
 			"closeSettings": "关闭设置",
+			"closeSettingsDescription": "点击关闭按钮是否显示关闭确认弹窗，并选择跳过确认弹窗后的默认行为。",
 			"closeToTray": "最小化到托盘",
+			"closeToTrayDescription": "关闭窗口后应用继续在系统托盘中运行。",
 			"collectionSync": {
 				"bgmDescription": "添加游戏时尝试读取 BGM 收藏状态，本地修改状态时同步回 BGM。",
 				"bgmTitle": "启用 Bangumi 收藏同步",
@@ -617,6 +621,7 @@
 			},
 			"databaseBackup": {
 				"autoBackupOnExit": "退出时自动备份",
+				"autoBackupOnExitDescription": "开启后，软件正常退出时会自动备份数据库；如果同时启用自定义封面备份，可能会延长退出时间。",
 				"autoIncludeCovers": "同时备份自定义封面",
 				"autoMinIntervalHelp": "填 0 表示每次退出都备份",
 				"autoMinIntervalHours": "最小间隔（小时）",
@@ -710,6 +715,7 @@
 				"systemDescription": "管理启动、日志、关闭行为和计时模式。"
 			},
 			"skipCloseRemind": "不再提醒",
+			"skipCloseRemindDescription": "开启后不再显示关闭确认弹窗，直接执行下方选择的默认行为。",
 			"spoilerLevel": {
 				"description": "选择剧透等级以获取合适的标签内容",
 				"level0": "0 - 无剧透",

src/locales/zh-CN.json

@@ -600,13 +600,17 @@
 				"userInfo": "使用者資訊"
 			},
 			"cardClickMode": {
+				"description": "遊戲庫與收藏夾遊戲卡片單擊時的行為（兩種模式下皆可雙擊遊戲卡片啟動遊戲）。",
 				"navigate": "導航模式（單擊跳轉詳情頁）",
 				"select": "選擇模式（單擊選擇遊戲）",
 				"title": "卡片點擊模式"
 			},
 			"closeApp": "直接退出應用",
+			"closeAppDescription": "關閉視窗後結束應用程式行程。",
 			"closeSettings": "關閉設定",
+			"closeSettingsDescription": "點擊關閉按鈕時是否顯示關閉確認彈窗，並選擇略過確認彈窗後的預設行為。",
 			"closeToTray": "最小化到系統匣",
+			"closeToTrayDescription": "關閉視窗後應用程式繼續在系統匣中執行。",
 			"collectionSync": {
 				"bgmDescription": "新增遊戲時會嘗試讀取 BGM 收藏狀態，本地修改狀態時會同步回 BGM。",
 				"bgmTitle": "啟用 Bangumi 收藏同步",
@@ -617,6 +621,7 @@
 			},
 			"databaseBackup": {
 				"autoBackupOnExit": "退出時自動備份",
+				"autoBackupOnExitDescription": "開啟後，軟體正常退出時會自動備份資料庫；如果同時啟用自訂封面備份，可能會延長退出時間。",
 				"autoIncludeCovers": "同時備份自訂封面",
 				"autoMinIntervalHelp": "填 0 表示每次退出都備份",
 				"autoMinIntervalHours": "最小間隔（小時）",
@@ -710,6 +715,7 @@
 				"systemDescription": "管理啟動、日誌、關閉行為與計時模式。"
 			},
 			"skipCloseRemind": "不再提醒",
+			"skipCloseRemindDescription": "開啟後不再顯示關閉確認彈窗，直接執行下方選擇的預設行為。",
 			"spoilerLevel": {
 				"description": "選擇劇透等級以獲取適當的標籤內容",
 				"level0": "0 - 無劇透",