feat(storage): support state data synchronization with storage

src/shared/models/settings.ts

@@ -0,0 +1,5 @@
+export type DisplayOptions = {
+  engAddrShown: boolean;
+  roadAddrShown: boolean;
+  streetNumAddrShown: boolean;
+};

src/shared/storage.ts

@@ -4,7 +4,9 @@ import { isExtension } from "./utils";
 
 let browser: Browser | null = null;
 if (isExtension()) {
-  browser = await import("webextension-polyfill");
+  import("webextension-polyfill").then((module) => {
+    browser = module.default;
+  });
 }
 
 type SearchResultOptions = {

src/states/address.ts

@@ -1,8 +1,22 @@
 import { atom } from "recoil";
 
+import { getRecentAddressList, setRecentAddressList } from "@/shared/storage";
 import type { AddressData } from "@/shared/models/address";
 
 export const addressListState = atom<AddressData[]>({
   key: "address-list",
   default: [],
+  effects: [({ trigger, setSelf, onSet }) => {
+    if (trigger === "get") {
+      getRecentAddressList()?.then((recentAddressList) => {
+        if (recentAddressList) {
+          setSelf(recentAddressList);
+        }
+      });
+    }
+
+    onSet((newAddressList) => {
+      setRecentAddressList(newAddressList);
+    });
+  }],
 });

src/states/settings.ts

@@ -1,8 +1,14 @@
 import { atom } from "recoil";
 
-import { getSearchResultSettings, validateSettingsData, DEFAULT_SETTINGS } from "@/shared/storage";
+import {
+  DEFAULT_SETTINGS,
+  getSearchResultOptions,
+  setSearchResultOptions,
+  validateSettingsData,
+} from "@/shared/storage";
+import type { DisplayOptions } from "@/shared/models/settings";
 
-export const addressDisplayOptionsState = atom({
+export const addressDisplayOptionsState = atom<DisplayOptions>({
   key: "display-options",
   default: {
     engAddrShown: true,
@@ -11,17 +17,25 @@ export const addressDisplayOptionsState = atom({
   },
   effects: [({ trigger, setSelf, onSet }) => {
     if (trigger === "get") {
-      getSearchResultSettings()?.then((settings) => {
-        if (!validateSettingsData(settings, DEFAULT_SETTINGS.searchResult)) {
+      getSearchResultOptions()?.then((options) => {
+        if (!options || !validateSettingsData(options, DEFAULT_SETTINGS.searchResult)) {
           return;
         }
 
         setSelf({
-          engAddrShown: settings.showEng,
-          roadAddrShown: settings.showRoad,
-          streetNumAddrShown: settings.showLegacy,
+          engAddrShown: options.showEng,
+          roadAddrShown: options.showRoad,
+          streetNumAddrShown: options.showLegacy,
         });
       });
     }
+
+    onSet((newOptions) => {
+      setSearchResultOptions({
+        showEng: newOptions.engAddrShown,
+        showRoad: newOptions.roadAddrShown,
+        showLegacy: newOptions.streetNumAddrShown,
+      });
+    });
   }],
 });