パッケージのバージョンを更新し、新しい依存関係を追加しました。ダークモードと完了済みアイテムの非表示設定を保存するためのデータベースの更新…

…も追加しました。

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tasktree-s",
   "private": true,
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -38,6 +38,7 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.22.3",
+    "upgrade": "^1.1.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

src/components/MenuSettings.tsx

@@ -20,6 +20,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import { useAppStateManagement } from '../hooks/useAppStateManagement';
 import { useTreeManagement } from '../hooks/useTreeManagement';
+import { useIndexedDb } from '../hooks/useIndexedDb';
 import { useAppStateStore } from '../store/appStateStore';
 import { useTreeStateStore } from '../store/treeStateStore';
 import { Capacitor } from '@capacitor/core';
@@ -35,6 +36,7 @@ export function MenuSettings({ handleLogout }: { handleLogout: () => void }) {
   const currentTree = useTreeStateStore((state) => state.currentTree);
 
   const { saveAppSettingsDb } = useAppStateManagement();
+  const { saveSettingsIdb } = useIndexedDb();
   const { handleDownloadAllTrees, handleFileUpload, handleDownloadTreeState } = useTreeManagement();
 
   const open = Boolean(anchorEl);
@@ -237,8 +239,9 @@ export function MenuSettings({ handleLogout }: { handleLogout: () => void }) {
               control={
                 <MaterialUISwitch
                   checked={darkMode}
-                  onChange={() => {
-                    saveAppSettingsDb(!darkMode, hideDoneItems);
+                  onChange={async () => {
+                    await saveSettingsIdb(!darkMode, hideDoneItems);
+                    await saveAppSettingsDb(!darkMode, hideDoneItems);
                     setDarkMode(!darkMode);
                   }}
                 />

src/components/ResponsiveDrawer.tsx

@@ -24,6 +24,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import ClearIcon from '@mui/icons-material/Clear';
 import { UniqueIdentifier } from '@dnd-kit/core';
 import { useAppStateManagement } from '../hooks/useAppStateManagement';
+import { useIndexedDb } from '../hooks/useIndexedDb';
 import { useAppStateStore } from '../store/appStateStore';
 import { useTreeStateStore } from '../store/treeStateStore';
 import { useTreeManagement } from '../hooks/useTreeManagement';
@@ -50,6 +51,7 @@ export function ResponsiveDrawer({ handleLogout }: { handleLogout: () => void })
   const treesList = useTreeStateStore((state) => state.treesList);
 
   const { saveAppSettingsDb } = useAppStateManagement();
+  const { saveSettingsIdb } = useIndexedDb();
   const { loadCurrentTreeData, handleCreateNewTree } = useTreeManagement();
   const { handlePrevButtonClick, handleNextButtonClick } = useSearch();
 
@@ -174,9 +176,10 @@ export function ResponsiveDrawer({ handleLogout }: { handleLogout: () => void })
               control={
                 <Switch
                   checked={hideDoneItems}
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  onChange={async (event: React.ChangeEvent<HTMLInputElement>) => {
                     setHideDoneItems(event.target.checked);
-                    saveAppSettingsDb(darkMode, event.target.checked);
+                    await saveSettingsIdb(darkMode, event.target.checked);
+                    await saveAppSettingsDb(darkMode, event.target.checked);
                   }}
                 />
               }

src/hooks/useIndexedDb.ts

@@ -129,8 +129,7 @@ export const useIndexedDb = () => {
     try {
       const appState = await idb.appstate.get(1);
       if (appState) {
-        setQuickMemoText(appState.quickMemo);
-        setTreesList(appState.treesList);
+        setIsLoadedMemoFromDb(true);
         setDarkMode(appState.settings.darkMode);
         setHideDoneItems(appState.settings.hideDoneItems);
         setLocalTimestamp(appState.timestamp);
@@ -171,36 +170,6 @@ export const useIndexedDb = () => {
     }
   };
 
-  // IndexedデータベースからDarkMode設定を読み込む ------------------------------------------------
-  const loadDarkModeFromIdb = async () => {
-    if (!uid) {
-      return;
-    }
-    try {
-      const appState = await idb.appstate.get(1);
-      if (appState) {
-        setDarkMode(appState.settings.darkMode);
-      }
-    } catch (error) {
-      handleError(error);
-    }
-  };
-
-  // Indexedデータベースから完了済みアイテムの非表示設定を読み込む ------------------------------------------------
-  const loadHideDoneItemsFromIdb = async () => {
-    if (!uid) {
-      return;
-    }
-    try {
-      const appState = await idb.appstate.get(1);
-      if (appState) {
-        setHideDoneItems(appState.settings.hideDoneItems);
-      }
-    } catch (error) {
-      handleError(error);
-    }
-  };
-
   // Indexedデータベースから指定されたツリーのデータを読み込む ------------------------------------------------
   const loadCurrentTreeDataFromIdb = async (targetTree: UniqueIdentifier) => {
     if (!uid || !targetTree) {
@@ -221,6 +190,15 @@ export const useIndexedDb = () => {
     }
   };
 
+  // Indexedデータベースに設定を保存 ------------------------------------------------
+  const saveSettingsIdb = async (darkMode: boolean, hideDoneItems: boolean) => {
+    try {
+      await idb.appstate.update(1, { settings: { darkMode, hideDoneItems } });
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
   // IndexedデータベースにItemsを保存 ------------------------------------------------
   const saveItemsIdb = async (newItems: TreeItems, targetTree: UniqueIdentifier) => {
     if (!uid || !targetTree || !newItems) {
@@ -462,9 +440,8 @@ export const useIndexedDb = () => {
     loadSettingsFromIdb,
     loadQuickMemoFromIdb,
     loadTreesListFromIdb,
-    loadDarkModeFromIdb,
-    loadHideDoneItemsFromIdb,
     loadCurrentTreeDataFromIdb,
+    saveSettingsIdb,
     saveItemsIdb,
     saveTreesListIdb,
     saveCurrentTreeNameIdb,

src/hooks/useObserve.ts

@@ -14,6 +14,8 @@ import { useDialogStore } from '../store/dialogStore';
 import { Preferences } from '@capacitor/preferences';
 
 export const useObserve = () => {
+  const darkMode = useAppStateStore((state) => state.darkMode);
+  const hideDoneItems = useAppStateStore((state) => state.hideDoneItems);
   const isOffline = useAppStateStore((state) => state.isOffline);
   const uid = useAppStateStore((state) => state.uid);
   const setLocalTimestamp = useAppStateStore((state) => state.setLocalTimestamp);
@@ -40,12 +42,13 @@ export const useObserve = () => {
     checkAndSyncDb,
     loadSettingsFromIdb,
     loadTreesListFromIdb,
+    saveSettingsIdb,
     saveItemsIdb,
     saveTreesListIdb,
     saveQuickMemoIdb,
     copyTreeDataToIdbFromDb
   } = useIndexedDb();
-  const { loadQuickMemoFromDb, saveQuickMemoDb } = useAppStateManagement();
+  const { loadSettingsFromDb, loadQuickMemoFromDb, saveQuickMemoDb } = useAppStateManagement();
   const { handleError } = useError();
   const isConnected = useFirebaseConnection();
 
@@ -96,6 +99,8 @@ export const useObserve = () => {
         const newTreesList = await loadTreesListFromDb(uid);
         setTreesList(newTreesList);
         await saveTreesListIdb(newTreesList);
+        await loadSettingsFromDb();
+        await saveSettingsIdb(darkMode, hideDoneItems);
         await loadQuickMemoFromDb();
         // treesListを反復して、タイムスタンプをチェックし、最新のツリーをコピー
         const treeIds = newTreesList.map((tree) => tree.id);