設定のインポート / エクスポート

Author: Midra429

src/components/ItemButton.tsx

@@ -26,7 +26,7 @@ export const ItemButton: React.FC<{
   const button = (
     <Button
       className={cn(
-        'min-w-24 shrink-0',
+        'min-w-32 shrink-0',
         props.button.variant === 'flat' &&
           props.button.color === 'default' &&
           'text-foreground',
@@ -44,7 +44,7 @@ export const ItemButton: React.FC<{
   )
 
   return (
-    <div className="flex flex-row items-center justify-between gap-2">
+    <div className="flex flex-row items-center justify-between gap-1">
       <ItemLabel title={props.title} description={props.description} />
 
       {props.confirm ? (

src/components/SettingsInput/ChSelector.tsx

@@ -138,7 +138,6 @@ export const Input: React.FC<Omit<Props, 'type'>> = (props) => {
     <>
       <div className="py-2">
         <ItemButton
-          key={props.settingsKey}
           title={props.label}
           description={props.description}
           button={{

src/components/SettingsInput/NgList.tsx

@@ -200,7 +200,6 @@ export const Input: React.FC<Omit<Props, 'type'>> = (props) => {
     <>
       <div className="py-2">
         <ItemButton
-          key={props.settingsKey}
           title={props.label}
           description={`${value.length}件`}
           button={{

src/constants/settings/default.ts

@@ -1,5 +1,5 @@
 import type { JikkyoChannelId } from '@midra/nco-api/types/constants'
-import type { SettingItems } from '@/types/storage'
+import type { SettingsKey, SettingItems } from '@/types/storage'
 
 import { JIKKYO_CHANNELS } from '@midra/nco-api/constants'
 import { VOD_KEYS } from '../vods'
@@ -54,3 +54,7 @@ export const SETTINGS_DEFAULT: SettingItems = {
   'settings:search:genre': 'アニメ',
   'settings:search:lengthRange': [null, null],
 }
+
+export const SETTINGS_DEFAULT_KEYS = Object.keys(
+  SETTINGS_DEFAULT
+) as SettingsKey[]

src/entrypoints/popup/MainPane/Settings/ImportExport.tsx

@@ -0,0 +1,164 @@
+import type { SettingsExportItems } from '@/types/storage'
+
+import { useEffect, useState, useMemo, useCallback } from 'react'
+import { Textarea, useDisclosure } from '@nextui-org/react'
+import {
+  DownloadIcon,
+  UploadIcon,
+  ChevronRightIcon,
+  ClipboardCopyIcon,
+} from 'lucide-react'
+
+import { settings } from '@/utils/settings/extension'
+
+import { ItemButton } from '@/components/ItemButton'
+import { Modal } from '@/components/Modal'
+
+const ImportSettings: React.FC = () => {
+  const [value, setValue] = useState('')
+
+  const { isOpen, onOpen, onOpenChange } = useDisclosure()
+
+  const isValidated = useMemo(() => {
+    try {
+      return !Array.isArray(JSON.parse(value))
+    } catch {
+      return false
+    }
+  }, [value])
+
+  const onImport = useCallback(async () => {
+    await settings.import(value)
+  }, [value])
+
+  useEffect(() => {
+    return () => setValue('')
+  }, [isOpen])
+
+  return (
+    <>
+      <ItemButton
+        title="設定をインポート"
+        button={{
+          variant: 'flat',
+          color: 'default',
+          startContent: <DownloadIcon />,
+          text: 'インポート',
+          onPress: onOpen,
+        }}
+      />
+
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        okText="インポート"
+        okIcon={<DownloadIcon className="size-4" />}
+        onOk={onImport}
+        isOkDisabled={!isValidated}
+        header={
+          <div className="flex flex-row items-center gap-0.5">
+            <span>ストレージ</span>
+            <ChevronRightIcon className="size-5 opacity-50" />
+            <span>設定をインポート</span>
+          </div>
+        }
+      >
+        <div className="size-full bg-content1 p-2">
+          <Textarea
+            classNames={{
+              base: 'size-full',
+              label: 'hidden',
+              inputWrapper: [
+                '!h-full !w-full',
+                'border-1 border-divider shadow-none',
+              ],
+              input: 'size-full font-mono text-tiny',
+            }}
+            disableAutosize
+            label="入力"
+            labelPlacement="outside"
+            value={value}
+            onValueChange={setValue}
+          />
+        </div>
+      </Modal>
+    </>
+  )
+}
+
+const ExportSettings: React.FC = () => {
+  const [values, setValues] = useState<SettingsExportItems | null>(null)
+
+  const { isOpen, onOpen, onOpenChange } = useDisclosure()
+
+  const onCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(JSON.stringify(values))
+  }, [values])
+
+  useEffect(() => {
+    if (isOpen) {
+      settings.export().then(setValues)
+    }
+
+    return () => setValues(null)
+  }, [isOpen])
+
+  return (
+    <>
+      <ItemButton
+        title="設定をエクスポート"
+        button={{
+          variant: 'flat',
+          color: 'default',
+          startContent: <UploadIcon />,
+          text: 'エクスポート',
+          onPress: onOpen,
+        }}
+      />
+
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        okText="コピー"
+        okIcon={<ClipboardCopyIcon className="size-4" />}
+        onOk={onCopy}
+        header={
+          <div className="flex flex-row items-center gap-0.5">
+            <span>ストレージ</span>
+            <ChevronRightIcon className="size-5 opacity-50" />
+            <span>設定をエクスポート</span>
+          </div>
+        }
+      >
+        <div className="size-full bg-content1 p-2">
+          <Textarea
+            classNames={{
+              base: 'size-full',
+              label: 'hidden',
+              inputWrapper: [
+                '!h-full !w-full',
+                'border-1 border-divider shadow-none',
+              ],
+              input: 'size-full font-mono text-tiny',
+            }}
+            disableAutosize
+            isReadOnly
+            label="出力"
+            labelPlacement="outside"
+            value={JSON.stringify(values, null, 2)}
+          />
+        </div>
+      </Modal>
+    </>
+  )
+}
+
+export const ImportExport: React.FC = () => {
+  return (
+    <div className="flex flex-col gap-2 py-2">
+      <ImportSettings />
+
+      <ExportSettings />
+    </div>
+  )
+}

src/entrypoints/popup/MainPane/Settings/index.tsx

@@ -26,6 +26,7 @@ import { ItemButton } from '@/components/ItemButton'
 
 import { FormsButton } from './FormsButton'
 import { StorageSizes } from './StorageSizes'
+import { ImportExport } from './ImportExport'
 
 const { name, version } = webext.runtime.getManifest()
 
@@ -115,6 +116,10 @@ const accordionItemStorage = (
 
     <Divider />
 
+    <ImportExport />
+
+    <Divider />
+
     <div className="flex flex-col gap-2 py-2">
       <ItemButton
         title="設定をリセット"

src/types/storage.d.ts

@@ -284,3 +284,6 @@ export type SettingItems = { [k in SettingsKey]: StorageItems[k] }
 
 export type StateKey = Extract<StorageKey, `state:${string}`>
 export type StateItems = { [k in StateKey]: StorageItems[k] }
+
+export type SettingsExportKey = InternalKey | SettingsKey
+export type SettingsExportItems = Partial<InternalItems & SettingItems>

src/utils/settings/index.ts

@@ -1,27 +1,38 @@
-import type { StorageItems, SettingsKey } from '@/types/storage'
+import type {
+  SettingsKey,
+  SettingItems,
+  SettingsExportKey,
+  SettingsExportItems,
+} from '@/types/storage'
 import type { StorageOnChangeCallback } from '@/utils/storage'
 
-import { SETTINGS_DEFAULT } from '@/constants/settings/default'
+import {
+  SETTINGS_DEFAULT,
+  SETTINGS_DEFAULT_KEYS,
+} from '@/constants/settings/default'
 
 import { WebExtStorage } from '@/utils/storage'
 
+const SETTINGS_EXPORT_KEYS = [
+  '_migrate_version',
+  ...SETTINGS_DEFAULT_KEYS,
+] as SettingsExportKey[]
+
 /**
  * 設定を取得
  */
 export type SettingsGetFunction = {
   /** すべての設定を取得 */
-  (): Promise<{
-    [key in SettingsKey]: StorageItems[key]
-  }>
+  (): Promise<SettingItems>
 
   /** 1つの設定を取得 */
-  <Key extends SettingsKey>(key: Key): Promise<StorageItems[Key]>
+  <Key extends SettingsKey>(key: Key): Promise<SettingItems[Key]>
 
   /** 複数の設定を取得 */
   <Keys extends SettingsKey[]>(
     ...keys: Keys
   ): Promise<{
-    [key in Keys[number]]: StorageItems[key]
+    [key in Keys[number]]: SettingItems[key]
   }>
 }
 
@@ -30,7 +41,7 @@ export type SettingsGetFunction = {
  */
 export type SettingsSetFunction = <Key extends SettingsKey>(
   key: Key,
-  value: StorageItems[Key] | null | undefined
+  value: SettingItems[Key] | null | undefined
 ) => Promise<void>
 
 /**
@@ -68,9 +79,23 @@ export type SettingsOnChangeFunction = <Key extends SettingsKey>(
  */
 export type SettingsWatch = <Key extends SettingsKey>(
   key: Key,
-  callback: (value: StorageItems[Key]) => void
+  callback: (value: SettingItems[Key]) => void
 ) => () => void
 
+/**
+ * 設定をインポート
+ */
+export type SettingsImportFunction = {
+  (values: string | SettingsExportItems): Promise<void>
+}
+
+/**
+ * 設定をエクスポート
+ */
+export type SettingsExportFunction = {
+  (): Promise<SettingsExportItems>
+}
+
 export class WebExtSettings {
   #storage: WebExtStorage
 
@@ -97,9 +122,7 @@ export class WebExtSettings {
       Object.entries(values).map(([key, val]) => {
         return [key, val ?? SETTINGS_DEFAULT[key as SettingsKey]]
       })
-    ) as {
-      [key in SettingsKey]: StorageItems[key]
-    }
+    ) as SettingItems
 
     return keys.length
       ? items
@@ -111,7 +134,7 @@ export class WebExtSettings {
 
   readonly remove: SettingsRemoveFunction = (...keys: SettingsKey[]) => {
     if (!keys.length) {
-      keys = Object.keys(SETTINGS_DEFAULT) as SettingsKey[]
+      keys = SETTINGS_DEFAULT_KEYS
     }
 
     return this.#storage.remove(...keys)
@@ -121,7 +144,7 @@ export class WebExtSettings {
     ...keys: SettingsKey[]
   ) => {
     if (!keys.length) {
-      keys = Object.keys(SETTINGS_DEFAULT) as SettingsKey[]
+      keys = SETTINGS_DEFAULT_KEYS
     }
 
     return this.#storage.getBytesInUse(...keys)
@@ -140,4 +163,30 @@ export class WebExtSettings {
 
     return () => removeListener()
   }
+
+  readonly import: SettingsImportFunction = async (values) => {
+    const object =
+      typeof values === 'string'
+        ? (JSON.parse(values) as SettingsExportItems)
+        : values
+
+    const entries = (
+      Object.entries(object) as [
+        SettingsExportKey,
+        SettingsExportItems[SettingsExportKey],
+      ][]
+    ).filter(([key]) => SETTINGS_EXPORT_KEYS.includes(key))
+
+    await Promise.all(
+      entries.map(([key, value]) => {
+        return this.#storage.set(key, value)
+      })
+    )
+  }
+
+  readonly export: SettingsExportFunction = () => {
+    return this.#storage.get(
+      ...SETTINGS_EXPORT_KEYS
+    ) as Promise<SettingsExportItems>
+  }
 }