From 23007beaa7f22bfb5fd82e1de6220fd7ebb8b6db Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 22 Jun 2025 14:10:51 +0900
Subject: [PATCH 01/64] Add: Enables to set parent folder to the folder.

---
 public/_locales/en/messages.json              |  9 +++
 public/_locales/ja/messages.json              |  9 +++
 src/components/option/SortableItem.tsx        |  2 +-
 src/components/option/editor/CommandList.tsx  |  1 +
 .../option/editor/FolderEditDialog.tsx        | 55 +++++++++++++++++++
 src/types.ts                                  |  1 +
 6 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 328a1282..e2387c3d 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -302,6 +302,15 @@
   "Option_parentFolderId": {
     "message": "Folder"
   },
+  "Option_parentFolder": {
+    "message": "Parent Folder"
+  },
+  "Option_parentFolder_desc": {
+    "message": "Select the parent folder"
+  },
+  "Option_rootFolder": {
+    "message": "Root (no parent)"
+  },
   "Option_copyOption": {
     "message": "Copy format"
   },
diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
index 863e323b..d1981f3e 100644
--- a/public/_locales/ja/messages.json
+++ b/public/_locales/ja/messages.json
@@ -302,6 +302,15 @@
   "Option_parentFolderId": {
     "message": "フォルダ"
   },
+  "Option_parentFolder": {
+    "message": "親フォルダ"
+  },
+  "Option_parentFolder_desc": {
+    "message": "親フォルダを選択してください"
+  },
+  "Option_rootFolder": {
+    "message": "ルート（親なし）"
+  },
   "Option_copyOption": {
     "message": "コピーフォーマット"
   },
diff --git a/src/components/option/SortableItem.tsx b/src/components/option/SortableItem.tsx
index f7bdee14..ed3a4333 100644
--- a/src/components/option/SortableItem.tsx
+++ b/src/components/option/SortableItem.tsx
@@ -34,6 +34,7 @@ export function SortableItem(props: SrotabelItemProps) {
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
+    marginLeft: `${props.level * 32}px`,
   }
 
   return (
@@ -46,7 +47,6 @@ export function SortableItem(props: SrotabelItemProps) {
         props.index === activeIndex
           ? 'border-y bg-gray-100/80 shadow-lg relative z-10'
           : '',
-        props.level > 0 && 'ml-8',
         props.className,
       )}
       {...attributes}
diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index 638db0a1..aee740ae 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -532,6 +532,7 @@ export const CommandList = ({ control }: CommandListProps) => {
           onOpenChange={setFolderDialogOpen}
           onSubmit={(folder) => commandUpsert(folder)}
           folder={editDataRef.current as CommandFolder}
+          folders={folderArray.fields}
         />
       </div>
       <ul ref={commandsRef}>
diff --git a/src/components/option/editor/FolderEditDialog.tsx b/src/components/option/editor/FolderEditDialog.tsx
index 6bb85453..15ac3fd7 100644
--- a/src/components/option/editor/FolderEditDialog.tsx
+++ b/src/components/option/editor/FolderEditDialog.tsx
@@ -18,8 +18,10 @@ import { Button } from '@/components/ui/button'
 import { InputField } from '@/components/option/field/InputField'
 import { IconField } from '@/components/option/field/IconField'
 import { SwitchField } from '@/components/option/field/SwitchField'
+import { SelectField } from '@/components/option/field/SelectField'
 import { isEmpty } from '@/lib/utils'
 import { t as _t } from '@/services/i18n'
+import { ROOT_FOLDER } from '@/const'
 const t = (key: string, p?: string[]) => _t(`Option_${key}`, p)
 import type { CommandFolder } from '@/types'
 
@@ -30,6 +32,7 @@ export const folderSchema = z
     iconUrl: z.string().optional(),
     iconSvg: z.string().optional(),
     onlyIcon: z.boolean().optional(),
+    parentFolderId: z.string().optional(),
   })
   .refine((data) => !isEmpty(data.iconUrl) || !isEmpty(data.iconSvg), {
     path: ['iconSvg'],
@@ -41,6 +44,7 @@ type FolderEditDialog = {
   onOpenChange: (open: boolean) => void
   onSubmit: (folder: CommandFolder) => void
   folder?: CommandFolder
+  folders: CommandFolder[]
 }
 
 export const FolderEditDialog = ({
@@ -48,6 +52,7 @@ export const FolderEditDialog = ({
   onOpenChange,
   onSubmit,
   folder,
+  folders,
 }: FolderEditDialog) => {
   const DefaultValue = {
     id: '',
@@ -55,6 +60,29 @@ export const FolderEditDialog = ({
     iconUrl:
       'https://cdn4.iconfinder.com/data/icons/basic-ui-2-line/32/folder-archive-document-archives-fold-1024.png',
     onlyIcon: true,
+    parentFolderId: ROOT_FOLDER,
+  }
+
+  // Get all descendant folder IDs to prevent circular references
+  const getDescendantIds = (
+    folderId: string,
+    allFolders: CommandFolder[],
+    visited: Set<string> = new Set(),
+  ): string[] => {
+    if (visited.has(folderId)) {
+      return [] // Prevent infinite recursion from circular references
+    }
+
+    visited.add(folderId)
+    const descendants: string[] = []
+    const children = allFolders.filter((f) => f.parentFolderId === folderId)
+
+    for (const child of children) {
+      descendants.push(child.id)
+      descendants.push(...getDescendantIds(child.id, allFolders, visited))
+    }
+
+    return descendants
   }
 
   const form = useForm<z.infer<typeof folderSchema>>({
@@ -100,6 +128,33 @@ export const FolderEditDialog = ({
                 placeholder={t('icon_placeholder')}
                 description={t('icon_desc')}
               />
+              <SelectField
+                control={form.control}
+                name="parentFolderId"
+                formLabel={t('parentFolder')}
+                description={t('parentFolder_desc')}
+                options={[
+                  {
+                    value: ROOT_FOLDER,
+                    name: t('rootFolder'),
+                  },
+                  ...folders
+                    .filter((f) => {
+                      if (!folder) return true
+                      const excludedIds = [
+                        folder.id,
+                        ...getDescendantIds(folder.id, folders),
+                      ]
+                      return !excludedIds.includes(f.id)
+                    })
+                    .map((f) => ({
+                      value: f.id,
+                      name: f.title,
+                      iconUrl: f.iconUrl,
+                      iconSvg: f.iconSvg,
+                    })),
+                ]}
+              />
               <SwitchField
                 control={form.control}
                 name="onlyIcon"
diff --git a/src/types.ts b/src/types.ts
index 72bca7c6..5ba653cd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -97,6 +97,7 @@ export type CommandFolder = {
   iconUrl?: string
   iconSvg?: string
   onlyIcon?: boolean
+  parentFolderId?: string
 }
 
 export type CommandVariable = {

From 55956b510a3a923250efcdc07b7dbfd90de2d3f3 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 22 Jun 2025 17:01:04 +0900
Subject: [PATCH 02/64] Update: Adjusted the logic for determining whether a
 command list can be dropped or not.

---
 src/components/option/editor/CommandList.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index aee740ae..d42de4a6 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -120,6 +120,7 @@ type FlattenNode = {
   id: string
   index: number
   content: SelectionCommand | CommandFolder
+  firstChild?: boolean
   lastChild?: boolean
 }
 
@@ -141,6 +142,9 @@ function _toFlatten(
         index: 0,
       })
       _toFlatten(node.children ?? [], flatten)
+      if (node.children) {
+        flatten[flatten.length - node.children.length].firstChild = true
+      }
       flatten[flatten.length - 1].lastChild = true
     }
   }
@@ -170,11 +174,11 @@ function isDroppable(selfNode: FlattenNode, activeNode?: FlattenNode): boolean {
 
   const isMoveDown = activeNode.index < selfNode.index
   if (isMoveDown) {
-    if (isFolder(selfNode.content)) return false
-    if (hasFolder(selfNode.content) && !selfNode.lastChild) return false
+    if (isInFolder(selfNode.content) && !selfNode.lastChild) return false
   } else {
-    if (isFolder(selfNode.content)) return true
-    if (hasFolder(selfNode.content)) return false
+    console.log('modeUp', selfNode)
+    // if (isFolder(selfNode.content)) return true
+    if (isInFolder(selfNode.content) && !selfNode.firstChild) return false
   }
 
   return true
@@ -207,9 +211,8 @@ function isFolder(
   return !('openMode' in content)
 }
 
-function hasFolder(content: Command | CommandFolder | undefined): boolean {
+function isInFolder(content: Command | CommandFolder | undefined): boolean {
   if (content == null) return false
-  if (isFolder(content)) return false
   const folderId = content.parentFolderId
   if (!isEmpty(folderId) && folderId != ROOT_FOLDER) {
     return true
@@ -224,7 +227,7 @@ export function removeUnstoredParam(data: Command) {
 
 function calcLevel(node: FlattenNode): number {
   if (isCommand(node.content)) {
-    if (hasFolder(node.content)) {
+    if (isInFolder(node.content)) {
       return 1
     } else {
       return 0
@@ -556,7 +559,7 @@ export const CommandList = ({ control }: CommandListProps) => {
                 className={cn(
                   isFolder(activeNode?.content) &&
                     isCommand(field.content) &&
-                    hasFolder(field.content) &&
+                    isInFolder(field.content) &&
                     'opacity-50 bg-gray-100',
                 )}
               >

From 032d2ce4b177cd6774a10a0e5bb0b8963bd0e39d Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 22 Jun 2025 17:30:20 +0900
Subject: [PATCH 03/64] Update: The Parent folder can now be set from the Edit
 Folder dialog.

---
 src/components/option/editor/CommandList.tsx | 199 ++++++++++++++-----
 1 file changed, 144 insertions(+), 55 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index d42de4a6..cfecba3d 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -42,7 +42,7 @@ import { SCREEN } from '@/const'
 import { t as _t } from '@/services/i18n'
 const t = (key: string, p?: string[]) => _t(`Option_${key}`, p)
 import { OPEN_MODE, ROOT_FOLDER, COMMAND_MAX, HUB_URL } from '@/const'
-import { cn, e2a, isEmpty, unique } from '@/lib/utils'
+import { cn, e2a, isEmpty } from '@/lib/utils'
 import type {
   Command,
   CommandFolder,
@@ -72,47 +72,85 @@ export function toCommandTree(
   commands: Command[],
   folders: CommandFolder[],
 ): CommandTreeNode[] {
-  let tree = commands.reduce((acc, command) => {
-    if (command.parentFolderId && command.parentFolderId !== ROOT_FOLDER) {
-      const folder = folders.find((f) => f.id === command.parentFolderId)
-      if (folder) {
-        const parent = acc.find((node) => node.content.id === folder.id)
-        if (parent) {
-          if (parent.children == null) parent.children = []
-          parent.children.push({
-            type: 'command',
-            content: command,
-          })
-        } else {
-          acc.push({
-            type: 'folder',
-            content: folder,
-            children: [
-              {
-                type: 'command',
-                content: command,
-              },
-            ],
-          })
+  // フォルダーノードを作成する関数
+  const createFolderNode = (folder: CommandFolder): CommandTreeNode => ({
+    type: 'folder',
+    content: folder,
+    children: [],
+  })
+
+  // ツリー内でノードを検索する関数
+  const findNodeInTree = (
+    tree: CommandTreeNode[],
+    id: string,
+  ): CommandTreeNode | null => {
+    for (const node of tree) {
+      if (node.content.id === id) {
+        return node
+      }
+      if (node.children) {
+        const found = findNodeInTree(node.children, id)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  // ノードをツリーに追加する関数
+  const addNodeToTree = (
+    tree: CommandTreeNode[],
+    node: CommandTreeNode,
+    parentId?: string,
+  ) => {
+    if (parentId && parentId !== ROOT_FOLDER) {
+      const parent = findNodeInTree(tree, parentId)
+      if (parent) {
+        if (!parent.children) parent.children = []
+        parent.children.push(node)
+      } else {
+        // 親フォルダーがまだない場合は、先に親フォルダーを追加
+        const parentFolder = folders.find((f) => f.id === parentId)
+        if (parentFolder && !addedFolders.has(parentFolder.id)) {
+          const parentNode = createFolderNode(parentFolder)
+          addedFolders.add(parentFolder.id) // 重複防止のため追加
+          addNodeToTree(tree, parentNode, parentFolder.parentFolderId)
+          addNodeToTree(tree, node, parentId) // 再帰的に追加
+        } else if (parentFolder && addedFolders.has(parentFolder.id)) {
+          // 既に追加済みの場合は、ツリーから再検索
+          const existingParent = findNodeInTree(tree, parentId)
+          if (existingParent) {
+            if (!existingParent.children) existingParent.children = []
+            existingParent.children.push(node)
+          }
         }
       }
     } else {
-      acc.push({
-        type: 'command',
-        content: command,
-      })
+      // ルートレベルに追加
+      tree.push(node)
     }
-    return acc
-  }, [] as CommandTreeNode[])
-  const existsFolders = unique(commands.map((c) => c.parentFolderId))
-  const remainingFolders = folders.filter((f) => !existsFolders.includes(f.id))
-  tree = tree.concat(
-    remainingFolders.map((folder) => ({
-      type: 'folder',
-      content: folder,
-      children: [],
-    })),
-  )
+  }
+
+  let tree: CommandTreeNode[] = []
+  const addedFolders = new Set<string>()
+
+  // まずフォルダーを階層的に追加
+  folders.forEach((folder) => {
+    if (!addedFolders.has(folder.id)) {
+      const folderNode = createFolderNode(folder)
+      addNodeToTree(tree, folderNode, folder.parentFolderId)
+      addedFolders.add(folder.id)
+    }
+  })
+
+  // 次にコマンドを適切な位置に追加
+  commands.forEach((command) => {
+    const commandNode: CommandTreeNode = {
+      type: 'command',
+      content: command,
+    }
+    addNodeToTree(tree, commandNode, command.parentFolderId)
+  })
+
   return tree
 }
 
@@ -141,11 +179,21 @@ function _toFlatten(
         content: node.content,
         index: 0,
       })
-      _toFlatten(node.children ?? [], flatten)
-      if (node.children) {
-        flatten[flatten.length - node.children.length].firstChild = true
+
+      if (node.children && node.children.length > 0) {
+        const beforeChildrenLength = flatten.length
+        _toFlatten(node.children, flatten)
+        const afterChildrenLength = flatten.length
+
+        // 最初の子要素にfirstChildマークを設定
+        if (beforeChildrenLength < afterChildrenLength) {
+          flatten[beforeChildrenLength].firstChild = true
+        }
+        // 最後の子要素にlastChildマークを設定
+        if (afterChildrenLength > beforeChildrenLength) {
+          flatten[afterChildrenLength - 1].lastChild = true
+        }
       }
-      flatten[flatten.length - 1].lastChild = true
     }
   }
   return flatten
@@ -168,19 +216,48 @@ function commandsFilter(
   })
 }
 
-function isDroppable(selfNode: FlattenNode, activeNode?: FlattenNode): boolean {
+function isCircularReference(
+  draggedFolderId: string,
+  targetFolderId: string,
+  folders: CommandFolder[],
+): boolean {
+  // draggedFolderIdがtargetFolderIdの子孫フォルダーかチェック
+  const findDescendants = (folderId: string): string[] => {
+    const children = folders.filter((f) => f.parentFolderId === folderId)
+    let descendants = children.map((f) => f.id)
+    for (const child of children) {
+      descendants = descendants.concat(findDescendants(child.id))
+    }
+    return descendants
+  }
+
+  const descendants = findDescendants(draggedFolderId)
+  return descendants.includes(targetFolderId)
+}
+
+function isDroppable(
+  selfNode: FlattenNode,
+  activeNode?: FlattenNode,
+  folders: CommandFolder[] = [],
+): boolean {
   if (!activeNode) return true
   if (isCommand(activeNode.content)) return true
 
+  // フォルダーの場合は循環参照チェック
+  if (isFolder(selfNode.content)) {
+    return !isCircularReference(
+      activeNode.content.id,
+      selfNode.content.id,
+      folders,
+    )
+  }
+
   const isMoveDown = activeNode.index < selfNode.index
   if (isMoveDown) {
     if (isInFolder(selfNode.content) && !selfNode.lastChild) return false
   } else {
-    console.log('modeUp', selfNode)
-    // if (isFolder(selfNode.content)) return true
     if (isInFolder(selfNode.content) && !selfNode.firstChild) return false
   }
-
   return true
 }
 
@@ -225,16 +302,28 @@ export function removeUnstoredParam(data: Command) {
   return data
 }
 
-function calcLevel(node: FlattenNode): number {
-  if (isCommand(node.content)) {
-    if (isInFolder(node.content)) {
-      return 1
-    } else {
+function calcLevel(node: FlattenNode, folders: CommandFolder[]): number {
+  // 再帰的に親フォルダーをたどってレベルを計算
+  const calculateDepth = (parentFolderId?: string): number => {
+    if (!parentFolderId || parentFolderId === ROOT_FOLDER) {
       return 0
     }
-  } else {
-    return 0
+
+    const parentFolder = folders.find((f) => f.id === parentFolderId)
+    if (!parentFolder) {
+      return 0
+    }
+
+    return 1 + calculateDepth(parentFolder.parentFolderId)
   }
+
+  if (isCommand(node.content)) {
+    return calculateDepth(node.content.parentFolderId)
+  } else if (isFolder(node.content)) {
+    return calculateDepth(node.content.parentFolderId)
+  }
+
+  return 0
 }
 
 type CommandListProps = {
@@ -554,8 +643,8 @@ export const CommandList = ({ control }: CommandListProps) => {
                 key={field.id}
                 id={field.id}
                 index={index}
-                level={calcLevel(field)}
-                droppable={isDroppable(field, activeNode)}
+                level={calcLevel(field, folderArray.fields)}
+                droppable={isDroppable(field, activeNode, folderArray.fields)}
                 className={cn(
                   isFolder(activeNode?.content) &&
                     isCommand(field.content) &&

From 734962a78b020d3f42b85c748b419be237e04b34 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 22 Jun 2025 17:42:32 +0900
Subject: [PATCH 04/64] Update: Improved display during folder dragging.

---
 src/components/option/editor/CommandList.tsx | 35 ++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index cfecba3d..f49f0cb8 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -207,10 +207,41 @@ export function toFlatten(tree: CommandTreeNode[]): FlattenNode[] {
 function commandsFilter(
   nodes: FlattenNode[],
   draggingId?: string | null,
+  folders: CommandFolder[] = [],
 ): FlattenNode[] {
+  if (!draggingId) return nodes
+
+  // ドラッグ中のフォルダーの子孫フォルダーIDを再帰的に取得
+  const getDescendantFolderIds = (folderId: string): string[] => {
+    const children = folders.filter((f) => f.parentFolderId === folderId)
+    let descendants = children.map((f) => f.id)
+    for (const child of children) {
+      descendants = descendants.concat(getDescendantFolderIds(child.id))
+    }
+    return descendants
+  }
+
+  const descendantFolderIds = getDescendantFolderIds(draggingId)
+  const hiddenFolderIds = new Set([draggingId, ...descendantFolderIds])
+
   return nodes.filter((node) => {
+    // コマンドの場合：親フォルダーがドラッグ中のフォルダーまたはその子孫フォルダーなら非表示
     if (isCommand(node.content)) {
-      if (node.content.parentFolderId === draggingId) return false
+      if (
+        node.content.parentFolderId &&
+        hiddenFolderIds.has(node.content.parentFolderId)
+      ) {
+        return false
+      }
+    }
+    // フォルダーの場合：親フォルダーがドラッグ中のフォルダーまたはその子孫フォルダーなら非表示
+    else if (isFolder(node.content)) {
+      if (
+        node.content.parentFolderId &&
+        hiddenFolderIds.has(node.content.parentFolderId)
+      ) {
+        return false
+      }
     }
     return true
   })
@@ -360,7 +391,7 @@ export const CommandList = ({ control }: CommandListProps) => {
 
   const commandTree = toCommandTree(commandArray.fields, folderArray.fields)
   let flatten = toFlatten(commandTree)
-  flatten = commandsFilter(flatten, draggingId)
+  flatten = commandsFilter(flatten, draggingId, folderArray.fields)
   const activeNode = flatten.find((f) => f.id === draggingId)
 
   const setCommandDialogOpen = (open: boolean) => {

From 984f8cf4c2486961177d7c1729055dfd28d1d67b Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 22 Jun 2025 20:25:48 +0900
Subject: [PATCH 05/64] Update: Change the order of CommandList to the order of
 priority.

---
 src/components/option/editor/CommandList.tsx | 83 +++++++++++++-------
 1 file changed, 55 insertions(+), 28 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index f49f0cb8..81e3c7eb 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -133,24 +133,35 @@ export function toCommandTree(
   let tree: CommandTreeNode[] = []
   const addedFolders = new Set<string>()
 
-  // まずフォルダーを階層的に追加
-  folders.forEach((folder) => {
-    if (!addedFolders.has(folder.id)) {
-      const folderNode = createFolderNode(folder)
-      addNodeToTree(tree, folderNode, folder.parentFolderId)
-      addedFolders.add(folder.id)
-    }
-  })
-
-  // 次にコマンドを適切な位置に追加
+  // commandArrayの順序に従って、コマンドとフォルダーを順番に処理
   commands.forEach((command) => {
     const commandNode: CommandTreeNode = {
       type: 'command',
       content: command,
     }
+    
+    // コマンドを追加する前に、必要な親フォルダーが存在するか確認し、なければ追加
+    if (command.parentFolderId && command.parentFolderId !== ROOT_FOLDER) {
+      const parentFolder = folders.find((f) => f.id === command.parentFolderId)
+      if (parentFolder && !addedFolders.has(parentFolder.id)) {
+        const folderNode = createFolderNode(parentFolder)
+        addNodeToTree(tree, folderNode, parentFolder.parentFolderId)
+        addedFolders.add(parentFolder.id)
+      }
+    }
+    
     addNodeToTree(tree, commandNode, command.parentFolderId)
   })
 
+  // 残りのフォルダー（コマンドで参照されていないフォルダー）を追加
+  folders.forEach((folder) => {
+    if (!addedFolders.has(folder.id)) {
+      const folderNode = createFolderNode(folder)
+      addNodeToTree(tree, folderNode, folder.parentFolderId)
+      addedFolders.add(folder.id)
+    }
+  })
+
   return tree
 }
 
@@ -272,6 +283,7 @@ function isDroppable(
   folders: CommandFolder[] = [],
 ): boolean {
   if (!activeNode) return true
+
   if (isCommand(activeNode.content)) return true
 
   // フォルダーの場合は循環参照チェック
@@ -282,13 +294,6 @@ function isDroppable(
       folders,
     )
   }
-
-  const isMoveDown = activeNode.index < selfNode.index
-  if (isMoveDown) {
-    if (isInFolder(selfNode.content) && !selfNode.lastChild) return false
-  } else {
-    if (isInFolder(selfNode.content) && !selfNode.firstChild) return false
-  }
   return true
 }
 
@@ -555,18 +560,40 @@ export const CommandList = ({ control }: CommandListProps) => {
         commandArray.move(srcIdx, distIdx)
       } else {
         // command to folder
-        let distIdx = commandArray.fields.findIndex(
-          (f) => f.parentFolderId === distId,
-        )
-        if (distIdx === -1) {
-          // Empty folders always exist at the end of the list, so move to the end of the dommands.
-          distIdx = commandArray.fields.length
+        if (isMoveDown) {
+          // フォルダーの後にドロップ → フォルダー内に移動
+          let distIdx = commandArray.fields.findIndex(
+            (f) => f.parentFolderId === distId,
+          )
+          if (distIdx === -1) {
+            // Empty folders always exist at the end of the list, so move to the end of the commands.
+            distIdx = commandArray.fields.length
+          }
+          commandArray.update(srcIdx, {
+            ...srcNode.content,
+            parentFolderId: distId,
+          } as CommandSchemaType)
+          commandArray.move(srcIdx, distIdx - 1)
+        } else {
+          // フォルダーの前にドロップ → フォルダーと同じレベルの前に挿入
+          // フラット化されたリストでのフォルダーの位置を取得
+          const targetFolderIndexInFlattened = flatten.findIndex(
+            (f) => f.id === distId,
+          )
+          // そのフォルダーより前にあるコマンドの数を数える
+          let insertPosition = 0
+          for (let i = 0; i < targetFolderIndexInFlattened; i++) {
+            if (isCommand(flatten[i].content)) {
+              insertPosition++
+            }
+          }
+
+          commandArray.update(srcIdx, {
+            ...srcNode.content,
+            parentFolderId: distNode.content.parentFolderId,
+          } as CommandSchemaType)
+          commandArray.move(srcIdx, insertPosition)
         }
-        commandArray.update(srcIdx, {
-          ...srcNode.content,
-          parentFolderId: isMoveDown ? distId : undefined,
-        } as CommandSchemaType)
-        commandArray.move(srcIdx, isMoveDown ? distIdx - 1 : distIdx)
       }
     } else {
       const srcIdxs = commandArray.fields

From 39d25d821cb48308805a50d8f17ff56195016e74 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 22 Jun 2025 20:32:32 +0900
Subject: [PATCH 06/64] Refactoring.

---
 src/components/option/editor/CommandList.tsx | 444 +++++++++++--------
 1 file changed, 263 insertions(+), 181 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index 81e3c7eb..4b7c37ee 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -60,7 +60,7 @@ const foldersSchema = z.object({
 
 type CommandSchemaType = z.infer<typeof commandSchema>
 type CommandsSchemaType = z.infer<typeof commandsSchema>
-type FoldersSchemType = z.infer<typeof foldersSchema>
+type FoldersSchemaType = z.infer<typeof foldersSchema>
 
 type CommandTreeNode = {
   type: 'command' | 'folder'
@@ -68,35 +68,57 @@ type CommandTreeNode = {
   children?: CommandTreeNode[]
 }
 
-export function toCommandTree(
-  commands: Command[],
-  folders: CommandFolder[],
-): CommandTreeNode[] {
-  // フォルダーノードを作成する関数
-  const createFolderNode = (folder: CommandFolder): CommandTreeNode => ({
-    type: 'folder',
-    content: folder,
-    children: [],
-  })
+// フォルダーノードを作成する関数
+const createFolderNode = (folder: CommandFolder): CommandTreeNode => ({
+  type: 'folder',
+  content: folder,
+  children: [],
+})
 
-  // ツリー内でノードを検索する関数
-  const findNodeInTree = (
-    tree: CommandTreeNode[],
-    id: string,
-  ): CommandTreeNode | null => {
-    for (const node of tree) {
-      if (node.content.id === id) {
-        return node
-      }
-      if (node.children) {
-        const found = findNodeInTree(node.children, id)
-        if (found) return found
-      }
+// ツリー内でノードを検索する関数
+const findNodeInTree = (
+  tree: CommandTreeNode[],
+  id: string,
+): CommandTreeNode | null => {
+  for (const node of tree) {
+    if (node.content.id === id) {
+      return node
+    }
+    if (node.children) {
+      const found = findNodeInTree(node.children, id)
+      if (found) return found
     }
-    return null
   }
+  return null
+}
 
-  // ノードをツリーに追加する関数
+// 親フォルダーが必要な場合に追加する関数
+const addParentFolderIfNeeded = (
+  tree: CommandTreeNode[],
+  parentFolderId: string,
+  folders: CommandFolder[],
+  processedFolders: Set<string>,
+  addNodeToTree: (
+    tree: CommandTreeNode[],
+    node: CommandTreeNode,
+    parentId?: string,
+  ) => void,
+) => {
+  if (parentFolderId === ROOT_FOLDER) return
+
+  const parentFolder = folders.find((f) => f.id === parentFolderId)
+  if (parentFolder && !processedFolders.has(parentFolder.id)) {
+    const folderNode = createFolderNode(parentFolder)
+    addNodeToTree(tree, folderNode, parentFolder.parentFolderId)
+    processedFolders.add(parentFolder.id)
+  }
+}
+
+// ノードをツリーに追加する関数を作成するファクトリー
+const createAddNodeToTreeFunction = (
+  folders: CommandFolder[],
+  processedFolders: Set<string>,
+) => {
   const addNodeToTree = (
     tree: CommandTreeNode[],
     node: CommandTreeNode,
@@ -109,58 +131,91 @@ export function toCommandTree(
         parent.children.push(node)
       } else {
         // 親フォルダーがまだない場合は、先に親フォルダーを追加
-        const parentFolder = folders.find((f) => f.id === parentId)
-        if (parentFolder && !addedFolders.has(parentFolder.id)) {
-          const parentNode = createFolderNode(parentFolder)
-          addedFolders.add(parentFolder.id) // 重複防止のため追加
-          addNodeToTree(tree, parentNode, parentFolder.parentFolderId)
-          addNodeToTree(tree, node, parentId) // 再帰的に追加
-        } else if (parentFolder && addedFolders.has(parentFolder.id)) {
-          // 既に追加済みの場合は、ツリーから再検索
-          const existingParent = findNodeInTree(tree, parentId)
-          if (existingParent) {
-            if (!existingParent.children) existingParent.children = []
-            existingParent.children.push(node)
-          }
-        }
+        addParentFolderIfNeeded(
+          tree,
+          parentId,
+          folders,
+          processedFolders,
+          addNodeToTree,
+        )
+        // 再帰的に追加
+        addNodeToTree(tree, node, parentId)
       }
     } else {
       // ルートレベルに追加
       tree.push(node)
     }
   }
+  return addNodeToTree
+}
 
-  let tree: CommandTreeNode[] = []
-  const addedFolders = new Set<string>()
-
-  // commandArrayの順序に従って、コマンドとフォルダーを順番に処理
+// コマンドをツリーに追加する処理
+const addCommandsToTree = (
+  tree: CommandTreeNode[],
+  commands: Command[],
+  folders: CommandFolder[],
+  processedFolders: Set<string>,
+  addNodeToTree: (
+    tree: CommandTreeNode[],
+    node: CommandTreeNode,
+    parentId?: string,
+  ) => void,
+) => {
   commands.forEach((command) => {
     const commandNode: CommandTreeNode = {
       type: 'command',
       content: command,
     }
-    
+
     // コマンドを追加する前に、必要な親フォルダーが存在するか確認し、なければ追加
     if (command.parentFolderId && command.parentFolderId !== ROOT_FOLDER) {
-      const parentFolder = folders.find((f) => f.id === command.parentFolderId)
-      if (parentFolder && !addedFolders.has(parentFolder.id)) {
-        const folderNode = createFolderNode(parentFolder)
-        addNodeToTree(tree, folderNode, parentFolder.parentFolderId)
-        addedFolders.add(parentFolder.id)
-      }
+      addParentFolderIfNeeded(
+        tree,
+        command.parentFolderId,
+        folders,
+        processedFolders,
+        addNodeToTree,
+      )
     }
-    
+
     addNodeToTree(tree, commandNode, command.parentFolderId)
   })
+}
 
-  // 残りのフォルダー（コマンドで参照されていないフォルダー）を追加
+// 残りのフォルダーをツリーに追加する処理
+const addRemainingFoldersToTree = (
+  tree: CommandTreeNode[],
+  folders: CommandFolder[],
+  processedFolders: Set<string>,
+  addNodeToTree: (
+    tree: CommandTreeNode[],
+    node: CommandTreeNode,
+    parentId?: string,
+  ) => void,
+) => {
   folders.forEach((folder) => {
-    if (!addedFolders.has(folder.id)) {
+    if (!processedFolders.has(folder.id)) {
       const folderNode = createFolderNode(folder)
       addNodeToTree(tree, folderNode, folder.parentFolderId)
-      addedFolders.add(folder.id)
+      processedFolders.add(folder.id)
     }
   })
+}
+
+export function toCommandTree(
+  commands: Command[],
+  folders: CommandFolder[],
+): CommandTreeNode[] {
+  const tree: CommandTreeNode[] = []
+  const processedFolders = new Set<string>()
+
+  const addNodeToTree = createAddNodeToTreeFunction(folders, processedFolders)
+
+  // commandArrayの順序に従って、コマンドとフォルダーを順番に処理
+  addCommandsToTree(tree, commands, folders, processedFolders, addNodeToTree)
+
+  // 残りのフォルダー（コマンドで参照されていないフォルダー）を追加
+  addRemainingFoldersToTree(tree, folders, processedFolders, addNodeToTree)
 
   return tree
 }
@@ -215,6 +270,39 @@ export function toFlatten(tree: CommandTreeNode[]): FlattenNode[] {
   return flatten
 }
 
+// ドラッグ中のフォルダーの子孫フォルダーIDを再帰的に取得
+const getDescendantFolderIds = (
+  folderId: string,
+  folders: CommandFolder[],
+): string[] => {
+  const children = folders.filter((f) => f.parentFolderId === folderId)
+  let descendants = children.map((f) => f.id)
+  for (const child of children) {
+    descendants = descendants.concat(getDescendantFolderIds(child.id, folders))
+  }
+  return descendants
+}
+
+// ノードがドラッグ中のフォルダーの子ノードかどうかを判定
+const isChildOfDraggedFolder = (
+  node: FlattenNode,
+  hiddenFolderIds: Set<string>,
+): boolean => {
+  if (isCommand(node.content)) {
+    return !!(
+      node.content.parentFolderId &&
+      hiddenFolderIds.has(node.content.parentFolderId)
+    )
+  }
+  if (isFolder(node.content)) {
+    return !!(
+      node.content.parentFolderId &&
+      hiddenFolderIds.has(node.content.parentFolderId)
+    )
+  }
+  return false
+}
+
 function commandsFilter(
   nodes: FlattenNode[],
   draggingId?: string | null,
@@ -222,40 +310,10 @@ function commandsFilter(
 ): FlattenNode[] {
   if (!draggingId) return nodes
 
-  // ドラッグ中のフォルダーの子孫フォルダーIDを再帰的に取得
-  const getDescendantFolderIds = (folderId: string): string[] => {
-    const children = folders.filter((f) => f.parentFolderId === folderId)
-    let descendants = children.map((f) => f.id)
-    for (const child of children) {
-      descendants = descendants.concat(getDescendantFolderIds(child.id))
-    }
-    return descendants
-  }
-
-  const descendantFolderIds = getDescendantFolderIds(draggingId)
+  const descendantFolderIds = getDescendantFolderIds(draggingId, folders)
   const hiddenFolderIds = new Set([draggingId, ...descendantFolderIds])
 
-  return nodes.filter((node) => {
-    // コマンドの場合：親フォルダーがドラッグ中のフォルダーまたはその子孫フォルダーなら非表示
-    if (isCommand(node.content)) {
-      if (
-        node.content.parentFolderId &&
-        hiddenFolderIds.has(node.content.parentFolderId)
-      ) {
-        return false
-      }
-    }
-    // フォルダーの場合：親フォルダーがドラッグ中のフォルダーまたはその子孫フォルダーなら非表示
-    else if (isFolder(node.content)) {
-      if (
-        node.content.parentFolderId &&
-        hiddenFolderIds.has(node.content.parentFolderId)
-      ) {
-        return false
-      }
-    }
-    return true
-  })
+  return nodes.filter((node) => !isChildOfDraggedFolder(node, hiddenFolderIds))
 }
 
 function isCircularReference(
@@ -264,16 +322,7 @@ function isCircularReference(
   folders: CommandFolder[],
 ): boolean {
   // draggedFolderIdがtargetFolderIdの子孫フォルダーかチェック
-  const findDescendants = (folderId: string): string[] => {
-    const children = folders.filter((f) => f.parentFolderId === folderId)
-    let descendants = children.map((f) => f.id)
-    for (const child of children) {
-      descendants = descendants.concat(findDescendants(child.id))
-    }
-    return descendants
-  }
-
-  const descendants = findDescendants(draggedFolderId)
+  const descendants = getDescendantFolderIds(draggedFolderId, folders)
   return descendants.includes(targetFolderId)
 }
 
@@ -284,10 +333,11 @@ function isDroppable(
 ): boolean {
   if (!activeNode) return true
 
+  // コマンドのドラッグは常に許可
   if (isCommand(activeNode.content)) return true
 
-  // フォルダーの場合は循環参照チェック
-  if (isFolder(selfNode.content)) {
+  // フォルダーのドラッグの場合は循環参照チェックが必要
+  if (isFolder(selfNode.content) && isFolder(activeNode.content)) {
     return !isCircularReference(
       activeNode.content.id,
       selfNode.content.id,
@@ -333,13 +383,13 @@ function isInFolder(content: Command | CommandFolder | undefined): boolean {
   return false
 }
 
-export function removeUnstoredParam(data: Command) {
+export function removeUnstoredParam(data: Command): Command {
   delete (data as any)._id
   return data
 }
 
 function calcLevel(node: FlattenNode, folders: CommandFolder[]): number {
-  // 再帰的に親フォルダーをたどってレベルを計算
+  // 再帰的に親フォルダーをたどってネストレベルを計算
   const calculateDepth = (parentFolderId?: string): number => {
     if (!parentFolderId || parentFolderId === ROOT_FOLDER) {
       return 0
@@ -353,13 +403,8 @@ function calcLevel(node: FlattenNode, folders: CommandFolder[]): number {
     return 1 + calculateDepth(parentFolder.parentFolderId)
   }
 
-  if (isCommand(node.content)) {
-    return calculateDepth(node.content.parentFolderId)
-  } else if (isFolder(node.content)) {
-    return calculateDepth(node.content.parentFolderId)
-  }
-
-  return 0
+  const parentFolderId = node.content.parentFolderId
+  return calculateDepth(parentFolderId)
 }
 
 type CommandListProps = {
@@ -381,7 +426,7 @@ export const CommandList = ({ control }: CommandListProps) => {
     keyName: '_id',
   })
 
-  const folderArray = useFieldArray<FoldersSchemType, 'folders', '_id'>({
+  const folderArray = useFieldArray<FoldersSchemaType, 'folders', '_id'>({
     name: 'folders',
     control: control,
     keyName: '_id',
@@ -437,15 +482,15 @@ export const CommandList = ({ control }: CommandListProps) => {
     }
   }
 
-  const moveCommands = (srcIdxs: number[], distIdx: number) => {
-    const sortedIndexes = [...srcIdxs].sort((a, b) => b - a)
-    const itemsToMove = sortedIndexes.map((index) => commandArray.fields[index])
-    sortedIndexes.forEach((index) => commandArray.remove(index))
+  const moveCommands = (sourceIndices: number[], targetIndex: number) => {
+    const sortedIndices = [...sourceIndices].sort((a, b) => b - a)
+    const itemsToMove = sortedIndices.map((index) => commandArray.fields[index])
+    sortedIndices.forEach((index) => commandArray.remove(index))
 
-    const isMoveDown = srcIdxs[0] < distIdx
-    if (isMoveDown) distIdx -= srcIdxs.length - 1
+    const isMoveDown = sourceIndices[0] < targetIndex
+    if (isMoveDown) targetIndex -= sourceIndices.length - 1
     itemsToMove.reverse().forEach((item, i) => {
-      commandArray.insert(distIdx + i, item)
+      commandArray.insert(targetIndex + i, item)
     })
   }
 
@@ -536,80 +581,117 @@ export const CommandList = ({ control }: CommandListProps) => {
     }
   }
 
-  const commandIdx = (id: string) =>
+  const getCommandIndex = (id: string): number =>
     commandArray.fields.findIndex((f) => f.id === id)
 
-  const moveArray = (srcId: string, distId: string) => {
-    const srcNode = flatten.find((f) => f.id === srcId)
-    const distNode = flatten.find((f) => f.id === distId)
-    if (!srcNode || !distNode) return
+  // コマンドからコマンドへの移動処理
+  const moveCommandToCommand = (
+    sourceCommandIndex: number,
+    sourceCommand: SelectionCommand,
+    targetCommand: SelectionCommand,
+  ) => {
+    const targetCommandIndex = getCommandIndex(targetCommand.id)
+    commandArray.update(sourceCommandIndex, {
+      ...sourceCommand,
+      parentFolderId: targetCommand.parentFolderId,
+    } as CommandSchemaType)
+    commandArray.move(sourceCommandIndex, targetCommandIndex)
+  }
 
-    const isMoveDown =
-      flatten.findIndex((f) => f.id === srcId) <
-      flatten.findIndex((f) => f.id === distId)
-
-    if (isCommand(srcNode.content)) {
-      const srcIdx = commandIdx(srcId)
-      if (isCommand(distNode.content)) {
-        // command to command
-        const distIdx = commandIdx(distId)
-        commandArray.update(srcIdx, {
-          ...srcNode.content,
-          parentFolderId: distNode.content.parentFolderId,
-        } as CommandSchemaType)
-        commandArray.move(srcIdx, distIdx)
-      } else {
-        // command to folder
-        if (isMoveDown) {
-          // フォルダーの後にドロップ → フォルダー内に移動
-          let distIdx = commandArray.fields.findIndex(
-            (f) => f.parentFolderId === distId,
-          )
-          if (distIdx === -1) {
-            // Empty folders always exist at the end of the list, so move to the end of the commands.
-            distIdx = commandArray.fields.length
-          }
-          commandArray.update(srcIdx, {
-            ...srcNode.content,
-            parentFolderId: distId,
-          } as CommandSchemaType)
-          commandArray.move(srcIdx, distIdx - 1)
-        } else {
-          // フォルダーの前にドロップ → フォルダーと同じレベルの前に挿入
-          // フラット化されたリストでのフォルダーの位置を取得
-          const targetFolderIndexInFlattened = flatten.findIndex(
-            (f) => f.id === distId,
-          )
-          // そのフォルダーより前にあるコマンドの数を数える
-          let insertPosition = 0
-          for (let i = 0; i < targetFolderIndexInFlattened; i++) {
-            if (isCommand(flatten[i].content)) {
-              insertPosition++
-            }
-          }
-
-          commandArray.update(srcIdx, {
-            ...srcNode.content,
-            parentFolderId: distNode.content.parentFolderId,
-          } as CommandSchemaType)
-          commandArray.move(srcIdx, insertPosition)
+  // コマンドからフォルダーへの移動処理
+  const moveCommandToFolder = (
+    sourceCommandIndex: number,
+    sourceCommand: SelectionCommand,
+    targetFolderId: string,
+    isMoveDown: boolean,
+  ) => {
+    if (isMoveDown) {
+      // フォルダーの後にドロップ → フォルダー内に移動
+      let targetIndex = commandArray.fields.findIndex(
+        (f) => f.parentFolderId === targetFolderId,
+      )
+      if (targetIndex === -1) {
+        // Empty folders always exist at the end of the list, so move to the end of the commands.
+        targetIndex = commandArray.fields.length
+      }
+      commandArray.update(sourceCommandIndex, {
+        ...sourceCommand,
+        parentFolderId: targetFolderId,
+      } as CommandSchemaType)
+      commandArray.move(sourceCommandIndex, targetIndex - 1)
+    } else {
+      // フォルダーの前にドロップ → フォルダーと同じレベルの前に挿入
+      const targetFolderIndexInFlattened = flatten.findIndex(
+        (f) => f.id === targetFolderId,
+      )
+      // そのフォルダーより前にあるコマンドの数を数える
+      let insertPosition = 0
+      for (let i = 0; i < targetFolderIndexInFlattened; i++) {
+        if (isCommand(flatten[i].content)) {
+          insertPosition++
         }
       }
+
+      const targetFolder = flatten.find((f) => f.id === targetFolderId)
+        ?.content as CommandFolder
+      commandArray.update(sourceCommandIndex, {
+        ...sourceCommand,
+        parentFolderId: targetFolder.parentFolderId,
+      } as CommandSchemaType)
+      commandArray.move(sourceCommandIndex, insertPosition)
+    }
+  }
+
+  // フォルダーの移動処理
+  const moveFolderContents = (
+    sourceFolderId: string,
+    targetNode: FlattenNode,
+  ) => {
+    const sourceCommandIndices = commandArray.fields
+      .filter((f) => f.parentFolderId === sourceFolderId)
+      .map((f) => getCommandIndex(f.id))
+
+    if (isCommand(targetNode.content)) {
+      // folder to command
+      const targetIndex = getCommandIndex(targetNode.id)
+      moveCommands(sourceCommandIndices, targetIndex)
     } else {
-      const srcIdxs = commandArray.fields
-        .filter((f) => f.parentFolderId === srcId)
-        .map((f) => commandIdx(f.id))
-      if (isCommand(distNode.content)) {
-        // folder to command
-        const distIdx = commandIdx(distId)
-        moveCommands(srcIdxs, distIdx)
+      // folder to folder
+      const targetIndex = commandArray.fields.findIndex(
+        (f) => f.parentFolderId === targetNode.id,
+      )
+      moveCommands(sourceCommandIndices, targetIndex)
+    }
+  }
+
+  const moveArray = (sourceId: string, targetId: string) => {
+    const sourceNode = flatten.find((f) => f.id === sourceId)
+    const targetNode = flatten.find((f) => f.id === targetId)
+    if (!sourceNode || !targetNode) return
+
+    const isMoveDown =
+      flatten.findIndex((f) => f.id === sourceId) <
+      flatten.findIndex((f) => f.id === targetId)
+
+    if (isCommand(sourceNode.content)) {
+      const sourceCommandIndex = getCommandIndex(sourceId)
+
+      if (isCommand(targetNode.content)) {
+        moveCommandToCommand(
+          sourceCommandIndex,
+          sourceNode.content,
+          targetNode.content,
+        )
       } else {
-        // folder to folder
-        const distIdx = commandArray.fields.findIndex(
-          (f) => f.parentFolderId === distId,
+        moveCommandToFolder(
+          sourceCommandIndex,
+          sourceNode.content,
+          targetId,
+          isMoveDown,
         )
-        moveCommands(srcIdxs, distIdx)
       }
+    } else {
+      moveFolderContents(sourceId, targetNode)
     }
   }
 

From d2d9cfbd34382bf213abedf641e349084d0e26f8 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 22 Jun 2025 23:23:47 +0900
Subject: [PATCH 07/64] Update: Implement DnD processing from folder to
 command.

---
 src/components/option/editor/CommandList.tsx | 131 ++++++++++++++++---
 1 file changed, 114 insertions(+), 17 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index 4b7c37ee..c4822b49 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -642,25 +642,108 @@ export const CommandList = ({ control }: CommandListProps) => {
     }
   }
 
-  // フォルダーの移動処理
-  const moveFolderContents = (
+  // フォルダー自体をサブフォルダーとして移動
+  const moveFolderAsSubfolder = (
+    sourceFolderId: string,
+    targetFolderId: string,
+  ) => {
+    // 循環参照チェック
+    if (
+      isCircularReference(sourceFolderId, targetFolderId, folderArray.fields)
+    ) {
+      return
+    }
+
+    // ソースフォルダーのparentFolderIdを更新
+    const sourceFolderIndex = folderArray.fields.findIndex(
+      (f) => f.id === sourceFolderId,
+    )
+    if (sourceFolderIndex >= 0) {
+      const sourceFolder = folderArray.fields[sourceFolderIndex]
+      folderArray.update(sourceFolderIndex, {
+        ...sourceFolder,
+        parentFolderId: targetFolderId,
+      })
+    }
+  }
+
+  // フォルダーを同階層の前方に移動
+  const moveFolderToSameLevel = (
+    sourceFolderId: string,
+    targetFolderId: string,
+  ) => {
+    const sourceFolderIndex = folderArray.fields.findIndex(
+      (f) => f.id === sourceFolderId,
+    )
+    const targetFolder = folderArray.fields.find((f) => f.id === targetFolderId)
+
+    if (sourceFolderIndex >= 0 && targetFolder) {
+      const sourceFolder = folderArray.fields[sourceFolderIndex]
+
+      // 1. フォルダーのparentFolderIdを更新
+      folderArray.update(sourceFolderIndex, {
+        ...sourceFolder,
+        parentFolderId: targetFolder.parentFolderId,
+      })
+
+      // 2. フォルダー内のコマンドを移動（moveFolderContentsの実装を参考）
+      const sourceCommandIndices = commandArray.fields
+        .filter((f) => f.parentFolderId === sourceFolderId)
+        .map((f) => getCommandIndex(f.id))
+
+      if (sourceCommandIndices.length > 0) {
+        // ターゲットフォルダーより前にあるコマンドの位置を見つける
+        const targetFolderIndexInFlattened = flatten.findIndex(
+          (f) => f.id === targetFolderId,
+        )
+        let insertPosition = 0
+        for (let i = 0; i < targetFolderIndexInFlattened; i++) {
+          if (isCommand(flatten[i].content)) {
+            insertPosition++
+          }
+        }
+
+        // フォルダー内のコマンドをmoveCommands関数で移動
+        moveCommands(sourceCommandIndices, insertPosition)
+      }
+    }
+  }
+
+  // フォルダーをコマンドの位置に移動
+  const moveFolderToCommandPosition = (
     sourceFolderId: string,
     targetNode: FlattenNode,
   ) => {
-    const sourceCommandIndices = commandArray.fields
-      .filter((f) => f.parentFolderId === sourceFolderId)
-      .map((f) => getCommandIndex(f.id))
-
-    if (isCommand(targetNode.content)) {
-      // folder to command
-      const targetIndex = getCommandIndex(targetNode.id)
-      moveCommands(sourceCommandIndices, targetIndex)
-    } else {
-      // folder to folder
-      const targetIndex = commandArray.fields.findIndex(
-        (f) => f.parentFolderId === targetNode.id,
-      )
-      moveCommands(sourceCommandIndices, targetIndex)
+    const sourceFolderIndex = folderArray.fields.findIndex(
+      (f) => f.id === sourceFolderId,
+    )
+    const targetCommand = targetNode.content as SelectionCommand
+
+    if (sourceFolderIndex >= 0) {
+      const sourceFolder = folderArray.fields[sourceFolderIndex]
+
+      // 1. フォルダーのparentFolderIdを更新（ターゲットコマンドと同じ階層に移動）
+      folderArray.update(sourceFolderIndex, {
+        ...sourceFolder,
+        parentFolderId: targetCommand.parentFolderId,
+      })
+
+      // 2. フォルダー内のコマンドを移動（moveFolderContentsの実装を参考）
+      const sourceCommandIndices = commandArray.fields
+        .filter((f) => f.parentFolderId === sourceFolderId)
+        .map((f) => getCommandIndex(f.id))
+
+      if (sourceCommandIndices.length > 0) {
+        // ターゲットコマンドの位置を取得
+        const targetCommandIndex = getCommandIndex(targetNode.id)
+
+        // 挿入位置を決定
+        // moveCommands関数が内部でisMoveDown調整を行うため、targetCommandIndexをそのまま使用
+        const insertPosition = targetCommandIndex
+
+        // フォルダー内のコマンドをmoveCommands関数で移動
+        moveCommands(sourceCommandIndices, insertPosition)
+      }
     }
   }
 
@@ -691,7 +774,21 @@ export const CommandList = ({ control }: CommandListProps) => {
         )
       }
     } else {
-      moveFolderContents(sourceId, targetNode)
+      // フォルダーをフォルダーにドラッグした場合
+      if (isFolder(targetNode.content)) {
+        if (isMoveDown) {
+          // 1-1) ドラッグしたフォルダがドロップ先よりも先頭にある場合、ドロップ先フォルダの配下の先頭に挿入
+          moveFolderAsSubfolder(sourceId, targetNode.id)
+        } else {
+          // 1-2) ドラッグしたフォルダがドロップ先よりも後方にある場合、
+          // ドロップ先フォルダと同じ階層でかつドロップ先フォルダの前方に挿入
+          moveFolderToSameLevel(sourceId, targetNode.id)
+        }
+      } else {
+        // フォルダーをコマンドにドラッグした場合
+        // moveCommands関数が適切にisMoveDown調整を行うため、両ケースとも同じ処理
+        moveFolderToCommandPosition(sourceId, targetNode)
+      }
     }
   }
 

From fab420e2183f6afeadeac454eb4f428850551540 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Tue, 24 Jun 2025 08:43:48 +0900
Subject: [PATCH 08/64] Update: Fix command to folder.

---
 src/components/option/SettingForm.tsx         |  15 +-
 src/components/option/SortableItem.tsx        |   7 +
 .../option/editor/CommandActions.tsx          |  75 ++
 .../option/editor/CommandEditDialog.tsx       | 147 +---
 src/components/option/editor/CommandList.tsx  | 798 ++----------------
 .../option/editor/CommandTreeRenderer.tsx     | 100 +++
 .../option/editor/FolderEditDialog.tsx        |  15 +-
 .../option/editor/PageActionSection.tsx       |  22 -
 src/components/option/editor/ShortcutList.tsx |   4 +-
 src/hooks/useCommandActions.ts                | 160 ++++
 src/hooks/useCommandDragDrop.ts               | 131 +++
 src/lib/commandUtils.ts                       |  62 ++
 src/services/commandTree.ts                   | 222 +++++
 src/services/dragAndDrop.ts                   | 116 +++
 src/types/schema.ts                           | 204 ++++-
 15 files changed, 1170 insertions(+), 908 deletions(-)
 create mode 100644 src/components/option/editor/CommandActions.tsx
 create mode 100644 src/components/option/editor/CommandTreeRenderer.tsx
 create mode 100644 src/hooks/useCommandActions.ts
 create mode 100644 src/hooks/useCommandDragDrop.ts
 create mode 100644 src/lib/commandUtils.ts
 create mode 100644 src/services/commandTree.ts
 create mode 100644 src/services/dragAndDrop.ts

diff --git a/src/components/option/SettingForm.tsx b/src/components/option/SettingForm.tsx
index 052f7eb2..983113ba 100644
--- a/src/components/option/SettingForm.tsx
+++ b/src/components/option/SettingForm.tsx
@@ -17,15 +17,10 @@ import { InputField } from '@/components/option/field/InputField'
 import { SelectField } from '@/components/option/field/SelectField'
 import { SwitchField } from '@/components/option/field/SwitchField'
 import { PopupPlacementField } from '@/components/option/field/PopupPlacementField'
-import { folderSchema } from '@/components/option/editor/FolderEditDialog'
-import { commandSchema } from '@/components/option/editor/CommandEditDialog'
-import {
-  CommandList,
-  toCommandTree,
-  toFlatten,
-  isCommand,
-  removeUnstoredParam,
-} from '@/components/option/editor/CommandList'
+import { commandSchema, folderSchema } from '@/types/schema'
+import { CommandList } from '@/components/option/editor/CommandList'
+import { toCommandTree, toFlatten } from '@/services/commandTree'
+import { isCommand, removeUnstoredParam } from '@/lib/commandUtils'
 import {
   PageRuleList,
   pageRuleSchema,
@@ -112,7 +107,7 @@ const formSchema = z
   .strict()
 
 type FormValues = z.infer<typeof formSchema>
-type SettingsFormType = Omit<UserSettings, 'settingVersion'>
+export type SettingsFormType = Omit<UserSettings, 'settingVersion'>
 
 export function SettingForm({ className }: { className?: string }) {
   const [isSaving, setIsSaving] = useState(false)
diff --git a/src/components/option/SortableItem.tsx b/src/components/option/SortableItem.tsx
index ed3a4333..b8da2cc5 100644
--- a/src/components/option/SortableItem.tsx
+++ b/src/components/option/SortableItem.tsx
@@ -2,6 +2,7 @@ import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { GripVertical } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import type { Command, CommandFolder } from '@/types'
 
 type SrotabelItemProps = {
   id: string
@@ -10,6 +11,8 @@ type SrotabelItemProps = {
   level: number
   className?: string
   droppable?: boolean
+  content: Command | CommandFolder
+  folders?: CommandFolder[]
 }
 
 export function SortableItem(props: SrotabelItemProps) {
@@ -25,6 +28,10 @@ export function SortableItem(props: SrotabelItemProps) {
     isDragging,
   } = useSortable({
     id: props.id,
+    data: {
+      content: props.content,
+      folders: props.folders,
+    },
     transition: {
       duration: 150,
       easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
diff --git a/src/components/option/editor/CommandActions.tsx b/src/components/option/editor/CommandActions.tsx
new file mode 100644
index 00000000..15062215
--- /dev/null
+++ b/src/components/option/editor/CommandActions.tsx
@@ -0,0 +1,75 @@
+import React from 'react'
+import { Button } from '@/components/ui/button'
+import { Terminal, FolderPlus, Search } from 'lucide-react'
+import { Tooltip } from '@/components/Tooltip'
+import { HUB_URL } from '@/const'
+import { t as _t } from '@/services/i18n'
+const t = (key: string, p?: string[]) => _t(`Option_${key}`, p)
+
+interface Props {
+  onAddCommand: () => void
+  onAddFolder: () => void
+  addCommandButtonRef: React.RefObject<HTMLButtonElement>
+  addFolderButtonRef: React.RefObject<HTMLButtonElement>
+  commandCount: number
+}
+
+export const CommandActions: React.FC<Props> = ({
+  onAddCommand,
+  onAddFolder,
+  addCommandButtonRef,
+  addFolderButtonRef,
+  commandCount,
+}) => {
+  return (
+    <div className="relative h-10 flex items-end">
+      <span className="text-sm bg-gray-100 px-2 py-0.5 rounded font-mono tracking-tight">
+        {commandCount ?? 0}
+        {t('commands_desc_count')}
+      </span>
+      <Button
+        type="button"
+        ref={addFolderButtonRef}
+        variant="outline"
+        className="absolute left-[255px] px-2 w-24 rounded-md transition hover:bg-gray-100 hover:mr-1 hover:scale-[110%] group font-mono"
+        onClick={onAddFolder}
+      >
+        <FolderPlus />
+        {t('folders')}
+      </Button>
+      <Tooltip
+        positionElm={addFolderButtonRef.current}
+        text={t('folders_tooltip')}
+      />
+      <Button
+        type="button"
+        ref={addCommandButtonRef}
+        variant="outline"
+        className="absolute left-[360px] px-2 w-24 rounded-md transition hover:bg-gray-100 hover:mr-1 hover:scale-[110%] group font-mono"
+        onClick={onAddCommand}
+      >
+        <Terminal className="stroke-gray-600 group-hover:stroke-gray-700" />
+        {t('Command')}
+      </Button>
+      <Tooltip
+        positionElm={addCommandButtonRef.current}
+        text={t('Command_tooltip')}
+      />
+      <Button
+        variant="outline"
+        className="absolute right-0 translate-x-[-5%] pl-2 pr-2.5 w-32 rounded-md transition hover:bg-gray-100 hover:scale-[110%] group"
+        asChild
+      >
+        <a
+          href={`${HUB_URL}/?utm_source=optionPage&utm_medium=button`}
+          target="_blank"
+          className="font-mono text-gray-600 hover:text-gray-700"
+        >
+          <Search />
+          <span className="font-semibold">Command</span>
+          <span className="font-thin">Hub</span>
+        </a>
+      </Button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/option/editor/CommandEditDialog.tsx b/src/components/option/editor/CommandEditDialog.tsx
index 1ca05cc3..dbf08b43 100644
--- a/src/components/option/editor/CommandEditDialog.tsx
+++ b/src/components/option/editor/CommandEditDialog.tsx
@@ -43,12 +43,8 @@ import { InputField } from '@/components/option/field/InputField'
 import { IconField } from '@/components/option/field/IconField'
 import { SelectField } from '@/components/option/field/SelectField'
 import { TextareaField } from '@/components/option/field/TextareaField'
-import {
-  pageActionSchema,
-  PageActionSection,
-} from '@/components/option/editor/PageActionSection'
+import { PageActionSection } from '@/components/option/editor/PageActionSection'
 import { PaeActionHelp } from '@/components/help/PageActionHelp'
-
 import { PageActionStep } from '@/types/schema'
 
 import {
@@ -76,6 +72,8 @@ import { ANALYTICS_EVENTS, sendEvent } from '@/services/analytics'
 import { isEmpty, e2a, cn } from '@/lib/utils'
 import { t as _t } from '@/services/i18n'
 const t = (key: string, p?: string[]) => _t(`Option_${key}`, p)
+
+import { SEARCH_OPEN_MODE, isSearchType, commandSchema } from '@/types/schema'
 import type {
   SelectionCommand,
   CommandFolder,
@@ -84,136 +82,13 @@ import type {
 
 import css from './CommandEditDialog.module.css'
 
-const SearchOpenMode = [
-  OPEN_MODE.POPUP,
-  OPEN_MODE.TAB,
-  OPEN_MODE.WINDOW,
-] as const
-
-const searchSchema = z.object({
-  openMode: z.enum(SearchOpenMode),
-  id: z.string(),
-  revision: z.number().optional(),
-  title: z.string().min(1, { message: t('zod_string_min', ['1']) }),
-  iconUrl: z
-    .string()
-    .url({ message: t('zod_url') })
-    .max(1000, { message: t('zod_string_max', ['1000']) }),
-  searchUrl: z.string().url({ message: t('zod_url') }),
-  parentFolderId: z.string().optional(),
-  openModeSecondary: z.enum(SearchOpenMode),
-  spaceEncoding: z.nativeEnum(SPACE_ENCODING),
-  popupOption: z
-    .object({
-      width: z.number().min(1),
-      height: z.number().min(1),
-    })
-    .optional(),
-})
-
-type SearchType = z.infer<typeof searchSchema>
-
-const isSearchType = (data: any): data is SearchType => {
-  return SearchOpenMode.includes(data.openMode)
-}
-
-const apiSchema = z.object({
-  openMode: z.literal(OPEN_MODE.API),
-  id: z.string(),
-  revision: z.number().optional(),
-  title: z.string().min(1, { message: t('zod_string_min', ['1']) }),
-  iconUrl: z
-    .string()
-    .url({ message: t('zod_url') })
-    .max(1000, { message: t('zod_string_max', ['1000']) }),
-  searchUrl: z.string().url({ message: t('zod_url') }),
-  parentFolderId: z.string().optional(),
-  fetchOptions: z.string().optional(),
-  variables: z
-    .array(
-      z.object({
-        name: z.string({ message: t('zod_string_min', ['1']) }),
-        value: z.string({ message: t('zod_string_min', ['1']) }),
-      }),
-    )
-    .optional(),
-})
-
-const linkPopupSchema = z.object({
-  openMode: z.enum([OPEN_MODE.LINK_POPUP]),
-  id: z.string(),
-  revision: z.number().optional(),
-  parentFolderId: z.string().optional(),
-  title: z
-    .string()
-    .min(1, { message: t('zod_string_min', ['1']) })
-    .default('Link Popup'),
-  iconUrl: z
-    .string()
-    .url({ message: t('zod_url') })
-    .max(1000, { message: t('zod_string_max', ['1000']) })
-    .default(
-      'https://cdn4.iconfinder.com/data/icons/basic-ui-2-line/32/folder-archive-document-archives-fold-1024.png',
-    ),
-  popupOption: z.object({
-    width: z.number().min(1),
-    height: z.number().min(1),
-  }),
-})
-
-const copySchema = z.object({
-  openMode: z.enum([OPEN_MODE.COPY]),
-  id: z.string(),
-  revision: z.number().optional(),
-  parentFolderId: z.string().optional(),
-  title: z
-    .string()
-    .min(1, { message: t('zod_string_min', ['1']) })
-    .default('Copy text'),
-  iconUrl: z
-    .string()
-    .url({ message: t('zod_url') })
-    .max(1000, { message: t('zod_string_max', ['1000']) })
-    .default(
-      'https://cdn0.iconfinder.com/data/icons/phosphor-light-vol-2/256/copy-light-1024.png',
-    ),
-  copyOption: z.nativeEnum(COPY_OPTION).default(COPY_OPTION.DEFAULT),
-})
-
-const textStyleSchema = z.object({
-  openMode: z.enum([OPEN_MODE.GET_TEXT_STYLES]),
-  id: z.string(),
-  revision: z.number().optional(),
-  parentFolderId: z.string().optional(),
-  title: z
-    .string()
-    .min(1, { message: t('zod_string_min', ['1']) })
-    .default('Get Text Styles'),
-  iconUrl: z
-    .string()
-    .url({ message: t('zod_url') })
-    .max(1000, { message: t('zod_string_max', ['1000']) })
-    .default(
-      'https://cdn0.iconfinder.com/data/icons/phosphor-light-vol-3/256/paint-brush-light-1024.png',
-    ),
-})
-
-export const commandSchema = z.discriminatedUnion('openMode', [
-  searchSchema,
-  apiSchema,
-  pageActionSchema,
-  linkPopupSchema,
-  copySchema,
-  textStyleSchema,
-])
-
 const EmptyFolder = {
   id: ROOT_FOLDER,
   title: t('Command_rootFolder'),
 } as CommandFolder
 
 const defaultValue = (openMode: OPEN_MODE) => {
-  if (SearchOpenMode.includes(openMode as any)) {
+  if (SEARCH_OPEN_MODE.includes(openMode as any)) {
     return {
       id: '',
       searchUrl: '',
@@ -409,8 +284,8 @@ const CommandEditDialogInner = ({
 
   useEffect(() => {
     if (
-      SearchOpenMode.includes(openMode as any) &&
-      SearchOpenMode.includes(preOpenModeRef.current as any)
+      SEARCH_OPEN_MODE.includes(openMode as any) &&
+      SEARCH_OPEN_MODE.includes(preOpenModeRef.current as any)
     ) {
       return
     }
@@ -519,19 +394,19 @@ const CommandEditDialogInner = ({
                   }))}
               />
 
-              {SearchOpenMode.includes(openMode as any) && (
+              {SEARCH_OPEN_MODE.includes(openMode as any) && (
                 <SelectField
                   control={form.control}
                   name="openModeSecondary"
                   formLabel={t('openModeSecondary')}
-                  options={SearchOpenMode.map((mode) => ({
+                  options={SEARCH_OPEN_MODE.map((mode) => ({
                     name: t(`openMode_${mode}`),
                     value: mode,
                   }))}
                 />
               )}
 
-              {(SearchOpenMode.includes(openMode as any) ||
+              {(SEARCH_OPEN_MODE.includes(openMode as any) ||
                 openMode === OPEN_MODE.API) && (
                 <InputField
                   control={form.control}
@@ -689,7 +564,7 @@ const CommandEditDialogInner = ({
                     nameSvg="iconSvg"
                     formLabel={t('iconUrl')}
                     description={
-                      SearchOpenMode.includes(openMode as any) ||
+                      SEARCH_OPEN_MODE.includes(openMode as any) ||
                       openMode === OPEN_MODE.API
                         ? t('iconUrl_desc')
                         : openMode === OPEN_MODE.PAGE_ACTION
@@ -698,7 +573,7 @@ const CommandEditDialogInner = ({
                     }
                   />
 
-                  {SearchOpenMode.includes(openMode as any) && (
+                  {SEARCH_OPEN_MODE.includes(openMode as any) && (
                     <SelectField
                       control={form.control}
                       name="spaceEncoding"
diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index c4822b49..9e464a08 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -1,6 +1,5 @@
 import { useState, useRef, useEffect } from 'react'
 import { useFieldArray } from 'react-hook-form'
-import { z } from 'zod'
 
 import {
   DndContext,
@@ -10,7 +9,6 @@ import {
   useSensor,
   useSensors,
   DragStartEvent,
-  DragEndEvent,
 } from '@dnd-kit/core'
 
 import {
@@ -19,258 +17,32 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
 
-import { Terminal, FolderPlus, Search } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import { Tooltip } from '@/components/Tooltip'
-import { SortableItem } from '@/components/option/SortableItem'
-import { EditButton } from '@/components/option/EditButton'
-import { CopyButton } from '@/components/option/CopyButton'
-import { RemoveButton } from '@/components/option/RemoveButton'
-import {
-  commandSchema,
-  CommandEditDialog,
-} from '@/components/option/editor/CommandEditDialog'
+import { CommandEditDialog } from '@/components/option/editor/CommandEditDialog'
+import { FolderEditDialog } from '@/components/option/editor/FolderEditDialog'
 import {
-  FolderEditDialog,
-  folderSchema,
-} from '@/components/option/editor/FolderEditDialog'
-import { MenuImage } from '@/components/menu/MenuImage'
+  CommandSchemaType,
+  CommandsSchemaType,
+  FoldersSchemaType,
+} from '@/types/schema'
 
 import { ANALYTICS_EVENTS, sendEvent } from '@/services/analytics'
 import { SCREEN } from '@/const'
-import { t as _t } from '@/services/i18n'
-const t = (key: string, p?: string[]) => _t(`Option_${key}`, p)
-import { OPEN_MODE, ROOT_FOLDER, COMMAND_MAX, HUB_URL } from '@/const'
-import { cn, e2a, isEmpty } from '@/lib/utils'
-import type {
-  Command,
-  CommandFolder,
-  SelectionCommand,
-  PageActionCommand,
-} from '@/types'
-
-const commandsSchema = z.object({
-  commands: z.array(commandSchema).min(1).max(COMMAND_MAX),
-})
-
-const foldersSchema = z.object({
-  folders: z.array(folderSchema),
-})
-
-type CommandSchemaType = z.infer<typeof commandSchema>
-type CommandsSchemaType = z.infer<typeof commandsSchema>
-type FoldersSchemaType = z.infer<typeof foldersSchema>
-
-type CommandTreeNode = {
-  type: 'command' | 'folder'
-  content: Command | CommandFolder
-  children?: CommandTreeNode[]
-}
-
-// フォルダーノードを作成する関数
-const createFolderNode = (folder: CommandFolder): CommandTreeNode => ({
-  type: 'folder',
-  content: folder,
-  children: [],
-})
-
-// ツリー内でノードを検索する関数
-const findNodeInTree = (
-  tree: CommandTreeNode[],
-  id: string,
-): CommandTreeNode | null => {
-  for (const node of tree) {
-    if (node.content.id === id) {
-      return node
-    }
-    if (node.children) {
-      const found = findNodeInTree(node.children, id)
-      if (found) return found
-    }
-  }
-  return null
-}
-
-// 親フォルダーが必要な場合に追加する関数
-const addParentFolderIfNeeded = (
-  tree: CommandTreeNode[],
-  parentFolderId: string,
-  folders: CommandFolder[],
-  processedFolders: Set<string>,
-  addNodeToTree: (
-    tree: CommandTreeNode[],
-    node: CommandTreeNode,
-    parentId?: string,
-  ) => void,
-) => {
-  if (parentFolderId === ROOT_FOLDER) return
-
-  const parentFolder = folders.find((f) => f.id === parentFolderId)
-  if (parentFolder && !processedFolders.has(parentFolder.id)) {
-    const folderNode = createFolderNode(parentFolder)
-    addNodeToTree(tree, folderNode, parentFolder.parentFolderId)
-    processedFolders.add(parentFolder.id)
-  }
-}
-
-// ノードをツリーに追加する関数を作成するファクトリー
-const createAddNodeToTreeFunction = (
-  folders: CommandFolder[],
-  processedFolders: Set<string>,
-) => {
-  const addNodeToTree = (
-    tree: CommandTreeNode[],
-    node: CommandTreeNode,
-    parentId?: string,
-  ) => {
-    if (parentId && parentId !== ROOT_FOLDER) {
-      const parent = findNodeInTree(tree, parentId)
-      if (parent) {
-        if (!parent.children) parent.children = []
-        parent.children.push(node)
-      } else {
-        // 親フォルダーがまだない場合は、先に親フォルダーを追加
-        addParentFolderIfNeeded(
-          tree,
-          parentId,
-          folders,
-          processedFolders,
-          addNodeToTree,
-        )
-        // 再帰的に追加
-        addNodeToTree(tree, node, parentId)
-      }
-    } else {
-      // ルートレベルに追加
-      tree.push(node)
-    }
-  }
-  return addNodeToTree
-}
-
-// コマンドをツリーに追加する処理
-const addCommandsToTree = (
-  tree: CommandTreeNode[],
-  commands: Command[],
-  folders: CommandFolder[],
-  processedFolders: Set<string>,
-  addNodeToTree: (
-    tree: CommandTreeNode[],
-    node: CommandTreeNode,
-    parentId?: string,
-  ) => void,
-) => {
-  commands.forEach((command) => {
-    const commandNode: CommandTreeNode = {
-      type: 'command',
-      content: command,
-    }
-
-    // コマンドを追加する前に、必要な親フォルダーが存在するか確認し、なければ追加
-    if (command.parentFolderId && command.parentFolderId !== ROOT_FOLDER) {
-      addParentFolderIfNeeded(
-        tree,
-        command.parentFolderId,
-        folders,
-        processedFolders,
-        addNodeToTree,
-      )
-    }
-
-    addNodeToTree(tree, commandNode, command.parentFolderId)
-  })
-}
-
-// 残りのフォルダーをツリーに追加する処理
-const addRemainingFoldersToTree = (
-  tree: CommandTreeNode[],
-  folders: CommandFolder[],
-  processedFolders: Set<string>,
-  addNodeToTree: (
-    tree: CommandTreeNode[],
-    node: CommandTreeNode,
-    parentId?: string,
-  ) => void,
-) => {
-  folders.forEach((folder) => {
-    if (!processedFolders.has(folder.id)) {
-      const folderNode = createFolderNode(folder)
-      addNodeToTree(tree, folderNode, folder.parentFolderId)
-      processedFolders.add(folder.id)
-    }
-  })
-}
+import type { Command, CommandFolder, SelectionCommand } from '@/types'
 
-export function toCommandTree(
-  commands: Command[],
-  folders: CommandFolder[],
-): CommandTreeNode[] {
-  const tree: CommandTreeNode[] = []
-  const processedFolders = new Set<string>()
-
-  const addNodeToTree = createAddNodeToTreeFunction(folders, processedFolders)
-
-  // commandArrayの順序に従って、コマンドとフォルダーを順番に処理
-  addCommandsToTree(tree, commands, folders, processedFolders, addNodeToTree)
-
-  // 残りのフォルダー（コマンドで参照されていないフォルダー）を追加
-  addRemainingFoldersToTree(tree, folders, processedFolders, addNodeToTree)
-
-  return tree
-}
-
-type FlattenNode = {
-  id: string
-  index: number
-  content: SelectionCommand | CommandFolder
-  firstChild?: boolean
-  lastChild?: boolean
-}
-
-function _toFlatten(
-  tree: CommandTreeNode[],
-  flatten: FlattenNode[] = [],
-): FlattenNode[] {
-  for (const node of tree) {
-    if (node.type === 'command') {
-      flatten.push({
-        id: node.content.id,
-        content: node.content,
-        index: 0,
-      })
-    } else {
-      flatten.push({
-        id: node.content.id,
-        content: node.content,
-        index: 0,
-      })
-
-      if (node.children && node.children.length > 0) {
-        const beforeChildrenLength = flatten.length
-        _toFlatten(node.children, flatten)
-        const afterChildrenLength = flatten.length
-
-        // 最初の子要素にfirstChildマークを設定
-        if (beforeChildrenLength < afterChildrenLength) {
-          flatten[beforeChildrenLength].firstChild = true
-        }
-        // 最後の子要素にlastChildマークを設定
-        if (afterChildrenLength > beforeChildrenLength) {
-          flatten[afterChildrenLength - 1].lastChild = true
-        }
-      }
-    }
-  }
-  return flatten
-}
-export function toFlatten(tree: CommandTreeNode[]): FlattenNode[] {
-  let flatten = _toFlatten(tree)
-  flatten = flatten.map((node, index) => ({ ...node, index }))
-  return flatten
-}
-
-// ドラッグ中のフォルダーの子孫フォルダーIDを再帰的に取得
+// Imported services and hooks
+import {
+  toCommandTree,
+  toFlatten,
+  type FlattenNode,
+} from '@/services/commandTree'
+import { isCommand, isFolder } from '@/lib/commandUtils'
+import { isValidDrop } from '@/services/dragAndDrop'
+import { useCommandActions } from '@/hooks/useCommandActions'
+import { useCommandDragDrop } from '@/hooks/useCommandDragDrop'
+import { CommandActions } from './CommandActions'
+import { CommandTreeRenderer } from './CommandTreeRenderer'
+
+// Drag filtering utilities
 const getDescendantFolderIds = (
   folderId: string,
   folders: CommandFolder[],
@@ -283,18 +55,20 @@ const getDescendantFolderIds = (
   return descendants
 }
 
-// ノードがドラッグ中のフォルダーの子ノードかどうかを判定
-const isChildOfDraggedFolder = (
+/**
+ * Determines if a node is a descendant of any folder in the hidden folder set.
+ * Used during drag operations to filter out items that should not be visible
+ * when their parent folder is being dragged.
+ *
+ * @param node - The tree node to check
+ * @param hiddenFolderIds - Set of folder IDs that are currently hidden (being dragged)
+ * @returns true if the node belongs to any of the hidden folders
+ */
+const isDescendantOfHiddenFolder = (
   node: FlattenNode,
   hiddenFolderIds: Set<string>,
 ): boolean => {
-  if (isCommand(node.content)) {
-    return !!(
-      node.content.parentFolderId &&
-      hiddenFolderIds.has(node.content.parentFolderId)
-    )
-  }
-  if (isFolder(node.content)) {
+  if (isCommand(node.content) || isFolder(node.content)) {
     return !!(
       node.content.parentFolderId &&
       hiddenFolderIds.has(node.content.parentFolderId)
@@ -313,17 +87,9 @@ function commandsFilter(
   const descendantFolderIds = getDescendantFolderIds(draggingId, folders)
   const hiddenFolderIds = new Set([draggingId, ...descendantFolderIds])
 
-  return nodes.filter((node) => !isChildOfDraggedFolder(node, hiddenFolderIds))
-}
-
-function isCircularReference(
-  draggedFolderId: string,
-  targetFolderId: string,
-  folders: CommandFolder[],
-): boolean {
-  // draggedFolderIdがtargetFolderIdの子孫フォルダーかチェック
-  const descendants = getDescendantFolderIds(draggedFolderId, folders)
-  return descendants.includes(targetFolderId)
+  return nodes.filter(
+    (node) => !isDescendantOfHiddenFolder(node, hiddenFolderIds),
+  )
 }
 
 function isDroppable(
@@ -332,79 +98,7 @@ function isDroppable(
   folders: CommandFolder[] = [],
 ): boolean {
   if (!activeNode) return true
-
-  // コマンドのドラッグは常に許可
-  if (isCommand(activeNode.content)) return true
-
-  // フォルダーのドラッグの場合は循環参照チェックが必要
-  if (isFolder(selfNode.content) && isFolder(activeNode.content)) {
-    return !isCircularReference(
-      activeNode.content.id,
-      selfNode.content.id,
-      folders,
-    )
-  }
-  return true
-}
-
-export function isCommand(
-  content: Command | CommandFolder | undefined,
-): content is SelectionCommand {
-  if (content == null) return false
-  if ('openMode' in content) {
-    return e2a(OPEN_MODE).includes(content.openMode)
-  }
-  return false
-}
-
-export function isPageActionCommand(
-  content: Command | CommandFolder | undefined,
-): content is PageActionCommand {
-  if (content == null) return false
-  if ('openMode' in content) {
-    return OPEN_MODE.PAGE_ACTION === content.openMode
-  }
-  return false
-}
-
-function isFolder(
-  content: Command | CommandFolder | undefined,
-): content is CommandFolder {
-  if (content == null) return false
-  return !('openMode' in content)
-}
-
-function isInFolder(content: Command | CommandFolder | undefined): boolean {
-  if (content == null) return false
-  const folderId = content.parentFolderId
-  if (!isEmpty(folderId) && folderId != ROOT_FOLDER) {
-    return true
-  }
-  return false
-}
-
-export function removeUnstoredParam(data: Command): Command {
-  delete (data as any)._id
-  return data
-}
-
-function calcLevel(node: FlattenNode, folders: CommandFolder[]): number {
-  // 再帰的に親フォルダーをたどってネストレベルを計算
-  const calculateDepth = (parentFolderId?: string): number => {
-    if (!parentFolderId || parentFolderId === ROOT_FOLDER) {
-      return 0
-    }
-
-    const parentFolder = folders.find((f) => f.id === parentFolderId)
-    if (!parentFolder) {
-      return 0
-    }
-
-    return 1 + calculateDepth(parentFolder.parentFolderId)
-  }
-
-  const parentFolderId = node.content.parentFolderId
-  return calculateDepth(parentFolderId)
+  return isValidDrop(activeNode.content, selfNode.content, folders)
 }
 
 type CommandListProps = {
@@ -412,6 +106,8 @@ type CommandListProps = {
 }
 
 export const CommandList = ({ control }: CommandListProps) => {
+  // Create form instance for command actions
+  const formInstance = { control } as any
   const [draggingId, setDraggingId] = useState<string | null>(null)
   const [commandDialogOpen, _setCommandDialogOpen] = useState(false)
   const [folderDialogOpen, _setFolderDialogOpen] = useState(false)
@@ -446,7 +142,6 @@ export const CommandList = ({ control }: CommandListProps) => {
 
   const setCommandDialogOpen = (open: boolean) => {
     if (!open) {
-      // Reset editData when closing the dialog.
       editDataRef.current = null
     } else {
       sendEvent(
@@ -462,7 +157,6 @@ export const CommandList = ({ control }: CommandListProps) => {
 
   const setFolderDialogOpen = (open: boolean) => {
     if (!open) {
-      // Reset editData when closing the dialog.
       editDataRef.current = null
     }
     _setFolderDialogOpen(open)
@@ -473,25 +167,22 @@ export const CommandList = ({ control }: CommandListProps) => {
     setDraggingId(active.id as string)
   }
 
-  const handleDragEnd = (event: DragEndEvent) => {
-    setDraggingId(null)
-    const { active, over } = event
-    if (!active || !over) return
-    if (active.id !== over?.id) {
-      moveArray(`${active.id}`, `${over.id}`)
-    }
-  }
+  // Initialize command actions and drag drop functionality
+  const commandActions = useCommandActions(
+    formInstance,
+    commandArray,
+    folderArray,
+  )
 
-  const moveCommands = (sourceIndices: number[], targetIndex: number) => {
-    const sortedIndices = [...sourceIndices].sort((a, b) => b - a)
-    const itemsToMove = sortedIndices.map((index) => commandArray.fields[index])
-    sortedIndices.forEach((index) => commandArray.remove(index))
+  const { handleDragEnd } = useCommandDragDrop(
+    commandActions,
+    commandArray.fields,
+    folderArray.fields,
+  )
 
-    const isMoveDown = sourceIndices[0] < targetIndex
-    if (isMoveDown) targetIndex -= sourceIndices.length - 1
-    itemsToMove.reverse().forEach((item, i) => {
-      commandArray.insert(targetIndex + i, item)
-    })
+  const handleDragEndWithReset = (event: any) => {
+    setDraggingId(null)
+    handleDragEnd(event)
   }
 
   const commandEditorOpen = (idx: number) => {
@@ -563,232 +254,7 @@ export const CommandList = ({ control }: CommandListProps) => {
         SCREEN.OPTION,
       )
     } else {
-      commandArray.fields
-        .map((f, i) => ({
-          index: i,
-          id: f.id,
-          parentFolderId: f.parentFolderId,
-          data: f,
-        }))
-        .filter((f) => f.parentFolderId === node.id)
-        .forEach((f) =>
-          commandArray.update(f.index, {
-            ...f.data,
-            parentFolderId: undefined,
-          }),
-        )
-      folderArray.remove(folderArray.fields.findIndex((f) => f.id === node.id))
-    }
-  }
-
-  const getCommandIndex = (id: string): number =>
-    commandArray.fields.findIndex((f) => f.id === id)
-
-  // コマンドからコマンドへの移動処理
-  const moveCommandToCommand = (
-    sourceCommandIndex: number,
-    sourceCommand: SelectionCommand,
-    targetCommand: SelectionCommand,
-  ) => {
-    const targetCommandIndex = getCommandIndex(targetCommand.id)
-    commandArray.update(sourceCommandIndex, {
-      ...sourceCommand,
-      parentFolderId: targetCommand.parentFolderId,
-    } as CommandSchemaType)
-    commandArray.move(sourceCommandIndex, targetCommandIndex)
-  }
-
-  // コマンドからフォルダーへの移動処理
-  const moveCommandToFolder = (
-    sourceCommandIndex: number,
-    sourceCommand: SelectionCommand,
-    targetFolderId: string,
-    isMoveDown: boolean,
-  ) => {
-    if (isMoveDown) {
-      // フォルダーの後にドロップ → フォルダー内に移動
-      let targetIndex = commandArray.fields.findIndex(
-        (f) => f.parentFolderId === targetFolderId,
-      )
-      if (targetIndex === -1) {
-        // Empty folders always exist at the end of the list, so move to the end of the commands.
-        targetIndex = commandArray.fields.length
-      }
-      commandArray.update(sourceCommandIndex, {
-        ...sourceCommand,
-        parentFolderId: targetFolderId,
-      } as CommandSchemaType)
-      commandArray.move(sourceCommandIndex, targetIndex - 1)
-    } else {
-      // フォルダーの前にドロップ → フォルダーと同じレベルの前に挿入
-      const targetFolderIndexInFlattened = flatten.findIndex(
-        (f) => f.id === targetFolderId,
-      )
-      // そのフォルダーより前にあるコマンドの数を数える
-      let insertPosition = 0
-      for (let i = 0; i < targetFolderIndexInFlattened; i++) {
-        if (isCommand(flatten[i].content)) {
-          insertPosition++
-        }
-      }
-
-      const targetFolder = flatten.find((f) => f.id === targetFolderId)
-        ?.content as CommandFolder
-      commandArray.update(sourceCommandIndex, {
-        ...sourceCommand,
-        parentFolderId: targetFolder.parentFolderId,
-      } as CommandSchemaType)
-      commandArray.move(sourceCommandIndex, insertPosition)
-    }
-  }
-
-  // フォルダー自体をサブフォルダーとして移動
-  const moveFolderAsSubfolder = (
-    sourceFolderId: string,
-    targetFolderId: string,
-  ) => {
-    // 循環参照チェック
-    if (
-      isCircularReference(sourceFolderId, targetFolderId, folderArray.fields)
-    ) {
-      return
-    }
-
-    // ソースフォルダーのparentFolderIdを更新
-    const sourceFolderIndex = folderArray.fields.findIndex(
-      (f) => f.id === sourceFolderId,
-    )
-    if (sourceFolderIndex >= 0) {
-      const sourceFolder = folderArray.fields[sourceFolderIndex]
-      folderArray.update(sourceFolderIndex, {
-        ...sourceFolder,
-        parentFolderId: targetFolderId,
-      })
-    }
-  }
-
-  // フォルダーを同階層の前方に移動
-  const moveFolderToSameLevel = (
-    sourceFolderId: string,
-    targetFolderId: string,
-  ) => {
-    const sourceFolderIndex = folderArray.fields.findIndex(
-      (f) => f.id === sourceFolderId,
-    )
-    const targetFolder = folderArray.fields.find((f) => f.id === targetFolderId)
-
-    if (sourceFolderIndex >= 0 && targetFolder) {
-      const sourceFolder = folderArray.fields[sourceFolderIndex]
-
-      // 1. フォルダーのparentFolderIdを更新
-      folderArray.update(sourceFolderIndex, {
-        ...sourceFolder,
-        parentFolderId: targetFolder.parentFolderId,
-      })
-
-      // 2. フォルダー内のコマンドを移動（moveFolderContentsの実装を参考）
-      const sourceCommandIndices = commandArray.fields
-        .filter((f) => f.parentFolderId === sourceFolderId)
-        .map((f) => getCommandIndex(f.id))
-
-      if (sourceCommandIndices.length > 0) {
-        // ターゲットフォルダーより前にあるコマンドの位置を見つける
-        const targetFolderIndexInFlattened = flatten.findIndex(
-          (f) => f.id === targetFolderId,
-        )
-        let insertPosition = 0
-        for (let i = 0; i < targetFolderIndexInFlattened; i++) {
-          if (isCommand(flatten[i].content)) {
-            insertPosition++
-          }
-        }
-
-        // フォルダー内のコマンドをmoveCommands関数で移動
-        moveCommands(sourceCommandIndices, insertPosition)
-      }
-    }
-  }
-
-  // フォルダーをコマンドの位置に移動
-  const moveFolderToCommandPosition = (
-    sourceFolderId: string,
-    targetNode: FlattenNode,
-  ) => {
-    const sourceFolderIndex = folderArray.fields.findIndex(
-      (f) => f.id === sourceFolderId,
-    )
-    const targetCommand = targetNode.content as SelectionCommand
-
-    if (sourceFolderIndex >= 0) {
-      const sourceFolder = folderArray.fields[sourceFolderIndex]
-
-      // 1. フォルダーのparentFolderIdを更新（ターゲットコマンドと同じ階層に移動）
-      folderArray.update(sourceFolderIndex, {
-        ...sourceFolder,
-        parentFolderId: targetCommand.parentFolderId,
-      })
-
-      // 2. フォルダー内のコマンドを移動（moveFolderContentsの実装を参考）
-      const sourceCommandIndices = commandArray.fields
-        .filter((f) => f.parentFolderId === sourceFolderId)
-        .map((f) => getCommandIndex(f.id))
-
-      if (sourceCommandIndices.length > 0) {
-        // ターゲットコマンドの位置を取得
-        const targetCommandIndex = getCommandIndex(targetNode.id)
-
-        // 挿入位置を決定
-        // moveCommands関数が内部でisMoveDown調整を行うため、targetCommandIndexをそのまま使用
-        const insertPosition = targetCommandIndex
-
-        // フォルダー内のコマンドをmoveCommands関数で移動
-        moveCommands(sourceCommandIndices, insertPosition)
-      }
-    }
-  }
-
-  const moveArray = (sourceId: string, targetId: string) => {
-    const sourceNode = flatten.find((f) => f.id === sourceId)
-    const targetNode = flatten.find((f) => f.id === targetId)
-    if (!sourceNode || !targetNode) return
-
-    const isMoveDown =
-      flatten.findIndex((f) => f.id === sourceId) <
-      flatten.findIndex((f) => f.id === targetId)
-
-    if (isCommand(sourceNode.content)) {
-      const sourceCommandIndex = getCommandIndex(sourceId)
-
-      if (isCommand(targetNode.content)) {
-        moveCommandToCommand(
-          sourceCommandIndex,
-          sourceNode.content,
-          targetNode.content,
-        )
-      } else {
-        moveCommandToFolder(
-          sourceCommandIndex,
-          sourceNode.content,
-          targetId,
-          isMoveDown,
-        )
-      }
-    } else {
-      // フォルダーをフォルダーにドラッグした場合
-      if (isFolder(targetNode.content)) {
-        if (isMoveDown) {
-          // 1-1) ドラッグしたフォルダがドロップ先よりも先頭にある場合、ドロップ先フォルダの配下の先頭に挿入
-          moveFolderAsSubfolder(sourceId, targetNode.id)
-        } else {
-          // 1-2) ドラッグしたフォルダがドロップ先よりも後方にある場合、
-          // ドロップ先フォルダと同じ階層でかつドロップ先フォルダの前方に挿入
-          moveFolderToSameLevel(sourceId, targetNode.id)
-        }
-      } else {
-        // フォルダーをコマンドにドラッグした場合
-        // moveCommands関数が適切にisMoveDown調整を行うため、両ケースとも同じ処理
-        moveFolderToCommandPosition(sourceId, targetNode)
-      }
+      commandActions.commandRemove(node.id)
     }
   }
 
@@ -801,141 +267,49 @@ export const CommandList = ({ control }: CommandListProps) => {
 
   return (
     <>
-      <div className="relative h-10 flex items-end">
-        <span className="text-sm bg-gray-100 px-2 py-0.5 rounded font-mono tracking-tight">
-          {commandArray.fields.length ?? 0}
-          {t('commands_desc_count')}
-        </span>
-        <Button
-          type="button"
-          ref={addFolderButtonRef}
-          variant="outline"
-          className="absolute left-[255px] px-2 w-24 rounded-md transition hover:bg-gray-100 hover:mr-1 hover:scale-[110%] group font-mono"
-          onClick={() => setFolderDialogOpen(true)}
-        >
-          <FolderPlus />
-          {t('folders')}
-        </Button>
-        <Tooltip
-          positionElm={addFolderButtonRef.current}
-          text={t('folders_tooltip')}
-        />
-        <Button
-          type="button"
-          ref={addCommandButtonRef}
-          variant="outline"
-          className="absolute left-[360px] px-2 w-24 rounded-md transition hover:bg-gray-100 hover:mr-1 hover:scale-[110%] group font-mono"
-          onClick={() => setCommandDialogOpen(true)}
-        >
-          <Terminal className="stroke-gray-600 group-hover:stroke-gray-700" />
-          {t('Command')}
-        </Button>
-        <Tooltip
-          positionElm={addCommandButtonRef.current}
-          text={t('Command_tooltip')}
-        />
-        <Button
-          variant="outline"
-          className="absolute right-0 translate-x-[-5%] pl-2 pr-2.5 w-32 rounded-md transition hover:bg-gray-100 hover:scale-[110%] group"
-          asChild
-        >
-          <a
-            href={`${HUB_URL}/?utm_source=optionPage&utm_medium=button`}
-            target="_blank"
-            className="font-mono text-gray-600 hover:text-gray-700"
-          >
-            <Search />
-            <span className="font-semibold">Command</span>
-            <span className="font-thin">Hub</span>
-          </a>
-        </Button>
-        <CommandEditDialog
-          open={commandDialogOpen}
-          onOpenChange={setCommandDialogOpen}
-          onSubmit={(command) => commandUpsert(command)}
-          folders={folderArray.fields}
-          command={editDataRef.current as SelectionCommand}
-        />
-        <FolderEditDialog
-          open={folderDialogOpen}
-          onOpenChange={setFolderDialogOpen}
-          onSubmit={(folder) => commandUpsert(folder)}
-          folder={editDataRef.current as CommandFolder}
-          folders={folderArray.fields}
-        />
-      </div>
+      <CommandActions
+        onAddCommand={() => setCommandDialogOpen(true)}
+        onAddFolder={() => setFolderDialogOpen(true)}
+        addCommandButtonRef={addCommandButtonRef}
+        addFolderButtonRef={addFolderButtonRef}
+        commandCount={commandArray.fields.length}
+      />
+      <CommandEditDialog
+        open={commandDialogOpen}
+        onOpenChange={setCommandDialogOpen}
+        onSubmit={(command) => commandUpsert(command)}
+        folders={folderArray.fields}
+        command={editDataRef.current as SelectionCommand}
+      />
+      <FolderEditDialog
+        open={folderDialogOpen}
+        onOpenChange={setFolderDialogOpen}
+        onSubmit={(folder) => commandUpsert(folder)}
+        folder={editDataRef.current as CommandFolder}
+        folders={folderArray.fields}
+      />
       <ul ref={commandsRef}>
         <DndContext
           sensors={sensors}
           collisionDetection={closestCenter}
           onDragStart={handleDragStart}
-          onDragEnd={handleDragEnd}
+          onDragEnd={handleDragEndWithReset}
         >
           <SortableContext
             items={flatten}
             strategy={verticalListSortingStrategy}
           >
-            {flatten.map((field, index) => (
-              <SortableItem
-                key={field.id}
-                id={field.id}
-                index={index}
-                level={calcLevel(field, folderArray.fields)}
-                droppable={isDroppable(field, activeNode, folderArray.fields)}
-                className={cn(
-                  isFolder(activeNode?.content) &&
-                    isCommand(field.content) &&
-                    isInFolder(field.content) &&
-                    'opacity-50 bg-gray-100',
-                )}
-              >
-                <div className="h-14 pr-2 pl-0 flex-1 flex items-center overflow-hidden">
-                  <div className="flex-1 flex items-center overflow-hidden pr-2">
-                    <MenuImage
-                      src={field.content.iconUrl}
-                      svg={
-                        isFolder(field.content)
-                          ? field.content.iconSvg
-                          : undefined
-                      }
-                      alt={field.content.title}
-                      className="inline-block w-7 h-7 mr-3"
-                    />
-                    <div className="overflow-hidden">
-                      <p className="text-lg flex flex-row">
-                        <span className="text-base truncate">
-                          {field.content.title}
-                        </span>
-                      </p>
-                      {isCommand(field.content) && (
-                        <p className="text-xs sm:text-sm text-gray-400 truncate">
-                          {field.content.searchUrl}
-                        </p>
-                      )}
-                    </div>
-                  </div>
-                  <div className="flex gap-0.5 items-center">
-                    {isPageActionCommand(field.content) && (
-                      <CopyButton
-                        srcTitle={field.content.title}
-                        onClick={(title) => commandCopy(index, title)}
-                      />
-                    )}
-                    <EditButton onClick={() => commandEditorOpen(index)} />
-                    <RemoveButton
-                      title={field.content.title}
-                      iconUrl={field.content.iconUrl}
-                      iconSvg={
-                        isFolder(field.content)
-                          ? field.content.iconSvg
-                          : undefined
-                      }
-                      onRemove={() => commandRemove(index)}
-                    />
-                  </div>
-                </div>
-              </SortableItem>
-            ))}
+            <CommandTreeRenderer
+              nodes={flatten}
+              folders={folderArray.fields}
+              activeNode={activeNode}
+              onEdit={commandEditorOpen}
+              onRemove={commandRemove}
+              onCopy={commandCopy}
+              isDroppable={(node, activeNode) =>
+                isDroppable(node, activeNode, folderArray.fields)
+              }
+            />
           </SortableContext>
         </DndContext>
       </ul>
diff --git a/src/components/option/editor/CommandTreeRenderer.tsx b/src/components/option/editor/CommandTreeRenderer.tsx
new file mode 100644
index 00000000..001ad994
--- /dev/null
+++ b/src/components/option/editor/CommandTreeRenderer.tsx
@@ -0,0 +1,100 @@
+import React from 'react'
+import { SortableItem } from '@/components/option/SortableItem'
+import { EditButton } from '@/components/option/EditButton'
+import { CopyButton } from '@/components/option/CopyButton'
+import { RemoveButton } from '@/components/option/RemoveButton'
+import { MenuImage } from '@/components/menu/MenuImage'
+import type { FlattenNode } from '@/services/commandTree'
+import type { CommandFolder } from '@/types'
+import {
+  isCommand,
+  isFolder,
+  isInFolder,
+  isPageActionCommand,
+} from '@/lib/commandUtils'
+import { calcLevel } from '@/services/commandTree'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  nodes: FlattenNode[]
+  folders: CommandFolder[]
+  activeNode?: FlattenNode
+  onEdit: (index: number) => void
+  onRemove: (index: number) => void
+  onCopy: (index: number, title: string) => void
+  isDroppable: (node: FlattenNode, activeNode?: FlattenNode) => boolean
+}
+
+export const CommandTreeRenderer: React.FC<Props> = ({
+  nodes,
+  folders,
+  activeNode,
+  onEdit,
+  onRemove,
+  onCopy,
+  isDroppable,
+}) => {
+  return (
+    <>
+      {nodes.map((field, index) => (
+        <SortableItem
+          key={field.id}
+          id={field.id}
+          index={index}
+          level={calcLevel(field, folders)}
+          droppable={isDroppable(field, activeNode)}
+          content={field.content}
+          folders={folders}
+          className={cn(
+            isFolder(activeNode?.content) &&
+              isCommand(field.content) &&
+              isInFolder(field.content) &&
+              'opacity-50 bg-gray-100',
+          )}
+        >
+          <div className="h-14 pr-2 pl-0 flex-1 flex items-center overflow-hidden">
+            <div className="flex-1 flex items-center overflow-hidden pr-2">
+              <MenuImage
+                src={field.content.iconUrl}
+                svg={
+                  isFolder(field.content) ? field.content.iconSvg : undefined
+                }
+                alt={field.content.title}
+                className="inline-block w-7 h-7 mr-3"
+              />
+              <div className="overflow-hidden">
+                <p className="text-lg flex flex-row">
+                  <span className="text-base truncate">
+                    {field.content.title}
+                  </span>
+                </p>
+                {isCommand(field.content) && (
+                  <p className="text-xs sm:text-sm text-gray-400 truncate">
+                    {field.content.searchUrl}
+                  </p>
+                )}
+              </div>
+            </div>
+            <div className="flex gap-0.5 items-center">
+              {isPageActionCommand(field.content) && (
+                <CopyButton
+                  srcTitle={field.content.title}
+                  onClick={(title) => onCopy(index, title)}
+                />
+              )}
+              <EditButton onClick={() => onEdit(index)} />
+              <RemoveButton
+                title={field.content.title}
+                iconUrl={field.content.iconUrl}
+                iconSvg={
+                  isFolder(field.content) ? field.content.iconSvg : undefined
+                }
+                onRemove={() => onRemove(index)}
+              />
+            </div>
+          </div>
+        </SortableItem>
+      ))}
+    </>
+  )
+}
diff --git a/src/components/option/editor/FolderEditDialog.tsx b/src/components/option/editor/FolderEditDialog.tsx
index 15ac3fd7..c0f843b2 100644
--- a/src/components/option/editor/FolderEditDialog.tsx
+++ b/src/components/option/editor/FolderEditDialog.tsx
@@ -22,23 +22,10 @@ import { SelectField } from '@/components/option/field/SelectField'
 import { isEmpty } from '@/lib/utils'
 import { t as _t } from '@/services/i18n'
 import { ROOT_FOLDER } from '@/const'
+import { folderSchema } from '@/types/schema'
 const t = (key: string, p?: string[]) => _t(`Option_${key}`, p)
 import type { CommandFolder } from '@/types'
 
-export const folderSchema = z
-  .object({
-    id: z.string(),
-    title: z.string().min(1, { message: t('zod_string_min', ['1']) }),
-    iconUrl: z.string().optional(),
-    iconSvg: z.string().optional(),
-    onlyIcon: z.boolean().optional(),
-    parentFolderId: z.string().optional(),
-  })
-  .refine((data) => !isEmpty(data.iconUrl) || !isEmpty(data.iconSvg), {
-    path: ['iconSvg'],
-    message: t('icon_required'),
-  })
-
 type FolderEditDialog = {
   open: boolean
   onOpenChange: (open: boolean) => void
diff --git a/src/components/option/editor/PageActionSection.tsx b/src/components/option/editor/PageActionSection.tsx
index 9c9e239c..9482aacb 100644
--- a/src/components/option/editor/PageActionSection.tsx
+++ b/src/components/option/editor/PageActionSection.tsx
@@ -18,28 +18,6 @@ import { InputEditor } from '@/components/pageAction/InputEditor'
 import { RemoveDialog } from '@/components/option/RemoveDialog'
 import { TypeIcon } from '@/components/pageAction/TypeIcon'
 
-export const pageActionSchema = z.object({
-  openMode: z.enum([OPEN_MODE.PAGE_ACTION]),
-  id: z.string(),
-  revision: z.number().optional(),
-  parentFolderId: z.string().optional(),
-  title: z
-    .string()
-    .min(1, { message: t('zod_string_min', ['1']) })
-    .default('Get Text Styles'),
-  iconUrl: z
-    .string()
-    .url({ message: t('zod_url') })
-    .max(1000, { message: t('zod_string_max', ['1000']) }),
-  popupOption: z
-    .object({
-      width: z.number().min(1),
-      height: z.number().min(1),
-    })
-    .optional(),
-  pageActionOption: PageActionOption,
-})
-
 type PageActionSectionProps = {
   form: any
   openRecorder: () => void
diff --git a/src/components/option/editor/ShortcutList.tsx b/src/components/option/editor/ShortcutList.tsx
index 5ea06ce8..666774f8 100644
--- a/src/components/option/editor/ShortcutList.tsx
+++ b/src/components/option/editor/ShortcutList.tsx
@@ -57,6 +57,7 @@ const groupCommandsByFolder = (
 
   // First, group commands by folder
   commands.forEach((command) => {
+    if (!command) return
     const folderId = command.parentFolderId || 'root'
     if (!commandsByFolder.has(folderId)) {
       commandsByFolder.set(folderId, [])
@@ -68,6 +69,7 @@ const groupCommandsByFolder = (
   const result: (SelectOptionType | SelectGroupType)[] = []
 
   commands.forEach((command) => {
+    if (!command) return
     const folderId = command.parentFolderId || 'root'
     const folderCommands = commandsByFolder.get(folderId)
 
@@ -221,7 +223,7 @@ export function ShortcutList({ control }: ShortcutListProps) {
 
           const targetId = shortcutValues[index]?.commandId
           const selectedCmd = userCommands.find(
-            (c: Command) => c.id === targetId,
+            (c: Command) => c?.id === targetId,
           )
           const showNoSel =
             selectedCmd && !isTextSelectionOnly(selectedCmd.openMode)
diff --git a/src/hooks/useCommandActions.ts b/src/hooks/useCommandActions.ts
new file mode 100644
index 00000000..920957b5
--- /dev/null
+++ b/src/hooks/useCommandActions.ts
@@ -0,0 +1,160 @@
+import { useCallback } from 'react'
+import { useFieldArray, UseFormReturn } from 'react-hook-form'
+import type { SettingsFormType } from '@/components/option/SettingForm'
+import type { Command } from '@/types'
+import { isCircularReference } from '@/lib/commandUtils'
+import { ROOT_FOLDER } from '@/const'
+import { CommandsSchemaType, FoldersSchemaType } from '@/types/schema'
+
+export const useCommandActions = (
+  _form: UseFormReturn<SettingsFormType>,
+  commandArray: ReturnType<
+    typeof useFieldArray<CommandsSchemaType, 'commands'>
+  >,
+  folderArray: ReturnType<typeof useFieldArray<FoldersSchemaType, 'folders'>>,
+) => {
+  const moveCommands = useCallback(
+    (from: number, to: number) => {
+      commandArray.move(from, to)
+    },
+    [commandArray],
+  )
+
+  const moveFolderAsSubfolder = useCallback(
+    (sourceFolderId: string, targetFolderId: string) => {
+      if (
+        isCircularReference(
+          sourceFolderId,
+          targetFolderId,
+          folderArray.fields as any,
+        )
+      ) {
+        return
+      }
+
+      const sourceFolderIndex = folderArray.fields.findIndex(
+        (f) => f.id === sourceFolderId,
+      )
+      if (sourceFolderIndex >= 0) {
+        const sourceFolder = folderArray.fields[sourceFolderIndex]
+        folderArray.update(sourceFolderIndex, {
+          ...sourceFolder,
+          parentFolderId: targetFolderId,
+        })
+      }
+    },
+    [folderArray],
+  )
+
+  const moveFolderToSameLevel = useCallback(
+    (sourceFolderId: string, targetParentId: string | undefined) => {
+      const sourceFolderIndex = folderArray.fields.findIndex(
+        (f) => f.id === sourceFolderId,
+      )
+      if (sourceFolderIndex >= 0) {
+        const sourceFolder = folderArray.fields[sourceFolderIndex]
+        folderArray.update(sourceFolderIndex, {
+          ...sourceFolder,
+          parentFolderId: targetParentId ?? ROOT_FOLDER,
+        })
+      }
+    },
+    [folderArray],
+  )
+
+  const moveFolderContents = useCallback(
+    (sourceFolderId: string, commands: Command[], targetIndex: number) => {
+      const folderCommands = commands
+        .map((cmd, index) => ({ ...cmd, originalIndex: index }))
+        .filter((cmd) => cmd.parentFolderId === sourceFolderId)
+        .sort((a, b) => a.originalIndex - b.originalIndex)
+
+      let currentTargetIndex = targetIndex
+      folderCommands.forEach((cmd) => {
+        moveCommands(cmd.originalIndex, currentTargetIndex)
+        currentTargetIndex++
+      })
+    },
+    [moveCommands],
+  )
+
+  const moveCommandIntoFolder = useCallback(
+    (commandId: string, folderId: string) => {
+      const idx = commandArray.fields.findIndex((c) => c.id === commandId)
+      if (idx >= 0) {
+        const command = commandArray.fields[idx]
+        commandArray.update(idx, {
+          ...command,
+          parentFolderId: folderId,
+        })
+      }
+    },
+    [commandArray],
+  )
+
+  const moveCommandToSameLevel = useCallback(
+    (commandId: string, parentId: string, distIndex: number) => {
+      const idx = commandArray.fields.findIndex((c) => c.id === commandId)
+      if (idx >= 0) {
+        const command = commandArray.fields[idx]
+        // Update parent folder first
+        commandArray.update(idx, {
+          ...command,
+          parentFolderId: parentId,
+        })
+        // Then move to target position
+        moveCommands(idx, distIndex)
+      }
+    },
+    [commandArray, moveCommands],
+  )
+
+  const commandRemove = useCallback(
+    (id: string) => {
+      const commandIndex = commandArray.fields.findIndex((c) => c.id === id)
+      if (commandIndex >= 0) {
+        commandArray.remove(commandIndex)
+        return
+      }
+
+      const folderIndex = folderArray.fields.findIndex((f) => f.id === id)
+      if (folderIndex >= 0) {
+        // Move child commands to root when removing folder
+        const childCommands = commandArray.fields
+          .map((cmd, index) => ({ ...cmd, index }))
+          .filter((cmd: any) => cmd.parentFolderId === id)
+
+        childCommands.forEach((cmd) => {
+          commandArray.update(cmd.index, {
+            ...cmd,
+            parentFolderId: ROOT_FOLDER,
+          })
+        })
+
+        const childFolders = folderArray.fields
+          .map((folder, index) => ({ ...folder, index }))
+          .filter((folder: any) => folder.parentFolderId === id)
+
+        childFolders.forEach((folder) => {
+          folderArray.update(folder.index, {
+            ...folder,
+            parentFolderId: ROOT_FOLDER,
+          })
+        })
+
+        folderArray.remove(folderIndex)
+      }
+    },
+    [commandArray, folderArray],
+  )
+
+  return {
+    moveCommands,
+    moveFolderAsSubfolder,
+    moveFolderToSameLevel,
+    moveFolderContents,
+    moveCommandIntoFolder,
+    moveCommandToSameLevel,
+    commandRemove,
+  }
+}
diff --git a/src/hooks/useCommandDragDrop.ts b/src/hooks/useCommandDragDrop.ts
new file mode 100644
index 00000000..40fd581c
--- /dev/null
+++ b/src/hooks/useCommandDragDrop.ts
@@ -0,0 +1,131 @@
+import { useCallback } from 'react'
+import type { DragEndEvent } from '@dnd-kit/core'
+import type { Command, CommandFolder } from '@/types'
+import { isFolder, isCommand } from '@/lib/commandUtils'
+import {
+  isValidDragTarget,
+  calculateFolderToFolderPosition,
+  calculateFolderToCommandPosition,
+  calculateCommandToFolderPosition,
+} from '@/services/dragAndDrop'
+import { useCommandActions } from './useCommandActions'
+import { toCommandTree } from '@/services/commandTree'
+
+export const useCommandDragDrop = (
+  commandActions: ReturnType<typeof useCommandActions>,
+  commands: Command[],
+  folders: CommandFolder[],
+) => {
+  const {
+    moveCommands,
+    moveFolderAsSubfolder,
+    moveFolderToSameLevel,
+    moveFolderContents,
+    moveCommandIntoFolder,
+    moveCommandToSameLevel,
+  } = commandActions
+  const tree = toCommandTree(commands, folders)
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event
+
+      if (!over || !isValidDragTarget(active, over)) {
+        return
+      }
+
+      const activeContent = active.data.current?.content
+      const overContent = over.data.current?.content
+
+      console.log('from', activeContent.title, 'dist', overContent.title)
+
+      // Folder to Folder drag
+      if (isFolder(activeContent) && isFolder(overContent)) {
+        const { targetIndex, newParentId } = calculateFolderToFolderPosition(
+          active,
+          over,
+          commands,
+        )
+
+        if (newParentId) {
+          // Move as subfolder
+          moveFolderAsSubfolder(activeContent.id, newParentId)
+        } else {
+          // Move to same level
+          moveFolderToSameLevel(activeContent.id, overContent.parentFolderId)
+        }
+
+        moveFolderContents(activeContent.id, commands, targetIndex)
+        return
+      }
+
+      // Folder to Command drag
+      if (isFolder(activeContent) && isCommand(overContent)) {
+        const targetIndex = calculateFolderToCommandPosition(
+          active,
+          over,
+          commands,
+        )
+        // Always move folder to same level as command
+        moveFolderToSameLevel(activeContent.id, overContent.parentFolderId)
+        moveFolderContents(activeContent.id, commands, targetIndex)
+        return
+      }
+
+      // Command to Folder drag
+      if (isCommand(activeContent) && isFolder(overContent)) {
+        const { targetIndex, newParentId } = calculateCommandToFolderPosition(
+          active,
+          over,
+          commands,
+          tree,
+        )
+
+        if (newParentId) {
+          // Move command into folder or to same level
+          if (newParentId === overContent.id) {
+            // 2-2-1: Move command into folder
+            moveCommandIntoFolder(activeContent.id, newParentId)
+          } else {
+            // 2-2-2: Move command to same level as folder (parent folder)
+            moveCommandToSameLevel(activeContent.id, newParentId, targetIndex)
+          }
+        }
+        return
+      }
+
+      // Command to Command drag (original functionality)
+      if (isCommand(activeContent) && isCommand(overContent)) {
+        const activeIndex = commands.findIndex(
+          (cmd) => cmd.id === activeContent.id,
+        )
+        const overIndex = commands.findIndex((cmd) => cmd.id === overContent.id)
+
+        if (activeIndex !== -1 && overIndex !== -1) {
+          // First, move command to same parent folder as target command
+          if (activeContent.parentFolderId !== overContent.parentFolderId) {
+            moveCommandToSameLevel(
+              activeContent.id,
+              overContent.parentFolderId,
+              overIndex,
+            )
+          } else {
+            // If already in same parent, just move position
+            moveCommands(activeIndex, overIndex)
+          }
+        }
+      }
+    },
+    [
+      commands,
+      moveCommands,
+      moveFolderAsSubfolder,
+      moveFolderToSameLevel,
+      moveFolderContents,
+      moveCommandIntoFolder,
+      moveCommandToSameLevel,
+    ],
+  )
+
+  return { handleDragEnd }
+}
diff --git a/src/lib/commandUtils.ts b/src/lib/commandUtils.ts
new file mode 100644
index 00000000..af909f99
--- /dev/null
+++ b/src/lib/commandUtils.ts
@@ -0,0 +1,62 @@
+import type { Command, CommandFolder, SelectionCommand, PageActionCommand } from '@/types'
+import { OPEN_MODE, ROOT_FOLDER } from '@/const'
+import { e2a, isEmpty } from '@/lib/utils'
+
+export function isCommand(
+  content: Command | CommandFolder | undefined,
+): content is SelectionCommand {
+  if (content == null) return false
+  if ('openMode' in content) {
+    return e2a(OPEN_MODE).includes(content.openMode)
+  }
+  return false
+}
+
+export function isPageActionCommand(
+  content: Command | CommandFolder | undefined,
+): content is PageActionCommand {
+  if (content == null) return false
+  if ('openMode' in content) {
+    return OPEN_MODE.PAGE_ACTION === content.openMode
+  }
+  return false
+}
+
+export function isFolder(
+  content: Command | CommandFolder | undefined,
+): content is CommandFolder {
+  if (content == null) return false
+  return !('openMode' in content)
+}
+
+export function isInFolder(content: Command | CommandFolder | undefined): boolean {
+  if (content == null) return false
+  const folderId = content.parentFolderId
+  return !isEmpty(folderId) && folderId !== ROOT_FOLDER
+}
+
+export function removeUnstoredParam(data: Command): Command {
+  delete (data as any)._id
+  return data
+}
+
+export const getDescendantFolderIds = (
+  folderId: string,
+  folders: CommandFolder[],
+): string[] => {
+  const children = folders.filter((f) => f.parentFolderId === folderId)
+  let descendants = children.map((f) => f.id)
+  for (const child of children) {
+    descendants = descendants.concat(getDescendantFolderIds(child.id, folders))
+  }
+  return descendants
+}
+
+export function isCircularReference(
+  draggedFolderId: string,
+  targetFolderId: string,
+  folders: CommandFolder[],
+): boolean {
+  const descendants = getDescendantFolderIds(draggedFolderId, folders)
+  return descendants.includes(targetFolderId)
+}
\ No newline at end of file
diff --git a/src/services/commandTree.ts b/src/services/commandTree.ts
new file mode 100644
index 00000000..57abf999
--- /dev/null
+++ b/src/services/commandTree.ts
@@ -0,0 +1,222 @@
+import type { Command, CommandFolder } from '@/types'
+import { ROOT_FOLDER } from '@/const'
+
+export type CommandTreeNode = {
+  type: 'command' | 'folder'
+  content: Command | CommandFolder
+  children?: CommandTreeNode[]
+}
+
+export type FlattenNode = {
+  id: string
+  index: number
+  content: Command | CommandFolder
+  firstChild?: boolean
+  lastChild?: boolean
+}
+
+const createFolderNode = (folder: CommandFolder): CommandTreeNode => ({
+  type: 'folder',
+  content: folder,
+  children: [],
+})
+
+export const findNodeInTree = (
+  tree: CommandTreeNode[],
+  id: string,
+): CommandTreeNode | null => {
+  for (const node of tree) {
+    if (node.content.id === id) {
+      return node
+    }
+    if (node.children) {
+      const found = findNodeInTree(node.children, id)
+      if (found) return found
+    }
+  }
+  return null
+}
+
+export const findFirstCommand = (
+  node: CommandTreeNode,
+): CommandTreeNode | null => {
+  if (node.children == null) return null
+  const first = node.children[0]
+  if (first == null) return null
+  if (first.type === 'folder') return findFirstCommand(first)
+  return first
+}
+
+const addParentFolderIfNeeded = (
+  tree: CommandTreeNode[],
+  parentFolderId: string,
+  folders: CommandFolder[],
+  processedFolders: Set<string>,
+  addNodeToTree: (
+    tree: CommandTreeNode[],
+    node: CommandTreeNode,
+    parentId?: string,
+  ) => void,
+) => {
+  if (parentFolderId === ROOT_FOLDER) return
+
+  const parentFolder = folders.find((f) => f.id === parentFolderId)
+  if (parentFolder && !processedFolders.has(parentFolder.id)) {
+    const folderNode = createFolderNode(parentFolder)
+    addNodeToTree(tree, folderNode, parentFolder.parentFolderId)
+    processedFolders.add(parentFolder.id)
+  }
+}
+
+const createAddNodeToTreeFunction = (
+  folders: CommandFolder[],
+  processedFolders: Set<string>,
+) => {
+  const addNodeToTree = (
+    tree: CommandTreeNode[],
+    node: CommandTreeNode,
+    parentId?: string,
+  ) => {
+    if (parentId && parentId !== ROOT_FOLDER) {
+      const parent = findNodeInTree(tree, parentId)
+      if (parent) {
+        if (!parent.children) parent.children = []
+        parent.children.push(node)
+      } else {
+        addParentFolderIfNeeded(
+          tree,
+          parentId,
+          folders,
+          processedFolders,
+          addNodeToTree,
+        )
+        addNodeToTree(tree, node, parentId)
+      }
+    } else {
+      tree.push(node)
+    }
+  }
+  return addNodeToTree
+}
+
+const addCommandsToTree = (
+  tree: CommandTreeNode[],
+  commands: Command[],
+  folders: CommandFolder[],
+  processedFolders: Set<string>,
+  addNodeToTree: (
+    tree: CommandTreeNode[],
+    node: CommandTreeNode,
+    parentId?: string,
+  ) => void,
+) => {
+  commands.forEach((command) => {
+    const commandNode: CommandTreeNode = {
+      type: 'command',
+      content: command,
+    }
+
+    if (command.parentFolderId && command.parentFolderId !== ROOT_FOLDER) {
+      addParentFolderIfNeeded(
+        tree,
+        command.parentFolderId,
+        folders,
+        processedFolders,
+        addNodeToTree,
+      )
+    }
+
+    addNodeToTree(tree, commandNode, command.parentFolderId)
+  })
+}
+
+const addRemainingFoldersToTree = (
+  tree: CommandTreeNode[],
+  folders: CommandFolder[],
+  processedFolders: Set<string>,
+  addNodeToTree: (
+    tree: CommandTreeNode[],
+    node: CommandTreeNode,
+    parentId?: string,
+  ) => void,
+) => {
+  folders.forEach((folder) => {
+    if (!processedFolders.has(folder.id)) {
+      const folderNode = createFolderNode(folder)
+      addNodeToTree(tree, folderNode, folder.parentFolderId)
+      processedFolders.add(folder.id)
+    }
+  })
+}
+
+export function toCommandTree(
+  commands: Command[],
+  folders: CommandFolder[],
+): CommandTreeNode[] {
+  const tree: CommandTreeNode[] = []
+  const processedFolders = new Set<string>()
+
+  const addNodeToTree = createAddNodeToTreeFunction(folders, processedFolders)
+  addCommandsToTree(tree, commands, folders, processedFolders, addNodeToTree)
+  addRemainingFoldersToTree(tree, folders, processedFolders, addNodeToTree)
+
+  return tree
+}
+
+function _toFlatten(
+  tree: CommandTreeNode[],
+  flatten: FlattenNode[] = [],
+): FlattenNode[] {
+  for (const node of tree) {
+    if (node.type === 'command') {
+      flatten.push({
+        id: node.content.id,
+        content: node.content,
+        index: 0,
+      })
+    } else {
+      flatten.push({
+        id: node.content.id,
+        content: node.content,
+        index: 0,
+      })
+
+      if (node.children && node.children.length > 0) {
+        const beforeChildrenLength = flatten.length
+        _toFlatten(node.children, flatten)
+        const afterChildrenLength = flatten.length
+
+        if (beforeChildrenLength < afterChildrenLength) {
+          flatten[beforeChildrenLength].firstChild = true
+        }
+        if (afterChildrenLength > beforeChildrenLength) {
+          flatten[afterChildrenLength - 1].lastChild = true
+        }
+      }
+    }
+  }
+  return flatten
+}
+
+export function toFlatten(tree: CommandTreeNode[]): FlattenNode[] {
+  let flatten = _toFlatten(tree)
+  flatten = flatten.map((node, index) => ({ ...node, index }))
+  return flatten
+}
+
+export function calcLevel(node: FlattenNode, folders: CommandFolder[]): number {
+  const calculateDepth = (parentFolderId?: string): number => {
+    if (!parentFolderId || parentFolderId === ROOT_FOLDER) {
+      return 0
+    }
+
+    const parentFolder = folders.find((f) => f.id === parentFolderId)
+    if (!parentFolder) {
+      return 0
+    }
+
+    return 1 + calculateDepth(parentFolder.parentFolderId)
+  }
+
+  return calculateDepth(node.content.parentFolderId)
+}
diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
new file mode 100644
index 00000000..f8266db0
--- /dev/null
+++ b/src/services/dragAndDrop.ts
@@ -0,0 +1,116 @@
+import type { Active, Over } from '@dnd-kit/core'
+import type { Command, CommandFolder } from '@/types'
+import type { CommandTreeNode } from '@/services/commandTree'
+import { findNodeInTree, findFirstCommand } from '@/services/commandTree'
+import { isCommand, isFolder, isCircularReference } from '@/lib/commandUtils'
+import { ROOT_FOLDER } from '@/const'
+
+/**
+ * Checks if a drag operation between two content items is valid.
+ * Prevents invalid drops such as self-drops and circular folder references.
+ *
+ * @param activeContent - The content being dragged
+ * @param overContent - The content being dropped onto
+ * @param folders - Array of all folders for circular reference checking
+ * @returns true if the drop is valid, false otherwise
+ */
+export const isValidDrop = (
+  activeContent: Command | CommandFolder | null | undefined,
+  overContent: Command | CommandFolder | null | undefined,
+  folders: CommandFolder[] = [],
+): boolean => {
+  if (!activeContent || !overContent) return false
+  if (activeContent.id === overContent.id) return false
+
+  if (isCommand(activeContent)) return true
+
+  if (isFolder(activeContent) && isFolder(overContent)) {
+    return !isCircularReference(activeContent.id, overContent.id, folders)
+  }
+
+  return true
+}
+
+export type DragInfo = {
+  active: Active
+  over: Over | null
+}
+
+export const isValidDragTarget = (active: Active, over: Over): boolean => {
+  if (!active || !over) return false
+
+  const activeData = active.data.current?.content
+  const overData = over.data.current?.content
+  const folders = active.data.current?.folders || []
+
+  return isValidDrop(activeData, overData, folders)
+}
+
+export const isForwardDrag = (active: Active, over: Over): boolean => {
+  const activeIndex = active.data.current?.sortable?.index
+  const overIndex = over.data.current?.sortable?.index
+  return typeof activeIndex === 'number' && typeof overIndex === 'number'
+    ? activeIndex < overIndex
+    : false
+}
+
+export const calculateFolderToFolderPosition = (
+  active: Active,
+  over: Over,
+  commands: Command[],
+): { targetIndex: number; newParentId?: string } => {
+  const isForward = isForwardDrag(active, over)
+  const droppedFolder = over.data.current?.content as CommandFolder
+  const firstChildIndex = commands.findIndex(
+    (cmd) => cmd.parentFolderId === droppedFolder.id,
+  )
+
+  return {
+    targetIndex: firstChildIndex >= 0 ? firstChildIndex : commands.length,
+    newParentId: isForward
+      ? droppedFolder.id
+      : droppedFolder.parentFolderId || ROOT_FOLDER,
+  }
+}
+
+export const calculateFolderToCommandPosition = (
+  active: Active,
+  over: Over,
+  commands: Command[],
+): number => {
+  const isForward = isForwardDrag(active, over)
+  const droppedCommand = over.data.current?.content as Command
+  const droppedCommandIndex = commands.findIndex(
+    (cmd) => cmd.id === droppedCommand.id,
+  )
+
+  if (droppedCommandIndex === -1) return commands.length
+
+  // qqq 上からドラッグした際のインデックスの計算方法
+  return isForward ? droppedCommandIndex + 1 : droppedCommandIndex
+}
+
+export const calculateCommandToFolderPosition = (
+  active: Active,
+  over: Over,
+  commands: Command[],
+  tree: CommandTreeNode[],
+): { targetIndex: number; newParentId?: string } => {
+  const isForward = isForwardDrag(active, over)
+  const droppedFolder = over.data.current?.content as CommandFolder
+  const folderNode = findNodeInTree(tree, droppedFolder.id)
+  let firstChildIndex = -1
+  if (folderNode) {
+    const firstCommand = findFirstCommand(folderNode)
+    firstChildIndex = commands.findIndex(
+      (c) => c.id === firstCommand?.content.id,
+    )
+  }
+
+  return {
+    targetIndex: firstChildIndex >= 0 ? firstChildIndex : commands.length,
+    newParentId: isForward
+      ? droppedFolder.id
+      : droppedFolder.parentFolderId || ROOT_FOLDER,
+  }
+}
diff --git a/src/types/schema.ts b/src/types/schema.ts
index 6a2506e4..0364c182 100644
--- a/src/types/schema.ts
+++ b/src/types/schema.ts
@@ -2,6 +2,10 @@ import { z } from 'zod'
 import {
   ALIGN,
   SIDE,
+  OPEN_MODE,
+  SPACE_ENCODING,
+  COPY_OPTION,
+  COMMAND_MAX,
   PAGE_ACTION_OPEN_MODE,
   PAGE_ACTION_EVENT,
   PAGE_ACTION_CONTROL,
@@ -9,21 +13,122 @@ import {
   SHORTCUT_PLACEHOLDER,
   SHORTCUT_NO_SELECTION_BEHAVIOR,
 } from '@/const'
+
 import { t } from '@/services/i18n'
+import { isEmpty } from '@/lib/utils'
 
-export const PopupPlacementSchema = z.object({
-  side: z.nativeEnum(SIDE),
-  align: z.nativeEnum(ALIGN),
-  sideOffset: z
-    .number({ message: t('Option_zod_number') })
-    .min(0, { message: t('Option_zod_number_min', ['0']) })
-    .max(100, { message: t('Option_zod_number_max', ['100']) })
-    .default(0),
-  alignOffset: z
-    .number({ message: t('Option_zod_number') })
-    .min(-100, { message: t('Option_zod_number_min', ['-100']) })
-    .max(100, { message: t('Option_zod_number_max', ['100']) })
-    .default(0),
+export const SEARCH_OPEN_MODE = [
+  OPEN_MODE.POPUP,
+  OPEN_MODE.TAB,
+  OPEN_MODE.WINDOW,
+] as const
+
+const searchSchema = z.object({
+  openMode: z.enum(SEARCH_OPEN_MODE),
+  id: z.string(),
+  revision: z.number().optional(),
+  title: z.string().min(1, { message: t('zod_string_min', ['1']) }),
+  iconUrl: z
+    .string()
+    .url({ message: t('zod_url') })
+    .max(1000, { message: t('zod_string_max', ['1000']) }),
+  searchUrl: z.string().url({ message: t('zod_url') }),
+  parentFolderId: z.string().optional(),
+  openModeSecondary: z.enum(SEARCH_OPEN_MODE),
+  spaceEncoding: z.nativeEnum(SPACE_ENCODING),
+  popupOption: z
+    .object({
+      width: z.number().min(1),
+      height: z.number().min(1),
+    })
+    .optional(),
+})
+
+type SearchType = z.infer<typeof searchSchema>
+
+export const isSearchType = (data: any): data is SearchType => {
+  return SEARCH_OPEN_MODE.includes(data.openMode)
+}
+
+const apiSchema = z.object({
+  openMode: z.literal(OPEN_MODE.API),
+  id: z.string(),
+  revision: z.number().optional(),
+  title: z.string().min(1, { message: t('zod_string_min', ['1']) }),
+  iconUrl: z
+    .string()
+    .url({ message: t('zod_url') })
+    .max(1000, { message: t('zod_string_max', ['1000']) }),
+  searchUrl: z.string().url({ message: t('zod_url') }),
+  parentFolderId: z.string().optional(),
+  fetchOptions: z.string().optional(),
+  variables: z
+    .array(
+      z.object({
+        name: z.string({ message: t('zod_string_min', ['1']) }),
+        value: z.string({ message: t('zod_string_min', ['1']) }),
+      }),
+    )
+    .optional(),
+})
+
+const linkPopupSchema = z.object({
+  openMode: z.enum([OPEN_MODE.LINK_POPUP]),
+  id: z.string(),
+  revision: z.number().optional(),
+  parentFolderId: z.string().optional(),
+  title: z
+    .string()
+    .min(1, { message: t('zod_string_min', ['1']) })
+    .default('Link Popup'),
+  iconUrl: z
+    .string()
+    .url({ message: t('zod_url') })
+    .max(1000, { message: t('zod_string_max', ['1000']) })
+    .default(
+      'https://cdn4.iconfinder.com/data/icons/basic-ui-2-line/32/folder-archive-document-archives-fold-1024.png',
+    ),
+  popupOption: z.object({
+    width: z.number().min(1),
+    height: z.number().min(1),
+  }),
+})
+
+const copySchema = z.object({
+  openMode: z.enum([OPEN_MODE.COPY]),
+  id: z.string(),
+  revision: z.number().optional(),
+  parentFolderId: z.string().optional(),
+  title: z
+    .string()
+    .min(1, { message: t('zod_string_min', ['1']) })
+    .default('Copy text'),
+  iconUrl: z
+    .string()
+    .url({ message: t('zod_url') })
+    .max(1000, { message: t('zod_string_max', ['1000']) })
+    .default(
+      'https://cdn0.iconfinder.com/data/icons/phosphor-light-vol-2/256/copy-light-1024.png',
+    ),
+  copyOption: z.nativeEnum(COPY_OPTION).default(COPY_OPTION.DEFAULT),
+})
+
+const textStyleSchema = z.object({
+  openMode: z.enum([OPEN_MODE.GET_TEXT_STYLES]),
+  id: z.string(),
+  revision: z.number().optional(),
+  parentFolderId: z.string().optional(),
+  title: z
+    .string()
+    .min(1, { message: t('zod_string_min', ['1']) })
+    .default('Get Text Styles'),
+  iconUrl: z
+    .string()
+    .url({ message: t('zod_url') })
+    .max(1000, { message: t('zod_string_max', ['1000']) })
+    .default(
+      'https://cdn0.iconfinder.com/data/icons/phosphor-light-vol-3/256/paint-brush-light-1024.png',
+    ),
 })
 
 const PageActionStartSchema = z.object({
@@ -100,6 +205,79 @@ export const PageActionOption = z.object({
   steps: z.array(PageActionStepSchema),
 })
 
+const pageActionSchema = z.object({
+  openMode: z.enum([OPEN_MODE.PAGE_ACTION]),
+  id: z.string(),
+  revision: z.number().optional(),
+  parentFolderId: z.string().optional(),
+  title: z
+    .string()
+    .min(1, { message: t('zod_string_min', ['1']) })
+    .default('Get Text Styles'),
+  iconUrl: z
+    .string()
+    .url({ message: t('zod_url') })
+    .max(1000, { message: t('zod_string_max', ['1000']) }),
+  popupOption: z
+    .object({
+      width: z.number().min(1),
+      height: z.number().min(1),
+    })
+    .optional(),
+  pageActionOption: PageActionOption,
+})
+
+export const commandSchema = z.discriminatedUnion('openMode', [
+  searchSchema,
+  apiSchema,
+  pageActionSchema,
+  linkPopupSchema,
+  copySchema,
+  textStyleSchema,
+])
+
+const commandsSchema = z.object({
+  commands: z.array(commandSchema).min(1).max(COMMAND_MAX),
+})
+
+export type CommandSchemaType = z.infer<typeof commandSchema>
+export type CommandsSchemaType = z.infer<typeof commandsSchema>
+
+export const folderSchema = z
+  .object({
+    id: z.string(),
+    title: z.string().min(1, { message: t('zod_string_min', ['1']) }),
+    iconUrl: z.string().optional(),
+    iconSvg: z.string().optional(),
+    onlyIcon: z.boolean().optional(),
+    parentFolderId: z.string().optional(),
+  })
+  .refine((data) => !isEmpty(data.iconUrl) || !isEmpty(data.iconSvg), {
+    path: ['iconSvg'],
+    message: t('icon_required'),
+  })
+
+const foldersSchema = z.object({
+  folders: z.array(folderSchema),
+})
+
+export type FoldersSchemaType = z.infer<typeof foldersSchema>
+
+export const PopupPlacementSchema = z.object({
+  side: z.nativeEnum(SIDE),
+  align: z.nativeEnum(ALIGN),
+  sideOffset: z
+    .number({ message: t('Option_zod_number') })
+    .min(0, { message: t('Option_zod_number_min', ['0']) })
+    .max(100, { message: t('Option_zod_number_max', ['100']) })
+    .default(0),
+  alignOffset: z
+    .number({ message: t('Option_zod_number') })
+    .min(-100, { message: t('Option_zod_number_min', ['-100']) })
+    .max(100, { message: t('Option_zod_number_max', ['100']) })
+    .default(0),
+})
+
 export const ShortcutCommandSchema = z.object({
   id: z.string(),
   commandId: z.string().default(SHORTCUT_PLACEHOLDER),

From 8d384a604cec85a75122903ab3ed769afa40faec Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 25 Jun 2025 22:17:14 +0900
Subject: [PATCH 09/64] Update: Enables to DnD folders and commands.

---
 src/components/option/SettingForm.tsx        |  2 +-
 src/components/option/editor/CommandList.tsx |  6 +--
 src/hooks/useCommandActions.ts               | 48 ++++++++++++-------
 src/hooks/useCommandDragDrop.ts              | 26 +++++------
 src/services/commandTree.ts                  | 24 ++++++++++
 src/services/dragAndDrop.ts                  | 49 ++++++++++++++++----
 6 files changed, 106 insertions(+), 49 deletions(-)

diff --git a/src/components/option/SettingForm.tsx b/src/components/option/SettingForm.tsx
index 983113ba..829bc7b3 100644
--- a/src/components/option/SettingForm.tsx
+++ b/src/components/option/SettingForm.tsx
@@ -200,7 +200,7 @@ export function SettingForm({ className }: { className?: string }) {
       // sort commands
       const commandTree = toCommandTree(settings.commands, settings.folders)
       const commands = toFlatten(commandTree)
-        .map((f) => f.content)
+        .map((f: any) => f.content)
         .filter(isCommand)
         .map(removeUnstoredParam)
 
diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index 9e464a08..db4f3b59 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -168,11 +168,7 @@ export const CommandList = ({ control }: CommandListProps) => {
   }
 
   // Initialize command actions and drag drop functionality
-  const commandActions = useCommandActions(
-    formInstance,
-    commandArray,
-    folderArray,
-  )
+  const commandActions = useCommandActions(commandArray, folderArray)
 
   const { handleDragEnd } = useCommandDragDrop(
     commandActions,
diff --git a/src/hooks/useCommandActions.ts b/src/hooks/useCommandActions.ts
index 920957b5..53dc3a3a 100644
--- a/src/hooks/useCommandActions.ts
+++ b/src/hooks/useCommandActions.ts
@@ -1,18 +1,22 @@
 import { useCallback } from 'react'
-import { useFieldArray, UseFormReturn } from 'react-hook-form'
-import type { SettingsFormType } from '@/components/option/SettingForm'
-import type { Command } from '@/types'
+import { useFieldArray } from 'react-hook-form'
+import { toCommandTree } from '@/services/commandTree'
 import { isCircularReference } from '@/lib/commandUtils'
 import { ROOT_FOLDER } from '@/const'
 import { CommandsSchemaType, FoldersSchemaType } from '@/types/schema'
+import {
+  findNodeInTree,
+  getAllCommandsFromFolder,
+} from '@/services/commandTree'
 
 export const useCommandActions = (
-  _form: UseFormReturn<SettingsFormType>,
   commandArray: ReturnType<
     typeof useFieldArray<CommandsSchemaType, 'commands'>
   >,
   folderArray: ReturnType<typeof useFieldArray<FoldersSchemaType, 'folders'>>,
 ) => {
+  const tree = toCommandTree(commandArray.fields, folderArray.fields)
+
   const moveCommands = useCallback(
     (from: number, to: number) => {
       commandArray.move(from, to)
@@ -63,19 +67,27 @@ export const useCommandActions = (
   )
 
   const moveFolderContents = useCallback(
-    (sourceFolderId: string, commands: Command[], targetIndex: number) => {
-      const folderCommands = commands
-        .map((cmd, index) => ({ ...cmd, originalIndex: index }))
-        .filter((cmd) => cmd.parentFolderId === sourceFolderId)
-        .sort((a, b) => a.originalIndex - b.originalIndex)
-
-      let currentTargetIndex = targetIndex
-      folderCommands.forEach((cmd) => {
-        moveCommands(cmd.originalIndex, currentTargetIndex)
-        currentTargetIndex++
-      })
+    (sourceFolderId: string, targetIndex: number, firstChildIndex: number) => {
+      const folderNode = findNodeInTree(tree, sourceFolderId)
+      if (!folderNode) {
+        return
+      }
+      const folderCommands = getAllCommandsFromFolder(folderNode)
+      const isForwardDrag = targetIndex > firstChildIndex
+      if (isForwardDrag) {
+        folderCommands.forEach(() => {
+          moveCommands(firstChildIndex, targetIndex)
+        })
+      } else {
+        let currentTargetIndex = targetIndex
+        folderCommands.forEach((cmd) => {
+          const idx = commandArray.fields.findIndex((c) => c.id === cmd.id)
+          moveCommands(idx, currentTargetIndex)
+          currentTargetIndex++
+        })
+      }
     },
-    [moveCommands],
+    [tree, commandArray, moveCommands],
   )
 
   const moveCommandIntoFolder = useCallback(
@@ -93,7 +105,7 @@ export const useCommandActions = (
   )
 
   const moveCommandToSameLevel = useCallback(
-    (commandId: string, parentId: string, distIndex: number) => {
+    (commandId: string, distIndex: number, parentId = ROOT_FOLDER) => {
       const idx = commandArray.fields.findIndex((c) => c.id === commandId)
       if (idx >= 0) {
         const command = commandArray.fields[idx]
@@ -145,7 +157,7 @@ export const useCommandActions = (
         folderArray.remove(folderIndex)
       }
     },
-    [commandArray, folderArray],
+    [tree, commandArray, folderArray],
   )
 
   return {
diff --git a/src/hooks/useCommandDragDrop.ts b/src/hooks/useCommandDragDrop.ts
index 40fd581c..dba89935 100644
--- a/src/hooks/useCommandDragDrop.ts
+++ b/src/hooks/useCommandDragDrop.ts
@@ -41,11 +41,8 @@ export const useCommandDragDrop = (
 
       // Folder to Folder drag
       if (isFolder(activeContent) && isFolder(overContent)) {
-        const { targetIndex, newParentId } = calculateFolderToFolderPosition(
-          active,
-          over,
-          commands,
-        )
+        const { targetIndex, firstChildIndex, newParentId } =
+          calculateFolderToFolderPosition(active, over, commands, tree)
 
         if (newParentId) {
           // Move as subfolder
@@ -54,21 +51,19 @@ export const useCommandDragDrop = (
           // Move to same level
           moveFolderToSameLevel(activeContent.id, overContent.parentFolderId)
         }
-
-        moveFolderContents(activeContent.id, commands, targetIndex)
+        if (targetIndex !== firstChildIndex) {
+          moveFolderContents(activeContent.id, targetIndex, firstChildIndex)
+        }
         return
       }
 
       // Folder to Command drag
       if (isFolder(activeContent) && isCommand(overContent)) {
-        const targetIndex = calculateFolderToCommandPosition(
-          active,
-          over,
-          commands,
-        )
+        const { targetIndex, firstChildIndex } =
+          calculateFolderToCommandPosition(active, over, commands, tree)
         // Always move folder to same level as command
         moveFolderToSameLevel(activeContent.id, overContent.parentFolderId)
-        moveFolderContents(activeContent.id, commands, targetIndex)
+        moveFolderContents(activeContent.id, targetIndex, firstChildIndex)
         return
       }
 
@@ -88,7 +83,7 @@ export const useCommandDragDrop = (
             moveCommandIntoFolder(activeContent.id, newParentId)
           } else {
             // 2-2-2: Move command to same level as folder (parent folder)
-            moveCommandToSameLevel(activeContent.id, newParentId, targetIndex)
+            moveCommandToSameLevel(activeContent.id, targetIndex, newParentId)
           }
         }
         return
@@ -106,8 +101,8 @@ export const useCommandDragDrop = (
           if (activeContent.parentFolderId !== overContent.parentFolderId) {
             moveCommandToSameLevel(
               activeContent.id,
-              overContent.parentFolderId,
               overIndex,
+              overContent.parentFolderId,
             )
           } else {
             // If already in same parent, just move position
@@ -117,6 +112,7 @@ export const useCommandDragDrop = (
       }
     },
     [
+      tree,
       commands,
       moveCommands,
       moveFolderAsSubfolder,
diff --git a/src/services/commandTree.ts b/src/services/commandTree.ts
index 57abf999..60552e24 100644
--- a/src/services/commandTree.ts
+++ b/src/services/commandTree.ts
@@ -155,6 +155,9 @@ export function toCommandTree(
 ): CommandTreeNode[] {
   const tree: CommandTreeNode[] = []
   const processedFolders = new Set<string>()
+  if (commands == null || (commands.length === 0 && folders.length === 0)) {
+    return tree
+  }
 
   const addNodeToTree = createAddNodeToTreeFunction(folders, processedFolders)
   addCommandsToTree(tree, commands, folders, processedFolders, addNodeToTree)
@@ -220,3 +223,24 @@ export function calcLevel(node: FlattenNode, folders: CommandFolder[]): number {
 
   return calculateDepth(node.content.parentFolderId)
 }
+
+export function getAllCommandsFromFolder(
+  folderNode: CommandTreeNode,
+): Command[] {
+  const commands: Command[] = []
+
+  const collectCommands = (node: CommandTreeNode) => {
+    if (node.type === 'command') {
+      commands.push(node.content as Command)
+    }
+
+    if (node.children) {
+      for (const child of node.children) {
+        collectCommands(child)
+      }
+    }
+  }
+
+  collectCommands(folderNode)
+  return commands
+}
diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
index f8266db0..7bc38291 100644
--- a/src/services/dragAndDrop.ts
+++ b/src/services/dragAndDrop.ts
@@ -58,15 +58,31 @@ export const calculateFolderToFolderPosition = (
   active: Active,
   over: Over,
   commands: Command[],
-): { targetIndex: number; newParentId?: string } => {
+  tree: CommandTreeNode[],
+): { targetIndex: number; firstChildIndex: number; newParentId?: string } => {
   const isForward = isForwardDrag(active, over)
+  const activeFolder = active.data.current?.content as CommandFolder
+  const activeNode = findNodeInTree(tree, activeFolder.id)
   const droppedFolder = over.data.current?.content as CommandFolder
-  const firstChildIndex = commands.findIndex(
-    (cmd) => cmd.parentFolderId === droppedFolder.id,
-  )
+  const droppedNode = findNodeInTree(tree, droppedFolder.id)
+
+  let firstChildIndex = -1
+  if (activeNode) {
+    const firstCommand = findFirstCommand(activeNode)
+    firstChildIndex = commands.findIndex(
+      (c) => c.id === firstCommand?.content.id,
+    )
+  }
+
+  let targetIndex = -1
+  if (droppedNode) {
+    const firstCommand = findFirstCommand(droppedNode)
+    targetIndex = commands.findIndex((c) => c.id === firstCommand?.content.id)
+  }
 
   return {
-    targetIndex: firstChildIndex >= 0 ? firstChildIndex : commands.length,
+    targetIndex: targetIndex >= 0 ? targetIndex : commands.length,
+    firstChildIndex,
     newParentId: isForward
       ? droppedFolder.id
       : droppedFolder.parentFolderId || ROOT_FOLDER,
@@ -77,17 +93,29 @@ export const calculateFolderToCommandPosition = (
   active: Active,
   over: Over,
   commands: Command[],
-): number => {
-  const isForward = isForwardDrag(active, over)
+  tree: CommandTreeNode[],
+): { targetIndex: number; firstChildIndex: number } => {
   const droppedCommand = over.data.current?.content as Command
   const droppedCommandIndex = commands.findIndex(
     (cmd) => cmd.id === droppedCommand.id,
   )
 
-  if (droppedCommandIndex === -1) return commands.length
+  let firstChildIndex = -1
+  const folderNode = findNodeInTree(tree, active.data.current?.content.id)
+  if (folderNode) {
+    const firstCommand = findFirstCommand(folderNode)
+    firstChildIndex = commands.findIndex(
+      (c) => c.id === firstCommand?.content.id,
+    )
+  }
+
+  if (droppedCommandIndex === -1)
+    return { targetIndex: commands.length, firstChildIndex }
 
-  // qqq 上からドラッグした際のインデックスの計算方法
-  return isForward ? droppedCommandIndex + 1 : droppedCommandIndex
+  return {
+    targetIndex: droppedCommandIndex,
+    firstChildIndex,
+  }
 }
 
 export const calculateCommandToFolderPosition = (
@@ -99,6 +127,7 @@ export const calculateCommandToFolderPosition = (
   const isForward = isForwardDrag(active, over)
   const droppedFolder = over.data.current?.content as CommandFolder
   const folderNode = findNodeInTree(tree, droppedFolder.id)
+
   let firstChildIndex = -1
   if (folderNode) {
     const firstCommand = findFirstCommand(folderNode)

From 4ff9259d34792f957fa7b6b11bd03a15f0797793 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 26 Jun 2025 12:28:11 +0900
Subject: [PATCH 10/64] Fix: Folder to Folder dnd.

---
 src/services/dragAndDrop.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
index 7bc38291..b190dbbf 100644
--- a/src/services/dragAndDrop.ts
+++ b/src/services/dragAndDrop.ts
@@ -74,14 +74,14 @@ export const calculateFolderToFolderPosition = (
     )
   }
 
-  let targetIndex = -1
+  let targetIndex = commands.length
   if (droppedNode) {
     const firstCommand = findFirstCommand(droppedNode)
     targetIndex = commands.findIndex((c) => c.id === firstCommand?.content.id)
   }
 
   return {
-    targetIndex: targetIndex >= 0 ? targetIndex : commands.length,
+    targetIndex: isForward ? targetIndex - 1 : targetIndex,
     firstChildIndex,
     newParentId: isForward
       ? droppedFolder.id

From 2099318826cecaf0ef0e22c7a78a27bb7bf0077c Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 26 Jun 2025 22:24:58 +0900
Subject: [PATCH 11/64] Update: Add debounce for storage.

---
 src/components/option/editor/CommandList.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index db4f3b59..dceabcc8 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -106,8 +106,6 @@ type CommandListProps = {
 }
 
 export const CommandList = ({ control }: CommandListProps) => {
-  // Create form instance for command actions
-  const formInstance = { control } as any
   const [draggingId, setDraggingId] = useState<string | null>(null)
   const [commandDialogOpen, _setCommandDialogOpen] = useState(false)
   const [folderDialogOpen, _setFolderDialogOpen] = useState(false)

From 72abb85b222c5a9875ed90f42e63e3fde7401af4 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 26 Jun 2025 22:48:38 +0900
Subject: [PATCH 12/64] Update: Don't filter command.

---
 src/components/option/editor/CommandList.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index dceabcc8..a60eba88 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -83,10 +83,12 @@ function commandsFilter(
   folders: CommandFolder[] = [],
 ): FlattenNode[] {
   if (!draggingId) return nodes
-
+  const draggingNode = nodes.find((n) => n.id === draggingId)
+  if (isCommand(draggingNode?.content)) {
+    return nodes
+  }
   const descendantFolderIds = getDescendantFolderIds(draggingId, folders)
   const hiddenFolderIds = new Set([draggingId, ...descendantFolderIds])
-
   return nodes.filter(
     (node) => !isDescendantOfHiddenFolder(node, hiddenFolderIds),
   )

From 40d674361936d6fd561a25c345fd5c190cfac060 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 26 Jun 2025 22:56:11 +0900
Subject: [PATCH 13/64] Fix: Remove unnecessary code.

---
 src/services/dragAndDrop.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
index b190dbbf..1d24ed79 100644
--- a/src/services/dragAndDrop.ts
+++ b/src/services/dragAndDrop.ts
@@ -20,7 +20,6 @@ export const isValidDrop = (
   folders: CommandFolder[] = [],
 ): boolean => {
   if (!activeContent || !overContent) return false
-  if (activeContent.id === overContent.id) return false
 
   if (isCommand(activeContent)) return true
 

From 9a4a30b457b51e4c415de447dd952bdfd025009f Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 26 Jun 2025 23:20:49 +0900
Subject: [PATCH 14/64] Fix: Fixed an issue where moving the first command in a
 folder would cause it to be out of order.

---
 .../option/editor/CommandTreeRenderer.tsx        |  6 ------
 src/hooks/useCommandActions.ts                   | 15 ---------------
 src/hooks/useCommandDragDrop.ts                  | 14 +-------------
 src/services/dragAndDrop.ts                      | 16 ++++++++--------
 4 files changed, 9 insertions(+), 42 deletions(-)

diff --git a/src/components/option/editor/CommandTreeRenderer.tsx b/src/components/option/editor/CommandTreeRenderer.tsx
index 001ad994..b3e525af 100644
--- a/src/components/option/editor/CommandTreeRenderer.tsx
+++ b/src/components/option/editor/CommandTreeRenderer.tsx
@@ -45,12 +45,6 @@ export const CommandTreeRenderer: React.FC<Props> = ({
           droppable={isDroppable(field, activeNode)}
           content={field.content}
           folders={folders}
-          className={cn(
-            isFolder(activeNode?.content) &&
-              isCommand(field.content) &&
-              isInFolder(field.content) &&
-              'opacity-50 bg-gray-100',
-          )}
         >
           <div className="h-14 pr-2 pl-0 flex-1 flex items-center overflow-hidden">
             <div className="flex-1 flex items-center overflow-hidden pr-2">
diff --git a/src/hooks/useCommandActions.ts b/src/hooks/useCommandActions.ts
index 53dc3a3a..ffeac195 100644
--- a/src/hooks/useCommandActions.ts
+++ b/src/hooks/useCommandActions.ts
@@ -90,20 +90,6 @@ export const useCommandActions = (
     [tree, commandArray, moveCommands],
   )
 
-  const moveCommandIntoFolder = useCallback(
-    (commandId: string, folderId: string) => {
-      const idx = commandArray.fields.findIndex((c) => c.id === commandId)
-      if (idx >= 0) {
-        const command = commandArray.fields[idx]
-        commandArray.update(idx, {
-          ...command,
-          parentFolderId: folderId,
-        })
-      }
-    },
-    [commandArray],
-  )
-
   const moveCommandToSameLevel = useCallback(
     (commandId: string, distIndex: number, parentId = ROOT_FOLDER) => {
       const idx = commandArray.fields.findIndex((c) => c.id === commandId)
@@ -165,7 +151,6 @@ export const useCommandActions = (
     moveFolderAsSubfolder,
     moveFolderToSameLevel,
     moveFolderContents,
-    moveCommandIntoFolder,
     moveCommandToSameLevel,
     commandRemove,
   }
diff --git a/src/hooks/useCommandDragDrop.ts b/src/hooks/useCommandDragDrop.ts
index dba89935..64317b40 100644
--- a/src/hooks/useCommandDragDrop.ts
+++ b/src/hooks/useCommandDragDrop.ts
@@ -21,7 +21,6 @@ export const useCommandDragDrop = (
     moveFolderAsSubfolder,
     moveFolderToSameLevel,
     moveFolderContents,
-    moveCommandIntoFolder,
     moveCommandToSameLevel,
   } = commandActions
   const tree = toCommandTree(commands, folders)
@@ -75,17 +74,7 @@ export const useCommandDragDrop = (
           commands,
           tree,
         )
-
-        if (newParentId) {
-          // Move command into folder or to same level
-          if (newParentId === overContent.id) {
-            // 2-2-1: Move command into folder
-            moveCommandIntoFolder(activeContent.id, newParentId)
-          } else {
-            // 2-2-2: Move command to same level as folder (parent folder)
-            moveCommandToSameLevel(activeContent.id, targetIndex, newParentId)
-          }
-        }
+        moveCommandToSameLevel(activeContent.id, targetIndex, newParentId)
         return
       }
 
@@ -118,7 +107,6 @@ export const useCommandDragDrop = (
       moveFolderAsSubfolder,
       moveFolderToSameLevel,
       moveFolderContents,
-      moveCommandIntoFolder,
       moveCommandToSameLevel,
     ],
   )
diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
index 1d24ed79..dc8dc9e7 100644
--- a/src/services/dragAndDrop.ts
+++ b/src/services/dragAndDrop.ts
@@ -124,21 +124,21 @@ export const calculateCommandToFolderPosition = (
   tree: CommandTreeNode[],
 ): { targetIndex: number; newParentId?: string } => {
   const isForward = isForwardDrag(active, over)
-  const droppedFolder = over.data.current?.content as CommandFolder
-  const folderNode = findNodeInTree(tree, droppedFolder.id)
+  const overFolder = over.data.current?.content as CommandFolder
+  const overNode = findNodeInTree(tree, overFolder.id)
 
-  let firstChildIndex = -1
-  if (folderNode) {
-    const firstCommand = findFirstCommand(folderNode)
+  let firstChildIndex = commands.length
+  if (overNode) {
+    const firstCommand = findFirstCommand(overNode)
     firstChildIndex = commands.findIndex(
       (c) => c.id === firstCommand?.content.id,
     )
   }
 
   return {
-    targetIndex: firstChildIndex >= 0 ? firstChildIndex : commands.length,
+    targetIndex: isForward ? firstChildIndex - 1 : firstChildIndex,
     newParentId: isForward
-      ? droppedFolder.id
-      : droppedFolder.parentFolderId || ROOT_FOLDER,
+      ? overFolder.id
+      : overFolder.parentFolderId || ROOT_FOLDER,
   }
 }

From ee70e809f82305454a14591a2c681f40b602706e Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 26 Jun 2025 23:38:42 +0900
Subject: [PATCH 15/64] Refactoring.

---
 src/components/option/editor/CommandList.tsx |  2 +-
 src/hooks/useCommandActions.ts               | 43 ++++++--------------
 src/hooks/useCommandDragDrop.ts              | 38 ++++++-----------
 src/services/dragAndDrop.ts                  |  2 +-
 4 files changed, 28 insertions(+), 57 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index a60eba88..52664d05 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -304,7 +304,7 @@ export const CommandList = ({ control }: CommandListProps) => {
               onCopy={commandCopy}
               isDroppable={(node, activeNode) =>
                 isDroppable(node, activeNode, folderArray.fields)
-              }
+                }
             />
           </SortableContext>
         </DndContext>
diff --git a/src/hooks/useCommandActions.ts b/src/hooks/useCommandActions.ts
index ffeac195..c217b934 100644
--- a/src/hooks/useCommandActions.ts
+++ b/src/hooks/useCommandActions.ts
@@ -17,15 +17,15 @@ export const useCommandActions = (
 ) => {
   const tree = toCommandTree(commandArray.fields, folderArray.fields)
 
-  const moveCommands = useCallback(
+  const moveCommand = useCallback(
     (from: number, to: number) => {
       commandArray.move(from, to)
     },
     [commandArray],
   )
 
-  const moveFolderAsSubfolder = useCallback(
-    (sourceFolderId: string, targetFolderId: string) => {
+  const moveFolderToFolder = useCallback(
+    (sourceFolderId: string, targetFolderId = ROOT_FOLDER) => {
       if (
         isCircularReference(
           sourceFolderId,
@@ -50,22 +50,6 @@ export const useCommandActions = (
     [folderArray],
   )
 
-  const moveFolderToSameLevel = useCallback(
-    (sourceFolderId: string, targetParentId: string | undefined) => {
-      const sourceFolderIndex = folderArray.fields.findIndex(
-        (f) => f.id === sourceFolderId,
-      )
-      if (sourceFolderIndex >= 0) {
-        const sourceFolder = folderArray.fields[sourceFolderIndex]
-        folderArray.update(sourceFolderIndex, {
-          ...sourceFolder,
-          parentFolderId: targetParentId ?? ROOT_FOLDER,
-        })
-      }
-    },
-    [folderArray],
-  )
-
   const moveFolderContents = useCallback(
     (sourceFolderId: string, targetIndex: number, firstChildIndex: number) => {
       const folderNode = findNodeInTree(tree, sourceFolderId)
@@ -76,21 +60,21 @@ export const useCommandActions = (
       const isForwardDrag = targetIndex > firstChildIndex
       if (isForwardDrag) {
         folderCommands.forEach(() => {
-          moveCommands(firstChildIndex, targetIndex)
+          moveCommand(firstChildIndex, targetIndex)
         })
       } else {
         let currentTargetIndex = targetIndex
         folderCommands.forEach((cmd) => {
           const idx = commandArray.fields.findIndex((c) => c.id === cmd.id)
-          moveCommands(idx, currentTargetIndex)
+          moveCommand(idx, currentTargetIndex)
           currentTargetIndex++
         })
       }
     },
-    [tree, commandArray, moveCommands],
+    [tree, commandArray, moveCommand],
   )
 
-  const moveCommandToSameLevel = useCallback(
+  const moveCommandToFolder = useCallback(
     (commandId: string, distIndex: number, parentId = ROOT_FOLDER) => {
       const idx = commandArray.fields.findIndex((c) => c.id === commandId)
       if (idx >= 0) {
@@ -101,10 +85,10 @@ export const useCommandActions = (
           parentFolderId: parentId,
         })
         // Then move to target position
-        moveCommands(idx, distIndex)
+        moveCommand(idx, distIndex)
       }
     },
-    [commandArray, moveCommands],
+    [commandArray, moveCommand],
   )
 
   const commandRemove = useCallback(
@@ -147,11 +131,10 @@ export const useCommandActions = (
   )
 
   return {
-    moveCommands,
-    moveFolderAsSubfolder,
-    moveFolderToSameLevel,
-    moveFolderContents,
-    moveCommandToSameLevel,
+    moveCommand,
+    moveCommandToFolder,
     commandRemove,
+    moveFolderToFolder,
+    moveFolderContents,
   }
 }
diff --git a/src/hooks/useCommandDragDrop.ts b/src/hooks/useCommandDragDrop.ts
index 64317b40..0d58939b 100644
--- a/src/hooks/useCommandDragDrop.ts
+++ b/src/hooks/useCommandDragDrop.ts
@@ -17,11 +17,10 @@ export const useCommandDragDrop = (
   folders: CommandFolder[],
 ) => {
   const {
-    moveCommands,
-    moveFolderAsSubfolder,
-    moveFolderToSameLevel,
+    moveCommand,
+    moveFolderToFolder,
     moveFolderContents,
-    moveCommandToSameLevel,
+    moveCommandToFolder,
   } = commandActions
   const tree = toCommandTree(commands, folders)
 
@@ -42,17 +41,8 @@ export const useCommandDragDrop = (
       if (isFolder(activeContent) && isFolder(overContent)) {
         const { targetIndex, firstChildIndex, newParentId } =
           calculateFolderToFolderPosition(active, over, commands, tree)
-
-        if (newParentId) {
-          // Move as subfolder
-          moveFolderAsSubfolder(activeContent.id, newParentId)
-        } else {
-          // Move to same level
-          moveFolderToSameLevel(activeContent.id, overContent.parentFolderId)
-        }
-        if (targetIndex !== firstChildIndex) {
-          moveFolderContents(activeContent.id, targetIndex, firstChildIndex)
-        }
+        moveFolderToFolder(activeContent.id, newParentId)
+        moveFolderContents(activeContent.id, targetIndex, firstChildIndex)
         return
       }
 
@@ -60,8 +50,7 @@ export const useCommandDragDrop = (
       if (isFolder(activeContent) && isCommand(overContent)) {
         const { targetIndex, firstChildIndex } =
           calculateFolderToCommandPosition(active, over, commands, tree)
-        // Always move folder to same level as command
-        moveFolderToSameLevel(activeContent.id, overContent.parentFolderId)
+        moveFolderToFolder(activeContent.id, overContent.parentFolderId)
         moveFolderContents(activeContent.id, targetIndex, firstChildIndex)
         return
       }
@@ -74,11 +63,11 @@ export const useCommandDragDrop = (
           commands,
           tree,
         )
-        moveCommandToSameLevel(activeContent.id, targetIndex, newParentId)
+        moveCommandToFolder(activeContent.id, targetIndex, newParentId)
         return
       }
 
-      // Command to Command drag (original functionality)
+      // Command to Command drag
       if (isCommand(activeContent) && isCommand(overContent)) {
         const activeIndex = commands.findIndex(
           (cmd) => cmd.id === activeContent.id,
@@ -88,14 +77,14 @@ export const useCommandDragDrop = (
         if (activeIndex !== -1 && overIndex !== -1) {
           // First, move command to same parent folder as target command
           if (activeContent.parentFolderId !== overContent.parentFolderId) {
-            moveCommandToSameLevel(
+            moveCommandToFolder(
               activeContent.id,
               overIndex,
               overContent.parentFolderId,
             )
           } else {
             // If already in same parent, just move position
-            moveCommands(activeIndex, overIndex)
+            moveCommand(activeIndex, overIndex)
           }
         }
       }
@@ -103,11 +92,10 @@ export const useCommandDragDrop = (
     [
       tree,
       commands,
-      moveCommands,
-      moveFolderAsSubfolder,
-      moveFolderToSameLevel,
+      moveFolderToFolder,
       moveFolderContents,
-      moveCommandToSameLevel,
+      moveCommand,
+      moveCommandToFolder,
     ],
   )
 
diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
index dc8dc9e7..e0099305 100644
--- a/src/services/dragAndDrop.ts
+++ b/src/services/dragAndDrop.ts
@@ -58,7 +58,7 @@ export const calculateFolderToFolderPosition = (
   over: Over,
   commands: Command[],
   tree: CommandTreeNode[],
-): { targetIndex: number; firstChildIndex: number; newParentId?: string } => {
+): { targetIndex: number; firstChildIndex: number; newParentId: string } => {
   const isForward = isForwardDrag(active, over)
   const activeFolder = active.data.current?.content as CommandFolder
   const activeNode = findNodeInTree(tree, activeFolder.id)

From aa88d94397aedbeb6ae1816da3deda4390826fe8 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Fri, 27 Jun 2025 12:32:39 +0900
Subject: [PATCH 16/64] Refactoring.

---
 src/components/option/editor/CommandList.tsx | 13 +------
 src/hooks/useCommandActions.ts               | 12 +++----
 src/hooks/useCommandDragDrop.ts              | 14 ++++----
 src/lib/commandUtils.ts                      | 38 ++++++++++++++++++++
 src/services/dragAndDrop.ts                  | 38 ++++++++++----------
 5 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index 52664d05..6820bf87 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -35,7 +35,7 @@ import {
   toFlatten,
   type FlattenNode,
 } from '@/services/commandTree'
-import { isCommand, isFolder } from '@/lib/commandUtils'
+import { isCommand, isFolder, getDescendantFolderIds } from '@/lib/commandUtils'
 import { isValidDrop } from '@/services/dragAndDrop'
 import { useCommandActions } from '@/hooks/useCommandActions'
 import { useCommandDragDrop } from '@/hooks/useCommandDragDrop'
@@ -43,17 +43,6 @@ import { CommandActions } from './CommandActions'
 import { CommandTreeRenderer } from './CommandTreeRenderer'
 
 // Drag filtering utilities
-const getDescendantFolderIds = (
-  folderId: string,
-  folders: CommandFolder[],
-): string[] => {
-  const children = folders.filter((f) => f.parentFolderId === folderId)
-  let descendants = children.map((f) => f.id)
-  for (const child of children) {
-    descendants = descendants.concat(getDescendantFolderIds(child.id, folders))
-  }
-  return descendants
-}
 
 /**
  * Determines if a node is a descendant of any folder in the hidden folder set.
diff --git a/src/hooks/useCommandActions.ts b/src/hooks/useCommandActions.ts
index c217b934..bdced723 100644
--- a/src/hooks/useCommandActions.ts
+++ b/src/hooks/useCommandActions.ts
@@ -51,23 +51,23 @@ export const useCommandActions = (
   )
 
   const moveFolderContents = useCallback(
-    (sourceFolderId: string, targetIndex: number, firstChildIndex: number) => {
+    (sourceFolderId: string, distIndex: number, firstChildIndex: number) => {
       const folderNode = findNodeInTree(tree, sourceFolderId)
       if (!folderNode) {
         return
       }
       const folderCommands = getAllCommandsFromFolder(folderNode)
-      const isForwardDrag = targetIndex > firstChildIndex
+      const isForwardDrag = distIndex > firstChildIndex
       if (isForwardDrag) {
         folderCommands.forEach(() => {
-          moveCommand(firstChildIndex, targetIndex)
+          moveCommand(firstChildIndex, distIndex)
         })
       } else {
-        let currentTargetIndex = targetIndex
+        let currentDistIndex = distIndex
         folderCommands.forEach((cmd) => {
           const idx = commandArray.fields.findIndex((c) => c.id === cmd.id)
-          moveCommand(idx, currentTargetIndex)
-          currentTargetIndex++
+          moveCommand(idx, currentDistIndex)
+          currentDistIndex++
         })
       }
     },
diff --git a/src/hooks/useCommandDragDrop.ts b/src/hooks/useCommandDragDrop.ts
index 0d58939b..18638ff3 100644
--- a/src/hooks/useCommandDragDrop.ts
+++ b/src/hooks/useCommandDragDrop.ts
@@ -35,35 +35,33 @@ export const useCommandDragDrop = (
       const activeContent = active.data.current?.content
       const overContent = over.data.current?.content
 
-      console.log('from', activeContent.title, 'dist', overContent.title)
-
       // Folder to Folder drag
       if (isFolder(activeContent) && isFolder(overContent)) {
-        const { targetIndex, firstChildIndex, newParentId } =
+        const { distIndex, firstChildIndex, newParentId } =
           calculateFolderToFolderPosition(active, over, commands, tree)
         moveFolderToFolder(activeContent.id, newParentId)
-        moveFolderContents(activeContent.id, targetIndex, firstChildIndex)
+        moveFolderContents(activeContent.id, distIndex, firstChildIndex)
         return
       }
 
       // Folder to Command drag
       if (isFolder(activeContent) && isCommand(overContent)) {
-        const { targetIndex, firstChildIndex } =
+        const { distIndex, firstChildIndex } =
           calculateFolderToCommandPosition(active, over, commands, tree)
         moveFolderToFolder(activeContent.id, overContent.parentFolderId)
-        moveFolderContents(activeContent.id, targetIndex, firstChildIndex)
+        moveFolderContents(activeContent.id, distIndex, firstChildIndex)
         return
       }
 
       // Command to Folder drag
       if (isCommand(activeContent) && isFolder(overContent)) {
-        const { targetIndex, newParentId } = calculateCommandToFolderPosition(
+        const { distIndex, newParentId } = calculateCommandToFolderPosition(
           active,
           over,
           commands,
           tree,
         )
-        moveCommandToFolder(activeContent.id, targetIndex, newParentId)
+        moveCommandToFolder(activeContent.id, distIndex, newParentId)
         return
       }
 
diff --git a/src/lib/commandUtils.ts b/src/lib/commandUtils.ts
index af909f99..279191e9 100644
--- a/src/lib/commandUtils.ts
+++ b/src/lib/commandUtils.ts
@@ -2,6 +2,11 @@ import type { Command, CommandFolder, SelectionCommand, PageActionCommand } from
 import { OPEN_MODE, ROOT_FOLDER } from '@/const'
 import { e2a, isEmpty } from '@/lib/utils'
 
+/**
+ * Type guard to check if the content is a SelectionCommand
+ * @param content - The content to check
+ * @returns True if the content is a SelectionCommand, false otherwise
+ */
 export function isCommand(
   content: Command | CommandFolder | undefined,
 ): content is SelectionCommand {
@@ -12,6 +17,11 @@ export function isCommand(
   return false
 }
 
+/**
+ * Type guard to check if the content is a PageActionCommand
+ * @param content - The content to check
+ * @returns True if the content is a PageActionCommand, false otherwise
+ */
 export function isPageActionCommand(
   content: Command | CommandFolder | undefined,
 ): content is PageActionCommand {
@@ -22,6 +32,11 @@ export function isPageActionCommand(
   return false
 }
 
+/**
+ * Type guard to check if the content is a CommandFolder
+ * @param content - The content to check
+ * @returns True if the content is a CommandFolder, false otherwise
+ */
 export function isFolder(
   content: Command | CommandFolder | undefined,
 ): content is CommandFolder {
@@ -29,17 +44,33 @@ export function isFolder(
   return !('openMode' in content)
 }
 
+/**
+ * Checks if the content is inside a folder (not in the root folder)
+ * @param content - The content to check
+ * @returns True if the content is in a folder, false otherwise
+ */
 export function isInFolder(content: Command | CommandFolder | undefined): boolean {
   if (content == null) return false
   const folderId = content.parentFolderId
   return !isEmpty(folderId) && folderId !== ROOT_FOLDER
 }
 
+/**
+ * Removes unstored parameters from a command (such as temporary IDs)
+ * @param data - The command data to clean
+ * @returns The command with unstored parameters removed
+ */
 export function removeUnstoredParam(data: Command): Command {
   delete (data as any)._id
   return data
 }
 
+/**
+ * Gets all descendant folder IDs for a given folder (recursive)
+ * @param folderId - The ID of the parent folder
+ * @param folders - Array of all folders to search through
+ * @returns Array of descendant folder IDs
+ */
 export const getDescendantFolderIds = (
   folderId: string,
   folders: CommandFolder[],
@@ -52,6 +83,13 @@ export const getDescendantFolderIds = (
   return descendants
 }
 
+/**
+ * Checks if moving a folder would create a circular reference
+ * @param draggedFolderId - The ID of the folder being moved
+ * @param targetFolderId - The ID of the target folder
+ * @param folders - Array of all folders
+ * @returns True if moving would create a circular reference, false otherwise
+ */
 export function isCircularReference(
   draggedFolderId: string,
   targetFolderId: string,
diff --git a/src/services/dragAndDrop.ts b/src/services/dragAndDrop.ts
index e0099305..f9a3b592 100644
--- a/src/services/dragAndDrop.ts
+++ b/src/services/dragAndDrop.ts
@@ -58,12 +58,12 @@ export const calculateFolderToFolderPosition = (
   over: Over,
   commands: Command[],
   tree: CommandTreeNode[],
-): { targetIndex: number; firstChildIndex: number; newParentId: string } => {
+): { distIndex: number; firstChildIndex: number; newParentId: string } => {
   const isForward = isForwardDrag(active, over)
   const activeFolder = active.data.current?.content as CommandFolder
   const activeNode = findNodeInTree(tree, activeFolder.id)
-  const droppedFolder = over.data.current?.content as CommandFolder
-  const droppedNode = findNodeInTree(tree, droppedFolder.id)
+  const overFolder = over.data.current?.content as CommandFolder
+  const overNode = findNodeInTree(tree, overFolder.id)
 
   let firstChildIndex = -1
   if (activeNode) {
@@ -73,18 +73,18 @@ export const calculateFolderToFolderPosition = (
     )
   }
 
-  let targetIndex = commands.length
-  if (droppedNode) {
-    const firstCommand = findFirstCommand(droppedNode)
-    targetIndex = commands.findIndex((c) => c.id === firstCommand?.content.id)
+  let distIndex = commands.length
+  if (overNode) {
+    const firstCommand = findFirstCommand(overNode)
+    distIndex = commands.findIndex((c) => c.id === firstCommand?.content.id)
   }
 
   return {
-    targetIndex: isForward ? targetIndex - 1 : targetIndex,
+    distIndex: isForward ? distIndex - 1 : distIndex,
     firstChildIndex,
     newParentId: isForward
-      ? droppedFolder.id
-      : droppedFolder.parentFolderId || ROOT_FOLDER,
+      ? overFolder.id
+      : overFolder.parentFolderId || ROOT_FOLDER,
   }
 }
 
@@ -93,10 +93,10 @@ export const calculateFolderToCommandPosition = (
   over: Over,
   commands: Command[],
   tree: CommandTreeNode[],
-): { targetIndex: number; firstChildIndex: number } => {
-  const droppedCommand = over.data.current?.content as Command
-  const droppedCommandIndex = commands.findIndex(
-    (cmd) => cmd.id === droppedCommand.id,
+): { distIndex: number; firstChildIndex: number } => {
+  const overCommand = over.data.current?.content as Command
+  const overCommandIndex = commands.findIndex(
+    (cmd) => cmd.id === overCommand.id,
   )
 
   let firstChildIndex = -1
@@ -108,11 +108,11 @@ export const calculateFolderToCommandPosition = (
     )
   }
 
-  if (droppedCommandIndex === -1)
-    return { targetIndex: commands.length, firstChildIndex }
+  if (overCommandIndex === -1)
+    return { distIndex: commands.length, firstChildIndex }
 
   return {
-    targetIndex: droppedCommandIndex,
+    distIndex: overCommandIndex,
     firstChildIndex,
   }
 }
@@ -122,7 +122,7 @@ export const calculateCommandToFolderPosition = (
   over: Over,
   commands: Command[],
   tree: CommandTreeNode[],
-): { targetIndex: number; newParentId?: string } => {
+): { distIndex: number; newParentId?: string } => {
   const isForward = isForwardDrag(active, over)
   const overFolder = over.data.current?.content as CommandFolder
   const overNode = findNodeInTree(tree, overFolder.id)
@@ -136,7 +136,7 @@ export const calculateCommandToFolderPosition = (
   }
 
   return {
-    targetIndex: isForward ? firstChildIndex - 1 : firstChildIndex,
+    distIndex: isForward ? firstChildIndex - 1 : firstChildIndex,
     newParentId: isForward
       ? overFolder.id
       : overFolder.parentFolderId || ROOT_FOLDER,

From 26694f86d3d5a1fe285040a8e5b0440398c2226a Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Fri, 27 Jun 2025 12:36:25 +0900
Subject: [PATCH 17/64] Rename.

---
 src/components/option/editor/CommandList.tsx                  | 4 ++--
 .../option/editor/{CommandActions.tsx => CommandListMenu.tsx} | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/option/editor/{CommandActions.tsx => CommandListMenu.tsx} (97%)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index 6820bf87..e67c6c18 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -39,7 +39,7 @@ import { isCommand, isFolder, getDescendantFolderIds } from '@/lib/commandUtils'
 import { isValidDrop } from '@/services/dragAndDrop'
 import { useCommandActions } from '@/hooks/useCommandActions'
 import { useCommandDragDrop } from '@/hooks/useCommandDragDrop'
-import { CommandActions } from './CommandActions'
+import { CommandListMenu } from './CommandListMenu'
 import { CommandTreeRenderer } from './CommandTreeRenderer'
 
 // Drag filtering utilities
@@ -252,7 +252,7 @@ export const CommandList = ({ control }: CommandListProps) => {
 
   return (
     <>
-      <CommandActions
+      <CommandListMenu
         onAddCommand={() => setCommandDialogOpen(true)}
         onAddFolder={() => setFolderDialogOpen(true)}
         addCommandButtonRef={addCommandButtonRef}
diff --git a/src/components/option/editor/CommandActions.tsx b/src/components/option/editor/CommandListMenu.tsx
similarity index 97%
rename from src/components/option/editor/CommandActions.tsx
rename to src/components/option/editor/CommandListMenu.tsx
index 15062215..12604e3c 100644
--- a/src/components/option/editor/CommandActions.tsx
+++ b/src/components/option/editor/CommandListMenu.tsx
@@ -14,7 +14,7 @@ interface Props {
   commandCount: number
 }
 
-export const CommandActions: React.FC<Props> = ({
+export const CommandListMenu: React.FC<Props> = ({
   onAddCommand,
   onAddFolder,
   addCommandButtonRef,

From a04cd392a1048290f2b0e6c2000967ad7c24601f Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Fri, 27 Jun 2025 12:46:12 +0900
Subject: [PATCH 18/64] Refactoring: Move folder.

---
 .../option/editor/CommandEditDialog.tsx       |  2 +-
 src/components/option/editor/CommandList.tsx  |  4 +-
 src/components/option/field/IconField.tsx     |  2 +-
 src/hooks/{ => option}/useCommandActions.ts   | 38 +++++++++++++++++++
 src/hooks/{ => option}/useCommandDragDrop.ts  |  0
 src/hooks/{ => option}/useFavicon.tsx         |  0
 6 files changed, 42 insertions(+), 4 deletions(-)
 rename src/hooks/{ => option}/useCommandActions.ts (69%)
 rename src/hooks/{ => option}/useCommandDragDrop.ts (100%)
 rename src/hooks/{ => option}/useFavicon.tsx (100%)

diff --git a/src/components/option/editor/CommandEditDialog.tsx b/src/components/option/editor/CommandEditDialog.tsx
index dbf08b43..863879b8 100644
--- a/src/components/option/editor/CommandEditDialog.tsx
+++ b/src/components/option/editor/CommandEditDialog.tsx
@@ -62,7 +62,7 @@ import {
   FaviconContextProvider,
   useFavicon,
   FaviconEvent,
-} from '@/hooks/useFavicon'
+} from '@/hooks/option/useFavicon'
 
 import { Ipc, BgCommand } from '@/services/ipc'
 import { getScreenSize } from '@/services/screen'
diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index e67c6c18..084ed7e2 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -37,8 +37,8 @@ import {
 } from '@/services/commandTree'
 import { isCommand, isFolder, getDescendantFolderIds } from '@/lib/commandUtils'
 import { isValidDrop } from '@/services/dragAndDrop'
-import { useCommandActions } from '@/hooks/useCommandActions'
-import { useCommandDragDrop } from '@/hooks/useCommandDragDrop'
+import { useCommandActions } from '@/hooks/option/useCommandActions'
+import { useCommandDragDrop } from '@/hooks/option/useCommandDragDrop'
 import { CommandListMenu } from './CommandListMenu'
 import { CommandTreeRenderer } from './CommandTreeRenderer'
 
diff --git a/src/components/option/field/IconField.tsx b/src/components/option/field/IconField.tsx
index 584a5a97..fb6093c0 100644
--- a/src/components/option/field/IconField.tsx
+++ b/src/components/option/field/IconField.tsx
@@ -16,7 +16,7 @@ type IconField = {
   description?: string
 }
 
-import { useFavicon } from '@/hooks/useFavicon'
+import { useFavicon } from '@/hooks/option/useFavicon'
 
 export const IconField = ({
   control,
diff --git a/src/hooks/useCommandActions.ts b/src/hooks/option/useCommandActions.ts
similarity index 69%
rename from src/hooks/useCommandActions.ts
rename to src/hooks/option/useCommandActions.ts
index bdced723..5f695bbb 100644
--- a/src/hooks/useCommandActions.ts
+++ b/src/hooks/option/useCommandActions.ts
@@ -9,6 +9,14 @@ import {
   getAllCommandsFromFolder,
 } from '@/services/commandTree'
 
+/**
+ * Custom hook that provides actions for managing commands and folders in the command editor.
+ * Handles moving, organizing, and removing commands and folders with proper hierarchy management.
+ * 
+ * @param commandArray - React Hook Form field array for commands
+ * @param folderArray - React Hook Form field array for folders
+ * @returns Object containing command and folder management functions
+ */
 export const useCommandActions = (
   commandArray: ReturnType<
     typeof useFieldArray<CommandsSchemaType, 'commands'>
@@ -17,6 +25,11 @@ export const useCommandActions = (
 ) => {
   const tree = toCommandTree(commandArray.fields, folderArray.fields)
 
+  /**
+   * Moves a command from one position to another in the commands array
+   * @param from - Source index of the command
+   * @param to - Target index where the command should be moved
+   */
   const moveCommand = useCallback(
     (from: number, to: number) => {
       commandArray.move(from, to)
@@ -24,6 +37,12 @@ export const useCommandActions = (
     [commandArray],
   )
 
+  /**
+   * Moves a folder to become a child of another folder
+   * Prevents circular references by checking folder hierarchy
+   * @param sourceFolderId - ID of the folder to move
+   * @param targetFolderId - ID of the target parent folder (defaults to ROOT_FOLDER)
+   */
   const moveFolderToFolder = useCallback(
     (sourceFolderId: string, targetFolderId = ROOT_FOLDER) => {
       if (
@@ -50,6 +69,13 @@ export const useCommandActions = (
     [folderArray],
   )
 
+  /**
+   * Moves all commands within a folder to a new position in the commands array
+   * Handles both forward and backward drag operations to maintain correct order
+   * @param sourceFolderId - ID of the folder whose contents should be moved
+   * @param distIndex - Target index where the folder contents should be positioned
+   * @param firstChildIndex - Index of the first command in the folder
+   */
   const moveFolderContents = useCallback(
     (sourceFolderId: string, distIndex: number, firstChildIndex: number) => {
       const folderNode = findNodeInTree(tree, sourceFolderId)
@@ -74,6 +100,13 @@ export const useCommandActions = (
     [tree, commandArray, moveCommand],
   )
 
+  /**
+   * Moves a command to a specific folder and position
+   * Updates both the parent folder assignment and the position in the commands array
+   * @param commandId - ID of the command to move
+   * @param distIndex - Target index where the command should be positioned
+   * @param parentId - ID of the target parent folder (defaults to ROOT_FOLDER)
+   */
   const moveCommandToFolder = useCallback(
     (commandId: string, distIndex: number, parentId = ROOT_FOLDER) => {
       const idx = commandArray.fields.findIndex((c) => c.id === commandId)
@@ -91,6 +124,11 @@ export const useCommandActions = (
     [commandArray, moveCommand],
   )
 
+  /**
+   * Removes a command or folder from the arrays
+   * When removing a folder, moves all child commands and folders to the root folder
+   * @param id - ID of the command or folder to remove
+   */
   const commandRemove = useCallback(
     (id: string) => {
       const commandIndex = commandArray.fields.findIndex((c) => c.id === id)
diff --git a/src/hooks/useCommandDragDrop.ts b/src/hooks/option/useCommandDragDrop.ts
similarity index 100%
rename from src/hooks/useCommandDragDrop.ts
rename to src/hooks/option/useCommandDragDrop.ts
diff --git a/src/hooks/useFavicon.tsx b/src/hooks/option/useFavicon.tsx
similarity index 100%
rename from src/hooks/useFavicon.tsx
rename to src/hooks/option/useFavicon.tsx

From 8267d1e141744db98779704738d495efa00a1cf6 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Fri, 27 Jun 2025 12:55:42 +0900
Subject: [PATCH 19/64] Refactoring: Move folder.

---
 src/action/pageAction.ts                             | 2 +-
 src/action/popup.ts                                  | 2 +-
 src/action/window.ts                                 | 2 +-
 src/background_script.ts                             | 2 +-
 src/components/option/SettingForm.tsx                | 6 +++---
 src/components/option/editor/CommandList.tsx         | 6 +++---
 src/components/option/editor/CommandTreeRenderer.tsx | 8 +++-----
 src/components/option/editor/PageActionSection.tsx   | 5 ++---
 src/components/option/editor/PageRuleList.tsx        | 2 +-
 src/hooks/option/useCommandActions.ts                | 6 +++---
 src/hooks/option/useCommandDragDrop.ts               | 6 +++---
 src/hooks/useDetectLinkCommand.ts                    | 2 +-
 src/hooks/useSetting.ts                              | 2 +-
 src/services/{ => option}/commandTree.ts             | 0
 src/{lib => services/option}/commandUtils.ts         | 0
 src/services/{ => option}/defaultSettings.ts         | 0
 src/services/{ => option}/dragAndDrop.ts             | 6 +++---
 src/services/{ => option}/optionSettings.ts          | 0
 src/services/settings.ts                             | 4 ++--
 src/services/storage.ts                              | 2 +-
 20 files changed, 30 insertions(+), 33 deletions(-)
 rename src/services/{ => option}/commandTree.ts (100%)
 rename src/{lib => services/option}/commandUtils.ts (100%)
 rename src/services/{ => option}/defaultSettings.ts (100%)
 rename src/services/{ => option}/dragAndDrop.ts (94%)
 rename src/services/{ => option}/optionSettings.ts (100%)

diff --git a/src/action/pageAction.ts b/src/action/pageAction.ts
index cd820e41..105535b6 100644
--- a/src/action/pageAction.ts
+++ b/src/action/pageAction.ts
@@ -2,7 +2,7 @@ import { Ipc, BgCommand } from '@/services/ipc'
 import { getScreenSize, getWindowPosition } from '@/services/screen'
 import { isValidString, isPageActionCommand } from '@/lib/utils'
 import { PAGE_ACTION_OPEN_MODE } from '@/const'
-import { PopupOption } from '@/services/defaultSettings'
+import { PopupOption } from '@/services/option/defaultSettings'
 import type { ExecuteCommandParams, UrlParam } from '@/types'
 import type { OpenAndRunProps } from '@/services/pageAction/background'
 
diff --git a/src/action/popup.ts b/src/action/popup.ts
index 25616c91..7de75849 100644
--- a/src/action/popup.ts
+++ b/src/action/popup.ts
@@ -2,7 +2,7 @@ import { Ipc, BgCommand } from '@/services/ipc'
 import { isValidString } from '@/lib/utils'
 import { getScreenSize, getWindowPosition } from '@/services/screen'
 import { POPUP_TYPE, SPACE_ENCODING } from '@/const'
-import { PopupOption } from '@/services/defaultSettings'
+import { PopupOption } from '@/services/option/defaultSettings'
 import type { ExecuteCommandParams } from '@/types'
 import type { OpenPopupProps } from '@/services/chrome'
 
diff --git a/src/action/window.ts b/src/action/window.ts
index 846bdf59..d7a56e12 100644
--- a/src/action/window.ts
+++ b/src/action/window.ts
@@ -2,7 +2,7 @@ import { Ipc, BgCommand } from '@/services/ipc'
 import { isValidString } from '@/lib/utils'
 import { getScreenSize, getWindowPosition } from '@/services/screen'
 import { POPUP_TYPE, SPACE_ENCODING } from '@/const'
-import { PopupOption } from '@/services/defaultSettings'
+import { PopupOption } from '@/services/option/defaultSettings'
 import type { OpenPopupProps } from '@/services/chrome'
 import type { ExecuteCommandParams } from '@/types'
 
diff --git a/src/background_script.ts b/src/background_script.ts
index 8450a2cd..de61f0c2 100644
--- a/src/background_script.ts
+++ b/src/background_script.ts
@@ -10,7 +10,7 @@ import {
 import { executeActionProps } from '@/services/contextMenus'
 import { Ipc, BgCommand, TabCommand } from '@/services/ipc'
 import { Settings } from '@/services/settings'
-import { PopupOption, PopupPlacement } from '@/services/defaultSettings'
+import { PopupOption, PopupPlacement } from '@/services/option/defaultSettings'
 import * as PageActionBackground from '@/services/pageAction/background'
 import { BgData } from '@/services/backgroundData'
 import { ContextMenu } from '@/services/contextMenus'
diff --git a/src/components/option/SettingForm.tsx b/src/components/option/SettingForm.tsx
index 829bc7b3..c2013555 100644
--- a/src/components/option/SettingForm.tsx
+++ b/src/components/option/SettingForm.tsx
@@ -19,8 +19,8 @@ import { SwitchField } from '@/components/option/field/SwitchField'
 import { PopupPlacementField } from '@/components/option/field/PopupPlacementField'
 import { commandSchema, folderSchema } from '@/types/schema'
 import { CommandList } from '@/components/option/editor/CommandList'
-import { toCommandTree, toFlatten } from '@/services/commandTree'
-import { isCommand, removeUnstoredParam } from '@/lib/commandUtils'
+import { toCommandTree, toFlatten } from '@/services/option/commandTree'
+import { isCommand, removeUnstoredParam } from '@/services/option/commandUtils'
 import {
   PageRuleList,
   pageRuleSchema,
@@ -56,7 +56,7 @@ import {
   cn,
 } from '@/lib/utils'
 import { Settings } from '@/services/settings'
-import DefaultSettings from '@/services/defaultSettings'
+import DefaultSettings from '@/services/option/defaultSettings'
 
 const formSchema = z
   .object({
diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index 084ed7e2..b35dc469 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -34,9 +34,9 @@ import {
   toCommandTree,
   toFlatten,
   type FlattenNode,
-} from '@/services/commandTree'
-import { isCommand, isFolder, getDescendantFolderIds } from '@/lib/commandUtils'
-import { isValidDrop } from '@/services/dragAndDrop'
+} from '@/services/option/commandTree'
+import { isCommand, isFolder, getDescendantFolderIds } from '@/services/option/commandUtils'
+import { isValidDrop } from '@/services/option/dragAndDrop'
 import { useCommandActions } from '@/hooks/option/useCommandActions'
 import { useCommandDragDrop } from '@/hooks/option/useCommandDragDrop'
 import { CommandListMenu } from './CommandListMenu'
diff --git a/src/components/option/editor/CommandTreeRenderer.tsx b/src/components/option/editor/CommandTreeRenderer.tsx
index b3e525af..c24ebfa0 100644
--- a/src/components/option/editor/CommandTreeRenderer.tsx
+++ b/src/components/option/editor/CommandTreeRenderer.tsx
@@ -4,16 +4,14 @@ import { EditButton } from '@/components/option/EditButton'
 import { CopyButton } from '@/components/option/CopyButton'
 import { RemoveButton } from '@/components/option/RemoveButton'
 import { MenuImage } from '@/components/menu/MenuImage'
-import type { FlattenNode } from '@/services/commandTree'
+import type { FlattenNode } from '@/services/option/commandTree'
 import type { CommandFolder } from '@/types'
 import {
   isCommand,
   isFolder,
-  isInFolder,
   isPageActionCommand,
-} from '@/lib/commandUtils'
-import { calcLevel } from '@/services/commandTree'
-import { cn } from '@/lib/utils'
+} from '@/services/option/commandUtils'
+import { calcLevel } from '@/services/option/commandTree'
 
 interface Props {
   nodes: FlattenNode[]
diff --git a/src/components/option/editor/PageActionSection.tsx b/src/components/option/editor/PageActionSection.tsx
index 9482aacb..9925618f 100644
--- a/src/components/option/editor/PageActionSection.tsx
+++ b/src/components/option/editor/PageActionSection.tsx
@@ -1,14 +1,13 @@
 import { useState } from 'react'
-import { z } from 'zod'
 import { useFieldArray } from 'react-hook-form'
 import { Disc3 } from 'lucide-react'
-import { OPEN_MODE, PAGE_ACTION_OPEN_MODE } from '@/const'
+import { PAGE_ACTION_OPEN_MODE } from '@/const'
 import { FormLabel, FormDescription } from '@/components/ui/form'
 import type { PageAction } from '@/services/pageAction'
 import { t as _t } from '@/services/i18n'
 const t = (key: string, p?: string[]) => _t(`Option_${key}`, p)
 import { cn, e2a, isEmpty, capitalize } from '@/lib/utils'
-import { PageActionOption, PageActionStep } from '@/types/schema'
+import { PageActionStep } from '@/types/schema'
 import { DeepPartial } from '@/types'
 
 import { InputField } from '@/components/option/field/InputField'
diff --git a/src/components/option/editor/PageRuleList.tsx b/src/components/option/editor/PageRuleList.tsx
index 6dc61e77..277be600 100644
--- a/src/components/option/editor/PageRuleList.tsx
+++ b/src/components/option/editor/PageRuleList.tsx
@@ -25,7 +25,7 @@ import { RemoveButton } from '@/components/option/RemoveButton'
 import { InputField } from '@/components/option/field/InputField'
 import { SelectField } from '@/components/option/field/SelectField'
 import { PopupPlacementField } from '@/components/option/field/PopupPlacementField'
-import { PopupPlacement } from '@/services/defaultSettings'
+import { PopupPlacement } from '@/services/option/defaultSettings'
 import { t as _t } from '@/services/i18n'
 const t = (key: string, p?: string[]) => _t(`Option_${key}`, p)
 import { POPUP_ENABLED, LINK_COMMAND_ENABLED, INHERIT } from '@/const'
diff --git a/src/hooks/option/useCommandActions.ts b/src/hooks/option/useCommandActions.ts
index 5f695bbb..2991a0ee 100644
--- a/src/hooks/option/useCommandActions.ts
+++ b/src/hooks/option/useCommandActions.ts
@@ -1,13 +1,13 @@
 import { useCallback } from 'react'
 import { useFieldArray } from 'react-hook-form'
-import { toCommandTree } from '@/services/commandTree'
-import { isCircularReference } from '@/lib/commandUtils'
+import { toCommandTree } from '@/services/option/commandTree'
+import { isCircularReference } from '@/services/option/commandUtils'
 import { ROOT_FOLDER } from '@/const'
 import { CommandsSchemaType, FoldersSchemaType } from '@/types/schema'
 import {
   findNodeInTree,
   getAllCommandsFromFolder,
-} from '@/services/commandTree'
+} from '@/services/option/commandTree'
 
 /**
  * Custom hook that provides actions for managing commands and folders in the command editor.
diff --git a/src/hooks/option/useCommandDragDrop.ts b/src/hooks/option/useCommandDragDrop.ts
index 18638ff3..114cd60c 100644
--- a/src/hooks/option/useCommandDragDrop.ts
+++ b/src/hooks/option/useCommandDragDrop.ts
@@ -1,15 +1,15 @@
 import { useCallback } from 'react'
 import type { DragEndEvent } from '@dnd-kit/core'
 import type { Command, CommandFolder } from '@/types'
-import { isFolder, isCommand } from '@/lib/commandUtils'
+import { isFolder, isCommand } from '@/services/option/commandUtils'
 import {
   isValidDragTarget,
   calculateFolderToFolderPosition,
   calculateFolderToCommandPosition,
   calculateCommandToFolderPosition,
-} from '@/services/dragAndDrop'
+} from '@/services/option/dragAndDrop'
 import { useCommandActions } from './useCommandActions'
-import { toCommandTree } from '@/services/commandTree'
+import { toCommandTree } from '@/services/option/commandTree'
 
 export const useCommandDragDrop = (
   commandActions: ReturnType<typeof useCommandActions>,
diff --git a/src/hooks/useDetectLinkCommand.ts b/src/hooks/useDetectLinkCommand.ts
index d49d7bfe..88290727 100644
--- a/src/hooks/useDetectLinkCommand.ts
+++ b/src/hooks/useDetectLinkCommand.ts
@@ -11,7 +11,7 @@ import { Point, SettingsType, Command } from '@/types'
 import { LinkPreview } from '@/action/linkPreview'
 import { useSetting } from '@/hooks/useSetting'
 import { useLeftClickHold } from '@/hooks/useLeftClickHold'
-import Default, { PopupOption } from '@/services/defaultSettings'
+import Default, { PopupOption } from '@/services/option/defaultSettings'
 import { isPopup, isLinkCommand, isMac } from '@/lib/utils'
 import {
   isClickableElement,
diff --git a/src/hooks/useSetting.ts b/src/hooks/useSetting.ts
index 600cb793..4515b632 100644
--- a/src/hooks/useSetting.ts
+++ b/src/hooks/useSetting.ts
@@ -3,7 +3,7 @@ import { Settings } from '../services/settings'
 import type { SettingsType, PageRule } from '@/types'
 import { isEmpty } from '@/lib/utils'
 import { STYLE, STARTUP_METHOD, ALIGN, SIDE, INHERIT } from '@/const'
-import Default from '@/services/defaultSettings'
+import Default from '@/services/option/defaultSettings'
 
 type iconUrlMap = Record<number | string, string>
 
diff --git a/src/services/commandTree.ts b/src/services/option/commandTree.ts
similarity index 100%
rename from src/services/commandTree.ts
rename to src/services/option/commandTree.ts
diff --git a/src/lib/commandUtils.ts b/src/services/option/commandUtils.ts
similarity index 100%
rename from src/lib/commandUtils.ts
rename to src/services/option/commandUtils.ts
diff --git a/src/services/defaultSettings.ts b/src/services/option/defaultSettings.ts
similarity index 100%
rename from src/services/defaultSettings.ts
rename to src/services/option/defaultSettings.ts
diff --git a/src/services/dragAndDrop.ts b/src/services/option/dragAndDrop.ts
similarity index 94%
rename from src/services/dragAndDrop.ts
rename to src/services/option/dragAndDrop.ts
index f9a3b592..f4b4185c 100644
--- a/src/services/dragAndDrop.ts
+++ b/src/services/option/dragAndDrop.ts
@@ -1,8 +1,8 @@
 import type { Active, Over } from '@dnd-kit/core'
 import type { Command, CommandFolder } from '@/types'
-import type { CommandTreeNode } from '@/services/commandTree'
-import { findNodeInTree, findFirstCommand } from '@/services/commandTree'
-import { isCommand, isFolder, isCircularReference } from '@/lib/commandUtils'
+import type { CommandTreeNode } from '@/services/option/commandTree'
+import { findNodeInTree, findFirstCommand } from '@/services/option/commandTree'
+import { isCommand, isFolder, isCircularReference } from '@/services/option/commandUtils'
 import { ROOT_FOLDER } from '@/const'
 
 /**
diff --git a/src/services/optionSettings.ts b/src/services/option/optionSettings.ts
similarity index 100%
rename from src/services/optionSettings.ts
rename to src/services/option/optionSettings.ts
diff --git a/src/services/settings.ts b/src/services/settings.ts
index 45132ac3..6e29ee0e 100644
--- a/src/services/settings.ts
+++ b/src/services/settings.ts
@@ -2,7 +2,7 @@ import { Storage, STORAGE_KEY } from './storage'
 import DefaultSettings, {
   DefaultCommands,
   PopupPlacement,
-} from './defaultSettings'
+} from './option/defaultSettings'
 import {
   OPTION_FOLDER,
   VERSION,
@@ -28,7 +28,7 @@ import {
   isLinkCommand,
 } from '@/lib/utils'
 import { toDataURL } from '@/services/dom'
-import { OptionSettings } from '@/services/optionSettings'
+import { OptionSettings } from '@/services/option/optionSettings'
 
 enum LOCAL_STORAGE_KEY {
   CACHES = 'caches',
diff --git a/src/services/storage.ts b/src/services/storage.ts
index 9442d86e..2b384515 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -1,4 +1,4 @@
-import DefaultSettings, { DefaultCommands } from './defaultSettings'
+import DefaultSettings, { DefaultCommands } from './option/defaultSettings'
 import { Command, CaptureDataStorage } from '@/types'
 
 const SYNC_DEBOUNCE_DELAY = 10

From d46ef5a0bd07a9cf1eacb12428cb71c8b79c33f6 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 15:38:13 +0900
Subject: [PATCH 20/64] Update: Support for hierarchical pop-up menus.

---
 src/components/menu/Menu.tsx  | 148 +++++++++++++++++++---------------
 src/components/ui/menubar.tsx |   2 +-
 2 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index edfc1fb8..56c18790 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -2,13 +2,12 @@ import React, { useState, useRef } from 'react'
 import clsx from 'clsx'
 import {
   Menubar,
-  MenubarContent,
-  MenubarItem,
   MenubarMenu,
   MenubarTrigger,
+  MenubarContent,
 } from '@/components/ui/menubar'
 
-import { STYLE, ROOT_FOLDER, SIDE } from '@/const'
+import { STYLE, SIDE } from '@/const'
 import { MenuItem } from './MenuItem'
 import { Icon } from '@/components/Icon'
 import { HoverArea } from '@/components/menu/HoverArea'
@@ -17,14 +16,19 @@ import css from './Menu.module.css'
 import type { Command, CommandFolder } from '@/types'
 import { useSetting } from '@/hooks/useSetting'
 import { onHover, isMenuCommand } from '@/lib/utils'
+import {
+  toCommandTree,
+  type CommandTreeNode,
+} from '@/services/option/commandTree'
 
-type ItemObj = {
-  folder: CommandFolder
-  commands: Command[]
-}
-
-function isRoot(folder: CommandFolder): boolean {
-  return folder.id === ROOT_FOLDER
+type MenuTreeNodeProps = {
+  node: CommandTreeNode
+  isHorizontal: boolean
+  side: SIDE
+  menuRef: React.RefObject<HTMLDivElement>
+  onHoverTrigger: (enterVal: any) => void
+  onHoverContent: (enterVal: any) => void
+  depth?: number
 }
 
 export function Menu(): JSX.Element {
@@ -37,30 +41,7 @@ export function Menu(): JSX.Element {
   const isHorizontal = settings.style === STYLE.HORIZONTAL
   const side = settings.popupPlacement.side
 
-  const items = commands.reduce((pre, cur, idx) => {
-    const folder = folders.find((obj) => obj.id === cur.parentFolderId)
-    if (folder) {
-      const f = pre.find((obj) => obj.folder.id === cur.parentFolderId)
-      if (f) {
-        f.commands.push(cur)
-      } else {
-        pre.push({ folder, commands: [cur] })
-      }
-    } else {
-      // insert the command to the root folder
-      const preitem = pre[idx - 1]
-      if (preitem && isRoot(preitem.folder)) {
-        preitem.commands.push(cur)
-      } else {
-        pre.push({
-          folder: { id: ROOT_FOLDER, title: '' },
-          commands: [cur],
-        })
-      }
-    }
-    return pre
-  }, [] as ItemObj[])
-
+  const commandTree = toCommandTree(commands, folders)
   const activeFolder = hoverTrigger || hoverContent
 
   return (
@@ -71,43 +52,71 @@ export function Menu(): JSX.Element {
       })}
       ref={menuRef}
     >
-      {items.map(({ folder, commands }) =>
-        folder.id === ROOT_FOLDER ? (
-          commands.map((command) => (
-            <MenuItem
-              key={command.id}
-              menuRef={menuRef}
-              onlyIcon={isHorizontal}
-              command={command}
-            />
-          ))
-        ) : (
-          <MenuFolder
-            key={folder.id}
-            folder={folder}
-            commands={commands}
-            isHorizontal={isHorizontal}
-            side={side}
-            menuRef={menuRef}
-            onHoverTrigger={setHoverTrigger}
-            onHoverContent={setHoverContent}
-          />
-        ),
-      )}
+      {commandTree.map((node) => (
+        <MenuTreeNode
+          key={node.content.id}
+          node={node}
+          isHorizontal={isHorizontal}
+          side={side}
+          menuRef={menuRef}
+          onHoverTrigger={setHoverTrigger}
+          onHoverContent={setHoverContent}
+        />
+      ))}
     </Menubar>
   )
 }
 
+const MenuTreeNode = (props: MenuTreeNodeProps): JSX.Element => {
+  const {
+    node,
+    isHorizontal,
+    side,
+    menuRef,
+    onHoverTrigger,
+    onHoverContent,
+    depth = 0,
+  } = props
+
+  if (node.type === 'command') {
+    return (
+      <MenuItem
+        menuRef={menuRef}
+        onlyIcon={isHorizontal}
+        command={node.content as Command}
+      />
+    )
+  } else {
+    return (
+      <MenuFolder
+        folder={node.content as CommandFolder}
+        children={node.children}
+        isHorizontal={isHorizontal}
+        side={side}
+        menuRef={menuRef}
+        onHoverTrigger={onHoverTrigger}
+        onHoverContent={onHoverContent}
+        depth={depth}
+      />
+    )
+  }
+}
+
 const MenuFolder = (props: {
   folder: CommandFolder
-  commands: Command[]
+  children?: CommandTreeNode[]
   isHorizontal: boolean
   side: SIDE
   menuRef: React.RefObject<HTMLDivElement>
   onHoverTrigger: (enterVal: any) => void
   onHoverContent: (enterVal: any) => void
+  depth?: number
 }) => {
-  const { folder, isHorizontal } = props
+  const { folder, children, isHorizontal, depth = 0 } = props
+  const [hoverTrigger, setHoverTrigger] = useState('')
+  const [hoverContent, setHoverContent] = useState('')
+  const activeFolder = hoverTrigger || hoverContent
+
   const menuSide = isHorizontal
     ? props.side === SIDE.bottom
       ? SIDE.bottom
@@ -155,20 +164,25 @@ const MenuFolder = (props: {
       </MenubarTrigger>
       <MenubarContent
         side={menuSide}
-        sideOffset={isHorizontal ? 2 : -2}
+        sideOffset={isHorizontal ? 2 + depth * 4 : -2 - depth * 4}
         className={clsx({ flex: isHorizontal })}
         ref={contentRef}
         {...onHover(props.onHoverContent, folder.id)}
       >
-        {props.commands.map((command) => (
-          <MenubarItem key={command.id}>
-            <MenuItem
+        <Menubar value={activeFolder}>
+          {children?.map((child) => (
+            <MenuTreeNode
+              node={child}
+              isHorizontal={isHorizontal}
+              side={props.side}
               menuRef={props.menuRef}
-              onlyIcon={isHorizontal}
-              command={command}
+              onHoverTrigger={setHoverTrigger}
+              onHoverContent={setHoverContent}
+              depth={depth + 1}
+              key={child.content.id}
             />
-          </MenubarItem>
-        ))}
+          ))}
+        </Menubar>
         <HoverArea
           anchor={anchorRect}
           content={contentRect}
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index 48b30590..e8c8d15d 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -96,7 +96,7 @@ const MenubarContent = React.forwardRef<
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        'z-[2147483647] overflow-hidden rounded-md border p-0.5 bg-background foreground shadow-xl data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-[2147483647] overflow-hidden rounded-md bg-background foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
       )}
       {...props}

From c69995da66b5032481606540c57611002000709e Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 16:01:14 +0900
Subject: [PATCH 21/64] Update: Fix styles of vertical.

---
 src/components/menu/Menu.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 56c18790..59b0cf17 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -164,12 +164,17 @@ const MenuFolder = (props: {
       </MenubarTrigger>
       <MenubarContent
         side={menuSide}
-        sideOffset={isHorizontal ? 2 + depth * 4 : -2 - depth * 4}
+        sideOffset={isHorizontal ? 2 : -2}
         className={clsx({ flex: isHorizontal })}
         ref={contentRef}
         {...onHover(props.onHoverContent, folder.id)}
       >
-        <Menubar value={activeFolder}>
+        <Menubar
+          value={activeFolder}
+          className={clsx({
+            [css.menuVertical]: !isHorizontal,
+          })}
+        >
           {children?.map((child) => (
             <MenuTreeNode
               node={child}

From 9a71742e5c2e3a221f626f1c948d79db9e56fa54 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 16:01:38 +0900
Subject: [PATCH 22/64] Refactoring.

---
 src/background_script.ts          | 4 ++--
 src/command_hub.tsx               | 2 +-
 src/components/Popup.tsx          | 2 +-
 src/content_script.tsx            | 2 +-
 src/hooks/useDetectLinkCommand.ts | 2 +-
 src/services/dom.ts               | 6 +++---
 src/services/storage.ts           | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/background_script.ts b/src/background_script.ts
index de61f0c2..6113360d 100644
--- a/src/background_script.ts
+++ b/src/background_script.ts
@@ -529,12 +529,12 @@ chrome.commands.onCommand.addListener(async (commandName) => {
       return
     }
 
-    let enableSendTab =
+    const enableSendTab =
       tab?.id &&
       !tab.url?.startsWith('chrome') &&
       !tab.url?.includes('chromewebstore.google.com')
 
-    let selectionText = await Storage.get<string>(
+    const selectionText = await Storage.get<string>(
       SESSION_STORAGE_KEY.SELECTION_TEXT,
     )
 
diff --git a/src/command_hub.tsx b/src/command_hub.tsx
index 9dd3a0c7..ce590f4f 100644
--- a/src/command_hub.tsx
+++ b/src/command_hub.tsx
@@ -11,7 +11,7 @@ const insertCss = (elm: ShadowRoot) => {
   fetch(url)
     .then((res) => res.text())
     .then((css) => {
-      let style = document.createElement('style')
+      const style = document.createElement('style')
       style.append(document.createTextNode(css))
       elm.insertBefore(style, elm.firstChild)
     })
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index f1fcb83a..0995348d 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -136,7 +136,7 @@ export function PreviewDesc(props: PopupProps) {
   const { settings } = useSetting()
   const key = settings.startupMethod.keyboardParam
 
-  let os = isMac() ? 'mac' : 'windows'
+  const os = isMac() ? 'mac' : 'windows'
   const keyLabel = t(`Option_keyboardParam_${key}_${os}`)
 
   return (
diff --git a/src/content_script.tsx b/src/content_script.tsx
index f8d7361e..f5410efb 100644
--- a/src/content_script.tsx
+++ b/src/content_script.tsx
@@ -17,7 +17,7 @@ const insertCss = (elm: ShadowRoot, filePath: string) => {
   fetch(url)
     .then((res) => res.text())
     .then((css) => {
-      let style = document.createElement('style')
+      const style = document.createElement('style')
       style.append(document.createTextNode(css))
       elm.insertBefore(style, elm.firstChild)
     })
diff --git a/src/hooks/useDetectLinkCommand.ts b/src/hooks/useDetectLinkCommand.ts
index 88290727..ac73a7d4 100644
--- a/src/hooks/useDetectLinkCommand.ts
+++ b/src/hooks/useDetectLinkCommand.ts
@@ -181,7 +181,7 @@ const calcPopupPosition = async (
 ): Promise<Point> => {
   const popupOption = command?.popupOption ?? PopupOption
   const s = await getScreenSize()
-  let x = isCursorInLeft(cursorX, s)
+  const x = isCursorInLeft(cursorX, s)
     ? Math.floor(s.width + s.left - popupOption.width - POPUP_OFFSET)
     : Math.floor(s.left + POPUP_OFFSET)
   const y = Math.floor((s.height + s.top - popupOption.height) / 2)
diff --git a/src/services/dom.ts b/src/services/dom.ts
index ad0cfadb..eb867436 100644
--- a/src/services/dom.ts
+++ b/src/services/dom.ts
@@ -183,7 +183,7 @@ export function findClickableElement(elm: Element | null): Element | null {
 
 export function getSelectorFromElement(el: Element): string {
   if (!(el instanceof Element)) return ''
-  let path = []
+  const path = []
   while (el.nodeType === Node.ELEMENT_NODE) {
     let selector = el.nodeName.toLowerCase()
     if (el.id) {
@@ -436,12 +436,12 @@ export function getXPath(element: Element): string {
 }
 
 function getPath(elm: Element, uniqueElement?: Element): string[] {
-  let path = []
+  const path = []
   while (elm.nodeType === Node.ELEMENT_NODE && elm !== uniqueElement) {
     let index = 0
     let hasSiblings = false
     let sibling = elm as Node | null
-    let nodeName = elm.nodeName.toLowerCase()
+    const nodeName = elm.nodeName.toLowerCase()
 
     // Check if the element has siblings.
     while (sibling) {
diff --git a/src/services/storage.ts b/src/services/storage.ts
index 2b384515..730a2be4 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -149,7 +149,7 @@ export const Storage = {
    */
   get: async <T>(key: KEY): Promise<T> => {
     const area = detectStorageArea(key)
-    let result = await area.get(`${key}`)
+    const result = await area.get(`${key}`)
     if (chrome.runtime.lastError != null) {
       throw chrome.runtime.lastError
     }

From 2aae4893ab93c52fbd43391ca35ea0db07bec9cb Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 16:34:20 +0900
Subject: [PATCH 23/64] Update: Fix hover area.

---
 src/components/menu/HoverArea.tsx | 41 +++++++++++++++++++------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/menu/HoverArea.tsx b/src/components/menu/HoverArea.tsx
index 291cec98..a85d181a 100644
--- a/src/components/menu/HoverArea.tsx
+++ b/src/components/menu/HoverArea.tsx
@@ -4,6 +4,8 @@ type Props = {
   isHorizontal: boolean
 }
 
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+
 export const HoverArea = (props: Props) => {
   const { anchor, content, isHorizontal } = props
 
@@ -21,55 +23,62 @@ export const HoverArea = (props: Props) => {
   const isTop = isHorizontal && anchor.y <= content.y
   const isBottom = isHorizontal && anchor.bottom >= content.bottom
   const isLeft = !isHorizontal && anchor.x <= content.x
-  const isRight = !isHorizontal && anchor.right >= content.right
+  const placement: Placement = isTop
+    ? 'top'
+    : isBottom
+      ? 'bottom'
+      : isLeft
+        ? 'left'
+        : 'right'
 
   let top = 0
   let left = 0
   let d
 
-  if (isTop) {
-    d = `M ${anchor.right} ${anchor.top}
+  switch (placement) {
+    case 'top':
+      d = `M ${anchor.right} ${anchor.top}
          Q ${anchor.right} ${content.top},
            ${content.right} ${content.top}
          h ${-content.width}
          Q ${anchor.x} ${content.top},
            ${anchor.x} ${anchor.top}
-         v ${anchor.height}
          h ${anchor.width}
          z`
-    top = anchor.top - content.top
-  } else if (isBottom) {
-    d = `M ${anchor.left} ${anchor.bottom}
+      top = anchor.top - content.top
+      break
+    case 'bottom':
+      d = `M ${anchor.left} ${anchor.bottom}
          Q ${anchor.left} ${content.bottom},
            ${content.left} ${content.bottom}
          h ${content.width}
          Q ${anchor.right} ${content.bottom},
            ${anchor.right} ${anchor.bottom}
-         v ${-anchor.height}
          h ${-anchor.width}
          z`
-  } else if (isLeft) {
-    d = `M ${anchor.x} ${anchor.y}
+      break
+    case 'left':
+      d = `M ${anchor.x} ${anchor.y}
          Q ${content.x} ${anchor.y},
            ${content.x} ${content.y}
          v ${content.height}
          Q ${content.x} ${anchor.bottom},
            ${anchor.x} ${anchor.bottom}
-         h ${anchor.width}
          v ${-anchor.height}
          z`
-    left = -anchor.width + 2
-  } else if (isRight) {
-    d = `M ${anchor.right} ${anchor.top}
+      left = -anchor.width + 2
+      break
+    case 'right':
+      d = `M ${anchor.right} ${anchor.top}
          Q ${content.right} ${anchor.top},
            ${content.right} ${content.top}
          v ${content.height}
          Q ${content.right} ${anchor.bottom},
            ${anchor.right} ${anchor.bottom}
-         h ${-anchor.width}
          v ${-anchor.height}
          z`
-    left = -2
+      left = -2
+      break
   }
 
   return (

From 066e621f3bba554cb5b10821e9e76accaba58e3d Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 16:34:47 +0900
Subject: [PATCH 24/64] Update: react-menubar.

---
 package.json |   2 +-
 yarn.lock    | 222 +++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 164 insertions(+), 60 deletions(-)

diff --git a/package.json b/package.json
index 0f449b61..36d831bc 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@radix-ui/react-collapsible": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-menubar": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-select": "^2.1.6",
diff --git a/yarn.lock b/yarn.lock
index 6e87bb8c..9450ce06 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -736,6 +736,13 @@
   dependencies:
     "@radix-ui/react-primitive" "2.0.2"
 
+"@radix-ui/react-arrow@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz#e14a2657c81d961598c5e72b73dd6098acc04f09"
+  integrity sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.3"
+
 "@radix-ui/react-collapsible@^1.1.3":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.3.tgz"
@@ -750,16 +757,6 @@
     "@radix-ui/react-use-controllable-state" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-collection@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.1.tgz"
-  integrity sha512-LwT3pSho9Dljg+wY2KN2mrrh6y3qELfftINERIzBUO9e0N+t0oMTyn3k9iv+ZqgrwGkRnLpNJrsMv9BZlt2yuA==
-  dependencies:
-    "@radix-ui/react-compose-refs" "1.1.1"
-    "@radix-ui/react-context" "1.1.1"
-    "@radix-ui/react-primitive" "2.0.1"
-    "@radix-ui/react-slot" "1.1.1"
-
 "@radix-ui/react-collection@1.1.2":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz"
@@ -780,6 +777,16 @@
     "@radix-ui/react-primitive" "2.1.0"
     "@radix-ui/react-slot" "1.2.0"
 
+"@radix-ui/react-collection@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.7.tgz#d05c25ca9ac4695cc19ba91f42f686e3ea2d9aec"
+  integrity sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-slot" "1.2.3"
+
 "@radix-ui/react-compose-refs@1.1.1":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz"
@@ -830,6 +837,17 @@
   resolved "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz"
   integrity sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==
 
+"@radix-ui/react-dismissable-layer@1.1.10":
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz#429b9bada3672c6895a5d6a642aca6ecaf4f18c3"
+  integrity sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-escape-keydown" "1.1.1"
+
 "@radix-ui/react-dismissable-layer@1.1.3":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.3.tgz"
@@ -857,6 +875,11 @@
   resolved "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz"
   integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==
 
+"@radix-ui/react-focus-guards@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz#4ec9a7e50925f7fb661394460045b46212a33bed"
+  integrity sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==
+
 "@radix-ui/react-focus-scope@1.1.1":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz"
@@ -875,6 +898,15 @@
     "@radix-ui/react-primitive" "2.0.2"
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-focus-scope@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz#dfe76fc103537d80bf42723a183773fd07bfb58d"
+  integrity sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+
 "@radix-ui/react-id@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz"
@@ -896,45 +928,45 @@
   dependencies:
     "@radix-ui/react-primitive" "2.0.2"
 
-"@radix-ui/react-menu@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.4.tgz"
-  integrity sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==
+"@radix-ui/react-menu@2.1.15":
+  version "2.1.15"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.15.tgz#a1a8f06cab3c309f9998cdbd2b3ad279e42ed483"
+  integrity sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==
   dependencies:
-    "@radix-ui/primitive" "1.1.1"
-    "@radix-ui/react-collection" "1.1.1"
-    "@radix-ui/react-compose-refs" "1.1.1"
-    "@radix-ui/react-context" "1.1.1"
-    "@radix-ui/react-direction" "1.1.0"
-    "@radix-ui/react-dismissable-layer" "1.1.3"
-    "@radix-ui/react-focus-guards" "1.1.1"
-    "@radix-ui/react-focus-scope" "1.1.1"
-    "@radix-ui/react-id" "1.1.0"
-    "@radix-ui/react-popper" "1.2.1"
-    "@radix-ui/react-portal" "1.1.3"
-    "@radix-ui/react-presence" "1.1.2"
-    "@radix-ui/react-primitive" "2.0.1"
-    "@radix-ui/react-roving-focus" "1.1.1"
-    "@radix-ui/react-slot" "1.1.1"
-    "@radix-ui/react-use-callback-ref" "1.1.0"
-    aria-hidden "^1.1.1"
-    react-remove-scroll "^2.6.1"
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.10"
+    "@radix-ui/react-focus-guards" "1.1.2"
+    "@radix-ui/react-focus-scope" "1.1.7"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-popper" "1.2.7"
+    "@radix-ui/react-portal" "1.1.9"
+    "@radix-ui/react-presence" "1.1.4"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-roving-focus" "1.1.10"
+    "@radix-ui/react-slot" "1.2.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
 
-"@radix-ui/react-menubar@^1.1.2":
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.4.tgz"
-  integrity sha512-+KMpi7VAZuB46+1LD7a30zb5IxyzLgC8m8j42gk3N4TUCcViNQdX8FhoH1HDvYiA8quuqcek4R4bYpPn/SY1GA==
+"@radix-ui/react-menubar@^1.1.15":
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menubar/-/react-menubar-1.1.15.tgz#e597bdf53c9ddeaadf2efadc480cc58a411fa914"
+  integrity sha512-Z71C7LGD+YDYo3TV81paUs8f3Zbmkvg6VLRQpKYfzioOE6n7fOhA3ApK/V/2Odolxjoc4ENk8AYCjohCNayd5A==
   dependencies:
-    "@radix-ui/primitive" "1.1.1"
-    "@radix-ui/react-collection" "1.1.1"
-    "@radix-ui/react-compose-refs" "1.1.1"
-    "@radix-ui/react-context" "1.1.1"
-    "@radix-ui/react-direction" "1.1.0"
-    "@radix-ui/react-id" "1.1.0"
-    "@radix-ui/react-menu" "2.1.4"
-    "@radix-ui/react-primitive" "2.0.1"
-    "@radix-ui/react-roving-focus" "1.1.1"
-    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-menu" "2.1.15"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-roving-focus" "1.1.10"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
 
 "@radix-ui/react-popover@^1.1.2":
   version "1.1.4"
@@ -989,6 +1021,22 @@
     "@radix-ui/react-use-size" "1.1.0"
     "@radix-ui/rect" "1.1.0"
 
+"@radix-ui/react-popper@1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.2.7.tgz#531cf2eebb3d3270d58f7d8136e4517646429978"
+  integrity sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==
+  dependencies:
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+    "@radix-ui/react-use-rect" "1.1.1"
+    "@radix-ui/react-use-size" "1.1.1"
+    "@radix-ui/rect" "1.1.1"
+
 "@radix-ui/react-portal@1.1.3":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.3.tgz"
@@ -1005,6 +1053,14 @@
     "@radix-ui/react-primitive" "2.0.2"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-portal@1.1.9":
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.9.tgz#14c3649fe48ec474ac51ed9f2b9f5da4d91c4472"
+  integrity sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==
+  dependencies:
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-presence@1.1.2":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz"
@@ -1013,6 +1069,14 @@
     "@radix-ui/react-compose-refs" "1.1.1"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-presence@1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.4.tgz#253ac0ad4946c5b4a9c66878335f5cf07c967ced"
+  integrity sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-primitive@2.0.1":
   version "2.0.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz"
@@ -1034,6 +1098,13 @@
   dependencies:
     "@radix-ui/react-slot" "1.2.0"
 
+"@radix-ui/react-primitive@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz#db9b8bcff49e01be510ad79893fb0e4cda50f1bc"
+  integrity sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==
+  dependencies:
+    "@radix-ui/react-slot" "1.2.3"
+
 "@radix-ui/react-progress@^1.1.2":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.2.tgz"
@@ -1042,20 +1113,20 @@
     "@radix-ui/react-context" "1.1.1"
     "@radix-ui/react-primitive" "2.0.2"
 
-"@radix-ui/react-roving-focus@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz"
-  integrity sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==
+"@radix-ui/react-roving-focus@1.1.10":
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz#46030496d2a490c4979d29a7e1252465e51e4b0b"
+  integrity sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==
   dependencies:
-    "@radix-ui/primitive" "1.1.1"
-    "@radix-ui/react-collection" "1.1.1"
-    "@radix-ui/react-compose-refs" "1.1.1"
-    "@radix-ui/react-context" "1.1.1"
-    "@radix-ui/react-direction" "1.1.0"
-    "@radix-ui/react-id" "1.1.0"
-    "@radix-ui/react-primitive" "2.0.1"
-    "@radix-ui/react-use-callback-ref" "1.1.0"
-    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
 
 "@radix-ui/react-roving-focus@1.1.7":
   version "1.1.7"
@@ -1120,6 +1191,13 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.2"
 
+"@radix-ui/react-slot@1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.3.tgz#502d6e354fc847d4169c3bc5f189de777f68cfe1"
+  integrity sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+
 "@radix-ui/react-switch@^1.1.3":
   version "1.1.3"
   resolved "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.3.tgz"
@@ -1194,6 +1272,13 @@
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
+"@radix-ui/react-use-escape-keydown@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz#b3fed9bbea366a118f40427ac40500aa1423cc29"
+  integrity sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+
 "@radix-ui/react-use-layout-effect@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz"
@@ -1216,6 +1301,13 @@
   dependencies:
     "@radix-ui/rect" "1.1.0"
 
+"@radix-ui/react-use-rect@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz#01443ca8ed071d33023c1113e5173b5ed8769152"
+  integrity sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==
+  dependencies:
+    "@radix-ui/rect" "1.1.1"
+
 "@radix-ui/react-use-size@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz"
@@ -1223,6 +1315,13 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
+"@radix-ui/react-use-size@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz#6de276ffbc389a537ffe4316f5b0f24129405b37"
+  integrity sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-visually-hidden@1.1.2":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.2.tgz"
@@ -1235,6 +1334,11 @@
   resolved "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz"
   integrity sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==
 
+"@radix-ui/rect@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.1.1.tgz#78244efe12930c56fd255d7923865857c41ac8cb"
+  integrity sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==
+
 "@rollup/pluginutils@^4.1.2":
   version "4.2.1"
   resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz"

From 8fb43685794861627f97dcc61db8ce8241a1e1e4 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 17:04:08 +0900
Subject: [PATCH 25/64] Update: Select folder selection also reflects
 hierarchy.

---
 .../option/editor/CommandEditDialog.tsx       |  2 ++
 src/components/option/field/SelectField.tsx   | 20 ++++++++++++++-----
 src/services/option/commandTree.ts            | 11 ++++++++--
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/option/editor/CommandEditDialog.tsx b/src/components/option/editor/CommandEditDialog.tsx
index 863879b8..3e5e0cbb 100644
--- a/src/components/option/editor/CommandEditDialog.tsx
+++ b/src/components/option/editor/CommandEditDialog.tsx
@@ -81,6 +81,7 @@ import type {
 } from '@/types'
 
 import css from './CommandEditDialog.module.css'
+import { calcLevel } from '@/services/option/commandTree'
 
 const EmptyFolder = {
   id: ROOT_FOLDER,
@@ -595,6 +596,7 @@ const CommandEditDialogInner = ({
                       value: folder.id,
                       iconUrl: folder.iconUrl,
                       iconSvg: folder.iconSvg,
+                      level: calcLevel(folder, folders),
                     }))}
                   />
                 </CollapsibleContent>
diff --git a/src/components/option/field/SelectField.tsx b/src/components/option/field/SelectField.tsx
index 00b339b5..0e9e0efe 100644
--- a/src/components/option/field/SelectField.tsx
+++ b/src/components/option/field/SelectField.tsx
@@ -23,6 +23,7 @@ export type SelectOptionType = {
   nameRender?: (name: string) => React.ReactNode
   iconUrl?: string
   iconSvg?: string
+  level?: number
 }
 
 export type SelectGroupType = {
@@ -62,11 +63,20 @@ const renderOptionContent = (opt: SelectOptionType) => {
   )
 }
 
-const renderOption = (opt: SelectOptionType) => (
-  <SelectItem value={opt.value} key={opt.value} className="hover:bg-gray-100">
-    {renderOptionContent(opt)}
-  </SelectItem>
-)
+const renderOption = (opt: SelectOptionType) => {
+  const level = opt.level ?? 0
+  const paddingLeft = level * 16 + 32 // 32 is the width of pl-8
+  return (
+    <SelectItem
+      value={opt.value}
+      key={opt.value}
+      className={`hover:bg-gray-100`}
+      style={{ paddingLeft }}
+    >
+      {renderOptionContent(opt)}
+    </SelectItem>
+  )
+}
 
 const renderGroupLabel = (group: SelectGroupType) => (
   <SelectLabel className="flex items-center gap-1">
diff --git a/src/services/option/commandTree.ts b/src/services/option/commandTree.ts
index 60552e24..2323faf3 100644
--- a/src/services/option/commandTree.ts
+++ b/src/services/option/commandTree.ts
@@ -207,7 +207,10 @@ export function toFlatten(tree: CommandTreeNode[]): FlattenNode[] {
   return flatten
 }
 
-export function calcLevel(node: FlattenNode, folders: CommandFolder[]): number {
+export function calcLevel(
+  node: FlattenNode | Command | CommandFolder,
+  folders: CommandFolder[],
+): number {
   const calculateDepth = (parentFolderId?: string): number => {
     if (!parentFolderId || parentFolderId === ROOT_FOLDER) {
       return 0
@@ -221,7 +224,11 @@ export function calcLevel(node: FlattenNode, folders: CommandFolder[]): number {
     return 1 + calculateDepth(parentFolder.parentFolderId)
   }
 
-  return calculateDepth(node.content.parentFolderId)
+  // Handle different input types
+  const parentFolderId =
+    'content' in node ? node.content.parentFolderId : node.parentFolderId
+
+  return calculateDepth(parentFolderId)
 }
 
 export function getAllCommandsFromFolder(

From 4476b039173f6ad68bc115336e4a2bebcf1daa5a Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 20:48:55 +0900
Subject: [PATCH 26/64] Update: Update the order of folders as well.

---
 src/components/option/editor/CommandList.tsx | 14 ++++--
 src/hooks/option/useCommandActions.ts        | 53 ++++++++++++++++----
 src/hooks/option/useCommandDragDrop.ts       | 16 ++++--
 src/services/option/commandTree.ts           | 21 ++++++++
 4 files changed, 87 insertions(+), 17 deletions(-)

diff --git a/src/components/option/editor/CommandList.tsx b/src/components/option/editor/CommandList.tsx
index b35dc469..31dddd30 100644
--- a/src/components/option/editor/CommandList.tsx
+++ b/src/components/option/editor/CommandList.tsx
@@ -35,7 +35,11 @@ import {
   toFlatten,
   type FlattenNode,
 } from '@/services/option/commandTree'
-import { isCommand, isFolder, getDescendantFolderIds } from '@/services/option/commandUtils'
+import {
+  isCommand,
+  isFolder,
+  getDescendantFolderIds,
+} from '@/services/option/commandUtils'
 import { isValidDrop } from '@/services/option/dragAndDrop'
 import { useCommandActions } from '@/hooks/option/useCommandActions'
 import { useCommandDragDrop } from '@/hooks/option/useCommandDragDrop'
@@ -157,7 +161,11 @@ export const CommandList = ({ control }: CommandListProps) => {
   }
 
   // Initialize command actions and drag drop functionality
-  const commandActions = useCommandActions(commandArray, folderArray)
+  const commandActions = useCommandActions(
+    commandArray,
+    folderArray,
+    commandTree,
+  )
 
   const { handleDragEnd } = useCommandDragDrop(
     commandActions,
@@ -293,7 +301,7 @@ export const CommandList = ({ control }: CommandListProps) => {
               onCopy={commandCopy}
               isDroppable={(node, activeNode) =>
                 isDroppable(node, activeNode, folderArray.fields)
-                }
+              }
             />
           </SortableContext>
         </DndContext>
diff --git a/src/hooks/option/useCommandActions.ts b/src/hooks/option/useCommandActions.ts
index 2991a0ee..d282dc36 100644
--- a/src/hooks/option/useCommandActions.ts
+++ b/src/hooks/option/useCommandActions.ts
@@ -1,18 +1,20 @@
 import { useCallback } from 'react'
 import { useFieldArray } from 'react-hook-form'
-import { toCommandTree } from '@/services/option/commandTree'
 import { isCircularReference } from '@/services/option/commandUtils'
 import { ROOT_FOLDER } from '@/const'
 import { CommandsSchemaType, FoldersSchemaType } from '@/types/schema'
 import {
+  toFlatten,
   findNodeInTree,
   getAllCommandsFromFolder,
+  getAllFoldersFromNode,
 } from '@/services/option/commandTree'
+import type { CommandTreeNode } from '@/services/option/commandTree'
 
-/**
+/*
  * Custom hook that provides actions for managing commands and folders in the command editor.
  * Handles moving, organizing, and removing commands and folders with proper hierarchy management.
- * 
+ *
  * @param commandArray - React Hook Form field array for commands
  * @param folderArray - React Hook Form field array for folders
  * @returns Object containing command and folder management functions
@@ -22,8 +24,9 @@ export const useCommandActions = (
     typeof useFieldArray<CommandsSchemaType, 'commands'>
   >,
   folderArray: ReturnType<typeof useFieldArray<FoldersSchemaType, 'folders'>>,
+  tree: CommandTreeNode[],
 ) => {
-  const tree = toCommandTree(commandArray.fields, folderArray.fields)
+  const flatten = toFlatten(tree)
 
   /**
    * Moves a command from one position to another in the commands array
@@ -41,29 +44,59 @@ export const useCommandActions = (
    * Moves a folder to become a child of another folder
    * Prevents circular references by checking folder hierarchy
    * @param sourceFolderId - ID of the folder to move
-   * @param targetFolderId - ID of the target parent folder (defaults to ROOT_FOLDER)
+   * @param overContentid - ID of the content that is being dragged over
+   * @param distFolderId - ID of the target parent folder (defaults to ROOT_FOLDER)
    */
   const moveFolderToFolder = useCallback(
-    (sourceFolderId: string, targetFolderId = ROOT_FOLDER) => {
+    (
+      sourceFolderId: string,
+      overContentId: string,
+      distFolderId = ROOT_FOLDER,
+    ) => {
       if (
         isCircularReference(
           sourceFolderId,
-          targetFolderId,
+          distFolderId,
           folderArray.fields as any,
         )
       ) {
         return
       }
 
+      const sourceFolder = findNodeInTree(tree, sourceFolderId)
+      if (!sourceFolder) {
+        return
+      }
       const sourceFolderIndex = folderArray.fields.findIndex(
         (f) => f.id === sourceFolderId,
       )
+      const distFolderIndex = folderArray.fields.findIndex(
+        (f) => f.id === overContentId,
+      )
+
       if (sourceFolderIndex >= 0) {
-        const sourceFolder = folderArray.fields[sourceFolderIndex]
         folderArray.update(sourceFolderIndex, {
-          ...sourceFolder,
-          parentFolderId: targetFolderId,
+          ...sourceFolder.content,
+          parentFolderId: distFolderId,
         })
+        if (sourceFolderIndex !== distFolderIndex && distFolderIndex >= 0) {
+          const isForwardDrag = distFolderIndex > sourceFolderIndex
+          const subFolders = getAllFoldersFromNode(sourceFolder)
+          if (isForwardDrag) {
+            subFolders.forEach(() => {
+              console.log('source', sourceFolderIndex, 'dist', distFolderIndex)
+              folderArray.move(sourceFolderIndex, distFolderIndex)
+            })
+          } else {
+            let currentDistIndex = distFolderIndex
+            subFolders.forEach((f) => {
+              const idx = folderArray.fields.findIndex((c) => c.id === f.id)
+              console.log('source', idx, 'dist', currentDistIndex)
+              folderArray.move(idx, currentDistIndex)
+              currentDistIndex++
+            })
+          }
+        }
       }
     },
     [folderArray],
diff --git a/src/hooks/option/useCommandDragDrop.ts b/src/hooks/option/useCommandDragDrop.ts
index 114cd60c..bb04423f 100644
--- a/src/hooks/option/useCommandDragDrop.ts
+++ b/src/hooks/option/useCommandDragDrop.ts
@@ -39,16 +39,24 @@ export const useCommandDragDrop = (
       if (isFolder(activeContent) && isFolder(overContent)) {
         const { distIndex, firstChildIndex, newParentId } =
           calculateFolderToFolderPosition(active, over, commands, tree)
-        moveFolderToFolder(activeContent.id, newParentId)
+        moveFolderToFolder(activeContent.id, overContent.id, newParentId)
         moveFolderContents(activeContent.id, distIndex, firstChildIndex)
         return
       }
 
       // Folder to Command drag
       if (isFolder(activeContent) && isCommand(overContent)) {
-        const { distIndex, firstChildIndex } =
-          calculateFolderToCommandPosition(active, over, commands, tree)
-        moveFolderToFolder(activeContent.id, overContent.parentFolderId)
+        const { distIndex, firstChildIndex } = calculateFolderToCommandPosition(
+          active,
+          over,
+          commands,
+          tree,
+        )
+        moveFolderToFolder(
+          activeContent.id,
+          overContent.id,
+          overContent.parentFolderId,
+        )
         moveFolderContents(activeContent.id, distIndex, firstChildIndex)
         return
       }
diff --git a/src/services/option/commandTree.ts b/src/services/option/commandTree.ts
index 2323faf3..41a81e6c 100644
--- a/src/services/option/commandTree.ts
+++ b/src/services/option/commandTree.ts
@@ -251,3 +251,24 @@ export function getAllCommandsFromFolder(
   collectCommands(folderNode)
   return commands
 }
+
+export function getAllFoldersFromNode(
+  node: CommandTreeNode,
+): CommandFolder[] {
+  const folders: CommandFolder[] = []
+
+  const collectFolders = (currentNode: CommandTreeNode) => {
+    if (currentNode.type === 'folder') {
+      folders.push(currentNode.content as CommandFolder)
+    }
+
+    if (currentNode.children) {
+      for (const child of currentNode.children) {
+        collectFolders(child)
+      }
+    }
+  }
+
+  collectFolders(node)
+  return folders
+}

From 9d11175d81aa14f96cdc092d0eee42e50c7e9d45 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 21:50:47 +0900
Subject: [PATCH 27/64] Update: Update the order of folders when moving a
 folder to a command.

---
 src/hooks/option/useCommandActions.ts | 67 ++++++++++++++++++++++++---
 src/services/option/commandUtils.ts   | 16 +++++++
 2 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/src/hooks/option/useCommandActions.ts b/src/hooks/option/useCommandActions.ts
index d282dc36..e8b322f5 100644
--- a/src/hooks/option/useCommandActions.ts
+++ b/src/hooks/option/useCommandActions.ts
@@ -2,6 +2,7 @@ import { useCallback } from 'react'
 import { useFieldArray } from 'react-hook-form'
 import { isCircularReference } from '@/services/option/commandUtils'
 import { ROOT_FOLDER } from '@/const'
+import type { CommandFolder } from '@/types'
 import { CommandsSchemaType, FoldersSchemaType } from '@/types/schema'
 import {
   toFlatten,
@@ -9,7 +10,49 @@ import {
   getAllCommandsFromFolder,
   getAllFoldersFromNode,
 } from '@/services/option/commandTree'
-import type { CommandTreeNode } from '@/services/option/commandTree'
+import { isFolder, isDescendantOf } from '@/services/option/commandUtils'
+import type {
+  CommandTreeNode,
+  FlattenNode,
+} from '@/services/option/commandTree'
+
+/**
+ * Finds the appropriate folder between two positions in a flattened node array
+ * Used during drag operations to determine the target folder when dropping a command or folder
+ * @param flatten - Array of flattened nodes (commands and folders in display order)
+ * @param folders - Array of all folders for hierarchy checking
+ * @param from - Starting position index of the dragged item
+ * @param to - Target position index where the item is being dropped
+ * @returns The folder node that should be the target, or null if no suitable folder is found
+ */
+const findFolder = (
+  flatten: FlattenNode[],
+  folders: CommandFolder[],
+  from: number,
+  to: number,
+): FlattenNode | null => {
+  const isForwardDrag = to > from
+  if (isForwardDrag) {
+    for (let i = from + 1; i < to; i++) {
+      if (
+        isFolder(flatten[i].content) &&
+        !isDescendantOf(flatten[i].id, flatten[from].id, folders)
+      ) {
+        return flatten[i]
+      }
+    }
+  } else {
+    for (let i = from - 1; i > to; i--) {
+      if (
+        isFolder(flatten[i].content) &&
+        !isDescendantOf(flatten[i].id, flatten[from].id, folders)
+      ) {
+        return flatten[i]
+      }
+    }
+  }
+  return null
+}
 
 /*
  * Custom hook that provides actions for managing commands and folders in the command editor.
@@ -64,15 +107,29 @@ export const useCommandActions = (
       }
 
       const sourceFolder = findNodeInTree(tree, sourceFolderId)
+      const overContent = findNodeInTree(tree, overContentId)
       if (!sourceFolder) {
         return
       }
       const sourceFolderIndex = folderArray.fields.findIndex(
         (f) => f.id === sourceFolderId,
       )
-      const distFolderIndex = folderArray.fields.findIndex(
-        (f) => f.id === overContentId,
-      )
+      let distFolderIndex = -1
+      if (overContent?.type === 'folder') {
+        distFolderIndex = folderArray.fields.findIndex(
+          (f) => f.id === overContentId,
+        )
+      } else {
+        // When the drop target is a command, find a folder between the dragged folder and the target
+        const from = flatten.findIndex((f) => f.id === sourceFolderId)
+        const to = flatten.findIndex((f) => f.id === overContentId)
+        const folder = findFolder(flatten, folderArray.fields, from, to)
+        if (folder) {
+          distFolderIndex = folderArray.fields.findIndex(
+            (f) => f.id === folder.id,
+          )
+        }
+      }
 
       if (sourceFolderIndex >= 0) {
         folderArray.update(sourceFolderIndex, {
@@ -84,14 +141,12 @@ export const useCommandActions = (
           const subFolders = getAllFoldersFromNode(sourceFolder)
           if (isForwardDrag) {
             subFolders.forEach(() => {
-              console.log('source', sourceFolderIndex, 'dist', distFolderIndex)
               folderArray.move(sourceFolderIndex, distFolderIndex)
             })
           } else {
             let currentDistIndex = distFolderIndex
             subFolders.forEach((f) => {
               const idx = folderArray.fields.findIndex((c) => c.id === f.id)
-              console.log('source', idx, 'dist', currentDistIndex)
               folderArray.move(idx, currentDistIndex)
               currentDistIndex++
             })
diff --git a/src/services/option/commandUtils.ts b/src/services/option/commandUtils.ts
index 279191e9..e0857179 100644
--- a/src/services/option/commandUtils.ts
+++ b/src/services/option/commandUtils.ts
@@ -83,6 +83,22 @@ export const getDescendantFolderIds = (
   return descendants
 }
 
+/**
+ * Checks if folderA is a descendant of folderB
+ * @param folderAId - The ID of folder A to check
+ * @param folderBId - The ID of folder B (potential ancestor)
+ * @param folders - Array of all folders
+ * @returns True if folderA is a descendant of folderB, false otherwise
+ */
+export function isDescendantOf(
+  folderAId: string,
+  folderBId: string,
+  folders: CommandFolder[],
+): boolean {
+  const descendants = getDescendantFolderIds(folderBId, folders)
+  return descendants.includes(folderAId)
+}
+
 /**
  * Checks if moving a folder would create a circular reference
  * @param draggedFolderId - The ID of the folder being moved

From ac703c292bd3cf9ea03a4da6c5f71c715592f965 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 21:59:31 +0900
Subject: [PATCH 28/64] Refactoring.

---
 src/hooks/option/useCommandActions.ts | 172 +++++++++++++++++---------
 src/services/option/commandUtils.ts   |   3 +-
 2 files changed, 115 insertions(+), 60 deletions(-)

diff --git a/src/hooks/option/useCommandActions.ts b/src/hooks/option/useCommandActions.ts
index e8b322f5..7ebcb29b 100644
--- a/src/hooks/option/useCommandActions.ts
+++ b/src/hooks/option/useCommandActions.ts
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useFieldArray } from 'react-hook-form'
 import { isCircularReference } from '@/services/option/commandUtils'
 import { ROOT_FOLDER } from '@/const'
@@ -54,6 +54,93 @@ const findFolder = (
   return null
 }
 
+/**
+ * Helper function to find array index by ID
+ * @param array - Array to search
+ * @param id - ID to find
+ * @returns Index of the item, or -1 if not found
+ */
+const findIndexById = <T extends { id: string }>(array: T[], id: string): number => {
+  return array.findIndex((item) => item.id === id)
+}
+
+/**
+ * Helper function to move child items to root folder
+ * @param items - Array of items with parentFolderId
+ * @param targetId - ID of the parent to match
+ * @param updateFn - Function to update the item
+ */
+const moveChildrenToRoot = <T extends { parentFolderId?: string }>(
+  items: (T & { index: number })[],
+  targetId: string,
+  updateFn: (index: number, item: T) => void,
+): void => {
+  const children = items.filter((item) => item.parentFolderId === targetId)
+  children.forEach((child) => {
+    updateFn(child.index, {
+      ...child,
+      parentFolderId: ROOT_FOLDER,
+    })
+  })
+}
+
+/**
+ * Helper function to determine target folder index when dropping
+ * @param overContent - The content being dragged over
+ * @param overContentId - ID of the content being dragged over
+ * @param sourceFolderId - ID of the source folder
+ * @param flatten - Flattened node array
+ * @param folderArray - Array of all folders
+ * @returns Target folder index or -1 if not found
+ */
+const getTargetFolderIndex = (
+  overContent: CommandTreeNode | null,
+  overContentId: string,
+  sourceFolderId: string,
+  flatten: FlattenNode[],
+  folderArray: ReturnType<typeof useFieldArray<FoldersSchemaType, 'folders'>>,
+): number => {
+  if (overContent?.type === 'folder') {
+    return findIndexById(folderArray.fields, overContentId)
+  } else {
+    // When the drop target is a command, find a folder between the dragged folder and the target
+    const from = findIndexById(flatten, sourceFolderId)
+    const to = findIndexById(flatten, overContentId)
+    const folder = findFolder(flatten, folderArray.fields, from, to)
+    return folder ? findIndexById(folderArray.fields, folder.id) : -1
+  }
+}
+
+/**
+ * Helper function to move sub-folders in the correct order
+ * @param sourceFolder - The source folder node
+ * @param sourceFolderIndex - Index of the source folder
+ * @param distFolderIndex - Index of the destination folder
+ * @param folderArray - Array of all folders
+ */
+const moveSubFolders = (
+  sourceFolder: CommandTreeNode,
+  sourceFolderIndex: number,
+  distFolderIndex: number,
+  folderArray: ReturnType<typeof useFieldArray<FoldersSchemaType, 'folders'>>,
+): void => {
+  const isForwardDrag = distFolderIndex > sourceFolderIndex
+  const subFolders = getAllFoldersFromNode(sourceFolder)
+  
+  if (isForwardDrag) {
+    subFolders.forEach(() => {
+      folderArray.move(sourceFolderIndex, distFolderIndex)
+    })
+  } else {
+    let currentDistIndex = distFolderIndex
+    subFolders.forEach((f) => {
+      const idx = findIndexById(folderArray.fields, f.id)
+      folderArray.move(idx, currentDistIndex)
+      currentDistIndex++
+    })
+  }
+}
+
 /*
  * Custom hook that provides actions for managing commands and folders in the command editor.
  * Handles moving, organizing, and removing commands and folders with proper hierarchy management.
@@ -69,7 +156,7 @@ export const useCommandActions = (
   folderArray: ReturnType<typeof useFieldArray<FoldersSchemaType, 'folders'>>,
   tree: CommandTreeNode[],
 ) => {
-  const flatten = toFlatten(tree)
+  const flatten = useMemo(() => toFlatten(tree), [tree])
 
   /**
    * Moves a command from one position to another in the commands array
@@ -87,7 +174,7 @@ export const useCommandActions = (
    * Moves a folder to become a child of another folder
    * Prevents circular references by checking folder hierarchy
    * @param sourceFolderId - ID of the folder to move
-   * @param overContentid - ID of the content that is being dragged over
+   * @param overContentId - ID of the content that is being dragged over
    * @param distFolderId - ID of the target parent folder (defaults to ROOT_FOLDER)
    */
   const moveFolderToFolder = useCallback(
@@ -100,7 +187,7 @@ export const useCommandActions = (
         isCircularReference(
           sourceFolderId,
           distFolderId,
-          folderArray.fields as any,
+          folderArray.fields,
         )
       ) {
         return
@@ -111,50 +198,28 @@ export const useCommandActions = (
       if (!sourceFolder) {
         return
       }
-      const sourceFolderIndex = folderArray.fields.findIndex(
-        (f) => f.id === sourceFolderId,
+
+      const sourceFolderIndex = findIndexById(folderArray.fields, sourceFolderId)
+      const distFolderIndex = getTargetFolderIndex(
+        overContent,
+        overContentId,
+        sourceFolderId,
+        flatten,
+        folderArray,
       )
-      let distFolderIndex = -1
-      if (overContent?.type === 'folder') {
-        distFolderIndex = folderArray.fields.findIndex(
-          (f) => f.id === overContentId,
-        )
-      } else {
-        // When the drop target is a command, find a folder between the dragged folder and the target
-        const from = flatten.findIndex((f) => f.id === sourceFolderId)
-        const to = flatten.findIndex((f) => f.id === overContentId)
-        const folder = findFolder(flatten, folderArray.fields, from, to)
-        if (folder) {
-          distFolderIndex = folderArray.fields.findIndex(
-            (f) => f.id === folder.id,
-          )
-        }
-      }
 
       if (sourceFolderIndex >= 0) {
         folderArray.update(sourceFolderIndex, {
           ...sourceFolder.content,
           parentFolderId: distFolderId,
         })
+
         if (sourceFolderIndex !== distFolderIndex && distFolderIndex >= 0) {
-          const isForwardDrag = distFolderIndex > sourceFolderIndex
-          const subFolders = getAllFoldersFromNode(sourceFolder)
-          if (isForwardDrag) {
-            subFolders.forEach(() => {
-              folderArray.move(sourceFolderIndex, distFolderIndex)
-            })
-          } else {
-            let currentDistIndex = distFolderIndex
-            subFolders.forEach((f) => {
-              const idx = folderArray.fields.findIndex((c) => c.id === f.id)
-              folderArray.move(idx, currentDistIndex)
-              currentDistIndex++
-            })
-          }
+          moveSubFolders(sourceFolder, sourceFolderIndex, distFolderIndex, folderArray)
         }
       }
     },
-    [folderArray],
+    [folderArray, tree, flatten],
   )
 
   /**
@@ -179,7 +244,7 @@ export const useCommandActions = (
       } else {
         let currentDistIndex = distIndex
         folderCommands.forEach((cmd) => {
-          const idx = commandArray.fields.findIndex((c) => c.id === cmd.id)
+          const idx = findIndexById(commandArray.fields, cmd.id)
           moveCommand(idx, currentDistIndex)
           currentDistIndex++
         })
@@ -197,7 +262,7 @@ export const useCommandActions = (
    */
   const moveCommandToFolder = useCallback(
     (commandId: string, distIndex: number, parentId = ROOT_FOLDER) => {
-      const idx = commandArray.fields.findIndex((c) => c.id === commandId)
+      const idx = findIndexById(commandArray.fields, commandId)
       if (idx >= 0) {
         const command = commandArray.fields[idx]
         // Update parent folder first
@@ -219,41 +284,30 @@ export const useCommandActions = (
    */
   const commandRemove = useCallback(
     (id: string) => {
-      const commandIndex = commandArray.fields.findIndex((c) => c.id === id)
+      const commandIndex = findIndexById(commandArray.fields, id)
       if (commandIndex >= 0) {
         commandArray.remove(commandIndex)
         return
       }
 
-      const folderIndex = folderArray.fields.findIndex((f) => f.id === id)
+      const folderIndex = findIndexById(folderArray.fields, id)
       if (folderIndex >= 0) {
         // Move child commands to root when removing folder
-        const childCommands = commandArray.fields
-          .map((cmd, index) => ({ ...cmd, index }))
-          .filter((cmd: any) => cmd.parentFolderId === id)
+        const childCommands = commandArray.fields.map((cmd, index) => ({ ...cmd, index }))
+        const childFolders = folderArray.fields.map((folder, index) => ({ ...folder, index }))
 
-        childCommands.forEach((cmd) => {
-          commandArray.update(cmd.index, {
-            ...cmd,
-            parentFolderId: ROOT_FOLDER,
-          })
+        moveChildrenToRoot(childCommands, id, (index, item) => {
+          commandArray.update(index, item)
         })
 
-        const childFolders = folderArray.fields
-          .map((folder, index) => ({ ...folder, index }))
-          .filter((folder: any) => folder.parentFolderId === id)
-
-        childFolders.forEach((folder) => {
-          folderArray.update(folder.index, {
-            ...folder,
-            parentFolderId: ROOT_FOLDER,
-          })
+        moveChildrenToRoot(childFolders, id, (index, item) => {
+          folderArray.update(index, item)
         })
 
         folderArray.remove(folderIndex)
       }
     },
-    [tree, commandArray, folderArray],
+    [commandArray, folderArray],
   )
 
   return {
diff --git a/src/services/option/commandUtils.ts b/src/services/option/commandUtils.ts
index e0857179..7b3b638e 100644
--- a/src/services/option/commandUtils.ts
+++ b/src/services/option/commandUtils.ts
@@ -61,7 +61,8 @@ export function isInFolder(content: Command | CommandFolder | undefined): boolea
  * @returns The command with unstored parameters removed
  */
 export function removeUnstoredParam(data: Command): Command {
-  delete (data as any)._id
+  const tempData = data as Command & { _id?: unknown }
+  delete tempData._id
   return data
 }
 

From 2d6db0a2e498d64cdf34c62b844fa7113da9cb05 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 22:37:04 +0900
Subject: [PATCH 29/64] Refactoring.

---
 .../option/editor/FolderEditDialog.tsx        | 24 ++-----------------
 1 file changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/components/option/editor/FolderEditDialog.tsx b/src/components/option/editor/FolderEditDialog.tsx
index c0f843b2..b726da42 100644
--- a/src/components/option/editor/FolderEditDialog.tsx
+++ b/src/components/option/editor/FolderEditDialog.tsx
@@ -23,6 +23,7 @@ import { isEmpty } from '@/lib/utils'
 import { t as _t } from '@/services/i18n'
 import { ROOT_FOLDER } from '@/const'
 import { folderSchema } from '@/types/schema'
+import { getDescendantFolderIds } from '@/services/option/commandUtils'
 const t = (key: string, p?: string[]) => _t(`Option_${key}`, p)
 import type { CommandFolder } from '@/types'
 
@@ -50,27 +51,6 @@ export const FolderEditDialog = ({
     parentFolderId: ROOT_FOLDER,
   }
 
-  // Get all descendant folder IDs to prevent circular references
-  const getDescendantIds = (
-    folderId: string,
-    allFolders: CommandFolder[],
-    visited: Set<string> = new Set(),
-  ): string[] => {
-    if (visited.has(folderId)) {
-      return [] // Prevent infinite recursion from circular references
-    }
-
-    visited.add(folderId)
-    const descendants: string[] = []
-    const children = allFolders.filter((f) => f.parentFolderId === folderId)
-
-    for (const child of children) {
-      descendants.push(child.id)
-      descendants.push(...getDescendantIds(child.id, allFolders, visited))
-    }
-
-    return descendants
-  }
 
   const form = useForm<z.infer<typeof folderSchema>>({
     resolver: zodResolver(folderSchema),
@@ -130,7 +110,7 @@ export const FolderEditDialog = ({
                       if (!folder) return true
                       const excludedIds = [
                         folder.id,
-                        ...getDescendantIds(folder.id, folders),
+                        ...getDescendantFolderIds(folder.id, folders),
                       ]
                       return !excludedIds.includes(f.id)
                     })

From f0ec594124a641cd3eb991fbe9dd879c8c895990 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 28 Jun 2025 23:36:21 +0900
Subject: [PATCH 30/64] Update: Reorder folders.

---
 src/components/option/editor/ShortcutList.tsx |  9 ++-
 src/hooks/option/useCommandActions.ts         | 80 +++++++++++++++----
 src/hooks/usePrevious.ts                      |  9 +++
 src/services/option/commandTree.ts            |  4 +-
 4 files changed, 81 insertions(+), 21 deletions(-)
 create mode 100644 src/hooks/usePrevious.ts

diff --git a/src/components/option/editor/ShortcutList.tsx b/src/components/option/editor/ShortcutList.tsx
index 666774f8..38912926 100644
--- a/src/components/option/editor/ShortcutList.tsx
+++ b/src/components/option/editor/ShortcutList.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import { Control, useFieldArray, useWatch } from 'react-hook-form'
 import { Keyboard, SquareArrowOutUpRight } from 'lucide-react'
 import { SelectField } from '@/components/option/field/SelectField'
@@ -173,6 +173,11 @@ export function ShortcutList({ control }: ShortcutListProps) {
     replace(initialData)
   }, [replace, commands, userCommands])
 
+  const options = useMemo(
+    () => groupCommandsByFolder(userCommands, folders),
+    [userCommands, folders],
+  )
+
   const noSelectionOptions = [
     {
       name: t('shortcut_no_selection_do_nothing'),
@@ -218,7 +223,7 @@ export function ShortcutList({ control }: ShortcutListProps) {
               name: t('shortcut_select_placeholder'),
               value: SHORTCUT_PLACEHOLDER,
             },
-            ...groupCommandsByFolder(userCommands, folders),
+            ...options,
           ]
 
           const targetId = shortcutValues[index]?.commandId
diff --git a/src/hooks/option/useCommandActions.ts b/src/hooks/option/useCommandActions.ts
index 7ebcb29b..7cfd0ccb 100644
--- a/src/hooks/option/useCommandActions.ts
+++ b/src/hooks/option/useCommandActions.ts
@@ -1,16 +1,20 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useEffect } from 'react'
 import { useFieldArray } from 'react-hook-form'
-import { isCircularReference } from '@/services/option/commandUtils'
+import { usePrevious } from '@/hooks/usePrevious'
 import { ROOT_FOLDER } from '@/const'
 import type { CommandFolder } from '@/types'
 import { CommandsSchemaType, FoldersSchemaType } from '@/types/schema'
+import {
+  isFolder,
+  isDescendantOf,
+  isCircularReference,
+} from '@/services/option/commandUtils'
 import {
   toFlatten,
   findNodeInTree,
   getAllCommandsFromFolder,
   getAllFoldersFromNode,
 } from '@/services/option/commandTree'
-import { isFolder, isDescendantOf } from '@/services/option/commandUtils'
 import type {
   CommandTreeNode,
   FlattenNode,
@@ -33,7 +37,7 @@ const findFolder = (
 ): FlattenNode | null => {
   const isForwardDrag = to > from
   if (isForwardDrag) {
-    for (let i = from + 1; i < to; i++) {
+    for (let i = from + 1; i <= to; i++) {
       if (
         isFolder(flatten[i].content) &&
         !isDescendantOf(flatten[i].id, flatten[from].id, folders)
@@ -42,7 +46,7 @@ const findFolder = (
       }
     }
   } else {
-    for (let i = from - 1; i > to; i--) {
+    for (let i = from - 1; i >= to; i--) {
       if (
         isFolder(flatten[i].content) &&
         !isDescendantOf(flatten[i].id, flatten[from].id, folders)
@@ -60,7 +64,10 @@ const findFolder = (
  * @param id - ID to find
  * @returns Index of the item, or -1 if not found
  */
-const findIndexById = <T extends { id: string }>(array: T[], id: string): number => {
+const findIndexById = <T extends { id: string }>(
+  array: T[],
+  id: string,
+): number => {
   return array.findIndex((item) => item.id === id)
 }
 
@@ -126,7 +133,7 @@ const moveSubFolders = (
 ): void => {
   const isForwardDrag = distFolderIndex > sourceFolderIndex
   const subFolders = getAllFoldersFromNode(sourceFolder)
-  
+
   if (isForwardDrag) {
     subFolders.forEach(() => {
       folderArray.move(sourceFolderIndex, distFolderIndex)
@@ -157,6 +164,37 @@ export const useCommandActions = (
   tree: CommandTreeNode[],
 ) => {
   const flatten = useMemo(() => toFlatten(tree), [tree])
+  const prevFlatten = usePrevious(flatten)
+
+  useEffect(() => {
+    if (!prevFlatten) return
+    const prevFolders = prevFlatten
+      .filter((node) => isFolder(node.content))
+      .map((node) => node.id)
+    const currentFolders = flatten
+      .filter((node) => isFolder(node.content))
+      .map((node) => node.id)
+
+    // Check if the folder order has changed.
+    const folderOrderChanged = prevFolders.some((prev, idx) => {
+      const currentIdx = currentFolders.findIndex((current) => current === prev)
+      return currentIdx !== idx
+    })
+
+    // Reorder folderArray.fields to match flatten.
+    if (folderOrderChanged) {
+      // 1. Remove all folders first.
+      currentFolders.forEach(() => folderArray.remove(0))
+      // 2. Append folders in the correct order.
+      currentFolders.forEach((folderId) => {
+        const idx = folderArray.fields.findIndex((f) => f.id === folderId)
+        if (idx > -1) {
+          const cur = folderArray.fields[idx]
+          folderArray.append(cur)
+        }
+      })
+    }
+  }, [flatten, prevFlatten, folderArray])
 
   /**
    * Moves a command from one position to another in the commands array
@@ -184,11 +222,7 @@ export const useCommandActions = (
       distFolderId = ROOT_FOLDER,
     ) => {
       if (
-        isCircularReference(
-          sourceFolderId,
-          distFolderId,
-          folderArray.fields,
-        )
+        isCircularReference(sourceFolderId, distFolderId, folderArray.fields)
       ) {
         return
       }
@@ -199,7 +233,10 @@ export const useCommandActions = (
         return
       }
 
-      const sourceFolderIndex = findIndexById(folderArray.fields, sourceFolderId)
+      const sourceFolderIndex = findIndexById(
+        folderArray.fields,
+        sourceFolderId,
+      )
       const distFolderIndex = getTargetFolderIndex(
         overContent,
         overContentId,
@@ -215,7 +252,12 @@ export const useCommandActions = (
         })
 
         if (sourceFolderIndex !== distFolderIndex && distFolderIndex >= 0) {
-          moveSubFolders(sourceFolder, sourceFolderIndex, distFolderIndex, folderArray)
+          moveSubFolders(
+            sourceFolder,
+            sourceFolderIndex,
+            distFolderIndex,
+            folderArray,
+          )
         }
       }
     },
@@ -293,8 +335,14 @@ export const useCommandActions = (
       const folderIndex = findIndexById(folderArray.fields, id)
       if (folderIndex >= 0) {
         // Move child commands to root when removing folder
-        const childCommands = commandArray.fields.map((cmd, index) => ({ ...cmd, index }))
-        const childFolders = folderArray.fields.map((folder, index) => ({ ...folder, index }))
+        const childCommands = commandArray.fields.map((cmd, index) => ({
+          ...cmd,
+          index,
+        }))
+        const childFolders = folderArray.fields.map((folder, index) => ({
+          ...folder,
+          index,
+        }))
 
         moveChildrenToRoot(childCommands, id, (index, item) => {
           commandArray.update(index, item)
diff --git a/src/hooks/usePrevious.ts b/src/hooks/usePrevious.ts
new file mode 100644
index 00000000..0885d565
--- /dev/null
+++ b/src/hooks/usePrevious.ts
@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react'
+
+export const usePrevious = <T>(value: T): T | undefined => {
+  const ref = useRef<T>(value)
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+  return ref.current
+}
diff --git a/src/services/option/commandTree.ts b/src/services/option/commandTree.ts
index 41a81e6c..2ac6616a 100644
--- a/src/services/option/commandTree.ts
+++ b/src/services/option/commandTree.ts
@@ -252,9 +252,7 @@ export function getAllCommandsFromFolder(
   return commands
 }
 
-export function getAllFoldersFromNode(
-  node: CommandTreeNode,
-): CommandFolder[] {
+export function getAllFoldersFromNode(node: CommandTreeNode): CommandFolder[] {
   const folders: CommandFolder[] = []
 
   const collectFolders = (currentNode: CommandTreeNode) => {

From 47181fc862171f83c6f390a37a8b7656b467a997 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 29 Jun 2025 15:58:47 +0900
Subject: [PATCH 31/64] Update: Fix worning in console.

---
 src/components/option/field/IconField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/option/field/IconField.tsx b/src/components/option/field/IconField.tsx
index fb6093c0..80f63b51 100644
--- a/src/components/option/field/IconField.tsx
+++ b/src/components/option/field/IconField.tsx
@@ -155,7 +155,7 @@ const UrlOrSvgInput = ({
     <>
       <Input
         type="text"
-        value={value}
+        value={value || ''}
         onChange={handleInputChange}
         placeholder={placeholder}
         className="pl-10"

From a10dd4b5774bb195377a73dca1bc750891b56a00 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 29 Jun 2025 16:09:47 +0900
Subject: [PATCH 32/64] Update: Add folder depth on FolderEditDialog.

---
 src/components/option/editor/FolderEditDialog.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/option/editor/FolderEditDialog.tsx b/src/components/option/editor/FolderEditDialog.tsx
index b726da42..61c1f838 100644
--- a/src/components/option/editor/FolderEditDialog.tsx
+++ b/src/components/option/editor/FolderEditDialog.tsx
@@ -26,6 +26,7 @@ import { folderSchema } from '@/types/schema'
 import { getDescendantFolderIds } from '@/services/option/commandUtils'
 const t = (key: string, p?: string[]) => _t(`Option_${key}`, p)
 import type { CommandFolder } from '@/types'
+import { calcLevel } from '@/services/option/commandTree'
 
 type FolderEditDialog = {
   open: boolean
@@ -51,7 +52,6 @@ export const FolderEditDialog = ({
     parentFolderId: ROOT_FOLDER,
   }
 
-
   const form = useForm<z.infer<typeof folderSchema>>({
     resolver: zodResolver(folderSchema),
     mode: 'onChange',
@@ -119,6 +119,7 @@ export const FolderEditDialog = ({
                       name: f.title,
                       iconUrl: f.iconUrl,
                       iconSvg: f.iconSvg,
+                      level: calcLevel(f, folders),
                     })),
                 ]}
               />

From 7c297e1ef3114c11cc7861d4b79e8332eb41ad72 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 29 Jun 2025 23:18:45 +0900
Subject: [PATCH 33/64] Add: Hybrid commands storage.

---
 src/components/option/ImportExport.tsx | 114 +++++-
 src/services/storage.ts                | 517 ++++++++++++++++++++++++-
 2 files changed, 608 insertions(+), 23 deletions(-)

diff --git a/src/components/option/ImportExport.tsx b/src/components/option/ImportExport.tsx
index 086d3ca6..b5a9f58c 100644
--- a/src/components/option/ImportExport.tsx
+++ b/src/components/option/ImportExport.tsx
@@ -1,13 +1,13 @@
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { Dialog } from './Dialog'
 import type { UserSettings } from '@/types'
 
-import { Storage, STORAGE_KEY } from '@/services/storage'
+import { Storage, STORAGE_KEY, CommandMigrationManager } from '@/services/storage'
 import { Settings, migrate } from '@/services/settings'
 import { isBase64, isUrl } from '@/lib/utils'
 import { APP_ID } from '@/const'
 import { t } from '@/services/i18n'
-import { Download, Upload, Undo2 } from 'lucide-react'
+import { Download, Upload, Undo2, RotateCcw } from 'lucide-react'
 
 import css from './Option.module.css'
 
@@ -24,9 +24,33 @@ function getTimestamp() {
 export function ImportExport() {
   const [resetDialog, setResetDialog] = useState(false)
   const [importDialog, setImportDialog] = useState(false)
+  const [restoreDialog, setRestoreDialog] = useState(false)
   const [importJson, setImportJson] = useState<UserSettings>()
+  const [backupInfo, setBackupInfo] = useState<{ timestamp: number; commandCount: number } | null>(null)
+  const [backupStatus, setBackupStatus] = useState<'checking' | 'available' | 'none'>('checking')
   const inputFile = useRef<HTMLInputElement>(null)
 
+  // Check backup status on initialization
+  useEffect(() => {
+    checkBackupStatus()
+  }, [])
+
+  const checkBackupStatus = async () => {
+    try {
+      const result = await chrome.storage.local.get('legacy_commands_backup')
+      const backup = result.legacy_commands_backup
+      
+      if (backup && backup.commands && Array.isArray(backup.commands)) {
+        setBackupStatus('available')
+      } else {
+        setBackupStatus('none')
+      }
+    } catch (error) {
+      console.error('Failed to check backup status:', error)
+      setBackupStatus('none')
+    }
+  }
+
   const handleReset = () => {
     setResetDialog(true)
   }
@@ -98,6 +122,52 @@ export function ImportExport() {
     setImportDialog(false)
   }
 
+  const handleRestore = async () => {
+    if (backupStatus !== 'available') {
+      return
+    }
+    
+    // Get backup information
+    try {
+      const result = await chrome.storage.local.get('legacy_commands_backup')
+      const backup = result.legacy_commands_backup
+      
+      if (backup && backup.commands && Array.isArray(backup.commands)) {
+        setBackupInfo({
+          timestamp: backup.timestamp,
+          commandCount: backup.commands.length
+        })
+        setRestoreDialog(true)
+      } else {
+        // Handle case when backup doesn't exist
+        setBackupStatus('none')
+        alert('No backup data found. Backup is only available after migrating from legacy storage format.')
+      }
+    } catch (error) {
+      console.error('Failed to check backup:', error)
+      alert('Failed to check backup data.')
+    }
+  }
+
+  const handleRestoreClose = (ret: boolean) => {
+    if (ret && backupInfo != null) {
+      ; (async () => {
+        const migrationManager = new CommandMigrationManager()
+        const backupCommands = await migrationManager.restoreFromBackup()
+        
+        if (backupCommands.length > 0) {
+          // Save restored commands
+          await Storage.setCommands(backupCommands)
+          location.reload()
+        } else {
+          alert('Failed to restore from backup.')
+        }
+      })()
+    }
+    setRestoreDialog(false)
+    setBackupInfo(null)
+  }
+
   return (
     <>
       <div className={css.menu}>
@@ -118,6 +188,22 @@ export function ImportExport() {
           <Upload size={18} className="mr-2 stroke-gray-600" />
           {t('Option_Export')}
         </button>
+        <button 
+          onClick={handleRestore} 
+          className={css.menuButton} 
+          type="button"
+          disabled={backupStatus !== 'available'}
+          title={
+            backupStatus === 'checking' ? 'Checking backup...' :
+            backupStatus === 'none' ? 'No backup available' :
+            'Restore commands from backup'
+          }
+        >
+          <RotateCcw size={18} className="mr-2 stroke-gray-600" />
+          Restore from Backup
+          {backupStatus === 'checking' && <span className="ml-2 text-xs opacity-50">...</span>}
+          {backupStatus === 'none' && <span className="ml-2 text-xs opacity-50">(N/A)</span>}
+        </button>
         <button onClick={handleReset} className={css.menuButton} type="button">
           <Undo2 size={18} className="mr-2 stroke-gray-600" />
           {t('Option_Reset')}
@@ -154,6 +240,28 @@ export function ImportExport() {
           className={`${css.buttonImport}`}
         />
       </Dialog>
+      <Dialog
+        open={restoreDialog}
+        onClose={handleRestoreClose}
+        title={'Restore from Backup'}
+        description={() => (
+          backupInfo ? (
+            <div>
+              <p>A backup from the legacy storage migration was found:</p>
+              <ul className="mt-2 ml-4 list-disc">
+                <li><strong>Created:</strong> {new Date(backupInfo.timestamp).toLocaleString()}</li>
+                <li><strong>Commands:</strong> {backupInfo.commandCount} items</li>
+              </ul>
+              <p className="mt-2 text-sm text-yellow-600">
+                <strong>Warning:</strong> This will replace all current commands with the backup data.
+              </p>
+            </div>
+          ) : (
+            <span>Loading backup information...</span>
+          )
+        )}
+        okText="Restore"
+      />
     </>
   )
 }
diff --git a/src/services/storage.ts b/src/services/storage.ts
index 730a2be4..028335eb 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -5,9 +5,13 @@ const SYNC_DEBOUNCE_DELAY = 10
 
 let syncSetTimeout: NodeJS.Timeout | null
 let syncResolve: (() => void) | null
-const syncSetData = new Map<string, any>()
+const syncSetData = new Map<string, unknown>()
 
-const debouncedSyncSet = (data: Record<string, any>): Promise<void> => {
+chrome.storage.sync.getBytesInUse(['0', '2', '3', '4'], (bytes) => {
+  console.log('bytes', bytes)
+})
+
+const debouncedSyncSet = (data: Record<string, unknown>): Promise<void> => {
   return new Promise((resolve) => {
     if (syncSetTimeout != null) {
       clearTimeout(syncSetTimeout)
@@ -40,6 +44,7 @@ export enum STORAGE_KEY {
   COMMAND_COUNT = 2,
   USER_STATS = 3,
   SHORTCUTS = 4,
+  COMMAND_METADATA = 5,
 }
 
 export enum LOCAL_STORAGE_KEY {
@@ -47,6 +52,9 @@ export enum LOCAL_STORAGE_KEY {
   CLIENT_ID = 'clientId',
   STARS = 'stars',
   CAPTURES = 'captures',
+  COMMAND_LOCAL_COUNT = 'commandLocalCount',
+  MIGRATION_STATUS = 'migrationStatus',
+  COMMANDS_BACKUP = 'commandsBackup',
 }
 
 export enum SESSION_STORAGE_KEY {
@@ -77,12 +85,16 @@ const DEFAULTS = {
   [STORAGE_KEY.SHORTCUTS]: {
     shortcuts: [],
   },
+  [STORAGE_KEY.COMMAND_METADATA]: null,
   [LOCAL_STORAGE_KEY.CACHES]: {
     images: {},
   },
   [LOCAL_STORAGE_KEY.CLIENT_ID]: '',
   [LOCAL_STORAGE_KEY.STARS]: [],
   [LOCAL_STORAGE_KEY.CAPTURES]: {},
+  [LOCAL_STORAGE_KEY.COMMAND_LOCAL_COUNT]: 0,
+  [LOCAL_STORAGE_KEY.MIGRATION_STATUS]: null,
+  [LOCAL_STORAGE_KEY.COMMANDS_BACKUP]: null,
   [SESSION_STORAGE_KEY.BG]: {},
   [SESSION_STORAGE_KEY.SESSION_DATA]: null,
   [SESSION_STORAGE_KEY.MESSAGE_QUEUE]: [],
@@ -121,6 +133,7 @@ const getIndicesToRemove = (fromLen: number, toLen: number): number[] => {
 }
 
 export type ChangedCallback<T> = (newVal: T, oldVal: T) => void
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const changedCallbacks = {} as { [key: string]: ChangedCallback<any>[] }
 
 type commandChangedCallback = (commands: Command[]) => void
@@ -141,6 +154,463 @@ chrome.storage.onChanged.addListener((changes) => {
 
 type UpdateFunc<T> = (currentVal: T) => T
 
+// Helper functions for hybrid storage
+function generateCommandChecksum(commands: Command[]): string {
+  // Simple checksum combining command IDs and revisions
+  const dataStr = commands
+    .map((cmd) => `${cmd.id}:${('revision' in cmd ? cmd.revision : 0) || 0}`)
+    .sort()
+    .join('|')
+  return btoa(dataStr).slice(0, 16)
+}
+
+async function loadLegacyCommandData(options?: {
+  returnDefaultOnEmpty?: boolean
+  throwOnError?: boolean
+}): Promise<Command[]> {
+  const { returnDefaultOnEmpty = false, throwOnError = false } = options || {}
+
+  try {
+    const count = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+    if (count === DEFAULT_COUNT) {
+      return returnDefaultOnEmpty ? DefaultCommands : []
+    }
+
+    const keys = Array.from({ length: count }, (_, i) => `${CMD_PREFIX}${i}`)
+    const result = await chrome.storage.sync.get(keys)
+
+    if (throwOnError && chrome.runtime.lastError != null) {
+      throw chrome.runtime.lastError
+    }
+
+    return keys.map((key) => result[key]).filter((cmd) => cmd != null)
+  } catch (error) {
+    if (throwOnError) {
+      throw error
+    }
+    console.warn('Failed to load legacy commands:', error)
+    return returnDefaultOnEmpty ? DefaultCommands : []
+  }
+}
+
+async function cleanupLegacyCommandData(): Promise<void> {
+  try {
+    const count = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+    if (count > 0) {
+      const keysToRemove = Array.from(
+        { length: count },
+        (_, i) => `${CMD_PREFIX}${i}`,
+      )
+      console.info(
+        'Cleaning up legacy command data:',
+        keysToRemove.length,
+        'items',
+      )
+      await chrome.storage.sync.remove(keysToRemove)
+      await Storage.set(STORAGE_KEY.COMMAND_COUNT, DEFAULT_COUNT)
+      console.info('Legacy command data cleaned up successfully')
+    }
+  } catch (error) {
+    console.warn('Failed to cleanup legacy data:', error)
+  }
+}
+
+// Type definitions for hybrid storage
+interface CommandMetadata {
+  order: string[] // Command ID order array
+  syncCount: number // Number of commands saved in sync storage
+  localCount: number // Number of commands saved in local storage
+  version: number // Data version (timestamp)
+  checksum: string // Hash for integrity checking
+}
+
+interface StorageAllocation {
+  sync: {
+    commands: Command[]
+    totalBytes: number
+    itemCount: number
+  }
+  local: {
+    commands: Command[]
+    totalBytes: number
+    itemCount: number
+  }
+  metadata: CommandMetadata
+}
+
+// Storage capacity calculation class
+class StorageCapacityCalculator {
+  private readonly SYNC_MAX_TOTAL = 60 * 1024 // 60KB (including safety margin)
+  private readonly ITEM_MAX_SIZE = 8 * 1024 // 8KB
+  private readonly METADATA_OVERHEAD = 200 // Expected metadata overhead
+
+  /**
+   * Calculate accurate byte count with UTF-8 encoding
+   */
+  calculateCommandSize(command: Command): number {
+    // Serialize command object to JSON
+    const jsonStr = JSON.stringify(command)
+
+    // Calculate byte count with UTF-8 encoding
+    const bytes = new TextEncoder().encode(jsonStr).length
+
+    // Add overhead for chrome.storage key name
+    const keyOverhead = new TextEncoder().encode(
+      `${CMD_PREFIX}${command.id}`,
+    ).length
+
+    return bytes + keyOverhead
+  }
+
+  /**
+   * Analyze storage capacity for all commands and decide allocation
+   */
+  analyzeAndAllocate(commands: Command[]): StorageAllocation {
+    // Step 1: Calculate size for each command
+    const commandSizes = commands.map((command) => ({
+      command,
+      size: this.calculateCommandSize(command),
+      canFitInSync: this.calculateCommandSize(command) <= this.ITEM_MAX_SIZE,
+    }))
+
+    // Step 2: Allocate large commands to local storage first
+    const largeCommands = commandSizes.filter((item) => !item.canFitInSync)
+    const candidateCommands = commandSizes.filter((item) => item.canFitInSync)
+
+    // Step 3: Sequentially allocate until sync capacity is reached
+    const syncCommands: Array<{ command: Command; size: number }> = []
+    const localCommands: Array<{ command: Command; size: number }> = [
+      ...largeCommands,
+    ]
+
+    let syncUsage = this.METADATA_OVERHEAD // Metadata overhead
+
+    for (const item of candidateCommands) {
+      if (syncUsage + item.size <= this.SYNC_MAX_TOTAL) {
+        syncCommands.push(item)
+        syncUsage += item.size
+      } else {
+        localCommands.push(item)
+      }
+    }
+
+    // Step 4: Build allocation result
+    return {
+      sync: {
+        commands: syncCommands.map((item) => item.command),
+        totalBytes: syncUsage,
+        itemCount: syncCommands.length,
+      },
+      local: {
+        commands: localCommands.map((item) => item.command),
+        totalBytes: localCommands.reduce((sum, item) => sum + item.size, 0),
+        itemCount: localCommands.length,
+      },
+      metadata: this.createMetadata(
+        commands,
+        syncCommands.length,
+        localCommands.length,
+      ),
+    }
+  }
+
+  private createMetadata(
+    allCommands: Command[],
+    syncCount: number,
+    localCount: number,
+  ): CommandMetadata {
+    return {
+      order: allCommands.map((cmd) => cmd.id),
+      syncCount,
+      localCount,
+      version: Date.now(),
+      checksum: generateCommandChecksum(allCommands),
+    }
+  }
+}
+
+// Metadata management class
+class MetadataManager {
+  private readonly METADATA_KEY = STORAGE_KEY.COMMAND_METADATA
+  private readonly LOCAL_COUNT_KEY = LOCAL_STORAGE_KEY.COMMAND_LOCAL_COUNT
+
+  async saveMetadata(metadata: CommandMetadata): Promise<void> {
+    // Save metadata body to sync storage
+    await Storage.set(this.METADATA_KEY, metadata)
+
+    // Also save local count to local storage (redundancy)
+    await Storage.set(this.LOCAL_COUNT_KEY, metadata.localCount)
+  }
+
+  async loadMetadata(): Promise<CommandMetadata | null> {
+    try {
+      const metadata = await Storage.get<CommandMetadata>(this.METADATA_KEY)
+      return metadata || null
+    } catch (error) {
+      console.error('Failed to load metadata:', error)
+      return null
+    }
+  }
+
+  async validateMetadata(commands: Command[]): Promise<boolean> {
+    const metadata = await this.loadMetadata()
+    if (!metadata) return false
+
+    // Basic integrity check
+    const totalCount = metadata.syncCount + metadata.localCount
+    if (totalCount !== commands.length) return false
+
+    // Checksum-based integrity check
+    const currentChecksum = generateCommandChecksum(commands)
+    return metadata.checksum === currentChecksum
+  }
+
+  // Migration determination
+  async needsMigration(): Promise<boolean> {
+    const metadata = await this.loadMetadata()
+    const oldCount = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+
+    // When metadata doesn't exist but legacy format data exists
+    return !metadata && oldCount !== DEFAULT_COUNT
+  }
+}
+
+// Migration management class
+class CommandMigrationManager {
+  private readonly MIGRATION_VERSION = 'v2.0'
+  private readonly MIGRATION_FLAG_KEY = LOCAL_STORAGE_KEY.MIGRATION_STATUS
+
+  async performMigration(): Promise<Command[]> {
+    try {
+      console.debug('Starting command migration to hybrid storage...')
+
+      // Step 1: Load legacy format data
+      const legacyCommands = await loadLegacyCommandData()
+      if (legacyCommands.length === 0) {
+        return DefaultCommands
+      }
+
+      // Step 2: Backup data
+      await this.backupLegacyData(legacyCommands)
+
+      // Step 3: Save in new format
+      const hybridStorage = new HybridCommandStorage()
+      await hybridStorage.saveCommands(legacyCommands)
+
+      // Step 4: Set migration completion flag
+      await Storage.set(this.MIGRATION_FLAG_KEY, {
+        version: this.MIGRATION_VERSION,
+        migratedAt: Date.now(),
+        commandCount: legacyCommands.length,
+      })
+
+      // Step 5: Delete legacy format data (delayed for safety)
+      setTimeout(() => cleanupLegacyCommandData(), 5000)
+
+      console.debug(
+        `Migration completed: ${legacyCommands.length} commands migrated`,
+      )
+      return legacyCommands
+    } catch (error) {
+      console.error('Migration failed:', error)
+
+      // Attempt to restore from backup when migration fails
+      const backupCommands = await this.restoreFromBackup()
+      if (backupCommands.length > 0) {
+        console.debug(
+          `Migration failed, but restored ${backupCommands.length} commands from backup`,
+        )
+        return backupCommands
+      }
+
+      throw new Error(
+        `Command migration failed: ${error instanceof Error ? error.message : String(error)}`,
+      )
+    }
+  }
+
+  async needsMigration(): Promise<boolean> {
+    try {
+      const migrationStatus = (await Storage.get(
+        this.MIGRATION_FLAG_KEY,
+      )) as any
+      if (
+        migrationStatus &&
+        migrationStatus.version === this.MIGRATION_VERSION
+      ) {
+        return false
+      }
+    } catch {
+      // Migration flag doesn't exist = migration not performed
+    }
+
+    const legacyCount = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+    return legacyCount !== DEFAULT_COUNT
+  }
+
+  private async backupLegacyData(commands: Command[]): Promise<void> {
+    const backup = {
+      version: 'legacy',
+      timestamp: Date.now(),
+      commands: commands,
+      originalCount: commands.length,
+    }
+
+    await chrome.storage.local.set({
+      [LOCAL_STORAGE_KEY.COMMANDS_BACKUP]: backup,
+    })
+  }
+
+  /**
+   * Restore from legacy data backup
+   * Used for recovery from migration failure or data corruption
+   */
+  async restoreFromBackup(): Promise<Command[]> {
+    try {
+      const result = await chrome.storage.local.get(
+        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
+      )
+      const backup = result[LOCAL_STORAGE_KEY.COMMANDS_BACKUP]
+
+      if (backup && backup.commands && Array.isArray(backup.commands)) {
+        console.info(
+          `Restoring ${backup.commands.length} commands from backup (created at ${new Date(backup.timestamp).toLocaleString()})`,
+        )
+        return backup.commands
+      }
+      return []
+    } catch (error) {
+      console.error('Failed to restore from backup:', error)
+      return []
+    }
+  }
+}
+
+// Hybrid command storage class
+class HybridCommandStorage {
+  public calculator = new StorageCapacityCalculator()
+  private metadataManager = new MetadataManager()
+
+  async saveCommands(commands: Command[]): Promise<boolean> {
+    try {
+      // Step 1: Determine storage allocation
+      const allocation = this.calculator.analyzeAndAllocate(commands)
+
+      // Step 2: Save to both storage areas with integrity checking
+      await this.saveToStorageAreas(allocation)
+
+      // Step 3: Save metadata
+      await this.metadataManager.saveMetadata(allocation.metadata)
+
+      return true
+    } catch (error) {
+      console.error('Failed to save commands:', error)
+      throw error
+    }
+  }
+
+  async loadCommands(): Promise<Command[]> {
+    try {
+      // Step 1: Check if migration is needed
+      if (await this.metadataManager.needsMigration()) {
+        const migrationManager = new CommandMigrationManager()
+        return await migrationManager.performMigration()
+      }
+
+      // Step 2: Load metadata
+      const metadata = await this.metadataManager.loadMetadata()
+      if (!metadata) {
+        return DefaultCommands
+      }
+
+      // Step 3: Load commands from both storage areas
+      const [syncCommands, localCommands] = await Promise.all([
+        this.loadFromSync(metadata.syncCount),
+        this.loadFromLocal(metadata.localCount),
+      ])
+
+      // Step 4: Merge in metadata order
+      const allCommands = [...syncCommands, ...localCommands]
+      const orderedCommands = this.reorderCommands(allCommands, metadata.order)
+
+      // Step 5: Integrity check
+      if (!(await this.metadataManager.validateMetadata(orderedCommands))) {
+        console.warn('Command integrity check failed, attempting recovery...')
+
+        // Attempt to restore from backup when data is corrupted
+        const migrationManager = new CommandMigrationManager()
+        const backupCommands = await migrationManager.restoreFromBackup()
+        if (backupCommands.length > 0) {
+          return backupCommands
+        }
+      }
+
+      return orderedCommands
+    } catch (error) {
+      console.error('Failed to load commands:', error)
+      return DefaultCommands
+    }
+  }
+
+  private async saveToStorageAreas(
+    allocation: StorageAllocation,
+  ): Promise<void> {
+    const syncSavePromises: Promise<void>[] = []
+    const localSavePromises: Promise<void>[] = []
+
+    // Save to sync storage
+    allocation.sync.commands.forEach((command, index) => {
+      const key = `${CMD_PREFIX}${index}`
+      syncSavePromises.push(debouncedSyncSet({ [key]: command }))
+    })
+
+    // Save to local storage
+    allocation.local.commands.forEach((command, index) => {
+      const key = `${CMD_PREFIX}local-${index}`
+      localSavePromises.push(
+        chrome.storage.local.set({ [key]: command }).then(() => {}),
+      )
+    })
+
+    // Save in parallel
+    await Promise.all([
+      Promise.all(syncSavePromises),
+      Promise.all(localSavePromises),
+    ])
+  }
+
+  private async loadFromSync(count: number): Promise<Command[]> {
+    if (count === 0) return []
+
+    const keys = Array.from({ length: count }, (_, i) => `${CMD_PREFIX}${i}`)
+    const result = await chrome.storage.sync.get(keys)
+
+    return keys.map((key) => result[key]).filter((cmd) => cmd != null)
+  }
+
+  private async loadFromLocal(count: number): Promise<Command[]> {
+    if (count === 0) return []
+
+    const keys = Array.from(
+      { length: count },
+      (_, i) => `${CMD_PREFIX}local-${i}`,
+    )
+    const result = await chrome.storage.local.get(keys)
+
+    return keys.map((key) => result[key]).filter((cmd) => cmd != null)
+  }
+
+  private reorderCommands(commands: Command[], order: string[]): Command[] {
+    const commandMap = new Map(commands.map((cmd) => [cmd.id, cmd]))
+    return order
+      .map((id) => commandMap.get(id))
+      .filter((cmd): cmd is Command => cmd != null)
+  }
+}
+
+// Export migration management class
+export { CommandMigrationManager }
+
 export const Storage = {
   /**
    * Get a item from chrome sync storage.
@@ -211,15 +681,11 @@ export const Storage = {
     changedCallbacks[key].push(cb)
   },
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   removeListener: (key: KEY, cb: ChangedCallback<any>) => {
     changedCallbacks[key] = changedCallbacks[key]?.filter((f) => f !== cb)
   },
 
-  commandKeys: async (): Promise<string[]> => {
-    const count = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
-    return Array.from({ length: count }, (_, i) => `${CMD_PREFIX}${i}`)
-  },
-
   getCapture: async (key: string): Promise<string | undefined> => {
     let captures = await Storage.get<CaptureDataStorage>(
       LOCAL_STORAGE_KEY.CAPTURES,
@@ -238,22 +704,16 @@ export const Storage = {
   },
 
   /**
-   * Get all commands from chrome sync storage.
+   * Get all commands from chrome sync storage (legacy format).
    *
    * @returns {Promise<Command[]>} commands
    * @throws {chrome.runtime.LastError} if error occurred
    */
-  getCommands: async (): Promise<Command[]> => {
-    // If first time, return DefaultCommands.
-    const count = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
-    if (count === DEFAULT_COUNT) return DefaultCommands
-
-    const keys = await Storage.commandKeys()
-    const res = await chrome.storage.sync.get(keys)
-    if (chrome.runtime.lastError != null) {
-      throw chrome.runtime.lastError
-    }
-    return keys.map((key) => res[key]).filter((cmd) => cmd != null)
+  getCommandsOld: async (): Promise<Command[]> => {
+    return await loadLegacyCommandData({
+      returnDefaultOnEmpty: true,
+      throwOnError: true,
+    })
   },
 
   /**
@@ -262,7 +722,7 @@ export const Storage = {
    * @returns {Promise<boolean>} true if success's
    * @throws {chrome.runtime.LastError} if error occurred
    */
-  setCommands: async (
+  setCommandsOld: async (
     commands: Command[],
   ): Promise<boolean | chrome.runtime.LastError> => {
     const count = commands.length
@@ -335,4 +795,21 @@ export const Storage = {
     const idx = commandChangedCallbacks.findIndex((f) => f === cb)
     if (idx !== -1) commandChangedCallbacks.splice(idx, 1)
   },
+
+  // New methods for hybrid storage
+  hybridStorage: new HybridCommandStorage(),
+
+  /**
+   * New command getter method (hybrid storage compatible)
+   */
+  getCommands: async (): Promise<Command[]> => {
+    return await Storage.hybridStorage.loadCommands()
+  },
+
+  /**
+   * New command setter method (hybrid storage compatible)
+   */
+  setCommands: async (commands: Command[]): Promise<boolean> => {
+    return await Storage.hybridStorage.saveCommands(commands)
+  },
 }

From a0c470168a5ee7121b542226e4048dcb9b786bbd Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Mon, 30 Jun 2025 22:09:59 +0900
Subject: [PATCH 34/64] Fix: Ensure that synchronization discrepancies are not
 likely to occur.

---
 src/services/storage.ts | 41 +++++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/services/storage.ts b/src/services/storage.ts
index 028335eb..12f40e24 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -9,14 +9,12 @@ const syncSetData = new Map<string, unknown>()
 
 chrome.storage.sync.getBytesInUse(['0', '2', '3', '4'], (bytes) => {
   console.log('bytes', bytes)
-})
+            })
 
 const debouncedSyncSet = (data: Record<string, unknown>): Promise<void> => {
   return new Promise((resolve) => {
     if (syncSetTimeout != null) {
       clearTimeout(syncSetTimeout)
-      syncResolve?.()
-      syncResolve = null
     }
 
     Object.entries(data).forEach(([key, value]) => {
@@ -31,11 +29,11 @@ const debouncedSyncSet = (data: Record<string, unknown>): Promise<void> => {
         }
         syncSetData.clear()
         syncSetTimeout = null
-        resolve()
-        syncResolve = null
+        syncSetResolves.forEach((resolve) => resolve())
+        syncSetResolves = []
       })
     }, SYNC_DEBOUNCE_DELAY)
-    syncResolve = resolve
+    syncSetResolves.push(resolve)
   })
 }
 
@@ -496,12 +494,8 @@ class HybridCommandStorage {
       // Step 1: Determine storage allocation
       const allocation = this.calculator.analyzeAndAllocate(commands)
 
-      // Step 2: Save to both storage areas with integrity checking
-      await this.saveToStorageAreas(allocation)
-
-      // Step 3: Save metadata
-      await this.metadataManager.saveMetadata(allocation.metadata)
-
+      // Step 2: Save commands and metadata atomically
+      await this.saveCommandsAndMetadataAtomically(allocation)
       return true
     } catch (error) {
       console.error('Failed to save commands:', error)
@@ -552,11 +546,10 @@ class HybridCommandStorage {
     }
   }
 
-  private async saveToStorageAreas(
+  private async saveCommandsAndMetadataAtomically(
     allocation: StorageAllocation,
   ): Promise<void> {
     const syncSavePromises: Promise<void>[] = []
-    const localSavePromises: Promise<void>[] = []
 
     // Save to sync storage
     allocation.sync.commands.forEach((command, index) => {
@@ -565,17 +558,25 @@ class HybridCommandStorage {
     })
 
     // Save to local storage
+    const localSetData = new Map<string, unknown>()
     allocation.local.commands.forEach((command, index) => {
       const key = `${CMD_PREFIX}local-${index}`
-      localSavePromises.push(
-        chrome.storage.local.set({ [key]: command }).then(() => {}),
-      )
+      localSetData.set(key, command)
     })
 
-    // Save in parallel
+    const dataToSet = Object.fromEntries(localSetData)
+    const localSavePromise = chrome.storage.local.set(dataToSet)
+
+    // Add metadata save to the same promise batch
+    const metadataSavePromise = this.metadataManager.saveMetadata(
+      allocation.metadata,
+    )
+
+    // Save commands and metadata atomically in parallel
     await Promise.all([
-      Promise.all(syncSavePromises),
-      Promise.all(localSavePromises),
+      await Promise.all(syncSavePromises),
+      localSavePromise,
+      metadataSavePromise,
     ])
   }
 

From 361ff1724af7613dcf8873a684f21dc3d77c022c Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Mon, 30 Jun 2025 22:58:33 +0900
Subject: [PATCH 35/64] Update: Add retry logic to loading settings.

---
 src/services/storage.ts | 61 ++++++++++++++++++++++++++---------------
 1 file changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/services/storage.ts b/src/services/storage.ts
index 12f40e24..6f43bd94 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -4,7 +4,7 @@ import { Command, CaptureDataStorage } from '@/types'
 const SYNC_DEBOUNCE_DELAY = 10
 
 let syncSetTimeout: NodeJS.Timeout | null
-let syncResolve: (() => void) | null
+let syncSetResolves: (() => void)[] = []
 const syncSetData = new Map<string, unknown>()
 
 chrome.storage.sync.getBytesInUse(['0', '2', '3', '4'], (bytes) => {
@@ -152,14 +152,24 @@ chrome.storage.onChanged.addListener((changes) => {
 
 type UpdateFunc<T> = (currentVal: T) => T
 
-// Helper functions for hybrid storage
-function generateCommandChecksum(commands: Command[]): string {
-  // Simple checksum combining command IDs and revisions
-  const dataStr = commands
-    .map((cmd) => `${cmd.id}:${('revision' in cmd ? cmd.revision : 0) || 0}`)
-    .sort()
-    .join('|')
-  return btoa(dataStr).slice(0, 16)
+/**
+ * Generate checksum from object (JSON.stringify based)
+ * Uses a simple hash algorithm compatible with browser environment
+ * @param obj - Object to generate checksum for
+ * @returns Checksum (hexadecimal string)
+ */
+function generateChecksum(obj: unknown): string {
+  const normalized = JSON.stringify(obj, Object.keys(obj || {}).sort())
+
+  // Simple hash algorithm (djb2) that works in browser
+  let hash = 5381
+  for (let i = 0; i < normalized.length; i++) {
+    hash = (hash << 5) + hash + normalized.charCodeAt(i)
+    hash = hash & hash // Convert to 32bit integer
+  }
+
+  // Convert to hex string and pad to ensure consistent length
+  return Math.abs(hash).toString(16).padStart(8, '0')
 }
 
 async function loadLegacyCommandData(options?: {
@@ -322,7 +332,7 @@ class StorageCapacityCalculator {
       syncCount,
       localCount,
       version: Date.now(),
-      checksum: generateCommandChecksum(allCommands),
+      checksum: generateChecksum(allCommands),
     }
   }
 }
@@ -359,7 +369,7 @@ class MetadataManager {
     if (totalCount !== commands.length) return false
 
     // Checksum-based integrity check
-    const currentChecksum = generateCommandChecksum(commands)
+    const currentChecksum = generateChecksum(commands)
     return metadata.checksum === currentChecksum
   }
 
@@ -429,9 +439,9 @@ class CommandMigrationManager {
 
   async needsMigration(): Promise<boolean> {
     try {
-      const migrationStatus = (await Storage.get(
-        this.MIGRATION_FLAG_KEY,
-      )) as any
+      const migrationStatus = (await Storage.get(this.MIGRATION_FLAG_KEY)) as {
+        version?: string
+      } | null
       if (
         migrationStatus &&
         migrationStatus.version === this.MIGRATION_VERSION
@@ -503,7 +513,10 @@ class HybridCommandStorage {
     }
   }
 
-  async loadCommands(): Promise<Command[]> {
+  async loadCommands(retryCount = 0): Promise<Command[]> {
+    const MAX_RETRIES = 3
+    const RETRY_DELAY_MS = 10
+
     try {
       // Step 1: Check if migration is needed
       if (await this.metadataManager.needsMigration()) {
@@ -529,14 +542,18 @@ class HybridCommandStorage {
 
       // Step 5: Integrity check
       if (!(await this.metadataManager.validateMetadata(orderedCommands))) {
-        console.warn('Command integrity check failed, attempting recovery...')
-
-        // Attempt to restore from backup when data is corrupted
-        const migrationManager = new CommandMigrationManager()
-        const backupCommands = await migrationManager.restoreFromBackup()
-        if (backupCommands.length > 0) {
-          return backupCommands
+        console.warn(
+          `Command integrity check failed (attempt ${retryCount + 1}/${MAX_RETRIES + 1})`,
+        )
+        // Retry with delay if we haven't exceeded max retries
+        if (retryCount < MAX_RETRIES) {
+          console.info(
+            `Retrying command load after ${RETRY_DELAY_MS}ms delay...`,
+          )
+          await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS))
+          return await this.loadCommands(retryCount + 1)
         }
+        console.warn('Command integrity check failed after all retries...')
       }
 
       return orderedCommands

From bde75c26599836fdfb14fa104d8bca2ab9ce0203 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Tue, 1 Jul 2025 09:35:16 +0900
Subject: [PATCH 36/64] Refactoring.

---
 src/services/storage.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/services/storage.ts b/src/services/storage.ts
index 6f43bd94..59d4fbde 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -248,9 +248,8 @@ interface StorageAllocation {
 
 // Storage capacity calculation class
 class StorageCapacityCalculator {
-  private readonly SYNC_MAX_TOTAL = 60 * 1024 // 60KB (including safety margin)
+  private readonly SYNC_COMMAND_TOTAL = 60 * 1024 // 60KB (including safety margin)
   private readonly ITEM_MAX_SIZE = 8 * 1024 // 8KB
-  private readonly METADATA_OVERHEAD = 200 // Expected metadata overhead
 
   /**
    * Calculate accurate byte count with UTF-8 encoding
@@ -291,10 +290,9 @@ class StorageCapacityCalculator {
       ...largeCommands,
     ]
 
-    let syncUsage = this.METADATA_OVERHEAD // Metadata overhead
-
+    let syncUsage = 0
     for (const item of candidateCommands) {
-      if (syncUsage + item.size <= this.SYNC_MAX_TOTAL) {
+      if (syncUsage + item.size <= this.SYNC_COMMAND_TOTAL) {
         syncCommands.push(item)
         syncUsage += item.size
       } else {
@@ -542,7 +540,7 @@ class HybridCommandStorage {
 
       // Step 5: Integrity check
       if (!(await this.metadataManager.validateMetadata(orderedCommands))) {
-        console.warn(
+        console.debug(
           `Command integrity check failed (attempt ${retryCount + 1}/${MAX_RETRIES + 1})`,
         )
         // Retry with delay if we haven't exceeded max retries

From 38047bbf08dc80645b21c08a018019fa81917d73 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Tue, 1 Jul 2025 21:57:07 +0900
Subject: [PATCH 37/64] Add: Show storage usage.

---
 package.json                            |   1 +
 src/components/option/Option.module.css |   2 +-
 src/components/option/Option.tsx        |   4 +
 src/components/option/StorageUsage.tsx  | 154 ++++++++++++++++++++++++
 src/services/storage.ts                 |  68 +++++------
 src/services/storageUsage.ts            | 146 ++++++++++++++++++++++
 yarn.lock                               | 135 ++++++++++++++++++++-
 7 files changed, 469 insertions(+), 41 deletions(-)
 create mode 100644 src/components/option/StorageUsage.tsx
 create mode 100644 src/services/storageUsage.ts

diff --git a/package.json b/package.json
index 36d831bc..fe575ba1 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.58.1",
+    "react-multi-progress": "^1.3.0",
     "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "^4.4.5",
     "sonner": "github:ujiro99/sonner",
diff --git a/src/components/option/Option.module.css b/src/components/option/Option.module.css
index 88b820fd..f3453bc7 100644
--- a/src/components/option/Option.module.css
+++ b/src/components/option/Option.module.css
@@ -40,7 +40,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-top: 30px;
+  margin-top: 40px;
 }
 
 .menuLabel {
diff --git a/src/components/option/Option.tsx b/src/components/option/Option.tsx
index 9c5d04d1..72cab0fd 100644
--- a/src/components/option/Option.tsx
+++ b/src/components/option/Option.tsx
@@ -9,6 +9,7 @@ import { TableOfContents } from '@/components/option/TableOfContents'
 import { ImportExport } from '@/components/option/ImportExport'
 import { HubBanner } from '@/components/option/HubBanner'
 import { SettingForm } from '@/components/option/SettingForm'
+import StorageUsage from '@/components/option/StorageUsage'
 
 import css from './Option.module.css'
 
@@ -92,6 +93,9 @@ export function Option() {
             <div className="pt-4">
               <HubBanner />
             </div>
+            <div className="pt-4">
+              <StorageUsage />
+            </div>
           </div>
         </aside>
       </div>
diff --git a/src/components/option/StorageUsage.tsx b/src/components/option/StorageUsage.tsx
new file mode 100644
index 00000000..f406d8b6
--- /dev/null
+++ b/src/components/option/StorageUsage.tsx
@@ -0,0 +1,154 @@
+import React, { useState, useEffect } from 'react'
+import MultiProgress from 'react-multi-progress'
+import { getStorageUsage, StorageUsageData } from '@/services/storageUsage'
+import { cn } from '@/lib/utils'
+
+import s from './Option.module.css'
+
+const StorageUsage: React.FC = () => {
+  const [storageData, setStorageData] = useState<StorageUsageData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const loadStorageUsage = async () => {
+      try {
+        setLoading(true)
+        const data = await getStorageUsage()
+        setStorageData(data)
+        setError(null)
+      } catch (err) {
+        console.error('Failed to load storage usage:', err)
+        setError('Failed to load storage usage')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadStorageUsage()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className={cn(s.menu, 'w-[240px]')}>
+        <h3 className={s.menuLabel}>Storage Usage</h3>
+        <p className="text-sm text-gray-600 font-medium font-mono mb-2">
+          Loading...
+        </p>
+      </div>
+    )
+  }
+
+  if (error || !storageData) {
+    return (
+      <div className={cn(s.menu, 'w-[240px]')}>
+        <h3 className={s.menuLabel}>Storage Usage</h3>
+        <p className="text-red-500">{error || 'No data available'}</p>
+      </div>
+    )
+  }
+
+  const syncElements = [
+    {
+      value: storageData.sync.systemPercent,
+      color: '#4b5563', // gray-600
+      name: 'System',
+    },
+    {
+      value: storageData.sync.commandsPercent,
+      color: '#9ca3af', // gray-400
+      name: 'Commands',
+    },
+    {
+      value: storageData.sync.freePercent,
+      color: '#e5e7eb', // gray-300
+      name: 'Free',
+    },
+  ]
+
+  const localElements = [
+    {
+      value: storageData.local.systemPercent,
+      color: '#4b5563', // gray-600
+      name: 'System',
+    },
+    {
+      value: storageData.local.commandsPercent,
+      color: '#9ca3af', // gray-400
+      name: 'Commands',
+    },
+    {
+      value: storageData.local.backupPercent,
+      color: '#fcd34d', // amber-300
+      name: 'Backup',
+    },
+    {
+      value: storageData.local.freePercent,
+      color: '#e5e7eb', // gray-300
+      name: 'Free',
+    },
+  ]
+
+  return (
+    <div className={cn(s.menu, 'w-[240px]')}>
+      <h3 className={s.menuLabel}>Storage Usage</h3>
+      <div className="mb-6 w-full">
+        <h4 className="text-sm text-gray-600 font-medium font-mono my-2">
+          Sync Storage
+        </h4>
+        <MultiProgress
+          elements={syncElements}
+          height={8}
+          backgroundColor="#f3f4f6"
+          className="w-full"
+        />
+        <div className="text-[11px] text-gray-600 mt-3 px-1 flex flex-wrap gap-2">
+          <div className="flex items-center mr-2">
+            <div className="w-3 h-3 bg-gray-600 rounded-sm mr-1"></div>
+            <span>System: {storageData.sync.systemPercent}%</span>
+          </div>
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-gray-400 rounded-sm mr-1"></div>
+            <span>Commands: {storageData.sync.commandsPercent}%</span>
+          </div>
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-gray-300 rounded-sm mr-1"></div>
+            <span>Free: {storageData.sync.freePercent}%</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full">
+        <h4 className="text-sm text-gray-600 font-medium font-mono my-2">
+          Local Storage
+        </h4>
+        <MultiProgress
+          elements={localElements}
+          height={8}
+          backgroundColor="#f3f4f6"
+          className="w-full"
+        />
+        <div className="text-[11px] text-gray-600 mt-3 px-1 grid grid-cols-2 gap-2">
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-gray-600 rounded-sm mr-1"></div>
+            <span>System: {storageData.local.systemPercent}%</span>
+          </div>
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-gray-400 rounded-sm mr-1"></div>
+            <span>Commands: {storageData.local.commandsPercent}%</span>
+          </div>
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-amber-300 rounded-sm mr-1"></div>
+            <span>Backup: {storageData.local.backupPercent}%</span>
+          </div>
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-gray-300 rounded-sm mr-1"></div>
+            <span>Free: {storageData.local.freePercent}%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default StorageUsage
diff --git a/src/services/storage.ts b/src/services/storage.ts
index 59d4fbde..b2a121bb 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -3,40 +3,6 @@ import { Command, CaptureDataStorage } from '@/types'
 
 const SYNC_DEBOUNCE_DELAY = 10
 
-let syncSetTimeout: NodeJS.Timeout | null
-let syncSetResolves: (() => void)[] = []
-const syncSetData = new Map<string, unknown>()
-
-chrome.storage.sync.getBytesInUse(['0', '2', '3', '4'], (bytes) => {
-  console.log('bytes', bytes)
-            })
-
-const debouncedSyncSet = (data: Record<string, unknown>): Promise<void> => {
-  return new Promise((resolve) => {
-    if (syncSetTimeout != null) {
-      clearTimeout(syncSetTimeout)
-    }
-
-    Object.entries(data).forEach(([key, value]) => {
-      syncSetData.set(key, value)
-    })
-
-    syncSetTimeout = setTimeout(async () => {
-      const dataToSet = Object.fromEntries(syncSetData)
-      chrome.storage.sync.set(dataToSet, () => {
-        if (chrome.runtime.lastError != null) {
-          console.error(chrome.runtime.lastError)
-        }
-        syncSetData.clear()
-        syncSetTimeout = null
-        syncSetResolves.forEach((resolve) => resolve())
-        syncSetResolves = []
-      })
-    }, SYNC_DEBOUNCE_DELAY)
-    syncSetResolves.push(resolve)
-  })
-}
-
 export enum STORAGE_KEY {
   USER = 0,
   COMMAND_COUNT = 2,
@@ -67,9 +33,39 @@ export enum SESSION_STORAGE_KEY {
   PA_RECORDER_OPTION = 'pageActionRecorderOption',
 }
 
-type KEY = STORAGE_KEY | LOCAL_STORAGE_KEY | SESSION_STORAGE_KEY
+export const CMD_PREFIX = 'cmd-'
 
-const CMD_PREFIX = 'cmd-'
+let syncSetTimeout: NodeJS.Timeout | null
+let syncSetResolves: (() => void)[] = []
+const syncSetData = new Map<string, unknown>()
+
+const debouncedSyncSet = (data: Record<string, unknown>): Promise<void> => {
+  return new Promise((resolve) => {
+    if (syncSetTimeout != null) {
+      clearTimeout(syncSetTimeout)
+    }
+
+    Object.entries(data).forEach(([key, value]) => {
+      syncSetData.set(key, value)
+    })
+
+    syncSetTimeout = setTimeout(async () => {
+      const dataToSet = Object.fromEntries(syncSetData)
+      chrome.storage.sync.set(dataToSet, () => {
+        if (chrome.runtime.lastError != null) {
+          console.error(chrome.runtime.lastError)
+        }
+        syncSetData.clear()
+        syncSetTimeout = null
+        syncSetResolves.forEach((resolve) => resolve())
+        syncSetResolves = []
+      })
+    }, SYNC_DEBOUNCE_DELAY)
+    syncSetResolves.push(resolve)
+  })
+}
+
+type KEY = STORAGE_KEY | LOCAL_STORAGE_KEY | SESSION_STORAGE_KEY
 
 const DEFAULT_COUNT = -1
 
diff --git a/src/services/storageUsage.ts b/src/services/storageUsage.ts
new file mode 100644
index 00000000..5e4d2998
--- /dev/null
+++ b/src/services/storageUsage.ts
@@ -0,0 +1,146 @@
+import { CMD_PREFIX, STORAGE_KEY, LOCAL_STORAGE_KEY } from './storage'
+
+export interface StorageUsageData {
+  sync: {
+    total: number
+    used: number
+    free: number
+    system: number
+    commands: number
+    systemPercent: number
+    commandsPercent: number
+    freePercent: number
+  }
+  local: {
+    total: number
+    used: number
+    free: number
+    system: number
+    backup: number
+    commands: number
+    systemPercent: number
+    backupPercent: number
+    commandsPercent: number
+    freePercent: number
+  }
+}
+
+export const getStorageUsage = async (): Promise<StorageUsageData> => {
+  try {
+    const syncSystemKeys = Object.values(STORAGE_KEY).map((key) => String(key))
+    const syncSystemBytes = await new Promise<number>((resolve) => {
+      chrome.storage.sync.getBytesInUse(syncSystemKeys, (bytes) => {
+        resolve(bytes)
+      })
+    })
+
+    const allSyncData = await chrome.storage.sync.get(null)
+    const syncCommandKeys = Object.keys(allSyncData || {}).filter((key) =>
+      key.startsWith(CMD_PREFIX),
+    )
+
+    const syncCommandBytes =
+      syncCommandKeys.length > 0
+        ? await new Promise<number>((resolve) => {
+            chrome.storage.sync.getBytesInUse(syncCommandKeys, (bytes) => {
+              resolve(bytes)
+            })
+          })
+        : 0
+
+    const syncTotalBytes = await new Promise<number>((resolve) => {
+      chrome.storage.sync.getBytesInUse(null, (bytes) => {
+        resolve(bytes)
+      })
+    })
+
+    const allLocalData = await chrome.storage.local.get(null)
+
+    const localSystemKeys = Object.values(LOCAL_STORAGE_KEY).filter(
+      (key) => key !== LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
+    ) as string[]
+    const localBackupKeys = [LOCAL_STORAGE_KEY.COMMANDS_BACKUP] as string[]
+    const localCommandKeys = Object.keys(allLocalData || {}).filter((key) =>
+      key.startsWith(CMD_PREFIX),
+    )
+
+    const localSystemBytes =
+      localSystemKeys.length > 0
+        ? await new Promise<number>((resolve) => {
+            chrome.storage.local.getBytesInUse(localSystemKeys, (bytes) => {
+              resolve(bytes)
+            })
+          })
+        : 0
+
+    const localBackupBytes =
+      localBackupKeys.length > 0
+        ? await new Promise<number>((resolve) => {
+            chrome.storage.local.getBytesInUse(localBackupKeys, (bytes) => {
+              resolve(bytes)
+            })
+          })
+        : 0
+
+    const localCommandBytes =
+      localCommandKeys.length > 0
+        ? await new Promise<number>((resolve) => {
+            chrome.storage.local.getBytesInUse(localCommandKeys, (bytes) => {
+              resolve(bytes)
+            })
+          })
+        : 0
+
+    const localTotalBytes = await new Promise<number>((resolve) => {
+      chrome.storage.local.getBytesInUse(null, (bytes) => {
+        resolve(bytes)
+      })
+    })
+
+    const syncLimitTotal = 100 * 1024 // 100KB
+    const localLimitTotal = 10 * 1024 * 1024 // 10MB
+
+    const syncUsed = syncTotalBytes
+    const syncFree = syncLimitTotal - syncUsed
+    const localUsed = localTotalBytes
+    const localFree = localLimitTotal - localUsed
+
+    return {
+      sync: {
+        total: syncLimitTotal,
+        used: syncUsed,
+        free: syncFree,
+        system: syncSystemBytes,
+        commands: syncCommandBytes,
+        systemPercent: Number(
+          ((syncSystemBytes / syncLimitTotal) * 100).toFixed(1),
+        ),
+        commandsPercent: Number(
+          ((syncCommandBytes / syncLimitTotal) * 100).toFixed(1),
+        ),
+        freePercent: Number(((syncFree / syncLimitTotal) * 100).toFixed(1)),
+      },
+      local: {
+        total: localLimitTotal,
+        used: localUsed,
+        free: localFree,
+        system: localSystemBytes,
+        backup: localBackupBytes,
+        commands: localCommandBytes,
+        systemPercent: Number(
+          ((localSystemBytes / localLimitTotal) * 100).toFixed(1),
+        ),
+        backupPercent: Number(
+          ((localBackupBytes / localLimitTotal) * 100).toFixed(1),
+        ),
+        commandsPercent: Number(
+          ((localCommandBytes / localLimitTotal) * 100).toFixed(1),
+        ),
+        freePercent: Number(((localFree / localLimitTotal) * 100).toFixed(1)),
+      },
+    }
+  } catch (error) {
+    console.error('Failed to get storage usage:', error)
+    throw error
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 9450ce06..3187ef0c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1909,6 +1909,11 @@ array-buffer-byte-length@^1.0.0:
     call-bound "^1.0.3"
     is-array-buffer "^3.0.5"
 
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
+
 async@^2.0.0:
   version "2.6.4"
   resolved "https://registry.npmjs.org/async/-/async-2.6.4.tgz"
@@ -1963,6 +1968,11 @@ boolbase@^1.0.0:
   resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
+bowser@^1.7.3:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a"
+  integrity sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
@@ -2262,6 +2272,11 @@ convert-source-map@^2.0.0:
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
@@ -2298,6 +2313,14 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.3, cross-spawn@^7.0.6:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
 css-select@^5.1.0:
   version "5.1.0"
   resolved "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz"
@@ -2535,6 +2558,13 @@ encoding-sniffer@^0.2.0:
     iconv-lite "^0.6.3"
     whatwg-encoding "^3.1.1"
 
+encoding@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.0.0:
   version "1.4.4"
   resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz"
@@ -2795,6 +2825,19 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fbjs@^0.8.12:
+  version "0.8.18"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.18.tgz#9835e0addb9aca2eff53295cd79ca1cfc7c9662a"
+  integrity sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.30"
+
 file-entry-cache@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz"
@@ -2949,6 +2992,17 @@ get-xpath@^3.3.0:
   resolved "https://registry.npmjs.org/get-xpath/-/get-xpath-3.3.0.tgz"
   integrity sha512-AKbHVEHSlSDS9AJDmjfSxV010xSVRFzkS4UkGCb8CaGvorp83GCuKwcmzF/64CVp3M5wjgy9tc6y1uR2V+c5Xw==
 
+glamor@^2.20.40:
+  version "2.20.40"
+  resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
+  integrity sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==
+  dependencies:
+    fbjs "^0.8.12"
+    inline-style-prefixer "^3.0.6"
+    object-assign "^4.1.1"
+    prop-types "^15.5.10"
+    through "^2.3.8"
+
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
@@ -3073,7 +3127,12 @@ husky@^9.1.7:
   resolved "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz"
   integrity sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==
 
-iconv-lite@0.6.3, iconv-lite@^0.6.3:
+hyphenate-style-name@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436"
+  integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
+
+iconv-lite@0.6.3, iconv-lite@^0.6.2, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -3128,6 +3187,14 @@ inherits@2, inherits@^2.0.3, inherits@~2.0.3:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+inline-style-prefixer@^3.0.6:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
+  integrity sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==
+  dependencies:
+    bowser "^1.7.3"
+    css-in-js-utils "^2.0.0"
+
 internal-slot@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz"
@@ -3273,6 +3340,11 @@ is-shared-array-buffer@^1.0.2:
   dependencies:
     call-bound "^1.0.3"
 
+is-stream@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
+
 is-stream@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz"
@@ -3323,6 +3395,19 @@ isexe@^2.0.0:
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 jackspeak@^3.1.2:
   version "3.4.3"
   resolved "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz"
@@ -3492,7 +3577,7 @@ lodash@^4.17.14, lodash@^4.17.21, lodash@^4.8.0:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -3639,6 +3724,14 @@ ndarray@^1.0.19:
     iota-array "^1.0.0"
     is-buffer "^1.0.2"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-releases@^2.0.19:
   version "2.0.19"
   resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz"
@@ -3705,7 +3798,7 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-object-assign@^4.0.1, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -4010,7 +4103,14 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-prop-types@^15.6.2:
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
+prop-types@^15.5.10, prop-types@^15.6.2:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -4057,6 +4157,13 @@ react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-multi-progress@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-multi-progress/-/react-multi-progress-1.3.0.tgz#c36ee7a019357de30770b47e1bc072604439b6a5"
+  integrity sha512-uWwcDCBQNlccuyWUVYUBslVoGCvvFXO4GMsHZnlymvIjMMUeY+tjWdXyEtWgdVh3Qgz9mTdDMx8fHtX7bxLjyg==
+  dependencies:
+    glamor "^2.20.40"
+
 react-refresh@^0.13.0:
   version "0.13.0"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.13.0.tgz"
@@ -4364,6 +4471,11 @@ set-function-name@^2.0.2:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.2"
 
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
+
 sharp@^0.33.4, sharp@^0.33.5:
   version "0.33.5"
   resolved "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz"
@@ -4702,6 +4814,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
+
 to-buffer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz"
@@ -4770,6 +4887,11 @@ typescript@~5.6.2:
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz"
   integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
 
+ua-parser-js@^0.7.30:
+  version "0.7.40"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.40.tgz#c87d83b7bb25822ecfa6397a0da5903934ea1562"
+  integrity sha512-us1E3K+3jJppDBa3Tl0L3MOJiGhe1C6P0+nIvQAFYbxlMAx0h81eOwLmU57xgqToduDDPx3y5QsdjPfDu+FgOQ==
+
 undici-types@~6.19.2:
   version "6.19.8"
   resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz"
@@ -4885,6 +5007,11 @@ whatwg-encoding@^3.1.1:
   dependencies:
     iconv-lite "0.6.3"
 
+whatwg-fetch@>=0.10.0:
+  version "3.6.20"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz#580ce6d791facec91d37c72890995a0b48d31c70"
+  integrity sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==
+
 whatwg-mimetype@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz"

From 91704414a984eb53a6be6ed5f553db91f023f3fe Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Tue, 1 Jul 2025 23:01:07 +0900
Subject: [PATCH 38/64] Add: Daily commands backup.

---
 src/background_script.ts               |  20 +
 src/services/storage.ts                | 827 ++-----------------------
 src/services/storage/backupManager.ts  |  71 +++
 src/services/storage/commandStorage.ts | 559 +++++++++++++++++
 src/services/storage/index.ts          | 201 ++++++
 5 files changed, 896 insertions(+), 782 deletions(-)
 create mode 100644 src/services/storage/backupManager.ts
 create mode 100644 src/services/storage/commandStorage.ts
 create mode 100644 src/services/storage/index.ts

diff --git a/src/background_script.ts b/src/background_script.ts
index 6113360d..ed8318ae 100644
--- a/src/background_script.ts
+++ b/src/background_script.ts
@@ -496,8 +496,28 @@ chrome.runtime.onInstalled.addListener((details) => {
     // Set uninstall survey URL
     chrome.runtime.setUninstallURL(`${HUB_URL}/uninstall`)
   }
+
+  // Check for daily backup on startup
+  checkAndPerformDailyBackup()
+})
+
+chrome.runtime.onStartup.addListener(() => {
+  // Check for daily backup on browser startup
+  checkAndPerformDailyBackup()
 })
 
+// Daily backup check function
+const checkAndPerformDailyBackup = async () => {
+  try {
+    const dailyBackupManager = Storage.dailyBackupManager
+    if (await dailyBackupManager.shouldBackup()) {
+      await dailyBackupManager.performDailyBackup()
+    }
+  } catch (error) {
+    console.error('Failed to perform daily backup check:', error)
+  }
+}
+
 Settings.addChangedListener(() => ContextMenu.init())
 
 // for debug
diff --git a/src/services/storage.ts b/src/services/storage.ts
index b2a121bb..d99b64d2 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -1,144 +1,26 @@
-import DefaultSettings, { DefaultCommands } from './option/defaultSettings'
-import { Command, CaptureDataStorage } from '@/types'
-
-const SYNC_DEBOUNCE_DELAY = 10
-
-export enum STORAGE_KEY {
-  USER = 0,
-  COMMAND_COUNT = 2,
-  USER_STATS = 3,
-  SHORTCUTS = 4,
-  COMMAND_METADATA = 5,
-}
-
-export enum LOCAL_STORAGE_KEY {
-  CACHES = 'caches',
-  CLIENT_ID = 'clientId',
-  STARS = 'stars',
-  CAPTURES = 'captures',
-  COMMAND_LOCAL_COUNT = 'commandLocalCount',
-  MIGRATION_STATUS = 'migrationStatus',
-  COMMANDS_BACKUP = 'commandsBackup',
-}
-
-export enum SESSION_STORAGE_KEY {
-  BG = 'bg',
-  SELECTION_TEXT = 'selectionText ',
-  SESSION_DATA = 'sessionData',
-  MESSAGE_QUEUE = 'messageQueue',
-  TMP_CAPTURES = 'tmpCaptures',
-  PA_RECORDING = 'pageActionRecording',
-  PA_RUNNING = 'pageActionRunning',
-  PA_CONTEXT = 'pageActionContext',
-  PA_RECORDER_OPTION = 'pageActionRecorderOption',
-}
-
-export const CMD_PREFIX = 'cmd-'
-
-let syncSetTimeout: NodeJS.Timeout | null
-let syncSetResolves: (() => void)[] = []
-const syncSetData = new Map<string, unknown>()
-
-const debouncedSyncSet = (data: Record<string, unknown>): Promise<void> => {
-  return new Promise((resolve) => {
-    if (syncSetTimeout != null) {
-      clearTimeout(syncSetTimeout)
-    }
-
-    Object.entries(data).forEach(([key, value]) => {
-      syncSetData.set(key, value)
-    })
-
-    syncSetTimeout = setTimeout(async () => {
-      const dataToSet = Object.fromEntries(syncSetData)
-      chrome.storage.sync.set(dataToSet, () => {
-        if (chrome.runtime.lastError != null) {
-          console.error(chrome.runtime.lastError)
-        }
-        syncSetData.clear()
-        syncSetTimeout = null
-        syncSetResolves.forEach((resolve) => resolve())
-        syncSetResolves = []
-      })
-    }, SYNC_DEBOUNCE_DELAY)
-    syncSetResolves.push(resolve)
-  })
-}
-
-type KEY = STORAGE_KEY | LOCAL_STORAGE_KEY | SESSION_STORAGE_KEY
-
-const DEFAULT_COUNT = -1
-
-const DEFAULTS = {
-  [STORAGE_KEY.USER]: DefaultSettings,
-  [STORAGE_KEY.COMMAND_COUNT]: DEFAULT_COUNT,
-  [STORAGE_KEY.USER_STATS]: {
-    commandExecutionCount: 0,
-    hasShownReviewRequest: false,
-  },
-  [STORAGE_KEY.SHORTCUTS]: {
-    shortcuts: [],
-  },
-  [STORAGE_KEY.COMMAND_METADATA]: null,
-  [LOCAL_STORAGE_KEY.CACHES]: {
-    images: {},
-  },
-  [LOCAL_STORAGE_KEY.CLIENT_ID]: '',
-  [LOCAL_STORAGE_KEY.STARS]: [],
-  [LOCAL_STORAGE_KEY.CAPTURES]: {},
-  [LOCAL_STORAGE_KEY.COMMAND_LOCAL_COUNT]: 0,
-  [LOCAL_STORAGE_KEY.MIGRATION_STATUS]: null,
-  [LOCAL_STORAGE_KEY.COMMANDS_BACKUP]: null,
-  [SESSION_STORAGE_KEY.BG]: {},
-  [SESSION_STORAGE_KEY.SESSION_DATA]: null,
-  [SESSION_STORAGE_KEY.MESSAGE_QUEUE]: [],
-  [SESSION_STORAGE_KEY.PA_RECORDING]: [],
-  [SESSION_STORAGE_KEY.PA_RUNNING]: {},
-  [SESSION_STORAGE_KEY.PA_CONTEXT]: {},
-  [SESSION_STORAGE_KEY.PA_RECORDER_OPTION]: {},
-  [SESSION_STORAGE_KEY.TMP_CAPTURES]: {},
-  [SESSION_STORAGE_KEY.SELECTION_TEXT]: '',
-}
-
-const detectStorageArea = (key: KEY): chrome.storage.StorageArea => {
-  if (Object.values(STORAGE_KEY).includes(key)) {
-    return chrome.storage.sync
-  }
-  if (Object.values(LOCAL_STORAGE_KEY).includes(key as LOCAL_STORAGE_KEY)) {
-    return chrome.storage.local
-  }
-  if (Object.values(SESSION_STORAGE_KEY).includes(key as SESSION_STORAGE_KEY)) {
-    return chrome.storage.session
-  }
-  throw new Error('Invalid Storage Key')
-}
-
-const getIndicesToRemove = (fromLen: number, toLen: number): number[] => {
-  if (toLen >= fromLen) {
-    return []
-  }
-  const removeCount = fromLen - toLen
-  const startIndex = toLen
-  const indicesToRemove = []
-  for (let i = 0; i < removeCount; i++) {
-    indicesToRemove.push(startIndex + i)
-  }
-  return indicesToRemove
-}
-
-export type ChangedCallback<T> = (newVal: T, oldVal: T) => void
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const changedCallbacks = {} as { [key: string]: ChangedCallback<any>[] }
+import { Command } from '@/types'
+import {
+  BaseStorage,
+  STORAGE_KEY,
+  LOCAL_STORAGE_KEY,
+  SESSION_STORAGE_KEY,
+  CMD_PREFIX,
+  ChangedCallback,
+  KEY,
+} from './storage/index'
+import {
+  HybridCommandStorage,
+  CommandMigrationManager,
+  CommandStorage,
+} from './storage/commandStorage'
+import { DailyBackupManager } from './storage/backupManager'
 
 type commandChangedCallback = (commands: Command[]) => void
 const commandChangedCallbacks = [] as commandChangedCallback[]
 
 chrome.storage.onChanged.addListener((changes) => {
   const commands = [] as Command[]
-  for (const [k, { oldValue, newValue }] of Object.entries(changes)) {
-    for (const [kk, callbacks] of Object.entries(changedCallbacks)) {
-      if (k === kk) callbacks.forEach((cb) => cb(newValue, oldValue))
-    }
+  for (const [k, { newValue }] of Object.entries(changes)) {
     if (k.startsWith(CMD_PREFIX)) commands.push(newValue)
   }
   if (commands.length > 0) {
@@ -146,658 +28,24 @@ chrome.storage.onChanged.addListener((changes) => {
   }
 })
 
-type UpdateFunc<T> = (currentVal: T) => T
-
-/**
- * Generate checksum from object (JSON.stringify based)
- * Uses a simple hash algorithm compatible with browser environment
- * @param obj - Object to generate checksum for
- * @returns Checksum (hexadecimal string)
- */
-function generateChecksum(obj: unknown): string {
-  const normalized = JSON.stringify(obj, Object.keys(obj || {}).sort())
-
-  // Simple hash algorithm (djb2) that works in browser
-  let hash = 5381
-  for (let i = 0; i < normalized.length; i++) {
-    hash = (hash << 5) + hash + normalized.charCodeAt(i)
-    hash = hash & hash // Convert to 32bit integer
-  }
-
-  // Convert to hex string and pad to ensure consistent length
-  return Math.abs(hash).toString(16).padStart(8, '0')
-}
-
-async function loadLegacyCommandData(options?: {
-  returnDefaultOnEmpty?: boolean
-  throwOnError?: boolean
-}): Promise<Command[]> {
-  const { returnDefaultOnEmpty = false, throwOnError = false } = options || {}
-
-  try {
-    const count = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
-    if (count === DEFAULT_COUNT) {
-      return returnDefaultOnEmpty ? DefaultCommands : []
-    }
-
-    const keys = Array.from({ length: count }, (_, i) => `${CMD_PREFIX}${i}`)
-    const result = await chrome.storage.sync.get(keys)
-
-    if (throwOnError && chrome.runtime.lastError != null) {
-      throw chrome.runtime.lastError
-    }
-
-    return keys.map((key) => result[key]).filter((cmd) => cmd != null)
-  } catch (error) {
-    if (throwOnError) {
-      throw error
-    }
-    console.warn('Failed to load legacy commands:', error)
-    return returnDefaultOnEmpty ? DefaultCommands : []
-  }
-}
-
-async function cleanupLegacyCommandData(): Promise<void> {
-  try {
-    const count = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
-    if (count > 0) {
-      const keysToRemove = Array.from(
-        { length: count },
-        (_, i) => `${CMD_PREFIX}${i}`,
-      )
-      console.info(
-        'Cleaning up legacy command data:',
-        keysToRemove.length,
-        'items',
-      )
-      await chrome.storage.sync.remove(keysToRemove)
-      await Storage.set(STORAGE_KEY.COMMAND_COUNT, DEFAULT_COUNT)
-      console.info('Legacy command data cleaned up successfully')
-    }
-  } catch (error) {
-    console.warn('Failed to cleanup legacy data:', error)
-  }
-}
-
-// Type definitions for hybrid storage
-interface CommandMetadata {
-  order: string[] // Command ID order array
-  syncCount: number // Number of commands saved in sync storage
-  localCount: number // Number of commands saved in local storage
-  version: number // Data version (timestamp)
-  checksum: string // Hash for integrity checking
-}
-
-interface StorageAllocation {
-  sync: {
-    commands: Command[]
-    totalBytes: number
-    itemCount: number
-  }
-  local: {
-    commands: Command[]
-    totalBytes: number
-    itemCount: number
-  }
-  metadata: CommandMetadata
-}
-
-// Storage capacity calculation class
-class StorageCapacityCalculator {
-  private readonly SYNC_COMMAND_TOTAL = 60 * 1024 // 60KB (including safety margin)
-  private readonly ITEM_MAX_SIZE = 8 * 1024 // 8KB
-
-  /**
-   * Calculate accurate byte count with UTF-8 encoding
-   */
-  calculateCommandSize(command: Command): number {
-    // Serialize command object to JSON
-    const jsonStr = JSON.stringify(command)
-
-    // Calculate byte count with UTF-8 encoding
-    const bytes = new TextEncoder().encode(jsonStr).length
-
-    // Add overhead for chrome.storage key name
-    const keyOverhead = new TextEncoder().encode(
-      `${CMD_PREFIX}${command.id}`,
-    ).length
-
-    return bytes + keyOverhead
-  }
-
-  /**
-   * Analyze storage capacity for all commands and decide allocation
-   */
-  analyzeAndAllocate(commands: Command[]): StorageAllocation {
-    // Step 1: Calculate size for each command
-    const commandSizes = commands.map((command) => ({
-      command,
-      size: this.calculateCommandSize(command),
-      canFitInSync: this.calculateCommandSize(command) <= this.ITEM_MAX_SIZE,
-    }))
-
-    // Step 2: Allocate large commands to local storage first
-    const largeCommands = commandSizes.filter((item) => !item.canFitInSync)
-    const candidateCommands = commandSizes.filter((item) => item.canFitInSync)
-
-    // Step 3: Sequentially allocate until sync capacity is reached
-    const syncCommands: Array<{ command: Command; size: number }> = []
-    const localCommands: Array<{ command: Command; size: number }> = [
-      ...largeCommands,
-    ]
-
-    let syncUsage = 0
-    for (const item of candidateCommands) {
-      if (syncUsage + item.size <= this.SYNC_COMMAND_TOTAL) {
-        syncCommands.push(item)
-        syncUsage += item.size
-      } else {
-        localCommands.push(item)
-      }
-    }
-
-    // Step 4: Build allocation result
-    return {
-      sync: {
-        commands: syncCommands.map((item) => item.command),
-        totalBytes: syncUsage,
-        itemCount: syncCommands.length,
-      },
-      local: {
-        commands: localCommands.map((item) => item.command),
-        totalBytes: localCommands.reduce((sum, item) => sum + item.size, 0),
-        itemCount: localCommands.length,
-      },
-      metadata: this.createMetadata(
-        commands,
-        syncCommands.length,
-        localCommands.length,
-      ),
-    }
-  }
-
-  private createMetadata(
-    allCommands: Command[],
-    syncCount: number,
-    localCount: number,
-  ): CommandMetadata {
-    return {
-      order: allCommands.map((cmd) => cmd.id),
-      syncCount,
-      localCount,
-      version: Date.now(),
-      checksum: generateChecksum(allCommands),
-    }
-  }
-}
-
-// Metadata management class
-class MetadataManager {
-  private readonly METADATA_KEY = STORAGE_KEY.COMMAND_METADATA
-  private readonly LOCAL_COUNT_KEY = LOCAL_STORAGE_KEY.COMMAND_LOCAL_COUNT
-
-  async saveMetadata(metadata: CommandMetadata): Promise<void> {
-    // Save metadata body to sync storage
-    await Storage.set(this.METADATA_KEY, metadata)
-
-    // Also save local count to local storage (redundancy)
-    await Storage.set(this.LOCAL_COUNT_KEY, metadata.localCount)
-  }
-
-  async loadMetadata(): Promise<CommandMetadata | null> {
-    try {
-      const metadata = await Storage.get<CommandMetadata>(this.METADATA_KEY)
-      return metadata || null
-    } catch (error) {
-      console.error('Failed to load metadata:', error)
-      return null
-    }
-  }
-
-  async validateMetadata(commands: Command[]): Promise<boolean> {
-    const metadata = await this.loadMetadata()
-    if (!metadata) return false
-
-    // Basic integrity check
-    const totalCount = metadata.syncCount + metadata.localCount
-    if (totalCount !== commands.length) return false
-
-    // Checksum-based integrity check
-    const currentChecksum = generateChecksum(commands)
-    return metadata.checksum === currentChecksum
-  }
-
-  // Migration determination
-  async needsMigration(): Promise<boolean> {
-    const metadata = await this.loadMetadata()
-    const oldCount = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
-
-    // When metadata doesn't exist but legacy format data exists
-    return !metadata && oldCount !== DEFAULT_COUNT
-  }
-}
-
-// Migration management class
-class CommandMigrationManager {
-  private readonly MIGRATION_VERSION = 'v2.0'
-  private readonly MIGRATION_FLAG_KEY = LOCAL_STORAGE_KEY.MIGRATION_STATUS
-
-  async performMigration(): Promise<Command[]> {
-    try {
-      console.debug('Starting command migration to hybrid storage...')
-
-      // Step 1: Load legacy format data
-      const legacyCommands = await loadLegacyCommandData()
-      if (legacyCommands.length === 0) {
-        return DefaultCommands
-      }
-
-      // Step 2: Backup data
-      await this.backupLegacyData(legacyCommands)
-
-      // Step 3: Save in new format
-      const hybridStorage = new HybridCommandStorage()
-      await hybridStorage.saveCommands(legacyCommands)
-
-      // Step 4: Set migration completion flag
-      await Storage.set(this.MIGRATION_FLAG_KEY, {
-        version: this.MIGRATION_VERSION,
-        migratedAt: Date.now(),
-        commandCount: legacyCommands.length,
-      })
-
-      // Step 5: Delete legacy format data (delayed for safety)
-      setTimeout(() => cleanupLegacyCommandData(), 5000)
-
-      console.debug(
-        `Migration completed: ${legacyCommands.length} commands migrated`,
-      )
-      return legacyCommands
-    } catch (error) {
-      console.error('Migration failed:', error)
-
-      // Attempt to restore from backup when migration fails
-      const backupCommands = await this.restoreFromBackup()
-      if (backupCommands.length > 0) {
-        console.debug(
-          `Migration failed, but restored ${backupCommands.length} commands from backup`,
-        )
-        return backupCommands
-      }
-
-      throw new Error(
-        `Command migration failed: ${error instanceof Error ? error.message : String(error)}`,
-      )
-    }
-  }
-
-  async needsMigration(): Promise<boolean> {
-    try {
-      const migrationStatus = (await Storage.get(this.MIGRATION_FLAG_KEY)) as {
-        version?: string
-      } | null
-      if (
-        migrationStatus &&
-        migrationStatus.version === this.MIGRATION_VERSION
-      ) {
-        return false
-      }
-    } catch {
-      // Migration flag doesn't exist = migration not performed
-    }
-
-    const legacyCount = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
-    return legacyCount !== DEFAULT_COUNT
-  }
-
-  private async backupLegacyData(commands: Command[]): Promise<void> {
-    const backup = {
-      version: 'legacy',
-      timestamp: Date.now(),
-      commands: commands,
-      originalCount: commands.length,
-    }
-
-    await chrome.storage.local.set({
-      [LOCAL_STORAGE_KEY.COMMANDS_BACKUP]: backup,
-    })
-  }
-
-  /**
-   * Restore from legacy data backup
-   * Used for recovery from migration failure or data corruption
-   */
-  async restoreFromBackup(): Promise<Command[]> {
-    try {
-      const result = await chrome.storage.local.get(
-        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
-      )
-      const backup = result[LOCAL_STORAGE_KEY.COMMANDS_BACKUP]
-
-      if (backup && backup.commands && Array.isArray(backup.commands)) {
-        console.info(
-          `Restoring ${backup.commands.length} commands from backup (created at ${new Date(backup.timestamp).toLocaleString()})`,
-        )
-        return backup.commands
-      }
-      return []
-    } catch (error) {
-      console.error('Failed to restore from backup:', error)
-      return []
-    }
-  }
+// Re-export everything from sub-modules
+export {
+  STORAGE_KEY,
+  LOCAL_STORAGE_KEY,
+  SESSION_STORAGE_KEY,
+  CMD_PREFIX,
+  CommandMigrationManager,
+  DailyBackupManager,
 }
 
-// Hybrid command storage class
-class HybridCommandStorage {
-  public calculator = new StorageCapacityCalculator()
-  private metadataManager = new MetadataManager()
-
-  async saveCommands(commands: Command[]): Promise<boolean> {
-    try {
-      // Step 1: Determine storage allocation
-      const allocation = this.calculator.analyzeAndAllocate(commands)
-
-      // Step 2: Save commands and metadata atomically
-      await this.saveCommandsAndMetadataAtomically(allocation)
-      return true
-    } catch (error) {
-      console.error('Failed to save commands:', error)
-      throw error
-    }
-  }
-
-  async loadCommands(retryCount = 0): Promise<Command[]> {
-    const MAX_RETRIES = 3
-    const RETRY_DELAY_MS = 10
-
-    try {
-      // Step 1: Check if migration is needed
-      if (await this.metadataManager.needsMigration()) {
-        const migrationManager = new CommandMigrationManager()
-        return await migrationManager.performMigration()
-      }
-
-      // Step 2: Load metadata
-      const metadata = await this.metadataManager.loadMetadata()
-      if (!metadata) {
-        return DefaultCommands
-      }
-
-      // Step 3: Load commands from both storage areas
-      const [syncCommands, localCommands] = await Promise.all([
-        this.loadFromSync(metadata.syncCount),
-        this.loadFromLocal(metadata.localCount),
-      ])
-
-      // Step 4: Merge in metadata order
-      const allCommands = [...syncCommands, ...localCommands]
-      const orderedCommands = this.reorderCommands(allCommands, metadata.order)
-
-      // Step 5: Integrity check
-      if (!(await this.metadataManager.validateMetadata(orderedCommands))) {
-        console.debug(
-          `Command integrity check failed (attempt ${retryCount + 1}/${MAX_RETRIES + 1})`,
-        )
-        // Retry with delay if we haven't exceeded max retries
-        if (retryCount < MAX_RETRIES) {
-          console.info(
-            `Retrying command load after ${RETRY_DELAY_MS}ms delay...`,
-          )
-          await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS))
-          return await this.loadCommands(retryCount + 1)
-        }
-        console.warn('Command integrity check failed after all retries...')
-      }
-
-      return orderedCommands
-    } catch (error) {
-      console.error('Failed to load commands:', error)
-      return DefaultCommands
-    }
-  }
-
-  private async saveCommandsAndMetadataAtomically(
-    allocation: StorageAllocation,
-  ): Promise<void> {
-    const syncSavePromises: Promise<void>[] = []
-
-    // Save to sync storage
-    allocation.sync.commands.forEach((command, index) => {
-      const key = `${CMD_PREFIX}${index}`
-      syncSavePromises.push(debouncedSyncSet({ [key]: command }))
-    })
-
-    // Save to local storage
-    const localSetData = new Map<string, unknown>()
-    allocation.local.commands.forEach((command, index) => {
-      const key = `${CMD_PREFIX}local-${index}`
-      localSetData.set(key, command)
-    })
-
-    const dataToSet = Object.fromEntries(localSetData)
-    const localSavePromise = chrome.storage.local.set(dataToSet)
-
-    // Add metadata save to the same promise batch
-    const metadataSavePromise = this.metadataManager.saveMetadata(
-      allocation.metadata,
-    )
-
-    // Save commands and metadata atomically in parallel
-    await Promise.all([
-      await Promise.all(syncSavePromises),
-      localSavePromise,
-      metadataSavePromise,
-    ])
-  }
-
-  private async loadFromSync(count: number): Promise<Command[]> {
-    if (count === 0) return []
-
-    const keys = Array.from({ length: count }, (_, i) => `${CMD_PREFIX}${i}`)
-    const result = await chrome.storage.sync.get(keys)
-
-    return keys.map((key) => result[key]).filter((cmd) => cmd != null)
-  }
-
-  private async loadFromLocal(count: number): Promise<Command[]> {
-    if (count === 0) return []
-
-    const keys = Array.from(
-      { length: count },
-      (_, i) => `${CMD_PREFIX}local-${i}`,
-    )
-    const result = await chrome.storage.local.get(keys)
-
-    return keys.map((key) => result[key]).filter((cmd) => cmd != null)
-  }
-
-  private reorderCommands(commands: Command[], order: string[]): Command[] {
-    const commandMap = new Map(commands.map((cmd) => [cmd.id, cmd]))
-    return order
-      .map((id) => commandMap.get(id))
-      .filter((cmd): cmd is Command => cmd != null)
-  }
-}
-
-// Export migration management class
-export { CommandMigrationManager }
+export type { ChangedCallback, KEY }
 
 export const Storage = {
-  /**
-   * Get a item from chrome sync storage.
-   *
-   * @param {STORAGE_KEY} key of item in storage.
-   */
-  get: async <T>(key: KEY): Promise<T> => {
-    const area = detectStorageArea(key)
-    const result = await area.get(`${key}`)
-    if (chrome.runtime.lastError != null) {
-      throw chrome.runtime.lastError
-    }
-    return result[key] ?? structuredClone(DEFAULTS[key])
-  },
-
-  /**
-   * Set a item to chrome sync storage.
-   *
-   * @param {string} key key of item.
-   * @param {any} value item.
-   */
-  set: async <T>(key: KEY, value: T): Promise<boolean> => {
-    const area = detectStorageArea(key)
-
-    if (area === chrome.storage.sync) {
-      await debouncedSyncSet({ [key.toString()]: value })
-      return true
-    } else {
-      await area.set({ [key]: value })
-      return true
-    }
-  },
-
-  /**
-   * Set a item to chrome sync storage.
-   *
-   * @param {string} key key of item.
-   * @param {UpdateFunc} updater function to update item.
-   *
-   * @returns {Promise<boolean>} true if success's
-   */
-  update: async <T>(key: KEY, updater: UpdateFunc<T>): Promise<boolean> => {
-    const data = await Storage.get<T>(key)
-    const newData = updater(data)
-    return await Storage.set(key, newData)
-  },
+  // Base storage methods
+  ...BaseStorage,
 
-  /**
-   * Remove a item in chrome sync storage.
-   *
-   * @param {string} key key of item.
-   */
-  remove: (key: KEY): Promise<boolean | chrome.runtime.LastError> => {
-    return new Promise((resolve, reject) => {
-      const area = detectStorageArea(key)
-      area.remove(`${key}`, () => {
-        if (chrome.runtime.lastError != null) {
-          reject(chrome.runtime.lastError)
-        } else {
-          resolve(true)
-        }
-      })
-    })
-  },
-
-  addListener: <T>(key: KEY, cb: ChangedCallback<T>) => {
-    changedCallbacks[key] = changedCallbacks[key] ?? []
-    changedCallbacks[key].push(cb)
-  },
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  removeListener: (key: KEY, cb: ChangedCallback<any>) => {
-    changedCallbacks[key] = changedCallbacks[key]?.filter((f) => f !== cb)
-  },
-
-  getCapture: async (key: string): Promise<string | undefined> => {
-    let captures = await Storage.get<CaptureDataStorage>(
-      LOCAL_STORAGE_KEY.CAPTURES,
-    )
-    let c = captures[key]
-    if (c != null) {
-      return c
-    }
-    captures = await Storage.get<CaptureDataStorage>(
-      SESSION_STORAGE_KEY.TMP_CAPTURES,
-    )
-    c = captures[key]
-    if (c != null) {
-      return c
-    }
-  },
-
-  /**
-   * Get all commands from chrome sync storage (legacy format).
-   *
-   * @returns {Promise<Command[]>} commands
-   * @throws {chrome.runtime.LastError} if error occurred
-   */
-  getCommandsOld: async (): Promise<Command[]> => {
-    return await loadLegacyCommandData({
-      returnDefaultOnEmpty: true,
-      throwOnError: true,
-    })
-  },
-
-  /**
-   * Set all commands to chrome sync storage.
-   *
-   * @returns {Promise<boolean>} true if success's
-   * @throws {chrome.runtime.LastError} if error occurred
-   */
-  setCommandsOld: async (
-    commands: Command[],
-  ): Promise<boolean | chrome.runtime.LastError> => {
-    const count = commands.length
-    const preCount = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
-
-    // Update commands and count.
-    const data = commands.reduce(
-      (acc, cmd, i) => {
-        acc[`${CMD_PREFIX}${i}`] = cmd
-        return acc
-      },
-      {} as { [key: string]: Command },
-    )
-    await debouncedSyncSet({
-      ...data,
-      [STORAGE_KEY.COMMAND_COUNT]: commands.length,
-    })
-
-    // Remove surplus commands
-    if (preCount > count) {
-      const removeKeys = getIndicesToRemove(preCount, count).map(
-        (i) => `${CMD_PREFIX}${i}`,
-      )
-      await chrome.storage.sync.remove(removeKeys)
-    }
-    return true
-  },
-
-  /**
-   * Update commands to chrome sync storage.
-   *
-   * @returns {Promise<boolean>} true if success's
-   * @throws {chrome.runtime.LastError} if error occurred
-   */
-  updateCommands: async (
-    commands: Command[],
-  ): Promise<boolean | chrome.runtime.LastError> => {
-    const current = await Storage.getCommands()
-
-    // If update first time, set DefaultCommands.
-    const count = await Storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
-    if (count === DEFAULT_COUNT) {
-      console.debug('Update first time, set DefaultCommands.')
-      const newCommands = current.map((cmd) => {
-        return commands.find((c) => c.id === cmd.id) ?? cmd
-      })
-      return Storage.setCommands(newCommands)
-    }
-
-    // Update commands.
-    const newCommands = current.reduce(
-      (acc, cmd, i) => {
-        const newCmd = commands.find((c) => c.id === cmd.id)
-        if (newCmd) {
-          acc[`${CMD_PREFIX}${i}`] = newCmd
-        }
-        return acc
-      },
-      {} as { [key: string]: Command },
-    )
-    await debouncedSyncSet(newCommands)
-    return true
-  },
+  // Command-specific methods
+  ...CommandStorage,
 
   addCommandListener: (cb: commandChangedCallback) => {
     commandChangedCallbacks.push(cb)
@@ -810,6 +58,9 @@ export const Storage = {
 
   // New methods for hybrid storage
   hybridStorage: new HybridCommandStorage(),
+  
+  // Daily backup manager
+  dailyBackupManager: new DailyBackupManager(),
 
   /**
    * New command getter method (hybrid storage compatible)
@@ -824,4 +75,16 @@ export const Storage = {
   setCommands: async (commands: Command[]): Promise<boolean> => {
     return await Storage.hybridStorage.saveCommands(commands)
   },
+
+  /**
+   * Update commands to chrome sync storage.
+   *
+   * @returns {Promise<boolean>} true if success's
+   * @throws {chrome.runtime.LastError} if error occurred
+   */
+  updateCommands: async (
+    commands: Command[],
+  ): Promise<boolean | chrome.runtime.LastError> => {
+    return await CommandStorage.updateCommands(commands, Storage.hybridStorage)
+  },
 }
diff --git a/src/services/storage/backupManager.ts b/src/services/storage/backupManager.ts
new file mode 100644
index 00000000..e92bd342
--- /dev/null
+++ b/src/services/storage/backupManager.ts
@@ -0,0 +1,71 @@
+import { Command } from '@/types'
+import { LOCAL_STORAGE_KEY } from './index'
+import { HybridCommandStorage } from './commandStorage'
+
+// Daily backup management class
+export class DailyBackupManager {
+  private readonly DAILY_BACKUP_KEY = LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP
+  private readonly BACKUP_INTERVAL_MS = 24 * 60 * 60 * 1000 // 24 hours
+
+  async shouldBackup(): Promise<boolean> {
+    try {
+      const lastBackup = await this.getLastBackupData()
+      if (!lastBackup) {
+        return true
+      }
+
+      const now = Date.now()
+      const timeSinceLastBackup = now - lastBackup.timestamp
+      return timeSinceLastBackup >= this.BACKUP_INTERVAL_MS
+    } catch (error) {
+      console.error('Failed to check backup schedule:', error)
+      return true
+    }
+  }
+
+  async performDailyBackup(): Promise<void> {
+    try {
+      const hybridStorage = new HybridCommandStorage()
+      const commands = await hybridStorage.loadCommands()
+      
+      if (commands.length === 0) {
+        console.debug('No commands to backup')
+        return
+      }
+
+      const backup = {
+        version: 'daily',
+        timestamp: Date.now(),
+        commands: commands,
+      }
+
+      await chrome.storage.local.set({
+        [this.DAILY_BACKUP_KEY]: backup,
+      })
+
+      console.debug(`Daily backup completed: ${commands.length} commands backed up`)
+    } catch (error) {
+      console.error('Failed to perform daily backup:', error)
+    }
+  }
+
+  async getLastBackupData(): Promise<{ version: string; timestamp: number; commands: Command[] } | null> {
+    try {
+      const result = await chrome.storage.local.get(this.DAILY_BACKUP_KEY)
+      const backup = result[this.DAILY_BACKUP_KEY]
+      
+      if (backup && backup.timestamp && Array.isArray(backup.commands)) {
+        return backup
+      }
+      return null
+    } catch (error) {
+      console.error('Failed to get last backup data:', error)
+      return null
+    }
+  }
+
+  async getLastBackupDate(): Promise<Date | null> {
+    const backup = await this.getLastBackupData()
+    return backup ? new Date(backup.timestamp) : null
+  }
+}
\ No newline at end of file
diff --git a/src/services/storage/commandStorage.ts b/src/services/storage/commandStorage.ts
new file mode 100644
index 00000000..fc34c580
--- /dev/null
+++ b/src/services/storage/commandStorage.ts
@@ -0,0 +1,559 @@
+import { DefaultCommands } from '../option/defaultSettings'
+import { Command } from '@/types'
+import {
+  BaseStorage,
+  STORAGE_KEY,
+  LOCAL_STORAGE_KEY,
+  CMD_PREFIX,
+  debouncedSyncSet,
+} from './index'
+
+const DEFAULT_COUNT = -1
+
+/**
+ * Generate checksum from object (JSON.stringify based)
+ * Uses a simple hash algorithm compatible with browser environment
+ * @param obj - Object to generate checksum for
+ * @returns Checksum (hexadecimal string)
+ */
+function generateChecksum(obj: unknown): string {
+  const normalized = JSON.stringify(obj, Object.keys(obj || {}).sort())
+
+  // Simple hash algorithm (djb2) that works in browser
+  let hash = 5381
+  for (let i = 0; i < normalized.length; i++) {
+    hash = (hash << 5) + hash + normalized.charCodeAt(i)
+    hash = hash & hash // Convert to 32bit integer
+  }
+
+  // Convert to hex string and pad to ensure consistent length
+  return Math.abs(hash).toString(16).padStart(8, '0')
+}
+
+async function loadLegacyCommandData(options?: {
+  returnDefaultOnEmpty?: boolean
+  throwOnError?: boolean
+}): Promise<Command[]> {
+  const { returnDefaultOnEmpty = false, throwOnError = false } = options || {}
+
+  try {
+    const count = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+    if (count === DEFAULT_COUNT) {
+      return returnDefaultOnEmpty ? DefaultCommands : []
+    }
+
+    const keys = Array.from({ length: count }, (_, i) => `${CMD_PREFIX}${i}`)
+    const result = await chrome.storage.sync.get(keys)
+
+    if (throwOnError && chrome.runtime.lastError != null) {
+      throw chrome.runtime.lastError
+    }
+
+    return keys.map((key) => result[key]).filter((cmd) => cmd != null)
+  } catch (error) {
+    if (throwOnError) {
+      throw error
+    }
+    console.warn('Failed to load legacy commands:', error)
+    return returnDefaultOnEmpty ? DefaultCommands : []
+  }
+}
+
+// Type definitions for hybrid storage
+interface CommandMetadata {
+  order: string[] // Command ID order array
+  syncCount: number // Number of commands saved in sync storage
+  localCount: number // Number of commands saved in local storage
+  version: number // Data version (timestamp)
+  checksum: string // Hash for integrity checking
+}
+
+interface StorageAllocation {
+  sync: {
+    commands: Command[]
+    totalBytes: number
+    itemCount: number
+  }
+  local: {
+    commands: Command[]
+    totalBytes: number
+    itemCount: number
+  }
+  metadata: CommandMetadata
+}
+
+// Storage capacity calculation class
+class StorageCapacityCalculator {
+  private readonly SYNC_COMMAND_TOTAL = 60 * 1024 // 60KB (including safety margin)
+  private readonly ITEM_MAX_SIZE = 8 * 1024 // 8KB
+
+  /**
+   * Calculate accurate byte count with UTF-8 encoding
+   */
+  calculateCommandSize(command: Command): number {
+    // Serialize command object to JSON
+    const jsonStr = JSON.stringify(command)
+
+    // Calculate byte count with UTF-8 encoding
+    const bytes = new TextEncoder().encode(jsonStr).length
+
+    // Add overhead for chrome.storage key name
+    const keyOverhead = new TextEncoder().encode(
+      `${CMD_PREFIX}${command.id}`,
+    ).length
+
+    return bytes + keyOverhead
+  }
+
+  /**
+   * Analyze storage capacity for all commands and decide allocation
+   */
+  analyzeAndAllocate(commands: Command[]): StorageAllocation {
+    // Step 1: Calculate size for each command
+    const commandSizes = commands.map((command) => ({
+      command,
+      size: this.calculateCommandSize(command),
+      canFitInSync: this.calculateCommandSize(command) <= this.ITEM_MAX_SIZE,
+    }))
+
+    // Step 2: Allocate large commands to local storage first
+    const largeCommands = commandSizes.filter((item) => !item.canFitInSync)
+    const candidateCommands = commandSizes.filter((item) => item.canFitInSync)
+
+    // Step 3: Sequentially allocate until sync capacity is reached
+    const syncCommands: Array<{ command: Command; size: number }> = []
+    const localCommands: Array<{ command: Command; size: number }> = [
+      ...largeCommands,
+    ]
+
+    let syncUsage = 0
+    for (const item of candidateCommands) {
+      if (syncUsage + item.size <= this.SYNC_COMMAND_TOTAL) {
+        syncCommands.push(item)
+        syncUsage += item.size
+      } else {
+        localCommands.push(item)
+      }
+    }
+
+    // Step 4: Build allocation result
+    return {
+      sync: {
+        commands: syncCommands.map((item) => item.command),
+        totalBytes: syncUsage,
+        itemCount: syncCommands.length,
+      },
+      local: {
+        commands: localCommands.map((item) => item.command),
+        totalBytes: localCommands.reduce((sum, item) => sum + item.size, 0),
+        itemCount: localCommands.length,
+      },
+      metadata: this.createMetadata(
+        commands,
+        syncCommands.length,
+        localCommands.length,
+      ),
+    }
+  }
+
+  private createMetadata(
+    allCommands: Command[],
+    syncCount: number,
+    localCount: number,
+  ): CommandMetadata {
+    return {
+      order: allCommands.map((cmd) => cmd.id),
+      syncCount,
+      localCount,
+      version: Date.now(),
+      checksum: generateChecksum(allCommands),
+    }
+  }
+}
+
+// Metadata management class
+class MetadataManager {
+  private readonly METADATA_KEY = STORAGE_KEY.COMMAND_METADATA
+  private readonly LOCAL_COUNT_KEY = LOCAL_STORAGE_KEY.COMMAND_LOCAL_COUNT
+
+  async saveMetadata(metadata: CommandMetadata): Promise<void> {
+    // Save metadata body to sync storage
+    await BaseStorage.set(this.METADATA_KEY, metadata)
+
+    // Also save local count to local storage (redundancy)
+    await BaseStorage.set(this.LOCAL_COUNT_KEY, metadata.localCount)
+  }
+
+  async loadMetadata(): Promise<CommandMetadata | null> {
+    try {
+      const metadata = await BaseStorage.get<CommandMetadata>(this.METADATA_KEY)
+      return metadata || null
+    } catch (error) {
+      console.error('Failed to load metadata:', error)
+      return null
+    }
+  }
+
+  async validateMetadata(commands: Command[]): Promise<boolean> {
+    const metadata = await this.loadMetadata()
+    if (!metadata) return false
+
+    // Basic integrity check
+    const totalCount = metadata.syncCount + metadata.localCount
+    if (totalCount !== commands.length) return false
+
+    // Checksum-based integrity check
+    const currentChecksum = generateChecksum(commands)
+    return metadata.checksum === currentChecksum
+  }
+
+  // Migration determination
+  async needsMigration(): Promise<boolean> {
+    const metadata = await this.loadMetadata()
+    const oldCount = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+
+    // When metadata doesn't exist but legacy format data exists
+    return !metadata && oldCount !== DEFAULT_COUNT
+  }
+}
+
+// Migration management class
+export class CommandMigrationManager {
+  private readonly MIGRATION_VERSION = 'v2.0'
+  private readonly MIGRATION_FLAG_KEY = LOCAL_STORAGE_KEY.MIGRATION_STATUS
+
+  async performMigration(): Promise<Command[]> {
+    try {
+      console.debug('Starting command migration to hybrid storage...')
+
+      // Step 1: Load legacy format data
+      const legacyCommands = await loadLegacyCommandData()
+      if (legacyCommands.length === 0) {
+        return DefaultCommands
+      }
+
+      // Step 2: Backup data
+      await this.backupCommands(legacyCommands, 'legacy')
+
+      // Step 3: Save in new format
+      const hybridStorage = new HybridCommandStorage()
+      await hybridStorage.saveCommands(legacyCommands)
+
+      // Step 4: Set migration completion flag
+      await BaseStorage.set(this.MIGRATION_FLAG_KEY, {
+        version: this.MIGRATION_VERSION,
+        migratedAt: Date.now(),
+        commandCount: legacyCommands.length,
+      })
+
+      console.debug(
+        `Migration completed: ${legacyCommands.length} commands migrated`,
+      )
+      return legacyCommands
+    } catch (error) {
+      console.error('Migration failed:', error)
+
+      // Attempt to restore from backup when migration fails
+      const backups = await this.restoreFromBackup()
+      if (backups.length > 0) {
+        console.debug(
+          `Migration failed, but restored ${backups.length} commands from backup`,
+        )
+        return backups
+      }
+
+      throw new Error(
+        `Command migration failed: ${error instanceof Error ? error.message : String(error)}`,
+      )
+    }
+  }
+
+  async needsMigration(): Promise<boolean> {
+    try {
+      const migrationStatus = (await BaseStorage.get(this.MIGRATION_FLAG_KEY)) as {
+        version?: string
+      } | null
+      if (
+        migrationStatus &&
+        migrationStatus.version === this.MIGRATION_VERSION
+      ) {
+        return false
+      }
+    } catch {
+      // Migration flag doesn't exist = migration not performed
+    }
+
+    const legacyCount = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+    return legacyCount !== DEFAULT_COUNT
+  }
+
+  private async backupCommands(
+    commands: Command[],
+    version: string,
+  ): Promise<void> {
+    const backup = {
+      version: version,
+      timestamp: Date.now(),
+      commands: commands,
+    }
+    await chrome.storage.local.set({
+      [LOCAL_STORAGE_KEY.COMMANDS_BACKUP]: backup,
+    })
+  }
+
+  /**
+   * Restore from legacy data backup
+   * Used for recovery from migration failure or data corruption
+   */
+  async restoreFromBackup(): Promise<Command[]> {
+    try {
+      const result = await chrome.storage.local.get(
+        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
+      )
+      const backup = result[LOCAL_STORAGE_KEY.COMMANDS_BACKUP]
+
+      if (backup && backup.commands && Array.isArray(backup.commands)) {
+        console.info(
+          `Restoring ${backup.commands.length} commands from backup (created at ${new Date(backup.timestamp).toLocaleString()})`,
+        )
+        return backup.commands
+      }
+      return []
+    } catch (error) {
+      console.error('Failed to restore from backup:', error)
+      return []
+    }
+  }
+}
+
+// Hybrid command storage class
+export class HybridCommandStorage {
+  public calculator = new StorageCapacityCalculator()
+  private metadataManager = new MetadataManager()
+
+  async saveCommands(commands: Command[]): Promise<boolean> {
+    try {
+      // Step 1: Determine storage allocation
+      const allocation = this.calculator.analyzeAndAllocate(commands)
+
+      // Step 2: Save commands and metadata atomically
+      await this.saveCommandsAndMetadataAtomically(allocation)
+      return true
+    } catch (error) {
+      console.error('Failed to save commands:', error)
+      throw error
+    }
+  }
+
+  async loadCommands(retryCount = 0): Promise<Command[]> {
+    const MAX_RETRIES = 3
+    const RETRY_DELAY_MS = 10
+
+    try {
+      // Step 1: Check if migration is needed
+      if (await this.metadataManager.needsMigration()) {
+        const migrationManager = new CommandMigrationManager()
+        return await migrationManager.performMigration()
+      }
+
+      // Step 2: Load metadata
+      const metadata = await this.metadataManager.loadMetadata()
+      if (!metadata) {
+        return DefaultCommands
+      }
+
+      // Step 3: Load commands from both storage areas
+      const [syncCommands, localCommands] = await Promise.all([
+        this.loadFromSync(metadata.syncCount),
+        this.loadFromLocal(metadata.localCount),
+      ])
+
+      // Step 4: Merge in metadata order
+      const allCommands = [...syncCommands, ...localCommands]
+      const orderedCommands = this.reorderCommands(allCommands, metadata.order)
+
+      // Step 5: Integrity check
+      if (!(await this.metadataManager.validateMetadata(orderedCommands))) {
+        console.debug(
+          `Command integrity check failed (attempt ${retryCount + 1}/${MAX_RETRIES + 1})`,
+        )
+        // Retry with delay if we haven't exceeded max retries
+        if (retryCount < MAX_RETRIES) {
+          console.info(
+            `Retrying command load after ${RETRY_DELAY_MS}ms delay...`,
+          )
+          await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS))
+          return await this.loadCommands(retryCount + 1)
+        }
+        console.warn('Command integrity check failed after all retries...')
+      }
+
+      return orderedCommands
+    } catch (error) {
+      console.error('Failed to load commands:', error)
+      return DefaultCommands
+    }
+  }
+
+  private async saveCommandsAndMetadataAtomically(
+    allocation: StorageAllocation,
+  ): Promise<void> {
+    const syncSavePromises: Promise<void>[] = []
+
+    // Save to sync storage
+    allocation.sync.commands.forEach((command, index) => {
+      const key = `${CMD_PREFIX}${index}`
+      syncSavePromises.push(debouncedSyncSet({ [key]: command }))
+    })
+
+    // Save to local storage
+    const localSetData = new Map<string, unknown>()
+    allocation.local.commands.forEach((command, index) => {
+      const key = `${CMD_PREFIX}local-${index}`
+      localSetData.set(key, command)
+    })
+
+    const dataToSet = Object.fromEntries(localSetData)
+    const localSavePromise = chrome.storage.local.set(dataToSet)
+
+    // Add metadata save to the same promise batch
+    const metadataSavePromise = this.metadataManager.saveMetadata(
+      allocation.metadata,
+    )
+
+    // Save commands and metadata atomically in parallel
+    await Promise.all([
+      await Promise.all(syncSavePromises),
+      localSavePromise,
+      metadataSavePromise,
+    ])
+  }
+
+  private async loadFromSync(count: number): Promise<Command[]> {
+    if (count === 0) return []
+
+    const keys = Array.from({ length: count }, (_, i) => `${CMD_PREFIX}${i}`)
+    const result = await chrome.storage.sync.get(keys)
+
+    return keys.map((key) => result[key]).filter((cmd) => cmd != null)
+  }
+
+  private async loadFromLocal(count: number): Promise<Command[]> {
+    if (count === 0) return []
+
+    const keys = Array.from(
+      { length: count },
+      (_, i) => `${CMD_PREFIX}local-${i}`,
+    )
+    const result = await chrome.storage.local.get(keys)
+
+    return keys.map((key) => result[key]).filter((cmd) => cmd != null)
+  }
+
+  private reorderCommands(commands: Command[], order: string[]): Command[] {
+    const commandMap = new Map(commands.map((cmd) => [cmd.id, cmd]))
+    return order
+      .map((id) => commandMap.get(id))
+      .filter((cmd): cmd is Command => cmd != null)
+  }
+}
+
+const getIndicesToRemove = (fromLen: number, toLen: number): number[] => {
+  if (toLen >= fromLen) {
+    return []
+  }
+  const removeCount = fromLen - toLen
+  const startIndex = toLen
+  const indicesToRemove = []
+  for (let i = 0; i < removeCount; i++) {
+    indicesToRemove.push(startIndex + i)
+  }
+  return indicesToRemove
+}
+
+export const CommandStorage = {
+  /**
+   * Get all commands from chrome sync storage (legacy format).
+   *
+   * @returns {Promise<Command[]>} commands
+   * @throws {chrome.runtime.LastError} if error occurred
+   */
+  getCommandsOld: async (): Promise<Command[]> => {
+    return await loadLegacyCommandData({
+      returnDefaultOnEmpty: true,
+      throwOnError: true,
+    })
+  },
+
+  /**
+   * Set all commands to chrome sync storage.
+   *
+   * @returns {Promise<boolean>} true if success's
+   * @throws {chrome.runtime.LastError} if error occurred
+   */
+  setCommandsOld: async (
+    commands: Command[],
+  ): Promise<boolean | chrome.runtime.LastError> => {
+    const count = commands.length
+    const preCount = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+
+    // Update commands and count.
+    const data = commands.reduce(
+      (acc, cmd, i) => {
+        acc[`${CMD_PREFIX}${i}`] = cmd
+        return acc
+      },
+      {} as { [key: string]: Command },
+    )
+    await debouncedSyncSet({
+      ...data,
+      [STORAGE_KEY.COMMAND_COUNT]: commands.length,
+    })
+
+    // Remove surplus commands
+    if (preCount > count) {
+      const removeKeys = getIndicesToRemove(preCount, count).map(
+        (i) => `${CMD_PREFIX}${i}`,
+      )
+      await chrome.storage.sync.remove(removeKeys)
+    }
+    return true
+  },
+
+  /**
+   * Update commands to chrome sync storage.
+   *
+   * @returns {Promise<boolean>} true if success's
+   * @throws {chrome.runtime.LastError} if error occurred
+   */
+  updateCommands: async (
+    commands: Command[],
+    hybridStorage: HybridCommandStorage,
+  ): Promise<boolean | chrome.runtime.LastError> => {
+    const current = await hybridStorage.loadCommands()
+
+    // If update first time, set DefaultCommands.
+    const count = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+    if (count === DEFAULT_COUNT) {
+      console.debug('Update first time, set DefaultCommands.')
+      const newCommands = current.map((cmd) => {
+        return commands.find((c) => c.id === cmd.id) ?? cmd
+      })
+      return hybridStorage.saveCommands(newCommands)
+    }
+
+    // Update commands.
+    const newCommands = current.reduce(
+      (acc, cmd, i) => {
+        const newCmd = commands.find((c) => c.id === cmd.id)
+        if (newCmd) {
+          acc[`${CMD_PREFIX}${i}`] = newCmd
+        }
+        return acc
+      },
+      {} as { [key: string]: Command },
+    )
+    await debouncedSyncSet(newCommands)
+    return true
+  },
+}
\ No newline at end of file
diff --git a/src/services/storage/index.ts b/src/services/storage/index.ts
new file mode 100644
index 00000000..571638bb
--- /dev/null
+++ b/src/services/storage/index.ts
@@ -0,0 +1,201 @@
+import DefaultSettings from '../option/defaultSettings'
+import { CaptureDataStorage } from '@/types'
+
+const SYNC_DEBOUNCE_DELAY = 10
+
+export enum STORAGE_KEY {
+  USER = 0,
+  COMMAND_COUNT = 2,
+  USER_STATS = 3,
+  SHORTCUTS = 4,
+  COMMAND_METADATA = 5,
+}
+
+export enum LOCAL_STORAGE_KEY {
+  CACHES = 'caches',
+  CLIENT_ID = 'clientId',
+  STARS = 'stars',
+  CAPTURES = 'captures',
+  COMMAND_LOCAL_COUNT = 'commandLocalCount',
+  MIGRATION_STATUS = 'migrationStatus',
+  COMMANDS_BACKUP = 'commandsBackup',
+  DAILY_COMMANDS_BACKUP = 'dailyCommandsBackup',
+}
+
+export enum SESSION_STORAGE_KEY {
+  BG = 'bg',
+  SELECTION_TEXT = 'selectionText ',
+  SESSION_DATA = 'sessionData',
+  MESSAGE_QUEUE = 'messageQueue',
+  TMP_CAPTURES = 'tmpCaptures',
+  PA_RECORDING = 'pageActionRecording',
+  PA_RUNNING = 'pageActionRunning',
+  PA_CONTEXT = 'pageActionContext',
+  PA_RECORDER_OPTION = 'pageActionRecorderOption',
+}
+
+export const CMD_PREFIX = 'cmd-'
+
+let syncSetTimeout: NodeJS.Timeout | null
+let syncSetResolves: (() => void)[] = []
+const syncSetData = new Map<string, unknown>()
+
+const debouncedSyncSet = (data: Record<string, unknown>): Promise<void> => {
+  return new Promise((resolve) => {
+    if (syncSetTimeout != null) {
+      clearTimeout(syncSetTimeout)
+    }
+
+    Object.entries(data).forEach(([key, value]) => {
+      syncSetData.set(key, value)
+    })
+
+    syncSetTimeout = setTimeout(async () => {
+      const dataToSet = Object.fromEntries(syncSetData)
+      chrome.storage.sync.set(dataToSet, () => {
+        if (chrome.runtime.lastError != null) {
+          console.error(chrome.runtime.lastError)
+        }
+        syncSetData.clear()
+        syncSetTimeout = null
+        syncSetResolves.forEach((resolve) => resolve())
+        syncSetResolves = []
+      })
+    }, SYNC_DEBOUNCE_DELAY)
+    syncSetResolves.push(resolve)
+  })
+}
+
+export type KEY = STORAGE_KEY | LOCAL_STORAGE_KEY | SESSION_STORAGE_KEY
+
+const DEFAULT_COUNT = -1
+
+const DEFAULTS = {
+  [STORAGE_KEY.USER]: DefaultSettings,
+  [STORAGE_KEY.COMMAND_COUNT]: DEFAULT_COUNT,
+  [STORAGE_KEY.USER_STATS]: {
+    commandExecutionCount: 0,
+    hasShownReviewRequest: false,
+  },
+  [STORAGE_KEY.SHORTCUTS]: {
+    shortcuts: [],
+  },
+  [STORAGE_KEY.COMMAND_METADATA]: null,
+  [LOCAL_STORAGE_KEY.CACHES]: {
+    images: {},
+  },
+  [LOCAL_STORAGE_KEY.CLIENT_ID]: '',
+  [LOCAL_STORAGE_KEY.STARS]: [],
+  [LOCAL_STORAGE_KEY.CAPTURES]: {},
+  [LOCAL_STORAGE_KEY.COMMAND_LOCAL_COUNT]: 0,
+  [LOCAL_STORAGE_KEY.MIGRATION_STATUS]: null,
+  [LOCAL_STORAGE_KEY.COMMANDS_BACKUP]: null,
+  [LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP]: null,
+  [SESSION_STORAGE_KEY.BG]: {},
+  [SESSION_STORAGE_KEY.SESSION_DATA]: null,
+  [SESSION_STORAGE_KEY.MESSAGE_QUEUE]: [],
+  [SESSION_STORAGE_KEY.PA_RECORDING]: [],
+  [SESSION_STORAGE_KEY.PA_RUNNING]: {},
+  [SESSION_STORAGE_KEY.PA_CONTEXT]: {},
+  [SESSION_STORAGE_KEY.PA_RECORDER_OPTION]: {},
+  [SESSION_STORAGE_KEY.TMP_CAPTURES]: {},
+  [SESSION_STORAGE_KEY.SELECTION_TEXT]: '',
+} as const
+
+const detectStorageArea = (key: KEY): chrome.storage.StorageArea => {
+  if (Object.values(STORAGE_KEY).includes(key)) {
+    return chrome.storage.sync
+  }
+  if (Object.values(LOCAL_STORAGE_KEY).includes(key as LOCAL_STORAGE_KEY)) {
+    return chrome.storage.local
+  }
+  if (Object.values(SESSION_STORAGE_KEY).includes(key as SESSION_STORAGE_KEY)) {
+    return chrome.storage.session
+  }
+  throw new Error('Invalid Storage Key')
+}
+
+export type ChangedCallback<T> = (newVal: T, oldVal: T) => void
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const changedCallbacks = {} as { [key: string]: ChangedCallback<any>[] }
+
+chrome.storage.onChanged.addListener((changes) => {
+  for (const [k, { oldValue, newValue }] of Object.entries(changes)) {
+    for (const [kk, callbacks] of Object.entries(changedCallbacks)) {
+      if (k === kk) callbacks.forEach((cb) => cb(newValue, oldValue))
+    }
+  }
+})
+
+type UpdateFunc<T> = (currentVal: T) => T
+
+export const BaseStorage = {
+  get: async <T>(key: KEY): Promise<T> => {
+    const area = detectStorageArea(key)
+    const result = await area.get(`${key}`)
+    if (chrome.runtime.lastError != null) {
+      throw chrome.runtime.lastError
+    }
+    return result[key] ?? structuredClone(DEFAULTS[key])
+  },
+
+  set: async <T>(key: KEY, value: T): Promise<boolean> => {
+    const area = detectStorageArea(key)
+
+    if (area === chrome.storage.sync) {
+      await debouncedSyncSet({ [key.toString()]: value })
+      return true
+    } else {
+      await area.set({ [key]: value })
+      return true
+    }
+  },
+
+  update: async <T>(key: KEY, updater: UpdateFunc<T>): Promise<boolean> => {
+    const data = await BaseStorage.get<T>(key)
+    const newData = updater(data)
+    return await BaseStorage.set(key, newData)
+  },
+
+  remove: (key: KEY): Promise<boolean | chrome.runtime.LastError> => {
+    return new Promise((resolve, reject) => {
+      const area = detectStorageArea(key)
+      area.remove(`${key}`, () => {
+        if (chrome.runtime.lastError != null) {
+          reject(chrome.runtime.lastError)
+        } else {
+          resolve(true)
+        }
+      })
+    })
+  },
+
+  addListener: <T>(key: KEY, cb: ChangedCallback<T>) => {
+    changedCallbacks[key] = changedCallbacks[key] ?? []
+    changedCallbacks[key].push(cb)
+  },
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  removeListener: (key: KEY, cb: ChangedCallback<any>) => {
+    changedCallbacks[key] = changedCallbacks[key]?.filter((f) => f !== cb)
+  },
+
+  getCapture: async (key: string): Promise<string | undefined> => {
+    let captures = await BaseStorage.get<CaptureDataStorage>(
+      LOCAL_STORAGE_KEY.CAPTURES,
+    )
+    let c = captures[key]
+    if (c != null) {
+      return c
+    }
+    captures = await BaseStorage.get<CaptureDataStorage>(
+      SESSION_STORAGE_KEY.TMP_CAPTURES,
+    )
+    c = captures[key]
+    if (c != null) {
+      return c
+    }
+  },
+}
+
+export { debouncedSyncSet }
\ No newline at end of file

From 784ed027c397dd16f46029c0ed41439f39efef67 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Tue, 1 Jul 2025 23:08:25 +0900
Subject: [PATCH 39/64] Refactoring.

---
 src/services/storage.ts                | 27 ++---------------
 src/services/storage/backupManager.ts  | 16 +++++++---
 src/services/storage/commandStorage.ts | 42 ++++++++++++++++++++------
 3 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/src/services/storage.ts b/src/services/storage.ts
index d99b64d2..4f554e7f 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -12,22 +12,10 @@ import {
   HybridCommandStorage,
   CommandMigrationManager,
   CommandStorage,
+  commandChangedCallback,
 } from './storage/commandStorage'
 import { DailyBackupManager } from './storage/backupManager'
 
-type commandChangedCallback = (commands: Command[]) => void
-const commandChangedCallbacks = [] as commandChangedCallback[]
-
-chrome.storage.onChanged.addListener((changes) => {
-  const commands = [] as Command[]
-  for (const [k, { newValue }] of Object.entries(changes)) {
-    if (k.startsWith(CMD_PREFIX)) commands.push(newValue)
-  }
-  if (commands.length > 0) {
-    commandChangedCallbacks.forEach((cb) => cb(commands))
-  }
-})
-
 // Re-export everything from sub-modules
 export {
   STORAGE_KEY,
@@ -38,7 +26,7 @@ export {
   DailyBackupManager,
 }
 
-export type { ChangedCallback, KEY }
+export type { ChangedCallback, KEY, commandChangedCallback }
 
 export const Storage = {
   // Base storage methods
@@ -47,18 +35,9 @@ export const Storage = {
   // Command-specific methods
   ...CommandStorage,
 
-  addCommandListener: (cb: commandChangedCallback) => {
-    commandChangedCallbacks.push(cb)
-  },
-
-  removeCommandListener: (cb: commandChangedCallback) => {
-    const idx = commandChangedCallbacks.findIndex((f) => f === cb)
-    if (idx !== -1) commandChangedCallbacks.splice(idx, 1)
-  },
-
   // New methods for hybrid storage
   hybridStorage: new HybridCommandStorage(),
-  
+
   // Daily backup manager
   dailyBackupManager: new DailyBackupManager(),
 
diff --git a/src/services/storage/backupManager.ts b/src/services/storage/backupManager.ts
index e92bd342..58fd2da3 100644
--- a/src/services/storage/backupManager.ts
+++ b/src/services/storage/backupManager.ts
@@ -27,7 +27,7 @@ export class DailyBackupManager {
     try {
       const hybridStorage = new HybridCommandStorage()
       const commands = await hybridStorage.loadCommands()
-      
+
       if (commands.length === 0) {
         console.debug('No commands to backup')
         return
@@ -43,17 +43,23 @@ export class DailyBackupManager {
         [this.DAILY_BACKUP_KEY]: backup,
       })
 
-      console.debug(`Daily backup completed: ${commands.length} commands backed up`)
+      console.debug(
+        `Daily backup completed: ${commands.length} commands backed up`,
+      )
     } catch (error) {
       console.error('Failed to perform daily backup:', error)
     }
   }
 
-  async getLastBackupData(): Promise<{ version: string; timestamp: number; commands: Command[] } | null> {
+  async getLastBackupData(): Promise<{
+    version: string
+    timestamp: number
+    commands: Command[]
+  } | null> {
     try {
       const result = await chrome.storage.local.get(this.DAILY_BACKUP_KEY)
       const backup = result[this.DAILY_BACKUP_KEY]
-      
+
       if (backup && backup.timestamp && Array.isArray(backup.commands)) {
         return backup
       }
@@ -68,4 +74,4 @@ export class DailyBackupManager {
     const backup = await this.getLastBackupData()
     return backup ? new Date(backup.timestamp) : null
   }
-}
\ No newline at end of file
+}
diff --git a/src/services/storage/commandStorage.ts b/src/services/storage/commandStorage.ts
index fc34c580..542ac950 100644
--- a/src/services/storage/commandStorage.ts
+++ b/src/services/storage/commandStorage.ts
@@ -7,6 +7,22 @@ import {
   CMD_PREFIX,
   debouncedSyncSet,
 } from './index'
+import { VERSION } from '@/const'
+
+// Command change callbacks
+export type commandChangedCallback = (commands: Command[]) => void
+const commandChangedCallbacks = [] as commandChangedCallback[]
+
+// Setup command change listener
+chrome.storage.onChanged.addListener((changes) => {
+  const commands = [] as Command[]
+  for (const [k, { newValue }] of Object.entries(changes)) {
+    if (k.startsWith(CMD_PREFIX)) commands.push(newValue)
+  }
+  if (commands.length > 0) {
+    commandChangedCallbacks.forEach((cb) => cb(commands))
+  }
+})
 
 const DEFAULT_COUNT = -1
 
@@ -219,7 +235,7 @@ class MetadataManager {
 
 // Migration management class
 export class CommandMigrationManager {
-  private readonly MIGRATION_VERSION = 'v2.0'
+  private readonly MIGRATION_VERSION = VERSION
   private readonly MIGRATION_FLAG_KEY = LOCAL_STORAGE_KEY.MIGRATION_STATUS
 
   async performMigration(): Promise<Command[]> {
@@ -233,7 +249,7 @@ export class CommandMigrationManager {
       }
 
       // Step 2: Backup data
-      await this.backupCommands(legacyCommands, 'legacy')
+      await this.backupCommands(legacyCommands)
 
       // Step 3: Save in new format
       const hybridStorage = new HybridCommandStorage()
@@ -270,7 +286,9 @@ export class CommandMigrationManager {
 
   async needsMigration(): Promise<boolean> {
     try {
-      const migrationStatus = (await BaseStorage.get(this.MIGRATION_FLAG_KEY)) as {
+      const migrationStatus = (await BaseStorage.get(
+        this.MIGRATION_FLAG_KEY,
+      )) as {
         version?: string
       } | null
       if (
@@ -287,12 +305,9 @@ export class CommandMigrationManager {
     return legacyCount !== DEFAULT_COUNT
   }
 
-  private async backupCommands(
-    commands: Command[],
-    version: string,
-  ): Promise<void> {
+  private async backupCommands(commands: Command[]): Promise<void> {
     const backup = {
-      version: version,
+      version: 'legacy',
       timestamp: Date.now(),
       commands: commands,
     }
@@ -556,4 +571,13 @@ export const CommandStorage = {
     await debouncedSyncSet(newCommands)
     return true
   },
-}
\ No newline at end of file
+
+  addCommandListener: (cb: commandChangedCallback) => {
+    commandChangedCallbacks.push(cb)
+  },
+
+  removeCommandListener: (cb: commandChangedCallback) => {
+    const idx = commandChangedCallbacks.findIndex((f) => f === cb)
+    if (idx !== -1) commandChangedCallbacks.splice(idx, 1)
+  },
+}

From 91fa98e1a36b75caf2b064335b7410820325b209 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 2 Jul 2025 12:43:54 +0900
Subject: [PATCH 40/64] Update: Change style of Storage Usage.

---
 src/components/option/Option.module.css | 9 +++++++++
 src/components/option/StorageUsage.tsx  | 6 ++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/option/Option.module.css b/src/components/option/Option.module.css
index f3453bc7..ca16f674 100644
--- a/src/components/option/Option.module.css
+++ b/src/components/option/Option.module.css
@@ -89,3 +89,12 @@
   flex: 1;
   border: none;
 }
+
+.bgHatching {
+  background-color: #fff;
+  background-image: repeating-linear-gradient(45deg,
+      #9ca3af,
+      #9ca3af 1px,
+      transparent 2px,
+      transparent 4px);
+}
diff --git a/src/components/option/StorageUsage.tsx b/src/components/option/StorageUsage.tsx
index f406d8b6..6606a84e 100644
--- a/src/components/option/StorageUsage.tsx
+++ b/src/components/option/StorageUsage.tsx
@@ -79,8 +79,8 @@ const StorageUsage: React.FC = () => {
     },
     {
       value: storageData.local.backupPercent,
-      color: '#fcd34d', // amber-300
       name: 'Backup',
+      className: s.bgHatching,
     },
     {
       value: storageData.local.freePercent,
@@ -138,7 +138,9 @@ const StorageUsage: React.FC = () => {
             <span>Commands: {storageData.local.commandsPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-amber-300 rounded-sm mr-1"></div>
+            <div
+              className={cn('w-3 h-3 border rounded-sm mr-1', s.bgHatching)}
+            ></div>
             <span>Backup: {storageData.local.backupPercent}%</span>
           </div>
           <div className="flex items-center">

From e3745549c6d15654884f606103752945a8093207 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 2 Jul 2025 12:53:46 +0900
Subject: [PATCH 41/64] Update: If the folder is not found, commands to be
 added to the root instead.

---
 src/services/option/commandTree.ts | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/services/option/commandTree.ts b/src/services/option/commandTree.ts
index 2ac6616a..fbb41460 100644
--- a/src/services/option/commandTree.ts
+++ b/src/services/option/commandTree.ts
@@ -72,6 +72,8 @@ const createAddNodeToTreeFunction = (
   folders: CommandFolder[],
   processedFolders: Set<string>,
 ) => {
+  const processingStack = new Set<string>()
+  
   const addNodeToTree = (
     tree: CommandTreeNode[],
     node: CommandTreeNode,
@@ -83,6 +85,14 @@ const createAddNodeToTreeFunction = (
         if (!parent.children) parent.children = []
         parent.children.push(node)
       } else {
+        // Check for circular dependency before processing
+        if (processingStack.has(parentId)) {
+          console.warn(`Circular dependency detected for folder ${parentId}. Adding to root instead.`)
+          tree.push(node)
+          return
+        }
+        
+        processingStack.add(parentId)
         addParentFolderIfNeeded(
           tree,
           parentId,
@@ -90,7 +100,17 @@ const createAddNodeToTreeFunction = (
           processedFolders,
           addNodeToTree,
         )
-        addNodeToTree(tree, node, parentId)
+        processingStack.delete(parentId)
+        
+        // Try again after adding parent
+        const parentAfterAdd = findNodeInTree(tree, parentId)
+        if (parentAfterAdd) {
+          if (!parentAfterAdd.children) parentAfterAdd.children = []
+          parentAfterAdd.children.push(node)
+        } else {
+          console.warn(`Failed to find or create parent folder ${parentId}. Adding to root instead.`)
+          tree.push(node)
+        }
       }
     } else {
       tree.push(node)

From 6d8649e0318e2b611d85d7db79c9da26bdb09fe2 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 2 Jul 2025 13:15:44 +0900
Subject: [PATCH 42/64] Add: Enables restoring commands and folders from daily
 backup.

---
 package.json                           |   1 +
 src/components/option/ImportExport.tsx | 206 ++++++++++++++++++-------
 src/components/ui/radio-group.tsx      |  45 ++++++
 src/services/storage/backupManager.ts  |  43 +++++-
 src/services/storage/commandStorage.ts |  92 ++++-------
 src/services/storageUsage.ts           |   4 +-
 yarn.lock                              |  21 +++
 7 files changed, 288 insertions(+), 124 deletions(-)
 create mode 100644 src/components/ui/radio-group.tsx

diff --git a/package.json b/package.json
index fe575ba1..062b99e6 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@radix-ui/react-menubar": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-toggle": "^1.1.6",
diff --git a/src/components/option/ImportExport.tsx b/src/components/option/ImportExport.tsx
index b5a9f58c..9aafef09 100644
--- a/src/components/option/ImportExport.tsx
+++ b/src/components/option/ImportExport.tsx
@@ -3,11 +3,13 @@ import { Dialog } from './Dialog'
 import type { UserSettings } from '@/types'
 
 import { Storage, STORAGE_KEY, CommandMigrationManager } from '@/services/storage'
+import { DailyBackupManager } from '@/services/storage/backupManager'
 import { Settings, migrate } from '@/services/settings'
 import { isBase64, isUrl } from '@/lib/utils'
 import { APP_ID } from '@/const'
 import { t } from '@/services/i18n'
 import { Download, Upload, Undo2, RotateCcw } from 'lucide-react'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 
 import css from './Option.module.css'
 
@@ -26,8 +28,15 @@ export function ImportExport() {
   const [importDialog, setImportDialog] = useState(false)
   const [restoreDialog, setRestoreDialog] = useState(false)
   const [importJson, setImportJson] = useState<UserSettings>()
-  const [backupInfo, setBackupInfo] = useState<{ timestamp: number; commandCount: number } | null>(null)
-  const [backupStatus, setBackupStatus] = useState<'checking' | 'available' | 'none'>('checking')
+  const [backupData, setBackupData] = useState<{
+    legacy: { status: 'checking' | 'available' | 'none'; info: { timestamp: number; commandCount: number; folderCount?: number } | null }
+    daily: { status: 'checking' | 'available' | 'none'; info: { timestamp: number; commandCount: number; folderCount?: number } | null }
+    weekly?: { status: 'checking' | 'available' | 'none'; info: { timestamp: number; commandCount: number; folderCount?: number } | null }
+  }>({
+    legacy: { status: 'checking', info: null },
+    daily: { status: 'checking', info: null },
+  })
+  const [selectedBackupType, setSelectedBackupType] = useState<'legacy' | 'daily' | 'weekly'>('legacy')
   const inputFile = useRef<HTMLInputElement>(null)
 
   // Check backup status on initialization
@@ -37,17 +46,56 @@ export function ImportExport() {
 
   const checkBackupStatus = async () => {
     try {
-      const result = await chrome.storage.local.get('legacy_commands_backup')
-      const backup = result.legacy_commands_backup
+      const newBackupData = { ...backupData }
       
-      if (backup && backup.commands && Array.isArray(backup.commands)) {
-        setBackupStatus('available')
+      // Check legacy backup
+      const legacyResult = await chrome.storage.local.get('legacy_commands_backup')
+      const legacyBackup = legacyResult.legacy_commands_backup
+      
+      if (legacyBackup && legacyBackup.commands && Array.isArray(legacyBackup.commands)) {
+        newBackupData.legacy = {
+          status: 'available',
+          info: {
+            timestamp: legacyBackup.timestamp,
+            commandCount: legacyBackup.commands.length,
+            folderCount: Array.isArray(legacyBackup.folders) ? legacyBackup.folders.length : 0
+          }
+        }
+      } else {
+        newBackupData.legacy = { status: 'none', info: null }
+      }
+
+      // Check daily backup
+      const dailyBackupManager = new DailyBackupManager()
+      const dailyBackup = await dailyBackupManager.getLastBackupData()
+      
+      if (dailyBackup && dailyBackup.commands && Array.isArray(dailyBackup.commands)) {
+        newBackupData.daily = {
+          status: 'available',
+          info: {
+            timestamp: dailyBackup.timestamp,
+            commandCount: dailyBackup.commands.length,
+            folderCount: Array.isArray(dailyBackup.folders) ? dailyBackup.folders.length : 0
+          }
+        }
       } else {
-        setBackupStatus('none')
+        newBackupData.daily = { status: 'none', info: null }
+      }
+      
+      setBackupData(newBackupData)
+      
+      // Set default selection to first available backup
+      if (newBackupData.legacy.status === 'available') {
+        setSelectedBackupType('legacy')
+      } else if (newBackupData.daily.status === 'available') {
+        setSelectedBackupType('daily')
       }
     } catch (error) {
       console.error('Failed to check backup status:', error)
-      setBackupStatus('none')
+      setBackupData({
+        legacy: { status: 'none', info: null },
+        daily: { status: 'none', info: null },
+      })
     }
   }
 
@@ -123,49 +171,67 @@ export function ImportExport() {
   }
 
   const handleRestore = async () => {
-    if (backupStatus !== 'available') {
+    const hasAnyBackup = Object.values(backupData).some(backup => backup.status === 'available')
+    
+    if (!hasAnyBackup) {
+      alert('No backup data found.')
       return
     }
     
-    // Get backup information
-    try {
-      const result = await chrome.storage.local.get('legacy_commands_backup')
-      const backup = result.legacy_commands_backup
-      
-      if (backup && backup.commands && Array.isArray(backup.commands)) {
-        setBackupInfo({
-          timestamp: backup.timestamp,
-          commandCount: backup.commands.length
-        })
-        setRestoreDialog(true)
-      } else {
-        // Handle case when backup doesn't exist
-        setBackupStatus('none')
-        alert('No backup data found. Backup is only available after migrating from legacy storage format.')
-      }
-    } catch (error) {
-      console.error('Failed to check backup:', error)
-      alert('Failed to check backup data.')
-    }
+    setRestoreDialog(true)
   }
 
   const handleRestoreClose = (ret: boolean) => {
-    if (ret && backupInfo != null) {
+    if (ret) {
       ; (async () => {
-        const migrationManager = new CommandMigrationManager()
-        const backupCommands = await migrationManager.restoreFromBackup()
-        
-        if (backupCommands.length > 0) {
-          // Save restored commands
-          await Storage.setCommands(backupCommands)
-          location.reload()
-        } else {
+        try {
+          let backupCommands: any[] = []
+          
+          if (selectedBackupType === 'legacy') {
+            // Restore from legacy backup
+            const migrationManager = new CommandMigrationManager()
+            const legacyData = await migrationManager.restoreFromBackupWithFolders()
+            backupCommands = legacyData.commands
+            
+            if (legacyData.folders && legacyData.folders.length > 0) {
+              // Restore folders to settings
+              const currentSettings = await Settings.get()
+              await Settings.set({
+                ...currentSettings,
+                folders: legacyData.folders,
+              })
+            }
+          } else if (selectedBackupType === 'daily') {
+            // Restore from daily backup
+            const dailyBackupManager = new DailyBackupManager()
+            const dailyData = await dailyBackupManager.restoreFromDailyBackup()
+            backupCommands = dailyData.commands
+            
+            if (dailyData.folders && dailyData.folders.length > 0) {
+              // Restore folders to settings
+              const currentSettings = await Settings.get()
+              await Settings.set({
+                ...currentSettings,
+                folders: dailyData.folders,
+              })
+            }
+          }
+          // Future: handle weekly backup type
+          
+          if (backupCommands.length > 0) {
+            // Save restored commands
+            await Storage.setCommands(backupCommands)
+            location.reload()
+          } else {
+            alert('Failed to restore from backup.')
+          }
+        } catch (error) {
+          console.error('Failed to restore from backup:', error)
           alert('Failed to restore from backup.')
         }
       })()
     }
     setRestoreDialog(false)
-    setBackupInfo(null)
   }
 
   return (
@@ -192,17 +258,17 @@ export function ImportExport() {
           onClick={handleRestore} 
           className={css.menuButton} 
           type="button"
-          disabled={backupStatus !== 'available'}
+          disabled={!Object.values(backupData).some(backup => backup.status === 'available')}
           title={
-            backupStatus === 'checking' ? 'Checking backup...' :
-            backupStatus === 'none' ? 'No backup available' :
+            Object.values(backupData).every(backup => backup.status === 'checking') ? 'Checking backups...' :
+            !Object.values(backupData).some(backup => backup.status === 'available') ? 'No backup available' :
             'Restore commands from backup'
           }
         >
           <RotateCcw size={18} className="mr-2 stroke-gray-600" />
           Restore from Backup
-          {backupStatus === 'checking' && <span className="ml-2 text-xs opacity-50">...</span>}
-          {backupStatus === 'none' && <span className="ml-2 text-xs opacity-50">(N/A)</span>}
+          {Object.values(backupData).every(backup => backup.status === 'checking') && <span className="ml-2 text-xs opacity-50">...</span>}
+          {!Object.values(backupData).some(backup => backup.status === 'available') && <span className="ml-2 text-xs opacity-50">(N/A)</span>}
         </button>
         <button onClick={handleReset} className={css.menuButton} type="button">
           <Undo2 size={18} className="mr-2 stroke-gray-600" />
@@ -244,22 +310,52 @@ export function ImportExport() {
         open={restoreDialog}
         onClose={handleRestoreClose}
         title={'Restore from Backup'}
-        description={() => (
-          backupInfo ? (
+        description={() => {
+          const availableBackups = Object.entries(backupData).filter(([, backup]) => backup.status === 'available')
+          
+          if (availableBackups.length === 0) {
+            return <span>No backup data available.</span>
+          }
+          
+          const getBackupTypeLabel = (type: string) => {
+            switch (type) {
+              case 'legacy': return 'Legacy Migration'
+              case 'daily': return 'Daily Backup'
+              case 'weekly': return 'Weekly Backup'
+              default: return type
+            }
+          }
+          
+          return (
             <div>
-              <p>A backup from the legacy storage migration was found:</p>
-              <ul className="mt-2 ml-4 list-disc">
-                <li><strong>Created:</strong> {new Date(backupInfo.timestamp).toLocaleString()}</li>
-                <li><strong>Commands:</strong> {backupInfo.commandCount} items</li>
-              </ul>
-              <p className="mt-2 text-sm text-yellow-600">
+              <p className="mb-4">Select a backup to restore:</p>
+              <RadioGroup value={selectedBackupType} onValueChange={(value) => setSelectedBackupType(value as typeof selectedBackupType)}>
+                {availableBackups.map(([type, backup]) => (
+                  <div key={type} className="flex items-start space-x-3">
+                    <RadioGroupItem value={type} className="mt-1" />
+                    <div className="flex-1">
+                      <label className="text-sm font-medium cursor-pointer" onClick={() => setSelectedBackupType(type as typeof selectedBackupType)}>
+                        {getBackupTypeLabel(type)}
+                      </label>
+                      {backup.info && (
+                        <div className="text-xs text-gray-600 mt-1">
+                          <div>Created: {new Date(backup.info.timestamp).toLocaleString()}</div>
+                          <div>Commands: {backup.info.commandCount} items</div>
+                          {backup.info.folderCount !== undefined && (
+                            <div>Folders: {backup.info.folderCount} items</div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </RadioGroup>
+              <p className="mt-4 text-sm text-yellow-600">
                 <strong>Warning:</strong> This will replace all current commands with the backup data.
               </p>
             </div>
-          ) : (
-            <span>Loading backup information...</span>
           )
-        )}
+        }}
         okText="Restore"
       />
     </>
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
new file mode 100644
index 00000000..e9af867d
--- /dev/null
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/src/services/storage/backupManager.ts b/src/services/storage/backupManager.ts
index 58fd2da3..14913dda 100644
--- a/src/services/storage/backupManager.ts
+++ b/src/services/storage/backupManager.ts
@@ -1,5 +1,5 @@
-import { Command } from '@/types'
-import { LOCAL_STORAGE_KEY } from './index'
+import { Command, CommandFolder } from '@/types'
+import { LOCAL_STORAGE_KEY, BaseStorage, STORAGE_KEY } from './index'
 import { HybridCommandStorage } from './commandStorage'
 
 // Daily backup management class
@@ -28,8 +28,12 @@ export class DailyBackupManager {
       const hybridStorage = new HybridCommandStorage()
       const commands = await hybridStorage.loadCommands()
 
-      if (commands.length === 0) {
-        console.debug('No commands to backup')
+      // Get folders from settings directly from storage to avoid circular dependency
+      const userSettings = await BaseStorage.get(STORAGE_KEY.USER) as any
+      const folders = userSettings?.folders || []
+
+      if (commands.length === 0 && folders.length === 0) {
+        console.debug('No commands or folders to backup')
         return
       }
 
@@ -37,6 +41,7 @@ export class DailyBackupManager {
         version: 'daily',
         timestamp: Date.now(),
         commands: commands,
+        folders: folders,
       }
 
       await chrome.storage.local.set({
@@ -44,7 +49,7 @@ export class DailyBackupManager {
       })
 
       console.debug(
-        `Daily backup completed: ${commands.length} commands backed up`,
+        `Daily backup completed: ${commands.length} commands and ${folders.length} folders backed up`,
       )
     } catch (error) {
       console.error('Failed to perform daily backup:', error)
@@ -55,13 +60,19 @@ export class DailyBackupManager {
     version: string
     timestamp: number
     commands: Command[]
+    folders?: CommandFolder[]
   } | null> {
     try {
       const result = await chrome.storage.local.get(this.DAILY_BACKUP_KEY)
       const backup = result[this.DAILY_BACKUP_KEY]
 
       if (backup && backup.timestamp && Array.isArray(backup.commands)) {
-        return backup
+        return {
+          version: backup.version,
+          timestamp: backup.timestamp,
+          commands: backup.commands,
+          folders: Array.isArray(backup.folders) ? backup.folders : [],
+        }
       }
       return null
     } catch (error) {
@@ -70,6 +81,26 @@ export class DailyBackupManager {
     }
   }
 
+  async restoreFromDailyBackup(): Promise<{
+    commands: Command[]
+    folders: CommandFolder[]
+  }> {
+    try {
+      const backup = await this.getLastBackupData()
+      if (!backup) {
+        return { commands: [], folders: [] }
+      }
+
+      return {
+        commands: backup.commands || [],
+        folders: backup.folders || [],
+      }
+    } catch (error) {
+      console.error('Failed to restore from daily backup:', error)
+      return { commands: [], folders: [] }
+    }
+  }
+
   async getLastBackupDate(): Promise<Date | null> {
     const backup = await this.getLastBackupData()
     return backup ? new Date(backup.timestamp) : null
diff --git a/src/services/storage/commandStorage.ts b/src/services/storage/commandStorage.ts
index 542ac950..7db24c40 100644
--- a/src/services/storage/commandStorage.ts
+++ b/src/services/storage/commandStorage.ts
@@ -306,10 +306,15 @@ export class CommandMigrationManager {
   }
 
   private async backupCommands(commands: Command[]): Promise<void> {
+    // Get folders from settings directly from storage to avoid circular dependency
+    const userSettings = await BaseStorage.get(STORAGE_KEY.USER) as any
+    const folders = userSettings?.folders || []
+    
     const backup = {
       version: 'legacy',
       timestamp: Date.now(),
       commands: commands,
+      folders: folders,
     }
     await chrome.storage.local.set({
       [LOCAL_STORAGE_KEY.COMMANDS_BACKUP]: backup,
@@ -339,6 +344,32 @@ export class CommandMigrationManager {
       return []
     }
   }
+
+  /**
+   * Restore both commands and folders from legacy backup
+   */
+  async restoreFromBackupWithFolders(): Promise<{ commands: Command[]; folders: import('@/types').CommandFolder[] }> {
+    try {
+      const result = await chrome.storage.local.get(
+        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
+      )
+      const backup = result[LOCAL_STORAGE_KEY.COMMANDS_BACKUP]
+
+      if (backup && backup.commands && Array.isArray(backup.commands)) {
+        console.info(
+          `Restoring ${backup.commands.length} commands and ${(backup.folders || []).length} folders from backup (created at ${new Date(backup.timestamp).toLocaleString()})`,
+        )
+        return {
+          commands: backup.commands,
+          folders: Array.isArray(backup.folders) ? backup.folders : [],
+        }
+      }
+      return { commands: [], folders: [] }
+    } catch (error) {
+      console.error('Failed to restore from backup:', error)
+      return { commands: [], folders: [] }
+    }
+  }
 }
 
 // Hybrid command storage class
@@ -473,68 +504,7 @@ export class HybridCommandStorage {
   }
 }
 
-const getIndicesToRemove = (fromLen: number, toLen: number): number[] => {
-  if (toLen >= fromLen) {
-    return []
-  }
-  const removeCount = fromLen - toLen
-  const startIndex = toLen
-  const indicesToRemove = []
-  for (let i = 0; i < removeCount; i++) {
-    indicesToRemove.push(startIndex + i)
-  }
-  return indicesToRemove
-}
-
 export const CommandStorage = {
-  /**
-   * Get all commands from chrome sync storage (legacy format).
-   *
-   * @returns {Promise<Command[]>} commands
-   * @throws {chrome.runtime.LastError} if error occurred
-   */
-  getCommandsOld: async (): Promise<Command[]> => {
-    return await loadLegacyCommandData({
-      returnDefaultOnEmpty: true,
-      throwOnError: true,
-    })
-  },
-
-  /**
-   * Set all commands to chrome sync storage.
-   *
-   * @returns {Promise<boolean>} true if success's
-   * @throws {chrome.runtime.LastError} if error occurred
-   */
-  setCommandsOld: async (
-    commands: Command[],
-  ): Promise<boolean | chrome.runtime.LastError> => {
-    const count = commands.length
-    const preCount = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
-
-    // Update commands and count.
-    const data = commands.reduce(
-      (acc, cmd, i) => {
-        acc[`${CMD_PREFIX}${i}`] = cmd
-        return acc
-      },
-      {} as { [key: string]: Command },
-    )
-    await debouncedSyncSet({
-      ...data,
-      [STORAGE_KEY.COMMAND_COUNT]: commands.length,
-    })
-
-    // Remove surplus commands
-    if (preCount > count) {
-      const removeKeys = getIndicesToRemove(preCount, count).map(
-        (i) => `${CMD_PREFIX}${i}`,
-      )
-      await chrome.storage.sync.remove(removeKeys)
-    }
-    return true
-  },
-
   /**
    * Update commands to chrome sync storage.
    *
diff --git a/src/services/storageUsage.ts b/src/services/storageUsage.ts
index 5e4d2998..299be7b2 100644
--- a/src/services/storageUsage.ts
+++ b/src/services/storageUsage.ts
@@ -57,9 +57,9 @@ export const getStorageUsage = async (): Promise<StorageUsageData> => {
     const allLocalData = await chrome.storage.local.get(null)
 
     const localSystemKeys = Object.values(LOCAL_STORAGE_KEY).filter(
-      (key) => key !== LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
+      (key) => key !== LOCAL_STORAGE_KEY.COMMANDS_BACKUP && key !== LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP,
     ) as string[]
-    const localBackupKeys = [LOCAL_STORAGE_KEY.COMMANDS_BACKUP] as string[]
+    const localBackupKeys = [LOCAL_STORAGE_KEY.COMMANDS_BACKUP, LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP] as string[]
     const localCommandKeys = Object.keys(allLocalData || {}).filter((key) =>
       key.startsWith(CMD_PREFIX),
     )
diff --git a/yarn.lock b/yarn.lock
index 3187ef0c..97ed2132 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1113,6 +1113,22 @@
     "@radix-ui/react-context" "1.1.1"
     "@radix-ui/react-primitive" "2.0.2"
 
+"@radix-ui/react-radio-group@^1.3.7":
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.3.7.tgz#49f822d97c26c4745976108a301ba2e8545d8928"
+  integrity sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==
+  dependencies:
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-presence" "1.1.4"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-roving-focus" "1.1.10"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    "@radix-ui/react-use-previous" "1.1.1"
+    "@radix-ui/react-use-size" "1.1.1"
+
 "@radix-ui/react-roving-focus@1.1.10":
   version "1.1.10"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz#46030496d2a490c4979d29a7e1252465e51e4b0b"
@@ -1294,6 +1310,11 @@
   resolved "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz"
   integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==
 
+"@radix-ui/react-use-previous@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz#1a1ad5568973d24051ed0af687766f6c7cb9b5b5"
+  integrity sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==
+
 "@radix-ui/react-use-rect@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz"

From b44e3c34d93f6f014322698a22ac743a73aae2c7 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 2 Jul 2025 21:06:26 +0900
Subject: [PATCH 43/64] Update: Add reserved area to Storage Usage.

---
 src/components/option/Option.module.css |  6 ++---
 src/components/option/StorageUsage.tsx  | 23 +++++++++++++----
 src/services/storageUsage.ts            | 33 +++++++++++++++++--------
 3 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/src/components/option/Option.module.css b/src/components/option/Option.module.css
index ca16f674..e3217099 100644
--- a/src/components/option/Option.module.css
+++ b/src/components/option/Option.module.css
@@ -93,8 +93,8 @@
 .bgHatching {
   background-color: #fff;
   background-image: repeating-linear-gradient(45deg,
-      #9ca3af,
-      #9ca3af 1px,
-      transparent 2px,
+      #6b7280,
+      #6b7280 1px,
+      transparent 1px,
       transparent 4px);
 }
diff --git a/src/components/option/StorageUsage.tsx b/src/components/option/StorageUsage.tsx
index 6606a84e..28a9a8f1 100644
--- a/src/components/option/StorageUsage.tsx
+++ b/src/components/option/StorageUsage.tsx
@@ -59,9 +59,15 @@ const StorageUsage: React.FC = () => {
       color: '#9ca3af', // gray-400
       name: 'Commands',
     },
+    {
+      value: storageData.sync.reservedRemain,
+      color: '#fff',
+      name: 'Reserved',
+      className: s.bgHatching,
+    },
     {
       value: storageData.sync.freePercent,
-      color: '#e5e7eb', // gray-300
+      color: '#e5e7eb', // gray-200
       name: 'Free',
     },
   ]
@@ -79,12 +85,13 @@ const StorageUsage: React.FC = () => {
     },
     {
       value: storageData.local.backupPercent,
+      color: '#fff',
       name: 'Backup',
       className: s.bgHatching,
     },
     {
       value: storageData.local.freePercent,
-      color: '#e5e7eb', // gray-300
+      color: '#e5e7eb', // gray-200
       name: 'Free',
     },
   ]
@@ -102,7 +109,7 @@ const StorageUsage: React.FC = () => {
           backgroundColor="#f3f4f6"
           className="w-full"
         />
-        <div className="text-[11px] text-gray-600 mt-3 px-1 flex flex-wrap gap-2">
+        <div className="text-[11px] text-gray-600 mt-3 px-1 grid grid-cols-2 gap-2">
           <div className="flex items-center mr-2">
             <div className="w-3 h-3 bg-gray-600 rounded-sm mr-1"></div>
             <span>System: {storageData.sync.systemPercent}%</span>
@@ -112,7 +119,13 @@ const StorageUsage: React.FC = () => {
             <span>Commands: {storageData.sync.commandsPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-300 rounded-sm mr-1"></div>
+            <div
+              className={cn('w-3 h-3 border rounded-sm mr-1', s.bgHatching)}
+            ></div>
+            <span>Reserved: {storageData.sync.reservedPercent}%</span>
+          </div>
+          <div className="flex items-center">
+            <div className="w-3 h-3 bg-gray-200 rounded-sm mr-1"></div>
             <span>Free: {storageData.sync.freePercent}%</span>
           </div>
         </div>
@@ -144,7 +157,7 @@ const StorageUsage: React.FC = () => {
             <span>Backup: {storageData.local.backupPercent}%</span>
           </div>
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-gray-300 rounded-sm mr-1"></div>
+            <div className="w-3 h-3 bg-gray-200 rounded-sm mr-1"></div>
             <span>Free: {storageData.local.freePercent}%</span>
           </div>
         </div>
diff --git a/src/services/storageUsage.ts b/src/services/storageUsage.ts
index 299be7b2..5e26b260 100644
--- a/src/services/storageUsage.ts
+++ b/src/services/storageUsage.ts
@@ -7,7 +7,9 @@ export interface StorageUsageData {
     free: number
     system: number
     commands: number
+    reservedRemain: number
     systemPercent: number
+    reservedPercent: number
     commandsPercent: number
     freePercent: number
   }
@@ -57,9 +59,14 @@ export const getStorageUsage = async (): Promise<StorageUsageData> => {
     const allLocalData = await chrome.storage.local.get(null)
 
     const localSystemKeys = Object.values(LOCAL_STORAGE_KEY).filter(
-      (key) => key !== LOCAL_STORAGE_KEY.COMMANDS_BACKUP && key !== LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP,
+      (key) =>
+        key !== LOCAL_STORAGE_KEY.COMMANDS_BACKUP &&
+        key !== LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP,
     ) as string[]
-    const localBackupKeys = [LOCAL_STORAGE_KEY.COMMANDS_BACKUP, LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP] as string[]
+    const localBackupKeys = [
+      LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
+      LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP,
+    ] as string[]
     const localCommandKeys = Object.keys(allLocalData || {}).filter((key) =>
       key.startsWith(CMD_PREFIX),
     )
@@ -98,10 +105,12 @@ export const getStorageUsage = async (): Promise<StorageUsageData> => {
     })
 
     const syncLimitTotal = 100 * 1024 // 100KB
+    const reservedTotal = 40 * 1024 // 40KB reserved for system data
     const localLimitTotal = 10 * 1024 * 1024 // 10MB
 
     const syncUsed = syncTotalBytes
-    const syncFree = syncLimitTotal - syncUsed
+    const reservedRemain = reservedTotal - syncSystemBytes
+    const syncFree = syncLimitTotal - reservedRemain - syncUsed
     const localUsed = localTotalBytes
     const localFree = localLimitTotal - localUsed
 
@@ -111,14 +120,18 @@ export const getStorageUsage = async (): Promise<StorageUsageData> => {
         used: syncUsed,
         free: syncFree,
         system: syncSystemBytes,
+        reservedRemain,
         commands: syncCommandBytes,
         systemPercent: Number(
-          ((syncSystemBytes / syncLimitTotal) * 100).toFixed(1),
+          ((syncSystemBytes / syncLimitTotal) * 100).toFixed(0),
+        ),
+        reservedPercent: Number(
+          ((reservedRemain / syncLimitTotal) * 100).toFixed(0),
         ),
         commandsPercent: Number(
-          ((syncCommandBytes / syncLimitTotal) * 100).toFixed(1),
+          ((syncCommandBytes / syncLimitTotal) * 100).toFixed(0),
         ),
-        freePercent: Number(((syncFree / syncLimitTotal) * 100).toFixed(1)),
+        freePercent: Number(((syncFree / syncLimitTotal) * 100).toFixed(0)),
       },
       local: {
         total: localLimitTotal,
@@ -128,15 +141,15 @@ export const getStorageUsage = async (): Promise<StorageUsageData> => {
         backup: localBackupBytes,
         commands: localCommandBytes,
         systemPercent: Number(
-          ((localSystemBytes / localLimitTotal) * 100).toFixed(1),
+          ((localSystemBytes / localLimitTotal) * 100).toFixed(0),
         ),
         backupPercent: Number(
-          ((localBackupBytes / localLimitTotal) * 100).toFixed(1),
+          ((localBackupBytes / localLimitTotal) * 100).toFixed(0),
         ),
         commandsPercent: Number(
-          ((localCommandBytes / localLimitTotal) * 100).toFixed(1),
+          ((localCommandBytes / localLimitTotal) * 100).toFixed(0),
         ),
-        freePercent: Number(((localFree / localLimitTotal) * 100).toFixed(1)),
+        freePercent: Number(((localFree / localLimitTotal) * 100).toFixed(0)),
       },
     }
   } catch (error) {

From 7f863d90fdfaf3e9c3f5b0d2d198d2f550cf462c Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 2 Jul 2025 21:27:38 +0900
Subject: [PATCH 44/64] Update: Update usage real-time.

---
 src/components/option/StorageUsage.tsx     | 15 +++++++-------
 src/services/{ => storage}/storageUsage.ts | 24 ++++++++++++++++++++--
 2 files changed, 30 insertions(+), 9 deletions(-)
 rename src/services/{ => storage}/storageUsage.ts (88%)

diff --git a/src/components/option/StorageUsage.tsx b/src/components/option/StorageUsage.tsx
index 28a9a8f1..c9dbb804 100644
--- a/src/components/option/StorageUsage.tsx
+++ b/src/components/option/StorageUsage.tsx
@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from 'react'
 import MultiProgress from 'react-multi-progress'
-import { getStorageUsage, StorageUsageData } from '@/services/storageUsage'
+import {
+  subscribeStorageUsage,
+  StorageUsageData,
+} from '@/services/storage/storageUsage'
 import { cn } from '@/lib/utils'
 
 import s from './Option.module.css'
@@ -11,10 +14,9 @@ const StorageUsage: React.FC = () => {
   const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
-    const loadStorageUsage = async () => {
+    const loadStorageUsage = async (data: StorageUsageData) => {
       try {
         setLoading(true)
-        const data = await getStorageUsage()
         setStorageData(data)
         setError(null)
       } catch (err) {
@@ -24,8 +26,7 @@ const StorageUsage: React.FC = () => {
         setLoading(false)
       }
     }
-
-    loadStorageUsage()
+    return subscribeStorageUsage(loadStorageUsage)
   }, [])
 
   if (loading) {
@@ -101,7 +102,7 @@ const StorageUsage: React.FC = () => {
       <h3 className={s.menuLabel}>Storage Usage</h3>
       <div className="mb-6 w-full">
         <h4 className="text-sm text-gray-600 font-medium font-mono my-2">
-          Sync Storage
+          Sync Area
         </h4>
         <MultiProgress
           elements={syncElements}
@@ -133,7 +134,7 @@ const StorageUsage: React.FC = () => {
 
       <div className="w-full">
         <h4 className="text-sm text-gray-600 font-medium font-mono my-2">
-          Local Storage
+          Local Area
         </h4>
         <MultiProgress
           elements={localElements}
diff --git a/src/services/storageUsage.ts b/src/services/storage/storageUsage.ts
similarity index 88%
rename from src/services/storageUsage.ts
rename to src/services/storage/storageUsage.ts
index 5e26b260..148f049a 100644
--- a/src/services/storageUsage.ts
+++ b/src/services/storage/storageUsage.ts
@@ -1,4 +1,4 @@
-import { CMD_PREFIX, STORAGE_KEY, LOCAL_STORAGE_KEY } from './storage'
+import { CMD_PREFIX, STORAGE_KEY, LOCAL_STORAGE_KEY } from '@/services/storage'
 
 export interface StorageUsageData {
   sync: {
@@ -27,7 +27,7 @@ export interface StorageUsageData {
   }
 }
 
-export const getStorageUsage = async (): Promise<StorageUsageData> => {
+const getStorageUsage = async (): Promise<StorageUsageData> => {
   try {
     const syncSystemKeys = Object.values(STORAGE_KEY).map((key) => String(key))
     const syncSystemBytes = await new Promise<number>((resolve) => {
@@ -157,3 +157,23 @@ export const getStorageUsage = async (): Promise<StorageUsageData> => {
     throw error
   }
 }
+
+export const subscribeStorageUsage = (
+  callback: (data: StorageUsageData) => void,
+): (() => void) => {
+  const listener = async () => {
+    try {
+      const data = await getStorageUsage()
+      callback(data)
+    } catch (error) {
+      console.error('Failed to get storage usage:', error)
+    }
+  }
+
+  chrome.storage.onChanged.addListener(listener)
+  listener() // Initial call
+
+  return () => {
+    chrome.storage.onChanged.removeListener(listener)
+  }
+}

From 359d7fb17c002a09a8fed64585116e370c12862c Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Wed, 2 Jul 2025 21:34:25 +0900
Subject: [PATCH 45/64] Fix: DOM nesting error.

---
 src/components/option/ImportExport.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/option/ImportExport.tsx b/src/components/option/ImportExport.tsx
index 9aafef09..6295cd36 100644
--- a/src/components/option/ImportExport.tsx
+++ b/src/components/option/ImportExport.tsx
@@ -317,6 +317,17 @@ export function ImportExport() {
             return <span>No backup data available.</span>
           }
           
+          return <span>Select a backup to restore:</span>
+        }}
+        okText="Restore"
+      >
+        {(() => {
+          const availableBackups = Object.entries(backupData).filter(([, backup]) => backup.status === 'available')
+          
+          if (availableBackups.length === 0) {
+            return null
+          }
+          
           const getBackupTypeLabel = (type: string) => {
             switch (type) {
               case 'legacy': return 'Legacy Migration'
@@ -328,7 +339,6 @@ export function ImportExport() {
           
           return (
             <div>
-              <p className="mb-4">Select a backup to restore:</p>
               <RadioGroup value={selectedBackupType} onValueChange={(value) => setSelectedBackupType(value as typeof selectedBackupType)}>
                 {availableBackups.map(([type, backup]) => (
                   <div key={type} className="flex items-start space-x-3">
@@ -355,9 +365,8 @@ export function ImportExport() {
               </p>
             </div>
           )
-        }}
-        okText="Restore"
-      />
+        })()}
+      </Dialog>
     </>
   )
 }

From 805c9d95bdccf4860eae9c855f8c56ac2ad2f6dd Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 3 Jul 2025 12:40:37 +0900
Subject: [PATCH 46/64] Update: Add storage caching.

---
 src/hooks/useEnhancedSetting.ts        | 380 +++++++++++++++++++++++++
 src/hooks/useSetting.ts                |  10 +
 src/services/enhancedSettings.ts       | 307 ++++++++++++++++++++
 src/services/settingsCache.ts          | 243 ++++++++++++++++
 src/services/storage/commandStorage.ts |   2 +
 5 files changed, 942 insertions(+)
 create mode 100644 src/hooks/useEnhancedSetting.ts
 create mode 100644 src/services/enhancedSettings.ts
 create mode 100644 src/services/settingsCache.ts

diff --git a/src/hooks/useEnhancedSetting.ts b/src/hooks/useEnhancedSetting.ts
new file mode 100644
index 00000000..90bf729b
--- /dev/null
+++ b/src/hooks/useEnhancedSetting.ts
@@ -0,0 +1,380 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+import { enhancedSettings } from '../services/enhancedSettings'
+import {
+  settingsCache,
+  CacheSection,
+  CACHE_SECTIONS,
+} from '../services/settingsCache'
+import type {
+  SettingsType,
+  Command,
+  Star,
+  UserStats,
+  ShortcutSettings,
+  UserSettings,
+  PageRule,
+} from '@/types'
+import { isEmpty } from '@/lib/utils'
+import { INHERIT } from '@/const'
+
+// セクション別Hook戻り値の型定義
+type SectionData<T extends CacheSection> =
+  T extends typeof CACHE_SECTIONS.COMMANDS
+    ? Command[]
+    : T extends typeof CACHE_SECTIONS.USER_SETTINGS
+      ? UserSettings
+      : T extends typeof CACHE_SECTIONS.STARS
+        ? Star[]
+        : T extends typeof CACHE_SECTIONS.SHORTCUTS
+          ? ShortcutSettings
+          : T extends typeof CACHE_SECTIONS.USER_STATS
+            ? UserStats
+            : any
+
+// セクション別使用Hook
+function useSection<T extends CacheSection>(
+  section: T,
+  forceFresh = false,
+): {
+  data: SectionData<T> | null
+  loading: boolean
+  error: Error | null
+  refetch: () => Promise<void>
+} {
+  const [data, setData] = useState<SectionData<T> | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+  const mountedRef = useRef(true)
+
+  const loadData = useCallback(async () => {
+    if (!mountedRef.current) return
+
+    try {
+      setLoading(true)
+      setError(null)
+      const result = await enhancedSettings.getSection(section, forceFresh)
+
+      if (mountedRef.current) {
+        setData(result)
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err : new Error('Unknown error'))
+      }
+    } finally {
+      if (mountedRef.current) {
+        setLoading(false)
+      }
+    }
+  }, [section, forceFresh])
+
+  const refetch = useCallback(async () => {
+    await loadData()
+  }, [loadData])
+
+  // 初回ロード
+  useEffect(() => {
+    mountedRef.current = true
+    loadData()
+  }, [section, forceFresh])
+
+  // 変更監視の設定
+  useEffect(() => {
+    const handleChange = () => {
+      if (mountedRef.current) {
+        loadData()
+      }
+    }
+
+    settingsCache.subscribe(section, handleChange)
+
+    return () => {
+      settingsCache.unsubscribe(section, handleChange)
+    }
+  }, [section, loadData])
+
+  // クリーンアップ
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  return { data, loading, error, refetch }
+}
+
+// コマンド専用Hook
+export function useCommands(forceFresh = false) {
+  const { data, loading, error, refetch } = useSection(
+    CACHE_SECTIONS.COMMANDS,
+    forceFresh,
+  )
+
+  const updateCommand = useCallback(async (updatedCommand: Command) => {
+    await enhancedSettings.updateSection<Command[]>(
+      CACHE_SECTIONS.COMMANDS,
+      (commands) =>
+        commands.map((cmd) =>
+          cmd.id === updatedCommand.id ? updatedCommand : cmd,
+        ),
+    )
+  }, [])
+
+  const addCommand = useCallback(async (newCommand: Command) => {
+    await enhancedSettings.updateSection<Command[]>(
+      CACHE_SECTIONS.COMMANDS,
+      (commands) => [...commands, newCommand],
+    )
+  }, [])
+
+  const removeCommand = useCallback(async (commandId: string) => {
+    await enhancedSettings.updateSection<Command[]>(
+      CACHE_SECTIONS.COMMANDS,
+      (commands) => commands.filter((cmd) => cmd.id !== commandId),
+    )
+  }, [])
+
+  return {
+    commands: data || [],
+    loading,
+    error,
+    refetch,
+    updateCommand,
+    addCommand,
+    removeCommand,
+  }
+}
+
+// ユーザー設定専用Hook
+export function useUserSettings(forceFresh = false) {
+  const { data, loading, error, refetch } = useSection(
+    CACHE_SECTIONS.USER_SETTINGS,
+    forceFresh,
+  )
+
+  const updateUserSettings = useCallback(
+    async (updater: (settings: UserSettings) => UserSettings) => {
+      await enhancedSettings.updateSection<UserSettings>(
+        CACHE_SECTIONS.USER_SETTINGS,
+        updater,
+      )
+    },
+    [],
+  )
+
+  return {
+    userSettings: data || {},
+    loading,
+    error,
+    refetch,
+    updateUserSettings,
+  }
+}
+
+// 統合設定Hook（必要なセクションのみ指定）
+export function useEnhancedSetting(
+  sections: CacheSection[] = [
+    CACHE_SECTIONS.COMMANDS,
+    CACHE_SECTIONS.USER_SETTINGS,
+  ],
+  forceFresh = false,
+): {
+  settings: Partial<SettingsType>
+  pageRule: PageRule | undefined
+  loading: boolean
+  error: Error | null
+  refetch: () => Promise<void>
+  invalidateCache: (sectionsToInvalidate?: CacheSection[]) => void
+} {
+  const [settings, setSettings] = useState<Partial<SettingsType>>({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+  const mountedRef = useRef(true)
+  const sectionsRef = useRef(sections)
+
+  // sectionsが変更された場合の更新
+  useEffect(() => {
+    sectionsRef.current = sections
+  }, [sections])
+
+  const loadSettings = useCallback(async () => {
+    if (!mountedRef.current) return
+
+    try {
+      setLoading(true)
+      setError(null)
+
+      const data = await enhancedSettings.get({
+        sections: sectionsRef.current,
+        forceFresh,
+      })
+
+      if (mountedRef.current) {
+        setSettings(data)
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err : new Error('Unknown error'))
+      }
+    } finally {
+      if (mountedRef.current) {
+        setLoading(false)
+      }
+    }
+  }, [forceFresh])
+
+  const refetch = useCallback(async () => {
+    await loadSettings()
+  }, [loadSettings])
+
+  const invalidateCache = useCallback(
+    (sectionsToInvalidate?: CacheSection[]) => {
+      const targetSections = sectionsToInvalidate || sectionsRef.current
+      enhancedSettings.invalidateCache(targetSections)
+    },
+    [],
+  )
+
+  // sections を文字列化してメモ化（配列の参照変更による無限ループを防ぐ）
+  const sectionsKey = useMemo(() => sections.join(','), [sections])
+
+  // 初回ロード
+  useEffect(() => {
+    mountedRef.current = true
+    loadSettings()
+  }, [sectionsKey, forceFresh])
+
+  // 変更監視の設定
+  useEffect(() => {
+    const handleChange = () => {
+      if (mountedRef.current) {
+        loadSettings()
+      }
+    }
+
+    sections.forEach((section) => {
+      settingsCache.subscribe(section, handleChange)
+    })
+
+    return () => {
+      sections.forEach((section) => {
+        settingsCache.unsubscribe(section, handleChange)
+      })
+    }
+  }, [sectionsKey, loadSettings])
+
+  // クリーンアップ
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  // ページルール計算
+  let pageRule: PageRule | undefined
+  if (settings && typeof window !== 'undefined') {
+    pageRule = (settings.pageRules || [])
+      .filter((r) => !isEmpty(r.urlPattern))
+      .find((rule) => {
+        try {
+          const re = new RegExp(rule.urlPattern)
+          return window.location.href.match(re) != null
+        } catch {
+          return false
+        }
+      })
+
+    if (
+      pageRule != null &&
+      pageRule.popupPlacement !== INHERIT &&
+      settings.popupPlacement
+    ) {
+      settings.popupPlacement = pageRule.popupPlacement
+    }
+  }
+
+  return {
+    settings,
+    pageRule,
+    loading,
+    error,
+    refetch,
+    invalidateCache,
+  }
+}
+
+// 従来のuseSetting Hookとの互換性を保つためのHook
+export function useCompatibleSetting(): {
+  settings: SettingsType
+  pageRule: PageRule | undefined
+  iconUrls: Record<number | string, string>
+} {
+  const { settings, pageRule, loading } = useEnhancedSetting([
+    CACHE_SECTIONS.COMMANDS,
+    CACHE_SECTIONS.USER_SETTINGS,
+    CACHE_SECTIONS.STARS,
+    CACHE_SECTIONS.SHORTCUTS,
+    CACHE_SECTIONS.USER_STATS,
+    CACHE_SECTIONS.CACHES,
+  ])
+
+  // IconUrls計算（既存の実装に合わせる）
+  const iconUrls = (settings.commands || []).reduce(
+    (acc, cur) => ({ ...acc, [cur.id]: cur.iconUrl }),
+    {} as Record<number | string, string>,
+  )
+
+  // loadingが完了するまでemptySettingsを返す（既存の実装に合わせる）
+  if (loading || !settings.commands) {
+    return {
+      settings: {
+        settingVersion: '0.0.0',
+        commands: [],
+        folders: [],
+        pageRules: [],
+        style: 'horizontal' as any,
+        popupPlacement: {
+          side: 'top' as any,
+          align: 'start' as any,
+          alignOffset: 0,
+          sideOffset: 0,
+        },
+        linkCommand: {} as any,
+        userStyles: [],
+        startupMethod: { method: 'text_selection' as any },
+        stars: [],
+        commandExecutionCount: 0,
+        hasShownReviewRequest: false,
+        shortcuts: { shortcuts: [] },
+      },
+      pageRule: undefined,
+      iconUrls: {},
+    }
+  }
+
+  return {
+    settings: settings as SettingsType,
+    pageRule,
+    iconUrls,
+  }
+}
+
+// パフォーマンス監視Hook
+export function useSettingsPerformance() {
+  const [cacheStatus, setCacheStatus] = useState<Record<string, any>>({})
+
+  const updateCacheStatus = useCallback(() => {
+    setCacheStatus(enhancedSettings.getCacheStatus())
+  }, [])
+
+  useEffect(() => {
+    updateCacheStatus()
+    const interval = setInterval(updateCacheStatus, 1000)
+    return () => clearInterval(interval)
+  }, [updateCacheStatus])
+
+  return {
+    cacheStatus,
+    refreshStatus: updateCacheStatus,
+  }
+}
diff --git a/src/hooks/useSetting.ts b/src/hooks/useSetting.ts
index 4515b632..7bf99d4c 100644
--- a/src/hooks/useSetting.ts
+++ b/src/hooks/useSetting.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { Settings } from '../services/settings'
+import { useCompatibleSetting } from './useEnhancedSetting'
 import type { SettingsType, PageRule } from '@/types'
 import { isEmpty } from '@/lib/utils'
 import { STYLE, STARTUP_METHOD, ALIGN, SIDE, INHERIT } from '@/const'
@@ -34,7 +35,16 @@ const emptySettings: SettingsType = {
   shortcuts: { shortcuts: [] },
 }
 
+// Enhanced version flag - set to true to use the new cached implementation
+const USE_ENHANCED_SETTINGS = process.env.NODE_ENV !== 'production' // Enable in development
+
 export function useSetting(): useSettingReturn {
+  // Use enhanced implementation if enabled
+  if (USE_ENHANCED_SETTINGS) {
+    return useCompatibleSetting()
+  }
+
+  // Legacy implementation (original code)
   const [settings, setSettings] = useState<SettingsType>(emptySettings)
   const [iconUrls, setIconUrls] = useState<iconUrlMap>({})
 
diff --git a/src/services/enhancedSettings.ts b/src/services/enhancedSettings.ts
new file mode 100644
index 00000000..3ca06d0d
--- /dev/null
+++ b/src/services/enhancedSettings.ts
@@ -0,0 +1,307 @@
+import type {
+  SettingsType,
+  Command,
+  Star,
+  UserStats,
+  ShortcutSettings,
+  UserSettings,
+} from '@/types'
+import { settingsCache, CacheSection, CACHE_SECTIONS } from './settingsCache'
+import { Settings } from './settings'
+import { Storage, STORAGE_KEY, LOCAL_STORAGE_KEY } from './storage'
+import { OptionSettings } from '@/services/option/optionSettings'
+import DefaultSettings from '@/services/option/defaultSettings'
+import { OPTION_FOLDER } from '@/const'
+
+// 設定取得オプション
+interface GetSettingsOptions {
+  sections?: CacheSection[]
+  forceFresh?: boolean
+  excludeOptions?: boolean
+}
+
+// 部分設定型
+type PartialSettingsType = {
+  [K in keyof SettingsType]?: SettingsType[K]
+}
+
+// 強化された設定サービス
+export class EnhancedSettings {
+  constructor() {
+    // 従来のリスナー設定をキャッシュ無効化に対応
+    this.setupLegacyListeners()
+  }
+
+  // 統合設定取得（キャッシュ活用）
+  async get(options: GetSettingsOptions = {}): Promise<SettingsType> {
+    const {
+      sections = [
+        CACHE_SECTIONS.COMMANDS,
+        CACHE_SECTIONS.USER_SETTINGS,
+        CACHE_SECTIONS.STARS,
+        CACHE_SECTIONS.SHORTCUTS,
+        CACHE_SECTIONS.USER_STATS,
+      ],
+      forceFresh = false,
+      excludeOptions = false,
+    } = options
+
+    console.log('EnhancedSettings.get called with sections:', sections)
+
+    // 並列でセクション別取得
+    const results = await Promise.allSettled([
+      sections.includes(CACHE_SECTIONS.COMMANDS)
+        ? settingsCache.get<Command[]>(CACHE_SECTIONS.COMMANDS, forceFresh)
+        : Promise.resolve([]),
+      sections.includes(CACHE_SECTIONS.USER_SETTINGS)
+        ? settingsCache.get<UserSettings>(CACHE_SECTIONS.USER_SETTINGS, forceFresh)
+        : Promise.resolve(DefaultSettings as UserSettings),
+      sections.includes(CACHE_SECTIONS.STARS)
+        ? settingsCache.get<Star[]>(CACHE_SECTIONS.STARS, forceFresh)
+        : Promise.resolve([]),
+      sections.includes(CACHE_SECTIONS.SHORTCUTS)
+        ? settingsCache.get<ShortcutSettings>(CACHE_SECTIONS.SHORTCUTS, forceFresh)
+        : Promise.resolve({ shortcuts: [] }),
+      sections.includes(CACHE_SECTIONS.USER_STATS)
+        ? settingsCache.get<UserStats>(CACHE_SECTIONS.USER_STATS, forceFresh)
+        : Promise.resolve({
+            commandExecutionCount: 0,
+            hasShownReviewRequest: false,
+          }),
+    ])
+
+    // 結果の処理
+    const [
+      commandsResult,
+      userSettingsResult,
+      starsResult,
+      shortcutsResult,
+      userStatsResult,
+    ] = results
+
+    const commands =
+      commandsResult.status === 'fulfilled' ? commandsResult.value : []
+    const userSettings =
+      userSettingsResult.status === 'fulfilled' ? userSettingsResult.value : DefaultSettings as UserSettings
+    const stars = starsResult.status === 'fulfilled' ? starsResult.value : []
+    const shortcuts =
+      shortcutsResult.status === 'fulfilled'
+        ? shortcutsResult.value
+        : { shortcuts: [] }
+    const userStats =
+      userStatsResult.status === 'fulfilled'
+        ? userStatsResult.value
+        : { commandExecutionCount: 0, hasShownReviewRequest: false }
+
+    // 設定をマージ
+    let mergedSettings = this.mergeSettings({
+      commands,
+      userSettings,
+      stars,
+      shortcuts,
+      userStats,
+    })
+
+    // マイグレーション処理（コメントアウト - migrateメソッドが存在しない場合）
+    // mergedSettings = await Settings.migrate(mergedSettings)
+
+    // フォルダーのフィルタリング
+    mergedSettings.folders = mergedSettings.folders.filter(
+      (folder) => !!folder.title,
+    )
+
+    // オプション設定の処理
+    if (!excludeOptions) {
+      this.removeOptionSettings(mergedSettings)
+      mergedSettings.commands.push(...OptionSettings.commands)
+      mergedSettings.folders.push(OptionSettings.folder)
+    }
+
+    return mergedSettings
+  }
+
+  // 部分的な設定取得
+  async getSection<K extends CacheSection>(
+    section: K,
+    forceFresh = false,
+  ): Promise<
+    K extends 'commands'
+      ? Command[]
+      : K extends 'userSettings'
+        ? UserSettings
+        : K extends 'stars'
+          ? Star[]
+          : K extends 'shortcuts'
+            ? ShortcutSettings
+            : K extends 'userStats'
+              ? UserStats
+              : any
+  > {
+    return settingsCache.get(section, forceFresh)
+  }
+
+  // セクション別更新
+  async updateSection<T>(
+    section: CacheSection,
+    updater: (data: T) => T,
+  ): Promise<void> {
+    const currentData = await settingsCache.get<T>(section)
+    const updatedData = updater(currentData)
+
+    await this.saveToStorage(section, updatedData)
+    settingsCache.invalidate([section])
+  }
+
+  // ストレージへの保存
+  private async saveToStorage(section: CacheSection, data: any): Promise<void> {
+    switch (section) {
+      case CACHE_SECTIONS.COMMANDS:
+        await Storage.setCommands(data as Command[])
+        break
+
+      case CACHE_SECTIONS.USER_SETTINGS:
+        await Storage.set<UserSettings>(STORAGE_KEY.USER, data as UserSettings)
+        break
+
+      case CACHE_SECTIONS.STARS:
+        await Storage.set(LOCAL_STORAGE_KEY.STARS, data as Star[])
+        break
+
+      case CACHE_SECTIONS.SHORTCUTS:
+        await Storage.set<ShortcutSettings>(
+          STORAGE_KEY.SHORTCUTS,
+          data as ShortcutSettings,
+        )
+        break
+
+      case CACHE_SECTIONS.USER_STATS:
+        await Storage.set<UserStats>(STORAGE_KEY.USER_STATS, data as UserStats)
+        break
+
+      default:
+        throw new Error(`Cannot save section: ${section}`)
+    }
+  }
+
+  // 設定マージ
+  private mergeSettings(data: {
+    commands: Command[]
+    userSettings: UserSettings
+    stars: Star[]
+    shortcuts: ShortcutSettings
+    userStats: UserStats
+  }): SettingsType {
+    return {
+      ...data.userSettings,
+      commands: data.commands,
+      stars: data.stars,
+      shortcuts: data.shortcuts,
+      commandExecutionCount: data.userStats.commandExecutionCount,
+      hasShownReviewRequest: data.userStats.hasShownReviewRequest,
+    } as SettingsType
+  }
+
+  // オプション設定の削除
+  private removeOptionSettings(data: SettingsType): void {
+    data.commands = data.commands.filter(
+      (c) => c?.parentFolderId !== OPTION_FOLDER,
+    )
+    data.folders = data.folders.filter((f) => f.id !== OPTION_FOLDER)
+  }
+
+  // 変更監視
+  addChangedListener(
+    sections: CacheSection[],
+    callback: (data: PartialSettingsType) => void,
+  ): void {
+    sections.forEach((section) => {
+      settingsCache.subscribe(section, async () => {
+        try {
+          const data = await this.get({ sections })
+          callback(data)
+        } catch (error) {
+          console.error(
+            `Error in settings change listener for ${section}:`,
+            error,
+          )
+        }
+      })
+    })
+  }
+
+  // 変更監視解除
+  removeChangedListener(
+    sections: CacheSection[],
+    callback: () => void,
+  ): void {
+    sections.forEach((section) => {
+      settingsCache.unsubscribe(section, callback)
+    })
+  }
+
+  // キャッシュ無効化
+  invalidateCache(sections: CacheSection[]): void {
+    settingsCache.invalidate(sections)
+  }
+
+  // 全キャッシュ無効化
+  invalidateAllCache(): void {
+    settingsCache.invalidateAll()
+  }
+
+  // 従来の設定APIとの互換性保持
+  async getLegacy(excludeOptions = false): Promise<SettingsType> {
+    return this.get({ excludeOptions })
+  }
+
+  // 従来のset実装との互換性
+  async setLegacy(data: SettingsType, serviceWorker = false): Promise<boolean> {
+    return Settings.set(data, serviceWorker)
+  }
+
+  // 従来のupdate実装との互換性
+  async updateLegacy<T extends keyof SettingsType>(
+    key: T,
+    updater: (value: SettingsType[T]) => SettingsType[T],
+    serviceWorker = false,
+  ): Promise<boolean> {
+    return Settings.update(key, updater, serviceWorker)
+  }
+
+  // コマンド関連の操作
+  async addCommands(commands: Command[]): Promise<boolean> {
+    return Settings.addCommands(commands)
+  }
+
+  async updateCommands(commands: Command[]): Promise<boolean> {
+    return Settings.updateCommands(commands)
+  }
+
+  // 設定リセット
+  async reset(): Promise<void> {
+    await Settings.reset()
+    this.invalidateAllCache()
+  }
+
+  // キャッシュ関連
+  async getCaches() {
+    return settingsCache.get(CACHE_SECTIONS.CACHES)
+  }
+
+  // 従来リスナーの設定
+  private setupLegacyListeners(): void {
+    // 従来のSettings.addChangedListenerに対応
+    Settings.addChangedListener((_data: SettingsType) => {
+      // 全キャッシュを無効化（安全策）
+      this.invalidateAllCache()
+    })
+  }
+
+  // デバッグ用
+  getCacheStatus() {
+    return settingsCache.getCacheStatus()
+  }
+}
+
+// シングルトンインスタンス
+export const enhancedSettings = new EnhancedSettings()
diff --git a/src/services/settingsCache.ts b/src/services/settingsCache.ts
new file mode 100644
index 00000000..269c7515
--- /dev/null
+++ b/src/services/settingsCache.ts
@@ -0,0 +1,243 @@
+import { Storage, STORAGE_KEY, LOCAL_STORAGE_KEY } from './storage'
+import type {
+  UserStats,
+  ShortcutSettings,
+  UserSettings,
+} from '@/types'
+import { Settings } from './settings'
+
+// キャッシュセクション定数
+export const CACHE_SECTIONS = {
+  COMMANDS: 'commands',
+  USER_SETTINGS: 'userSettings',
+  STARS: 'stars',
+  SHORTCUTS: 'shortcuts',
+  USER_STATS: 'userStats',
+  CACHES: 'caches',
+} as const
+
+// キャッシュセクション定義
+export type CacheSection =
+  | typeof CACHE_SECTIONS.COMMANDS
+  | typeof CACHE_SECTIONS.USER_SETTINGS
+  | typeof CACHE_SECTIONS.STARS
+  | typeof CACHE_SECTIONS.SHORTCUTS
+  | typeof CACHE_SECTIONS.USER_STATS
+  | typeof CACHE_SECTIONS.CACHES
+
+// キャッシュエントリ
+interface CacheEntry<T> {
+  data: T
+  timestamp: number
+  version: string
+  ttl?: number
+}
+
+// バージョン管理
+class DataVersionManager {
+  private versions = new Map<CacheSection, string>()
+
+  generateVersion(section: CacheSection, data: any): string {
+    const dataHash = this.hashData(data)
+    const timestamp = Date.now()
+    return `${section}-${timestamp}-${dataHash}`
+  }
+
+  setVersion(section: CacheSection, version: string): void {
+    this.versions.set(section, version)
+  }
+
+  getVersion(section: CacheSection): string | undefined {
+    return this.versions.get(section)
+  }
+
+  validateVersion(section: CacheSection, version: string): boolean {
+    return this.versions.get(section) === version
+  }
+
+  private hashData(data: any): string {
+    const normalized = JSON.stringify(data, Object.keys(data || {}).sort())
+    let hash = 5381
+    for (let i = 0; i < normalized.length; i++) {
+      hash = (hash << 5) + hash + normalized.charCodeAt(i)
+      hash = hash & hash
+    }
+    return Math.abs(hash).toString(16).padStart(8, '0')
+  }
+}
+
+// 設定キャッシュマネージャー
+export class SettingsCacheManager {
+  private cache = new Map<CacheSection, CacheEntry<any>>()
+  private versionManager = new DataVersionManager()
+  private listeners = new Map<CacheSection, Set<() => void>>()
+  private readonly DEFAULT_TTL = 5 * 60 * 1000 // 5分
+  private storageListenerSetup = false
+
+  constructor() {
+    this.setupStorageListener()
+  }
+
+  // セクション別データ取得
+  async get<T>(section: CacheSection, forceFresh = false): Promise<T> {
+    if (!forceFresh && this.isValid(section)) {
+      console.log(`Cache hit for ${section}`)
+      return this.cache.get(section)!.data
+    }
+
+    console.log(`Loading ${section} from storage`)
+    const data = await this.loadFromStorage<T>(section)
+    this.setCache(section, data)
+    return data
+  }
+
+  // キャッシュ設定
+  private setCache<T>(section: CacheSection, data: T, ttl?: number): void {
+    const version = this.versionManager.generateVersion(section, data)
+    this.versionManager.setVersion(section, version)
+
+    this.cache.set(section, {
+      data,
+      timestamp: Date.now(),
+      version,
+      ttl: ttl || this.DEFAULT_TTL,
+    })
+  }
+
+  // キャッシュ有効性確認
+  private isValid(section: CacheSection): boolean {
+    const entry = this.cache.get(section)
+    if (!entry) return false
+
+    const now = Date.now()
+    const isExpired = entry.ttl && now - entry.timestamp > entry.ttl
+
+    return !isExpired
+  }
+
+  // セクション別無効化
+  invalidate(sections: CacheSection[]): void {
+    console.log(`Invalidating cache for sections: ${sections.join(', ')}`)
+    sections.forEach((section) => {
+      this.cache.delete(section)
+      this.versionManager.setVersion(section, '')
+      this.notifyListeners(section)
+    })
+  }
+
+  // 全キャッシュ無効化
+  invalidateAll(): void {
+    const allSections = Array.from(this.cache.keys())
+    this.invalidate(allSections)
+  }
+
+  // 変更監視登録
+  subscribe(section: CacheSection, callback: () => void): void {
+    if (!this.listeners.has(section)) {
+      this.listeners.set(section, new Set())
+    }
+    this.listeners.get(section)!.add(callback)
+  }
+
+  // 変更監視解除
+  unsubscribe(section: CacheSection, callback: () => void): void {
+    const sectionListeners = this.listeners.get(section)
+    if (sectionListeners) {
+      sectionListeners.delete(callback)
+      if (sectionListeners.size === 0) {
+        this.listeners.delete(section)
+      }
+    }
+  }
+
+  // リスナー通知
+  private notifyListeners(section: CacheSection): void {
+    const sectionListeners = this.listeners.get(section)
+    if (sectionListeners) {
+      sectionListeners.forEach((callback) => {
+        try {
+          callback()
+        } catch (error) {
+          console.error(`Error in cache listener for ${section}:`, error)
+        }
+      })
+    }
+  }
+
+  // ストレージからのデータ読み込み
+  private async loadFromStorage<T>(section: CacheSection): Promise<T> {
+    switch (section) {
+      case CACHE_SECTIONS.COMMANDS:
+        return (await Storage.getCommands()) as T
+
+      case CACHE_SECTIONS.USER_SETTINGS:
+        return (await Storage.get<UserSettings>(STORAGE_KEY.USER)) as T
+
+      case CACHE_SECTIONS.STARS:
+        return (await Storage.get(LOCAL_STORAGE_KEY.STARS)) as T
+
+      case CACHE_SECTIONS.SHORTCUTS:
+        return (await Storage.get<ShortcutSettings>(STORAGE_KEY.SHORTCUTS)) as T
+
+      case CACHE_SECTIONS.USER_STATS:
+        return (await Storage.get<UserStats>(STORAGE_KEY.USER_STATS)) as T
+
+      case CACHE_SECTIONS.CACHES:
+        return (await Settings.getCaches()) as T
+
+      default:
+        throw new Error(`Unknown cache section: ${section}`)
+    }
+  }
+
+  // ストレージ変更監視設定
+  private setupStorageListener(): void {
+    if (this.storageListenerSetup) return
+
+    // Chrome storage変更監視
+    chrome.storage.onChanged.addListener((changes, areaName) => {
+      console.log(`Storage changed in ${areaName}:`, Object.keys(changes))
+
+      const sectionsToInvalidate: CacheSection[] = []
+
+      for (const key of Object.keys(changes)) {
+        if (key === STORAGE_KEY.USER.toString()) {
+          sectionsToInvalidate.push(CACHE_SECTIONS.USER_SETTINGS)
+        } else if (key === STORAGE_KEY.USER_STATS.toString()) {
+          sectionsToInvalidate.push(CACHE_SECTIONS.USER_STATS)
+        } else if (key === STORAGE_KEY.SHORTCUTS.toString()) {
+          sectionsToInvalidate.push(CACHE_SECTIONS.SHORTCUTS)
+        } else if (key === LOCAL_STORAGE_KEY.STARS) {
+          sectionsToInvalidate.push(CACHE_SECTIONS.STARS)
+        } else if (key === LOCAL_STORAGE_KEY.CACHES) {
+          sectionsToInvalidate.push(CACHE_SECTIONS.CACHES)
+        } else if (key.startsWith('cmd-')) {
+          sectionsToInvalidate.push(CACHE_SECTIONS.COMMANDS)
+        }
+      }
+
+      if (sectionsToInvalidate.length > 0) {
+        this.invalidate([...new Set(sectionsToInvalidate)])
+      }
+    })
+
+    this.storageListenerSetup = true
+  }
+
+  // デバッグ用：キャッシュ状態確認
+  getCacheStatus(): Record<CacheSection, { cached: boolean; age: number }> {
+    const status: Record<string, { cached: boolean; age: number }> = {}
+
+    for (const [section, entry] of this.cache.entries()) {
+      status[section] = {
+        cached: true,
+        age: Date.now() - entry.timestamp,
+      }
+    }
+
+    return status as Record<CacheSection, { cached: boolean; age: number }>
+  }
+}
+
+// シングルトンインスタンス
+export const settingsCache = new SettingsCacheManager()
diff --git a/src/services/storage/commandStorage.ts b/src/services/storage/commandStorage.ts
index 7db24c40..617d30d1 100644
--- a/src/services/storage/commandStorage.ts
+++ b/src/services/storage/commandStorage.ts
@@ -517,6 +517,8 @@ export const CommandStorage = {
   ): Promise<boolean | chrome.runtime.LastError> => {
     const current = await hybridStorage.loadCommands()
 
+    // TODO: use metadate
+
     // If update first time, set DefaultCommands.
     const count = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
     if (count === DEFAULT_COUNT) {

From 3dbc3b02c5d0f5493b0a57465bfbcd2258c1118f Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 3 Jul 2025 12:40:50 +0900
Subject: [PATCH 47/64] Update: Add icons.

---
 src/components/option/StorageUsage.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/option/StorageUsage.tsx b/src/components/option/StorageUsage.tsx
index c9dbb804..1c633bd1 100644
--- a/src/components/option/StorageUsage.tsx
+++ b/src/components/option/StorageUsage.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import MultiProgress from 'react-multi-progress'
+import { Cloud, Monitor } from 'lucide-react'
 import {
   subscribeStorageUsage,
   StorageUsageData,
@@ -102,6 +103,7 @@ const StorageUsage: React.FC = () => {
       <h3 className={s.menuLabel}>Storage Usage</h3>
       <div className="mb-6 w-full">
         <h4 className="text-sm text-gray-600 font-medium font-mono my-2">
+          <Cloud className="inline mr-2 stroke-gray-500" size={17} />
           Sync Area
         </h4>
         <MultiProgress
@@ -134,6 +136,7 @@ const StorageUsage: React.FC = () => {
 
       <div className="w-full">
         <h4 className="text-sm text-gray-600 font-medium font-mono my-2">
+          <Monitor className="inline mr-2 stroke-gray-500" size={17} />
           Local Area
         </h4>
         <MultiProgress

From 53bda793511e9f7424b06dcdd03639588dcded8d Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 3 Jul 2025 15:23:08 +0900
Subject: [PATCH 48/64] Fix: Share emptySettings.

---
 src/hooks/useEnhancedSetting.ts | 22 ++--------------------
 src/hooks/useSetting.ts         |  2 +-
 2 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/src/hooks/useEnhancedSetting.ts b/src/hooks/useEnhancedSetting.ts
index 90bf729b..8332f925 100644
--- a/src/hooks/useEnhancedSetting.ts
+++ b/src/hooks/useEnhancedSetting.ts
@@ -16,6 +16,7 @@ import type {
 } from '@/types'
 import { isEmpty } from '@/lib/utils'
 import { INHERIT } from '@/const'
+import { emptySettings } from './useSetting'
 
 // セクション別Hook戻り値の型定義
 type SectionData<T extends CacheSection> =
@@ -327,26 +328,7 @@ export function useCompatibleSetting(): {
   // loadingが完了するまでemptySettingsを返す（既存の実装に合わせる）
   if (loading || !settings.commands) {
     return {
-      settings: {
-        settingVersion: '0.0.0',
-        commands: [],
-        folders: [],
-        pageRules: [],
-        style: 'horizontal' as any,
-        popupPlacement: {
-          side: 'top' as any,
-          align: 'start' as any,
-          alignOffset: 0,
-          sideOffset: 0,
-        },
-        linkCommand: {} as any,
-        userStyles: [],
-        startupMethod: { method: 'text_selection' as any },
-        stars: [],
-        commandExecutionCount: 0,
-        hasShownReviewRequest: false,
-        shortcuts: { shortcuts: [] },
-      },
+      settings: emptySettings,
       pageRule: undefined,
       iconUrls: {},
     }
diff --git a/src/hooks/useSetting.ts b/src/hooks/useSetting.ts
index 7bf99d4c..c1d3d9fc 100644
--- a/src/hooks/useSetting.ts
+++ b/src/hooks/useSetting.ts
@@ -14,7 +14,7 @@ type useSettingReturn = {
   iconUrls: iconUrlMap
 }
 
-const emptySettings: SettingsType = {
+export const emptySettings: SettingsType = {
   settingVersion: '0.0.0',
   commands: [],
   folders: [],

From e9735d28dcc7cbe0e3fe143ac008f44929cba3e9 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 3 Jul 2025 21:03:06 +0900
Subject: [PATCH 49/64] Update: Use new hooks.

---
 src/components/Popup.tsx                     | 30 ++++++++++----------
 src/components/SelectAnchor.tsx              |  6 ++--
 src/components/commandHub/DownloadButton.tsx |  5 ++--
 src/components/commandHub/MyCommands.tsx     |  4 +--
 src/components/commandHub/StarButton.tsx     | 11 ++++---
 src/components/menu/Menu.tsx                 | 10 +++----
 src/components/result/ResultPopup.tsx        |  8 +++---
 src/hooks/useDetectLinkCommand.ts            | 30 ++++++++++----------
 src/hooks/useDetectStartup.ts                | 10 +++----
 src/hooks/useEnhancedSetting.ts              |  7 +++--
 10 files changed, 61 insertions(+), 60 deletions(-)

diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index 0995348d..1a0aa803 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, createContext, forwardRef } from 'react'
 import { Popover, PopoverContent, PopoverAnchor } from '@/components/ui/popover'
 import { Menu } from '@/components/menu/Menu'
-import { useSetting } from '@/hooks/useSetting'
+import { useUserSettings } from '@/hooks/useEnhancedSetting'
 import { useDetectStartup } from '@/hooks/useDetectStartup'
 import { useTabCommandReceiver } from '@/hooks/useTabCommandReceiver'
 import { hexToHsl, isMac, onHover, cn } from '@/lib/utils'
@@ -27,7 +27,7 @@ export const popupContext = createContext<ContextType>({} as ContextType)
 export const Popup = forwardRef<HTMLDivElement, PopupProps>(
   (props: PopupProps, ref) => {
     useTabCommandReceiver()
-    const { settings } = useSetting()
+    const { userSettings } = useUserSettings()
     const [inTransition, setInTransition] = useState(false)
     const [shouldRender, setShouldRender] = useState(false)
     const [isHover, setIsHover] = useState(false)
@@ -36,15 +36,15 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(
       isHover,
     })
     const isPreview = props.isPreview === true
-    const placement = settings.popupPlacement
-    const side = isPreview ? SIDE.bottom : (placement.side ?? SIDE.top)
-    const align = isPreview ? ALIGN.center : (placement.align ?? ALIGN.start)
-    const sideOffset = isPreview ? 0 : (placement.sideOffset ?? 0)
-    const alignOffset = isPreview ? 0 : (placement.alignOffset ?? 0)
+    const placement = userSettings?.popupPlacement
+    const side = isPreview ? SIDE.bottom : (placement?.side ?? SIDE.top)
+    const align = isPreview ? ALIGN.center : (placement?.align ?? ALIGN.start)
+    const sideOffset = isPreview ? 0 : (placement?.sideOffset ?? 0)
+    const alignOffset = isPreview ? 0 : (placement?.alignOffset ?? 0)
 
     const userStyles =
-      settings.userStyles &&
-      settings.userStyles.reduce((acc, cur) => {
+      userSettings?.userStyles &&
+      userSettings.userStyles.reduce((acc: any, cur: any) => {
         if (cur.value == null) return acc
         if (cur.name === 'background-color' || cur.name === 'border-color') {
           const hsl = hexToHsl(cur.value)
@@ -73,11 +73,11 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(
         }, EXIT_DURATION)
       } else {
         // Enter transition
-        const popupDuration = settings.userStyles?.find(
-          (s) => s.name === STYLE_VARIABLE.POPUP_DURATION,
+        const popupDuration = userSettings?.userStyles?.find(
+          (s: any) => s.name === STYLE_VARIABLE.POPUP_DURATION,
         )
-        const popupDelay = settings.userStyles?.find(
-          (s) => s.name === STYLE_VARIABLE.POPUP_DELAY,
+        const popupDelay = userSettings?.userStyles?.find(
+          (s: any) => s.name === STYLE_VARIABLE.POPUP_DELAY,
         )
         const duration =
           popupDuration?.value != null ? parseInt(popupDuration.value) : 150
@@ -133,8 +133,8 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(
 export function PreviewDesc(props: PopupProps) {
   const { visible, isContextMenu, isKeyboard, isLeftClickHold } =
     useDetectStartup(props)
-  const { settings } = useSetting()
-  const key = settings.startupMethod.keyboardParam
+  const { userSettings } = useUserSettings()
+  const key = userSettings?.startupMethod?.keyboardParam
 
   const os = isMac() ? 'mac' : 'windows'
   const keyLabel = t(`Option_keyboardParam_${key}_${os}`)
diff --git a/src/components/SelectAnchor.tsx b/src/components/SelectAnchor.tsx
index d2c189b2..50120b12 100644
--- a/src/components/SelectAnchor.tsx
+++ b/src/components/SelectAnchor.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, forwardRef, useCallback } from 'react'
 import { LinkClickGuard } from '@/components/LinkClickGuard'
-import { useSetting } from '@/hooks/useSetting'
+import { useUserSettings } from '@/hooks/useEnhancedSetting'
 import { useSelectContext } from '@/hooks/useSelectContext'
 import { useLeftClickHold } from '@/hooks/useLeftClickHold'
 import { MOUSE, EXIT_DURATION, STARTUP_METHOD } from '@/const'
@@ -17,8 +17,8 @@ export const SelectAnchor = forwardRef<HTMLDivElement>((_props, ref) => {
   const [offset, setOffset] = useState<Point>({} as Point)
   const [delayTO, setDelayTO] = useState<number | null>()
 
-  const { settings } = useSetting()
-  const { method, leftClickHoldParam } = settings.startupMethod
+  const { userSettings } = useUserSettings()
+  const { method, leftClickHoldParam } = userSettings?.startupMethod || {}
   const selected = !isEmpty(selectionText)
   const { detectHold, detectHoldLink, position } = useLeftClickHold({
     enable: method === STARTUP_METHOD.LEFT_CLICK_HOLD && selected,
diff --git a/src/components/commandHub/DownloadButton.tsx b/src/components/commandHub/DownloadButton.tsx
index 5cf7bfe0..7630edc4 100644
--- a/src/components/commandHub/DownloadButton.tsx
+++ b/src/components/commandHub/DownloadButton.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import clsx from 'clsx'
 import { Ipc, BgCommand } from '@/services/ipc'
-import { useSetting } from '@/hooks/useSetting'
+import { useCommands } from '@/hooks/useEnhancedSetting'
 import { sendEvent, ANALYTICS_EVENTS } from '@/services/analytics'
 import {
   Popover,
@@ -16,10 +16,9 @@ const TooltipDuration = 2000
 
 export const DownloadButton = (): JSX.Element => {
   const [position, setPosition] = useState<Element | null>(null)
-  const { settings } = useSetting()
+  const { commands } = useCommands()
   const { addUrlChangeListener, removeUrlChangeListener } =
     useDetectUrlChanged()
-  const commands = settings.commands
   const [shouldRender, setShouldRender] = useState(false)
   const open = position != null
 
diff --git a/src/components/commandHub/MyCommands.tsx b/src/components/commandHub/MyCommands.tsx
index 68a7f772..0ed91832 100644
--- a/src/components/commandHub/MyCommands.tsx
+++ b/src/components/commandHub/MyCommands.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, forwardRef } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import ColorThief from 'colorthief'
-import { useSetting } from '@/hooks/useSetting'
+import { useCompatibleSetting } from '@/hooks/useEnhancedSetting'
 import { sendEvent, ANALYTICS_EVENTS } from '@/services/analytics'
 import { t } from '@/services/i18n'
 import { cn, isSearchCommand, isPageActionCommand } from '@/lib/utils'
@@ -13,7 +13,7 @@ export const MyCommands = (): JSX.Element => {
   const [pageActionIds, setPageActionIds] = useState<string[]>([])
   const listRef = useRef<HTMLUListElement | null>(null)
   const list2Ref = useRef<HTMLUListElement | null>(null)
-  const { settings, iconUrls } = useSetting()
+  const { settings, iconUrls } = useCompatibleSetting()
   const commands = settings.commands
     .filter(
       (c) =>
diff --git a/src/components/commandHub/StarButton.tsx b/src/components/commandHub/StarButton.tsx
index 2243f185..609d1396 100644
--- a/src/components/commandHub/StarButton.tsx
+++ b/src/components/commandHub/StarButton.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useCallback } from 'react'
-import { useSetting } from '@/hooks/useSetting'
+import { useSection, CACHE_SECTIONS } from '@/hooks/useEnhancedSetting'
 import { sendEvent, ANALYTICS_EVENTS } from '@/services/analytics'
 import { SCREEN } from '@/const'
 import { useDetectUrlChanged } from '@/hooks/useDetectUrlChanged'
@@ -17,8 +17,7 @@ function findButtonElement(elm: Element): HTMLButtonElement | undefined {
 }
 
 export const StarButton = (): JSX.Element => {
-  const { settings } = useSetting()
-  const stars = settings.stars
+  const { data: stars } = useSection(CACHE_SECTIONS.STARS)
   const { addUrlChangeListener, removeUrlChangeListener } =
     useDetectUrlChanged()
 
@@ -27,7 +26,7 @@ export const StarButton = (): JSX.Element => {
       const button = findButtonElement(e.target as Element)
       const id = button?.dataset.starId
       if (id == null) return
-      const found = stars.some((s) => s.id === id)
+      const found = stars?.some((s: any) => s.id === id) ?? false
       sendEvent(
         found
           ? ANALYTICS_EVENTS.COMMAND_HUB_STAR_REMOVE
@@ -47,7 +46,7 @@ export const StarButton = (): JSX.Element => {
       if (id == null) return
       button.addEventListener('click', updateStar)
       button.dataset.clickable = 'true'
-      if (stars.some((s) => s.id === id)) {
+      if (stars?.some((s: any) => s.id === id)) {
         button.dataset.starred = 'true'
       } else {
         button.dataset.starred = 'false'
@@ -61,7 +60,7 @@ export const StarButton = (): JSX.Element => {
       const count = Number(span.dataset.starCount)
       if (count == null || isNaN(count)) return
       let reviced = 0
-      const star = stars.find((s) => s.id === span.dataset.starId)
+      const star = stars?.find((s: any) => s.id === span.dataset.starId)
       if (star != null) {
         // There is a new star.
         reviced++
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 59b0cf17..1c87edce 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -14,7 +14,7 @@ import { HoverArea } from '@/components/menu/HoverArea'
 import { MenuImage } from '@/components/menu/MenuImage'
 import css from './Menu.module.css'
 import type { Command, CommandFolder } from '@/types'
-import { useSetting } from '@/hooks/useSetting'
+import { useEnhancedSetting } from '@/hooks/useEnhancedSetting'
 import { onHover, isMenuCommand } from '@/lib/utils'
 import {
   toCommandTree,
@@ -35,11 +35,11 @@ export function Menu(): JSX.Element {
   const menuRef = useRef(null)
   const [hoverTrigger, setHoverTrigger] = useState('')
   const [hoverContent, setHoverContent] = useState('')
-  const { settings } = useSetting()
-  const commands = settings.commands.filter(isMenuCommand)
-  const folders = settings.folders
+  const { settings } = useEnhancedSetting()
+  const commands = settings.commands?.filter(isMenuCommand) || []
+  const folders = settings.folders || []
   const isHorizontal = settings.style === STYLE.HORIZONTAL
-  const side = settings.popupPlacement.side
+  const side = settings.popupPlacement?.side ?? SIDE.top
 
   const commandTree = toCommandTree(commands, folders)
   const activeFolder = hoverTrigger || hoverContent
diff --git a/src/components/result/ResultPopup.tsx b/src/components/result/ResultPopup.tsx
index 1d07e51a..e6ec779a 100644
--- a/src/components/result/ResultPopup.tsx
+++ b/src/components/result/ResultPopup.tsx
@@ -2,7 +2,7 @@ import React, { useRef } from 'react'
 import { cn } from '@/lib/utils'
 import { Popover, PopoverContent, PopoverAnchor } from '@/components/ui/popover'
 
-import { useSetting } from '@/hooks/useSetting'
+import { useUserSettings } from '@/hooks/useEnhancedSetting'
 import { Icon } from '@/components/Icon'
 import popupCss from '@/components/Popup.module.css'
 import { SIDE } from '@/const'
@@ -17,9 +17,9 @@ type PopupProps = {
 }
 
 export function ResultPopup(props: PopupProps) {
-  const { settings } = useSetting()
-  const placement = settings.popupPlacement
-  const isBottom = placement.side === SIDE.bottom
+  const { userSettings } = useUserSettings()
+  const placement = userSettings?.popupPlacement
+  const isBottom = placement?.side === SIDE.bottom
 
   const visible = props.visible && props.positionRef.current != null
 
diff --git a/src/hooks/useDetectLinkCommand.ts b/src/hooks/useDetectLinkCommand.ts
index ac73a7d4..61ab352a 100644
--- a/src/hooks/useDetectLinkCommand.ts
+++ b/src/hooks/useDetectLinkCommand.ts
@@ -9,7 +9,7 @@ import {
 } from '@/const'
 import { Point, SettingsType, Command } from '@/types'
 import { LinkPreview } from '@/action/linkPreview'
-import { useSetting } from '@/hooks/useSetting'
+import { useEnhancedSetting } from '@/hooks/useEnhancedSetting'
 import { useLeftClickHold } from '@/hooks/useLeftClickHold'
 import Default, { PopupOption } from '@/services/option/defaultSettings'
 import { isPopup, isLinkCommand, isMac } from '@/lib/utils'
@@ -47,14 +47,14 @@ const empty = {
 }
 
 export function useDetectLinkCommand(): DetectLinkCommandReturn {
-  const { settings, pageRule } = useSetting()
-  const showIndicator = settings.linkCommand.showIndicator
-  const command = settings.commands.find(isLinkCommand) as Command
+  const { settings, pageRule } = useEnhancedSetting()
+  const showIndicator = settings.linkCommand?.showIndicator
+  const command = settings.commands?.find(isLinkCommand) as Command
   const enabled =
     pageRule == null ||
     pageRule.linkCommandEnabled == undefined ||
     pageRule.linkCommandEnabled === LINK_COMMAND_ENABLED.INHERIT
-      ? settings.linkCommand.enabled === LINK_COMMAND_ENABLED.ENABLE
+      ? settings.linkCommand?.enabled === LINK_COMMAND_ENABLED.ENABLE
       : pageRule.linkCommandEnabled === LINK_COMMAND_ENABLED.ENABLE
 
   const onChangeState = (state: ExecState, message?: string) => {
@@ -75,11 +75,11 @@ export function useDetectLinkCommand(): DetectLinkCommandReturn {
   }
 
   return {
-    showIndicator,
+    showIndicator: showIndicator ?? false,
     ...empty,
-    ...useDetectDrag(enabled, settings, command, onDetect),
-    ...useDetectKeyboard(enabled, settings, command, onDetect),
-    ...useDetectClickHold(enabled, settings, command, onDetect),
+    ...useDetectDrag(enabled, settings as SettingsType, command, onDetect),
+    ...useDetectKeyboard(enabled, settings as SettingsType, command, onDetect),
+    ...useDetectClickHold(enabled, settings as SettingsType, command, onDetect),
   }
 }
 
@@ -101,11 +101,11 @@ function useDetectDrag(
 
   const dragEnabled =
     enabled &&
-    settings.linkCommand.startupMethod.method ===
+    settings.linkCommand?.startupMethod?.method ===
       LINK_COMMAND_STARTUP_METHOD.DRAG
 
   const threshold =
-    settings.linkCommand.startupMethod.threshold ??
+    settings.linkCommand?.startupMethod?.threshold ??
     (Default.linkCommand.startupMethod.threshold as number)
 
   useEffect(() => {
@@ -208,9 +208,9 @@ function useDetectKeyboard(
 ): SubHookReturn {
   const keyboardEnabled =
     enabled &&
-    settings.linkCommand.startupMethod.method ===
+    settings.linkCommand?.startupMethod?.method ===
       LINK_COMMAND_STARTUP_METHOD.KEYBOARD
-  const key = settings.linkCommand.startupMethod.keyboardParam
+  const key = settings.linkCommand?.startupMethod?.keyboardParam
   const popupOption = command?.popupOption ?? PopupOption
   const [target, setTarget] = useState<Element | null>(null)
   const [mousePosition, setMousePosition] = useState<Point | null>(null)
@@ -272,9 +272,9 @@ function useDetectClickHold(
 ): SubHookReturn {
   const clickHoldEnabled =
     enabled &&
-    settings.linkCommand.startupMethod.method ===
+    settings.linkCommand?.startupMethod?.method ===
       LINK_COMMAND_STARTUP_METHOD.LEFT_CLICK_HOLD
-  const duration = settings.linkCommand.startupMethod.leftClickHoldParam ?? 200
+  const duration = settings.linkCommand?.startupMethod?.leftClickHoldParam ?? 200
   const detectLinkRef = useRef(false)
   const [forceClear, setForceClear] = useState(false)
   const playPixel = 20
diff --git a/src/hooks/useDetectStartup.ts b/src/hooks/useDetectStartup.ts
index 6dcd7678..3b0680f4 100644
--- a/src/hooks/useDetectStartup.ts
+++ b/src/hooks/useDetectStartup.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import type { PopupProps } from '@/components/Popup'
-import { useSetting } from '@/hooks/useSetting'
+import { useEnhancedSetting } from '@/hooks/useEnhancedSetting'
 import { useLeftClickHold } from '@/hooks/useLeftClickHold'
 import { useSelectContext } from '@/hooks/useSelectContext'
 import { POPUP_ENABLED, STARTUP_METHOD, KEYBOARD } from '@/const'
@@ -15,8 +15,8 @@ export function useDetectStartup(props: Props) {
   const { positionElm, isPreview, isHover } = props
   const { selectionText } = useSelectContext()
   const [hide, setHide] = useState(false)
-  const { settings, pageRule } = useSetting()
-  const { method, leftClickHoldParam } = settings.startupMethod
+  const { settings, pageRule } = useEnhancedSetting()
+  const { method, leftClickHoldParam } = settings.startupMethod || {}
 
   let visible = !isEmpty(selectionText) && positionElm != null
   if (pageRule != null) {
@@ -63,10 +63,10 @@ export function useDetectStartup(props: Props) {
 }
 
 export function useKeyboard(_: Props) {
-  const { settings } = useSetting()
+  const { settings } = useEnhancedSetting()
   const { selectionText } = useSelectContext()
   const [detectKey, setDetectKey] = useState(false)
-  const { method, keyboardParam } = settings.startupMethod
+  const { method, keyboardParam } = settings.startupMethod || {}
 
   useEffect(() => {
     setDetectKey(false)
diff --git a/src/hooks/useEnhancedSetting.ts b/src/hooks/useEnhancedSetting.ts
index 8332f925..c21d22cb 100644
--- a/src/hooks/useEnhancedSetting.ts
+++ b/src/hooks/useEnhancedSetting.ts
@@ -5,6 +5,9 @@ import {
   CacheSection,
   CACHE_SECTIONS,
 } from '../services/settingsCache'
+
+// Export CACHE_SECTIONS for external use
+export { CACHE_SECTIONS } from '../services/settingsCache'
 import type {
   SettingsType,
   Command,
@@ -33,7 +36,7 @@ type SectionData<T extends CacheSection> =
             : any
 
 // セクション別使用Hook
-function useSection<T extends CacheSection>(
+export function useSection<T extends CacheSection>(
   section: T,
   forceFresh = false,
 ): {
@@ -164,7 +167,7 @@ export function useUserSettings(forceFresh = false) {
   )
 
   return {
-    userSettings: data || {},
+    userSettings: (data || {}) as UserSettings,
     loading,
     error,
     refetch,

From 600f89762f1711518897604d3dd776e11a83bdd7 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 3 Jul 2025 22:52:28 +0900
Subject: [PATCH 50/64] Refactoring.

---
 src/components/Popup.tsx                     |   2 +-
 src/components/SelectAnchor.tsx              |   2 +-
 src/components/commandHub/DownloadButton.tsx |  11 +-
 src/components/commandHub/MyCommands.tsx     |  12 +-
 src/components/commandHub/StarButton.tsx     |   3 +-
 src/components/menu/Menu.tsx                 |  12 +-
 src/components/result/ResultPopup.tsx        |   2 +-
 src/hooks/useDetectLinkCommand.ts            |   4 +-
 src/hooks/useDetectStartup.ts                |   6 +-
 src/hooks/useEnhancedSetting.ts              | 365 -------------------
 src/hooks/useSetting.ts                      | 345 ++++++++++++++----
 src/services/enhancedSettings.ts             |  56 +--
 src/services/option/defaultSettings.ts       |  34 +-
 13 files changed, 341 insertions(+), 513 deletions(-)
 delete mode 100644 src/hooks/useEnhancedSetting.ts

diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index 1a0aa803..80b2ef19 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, createContext, forwardRef } from 'react'
 import { Popover, PopoverContent, PopoverAnchor } from '@/components/ui/popover'
 import { Menu } from '@/components/menu/Menu'
-import { useUserSettings } from '@/hooks/useEnhancedSetting'
+import { useUserSettings } from '@/hooks/useSetting'
 import { useDetectStartup } from '@/hooks/useDetectStartup'
 import { useTabCommandReceiver } from '@/hooks/useTabCommandReceiver'
 import { hexToHsl, isMac, onHover, cn } from '@/lib/utils'
diff --git a/src/components/SelectAnchor.tsx b/src/components/SelectAnchor.tsx
index 50120b12..0cf9c1ea 100644
--- a/src/components/SelectAnchor.tsx
+++ b/src/components/SelectAnchor.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, forwardRef, useCallback } from 'react'
 import { LinkClickGuard } from '@/components/LinkClickGuard'
-import { useUserSettings } from '@/hooks/useEnhancedSetting'
+import { useUserSettings } from '@/hooks/useSetting'
 import { useSelectContext } from '@/hooks/useSelectContext'
 import { useLeftClickHold } from '@/hooks/useLeftClickHold'
 import { MOUSE, EXIT_DURATION, STARTUP_METHOD } from '@/const'
diff --git a/src/components/commandHub/DownloadButton.tsx b/src/components/commandHub/DownloadButton.tsx
index 7630edc4..d2e6135e 100644
--- a/src/components/commandHub/DownloadButton.tsx
+++ b/src/components/commandHub/DownloadButton.tsx
@@ -1,7 +1,9 @@
 import { useState, useEffect } from 'react'
 import clsx from 'clsx'
 import { Ipc, BgCommand } from '@/services/ipc'
-import { useCommands } from '@/hooks/useEnhancedSetting'
+import { useSection } from '@/hooks/useSetting'
+import { useDetectUrlChanged } from '@/hooks/useDetectUrlChanged'
+import { CACHE_SECTIONS } from '@/services/settingsCache'
 import { sendEvent, ANALYTICS_EVENTS } from '@/services/analytics'
 import {
   Popover,
@@ -10,13 +12,12 @@ import {
   PopoverArrow,
 } from '@/components/ui/popover'
 import { SCREEN } from '@/const'
-import { useDetectUrlChanged } from '@/hooks/useDetectUrlChanged'
 
 const TooltipDuration = 2000
 
 export const DownloadButton = (): JSX.Element => {
   const [position, setPosition] = useState<Element | null>(null)
-  const { commands } = useCommands()
+  const { data: commands } = useSection(CACHE_SECTIONS.COMMANDS)
   const { addUrlChangeListener, removeUrlChangeListener } =
     useDetectUrlChanged()
   const [shouldRender, setShouldRender] = useState(false)
@@ -45,7 +46,7 @@ export const DownloadButton = (): JSX.Element => {
   }
 
   const updateButtonVisibility = () => {
-    const ids = commands.map((c) => c.id)
+    const ids = commands?.map((c) => c.id) ?? []
     ids.forEach((id) => {
       // hide installed buttons
       const installed = document.querySelector(
@@ -64,7 +65,7 @@ export const DownloadButton = (): JSX.Element => {
       const count = Number(span.dataset.downloadCount)
       if (count == null || isNaN(count)) return
       let reviced = 0
-      const cmd = commands.find((c) => c.id === span.dataset.id)
+      const cmd = commands?.find((c) => c.id === span.dataset.id)
       if (cmd != null) {
         // There is a command.
         reviced++
diff --git a/src/components/commandHub/MyCommands.tsx b/src/components/commandHub/MyCommands.tsx
index 0ed91832..d077258f 100644
--- a/src/components/commandHub/MyCommands.tsx
+++ b/src/components/commandHub/MyCommands.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, forwardRef } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import ColorThief from 'colorthief'
-import { useCompatibleSetting } from '@/hooks/useEnhancedSetting'
+import { useSettingsWithImageCache } from '@/hooks/useSetting'
 import { sendEvent, ANALYTICS_EVENTS } from '@/services/analytics'
 import { t } from '@/services/i18n'
 import { cn, isSearchCommand, isPageActionCommand } from '@/lib/utils'
@@ -13,14 +13,18 @@ export const MyCommands = (): JSX.Element => {
   const [pageActionIds, setPageActionIds] = useState<string[]>([])
   const listRef = useRef<HTMLUListElement | null>(null)
   const list2Ref = useRef<HTMLUListElement | null>(null)
-  const { settings, iconUrls } = useCompatibleSetting()
-  const commands = settings.commands
+  const { commands: allCommands, iconUrls } = useSettingsWithImageCache()
+  const commands = allCommands
     .filter(
       (c) =>
         (isSearchCommand(c) && !urls.includes(c.searchUrl as string)) ||
         (isPageActionCommand(c) && !pageActionIds.includes(c.id)),
     )
-    .map((c) => ({ ...c, iconDataUrl: c.iconUrl, iconUrl: iconUrls[c.id] }))
+    .map((c) => ({
+      ...c,
+      iconDataUrl: iconUrls[c.id] || c.iconUrl,
+      iconUrl: iconUrls[c.id],
+    }))
   const loaded = urls.length > 0
   const enableMarquee = commands.length > 3
 
diff --git a/src/components/commandHub/StarButton.tsx b/src/components/commandHub/StarButton.tsx
index 609d1396..91512d73 100644
--- a/src/components/commandHub/StarButton.tsx
+++ b/src/components/commandHub/StarButton.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useCallback } from 'react'
-import { useSection, CACHE_SECTIONS } from '@/hooks/useEnhancedSetting'
+import { useSection } from '@/hooks/useSetting'
+import { CACHE_SECTIONS } from '@/services/settingsCache'
 import { sendEvent, ANALYTICS_EVENTS } from '@/services/analytics'
 import { SCREEN } from '@/const'
 import { useDetectUrlChanged } from '@/hooks/useDetectUrlChanged'
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 1c87edce..99db57bb 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -14,7 +14,7 @@ import { HoverArea } from '@/components/menu/HoverArea'
 import { MenuImage } from '@/components/menu/MenuImage'
 import css from './Menu.module.css'
 import type { Command, CommandFolder } from '@/types'
-import { useEnhancedSetting } from '@/hooks/useEnhancedSetting'
+import { useSettingsWithImageCache, useUserSettings } from '@/hooks/useSetting'
 import { onHover, isMenuCommand } from '@/lib/utils'
 import {
   toCommandTree,
@@ -35,11 +35,11 @@ export function Menu(): JSX.Element {
   const menuRef = useRef(null)
   const [hoverTrigger, setHoverTrigger] = useState('')
   const [hoverContent, setHoverContent] = useState('')
-  const { settings } = useEnhancedSetting()
-  const commands = settings.commands?.filter(isMenuCommand) || []
-  const folders = settings.folders || []
-  const isHorizontal = settings.style === STYLE.HORIZONTAL
-  const side = settings.popupPlacement?.side ?? SIDE.top
+  const { commands: allCommands, folders } = useSettingsWithImageCache()
+  const commands = allCommands.filter(isMenuCommand)
+  const { userSettings } = useUserSettings()
+  const isHorizontal = userSettings.style === STYLE.HORIZONTAL
+  const side = userSettings.popupPlacement?.side ?? SIDE.top
 
   const commandTree = toCommandTree(commands, folders)
   const activeFolder = hoverTrigger || hoverContent
diff --git a/src/components/result/ResultPopup.tsx b/src/components/result/ResultPopup.tsx
index e6ec779a..7d6b948a 100644
--- a/src/components/result/ResultPopup.tsx
+++ b/src/components/result/ResultPopup.tsx
@@ -2,7 +2,7 @@ import React, { useRef } from 'react'
 import { cn } from '@/lib/utils'
 import { Popover, PopoverContent, PopoverAnchor } from '@/components/ui/popover'
 
-import { useUserSettings } from '@/hooks/useEnhancedSetting'
+import { useUserSettings } from '@/hooks/useSetting'
 import { Icon } from '@/components/Icon'
 import popupCss from '@/components/Popup.module.css'
 import { SIDE } from '@/const'
diff --git a/src/hooks/useDetectLinkCommand.ts b/src/hooks/useDetectLinkCommand.ts
index 61ab352a..aac3b517 100644
--- a/src/hooks/useDetectLinkCommand.ts
+++ b/src/hooks/useDetectLinkCommand.ts
@@ -9,7 +9,7 @@ import {
 } from '@/const'
 import { Point, SettingsType, Command } from '@/types'
 import { LinkPreview } from '@/action/linkPreview'
-import { useEnhancedSetting } from '@/hooks/useEnhancedSetting'
+import { useSetting } from '@/hooks/useSetting'
 import { useLeftClickHold } from '@/hooks/useLeftClickHold'
 import Default, { PopupOption } from '@/services/option/defaultSettings'
 import { isPopup, isLinkCommand, isMac } from '@/lib/utils'
@@ -47,7 +47,7 @@ const empty = {
 }
 
 export function useDetectLinkCommand(): DetectLinkCommandReturn {
-  const { settings, pageRule } = useEnhancedSetting()
+  const { settings, pageRule } = useSetting()
   const showIndicator = settings.linkCommand?.showIndicator
   const command = settings.commands?.find(isLinkCommand) as Command
   const enabled =
diff --git a/src/hooks/useDetectStartup.ts b/src/hooks/useDetectStartup.ts
index 3b0680f4..e696bdf2 100644
--- a/src/hooks/useDetectStartup.ts
+++ b/src/hooks/useDetectStartup.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import type { PopupProps } from '@/components/Popup'
-import { useEnhancedSetting } from '@/hooks/useEnhancedSetting'
+import { useSetting } from '@/hooks/useSetting'
 import { useLeftClickHold } from '@/hooks/useLeftClickHold'
 import { useSelectContext } from '@/hooks/useSelectContext'
 import { POPUP_ENABLED, STARTUP_METHOD, KEYBOARD } from '@/const'
@@ -15,7 +15,7 @@ export function useDetectStartup(props: Props) {
   const { positionElm, isPreview, isHover } = props
   const { selectionText } = useSelectContext()
   const [hide, setHide] = useState(false)
-  const { settings, pageRule } = useEnhancedSetting()
+  const { settings, pageRule } = useSetting()
   const { method, leftClickHoldParam } = settings.startupMethod || {}
 
   let visible = !isEmpty(selectionText) && positionElm != null
@@ -63,7 +63,7 @@ export function useDetectStartup(props: Props) {
 }
 
 export function useKeyboard(_: Props) {
-  const { settings } = useEnhancedSetting()
+  const { settings } = useSetting()
   const { selectionText } = useSelectContext()
   const [detectKey, setDetectKey] = useState(false)
   const { method, keyboardParam } = settings.startupMethod || {}
diff --git a/src/hooks/useEnhancedSetting.ts b/src/hooks/useEnhancedSetting.ts
deleted file mode 100644
index c21d22cb..00000000
--- a/src/hooks/useEnhancedSetting.ts
+++ /dev/null
@@ -1,365 +0,0 @@
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
-import { enhancedSettings } from '../services/enhancedSettings'
-import {
-  settingsCache,
-  CacheSection,
-  CACHE_SECTIONS,
-} from '../services/settingsCache'
-
-// Export CACHE_SECTIONS for external use
-export { CACHE_SECTIONS } from '../services/settingsCache'
-import type {
-  SettingsType,
-  Command,
-  Star,
-  UserStats,
-  ShortcutSettings,
-  UserSettings,
-  PageRule,
-} from '@/types'
-import { isEmpty } from '@/lib/utils'
-import { INHERIT } from '@/const'
-import { emptySettings } from './useSetting'
-
-// セクション別Hook戻り値の型定義
-type SectionData<T extends CacheSection> =
-  T extends typeof CACHE_SECTIONS.COMMANDS
-    ? Command[]
-    : T extends typeof CACHE_SECTIONS.USER_SETTINGS
-      ? UserSettings
-      : T extends typeof CACHE_SECTIONS.STARS
-        ? Star[]
-        : T extends typeof CACHE_SECTIONS.SHORTCUTS
-          ? ShortcutSettings
-          : T extends typeof CACHE_SECTIONS.USER_STATS
-            ? UserStats
-            : any
-
-// セクション別使用Hook
-export function useSection<T extends CacheSection>(
-  section: T,
-  forceFresh = false,
-): {
-  data: SectionData<T> | null
-  loading: boolean
-  error: Error | null
-  refetch: () => Promise<void>
-} {
-  const [data, setData] = useState<SectionData<T> | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
-  const mountedRef = useRef(true)
-
-  const loadData = useCallback(async () => {
-    if (!mountedRef.current) return
-
-    try {
-      setLoading(true)
-      setError(null)
-      const result = await enhancedSettings.getSection(section, forceFresh)
-
-      if (mountedRef.current) {
-        setData(result)
-      }
-    } catch (err) {
-      if (mountedRef.current) {
-        setError(err instanceof Error ? err : new Error('Unknown error'))
-      }
-    } finally {
-      if (mountedRef.current) {
-        setLoading(false)
-      }
-    }
-  }, [section, forceFresh])
-
-  const refetch = useCallback(async () => {
-    await loadData()
-  }, [loadData])
-
-  // 初回ロード
-  useEffect(() => {
-    mountedRef.current = true
-    loadData()
-  }, [section, forceFresh])
-
-  // 変更監視の設定
-  useEffect(() => {
-    const handleChange = () => {
-      if (mountedRef.current) {
-        loadData()
-      }
-    }
-
-    settingsCache.subscribe(section, handleChange)
-
-    return () => {
-      settingsCache.unsubscribe(section, handleChange)
-    }
-  }, [section, loadData])
-
-  // クリーンアップ
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false
-    }
-  }, [])
-
-  return { data, loading, error, refetch }
-}
-
-// コマンド専用Hook
-export function useCommands(forceFresh = false) {
-  const { data, loading, error, refetch } = useSection(
-    CACHE_SECTIONS.COMMANDS,
-    forceFresh,
-  )
-
-  const updateCommand = useCallback(async (updatedCommand: Command) => {
-    await enhancedSettings.updateSection<Command[]>(
-      CACHE_SECTIONS.COMMANDS,
-      (commands) =>
-        commands.map((cmd) =>
-          cmd.id === updatedCommand.id ? updatedCommand : cmd,
-        ),
-    )
-  }, [])
-
-  const addCommand = useCallback(async (newCommand: Command) => {
-    await enhancedSettings.updateSection<Command[]>(
-      CACHE_SECTIONS.COMMANDS,
-      (commands) => [...commands, newCommand],
-    )
-  }, [])
-
-  const removeCommand = useCallback(async (commandId: string) => {
-    await enhancedSettings.updateSection<Command[]>(
-      CACHE_SECTIONS.COMMANDS,
-      (commands) => commands.filter((cmd) => cmd.id !== commandId),
-    )
-  }, [])
-
-  return {
-    commands: data || [],
-    loading,
-    error,
-    refetch,
-    updateCommand,
-    addCommand,
-    removeCommand,
-  }
-}
-
-// ユーザー設定専用Hook
-export function useUserSettings(forceFresh = false) {
-  const { data, loading, error, refetch } = useSection(
-    CACHE_SECTIONS.USER_SETTINGS,
-    forceFresh,
-  )
-
-  const updateUserSettings = useCallback(
-    async (updater: (settings: UserSettings) => UserSettings) => {
-      await enhancedSettings.updateSection<UserSettings>(
-        CACHE_SECTIONS.USER_SETTINGS,
-        updater,
-      )
-    },
-    [],
-  )
-
-  return {
-    userSettings: (data || {}) as UserSettings,
-    loading,
-    error,
-    refetch,
-    updateUserSettings,
-  }
-}
-
-// 統合設定Hook（必要なセクションのみ指定）
-export function useEnhancedSetting(
-  sections: CacheSection[] = [
-    CACHE_SECTIONS.COMMANDS,
-    CACHE_SECTIONS.USER_SETTINGS,
-  ],
-  forceFresh = false,
-): {
-  settings: Partial<SettingsType>
-  pageRule: PageRule | undefined
-  loading: boolean
-  error: Error | null
-  refetch: () => Promise<void>
-  invalidateCache: (sectionsToInvalidate?: CacheSection[]) => void
-} {
-  const [settings, setSettings] = useState<Partial<SettingsType>>({})
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
-  const mountedRef = useRef(true)
-  const sectionsRef = useRef(sections)
-
-  // sectionsが変更された場合の更新
-  useEffect(() => {
-    sectionsRef.current = sections
-  }, [sections])
-
-  const loadSettings = useCallback(async () => {
-    if (!mountedRef.current) return
-
-    try {
-      setLoading(true)
-      setError(null)
-
-      const data = await enhancedSettings.get({
-        sections: sectionsRef.current,
-        forceFresh,
-      })
-
-      if (mountedRef.current) {
-        setSettings(data)
-      }
-    } catch (err) {
-      if (mountedRef.current) {
-        setError(err instanceof Error ? err : new Error('Unknown error'))
-      }
-    } finally {
-      if (mountedRef.current) {
-        setLoading(false)
-      }
-    }
-  }, [forceFresh])
-
-  const refetch = useCallback(async () => {
-    await loadSettings()
-  }, [loadSettings])
-
-  const invalidateCache = useCallback(
-    (sectionsToInvalidate?: CacheSection[]) => {
-      const targetSections = sectionsToInvalidate || sectionsRef.current
-      enhancedSettings.invalidateCache(targetSections)
-    },
-    [],
-  )
-
-  // sections を文字列化してメモ化（配列の参照変更による無限ループを防ぐ）
-  const sectionsKey = useMemo(() => sections.join(','), [sections])
-
-  // 初回ロード
-  useEffect(() => {
-    mountedRef.current = true
-    loadSettings()
-  }, [sectionsKey, forceFresh])
-
-  // 変更監視の設定
-  useEffect(() => {
-    const handleChange = () => {
-      if (mountedRef.current) {
-        loadSettings()
-      }
-    }
-
-    sections.forEach((section) => {
-      settingsCache.subscribe(section, handleChange)
-    })
-
-    return () => {
-      sections.forEach((section) => {
-        settingsCache.unsubscribe(section, handleChange)
-      })
-    }
-  }, [sectionsKey, loadSettings])
-
-  // クリーンアップ
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false
-    }
-  }, [])
-
-  // ページルール計算
-  let pageRule: PageRule | undefined
-  if (settings && typeof window !== 'undefined') {
-    pageRule = (settings.pageRules || [])
-      .filter((r) => !isEmpty(r.urlPattern))
-      .find((rule) => {
-        try {
-          const re = new RegExp(rule.urlPattern)
-          return window.location.href.match(re) != null
-        } catch {
-          return false
-        }
-      })
-
-    if (
-      pageRule != null &&
-      pageRule.popupPlacement !== INHERIT &&
-      settings.popupPlacement
-    ) {
-      settings.popupPlacement = pageRule.popupPlacement
-    }
-  }
-
-  return {
-    settings,
-    pageRule,
-    loading,
-    error,
-    refetch,
-    invalidateCache,
-  }
-}
-
-// 従来のuseSetting Hookとの互換性を保つためのHook
-export function useCompatibleSetting(): {
-  settings: SettingsType
-  pageRule: PageRule | undefined
-  iconUrls: Record<number | string, string>
-} {
-  const { settings, pageRule, loading } = useEnhancedSetting([
-    CACHE_SECTIONS.COMMANDS,
-    CACHE_SECTIONS.USER_SETTINGS,
-    CACHE_SECTIONS.STARS,
-    CACHE_SECTIONS.SHORTCUTS,
-    CACHE_SECTIONS.USER_STATS,
-    CACHE_SECTIONS.CACHES,
-  ])
-
-  // IconUrls計算（既存の実装に合わせる）
-  const iconUrls = (settings.commands || []).reduce(
-    (acc, cur) => ({ ...acc, [cur.id]: cur.iconUrl }),
-    {} as Record<number | string, string>,
-  )
-
-  // loadingが完了するまでemptySettingsを返す（既存の実装に合わせる）
-  if (loading || !settings.commands) {
-    return {
-      settings: emptySettings,
-      pageRule: undefined,
-      iconUrls: {},
-    }
-  }
-
-  return {
-    settings: settings as SettingsType,
-    pageRule,
-    iconUrls,
-  }
-}
-
-// パフォーマンス監視Hook
-export function useSettingsPerformance() {
-  const [cacheStatus, setCacheStatus] = useState<Record<string, any>>({})
-
-  const updateCacheStatus = useCallback(() => {
-    setCacheStatus(enhancedSettings.getCacheStatus())
-  }, [])
-
-  useEffect(() => {
-    updateCacheStatus()
-    const interval = setInterval(updateCacheStatus, 1000)
-    return () => clearInterval(interval)
-  }, [updateCacheStatus])
-
-  return {
-    cacheStatus,
-    refreshStatus: updateCacheStatus,
-  }
-}
diff --git a/src/hooks/useSetting.ts b/src/hooks/useSetting.ts
index c1d3d9fc..40d53f9d 100644
--- a/src/hooks/useSetting.ts
+++ b/src/hooks/useSetting.ts
@@ -1,108 +1,293 @@
-import { useState, useEffect } from 'react'
-import { Settings } from '../services/settings'
-import { useCompatibleSetting } from './useEnhancedSetting'
-import type { SettingsType, PageRule } from '@/types'
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+import { enhancedSettings } from '../services/enhancedSettings'
+import {
+  settingsCache,
+  CacheSection,
+  CACHE_SECTIONS,
+} from '../services/settingsCache'
+
+import type {
+  SettingsType,
+  Command,
+  Star,
+  UserStats,
+  ShortcutSettings,
+  UserSettings,
+  PageRule,
+} from '@/types'
 import { isEmpty } from '@/lib/utils'
-import { STYLE, STARTUP_METHOD, ALIGN, SIDE, INHERIT } from '@/const'
-import Default from '@/services/option/defaultSettings'
+import { INHERIT } from '@/const'
 
-type iconUrlMap = Record<number | string, string>
+// セクション別Hook戻り値の型定義
+type SectionData<T extends CacheSection> =
+  T extends typeof CACHE_SECTIONS.COMMANDS
+    ? Command[]
+    : T extends typeof CACHE_SECTIONS.USER_SETTINGS
+      ? UserSettings
+      : T extends typeof CACHE_SECTIONS.STARS
+        ? Star[]
+        : T extends typeof CACHE_SECTIONS.SHORTCUTS
+          ? ShortcutSettings
+          : T extends typeof CACHE_SECTIONS.USER_STATS
+            ? UserStats
+            : any
 
-type useSettingReturn = {
-  settings: SettingsType
-  pageRule: PageRule | undefined
-  iconUrls: iconUrlMap
+// 共通の非同期データ取得Hook
+function useAsyncData<T>(
+  loader: () => Promise<T>,
+  deps: React.DependencyList,
+  subscriptions?: {
+    subscribe: (callback: () => void) => void
+    unsubscribe: (callback: () => void) => void
+  }[],
+): {
+  data: T | null
+  loading: boolean
+  error: Error | null
+  refetch: () => Promise<void>
+} {
+  const [data, setData] = useState<T | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+  const mountedRef = useRef(true)
+
+  const loadData = useCallback(async () => {
+    if (!mountedRef.current) return
+
+    try {
+      setLoading(true)
+      setError(null)
+      const result = await loader()
+
+      if (mountedRef.current) {
+        setData(result)
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err : new Error('Unknown error'))
+      }
+    } finally {
+      if (mountedRef.current) {
+        setLoading(false)
+      }
+    }
+  }, deps)
+
+  const refetch = useCallback(async () => {
+    await loadData()
+  }, [loadData])
+
+  // 初回ロードとクリーンアップ
+  useEffect(() => {
+    mountedRef.current = true
+    loadData()
+
+    return () => {
+      mountedRef.current = false
+    }
+  }, deps)
+
+  // 変更監視の設定
+  useEffect(() => {
+    if (!subscriptions) return
+
+    const handleChange = () => {
+      if (mountedRef.current) {
+        loadData()
+      }
+    }
+
+    subscriptions.forEach((subscription) => {
+      subscription.subscribe(handleChange)
+    })
+
+    return () => {
+      subscriptions.forEach((subscription) => {
+        subscription.unsubscribe(handleChange)
+      })
+    }
+  }, [...deps, loadData])
+
+  return { data, loading, error, refetch }
 }
 
-export const emptySettings: SettingsType = {
-  settingVersion: '0.0.0',
-  commands: [],
-  folders: [],
-  pageRules: [],
-  style: STYLE.HORIZONTAL,
-  popupPlacement: {
-    side: SIDE.top,
-    align: ALIGN.start,
-    alignOffset: 0,
-    sideOffset: 0,
-  },
-  linkCommand: Default.linkCommand,
-  userStyles: [],
-  startupMethod: { method: STARTUP_METHOD.TEXT_SELECTION },
-  stars: [],
-  commandExecutionCount: 0,
-  hasShownReviewRequest: false,
-  shortcuts: { shortcuts: [] },
+// セクション別使用Hook
+export function useSection<T extends CacheSection>(
+  section: T,
+  forceFresh = false,
+): {
+  data: SectionData<T> | null
+  loading: boolean
+  error: Error | null
+  refetch: () => Promise<void>
+} {
+  return useAsyncData<SectionData<T>>(
+    () => enhancedSettings.getSection(section, forceFresh),
+    [section, forceFresh],
+    [
+      {
+        subscribe: (callback) => settingsCache.subscribe(section, callback),
+        unsubscribe: (callback) => settingsCache.unsubscribe(section, callback),
+      },
+    ],
+  )
 }
 
-// Enhanced version flag - set to true to use the new cached implementation
-const USE_ENHANCED_SETTINGS = process.env.NODE_ENV !== 'production' // Enable in development
+// ユーザー設定専用Hook
+export function useUserSettings(forceFresh = false) {
+  const { data, loading, error, refetch } = useSection(
+    CACHE_SECTIONS.USER_SETTINGS,
+    forceFresh,
+  )
 
-export function useSetting(): useSettingReturn {
-  // Use enhanced implementation if enabled
-  if (USE_ENHANCED_SETTINGS) {
-    return useCompatibleSetting()
+  const updateUserSettings = useCallback(
+    async (updater: (settings: UserSettings) => UserSettings) => {
+      await enhancedSettings.updateSection<UserSettings>(
+        CACHE_SECTIONS.USER_SETTINGS,
+        updater,
+      )
+    },
+    [],
+  )
+
+  return {
+    userSettings: (data || {}) as UserSettings,
+    loading,
+    error,
+    refetch,
+    updateUserSettings,
   }
+}
 
-  // Legacy implementation (original code)
-  const [settings, setSettings] = useState<SettingsType>(emptySettings)
-  const [iconUrls, setIconUrls] = useState<iconUrlMap>({})
+// 統合設定Hook（必要なセクションのみ指定）
+export function useSetting(
+  sections: CacheSection[] = [
+    CACHE_SECTIONS.COMMANDS,
+    CACHE_SECTIONS.USER_SETTINGS,
+  ],
+  forceFresh = false,
+): {
+  settings: Partial<SettingsType>
+  pageRule: PageRule | undefined
+  loading: boolean
+  error: Error | null
+  refetch: () => Promise<void>
+  invalidateCache: (sectionsToInvalidate?: CacheSection[]) => void
+} {
+  const sectionsRef = useRef(sections)
+  const sectionsKey = useMemo(() => sections.join(','), [sections])
 
+  // sectionsが変更された場合の更新
   useEffect(() => {
-    updateSettings()
-    Settings.addChangedListener(updateSettings)
-    return () => {
-      Settings.removeChangedListener(updateSettings)
+    sectionsRef.current = sections
+  }, [sections])
+
+  const {
+    data: settings,
+    loading,
+    error,
+    refetch,
+  } = useAsyncData<Partial<SettingsType>>(
+    () =>
+      enhancedSettings.get({
+        sections: sectionsRef.current,
+        forceFresh,
+      }),
+    [sectionsKey, forceFresh],
+    sections.map((section) => ({
+      subscribe: (callback) => settingsCache.subscribe(section, callback),
+      unsubscribe: (callback) => settingsCache.unsubscribe(section, callback),
+    })),
+  )
+
+  const invalidateCache = useCallback(
+    (sectionsToInvalidate?: CacheSection[]) => {
+      const targetSections = sectionsToInvalidate || sectionsRef.current
+      enhancedSettings.invalidateCache(targetSections)
+    },
+    [],
+  )
+
+  // ページルール計算
+  const pageRule = useMemo(() => {
+    if (!settings || typeof window === 'undefined') return undefined
+
+    const rule = (settings.pageRules || [])
+      .filter((r) => !isEmpty(r.urlPattern))
+      .find((rule) => {
+        try {
+          const re = new RegExp(rule.urlPattern)
+          return window.location.href.match(re) != null
+        } catch {
+          return false
+        }
+      })
+
+    if (
+      rule != null &&
+      rule.popupPlacement !== INHERIT &&
+      settings.popupPlacement
+    ) {
+      settings.popupPlacement = rule.popupPlacement
     }
-  }, [])
 
-  const updateSettings = async () => {
-    const caches = await Settings.getCaches()
-    const data = await Settings.get()
-    // create iconUrl map to getting iconUrl
-    const iu = data.commands.reduce(
-      (acc, cur) => ({ ...acc, [cur.id]: cur.iconUrl }),
-      {},
-    )
-    setIconUrls(iu)
-    // use image cache if available
-    data.commands = data.commands.map((c) => {
+    return rule
+  }, [settings])
+
+  return {
+    settings: settings || {},
+    pageRule,
+    loading,
+    error,
+    refetch,
+    invalidateCache,
+  }
+}
+
+// Image cacheを適用した設定Hook
+export function useSettingsWithImageCache() {
+  const { settings, pageRule, loading } = useSetting([
+    CACHE_SECTIONS.COMMANDS,
+    CACHE_SECTIONS.USER_SETTINGS,
+    CACHE_SECTIONS.CACHES,
+  ])
+
+  const { commandsWithCache, foldersWithCache, iconUrls } = useMemo(() => {
+    if (loading || !settings.commands) {
+      return { commandsWithCache: [], foldersWithCache: [], iconUrls: {} }
+    }
+
+    const caches = (settings as any).caches || { images: {} }
+
+    // Commands with cache
+    const commandsWithCache = settings.commands.map((c) => {
       const cache = caches.images[c.iconUrl]
-      let iconUrl = c.iconUrl
-      if (!isEmpty(cache)) {
-        iconUrl = cache
-      }
+      const iconUrl = !isEmpty(cache) ? cache : c.iconUrl
       return { ...c, iconUrl }
     })
-    data.folders = data.folders.map((f) => {
+
+    // Folders with cache
+    const foldersWithCache = (settings.folders || []).map((f) => {
       if (!f.iconUrl) return f
       const cache = caches.images[f.iconUrl]
-      let iconUrl = f.iconUrl
-      if (!isEmpty(cache)) {
-        iconUrl = cache
-      }
+      const iconUrl = !isEmpty(cache) ? cache : f.iconUrl
       return { ...f, iconUrl }
     })
-    setSettings(data)
-  }
 
-  let pageRule: PageRule | undefined
-  if (settings != null) {
-    pageRule = settings.pageRules
-      .filter((r) => !isEmpty(r.urlPattern))
-      .find((rule) => {
-        const re = new RegExp(rule.urlPattern)
-        return window.location.href.match(re) != null
-      })
+    // IconUrls map
+    const iconUrls = commandsWithCache.reduce(
+      (acc, cur) => ({ ...acc, [cur.id]: cur.iconUrl }),
+      {} as Record<string, string>,
+    )
 
-    if (pageRule != null && pageRule.popupPlacement !== INHERIT) {
-      settings.popupPlacement = pageRule.popupPlacement
-    }
-  }
+    return { commandsWithCache, foldersWithCache, iconUrls }
+  }, [settings, loading])
 
   return {
-    settings,
-    pageRule,
+    commands: commandsWithCache,
+    folders: foldersWithCache,
     iconUrls,
+    pageRule,
+    loading,
   }
 }
diff --git a/src/services/enhancedSettings.ts b/src/services/enhancedSettings.ts
index 3ca06d0d..e208039a 100644
--- a/src/services/enhancedSettings.ts
+++ b/src/services/enhancedSettings.ts
@@ -46,7 +46,7 @@ export class EnhancedSettings {
       excludeOptions = false,
     } = options
 
-    console.log('EnhancedSettings.get called with sections:', sections)
+    console.debug('EnhancedSettings.get called with sections:', sections)
 
     // 並列でセクション別取得
     const results = await Promise.allSettled([
@@ -54,13 +54,19 @@ export class EnhancedSettings {
         ? settingsCache.get<Command[]>(CACHE_SECTIONS.COMMANDS, forceFresh)
         : Promise.resolve([]),
       sections.includes(CACHE_SECTIONS.USER_SETTINGS)
-        ? settingsCache.get<UserSettings>(CACHE_SECTIONS.USER_SETTINGS, forceFresh)
+        ? settingsCache.get<UserSettings>(
+            CACHE_SECTIONS.USER_SETTINGS,
+            forceFresh,
+          )
         : Promise.resolve(DefaultSettings as UserSettings),
       sections.includes(CACHE_SECTIONS.STARS)
         ? settingsCache.get<Star[]>(CACHE_SECTIONS.STARS, forceFresh)
         : Promise.resolve([]),
       sections.includes(CACHE_SECTIONS.SHORTCUTS)
-        ? settingsCache.get<ShortcutSettings>(CACHE_SECTIONS.SHORTCUTS, forceFresh)
+        ? settingsCache.get<ShortcutSettings>(
+            CACHE_SECTIONS.SHORTCUTS,
+            forceFresh,
+          )
         : Promise.resolve({ shortcuts: [] }),
       sections.includes(CACHE_SECTIONS.USER_STATS)
         ? settingsCache.get<UserStats>(CACHE_SECTIONS.USER_STATS, forceFresh)
@@ -82,7 +88,9 @@ export class EnhancedSettings {
     const commands =
       commandsResult.status === 'fulfilled' ? commandsResult.value : []
     const userSettings =
-      userSettingsResult.status === 'fulfilled' ? userSettingsResult.value : DefaultSettings as UserSettings
+      userSettingsResult.status === 'fulfilled'
+        ? userSettingsResult.value
+        : (DefaultSettings as UserSettings)
     const stars = starsResult.status === 'fulfilled' ? starsResult.value : []
     const shortcuts =
       shortcutsResult.status === 'fulfilled'
@@ -102,8 +110,6 @@ export class EnhancedSettings {
       userStats,
     })
 
-    // マイグレーション処理（コメントアウト - migrateメソッドが存在しない場合）
-    // mergedSettings = await Settings.migrate(mergedSettings)
 
     // フォルダーのフィルタリング
     mergedSettings.folders = mergedSettings.folders.filter(
@@ -230,10 +236,7 @@ export class EnhancedSettings {
   }
 
   // 変更監視解除
-  removeChangedListener(
-    sections: CacheSection[],
-    callback: () => void,
-  ): void {
+  removeChangedListener(sections: CacheSection[], callback: () => void): void {
     sections.forEach((section) => {
       settingsCache.unsubscribe(section, callback)
     })
@@ -249,39 +252,6 @@ export class EnhancedSettings {
     settingsCache.invalidateAll()
   }
 
-  // 従来の設定APIとの互換性保持
-  async getLegacy(excludeOptions = false): Promise<SettingsType> {
-    return this.get({ excludeOptions })
-  }
-
-  // 従来のset実装との互換性
-  async setLegacy(data: SettingsType, serviceWorker = false): Promise<boolean> {
-    return Settings.set(data, serviceWorker)
-  }
-
-  // 従来のupdate実装との互換性
-  async updateLegacy<T extends keyof SettingsType>(
-    key: T,
-    updater: (value: SettingsType[T]) => SettingsType[T],
-    serviceWorker = false,
-  ): Promise<boolean> {
-    return Settings.update(key, updater, serviceWorker)
-  }
-
-  // コマンド関連の操作
-  async addCommands(commands: Command[]): Promise<boolean> {
-    return Settings.addCommands(commands)
-  }
-
-  async updateCommands(commands: Command[]): Promise<boolean> {
-    return Settings.updateCommands(commands)
-  }
-
-  // 設定リセット
-  async reset(): Promise<void> {
-    await Settings.reset()
-    this.invalidateAllCache()
-  }
 
   // キャッシュ関連
   async getCaches() {
diff --git a/src/services/option/defaultSettings.ts b/src/services/option/defaultSettings.ts
index 3026f72d..0e0f5845 100644
--- a/src/services/option/defaultSettings.ts
+++ b/src/services/option/defaultSettings.ts
@@ -1,4 +1,4 @@
-import { UserSettings, Command } from '@/types'
+import { UserSettings, Command, SettingsType } from '@/types'
 import {
   VERSION,
   OPEN_MODE,
@@ -22,6 +22,38 @@ export const PopupPlacement = {
   alignOffset: 0,
 }
 
+// Empty settings for loading state
+export const emptySettings: SettingsType = {
+  settingVersion: '0.0.0',
+  commands: [],
+  folders: [],
+  pageRules: [],
+  style: STYLE.HORIZONTAL,
+  popupPlacement: {
+    side: SIDE.top,
+    align: ALIGN.start,
+    alignOffset: 0,
+    sideOffset: 0,
+  },
+  linkCommand: {
+    enabled: LINK_COMMAND_ENABLED.ENABLE,
+    openMode: DRAG_OPEN_MODE.PREVIEW_POPUP,
+    showIndicator: true,
+    startupMethod: {
+      method: LINK_COMMAND_STARTUP_METHOD.KEYBOARD,
+      keyboardParam: KEYBOARD.SHIFT,
+      threshold: 150,
+      leftClickHoldParam: 200,
+    },
+  },
+  userStyles: [],
+  startupMethod: { method: STARTUP_METHOD.TEXT_SELECTION },
+  stars: [],
+  commandExecutionCount: 0,
+  hasShownReviewRequest: false,
+  shortcuts: { shortcuts: [] },
+}
+
 export default {
   settingVersion: VERSION,
   popupPlacement: PopupPlacement,

From 532e7c3b300494c54346e5cce0923c04e8584a26 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Thu, 3 Jul 2025 23:14:01 +0900
Subject: [PATCH 51/64] Fix: Translate comments.

---
 src/hooks/useSetting.ts          | 20 ++++++------
 src/services/enhancedSettings.ts | 52 +++++++++++++++-----------------
 src/services/settingsCache.ts    | 48 ++++++++++++++---------------
 3 files changed, 57 insertions(+), 63 deletions(-)

diff --git a/src/hooks/useSetting.ts b/src/hooks/useSetting.ts
index 40d53f9d..9c27fead 100644
--- a/src/hooks/useSetting.ts
+++ b/src/hooks/useSetting.ts
@@ -18,7 +18,7 @@ import type {
 import { isEmpty } from '@/lib/utils'
 import { INHERIT } from '@/const'
 
-// セクション別Hook戻り値の型定義
+// Type definitions for section-specific hook return values
 type SectionData<T extends CacheSection> =
   T extends typeof CACHE_SECTIONS.COMMANDS
     ? Command[]
@@ -32,7 +32,7 @@ type SectionData<T extends CacheSection> =
             ? UserStats
             : any
 
-// 共通の非同期データ取得Hook
+// Common async data fetching hook
 function useAsyncData<T>(
   loader: () => Promise<T>,
   deps: React.DependencyList,
@@ -77,7 +77,7 @@ function useAsyncData<T>(
     await loadData()
   }, [loadData])
 
-  // 初回ロードとクリーンアップ
+  // Initial load and cleanup
   useEffect(() => {
     mountedRef.current = true
     loadData()
@@ -87,7 +87,7 @@ function useAsyncData<T>(
     }
   }, deps)
 
-  // 変更監視の設定
+  // Setup change monitoring
   useEffect(() => {
     if (!subscriptions) return
 
@@ -111,7 +111,7 @@ function useAsyncData<T>(
   return { data, loading, error, refetch }
 }
 
-// セクション別使用Hook
+// Section-specific hook
 export function useSection<T extends CacheSection>(
   section: T,
   forceFresh = false,
@@ -133,7 +133,7 @@ export function useSection<T extends CacheSection>(
   )
 }
 
-// ユーザー設定専用Hook
+// User settings-specific hook
 export function useUserSettings(forceFresh = false) {
   const { data, loading, error, refetch } = useSection(
     CACHE_SECTIONS.USER_SETTINGS,
@@ -159,7 +159,7 @@ export function useUserSettings(forceFresh = false) {
   }
 }
 
-// 統合設定Hook（必要なセクションのみ指定）
+// Integrated settings hook (specify only required sections)
 export function useSetting(
   sections: CacheSection[] = [
     CACHE_SECTIONS.COMMANDS,
@@ -177,7 +177,7 @@ export function useSetting(
   const sectionsRef = useRef(sections)
   const sectionsKey = useMemo(() => sections.join(','), [sections])
 
-  // sectionsが変更された場合の更新
+  // Update when sections change
   useEffect(() => {
     sectionsRef.current = sections
   }, [sections])
@@ -208,7 +208,7 @@ export function useSetting(
     [],
   )
 
-  // ページルール計算
+  // Page rule calculation
   const pageRule = useMemo(() => {
     if (!settings || typeof window === 'undefined') return undefined
 
@@ -244,7 +244,7 @@ export function useSetting(
   }
 }
 
-// Image cacheを適用した設定Hook
+// Settings hook with image cache applied
 export function useSettingsWithImageCache() {
   const { settings, pageRule, loading } = useSetting([
     CACHE_SECTIONS.COMMANDS,
diff --git a/src/services/enhancedSettings.ts b/src/services/enhancedSettings.ts
index e208039a..72a15119 100644
--- a/src/services/enhancedSettings.ts
+++ b/src/services/enhancedSettings.ts
@@ -13,26 +13,26 @@ import { OptionSettings } from '@/services/option/optionSettings'
 import DefaultSettings from '@/services/option/defaultSettings'
 import { OPTION_FOLDER } from '@/const'
 
-// 設定取得オプション
+// Settings fetch options
 interface GetSettingsOptions {
   sections?: CacheSection[]
   forceFresh?: boolean
   excludeOptions?: boolean
 }
 
-// 部分設定型
+// Partial settings type
 type PartialSettingsType = {
   [K in keyof SettingsType]?: SettingsType[K]
 }
 
-// 強化された設定サービス
+// Enhanced settings service
 export class EnhancedSettings {
   constructor() {
-    // 従来のリスナー設定をキャッシュ無効化に対応
+    // Set up legacy listeners for cache invalidation
     this.setupLegacyListeners()
   }
 
-  // 統合設定取得（キャッシュ活用）
+  // Get integrated settings (with cache utilization)
   async get(options: GetSettingsOptions = {}): Promise<SettingsType> {
     const {
       sections = [
@@ -48,7 +48,7 @@ export class EnhancedSettings {
 
     console.debug('EnhancedSettings.get called with sections:', sections)
 
-    // 並列でセクション別取得
+    // Get sections in parallel
     const results = await Promise.allSettled([
       sections.includes(CACHE_SECTIONS.COMMANDS)
         ? settingsCache.get<Command[]>(CACHE_SECTIONS.COMMANDS, forceFresh)
@@ -76,7 +76,7 @@ export class EnhancedSettings {
           }),
     ])
 
-    // 結果の処理
+    // Process results
     const [
       commandsResult,
       userSettingsResult,
@@ -101,7 +101,7 @@ export class EnhancedSettings {
         ? userStatsResult.value
         : { commandExecutionCount: 0, hasShownReviewRequest: false }
 
-    // 設定をマージ
+    // Merge settings
     let mergedSettings = this.mergeSettings({
       commands,
       userSettings,
@@ -110,13 +110,12 @@ export class EnhancedSettings {
       userStats,
     })
 
-
-    // フォルダーのフィルタリング
+    // Filter folders
     mergedSettings.folders = mergedSettings.folders.filter(
       (folder) => !!folder.title,
     )
 
-    // オプション設定の処理
+    // Process option settings
     if (!excludeOptions) {
       this.removeOptionSettings(mergedSettings)
       mergedSettings.commands.push(...OptionSettings.commands)
@@ -126,7 +125,7 @@ export class EnhancedSettings {
     return mergedSettings
   }
 
-  // 部分的な設定取得
+  // Get partial settings
   async getSection<K extends CacheSection>(
     section: K,
     forceFresh = false,
@@ -146,7 +145,7 @@ export class EnhancedSettings {
     return settingsCache.get(section, forceFresh)
   }
 
-  // セクション別更新
+  // Update by section
   async updateSection<T>(
     section: CacheSection,
     updater: (data: T) => T,
@@ -158,7 +157,7 @@ export class EnhancedSettings {
     settingsCache.invalidate([section])
   }
 
-  // ストレージへの保存
+  // Save to storage
   private async saveToStorage(section: CacheSection, data: any): Promise<void> {
     switch (section) {
       case CACHE_SECTIONS.COMMANDS:
@@ -189,7 +188,7 @@ export class EnhancedSettings {
     }
   }
 
-  // 設定マージ
+  // Merge settings
   private mergeSettings(data: {
     commands: Command[]
     userSettings: UserSettings
@@ -207,7 +206,7 @@ export class EnhancedSettings {
     } as SettingsType
   }
 
-  // オプション設定の削除
+  // Remove option settings
   private removeOptionSettings(data: SettingsType): void {
     data.commands = data.commands.filter(
       (c) => c?.parentFolderId !== OPTION_FOLDER,
@@ -215,7 +214,7 @@ export class EnhancedSettings {
     data.folders = data.folders.filter((f) => f.id !== OPTION_FOLDER)
   }
 
-  // 変更監視
+  // Add change listener
   addChangedListener(
     sections: CacheSection[],
     callback: (data: PartialSettingsType) => void,
@@ -235,43 +234,42 @@ export class EnhancedSettings {
     })
   }
 
-  // 変更監視解除
+  // Remove change listener
   removeChangedListener(sections: CacheSection[], callback: () => void): void {
     sections.forEach((section) => {
       settingsCache.unsubscribe(section, callback)
     })
   }
 
-  // キャッシュ無効化
+  // Invalidate cache
   invalidateCache(sections: CacheSection[]): void {
     settingsCache.invalidate(sections)
   }
 
-  // 全キャッシュ無効化
+  // Invalidate all cache
   invalidateAllCache(): void {
     settingsCache.invalidateAll()
   }
 
-
-  // キャッシュ関連
+  // Cache related
   async getCaches() {
     return settingsCache.get(CACHE_SECTIONS.CACHES)
   }
 
-  // 従来リスナーの設定
+  // Setup legacy listeners
   private setupLegacyListeners(): void {
-    // 従来のSettings.addChangedListenerに対応
+    // Handle legacy Settings.addChangedListener
     Settings.addChangedListener((_data: SettingsType) => {
-      // 全キャッシュを無効化（安全策）
+      // Invalidate all cache (safety measure)
       this.invalidateAllCache()
     })
   }
 
-  // デバッグ用
+  // For debugging
   getCacheStatus() {
     return settingsCache.getCacheStatus()
   }
 }
 
-// シングルトンインスタンス
+// Singleton instance
 export const enhancedSettings = new EnhancedSettings()
diff --git a/src/services/settingsCache.ts b/src/services/settingsCache.ts
index 269c7515..3bede678 100644
--- a/src/services/settingsCache.ts
+++ b/src/services/settingsCache.ts
@@ -1,12 +1,8 @@
 import { Storage, STORAGE_KEY, LOCAL_STORAGE_KEY } from './storage'
-import type {
-  UserStats,
-  ShortcutSettings,
-  UserSettings,
-} from '@/types'
+import type { UserStats, ShortcutSettings, UserSettings } from '@/types'
 import { Settings } from './settings'
 
-// キャッシュセクション定数
+// Cache section constants
 export const CACHE_SECTIONS = {
   COMMANDS: 'commands',
   USER_SETTINGS: 'userSettings',
@@ -16,7 +12,7 @@ export const CACHE_SECTIONS = {
   CACHES: 'caches',
 } as const
 
-// キャッシュセクション定義
+// Cache section definition
 export type CacheSection =
   | typeof CACHE_SECTIONS.COMMANDS
   | typeof CACHE_SECTIONS.USER_SETTINGS
@@ -25,7 +21,7 @@ export type CacheSection =
   | typeof CACHE_SECTIONS.USER_STATS
   | typeof CACHE_SECTIONS.CACHES
 
-// キャッシュエントリ
+// Cache entry (internal use)
 interface CacheEntry<T> {
   data: T
   timestamp: number
@@ -33,7 +29,7 @@ interface CacheEntry<T> {
   ttl?: number
 }
 
-// バージョン管理
+// Version management (internal use)
 class DataVersionManager {
   private versions = new Map<CacheSection, string>()
 
@@ -66,32 +62,32 @@ class DataVersionManager {
   }
 }
 
-// 設定キャッシュマネージャー
+// Settings cache manager
 export class SettingsCacheManager {
   private cache = new Map<CacheSection, CacheEntry<any>>()
   private versionManager = new DataVersionManager()
   private listeners = new Map<CacheSection, Set<() => void>>()
-  private readonly DEFAULT_TTL = 5 * 60 * 1000 // 5分
+  private readonly DEFAULT_TTL = 5 * 60 * 1000 // 5 minutes
   private storageListenerSetup = false
 
   constructor() {
     this.setupStorageListener()
   }
 
-  // セクション別データ取得
+  // Get data by section
   async get<T>(section: CacheSection, forceFresh = false): Promise<T> {
     if (!forceFresh && this.isValid(section)) {
-      console.log(`Cache hit for ${section}`)
+      console.debug(`Cache hit for ${section}`)
       return this.cache.get(section)!.data
     }
 
-    console.log(`Loading ${section} from storage`)
+    console.debug(`Loading ${section} from storage`)
     const data = await this.loadFromStorage<T>(section)
     this.setCache(section, data)
     return data
   }
 
-  // キャッシュ設定
+  // Set cache
   private setCache<T>(section: CacheSection, data: T, ttl?: number): void {
     const version = this.versionManager.generateVersion(section, data)
     this.versionManager.setVersion(section, version)
@@ -104,7 +100,7 @@ export class SettingsCacheManager {
     })
   }
 
-  // キャッシュ有効性確認
+  // Check cache validity
   private isValid(section: CacheSection): boolean {
     const entry = this.cache.get(section)
     if (!entry) return false
@@ -115,7 +111,7 @@ export class SettingsCacheManager {
     return !isExpired
   }
 
-  // セクション別無効化
+  // Invalidate by section
   invalidate(sections: CacheSection[]): void {
     console.log(`Invalidating cache for sections: ${sections.join(', ')}`)
     sections.forEach((section) => {
@@ -125,13 +121,13 @@ export class SettingsCacheManager {
     })
   }
 
-  // 全キャッシュ無効化
+  // Invalidate all cache
   invalidateAll(): void {
     const allSections = Array.from(this.cache.keys())
     this.invalidate(allSections)
   }
 
-  // 変更監視登録
+  // Subscribe to changes
   subscribe(section: CacheSection, callback: () => void): void {
     if (!this.listeners.has(section)) {
       this.listeners.set(section, new Set())
@@ -139,7 +135,7 @@ export class SettingsCacheManager {
     this.listeners.get(section)!.add(callback)
   }
 
-  // 変更監視解除
+  // Unsubscribe from changes
   unsubscribe(section: CacheSection, callback: () => void): void {
     const sectionListeners = this.listeners.get(section)
     if (sectionListeners) {
@@ -150,7 +146,7 @@ export class SettingsCacheManager {
     }
   }
 
-  // リスナー通知
+  // Notify listeners
   private notifyListeners(section: CacheSection): void {
     const sectionListeners = this.listeners.get(section)
     if (sectionListeners) {
@@ -164,7 +160,7 @@ export class SettingsCacheManager {
     }
   }
 
-  // ストレージからのデータ読み込み
+  // Load data from storage
   private async loadFromStorage<T>(section: CacheSection): Promise<T> {
     switch (section) {
       case CACHE_SECTIONS.COMMANDS:
@@ -190,11 +186,11 @@ export class SettingsCacheManager {
     }
   }
 
-  // ストレージ変更監視設定
+  // Setup storage change monitoring
   private setupStorageListener(): void {
     if (this.storageListenerSetup) return
 
-    // Chrome storage変更監視
+    // Monitor Chrome storage changes
     chrome.storage.onChanged.addListener((changes, areaName) => {
       console.log(`Storage changed in ${areaName}:`, Object.keys(changes))
 
@@ -224,7 +220,7 @@ export class SettingsCacheManager {
     this.storageListenerSetup = true
   }
 
-  // デバッグ用：キャッシュ状態確認
+  // For debugging: Check cache status
   getCacheStatus(): Record<CacheSection, { cached: boolean; age: number }> {
     const status: Record<string, { cached: boolean; age: number }> = {}
 
@@ -239,5 +235,5 @@ export class SettingsCacheManager {
   }
 }
 
-// シングルトンインスタンス
+// Singleton instance
 export const settingsCache = new SettingsCacheManager()

From baf9498dd3c73f4446a335ee66eef5a2739d6939 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Fri, 4 Jul 2025 12:19:50 +0900
Subject: [PATCH 52/64] Refactoring.

---
 src/hooks/useSetting.ts          | 27 ++++-------
 src/services/enhancedSettings.ts | 78 +-------------------------------
 src/services/settingsCache.ts    |  7 ++-
 3 files changed, 12 insertions(+), 100 deletions(-)

diff --git a/src/hooks/useSetting.ts b/src/hooks/useSetting.ts
index 9c27fead..8fceb839 100644
--- a/src/hooks/useSetting.ts
+++ b/src/hooks/useSetting.ts
@@ -140,22 +140,11 @@ export function useUserSettings(forceFresh = false) {
     forceFresh,
   )
 
-  const updateUserSettings = useCallback(
-    async (updater: (settings: UserSettings) => UserSettings) => {
-      await enhancedSettings.updateSection<UserSettings>(
-        CACHE_SECTIONS.USER_SETTINGS,
-        updater,
-      )
-    },
-    [],
-  )
-
   return {
     userSettings: (data || {}) as UserSettings,
     loading,
     error,
     refetch,
-    updateUserSettings,
   }
 }
 
@@ -200,14 +189,6 @@ export function useSetting(
     })),
   )
 
-  const invalidateCache = useCallback(
-    (sectionsToInvalidate?: CacheSection[]) => {
-      const targetSections = sectionsToInvalidate || sectionsRef.current
-      enhancedSettings.invalidateCache(targetSections)
-    },
-    [],
-  )
-
   // Page rule calculation
   const pageRule = useMemo(() => {
     if (!settings || typeof window === 'undefined') return undefined
@@ -234,6 +215,14 @@ export function useSetting(
     return rule
   }, [settings])
 
+  const invalidateCache = useCallback(
+    (sectionsToInvalidate?: CacheSection[]) => {
+      const targetSections = sectionsToInvalidate || sectionsRef.current
+      enhancedSettings.invalidateCache(targetSections)
+    },
+    [],
+  )
+
   return {
     settings: settings || {},
     pageRule,
diff --git a/src/services/enhancedSettings.ts b/src/services/enhancedSettings.ts
index 72a15119..93601fd8 100644
--- a/src/services/enhancedSettings.ts
+++ b/src/services/enhancedSettings.ts
@@ -8,7 +8,6 @@ import type {
 } from '@/types'
 import { settingsCache, CacheSection, CACHE_SECTIONS } from './settingsCache'
 import { Settings } from './settings'
-import { Storage, STORAGE_KEY, LOCAL_STORAGE_KEY } from './storage'
 import { OptionSettings } from '@/services/option/optionSettings'
 import DefaultSettings from '@/services/option/defaultSettings'
 import { OPTION_FOLDER } from '@/const'
@@ -20,11 +19,6 @@ interface GetSettingsOptions {
   excludeOptions?: boolean
 }
 
-// Partial settings type
-type PartialSettingsType = {
-  [K in keyof SettingsType]?: SettingsType[K]
-}
-
 // Enhanced settings service
 export class EnhancedSettings {
   constructor() {
@@ -46,7 +40,7 @@ export class EnhancedSettings {
       excludeOptions = false,
     } = options
 
-    console.debug('EnhancedSettings.get called with sections:', sections)
+    // console.debug('EnhancedSettings.get called with sections:', sections)
 
     // Get sections in parallel
     const results = await Promise.allSettled([
@@ -145,49 +139,6 @@ export class EnhancedSettings {
     return settingsCache.get(section, forceFresh)
   }
 
-  // Update by section
-  async updateSection<T>(
-    section: CacheSection,
-    updater: (data: T) => T,
-  ): Promise<void> {
-    const currentData = await settingsCache.get<T>(section)
-    const updatedData = updater(currentData)
-
-    await this.saveToStorage(section, updatedData)
-    settingsCache.invalidate([section])
-  }
-
-  // Save to storage
-  private async saveToStorage(section: CacheSection, data: any): Promise<void> {
-    switch (section) {
-      case CACHE_SECTIONS.COMMANDS:
-        await Storage.setCommands(data as Command[])
-        break
-
-      case CACHE_SECTIONS.USER_SETTINGS:
-        await Storage.set<UserSettings>(STORAGE_KEY.USER, data as UserSettings)
-        break
-
-      case CACHE_SECTIONS.STARS:
-        await Storage.set(LOCAL_STORAGE_KEY.STARS, data as Star[])
-        break
-
-      case CACHE_SECTIONS.SHORTCUTS:
-        await Storage.set<ShortcutSettings>(
-          STORAGE_KEY.SHORTCUTS,
-          data as ShortcutSettings,
-        )
-        break
-
-      case CACHE_SECTIONS.USER_STATS:
-        await Storage.set<UserStats>(STORAGE_KEY.USER_STATS, data as UserStats)
-        break
-
-      default:
-        throw new Error(`Cannot save section: ${section}`)
-    }
-  }
-
   // Merge settings
   private mergeSettings(data: {
     commands: Command[]
@@ -214,33 +165,6 @@ export class EnhancedSettings {
     data.folders = data.folders.filter((f) => f.id !== OPTION_FOLDER)
   }
 
-  // Add change listener
-  addChangedListener(
-    sections: CacheSection[],
-    callback: (data: PartialSettingsType) => void,
-  ): void {
-    sections.forEach((section) => {
-      settingsCache.subscribe(section, async () => {
-        try {
-          const data = await this.get({ sections })
-          callback(data)
-        } catch (error) {
-          console.error(
-            `Error in settings change listener for ${section}:`,
-            error,
-          )
-        }
-      })
-    })
-  }
-
-  // Remove change listener
-  removeChangedListener(sections: CacheSection[], callback: () => void): void {
-    sections.forEach((section) => {
-      settingsCache.unsubscribe(section, callback)
-    })
-  }
-
   // Invalidate cache
   invalidateCache(sections: CacheSection[]): void {
     settingsCache.invalidate(sections)
diff --git a/src/services/settingsCache.ts b/src/services/settingsCache.ts
index 3bede678..8a41b1f1 100644
--- a/src/services/settingsCache.ts
+++ b/src/services/settingsCache.ts
@@ -77,11 +77,10 @@ export class SettingsCacheManager {
   // Get data by section
   async get<T>(section: CacheSection, forceFresh = false): Promise<T> {
     if (!forceFresh && this.isValid(section)) {
-      console.debug(`Cache hit for ${section}`)
+      // console.debug(`Cache hit for ${section}`)
       return this.cache.get(section)!.data
     }
 
-    console.debug(`Loading ${section} from storage`)
     const data = await this.loadFromStorage<T>(section)
     this.setCache(section, data)
     return data
@@ -191,8 +190,8 @@ export class SettingsCacheManager {
     if (this.storageListenerSetup) return
 
     // Monitor Chrome storage changes
-    chrome.storage.onChanged.addListener((changes, areaName) => {
-      console.log(`Storage changed in ${areaName}:`, Object.keys(changes))
+    chrome.storage.onChanged.addListener((changes, _areaName) => {
+      // console.log(`Storage changed in ${_areaName}:`, Object.keys(changes))
 
       const sectionsToInvalidate: CacheSection[] = []
 

From 036e58d1a4a58d1216021d55d6d858f77e4c6419 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Fri, 4 Jul 2025 22:34:53 +0900
Subject: [PATCH 53/64] Update: Introduce fallback in command order.

---
 src/services/settings.ts               |   2 +
 src/services/storage.ts                |  13 +-
 src/services/storage/commandStorage.ts | 332 ++++++++++++++++++++-----
 src/services/storage/index.ts          |  10 +-
 4 files changed, 287 insertions(+), 70 deletions(-)

diff --git a/src/services/settings.ts b/src/services/settings.ts
index 6e29ee0e..f1165428 100644
--- a/src/services/settings.ts
+++ b/src/services/settings.ts
@@ -44,10 +44,12 @@ export type ImageCache = {
 }
 
 const callbacks = [] as ((data: SettingsType) => void)[]
+
 Storage.addListener(STORAGE_KEY.USER, async (settings: SettingsType) => {
   settings.commands = await Storage.getCommands()
   callbacks.forEach((cb) => cb(settings))
 })
+
 Storage.addCommandListener(async (commands: Command[]) => {
   const settings = await Settings.get()
   settings.commands = commands
diff --git a/src/services/storage.ts b/src/services/storage.ts
index 4f554e7f..eb071339 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -35,8 +35,8 @@ export const Storage = {
   // Command-specific methods
   ...CommandStorage,
 
-  // New methods for hybrid storage
-  hybridStorage: new HybridCommandStorage(),
+  // New methods for hybrid storage (will be initialized after Storage is defined)
+  hybridStorage: null as unknown as HybridCommandStorage,
 
   // Daily backup manager
   dailyBackupManager: new DailyBackupManager(),
@@ -64,6 +64,13 @@ export const Storage = {
   updateCommands: async (
     commands: Command[],
   ): Promise<boolean | chrome.runtime.LastError> => {
-    return await CommandStorage.updateCommands(commands, Storage.hybridStorage)
+    return await CommandStorage.updateCommands(
+      commands,
+      Storage.hybridStorage,
+      Storage,
+    )
   },
 }
+
+// Initialize hybrid storage after Storage object is defined
+Storage.hybridStorage = new HybridCommandStorage(Storage)
diff --git a/src/services/storage/commandStorage.ts b/src/services/storage/commandStorage.ts
index 617d30d1..1f5d1514 100644
--- a/src/services/storage/commandStorage.ts
+++ b/src/services/storage/commandStorage.ts
@@ -6,9 +6,16 @@ import {
   LOCAL_STORAGE_KEY,
   CMD_PREFIX,
   debouncedSyncSet,
+  KEY,
 } from './index'
 import { VERSION } from '@/const'
 
+// Storage interface for dependency injection
+interface StorageInterface {
+  get<T>(key: KEY): Promise<T>
+  set<T>(key: KEY, value: T): Promise<boolean>
+}
+
 // Command change callbacks
 export type commandChangedCallback = (commands: Command[]) => void
 const commandChangedCallbacks = [] as commandChangedCallback[]
@@ -46,14 +53,17 @@ function generateChecksum(obj: unknown): string {
   return Math.abs(hash).toString(16).padStart(8, '0')
 }
 
-async function loadLegacyCommandData(options?: {
-  returnDefaultOnEmpty?: boolean
-  throwOnError?: boolean
-}): Promise<Command[]> {
+async function loadLegacyCommandData(
+  storage: StorageInterface,
+  options?: {
+    returnDefaultOnEmpty?: boolean
+    throwOnError?: boolean
+  },
+): Promise<Command[]> {
   const { returnDefaultOnEmpty = false, throwOnError = false } = options || {}
 
   try {
-    const count = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+    const count = await storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
     if (count === DEFAULT_COUNT) {
       return returnDefaultOnEmpty ? DefaultCommands : []
     }
@@ -77,13 +87,17 @@ async function loadLegacyCommandData(options?: {
 
 // Type definitions for hybrid storage
 interface CommandMetadata {
-  order: string[] // Command ID order array
-  syncCount: number // Number of commands saved in sync storage
-  localCount: number // Number of commands saved in local storage
+  count: number // Number of commands saved in this storage
   version: number // Data version (timestamp)
   checksum: string // Hash for integrity checking
 }
 
+interface GlobalCommandMetadata {
+  globalOrder: string[] // Global command order array
+  version: number // Global data version (timestamp)
+  lastUpdated: number // Last update timestamp
+}
+
 interface StorageAllocation {
   sync: {
     commands: Command[]
@@ -95,7 +109,9 @@ interface StorageAllocation {
     totalBytes: number
     itemCount: number
   }
-  metadata: CommandMetadata
+  syncMetadata: CommandMetadata
+  localMetadata: CommandMetadata
+  globalMetadata: GlobalCommandMetadata
 }
 
 // Storage capacity calculation class
@@ -164,7 +180,7 @@ class StorageCapacityCalculator {
         totalBytes: localCommands.reduce((sum, item) => sum + item.size, 0),
         itemCount: localCommands.length,
       },
-      metadata: this.createMetadata(
+      ...this.createMetadata(
         commands,
         syncCommands.length,
         localCommands.length,
@@ -176,60 +192,140 @@ class StorageCapacityCalculator {
     allCommands: Command[],
     syncCount: number,
     localCount: number,
-  ): CommandMetadata {
+  ): {
+    syncMetadata: CommandMetadata
+    localMetadata: CommandMetadata
+    globalMetadata: GlobalCommandMetadata
+  } {
+    const syncCommands = allCommands.slice(0, syncCount)
+    const localCommands = allCommands.slice(syncCount)
+    const timestamp = Date.now()
+
     return {
-      order: allCommands.map((cmd) => cmd.id),
-      syncCount,
-      localCount,
-      version: Date.now(),
-      checksum: generateChecksum(allCommands),
+      syncMetadata: {
+        count: syncCount,
+        version: timestamp,
+        checksum: generateChecksum(syncCommands),
+      },
+      localMetadata: {
+        count: localCount,
+        version: timestamp,
+        checksum: generateChecksum(localCommands),
+      },
+      globalMetadata: {
+        globalOrder: allCommands.map((cmd) => cmd.id),
+        version: timestamp,
+        lastUpdated: timestamp,
+      },
     }
   }
 }
 
-// Metadata management class
-class MetadataManager {
-  private readonly METADATA_KEY = STORAGE_KEY.COMMAND_METADATA
-  private readonly LOCAL_COUNT_KEY = LOCAL_STORAGE_KEY.COMMAND_LOCAL_COUNT
+// Command metadata management class
+class CommandMetadataManager {
+  private readonly SYNC_METADATA_KEY = STORAGE_KEY.SYNC_COMMAND_METADATA
+  private readonly LOCAL_METADATA_KEY = LOCAL_STORAGE_KEY.LOCAL_COMMAND_METADATA
+  private readonly GLOBAL_METADATA_KEY = STORAGE_KEY.GLOBAL_COMMAND_METADATA
+  private storage: StorageInterface
 
-  async saveMetadata(metadata: CommandMetadata): Promise<void> {
-    // Save metadata body to sync storage
-    await BaseStorage.set(this.METADATA_KEY, metadata)
+  constructor(storage: StorageInterface = BaseStorage) {
+    this.storage = storage
+  }
 
-    // Also save local count to local storage (redundancy)
-    await BaseStorage.set(this.LOCAL_COUNT_KEY, metadata.localCount)
+  async saveSyncCommandMetadata(metadata: CommandMetadata): Promise<void> {
+    await this.storage.set(this.SYNC_METADATA_KEY, metadata)
   }
 
-  async loadMetadata(): Promise<CommandMetadata | null> {
+  async saveLocalCommandMetadata(metadata: CommandMetadata): Promise<void> {
+    await this.storage.set(this.LOCAL_METADATA_KEY, metadata)
+  }
+
+  async saveGlobalCommandMetadata(
+    metadata: GlobalCommandMetadata,
+  ): Promise<void> {
+    // Save only to sync storage for consistency across devices
+    await this.storage.set(this.GLOBAL_METADATA_KEY, metadata)
+  }
+
+  async loadSyncCommandMetadata(): Promise<CommandMetadata | null> {
     try {
-      const metadata = await BaseStorage.get<CommandMetadata>(this.METADATA_KEY)
+      const metadata = await this.storage.get<CommandMetadata>(
+        this.SYNC_METADATA_KEY,
+      )
       return metadata || null
     } catch (error) {
-      console.error('Failed to load metadata:', error)
+      console.error('Failed to load sync metadata:', error)
       return null
     }
   }
 
-  async validateMetadata(commands: Command[]): Promise<boolean> {
-    const metadata = await this.loadMetadata()
+  async loadLocalCommandMetadata(): Promise<CommandMetadata | null> {
+    try {
+      const metadata = await this.storage.get<CommandMetadata>(
+        this.LOCAL_METADATA_KEY,
+      )
+      return metadata || null
+    } catch (error) {
+      console.error('Failed to load local metadata:', error)
+      return null
+    }
+  }
+
+  async loadGlobalCommandMetadata(): Promise<GlobalCommandMetadata | null> {
+    try {
+      // Load only from sync storage
+      const metadata = await this.storage.get<GlobalCommandMetadata>(
+        this.GLOBAL_METADATA_KEY,
+      )
+      return metadata || null
+    } catch (error) {
+      console.error('Failed to load global metadata:', error)
+      return null
+    }
+  }
+
+  async validateCommandIntegrity(
+    commands: Command[],
+    metadata: CommandMetadata,
+  ): Promise<boolean> {
     if (!metadata) return false
 
     // Basic integrity check
-    const totalCount = metadata.syncCount + metadata.localCount
-    if (totalCount !== commands.length) return false
+    if (metadata.count !== commands.length) return false
 
     // Checksum-based integrity check
     const currentChecksum = generateChecksum(commands)
     return metadata.checksum === currentChecksum
   }
 
+  async validateGlobalConsistency(allCommands: Command[]): Promise<boolean> {
+    const globalMetadata = await this.loadGlobalCommandMetadata()
+    if (!globalMetadata) return false
+
+    // Check if global order matches actual commands
+    const actualIds = allCommands.map((cmd) => cmd.id)
+    const expectedIds = globalMetadata.globalOrder
+
+    return (
+      actualIds.length === expectedIds.length &&
+      actualIds.every((id, index) => id === expectedIds[index])
+    )
+  }
+
   // Migration determination
   async needsMigration(): Promise<boolean> {
-    const metadata = await this.loadMetadata()
-    const oldCount = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
-
-    // When metadata doesn't exist but legacy format data exists
-    return !metadata && oldCount !== DEFAULT_COUNT
+    const syncMetadata = await this.loadSyncCommandMetadata()
+    const localMetadata = await this.loadLocalCommandMetadata()
+    const globalMetadata = await this.loadGlobalCommandMetadata()
+    const oldCount = await this.storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+
+    // When new metadata doesn't exist but legacy format data exists
+    return (
+      !syncMetadata &&
+      !localMetadata &&
+      !globalMetadata &&
+      oldCount !== DEFAULT_COUNT
+    )
   }
 }
 
@@ -237,13 +333,18 @@ class MetadataManager {
 export class CommandMigrationManager {
   private readonly MIGRATION_VERSION = VERSION
   private readonly MIGRATION_FLAG_KEY = LOCAL_STORAGE_KEY.MIGRATION_STATUS
+  private storage: StorageInterface
+
+  constructor(storage: StorageInterface = BaseStorage) {
+    this.storage = storage
+  }
 
   async performMigration(): Promise<Command[]> {
     try {
       console.debug('Starting command migration to hybrid storage...')
 
       // Step 1: Load legacy format data
-      const legacyCommands = await loadLegacyCommandData()
+      const legacyCommands = await loadLegacyCommandData(this.storage)
       if (legacyCommands.length === 0) {
         return DefaultCommands
       }
@@ -252,11 +353,11 @@ export class CommandMigrationManager {
       await this.backupCommands(legacyCommands)
 
       // Step 3: Save in new format
-      const hybridStorage = new HybridCommandStorage()
+      const hybridStorage = new HybridCommandStorage(this.storage)
       await hybridStorage.saveCommands(legacyCommands)
 
       // Step 4: Set migration completion flag
-      await BaseStorage.set(this.MIGRATION_FLAG_KEY, {
+      await this.storage.set(this.MIGRATION_FLAG_KEY, {
         version: this.MIGRATION_VERSION,
         migratedAt: Date.now(),
         commandCount: legacyCommands.length,
@@ -286,7 +387,7 @@ export class CommandMigrationManager {
 
   async needsMigration(): Promise<boolean> {
     try {
-      const migrationStatus = (await BaseStorage.get(
+      const migrationStatus = (await this.storage.get(
         this.MIGRATION_FLAG_KEY,
       )) as {
         version?: string
@@ -301,15 +402,19 @@ export class CommandMigrationManager {
       // Migration flag doesn't exist = migration not performed
     }
 
-    const legacyCount = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+    const legacyCount = await this.storage.get<number>(
+      STORAGE_KEY.COMMAND_COUNT,
+    )
     return legacyCount !== DEFAULT_COUNT
   }
 
   private async backupCommands(commands: Command[]): Promise<void> {
     // Get folders from settings directly from storage to avoid circular dependency
-    const userSettings = await BaseStorage.get(STORAGE_KEY.USER) as any
+    const userSettings = (await this.storage.get(STORAGE_KEY.USER)) as {
+      folders?: import('@/types').CommandFolder[]
+    }
     const folders = userSettings?.folders || []
-    
+
     const backup = {
       version: 'legacy',
       timestamp: Date.now(),
@@ -348,7 +453,10 @@ export class CommandMigrationManager {
   /**
    * Restore both commands and folders from legacy backup
    */
-  async restoreFromBackupWithFolders(): Promise<{ commands: Command[]; folders: import('@/types').CommandFolder[] }> {
+  async restoreFromBackupWithFolders(): Promise<{
+    commands: Command[]
+    folders: import('@/types').CommandFolder[]
+  }> {
     try {
       const result = await chrome.storage.local.get(
         LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
@@ -375,7 +483,13 @@ export class CommandMigrationManager {
 // Hybrid command storage class
 export class HybridCommandStorage {
   public calculator = new StorageCapacityCalculator()
-  private metadataManager = new MetadataManager()
+  private metadataManager: CommandMetadataManager
+  private storage: StorageInterface
+
+  constructor(storage: StorageInterface = BaseStorage) {
+    this.storage = storage
+    this.metadataManager = new CommandMetadataManager(this.storage)
+  }
 
   async saveCommands(commands: Command[]): Promise<boolean> {
     try {
@@ -383,7 +497,7 @@ export class HybridCommandStorage {
       const allocation = this.calculator.analyzeAndAllocate(commands)
 
       // Step 2: Save commands and metadata atomically
-      await this.saveCommandsAndMetadataAtomically(allocation)
+      await this.saveCommandsAndMetadata(allocation)
       return true
     } catch (error) {
       console.error('Failed to save commands:', error)
@@ -403,23 +517,85 @@ export class HybridCommandStorage {
       }
 
       // Step 2: Load metadata
-      const metadata = await this.metadataManager.loadMetadata()
-      if (!metadata) {
+      const [syncMetadata, localMetadata, globalMetadata] = await Promise.all([
+        this.metadataManager.loadSyncCommandMetadata(),
+        this.metadataManager.loadLocalCommandMetadata(),
+        this.metadataManager.loadGlobalCommandMetadata(),
+      ])
+
+      if (!syncMetadata && !localMetadata && !globalMetadata) {
         return DefaultCommands
       }
 
       // Step 3: Load commands from both storage areas
       const [syncCommands, localCommands] = await Promise.all([
-        this.loadFromSync(metadata.syncCount),
-        this.loadFromLocal(metadata.localCount),
+        this.loadFromSync(syncMetadata?.count || 0),
+        this.loadFromLocal(localMetadata?.count || 0),
       ])
 
-      // Step 4: Merge in metadata order
+      // Step 4: Merge and order commands with fallback
       const allCommands = [...syncCommands, ...localCommands]
-      const orderedCommands = this.reorderCommands(allCommands, metadata.order)
+      let orderedCommands: Command[]
+
+      if (globalMetadata) {
+        // Reorder commands according to global order, ignoring non-existent commands
+        orderedCommands = this.reorderCommands(
+          allCommands,
+          globalMetadata.globalOrder,
+        )
+
+        // Check if there are missing commands
+        const expectedCount = globalMetadata.globalOrder.length
+        const actualCount = orderedCommands.length
+
+        if (actualCount < expectedCount) {
+          console.debug(
+            `Missing ${expectedCount - actualCount} commands from global order`,
+          )
+          // Update global metadata if necessary
+          await this.updateGlobalMetadataForMissingCommands(orderedCommands)
+        }
+      } else {
+        // Fallback: merge with sync commands first
+        orderedCommands = allCommands
+      }
+
+      // Step 5: Integrity checks
+      let hasIntegrityIssues = false
+
+      if (syncMetadata && syncCommands.length > 0) {
+        if (
+          !(await this.metadataManager.validateCommandIntegrity(
+            syncCommands,
+            syncMetadata,
+          ))
+        ) {
+          console.debug('Sync command integrity check failed')
+          hasIntegrityIssues = true
+        }
+      }
+
+      if (localMetadata && localCommands.length > 0) {
+        if (
+          !(await this.metadataManager.validateCommandIntegrity(
+            localCommands,
+            localMetadata,
+          ))
+        ) {
+          console.debug('Local command integrity check failed')
+          hasIntegrityIssues = true
+        }
+      }
+
+      if (
+        globalMetadata &&
+        !(await this.metadataManager.validateGlobalConsistency(orderedCommands))
+      ) {
+        console.debug('Global consistency check failed')
+        hasIntegrityIssues = true
+      }
 
-      // Step 5: Integrity check
-      if (!(await this.metadataManager.validateMetadata(orderedCommands))) {
+      if (hasIntegrityIssues) {
         console.debug(
           `Command integrity check failed (attempt ${retryCount + 1}/${MAX_RETRIES + 1})`,
         )
@@ -441,7 +617,7 @@ export class HybridCommandStorage {
     }
   }
 
-  private async saveCommandsAndMetadataAtomically(
+  private async saveCommandsAndMetadata(
     allocation: StorageAllocation,
   ): Promise<void> {
     const syncSavePromises: Promise<void>[] = []
@@ -463,15 +639,17 @@ export class HybridCommandStorage {
     const localSavePromise = chrome.storage.local.set(dataToSet)
 
     // Add metadata save to the same promise batch
-    const metadataSavePromise = this.metadataManager.saveMetadata(
-      allocation.metadata,
-    )
+    const metadataSavePromises = [
+      this.metadataManager.saveSyncCommandMetadata(allocation.syncMetadata),
+      this.metadataManager.saveLocalCommandMetadata(allocation.localMetadata),
+      this.metadataManager.saveGlobalCommandMetadata(allocation.globalMetadata),
+    ]
 
     // Save commands and metadata atomically in parallel
     await Promise.all([
       await Promise.all(syncSavePromises),
       localSavePromise,
-      metadataSavePromise,
+      await Promise.all(metadataSavePromises),
     ])
   }
 
@@ -498,9 +676,34 @@ export class HybridCommandStorage {
 
   private reorderCommands(commands: Command[], order: string[]): Command[] {
     const commandMap = new Map(commands.map((cmd) => [cmd.id, cmd]))
-    return order
-      .map((id) => commandMap.get(id))
-      .filter((cmd): cmd is Command => cmd != null)
+    const orderedCommands: Command[] = []
+
+    // Reorder according to global order (existing commands only)
+    for (const id of order) {
+      const command = commandMap.get(id)
+      if (command) {
+        orderedCommands.push(command)
+        commandMap.delete(id)
+      }
+    }
+
+    // Add new commands not in global order to the end
+    orderedCommands.push(...commandMap.values())
+
+    return orderedCommands
+  }
+
+  private async updateGlobalMetadataForMissingCommands(
+    actualCommands: Command[],
+  ): Promise<void> {
+    const updatedGlobalMetadata: GlobalCommandMetadata = {
+      globalOrder: actualCommands.map((cmd) => cmd.id),
+      version: Date.now(),
+      lastUpdated: Date.now(),
+    }
+
+    // Update global metadata to match actual commands
+    await this.metadataManager.saveGlobalCommandMetadata(updatedGlobalMetadata)
   }
 }
 
@@ -514,13 +717,14 @@ export const CommandStorage = {
   updateCommands: async (
     commands: Command[],
     hybridStorage: HybridCommandStorage,
+    storage: StorageInterface = BaseStorage,
   ): Promise<boolean | chrome.runtime.LastError> => {
     const current = await hybridStorage.loadCommands()
 
     // TODO: use metadate
 
     // If update first time, set DefaultCommands.
-    const count = await BaseStorage.get<number>(STORAGE_KEY.COMMAND_COUNT)
+    const count = await storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
     if (count === DEFAULT_COUNT) {
       console.debug('Update first time, set DefaultCommands.')
       const newCommands = current.map((cmd) => {
diff --git a/src/services/storage/index.ts b/src/services/storage/index.ts
index 571638bb..6766fb13 100644
--- a/src/services/storage/index.ts
+++ b/src/services/storage/index.ts
@@ -8,7 +8,8 @@ export enum STORAGE_KEY {
   COMMAND_COUNT = 2,
   USER_STATS = 3,
   SHORTCUTS = 4,
-  COMMAND_METADATA = 5,
+  SYNC_COMMAND_METADATA = 5,
+  GLOBAL_COMMAND_METADATA = 6,
 }
 
 export enum LOCAL_STORAGE_KEY {
@@ -20,6 +21,7 @@ export enum LOCAL_STORAGE_KEY {
   MIGRATION_STATUS = 'migrationStatus',
   COMMANDS_BACKUP = 'commandsBackup',
   DAILY_COMMANDS_BACKUP = 'dailyCommandsBackup',
+  LOCAL_COMMAND_METADATA = 'localCommandMetadata',
 }
 
 export enum SESSION_STORAGE_KEY {
@@ -80,7 +82,8 @@ const DEFAULTS = {
   [STORAGE_KEY.SHORTCUTS]: {
     shortcuts: [],
   },
-  [STORAGE_KEY.COMMAND_METADATA]: null,
+  [STORAGE_KEY.SYNC_COMMAND_METADATA]: null,
+  [STORAGE_KEY.GLOBAL_COMMAND_METADATA]: null,
   [LOCAL_STORAGE_KEY.CACHES]: {
     images: {},
   },
@@ -91,6 +94,7 @@ const DEFAULTS = {
   [LOCAL_STORAGE_KEY.MIGRATION_STATUS]: null,
   [LOCAL_STORAGE_KEY.COMMANDS_BACKUP]: null,
   [LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP]: null,
+  [LOCAL_STORAGE_KEY.LOCAL_COMMAND_METADATA]: null,
   [SESSION_STORAGE_KEY.BG]: {},
   [SESSION_STORAGE_KEY.SESSION_DATA]: null,
   [SESSION_STORAGE_KEY.MESSAGE_QUEUE]: [],
@@ -198,4 +202,4 @@ export const BaseStorage = {
   },
 }
 
-export { debouncedSyncSet }
\ No newline at end of file
+export { debouncedSyncSet }

From 91e72eea1fc527776d8f51b8c05e22a2d98cfc01 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 5 Jul 2025 08:14:33 +0900
Subject: [PATCH 54/64] Add: Weekly backup.

---
 package.json                                  |   6 +-
 renovate.json                                 |   4 +-
 src/background_script.ts                      |  18 ++
 src/components/Popup.module.css               |   5 +-
 src/components/option/ImportExport.tsx        | 237 ++++++++++++++----
 src/components/option/Option.module.css       |  19 +-
 .../pageAction/PageActionRecorder.tsx         |   1 -
 src/hooks/useDetectLinkCommand.ts             |   3 +-
 src/services/storage.ts                       |   9 +-
 src/services/storage/backupManager.ts         |  83 ++++--
 src/services/storage/commandStorage.ts        |   6 +-
 src/services/storage/index.ts                 |   4 +-
 src/services/storage/storageUsage.ts          |   6 +-
 tsconfig.node.json                            |  13 +-
 yarn.lock                                     | 123 +++------
 15 files changed, 342 insertions(+), 195 deletions(-)

diff --git a/package.json b/package.json
index 062b99e6..d22ee9f6 100644
--- a/package.json
+++ b/package.json
@@ -74,8 +74,8 @@
     "husky": "^9.1.7",
     "npm-build-zip": "^1.0.4",
     "postcss": "^8.4.49",
-    "prettier": "^3.3.3",
-    "pretty-quick": "^4.0.0",
+    "prettier": "^3.6.2",
+    "pretty-quick": "^4.2.2",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
@@ -93,7 +93,7 @@
   },
   "prettier": {
     "semi": false,
-    "singleQuote": true,
+    "singleQuote": false,
     "tabWidth": 2,
     "trailingComma": "all"
   },
diff --git a/renovate.json b/renovate.json
index 3c80f928..b07b5798 100644
--- a/renovate.json
+++ b/renovate.json
@@ -1,7 +1,5 @@
 {
-  "extends": [
-    "config:base"
-  ],
+  "extends": ["config:base"],
   "automerge": true,
   "major": {
     "automerge": false
diff --git a/src/background_script.ts b/src/background_script.ts
index ed8318ae..54f5bf88 100644
--- a/src/background_script.ts
+++ b/src/background_script.ts
@@ -499,11 +499,17 @@ chrome.runtime.onInstalled.addListener((details) => {
 
   // Check for daily backup on startup
   checkAndPerformDailyBackup()
+
+  // Check for weekly backup on startup
+  checkAndPerformWeeklyBackup()
 })
 
 chrome.runtime.onStartup.addListener(() => {
   // Check for daily backup on browser startup
   checkAndPerformDailyBackup()
+
+  // Check for weekly backup on browser startup
+  checkAndPerformWeeklyBackup()
 })
 
 // Daily backup check function
@@ -518,6 +524,18 @@ const checkAndPerformDailyBackup = async () => {
   }
 }
 
+// Weekly backup check function
+const checkAndPerformWeeklyBackup = async () => {
+  try {
+    const weeklyBackupManager = Storage.weeklyBackupManager
+    if (await weeklyBackupManager.shouldBackup()) {
+      await weeklyBackupManager.performWeeklyBackup()
+    }
+  } catch (error) {
+    console.error('Failed to perform weekly backup check:', error)
+  }
+}
+
 Settings.addChangedListener(() => ContextMenu.init())
 
 // for debug
diff --git a/src/components/Popup.module.css b/src/components/Popup.module.css
index 50677169..4aed3138 100644
--- a/src/components/Popup.module.css
+++ b/src/components/Popup.module.css
@@ -19,7 +19,8 @@
   --background: var(--sc-bg-color-h) var(--sc-bg-color-s) var(--sc-bg-color-l);
   --foreground: 222.2 47.4% 11.2%;
   --border: var(--sc-bd-color-h) var(--sc-bd-color-s) var(--sc-bd-color-l);
-  --accent: var(--sc-bg-color-h) var(--sc-bg-color-s) calc(var(--sc-bg-color-l) - 6%);
+  --accent: var(--sc-bg-color-h) var(--sc-bg-color-s)
+    calc(var(--sc-bg-color-l) - 6%);
   --accent-foreground: 224 71% 4%;
 }
 
@@ -34,7 +35,7 @@
 .previewContainer {
   position: relative;
 
-  &>div {
+  & > div {
     transform: translate(0, 0) !important;
   }
 }
diff --git a/src/components/option/ImportExport.tsx b/src/components/option/ImportExport.tsx
index 6295cd36..49b87693 100644
--- a/src/components/option/ImportExport.tsx
+++ b/src/components/option/ImportExport.tsx
@@ -2,8 +2,15 @@ import { useState, useRef, useEffect } from 'react'
 import { Dialog } from './Dialog'
 import type { UserSettings } from '@/types'
 
-import { Storage, STORAGE_KEY, CommandMigrationManager } from '@/services/storage'
-import { DailyBackupManager } from '@/services/storage/backupManager'
+import {
+  Storage,
+  STORAGE_KEY,
+  CommandMigrationManager,
+} from '@/services/storage'
+import {
+  DailyBackupManager,
+  WeeklyBackupManager,
+} from '@/services/storage/backupManager'
 import { Settings, migrate } from '@/services/settings'
 import { isBase64, isUrl } from '@/lib/utils'
 import { APP_ID } from '@/const'
@@ -29,14 +36,38 @@ export function ImportExport() {
   const [restoreDialog, setRestoreDialog] = useState(false)
   const [importJson, setImportJson] = useState<UserSettings>()
   const [backupData, setBackupData] = useState<{
-    legacy: { status: 'checking' | 'available' | 'none'; info: { timestamp: number; commandCount: number; folderCount?: number } | null }
-    daily: { status: 'checking' | 'available' | 'none'; info: { timestamp: number; commandCount: number; folderCount?: number } | null }
-    weekly?: { status: 'checking' | 'available' | 'none'; info: { timestamp: number; commandCount: number; folderCount?: number } | null }
+    legacy: {
+      status: 'checking' | 'available' | 'none'
+      info: {
+        timestamp: number
+        commandCount: number
+        folderCount?: number
+      } | null
+    }
+    daily: {
+      status: 'checking' | 'available' | 'none'
+      info: {
+        timestamp: number
+        commandCount: number
+        folderCount?: number
+      } | null
+    }
+    weekly: {
+      status: 'checking' | 'available' | 'none'
+      info: {
+        timestamp: number
+        commandCount: number
+        folderCount?: number
+      } | null
+    }
   }>({
     legacy: { status: 'checking', info: null },
     daily: { status: 'checking', info: null },
+    weekly: { status: 'checking', info: null },
   })
-  const [selectedBackupType, setSelectedBackupType] = useState<'legacy' | 'daily' | 'weekly'>('legacy')
+  const [selectedBackupType, setSelectedBackupType] = useState<
+    'legacy' | 'daily' | 'weekly'
+  >('legacy')
   const inputFile = useRef<HTMLInputElement>(null)
 
   // Check backup status on initialization
@@ -47,19 +78,27 @@ export function ImportExport() {
   const checkBackupStatus = async () => {
     try {
       const newBackupData = { ...backupData }
-      
+
       // Check legacy backup
-      const legacyResult = await chrome.storage.local.get('legacy_commands_backup')
+      const legacyResult = await chrome.storage.local.get(
+        'legacy_commands_backup',
+      )
       const legacyBackup = legacyResult.legacy_commands_backup
-      
-      if (legacyBackup && legacyBackup.commands && Array.isArray(legacyBackup.commands)) {
+
+      if (
+        legacyBackup &&
+        legacyBackup.commands &&
+        Array.isArray(legacyBackup.commands)
+      ) {
         newBackupData.legacy = {
           status: 'available',
           info: {
             timestamp: legacyBackup.timestamp,
             commandCount: legacyBackup.commands.length,
-            folderCount: Array.isArray(legacyBackup.folders) ? legacyBackup.folders.length : 0
-          }
+            folderCount: Array.isArray(legacyBackup.folders)
+              ? legacyBackup.folders.length
+              : 0,
+          },
         }
       } else {
         newBackupData.legacy = { status: 'none', info: null }
@@ -68,33 +107,65 @@ export function ImportExport() {
       // Check daily backup
       const dailyBackupManager = new DailyBackupManager()
       const dailyBackup = await dailyBackupManager.getLastBackupData()
-      
-      if (dailyBackup && dailyBackup.commands && Array.isArray(dailyBackup.commands)) {
+
+      if (
+        dailyBackup &&
+        dailyBackup.commands &&
+        Array.isArray(dailyBackup.commands)
+      ) {
         newBackupData.daily = {
           status: 'available',
           info: {
             timestamp: dailyBackup.timestamp,
             commandCount: dailyBackup.commands.length,
-            folderCount: Array.isArray(dailyBackup.folders) ? dailyBackup.folders.length : 0
-          }
+            folderCount: Array.isArray(dailyBackup.folders)
+              ? dailyBackup.folders.length
+              : 0,
+          },
         }
       } else {
         newBackupData.daily = { status: 'none', info: null }
       }
-      
+
+      // Check weekly backup
+      const weeklyBackupManager = new WeeklyBackupManager()
+      const weeklyBackup = await weeklyBackupManager.getLastBackupData()
+
+      if (
+        weeklyBackup &&
+        weeklyBackup.commands &&
+        Array.isArray(weeklyBackup.commands)
+      ) {
+        newBackupData.weekly = {
+          status: 'available',
+          info: {
+            timestamp: weeklyBackup.timestamp,
+            commandCount: weeklyBackup.commands.length,
+            folderCount: Array.isArray(weeklyBackup.folders)
+              ? weeklyBackup.folders.length
+              : 0,
+          },
+        }
+      } else {
+        newBackupData.weekly = { status: 'none', info: null }
+      }
+
       setBackupData(newBackupData)
-      
+
       // Set default selection to first available backup
       if (newBackupData.legacy.status === 'available') {
         setSelectedBackupType('legacy')
       } else if (newBackupData.daily.status === 'available') {
         setSelectedBackupType('daily')
+      } else if (newBackupData.weekly.status === 'available') {
+        setSelectedBackupType('weekly')
       }
     } catch (error) {
       console.error('Failed to check backup status:', error)
       setBackupData({
         legacy: { status: 'none', info: null },
         daily: { status: 'none', info: null },
+        weekly: { status: 'none', info: null },
       })
     }
   }
@@ -155,13 +226,14 @@ export function ImportExport() {
 
   const handleImportClose = (ret: boolean) => {
     if (ret && importJson != null) {
-      ; (async () => {
-        const { commandExecutionCount = 0, hasShownReviewRequest = false } = await Settings.get()
+      ;(async () => {
+        const { commandExecutionCount = 0, hasShownReviewRequest = false } =
+          await Settings.get()
         const data = await migrate({
           ...importJson,
           commandExecutionCount,
           hasShownReviewRequest,
-          stars: []
+          stars: [],
         })
         await Settings.set(data)
         location.reload()
@@ -171,28 +243,31 @@ export function ImportExport() {
   }
 
   const handleRestore = async () => {
-    const hasAnyBackup = Object.values(backupData).some(backup => backup.status === 'available')
-    
+    const hasAnyBackup = Object.values(backupData).some(
+      (backup) => backup.status === 'available',
+    )
+
     if (!hasAnyBackup) {
       alert('No backup data found.')
       return
     }
-    
+
     setRestoreDialog(true)
   }
 
   const handleRestoreClose = (ret: boolean) => {
     if (ret) {
-      ; (async () => {
+      ;(async () => {
         try {
           let backupCommands: any[] = []
-          
+
           if (selectedBackupType === 'legacy') {
             // Restore from legacy backup
             const migrationManager = new CommandMigrationManager()
-            const legacyData = await migrationManager.restoreFromBackupWithFolders()
+            const legacyData =
+              await migrationManager.restoreFromBackupWithFolders()
             backupCommands = legacyData.commands
-            
+
             if (legacyData.folders && legacyData.folders.length > 0) {
               // Restore folders to settings
               const currentSettings = await Settings.get()
@@ -206,7 +281,7 @@ export function ImportExport() {
             const dailyBackupManager = new DailyBackupManager()
             const dailyData = await dailyBackupManager.restoreFromDailyBackup()
             backupCommands = dailyData.commands
-            
+
             if (dailyData.folders && dailyData.folders.length > 0) {
               // Restore folders to settings
               const currentSettings = await Settings.get()
@@ -215,9 +290,23 @@ export function ImportExport() {
                 folders: dailyData.folders,
               })
             }
+          } else if (selectedBackupType === 'weekly') {
+            // Restore from weekly backup
+            const weeklyBackupManager = new WeeklyBackupManager()
+            const weeklyData =
+              await weeklyBackupManager.restoreFromWeeklyBackup()
+            backupCommands = weeklyData.commands
+
+            if (weeklyData.folders && weeklyData.folders.length > 0) {
+              // Restore folders to settings
+              const currentSettings = await Settings.get()
+              await Settings.set({
+                ...currentSettings,
+                folders: weeklyData.folders,
+              })
+            }
           }
-          // Future: handle weekly backup type
-          
+
           if (backupCommands.length > 0) {
             // Save restored commands
             await Storage.setCommands(backupCommands)
@@ -254,21 +343,35 @@ export function ImportExport() {
           <Upload size={18} className="mr-2 stroke-gray-600" />
           {t('Option_Export')}
         </button>
-        <button 
-          onClick={handleRestore} 
-          className={css.menuButton} 
+        <button
+          onClick={handleRestore}
+          className={css.menuButton}
           type="button"
-          disabled={!Object.values(backupData).some(backup => backup.status === 'available')}
+          disabled={
+            !Object.values(backupData).some(
+              (backup) => backup.status === 'available',
+            )
+          }
           title={
-            Object.values(backupData).every(backup => backup.status === 'checking') ? 'Checking backups...' :
-            !Object.values(backupData).some(backup => backup.status === 'available') ? 'No backup available' :
-            'Restore commands from backup'
+            Object.values(backupData).every(
+              (backup) => backup.status === 'checking',
+            )
+              ? 'Checking backups...'
+              : !Object.values(backupData).some(
+                    (backup) => backup.status === 'available',
+                  )
+                ? 'No backup available'
+                : 'Restore commands from backup'
           }
         >
           <RotateCcw size={18} className="mr-2 stroke-gray-600" />
           Restore from Backup
-          {Object.values(backupData).every(backup => backup.status === 'checking') && <span className="ml-2 text-xs opacity-50">...</span>}
-          {!Object.values(backupData).some(backup => backup.status === 'available') && <span className="ml-2 text-xs opacity-50">(N/A)</span>}
+          {Object.values(backupData).every(
+            (backup) => backup.status === 'checking',
+          ) && <span className="ml-2 text-xs opacity-50">...</span>}
+          {!Object.values(backupData).some(
+            (backup) => backup.status === 'available',
+          ) && <span className="ml-2 text-xs opacity-50">(N/A)</span>}
         </button>
         <button onClick={handleReset} className={css.menuButton} type="button">
           <Undo2 size={18} className="mr-2 stroke-gray-600" />
@@ -311,45 +414,68 @@ export function ImportExport() {
         onClose={handleRestoreClose}
         title={'Restore from Backup'}
         description={() => {
-          const availableBackups = Object.entries(backupData).filter(([, backup]) => backup.status === 'available')
-          
+          const availableBackups = Object.entries(backupData).filter(
+            ([, backup]) => backup.status === 'available',
+          )
+
           if (availableBackups.length === 0) {
             return <span>No backup data available.</span>
           }
-          
+
           return <span>Select a backup to restore:</span>
         }}
         okText="Restore"
       >
         {(() => {
-          const availableBackups = Object.entries(backupData).filter(([, backup]) => backup.status === 'available')
-          
+          const availableBackups = Object.entries(backupData).filter(
+            ([, backup]) => backup.status === 'available',
+          )
+
           if (availableBackups.length === 0) {
             return null
           }
-          
+
           const getBackupTypeLabel = (type: string) => {
             switch (type) {
-              case 'legacy': return 'Legacy Migration'
-              case 'daily': return 'Daily Backup'
-              case 'weekly': return 'Weekly Backup'
-              default: return type
+              case 'legacy':
+                return 'Legacy Migration'
+              case 'daily':
+                return 'Daily Backup'
+              case 'weekly':
+                return 'Weekly Backup'
+              default:
+                return type
             }
           }
-          
+
           return (
             <div>
-              <RadioGroup value={selectedBackupType} onValueChange={(value) => setSelectedBackupType(value as typeof selectedBackupType)}>
+              <RadioGroup
+                value={selectedBackupType}
+                onValueChange={(value) =>
+                  setSelectedBackupType(value as typeof selectedBackupType)
+                }
+              >
                 {availableBackups.map(([type, backup]) => (
                   <div key={type} className="flex items-start space-x-3">
                     <RadioGroupItem value={type} className="mt-1" />
                     <div className="flex-1">
-                      <label className="text-sm font-medium cursor-pointer" onClick={() => setSelectedBackupType(type as typeof selectedBackupType)}>
+                      <label
+                        className="text-sm font-medium cursor-pointer"
+                        onClick={() =>
+                          setSelectedBackupType(
+                            type as typeof selectedBackupType,
+                          )
+                        }
+                      >
                         {getBackupTypeLabel(type)}
                       </label>
                       {backup.info && (
                         <div className="text-xs text-gray-600 mt-1">
-                          <div>Created: {new Date(backup.info.timestamp).toLocaleString()}</div>
+                          <div>
+                            Created:{' '}
+                            {new Date(backup.info.timestamp).toLocaleString()}
+                          </div>
                           <div>Commands: {backup.info.commandCount} items</div>
                           {backup.info.folderCount !== undefined && (
                             <div>Folders: {backup.info.folderCount} items</div>
@@ -361,7 +487,8 @@ export function ImportExport() {
                 ))}
               </RadioGroup>
               <p className="mt-4 text-sm text-yellow-600">
-                <strong>Warning:</strong> This will replace all current commands with the backup data.
+                <strong>Warning:</strong> This will replace all current commands
+                with the backup data.
               </p>
             </div>
           )
diff --git a/src/components/option/Option.module.css b/src/components/option/Option.module.css
index e3217099..2db517c5 100644
--- a/src/components/option/Option.module.css
+++ b/src/components/option/Option.module.css
@@ -1,6 +1,7 @@
 :root {
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, sans-serif;
+  --font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
   --font-color: #333;
   --menu-top: 150px;
 }
@@ -21,7 +22,7 @@
   margin: 0;
 }
 
-.titleSpan+.titleSpan {
+.titleSpan + .titleSpan {
   margin-left: 4px;
 }
 
@@ -92,9 +93,11 @@
 
 .bgHatching {
   background-color: #fff;
-  background-image: repeating-linear-gradient(45deg,
-      #6b7280,
-      #6b7280 1px,
-      transparent 1px,
-      transparent 4px);
+  background-image: repeating-linear-gradient(
+    45deg,
+    #6b7280,
+    #6b7280 1px,
+    transparent 1px,
+    transparent 4px
+  );
 }
diff --git a/src/components/pageAction/PageActionRecorder.tsx b/src/components/pageAction/PageActionRecorder.tsx
index 39ec31f6..e61397c4 100644
--- a/src/components/pageAction/PageActionRecorder.tsx
+++ b/src/components/pageAction/PageActionRecorder.tsx
@@ -79,7 +79,6 @@ export function PageActionRecorder(): JSX.Element {
     )
   }
 
-
   useEffect(() => {
     const update = (data: PageActionRecordingData) => {
       data?.steps && setSteps(data.steps ?? [])
diff --git a/src/hooks/useDetectLinkCommand.ts b/src/hooks/useDetectLinkCommand.ts
index aac3b517..02be3f46 100644
--- a/src/hooks/useDetectLinkCommand.ts
+++ b/src/hooks/useDetectLinkCommand.ts
@@ -274,7 +274,8 @@ function useDetectClickHold(
     enabled &&
     settings.linkCommand?.startupMethod?.method ===
       LINK_COMMAND_STARTUP_METHOD.LEFT_CLICK_HOLD
-  const duration = settings.linkCommand?.startupMethod?.leftClickHoldParam ?? 200
+  const duration =
+    settings.linkCommand?.startupMethod?.leftClickHoldParam ?? 200
   const detectLinkRef = useRef(false)
   const [forceClear, setForceClear] = useState(false)
   const playPixel = 20
diff --git a/src/services/storage.ts b/src/services/storage.ts
index eb071339..aaed5901 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -14,7 +14,10 @@ import {
   CommandStorage,
   commandChangedCallback,
 } from './storage/commandStorage'
-import { DailyBackupManager } from './storage/backupManager'
+import {
+  DailyBackupManager,
+  WeeklyBackupManager,
+} from './storage/backupManager'
 
 // Re-export everything from sub-modules
 export {
@@ -24,6 +27,7 @@ export {
   CMD_PREFIX,
   CommandMigrationManager,
   DailyBackupManager,
+  WeeklyBackupManager,
 }
 
 export type { ChangedCallback, KEY, commandChangedCallback }
@@ -41,6 +45,9 @@ export const Storage = {
   // Daily backup manager
   dailyBackupManager: new DailyBackupManager(),
 
+  // Weekly backup manager
+  weeklyBackupManager: new WeeklyBackupManager(),
+
   /**
    * New command getter method (hybrid storage compatible)
    */
diff --git a/src/services/storage/backupManager.ts b/src/services/storage/backupManager.ts
index 14913dda..b865abde 100644
--- a/src/services/storage/backupManager.ts
+++ b/src/services/storage/backupManager.ts
@@ -2,10 +2,17 @@ import { Command, CommandFolder } from '@/types'
 import { LOCAL_STORAGE_KEY, BaseStorage, STORAGE_KEY } from './index'
 import { HybridCommandStorage } from './commandStorage'
 
-// Daily backup management class
-export class DailyBackupManager {
-  private readonly DAILY_BACKUP_KEY = LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP
-  private readonly BACKUP_INTERVAL_MS = 24 * 60 * 60 * 1000 // 24 hours
+export interface BackupData {
+  version: string
+  timestamp: number
+  commands: Command[]
+  folders?: CommandFolder[]
+}
+
+export abstract class BaseBackupManager {
+  protected abstract readonly BACKUP_KEY: string
+  protected abstract readonly BACKUP_INTERVAL_MS: number
+  protected abstract readonly VERSION: string
 
   async shouldBackup(): Promise<boolean> {
     try {
@@ -23,13 +30,15 @@ export class DailyBackupManager {
     }
   }
 
-  async performDailyBackup(): Promise<void> {
+  async performBackup(): Promise<void> {
     try {
       const hybridStorage = new HybridCommandStorage()
       const commands = await hybridStorage.loadCommands()
 
       // Get folders from settings directly from storage to avoid circular dependency
-      const userSettings = await BaseStorage.get(STORAGE_KEY.USER) as any
+      const userSettings = (await BaseStorage.get(STORAGE_KEY.USER)) as {
+        folders?: CommandFolder[]
+      }
       const folders = userSettings?.folders || []
 
       if (commands.length === 0 && folders.length === 0) {
@@ -37,34 +46,29 @@ export class DailyBackupManager {
         return
       }
 
-      const backup = {
-        version: 'daily',
+      const backup: BackupData = {
+        version: this.VERSION,
         timestamp: Date.now(),
         commands: commands,
         folders: folders,
       }
 
       await chrome.storage.local.set({
-        [this.DAILY_BACKUP_KEY]: backup,
+        [this.BACKUP_KEY]: backup,
       })
 
       console.debug(
-        `Daily backup completed: ${commands.length} commands and ${folders.length} folders backed up`,
+        `${this.VERSION} backup completed: ${commands.length} commands and ${folders.length} folders backed up`,
       )
     } catch (error) {
-      console.error('Failed to perform daily backup:', error)
+      console.error(`Failed to perform ${this.VERSION} backup:`, error)
     }
   }
 
-  async getLastBackupData(): Promise<{
-    version: string
-    timestamp: number
-    commands: Command[]
-    folders?: CommandFolder[]
-  } | null> {
+  async getLastBackupData(): Promise<BackupData | null> {
     try {
-      const result = await chrome.storage.local.get(this.DAILY_BACKUP_KEY)
-      const backup = result[this.DAILY_BACKUP_KEY]
+      const result = await chrome.storage.local.get(this.BACKUP_KEY)
+      const backup = result[this.BACKUP_KEY]
 
       if (backup && backup.timestamp && Array.isArray(backup.commands)) {
         return {
@@ -81,7 +85,7 @@ export class DailyBackupManager {
     }
   }
 
-  async restoreFromDailyBackup(): Promise<{
+  async restoreFromBackup(): Promise<{
     commands: Command[]
     folders: CommandFolder[]
   }> {
@@ -96,7 +100,7 @@ export class DailyBackupManager {
         folders: backup.folders || [],
       }
     } catch (error) {
-      console.error('Failed to restore from daily backup:', error)
+      console.error('Failed to restore from backup:', error)
       return { commands: [], folders: [] }
     }
   }
@@ -106,3 +110,40 @@ export class DailyBackupManager {
     return backup ? new Date(backup.timestamp) : null
   }
 }
+
+// Daily backup management class
+export class DailyBackupManager extends BaseBackupManager {
+  protected readonly BACKUP_KEY = LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP
+  protected readonly BACKUP_INTERVAL_MS = 24 * 60 * 60 * 1000 // 24 hours
+  protected readonly VERSION = 'daily'
+
+  // 既存のメソッド名を保持するためのエイリアス
+  async performDailyBackup(): Promise<void> {
+    return this.performBackup()
+  }
+
+  async restoreFromDailyBackup(): Promise<{
+    commands: Command[]
+    folders: CommandFolder[]
+  }> {
+    return this.restoreFromBackup()
+  }
+}
+
+// Weekly backup management class
+export class WeeklyBackupManager extends BaseBackupManager {
+  protected readonly BACKUP_KEY = LOCAL_STORAGE_KEY.WEEKLY_COMMANDS_BACKUP
+  protected readonly BACKUP_INTERVAL_MS = 7 * 24 * 60 * 60 * 1000 // 7 days
+  protected readonly VERSION = 'weekly'
+
+  async performWeeklyBackup(): Promise<void> {
+    return this.performBackup()
+  }
+
+  async restoreFromWeeklyBackup(): Promise<{
+    commands: Command[]
+    folders: CommandFolder[]
+  }> {
+    return this.restoreFromBackup()
+  }
+}
diff --git a/src/services/storage/commandStorage.ts b/src/services/storage/commandStorage.ts
index 1f5d1514..11e8b437 100644
--- a/src/services/storage/commandStorage.ts
+++ b/src/services/storage/commandStorage.ts
@@ -243,7 +243,7 @@ class CommandMetadataManager {
   async saveGlobalCommandMetadata(
     metadata: GlobalCommandMetadata,
   ): Promise<void> {
-    // Save only to sync storage for consistency across devices
+    console.debug('Saving global command metadata:', metadata)
     await this.storage.set(this.GLOBAL_METADATA_KEY, metadata)
   }
 
@@ -273,10 +273,10 @@ class CommandMetadataManager {
 
   async loadGlobalCommandMetadata(): Promise<GlobalCommandMetadata | null> {
     try {
-      // Load only from sync storage
       const metadata = await this.storage.get<GlobalCommandMetadata>(
         this.GLOBAL_METADATA_KEY,
       )
+      console.log('Loaded global command metadata:', metadata)
       return metadata || null
     } catch (error) {
       console.error('Failed to load global metadata:', error)
@@ -639,6 +639,7 @@ export class HybridCommandStorage {
     const localSavePromise = chrome.storage.local.set(dataToSet)
 
     // Add metadata save to the same promise batch
+    console.log(allocation.globalMetadata)
     const metadataSavePromises = [
       this.metadataManager.saveSyncCommandMetadata(allocation.syncMetadata),
       this.metadataManager.saveLocalCommandMetadata(allocation.localMetadata),
@@ -722,6 +723,7 @@ export const CommandStorage = {
     const current = await hybridStorage.loadCommands()
 
     // TODO: use metadate
+    debugger
 
     // If update first time, set DefaultCommands.
     const count = await storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
diff --git a/src/services/storage/index.ts b/src/services/storage/index.ts
index 6766fb13..d9305856 100644
--- a/src/services/storage/index.ts
+++ b/src/services/storage/index.ts
@@ -19,9 +19,10 @@ export enum LOCAL_STORAGE_KEY {
   CAPTURES = 'captures',
   COMMAND_LOCAL_COUNT = 'commandLocalCount',
   MIGRATION_STATUS = 'migrationStatus',
+  LOCAL_COMMAND_METADATA = 'localCommandMetadata',
   COMMANDS_BACKUP = 'commandsBackup',
   DAILY_COMMANDS_BACKUP = 'dailyCommandsBackup',
-  LOCAL_COMMAND_METADATA = 'localCommandMetadata',
+  WEEKLY_COMMANDS_BACKUP = 'weeklyCommandsBackup',
 }
 
 export enum SESSION_STORAGE_KEY {
@@ -94,6 +95,7 @@ const DEFAULTS = {
   [LOCAL_STORAGE_KEY.MIGRATION_STATUS]: null,
   [LOCAL_STORAGE_KEY.COMMANDS_BACKUP]: null,
   [LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP]: null,
+  [LOCAL_STORAGE_KEY.WEEKLY_COMMANDS_BACKUP]: null,
   [LOCAL_STORAGE_KEY.LOCAL_COMMAND_METADATA]: null,
   [SESSION_STORAGE_KEY.BG]: {},
   [SESSION_STORAGE_KEY.SESSION_DATA]: null,
diff --git a/src/services/storage/storageUsage.ts b/src/services/storage/storageUsage.ts
index 148f049a..c66683ef 100644
--- a/src/services/storage/storageUsage.ts
+++ b/src/services/storage/storageUsage.ts
@@ -61,12 +61,16 @@ const getStorageUsage = async (): Promise<StorageUsageData> => {
     const localSystemKeys = Object.values(LOCAL_STORAGE_KEY).filter(
       (key) =>
         key !== LOCAL_STORAGE_KEY.COMMANDS_BACKUP &&
-        key !== LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP,
+        key !== LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP &&
+        key !== LOCAL_STORAGE_KEY.WEEKLY_COMMANDS_BACKUP,
     ) as string[]
+
     const localBackupKeys = [
       LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
       LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP,
+      LOCAL_STORAGE_KEY.WEEKLY_COMMANDS_BACKUP,
     ] as string[]
+
     const localCommandKeys = Object.keys(allLocalData || {}).filter((key) =>
       key.startsWith(CMD_PREFIX),
     )
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 0c1b3a9e..d3e7dae1 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -2,17 +2,12 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
-    "lib": [
-      "ES2023",
-      "dom"
-    ],
+    "lib": ["ES2023", "dom"],
     "module": "ESNext",
     "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -27,7 +22,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": [
-    "vite.config.ts"
-  ]
+  "include": ["vite.config.ts"]
 }
diff --git a/yarn.lock b/yarn.lock
index 97ed2132..c6dc7780 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -707,6 +707,11 @@
   resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@pkgr/core@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.7.tgz#eb5014dfd0b03e7f3ba2eeeff506eed89b028058"
+  integrity sha512-YLT9Zo3oNPJoBjBc4q8G2mjU4tqIbf5CEOORbUUr48dCD9q3umJ3IPlVqOqDakPfd2HuwccBaqlGhN4Gmr5OWg==
+
 "@radix-ui/number@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz"
@@ -2325,7 +2330,7 @@ cross-env@^7.0.3:
   dependencies:
     cross-spawn "^7.0.1"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.3, cross-spawn@^7.0.6:
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.6:
   version "7.0.6"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz"
   integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
@@ -2787,21 +2792,6 @@ esutils@^2.0.2:
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-execa@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz"
-  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
-  dependencies:
-    cross-spawn "^7.0.3"
-    get-stream "^6.0.0"
-    human-signals "^2.1.0"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.1"
-    onetime "^5.1.2"
-    signal-exit "^3.0.3"
-    strip-final-newline "^2.0.0"
-
 expect@^29.0.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz"
@@ -3003,11 +2993,6 @@ get-proto@^1.0.0, get-proto@^1.0.1:
     dunder-proto "^1.0.1"
     es-object-atoms "^1.0.0"
 
-get-stream@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz"
-  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
-
 get-xpath@^3.3.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/get-xpath/-/get-xpath-3.3.0.tgz"
@@ -3138,11 +3123,6 @@ htmlparser2@^9.1.0:
     domutils "^3.1.0"
     entities "^4.5.0"
 
-human-signals@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
-  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
-
 husky@^9.1.7:
   version "9.1.7"
   resolved "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz"
@@ -3172,11 +3152,16 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^5.2.0, ignore@^5.3.0, ignore@^5.3.1:
+ignore@^5.2.0, ignore@^5.3.1:
   version "5.3.2"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
+ignore@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-7.0.5.tgz#4cb5f6cd7d4c7ab0365738c7aea888baa6d7efd9"
+  integrity sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
@@ -3366,11 +3351,6 @@ is-stream@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
 
-is-stream@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz"
-  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
-
 is-string@^1.0.7, is-string@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz"
@@ -3644,11 +3624,6 @@ math-intrinsics@^1.1.0:
   resolved "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz"
   integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
 
-merge-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
-  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
-
 merge2@^1.3.0:
   version "1.4.1"
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
@@ -3662,11 +3637,6 @@ micromatch@^4.0.4, micromatch@^4.0.8:
     braces "^3.0.3"
     picomatch "^2.3.1"
 
-mimic-fn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
@@ -3805,13 +3775,6 @@ npm-packlist@1.4.4:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
 
-npm-run-path@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz"
-  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
-  dependencies:
-    path-key "^3.0.0"
-
 nth-check@^2.0.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz"
@@ -3866,13 +3829,6 @@ once@^1.3.0, once@^1.4.0:
   dependencies:
     wrappy "1"
 
-onetime@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz"
-  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
-  dependencies:
-    mimic-fn "^2.1.0"
-
 optionator@^0.9.3:
   version "0.9.4"
   resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz"
@@ -3967,7 +3923,7 @@ path-is-absolute@^1.0.0:
   resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
   integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
 
-path-key@^3.0.0, path-key@^3.1.0:
+path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
@@ -4000,10 +3956,10 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatc
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-picomatch@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-3.0.1.tgz"
-  integrity sha512-I3EurrIQMlRc9IaAZnqRR044Phh2DXY+55o7uJ0V+hYZAcQYSuFWsc9q5PvyDHUSCe1Qxn/iBz+78s86zWnGag==
+picomatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
 
 pify@^2.3.0:
   version "2.3.0"
@@ -4083,10 +4039,10 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^3.3.3:
-  version "3.4.2"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz"
-  integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
+prettier@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.6.2.tgz#ccda02a1003ebbb2bfda6f83a074978f608b9393"
+  integrity sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==
 
 pretty-format@^27.0.2:
   version "27.5.1"
@@ -4106,18 +4062,18 @@ pretty-format@^29.0.0, pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-pretty-quick@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/pretty-quick/-/pretty-quick-4.0.0.tgz"
-  integrity sha512-M+2MmeufXb/M7Xw3Afh1gxcYpj+sK0AxEfnfF958ktFeAyi5MsKY5brymVURQLgPLV1QaF5P4pb2oFJ54H3yzQ==
+pretty-quick@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/pretty-quick/-/pretty-quick-4.2.2.tgz#0fc31da666f182fe14e119905fc9829b5b85a234"
+  integrity sha512-uAh96tBW1SsD34VhhDmWuEmqbpfYc/B3j++5MC/6b3Cb8Ow7NJsvKFhg0eoGu2xXX+o9RkahkTK6sUdd8E7g5w==
   dependencies:
-    execa "^5.1.1"
-    find-up "^5.0.0"
-    ignore "^5.3.0"
+    "@pkgr/core" "^0.2.7"
+    ignore "^7.0.5"
     mri "^1.2.0"
-    picocolors "^1.0.0"
-    picomatch "^3.0.1"
-    tslib "^2.6.2"
+    picocolors "^1.1.1"
+    picomatch "^4.0.2"
+    tinyexec "^0.3.2"
+    tslib "^2.8.1"
 
 process-nextick-args@~2.0.0:
   version "2.0.1"
@@ -4583,11 +4539,6 @@ side-channel@^1.0.4, side-channel@^1.1.0:
     side-channel-map "^1.0.1"
     side-channel-weakmap "^1.0.2"
 
-signal-exit@^3.0.3:
-  version "3.0.7"
-  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
-  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
-
 signal-exit@^4.0.1:
   version "4.1.0"
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
@@ -4713,11 +4664,6 @@ strip-ansi@^7.0.1:
   dependencies:
     ansi-regex "^6.0.1"
 
-strip-final-newline@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz"
-  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
-
 strip-indent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz"
@@ -4840,6 +4786,11 @@ through@^2.3.8:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
+tinyexec@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.2.tgz#941794e657a85e496577995c6eef66f53f42b3d2"
+  integrity sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==
+
 to-buffer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz"
@@ -4882,7 +4833,7 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-tslib@^2.0.0, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.6.2:
+tslib@^2.0.0, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.8.1:
   version "2.8.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==

From f7efa0a8c0460e26fcc57500ab7871cc898ccf18 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 5 Jul 2025 08:15:04 +0900
Subject: [PATCH 55/64] Add: Claude code settings.

---
 .claude/settings.json       | 15 ++++++++++
 .claude/settings.local.json | 34 +++++++++++++++++++++
 CLAUDE.md                   | 60 +++++++++++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+)
 create mode 100644 .claude/settings.json
 create mode 100644 .claude/settings.local.json
 create mode 100644 CLAUDE.md

diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 00000000..db07a616
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,15 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Write|Edit|MultiEdit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "npx pretty-quick"
+          }
+        ]
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 00000000..1844a897
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,34 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm install:*)",
+      "Bash(npm uninstall:*)",
+      "Bash(yarn build)",
+      "Bash(rg:*)",
+      "Bash(npm run lint)",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:docs.dndkit.com)",
+      "WebFetch(domain:stackoverflow.com)",
+      "Bash(yarn lint)",
+      "Bash(yarn dev)",
+      "Bash(pkill:*)",
+      "Bash(node:*)",
+      "Bash(rm:*)",
+      "Bash(grep:*)",
+      "WebFetch(domain:react-hook-form.com)",
+      "Bash(cat:*)",
+      "Bash(yarn add:*)",
+      "Bash(mv:*)",
+      "Bash(mkdir:*)",
+      "Bash(sed:*)",
+      "Bash(npx tsc:*)",
+      "Bash(find:*)",
+      "Bash(yarn lint:*)",
+      "Bash(yarn eslint:*)",
+      "Bash(npx eslint:*)",
+      "WebFetch(domain:www.npmjs.com)",
+      "Bash(ls:*)"
+    ],
+    "deny": []
+  }
+}
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000..266d9572
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,60 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+- `yarn dev` - Start development mode with Vite
+- `yarn build` - Build the extension (runs TypeScript compilation + Vite build)
+- `yarn lint` - Run ESLint to check code quality
+- `yarn zip` - Create a distributable extension zip file from the built dist folder
+
+## Architecture Overview
+
+This is a Chrome Extension (Manifest V3) called **Selection Command** that allows users to perform various actions on selected text on web pages.
+
+### Key Components
+
+**Chrome Extension Structure:**
+
+- `manifest.json` - Extension manifest defining permissions, content scripts, and background workers
+- `src/background_script.ts` - Service worker handling extension lifecycle and background operations
+- `src/content_script.tsx` - Main content script injected into web pages
+- `src/options_page.tsx` - Extension options/settings page
+
+**Core Architecture:**
+
+- **Actions** (`src/action/`) - Core functionality modules including background operations, popup handling, page actions, and command execution
+- **Components** (`src/components/`) - React components organized by feature:
+  - `menu/` - Context menu and menu item components
+  - `option/` - Settings and configuration UI
+  - `pageAction/` - Page automation and recording components
+  - `result/` - Result display and popup components
+  - `ui/` - Reusable UI components (uses Radix UI)
+- **Services** (`src/services/`) - Business logic and utilities including settings management, storage, analytics, and page action handling
+- **Hooks** (`src/hooks/`) - Custom React hooks for state management and Chrome extension APIs
+
+**Key Features:**
+
+- **Page Actions** - Record and replay browser automation sequences
+- **Command Hub** - Web interface for sharing and discovering commands (separate Next.js app in `pages/`)
+- **Context Menus** - Right-click actions on selected text
+- **Settings Management** - Import/export configurations and user preferences
+
+### Technical Stack
+
+- **Frontend**: React 18 with TypeScript
+- **Build System**: Vite with `@crxjs/vite-plugin` for Chrome extension development
+- **UI Components**: Shadcn
+- **Form and Validation**: react-hook-form and zod
+- **Styling**: CSS Modules + Tailwind CSS(ver.3)
+- **State Management**: React hooks with Chrome extension storage APIs
+- **Testing**: ESLint for code quality
+
+### Project Structure Notes
+
+- The main extension code is in `src/`
+- The command hub website is a separate Next.js application in `pages/`
+- Extension supports internationalization with locale files in `public/_locales/`
+- Uses Shadow DOM for content script styling isolation
+- Implements Robula+ algorithm for robust XPath selector generation (`src/lib/robula-plus/`)

From 77a1f6f9092ac35d975f2452ce1807cd8b8770ec Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 5 Jul 2025 08:40:41 +0900
Subject: [PATCH 56/64] Refactoring: Corrected direct value.

---
 src/components/option/ImportExport.tsx | 215 ++++++++++++++-----------
 1 file changed, 124 insertions(+), 91 deletions(-)

diff --git a/src/components/option/ImportExport.tsx b/src/components/option/ImportExport.tsx
index 49b87693..e5a93389 100644
--- a/src/components/option/ImportExport.tsx
+++ b/src/components/option/ImportExport.tsx
@@ -1,32 +1,51 @@
-import { useState, useRef, useEffect } from 'react'
-import { Dialog } from './Dialog'
-import type { UserSettings } from '@/types'
+import { useState, useRef, useEffect } from "react"
+import { Dialog } from "./Dialog"
+import type { UserSettings } from "@/types"
 
 import {
   Storage,
   STORAGE_KEY,
+  LOCAL_STORAGE_KEY,
   CommandMigrationManager,
-} from '@/services/storage'
+} from "@/services/storage"
 import {
   DailyBackupManager,
   WeeklyBackupManager,
-} from '@/services/storage/backupManager'
-import { Settings, migrate } from '@/services/settings'
-import { isBase64, isUrl } from '@/lib/utils'
-import { APP_ID } from '@/const'
-import { t } from '@/services/i18n'
-import { Download, Upload, Undo2, RotateCcw } from 'lucide-react'
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-
-import css from './Option.module.css'
+} from "@/services/storage/backupManager"
+import { Settings, migrate } from "@/services/settings"
+import { isBase64, isUrl } from "@/lib/utils"
+import { APP_ID } from "@/const"
+import { t } from "@/services/i18n"
+import { Download, Upload, Undo2, RotateCcw } from "lucide-react"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import type { BackupData } from "@/services/storage/backupManager"
+
+import css from "./Option.module.css"
+
+// Backup type constants
+const BACKUP_TYPES = {
+  LEGACY: "legacy",
+  DAILY: "daily",
+  WEEKLY: "weekly",
+} as const
+
+// Backup status constants
+const BACKUP_STATUS = {
+  CHECKING: "checking",
+  AVAILABLE: "available",
+  NONE: "none",
+} as const
+
+type BackupType = (typeof BACKUP_TYPES)[keyof typeof BACKUP_TYPES]
+type BackupStatus = (typeof BACKUP_STATUS)[keyof typeof BACKUP_STATUS]
 
 function getTimestamp() {
   const date = new Date()
   const year = date.getFullYear()
-  const month = (date.getMonth() + 1).toString().padStart(2, '0')
-  const day = date.getDate().toString().padStart(2, '0')
-  const hours = date.getHours().toString().padStart(2, '0')
-  const minutes = date.getMinutes().toString().padStart(2, '0')
+  const month = (date.getMonth() + 1).toString().padStart(2, "0")
+  const day = date.getDate().toString().padStart(2, "0")
+  const hours = date.getHours().toString().padStart(2, "0")
+  const minutes = date.getMinutes().toString().padStart(2, "0")
   return `${year}${month}${day}_${hours}${minutes}`
 }
 
@@ -36,24 +55,24 @@ export function ImportExport() {
   const [restoreDialog, setRestoreDialog] = useState(false)
   const [importJson, setImportJson] = useState<UserSettings>()
   const [backupData, setBackupData] = useState<{
-    legacy: {
-      status: 'checking' | 'available' | 'none'
+    [BACKUP_TYPES.LEGACY]: {
+      status: BackupStatus
       info: {
         timestamp: number
         commandCount: number
         folderCount?: number
       } | null
     }
-    daily: {
-      status: 'checking' | 'available' | 'none'
+    [BACKUP_TYPES.DAILY]: {
+      status: BackupStatus
       info: {
         timestamp: number
         commandCount: number
         folderCount?: number
       } | null
     }
-    weekly: {
-      status: 'checking' | 'available' | 'none'
+    [BACKUP_TYPES.WEEKLY]: {
+      status: BackupStatus
       info: {
         timestamp: number
         commandCount: number
@@ -61,13 +80,13 @@ export function ImportExport() {
       } | null
     }
   }>({
-    legacy: { status: 'checking', info: null },
-    daily: { status: 'checking', info: null },
-    weekly: { status: 'checking', info: null },
+    [BACKUP_TYPES.LEGACY]: { status: BACKUP_STATUS.CHECKING, info: null },
+    [BACKUP_TYPES.DAILY]: { status: BACKUP_STATUS.CHECKING, info: null },
+    [BACKUP_TYPES.WEEKLY]: { status: BACKUP_STATUS.CHECKING, info: null },
   })
-  const [selectedBackupType, setSelectedBackupType] = useState<
-    'legacy' | 'daily' | 'weekly'
-  >('legacy')
+  const [selectedBackupType, setSelectedBackupType] = useState<BackupType>(
+    BACKUP_TYPES.LEGACY,
+  )
   const inputFile = useRef<HTMLInputElement>(null)
 
   // Check backup status on initialization
@@ -79,19 +98,18 @@ export function ImportExport() {
     try {
       const newBackupData = { ...backupData }
 
-      // Check legacy backup
-      const legacyResult = await chrome.storage.local.get(
-        'legacy_commands_backup',
+      // 1. Check legacy backup
+      const legacyBackup = await Storage.get<BackupData>(
+        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
       )
-      const legacyBackup = legacyResult.legacy_commands_backup
 
       if (
         legacyBackup &&
         legacyBackup.commands &&
         Array.isArray(legacyBackup.commands)
       ) {
-        newBackupData.legacy = {
-          status: 'available',
+        newBackupData[BACKUP_TYPES.LEGACY] = {
+          status: BACKUP_STATUS.AVAILABLE,
           info: {
             timestamp: legacyBackup.timestamp,
             commandCount: legacyBackup.commands.length,
@@ -101,10 +119,13 @@ export function ImportExport() {
           },
         }
       } else {
-        newBackupData.legacy = { status: 'none', info: null }
+        newBackupData[BACKUP_TYPES.LEGACY] = {
+          status: BACKUP_STATUS.NONE,
+          info: null,
+        }
       }
 
-      // Check daily backup
+      // 2. Check daily backup
       const dailyBackupManager = new DailyBackupManager()
       const dailyBackup = await dailyBackupManager.getLastBackupData()
 
@@ -113,8 +134,8 @@ export function ImportExport() {
         dailyBackup.commands &&
         Array.isArray(dailyBackup.commands)
       ) {
-        newBackupData.daily = {
-          status: 'available',
+        newBackupData[BACKUP_TYPES.DAILY] = {
+          status: BACKUP_STATUS.AVAILABLE,
           info: {
             timestamp: dailyBackup.timestamp,
             commandCount: dailyBackup.commands.length,
@@ -124,10 +145,13 @@ export function ImportExport() {
           },
         }
       } else {
-        newBackupData.daily = { status: 'none', info: null }
+        newBackupData[BACKUP_TYPES.DAILY] = {
+          status: BACKUP_STATUS.NONE,
+          info: null,
+        }
       }
 
-      // Check weekly backup
+      // 3. Check weekly backup
       const weeklyBackupManager = new WeeklyBackupManager()
       const weeklyBackup = await weeklyBackupManager.getLastBackupData()
 
@@ -136,8 +160,8 @@ export function ImportExport() {
         weeklyBackup.commands &&
         Array.isArray(weeklyBackup.commands)
       ) {
-        newBackupData.weekly = {
-          status: 'available',
+        newBackupData[BACKUP_TYPES.WEEKLY] = {
+          status: BACKUP_STATUS.AVAILABLE,
           info: {
             timestamp: weeklyBackup.timestamp,
             commandCount: weeklyBackup.commands.length,
@@ -147,25 +171,34 @@ export function ImportExport() {
           },
         }
       } else {
-        newBackupData.weekly = { status: 'none', info: null }
+        newBackupData[BACKUP_TYPES.WEEKLY] = {
+          status: BACKUP_STATUS.NONE,
+          info: null,
+        }
       }
 
       setBackupData(newBackupData)
 
       // Set default selection to first available backup
-      if (newBackupData.legacy.status === 'available') {
-        setSelectedBackupType('legacy')
-      } else if (newBackupData.daily.status === 'available') {
-        setSelectedBackupType('daily')
-      } else if (newBackupData.weekly.status === 'available') {
-        setSelectedBackupType('weekly')
+      if (
+        newBackupData[BACKUP_TYPES.LEGACY].status === BACKUP_STATUS.AVAILABLE
+      ) {
+        setSelectedBackupType(BACKUP_TYPES.LEGACY)
+      } else if (
+        newBackupData[BACKUP_TYPES.DAILY].status === BACKUP_STATUS.AVAILABLE
+      ) {
+        setSelectedBackupType(BACKUP_TYPES.DAILY)
+      } else if (
+        newBackupData[BACKUP_TYPES.WEEKLY].status === BACKUP_STATUS.AVAILABLE
+      ) {
+        setSelectedBackupType(BACKUP_TYPES.WEEKLY)
       }
     } catch (error) {
-      console.error('Failed to check backup status:', error)
+      console.error("Failed to check backup status:", error)
       setBackupData({
-        legacy: { status: 'none', info: null },
-        daily: { status: 'none', info: null },
-        weekly: { status: 'none', info: null },
+        [BACKUP_TYPES.LEGACY]: { status: BACKUP_STATUS.NONE, info: null },
+        [BACKUP_TYPES.DAILY]: { status: BACKUP_STATUS.NONE, info: null },
+        [BACKUP_TYPES.WEEKLY]: { status: BACKUP_STATUS.NONE, info: null },
       })
     }
   }
@@ -195,9 +228,9 @@ export function ImportExport() {
     }
 
     const text = JSON.stringify(data, null, 2)
-    const blob = new Blob([text], { type: 'text/plain' })
+    const blob = new Blob([text], { type: "text/plain" })
     const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
+    const a = document.createElement("a")
     document.body.appendChild(a)
     a.download = `${APP_ID}_${getTimestamp()}.json`
     a.href = url
@@ -244,11 +277,11 @@ export function ImportExport() {
 
   const handleRestore = async () => {
     const hasAnyBackup = Object.values(backupData).some(
-      (backup) => backup.status === 'available',
+      (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
     )
 
     if (!hasAnyBackup) {
-      alert('No backup data found.')
+      alert("No backup data found.")
       return
     }
 
@@ -261,7 +294,7 @@ export function ImportExport() {
         try {
           let backupCommands: any[] = []
 
-          if (selectedBackupType === 'legacy') {
+          if (selectedBackupType === BACKUP_TYPES.LEGACY) {
             // Restore from legacy backup
             const migrationManager = new CommandMigrationManager()
             const legacyData =
@@ -276,7 +309,7 @@ export function ImportExport() {
                 folders: legacyData.folders,
               })
             }
-          } else if (selectedBackupType === 'daily') {
+          } else if (selectedBackupType === BACKUP_TYPES.DAILY) {
             // Restore from daily backup
             const dailyBackupManager = new DailyBackupManager()
             const dailyData = await dailyBackupManager.restoreFromDailyBackup()
@@ -290,7 +323,7 @@ export function ImportExport() {
                 folders: dailyData.folders,
               })
             }
-          } else if (selectedBackupType === 'weekly') {
+          } else if (selectedBackupType === BACKUP_TYPES.WEEKLY) {
             // Restore from weekly backup
             const weeklyBackupManager = new WeeklyBackupManager()
             const weeklyData =
@@ -312,11 +345,11 @@ export function ImportExport() {
             await Storage.setCommands(backupCommands)
             location.reload()
           } else {
-            alert('Failed to restore from backup.')
+            alert("Failed to restore from backup.")
           }
         } catch (error) {
-          console.error('Failed to restore from backup:', error)
-          alert('Failed to restore from backup.')
+          console.error("Failed to restore from backup:", error)
+          alert("Failed to restore from backup.")
         }
       })()
     }
@@ -337,11 +370,11 @@ export function ImportExport() {
           type="button"
         >
           <Download size={18} className="mr-2 stroke-gray-600" />
-          {t('Option_Import')}
+          {t("Option_Import")}
         </button>
         <button onClick={handleExport} className={css.menuButton} type="button">
           <Upload size={18} className="mr-2 stroke-gray-600" />
-          {t('Option_Export')}
+          {t("Option_Export")}
         </button>
         <button
           onClick={handleRestore}
@@ -349,56 +382,56 @@ export function ImportExport() {
           type="button"
           disabled={
             !Object.values(backupData).some(
-              (backup) => backup.status === 'available',
+              (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
             )
           }
           title={
             Object.values(backupData).every(
-              (backup) => backup.status === 'checking',
+              (backup) => backup.status === BACKUP_STATUS.CHECKING,
             )
-              ? 'Checking backups...'
+              ? "Checking backups..."
               : !Object.values(backupData).some(
-                    (backup) => backup.status === 'available',
+                    (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
                   )
-                ? 'No backup available'
-                : 'Restore commands from backup'
+                ? "No backup available"
+                : "Restore commands from backup"
           }
         >
           <RotateCcw size={18} className="mr-2 stroke-gray-600" />
           Restore from Backup
           {Object.values(backupData).every(
-            (backup) => backup.status === 'checking',
+            (backup) => backup.status === BACKUP_STATUS.CHECKING,
           ) && <span className="ml-2 text-xs opacity-50">...</span>}
           {!Object.values(backupData).some(
-            (backup) => backup.status === 'available',
+            (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
           ) && <span className="ml-2 text-xs opacity-50">(N/A)</span>}
         </button>
         <button onClick={handleReset} className={css.menuButton} type="button">
           <Undo2 size={18} className="mr-2 stroke-gray-600" />
-          {t('Option_Reset')}
+          {t("Option_Reset")}
         </button>
       </div>
       <Dialog
         open={resetDialog}
         onClose={handleResetClose}
-        title={'Reset settings?'}
+        title={"Reset settings?"}
         description={() => (
           <span
-            dangerouslySetInnerHTML={{ __html: t('Option_Reset_Description') }}
+            dangerouslySetInnerHTML={{ __html: t("Option_Reset_Description") }}
           />
         )}
-        okText={t('Option_Reset')}
+        okText={t("Option_Reset")}
       />
       <Dialog
         open={importDialog}
         onClose={handleImportClose}
-        title={'Import settings'}
+        title={"Import settings"}
         description={() => (
           <span
-            dangerouslySetInnerHTML={{ __html: t('Option_Import_Description') }}
+            dangerouslySetInnerHTML={{ __html: t("Option_Import_Description") }}
           />
         )}
-        okText={t('Option_Import')}
+        okText={t("Option_Import")}
       >
         <input
           type="file"
@@ -412,10 +445,10 @@ export function ImportExport() {
       <Dialog
         open={restoreDialog}
         onClose={handleRestoreClose}
-        title={'Restore from Backup'}
+        title={"Restore from Backup"}
         description={() => {
           const availableBackups = Object.entries(backupData).filter(
-            ([, backup]) => backup.status === 'available',
+            ([, backup]) => backup.status === BACKUP_STATUS.AVAILABLE,
           )
 
           if (availableBackups.length === 0) {
@@ -428,7 +461,7 @@ export function ImportExport() {
       >
         {(() => {
           const availableBackups = Object.entries(backupData).filter(
-            ([, backup]) => backup.status === 'available',
+            ([, backup]) => backup.status === BACKUP_STATUS.AVAILABLE,
           )
 
           if (availableBackups.length === 0) {
@@ -437,12 +470,12 @@ export function ImportExport() {
 
           const getBackupTypeLabel = (type: string) => {
             switch (type) {
-              case 'legacy':
-                return 'Legacy Migration'
-              case 'daily':
-                return 'Daily Backup'
-              case 'weekly':
-                return 'Weekly Backup'
+              case BACKUP_TYPES.LEGACY:
+                return "Legacy Migration"
+              case BACKUP_TYPES.DAILY:
+                return "Daily Backup"
+              case BACKUP_TYPES.WEEKLY:
+                return "Weekly Backup"
               default:
                 return type
             }
@@ -473,7 +506,7 @@ export function ImportExport() {
                       {backup.info && (
                         <div className="text-xs text-gray-600 mt-1">
                           <div>
-                            Created:{' '}
+                            Created:{" "}
                             {new Date(backup.info.timestamp).toLocaleString()}
                           </div>
                           <div>Commands: {backup.info.commandCount} items</div>

From fee337b2f41205fae1366e43514391b4aa8fc7bd Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 5 Jul 2025 13:56:27 +0900
Subject: [PATCH 57/64] Refactoring: Add LegacyBackupManager.

---
 src/components/option/ImportExport.tsx |   3 +-
 src/services/storage.ts                |  10 +-
 src/services/storage/backupManager.ts  |  73 ++++++++++---
 src/services/storage/commandStorage.ts | 136 +++++++------------------
 src/services/storage/index.ts          |  71 ++++++++-----
 5 files changed, 146 insertions(+), 147 deletions(-)

diff --git a/src/components/option/ImportExport.tsx b/src/components/option/ImportExport.tsx
index e5a93389..14080551 100644
--- a/src/components/option/ImportExport.tsx
+++ b/src/components/option/ImportExport.tsx
@@ -297,8 +297,7 @@ export function ImportExport() {
           if (selectedBackupType === BACKUP_TYPES.LEGACY) {
             // Restore from legacy backup
             const migrationManager = new CommandMigrationManager()
-            const legacyData =
-              await migrationManager.restoreFromBackupWithFolders()
+            const legacyData = await migrationManager.restoreFromBackup()
             backupCommands = legacyData.commands
 
             if (legacyData.folders && legacyData.folders.length > 0) {
diff --git a/src/services/storage.ts b/src/services/storage.ts
index aaed5901..c8277811 100644
--- a/src/services/storage.ts
+++ b/src/services/storage.ts
@@ -1,4 +1,4 @@
-import { Command } from '@/types'
+import { Command } from "@/types"
 import {
   BaseStorage,
   STORAGE_KEY,
@@ -7,17 +7,18 @@ import {
   CMD_PREFIX,
   ChangedCallback,
   KEY,
-} from './storage/index'
+} from "./storage/index"
 import {
   HybridCommandStorage,
   CommandMigrationManager,
   CommandStorage,
   commandChangedCallback,
-} from './storage/commandStorage'
+} from "./storage/commandStorage"
 import {
   DailyBackupManager,
   WeeklyBackupManager,
-} from './storage/backupManager'
+  LegacyBackupManager,
+} from "./storage/backupManager"
 
 // Re-export everything from sub-modules
 export {
@@ -28,6 +29,7 @@ export {
   CommandMigrationManager,
   DailyBackupManager,
   WeeklyBackupManager,
+  LegacyBackupManager,
 }
 
 export type { ChangedCallback, KEY, commandChangedCallback }
diff --git a/src/services/storage/backupManager.ts b/src/services/storage/backupManager.ts
index b865abde..a798b3a6 100644
--- a/src/services/storage/backupManager.ts
+++ b/src/services/storage/backupManager.ts
@@ -1,16 +1,16 @@
-import { Command, CommandFolder } from '@/types'
-import { LOCAL_STORAGE_KEY, BaseStorage, STORAGE_KEY } from './index'
-import { HybridCommandStorage } from './commandStorage'
+import { Command, CommandFolder } from "@/types"
+import { LOCAL_STORAGE_KEY, BaseStorage, STORAGE_KEY } from "./index"
+import { HybridCommandStorage } from "./commandStorage"
 
 export interface BackupData {
   version: string
   timestamp: number
   commands: Command[]
-  folders?: CommandFolder[]
+  folders: CommandFolder[]
 }
 
 export abstract class BaseBackupManager {
-  protected abstract readonly BACKUP_KEY: string
+  protected abstract readonly BACKUP_KEY: LOCAL_STORAGE_KEY
   protected abstract readonly BACKUP_INTERVAL_MS: number
   protected abstract readonly VERSION: string
 
@@ -25,7 +25,7 @@ export abstract class BaseBackupManager {
       const timeSinceLastBackup = now - lastBackup.timestamp
       return timeSinceLastBackup >= this.BACKUP_INTERVAL_MS
     } catch (error) {
-      console.error('Failed to check backup schedule:', error)
+      console.error("Failed to check backup schedule:", error)
       return true
     }
   }
@@ -42,7 +42,7 @@ export abstract class BaseBackupManager {
       const folders = userSettings?.folders || []
 
       if (commands.length === 0 && folders.length === 0) {
-        console.debug('No commands or folders to backup')
+        console.debug("No commands or folders to backup")
         return
       }
 
@@ -53,9 +53,7 @@ export abstract class BaseBackupManager {
         folders: folders,
       }
 
-      await chrome.storage.local.set({
-        [this.BACKUP_KEY]: backup,
-      })
+      await BaseStorage.set(this.BACKUP_KEY, backup)
 
       console.debug(
         `${this.VERSION} backup completed: ${commands.length} commands and ${folders.length} folders backed up`,
@@ -67,8 +65,7 @@ export abstract class BaseBackupManager {
 
   async getLastBackupData(): Promise<BackupData | null> {
     try {
-      const result = await chrome.storage.local.get(this.BACKUP_KEY)
-      const backup = result[this.BACKUP_KEY]
+      const backup = await BaseStorage.get<BackupData>(this.BACKUP_KEY)
 
       if (backup && backup.timestamp && Array.isArray(backup.commands)) {
         return {
@@ -80,7 +77,7 @@ export abstract class BaseBackupManager {
       }
       return null
     } catch (error) {
-      console.error('Failed to get last backup data:', error)
+      console.error("Failed to get last backup data:", error)
       return null
     }
   }
@@ -100,7 +97,7 @@ export abstract class BaseBackupManager {
         folders: backup.folders || [],
       }
     } catch (error) {
-      console.error('Failed to restore from backup:', error)
+      console.error("Failed to restore from backup:", error)
       return { commands: [], folders: [] }
     }
   }
@@ -115,7 +112,7 @@ export abstract class BaseBackupManager {
 export class DailyBackupManager extends BaseBackupManager {
   protected readonly BACKUP_KEY = LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP
   protected readonly BACKUP_INTERVAL_MS = 24 * 60 * 60 * 1000 // 24 hours
-  protected readonly VERSION = 'daily'
+  protected readonly VERSION = "daily"
 
   // 既存のメソッド名を保持するためのエイリアス
   async performDailyBackup(): Promise<void> {
@@ -134,7 +131,7 @@ export class DailyBackupManager extends BaseBackupManager {
 export class WeeklyBackupManager extends BaseBackupManager {
   protected readonly BACKUP_KEY = LOCAL_STORAGE_KEY.WEEKLY_COMMANDS_BACKUP
   protected readonly BACKUP_INTERVAL_MS = 7 * 24 * 60 * 60 * 1000 // 7 days
-  protected readonly VERSION = 'weekly'
+  protected readonly VERSION = "weekly"
 
   async performWeeklyBackup(): Promise<void> {
     return this.performBackup()
@@ -147,3 +144,47 @@ export class WeeklyBackupManager extends BaseBackupManager {
     return this.restoreFromBackup()
   }
 }
+
+// Legacy backup management class (for migration purposes)
+export class LegacyBackupManager extends BaseBackupManager {
+  protected readonly BACKUP_KEY = LOCAL_STORAGE_KEY.COMMANDS_BACKUP
+  protected readonly BACKUP_INTERVAL_MS = 0 // Never auto-backup (manual only)
+  protected readonly VERSION = "legacy"
+
+  async performLegacyBackup(): Promise<void> {
+    return this.performBackup()
+  }
+
+  async restoreFromLegacyBackup(): Promise<{
+    commands: Command[]
+    folders: CommandFolder[]
+  }> {
+    return this.restoreFromBackup()
+  }
+
+  // Migration-specific method that backs up given commands (not from storage)
+  async backupCommandsForMigration(commands: Command[]): Promise<void> {
+    try {
+      // Get folders from settings directly from storage to avoid circular dependency
+      const userSettings = (await BaseStorage.get(STORAGE_KEY.USER)) as {
+        folders?: CommandFolder[]
+      }
+      const folders = userSettings?.folders || []
+
+      const backup: BackupData = {
+        version: this.VERSION,
+        timestamp: Date.now(),
+        commands: commands,
+        folders: folders,
+      }
+
+      await BaseStorage.set(this.BACKUP_KEY, backup)
+
+      console.debug(
+        `Legacy migration backup completed: ${commands.length} commands and ${folders.length} folders backed up`,
+      )
+    } catch (error) {
+      console.error(`Failed to perform legacy migration backup:`, error)
+    }
+  }
+}
diff --git a/src/services/storage/commandStorage.ts b/src/services/storage/commandStorage.ts
index 11e8b437..f86259ce 100644
--- a/src/services/storage/commandStorage.ts
+++ b/src/services/storage/commandStorage.ts
@@ -1,14 +1,15 @@
-import { DefaultCommands } from '../option/defaultSettings'
-import { Command } from '@/types'
+import { DefaultCommands } from "../option/defaultSettings"
+import { Command } from "@/types"
 import {
   BaseStorage,
   STORAGE_KEY,
   LOCAL_STORAGE_KEY,
   CMD_PREFIX,
-  debouncedSyncSet,
   KEY,
-} from './index'
-import { VERSION } from '@/const'
+  debouncedSyncSet,
+} from "./index"
+import { VERSION } from "@/const"
+import { LegacyBackupManager } from "./backupManager"
 
 // Storage interface for dependency injection
 interface StorageInterface {
@@ -50,7 +51,7 @@ function generateChecksum(obj: unknown): string {
   }
 
   // Convert to hex string and pad to ensure consistent length
-  return Math.abs(hash).toString(16).padStart(8, '0')
+  return Math.abs(hash).toString(16).padStart(8, "0")
 }
 
 async function loadLegacyCommandData(
@@ -80,7 +81,7 @@ async function loadLegacyCommandData(
     if (throwOnError) {
       throw error
     }
-    console.warn('Failed to load legacy commands:', error)
+    console.warn("Failed to load legacy commands:", error)
     return returnDefaultOnEmpty ? DefaultCommands : []
   }
 }
@@ -243,7 +244,7 @@ class CommandMetadataManager {
   async saveGlobalCommandMetadata(
     metadata: GlobalCommandMetadata,
   ): Promise<void> {
-    console.debug('Saving global command metadata:', metadata)
+    console.debug("Saving global command metadata:", metadata)
     await this.storage.set(this.GLOBAL_METADATA_KEY, metadata)
   }
 
@@ -254,7 +255,7 @@ class CommandMetadataManager {
       )
       return metadata || null
     } catch (error) {
-      console.error('Failed to load sync metadata:', error)
+      console.error("Failed to load sync metadata:", error)
       return null
     }
   }
@@ -266,7 +267,7 @@ class CommandMetadataManager {
       )
       return metadata || null
     } catch (error) {
-      console.error('Failed to load local metadata:', error)
+      console.error("Failed to load local metadata:", error)
       return null
     }
   }
@@ -276,10 +277,10 @@ class CommandMetadataManager {
       const metadata = await this.storage.get<GlobalCommandMetadata>(
         this.GLOBAL_METADATA_KEY,
       )
-      console.log('Loaded global command metadata:', metadata)
+      console.log("Loaded global command metadata:", metadata)
       return metadata || null
     } catch (error) {
-      console.error('Failed to load global metadata:', error)
+      console.error("Failed to load global metadata:", error)
       return null
     }
   }
@@ -341,7 +342,7 @@ export class CommandMigrationManager {
 
   async performMigration(): Promise<Command[]> {
     try {
-      console.debug('Starting command migration to hybrid storage...')
+      console.debug("Starting command migration to hybrid storage...")
 
       // Step 1: Load legacy format data
       const legacyCommands = await loadLegacyCommandData(this.storage)
@@ -350,7 +351,8 @@ export class CommandMigrationManager {
       }
 
       // Step 2: Backup data
-      await this.backupCommands(legacyCommands)
+      const legacyBackupManager = new LegacyBackupManager()
+      await legacyBackupManager.backupCommandsForMigration(legacyCommands)
 
       // Step 3: Save in new format
       const hybridStorage = new HybridCommandStorage(this.storage)
@@ -368,15 +370,16 @@ export class CommandMigrationManager {
       )
       return legacyCommands
     } catch (error) {
-      console.error('Migration failed:', error)
+      console.error("Migration failed:", error)
 
       // Attempt to restore from backup when migration fails
-      const backups = await this.restoreFromBackup()
-      if (backups.length > 0) {
+      const legacyBackupManager = new LegacyBackupManager()
+      const backupData = await legacyBackupManager.restoreFromLegacyBackup()
+      if (backupData.commands.length > 0) {
         console.debug(
-          `Migration failed, but restored ${backups.length} commands from backup`,
+          `Migration failed, but restored ${backupData.commands.length} commands from backup`,
         )
-        return backups
+        return backupData.commands
       }
 
       throw new Error(
@@ -408,75 +411,15 @@ export class CommandMigrationManager {
     return legacyCount !== DEFAULT_COUNT
   }
 
-  private async backupCommands(commands: Command[]): Promise<void> {
-    // Get folders from settings directly from storage to avoid circular dependency
-    const userSettings = (await this.storage.get(STORAGE_KEY.USER)) as {
-      folders?: import('@/types').CommandFolder[]
-    }
-    const folders = userSettings?.folders || []
-
-    const backup = {
-      version: 'legacy',
-      timestamp: Date.now(),
-      commands: commands,
-      folders: folders,
-    }
-    await chrome.storage.local.set({
-      [LOCAL_STORAGE_KEY.COMMANDS_BACKUP]: backup,
-    })
-  }
-
-  /**
-   * Restore from legacy data backup
-   * Used for recovery from migration failure or data corruption
-   */
-  async restoreFromBackup(): Promise<Command[]> {
-    try {
-      const result = await chrome.storage.local.get(
-        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
-      )
-      const backup = result[LOCAL_STORAGE_KEY.COMMANDS_BACKUP]
-
-      if (backup && backup.commands && Array.isArray(backup.commands)) {
-        console.info(
-          `Restoring ${backup.commands.length} commands from backup (created at ${new Date(backup.timestamp).toLocaleString()})`,
-        )
-        return backup.commands
-      }
-      return []
-    } catch (error) {
-      console.error('Failed to restore from backup:', error)
-      return []
-    }
-  }
-
   /**
    * Restore both commands and folders from legacy backup
    */
-  async restoreFromBackupWithFolders(): Promise<{
+  async restoreFromBackup(): Promise<{
     commands: Command[]
-    folders: import('@/types').CommandFolder[]
+    folders: import("@/types").CommandFolder[]
   }> {
-    try {
-      const result = await chrome.storage.local.get(
-        LOCAL_STORAGE_KEY.COMMANDS_BACKUP,
-      )
-      const backup = result[LOCAL_STORAGE_KEY.COMMANDS_BACKUP]
-
-      if (backup && backup.commands && Array.isArray(backup.commands)) {
-        console.info(
-          `Restoring ${backup.commands.length} commands and ${(backup.folders || []).length} folders from backup (created at ${new Date(backup.timestamp).toLocaleString()})`,
-        )
-        return {
-          commands: backup.commands,
-          folders: Array.isArray(backup.folders) ? backup.folders : [],
-        }
-      }
-      return { commands: [], folders: [] }
-    } catch (error) {
-      console.error('Failed to restore from backup:', error)
-      return { commands: [], folders: [] }
-    }
+    const legacyBackupManager = new LegacyBackupManager()
+    return await legacyBackupManager.restoreFromLegacyBackup()
   }
 }
 
@@ -500,7 +443,7 @@ export class HybridCommandStorage {
       await this.saveCommandsAndMetadata(allocation)
       return true
     } catch (error) {
-      console.error('Failed to save commands:', error)
+      console.error("Failed to save commands:", error)
       throw error
     }
   }
@@ -570,7 +513,7 @@ export class HybridCommandStorage {
             syncMetadata,
           ))
         ) {
-          console.debug('Sync command integrity check failed')
+          console.debug("Sync command integrity check failed")
           hasIntegrityIssues = true
         }
       }
@@ -582,7 +525,7 @@ export class HybridCommandStorage {
             localMetadata,
           ))
         ) {
-          console.debug('Local command integrity check failed')
+          console.debug("Local command integrity check failed")
           hasIntegrityIssues = true
         }
       }
@@ -591,7 +534,7 @@ export class HybridCommandStorage {
         globalMetadata &&
         !(await this.metadataManager.validateGlobalConsistency(orderedCommands))
       ) {
-        console.debug('Global consistency check failed')
+        console.debug("Global consistency check failed")
         hasIntegrityIssues = true
       }
 
@@ -607,12 +550,12 @@ export class HybridCommandStorage {
           await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS))
           return await this.loadCommands(retryCount + 1)
         }
-        console.warn('Command integrity check failed after all retries...')
+        console.warn("Command integrity check failed after all retries...")
       }
 
       return orderedCommands
     } catch (error) {
-      console.error('Failed to load commands:', error)
+      console.error("Failed to load commands:", error)
       return DefaultCommands
     }
   }
@@ -621,6 +564,7 @@ export class HybridCommandStorage {
     allocation: StorageAllocation,
   ): Promise<void> {
     const syncSavePromises: Promise<void>[] = []
+    const localSavePromises: Promise<boolean>[] = []
 
     // Save to sync storage
     allocation.sync.commands.forEach((command, index) => {
@@ -628,16 +572,12 @@ export class HybridCommandStorage {
       syncSavePromises.push(debouncedSyncSet({ [key]: command }))
     })
 
-    // Save to local storage
-    const localSetData = new Map<string, unknown>()
+    // Save to local storage using BaseStorage
     allocation.local.commands.forEach((command, index) => {
-      const key = `${CMD_PREFIX}local-${index}`
-      localSetData.set(key, command)
+      const key = `${CMD_PREFIX}local-${index}` as KEY
+      localSavePromises.push(this.storage.set(key, command))
     })
 
-    const dataToSet = Object.fromEntries(localSetData)
-    const localSavePromise = chrome.storage.local.set(dataToSet)
-
     // Add metadata save to the same promise batch
     console.log(allocation.globalMetadata)
     const metadataSavePromises = [
@@ -649,7 +589,7 @@ export class HybridCommandStorage {
     // Save commands and metadata atomically in parallel
     await Promise.all([
       await Promise.all(syncSavePromises),
-      localSavePromise,
+      await Promise.all(localSavePromises),
       await Promise.all(metadataSavePromises),
     ])
   }
@@ -728,7 +668,7 @@ export const CommandStorage = {
     // If update first time, set DefaultCommands.
     const count = await storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
     if (count === DEFAULT_COUNT) {
-      console.debug('Update first time, set DefaultCommands.')
+      console.debug("Update first time, set DefaultCommands.")
       const newCommands = current.map((cmd) => {
         return commands.find((c) => c.id === cmd.id) ?? cmd
       })
diff --git a/src/services/storage/index.ts b/src/services/storage/index.ts
index d9305856..d0ea5012 100644
--- a/src/services/storage/index.ts
+++ b/src/services/storage/index.ts
@@ -1,5 +1,5 @@
-import DefaultSettings from '../option/defaultSettings'
-import { CaptureDataStorage } from '@/types'
+import DefaultSettings from "../option/defaultSettings"
+import { CaptureDataStorage } from "@/types"
 
 const SYNC_DEBOUNCE_DELAY = 10
 
@@ -13,31 +13,31 @@ export enum STORAGE_KEY {
 }
 
 export enum LOCAL_STORAGE_KEY {
-  CACHES = 'caches',
-  CLIENT_ID = 'clientId',
-  STARS = 'stars',
-  CAPTURES = 'captures',
-  COMMAND_LOCAL_COUNT = 'commandLocalCount',
-  MIGRATION_STATUS = 'migrationStatus',
-  LOCAL_COMMAND_METADATA = 'localCommandMetadata',
-  COMMANDS_BACKUP = 'commandsBackup',
-  DAILY_COMMANDS_BACKUP = 'dailyCommandsBackup',
-  WEEKLY_COMMANDS_BACKUP = 'weeklyCommandsBackup',
+  CACHES = "caches",
+  CLIENT_ID = "clientId",
+  STARS = "stars",
+  CAPTURES = "captures",
+  COMMAND_LOCAL_COUNT = "commandLocalCount",
+  MIGRATION_STATUS = "migrationStatus",
+  LOCAL_COMMAND_METADATA = "localCommandMetadata",
+  COMMANDS_BACKUP = "commandsBackup",
+  DAILY_COMMANDS_BACKUP = "dailyCommandsBackup",
+  WEEKLY_COMMANDS_BACKUP = "weeklyCommandsBackup",
 }
 
 export enum SESSION_STORAGE_KEY {
-  BG = 'bg',
-  SELECTION_TEXT = 'selectionText ',
-  SESSION_DATA = 'sessionData',
-  MESSAGE_QUEUE = 'messageQueue',
-  TMP_CAPTURES = 'tmpCaptures',
-  PA_RECORDING = 'pageActionRecording',
-  PA_RUNNING = 'pageActionRunning',
-  PA_CONTEXT = 'pageActionContext',
-  PA_RECORDER_OPTION = 'pageActionRecorderOption',
+  BG = "bg",
+  SELECTION_TEXT = "selectionText ",
+  SESSION_DATA = "sessionData",
+  MESSAGE_QUEUE = "messageQueue",
+  TMP_CAPTURES = "tmpCaptures",
+  PA_RECORDING = "pageActionRecording",
+  PA_RUNNING = "pageActionRunning",
+  PA_CONTEXT = "pageActionContext",
+  PA_RECORDER_OPTION = "pageActionRecorderOption",
 }
 
-export const CMD_PREFIX = 'cmd-'
+export const CMD_PREFIX = "cmd-"
 
 let syncSetTimeout: NodeJS.Timeout | null
 let syncSetResolves: (() => void)[] = []
@@ -69,7 +69,7 @@ const debouncedSyncSet = (data: Record<string, unknown>): Promise<void> => {
   })
 }
 
-export type KEY = STORAGE_KEY | LOCAL_STORAGE_KEY | SESSION_STORAGE_KEY
+export type KEY = STORAGE_KEY | LOCAL_STORAGE_KEY | SESSION_STORAGE_KEY | string
 
 const DEFAULT_COUNT = -1
 
@@ -88,7 +88,7 @@ const DEFAULTS = {
   [LOCAL_STORAGE_KEY.CACHES]: {
     images: {},
   },
-  [LOCAL_STORAGE_KEY.CLIENT_ID]: '',
+  [LOCAL_STORAGE_KEY.CLIENT_ID]: "",
   [LOCAL_STORAGE_KEY.STARS]: [],
   [LOCAL_STORAGE_KEY.CAPTURES]: {},
   [LOCAL_STORAGE_KEY.COMMAND_LOCAL_COUNT]: 0,
@@ -105,7 +105,7 @@ const DEFAULTS = {
   [SESSION_STORAGE_KEY.PA_CONTEXT]: {},
   [SESSION_STORAGE_KEY.PA_RECORDER_OPTION]: {},
   [SESSION_STORAGE_KEY.TMP_CAPTURES]: {},
-  [SESSION_STORAGE_KEY.SELECTION_TEXT]: '',
+  [SESSION_STORAGE_KEY.SELECTION_TEXT]: "",
 } as const
 
 const detectStorageArea = (key: KEY): chrome.storage.StorageArea => {
@@ -118,7 +118,16 @@ const detectStorageArea = (key: KEY): chrome.storage.StorageArea => {
   if (Object.values(SESSION_STORAGE_KEY).includes(key as SESSION_STORAGE_KEY)) {
     return chrome.storage.session
   }
-  throw new Error('Invalid Storage Key')
+
+  // Handle dynamic command keys
+  if (typeof key === "string") {
+    if (key.startsWith(CMD_PREFIX)) {
+      // Command keys: cmd-0, cmd-1, cmd-local-0, cmd-local-1, etc.
+      return key.includes("local-") ? chrome.storage.local : chrome.storage.sync
+    }
+  }
+
+  throw new Error("Invalid Storage Key")
 }
 
 export type ChangedCallback<T> = (newVal: T, oldVal: T) => void
@@ -142,7 +151,15 @@ export const BaseStorage = {
     if (chrome.runtime.lastError != null) {
       throw chrome.runtime.lastError
     }
-    return result[key] ?? structuredClone(DEFAULTS[key])
+    // For dynamic keys (like command keys), return the raw value or undefined
+    // For static keys, use the default value from DEFAULTS
+    const hasDefault = key in DEFAULTS
+    return (
+      result[key] ??
+      (hasDefault
+        ? structuredClone(DEFAULTS[key as keyof typeof DEFAULTS])
+        : undefined)
+    )
   },
 
   set: async <T>(key: KEY, value: T): Promise<boolean> => {

From 152d0ec6600bad9f5d894773a98cc5cfb6f08929 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 5 Jul 2025 16:02:44 +0900
Subject: [PATCH 58/64] Update: Moves globalCommandMetaData to local storage.

---
 src/services/storage/commandStorage.ts | 13 +++++++------
 src/services/storage/index.ts          |  4 ++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/services/storage/commandStorage.ts b/src/services/storage/commandStorage.ts
index f86259ce..47e8fc48 100644
--- a/src/services/storage/commandStorage.ts
+++ b/src/services/storage/commandStorage.ts
@@ -226,7 +226,8 @@ class StorageCapacityCalculator {
 class CommandMetadataManager {
   private readonly SYNC_METADATA_KEY = STORAGE_KEY.SYNC_COMMAND_METADATA
   private readonly LOCAL_METADATA_KEY = LOCAL_STORAGE_KEY.LOCAL_COMMAND_METADATA
-  private readonly GLOBAL_METADATA_KEY = STORAGE_KEY.GLOBAL_COMMAND_METADATA
+  private readonly GLOBAL_METADATA_KEY =
+    LOCAL_STORAGE_KEY.GLOBAL_COMMAND_METADATA
   private storage: StorageInterface
 
   constructor(storage: StorageInterface = BaseStorage) {
@@ -277,8 +278,11 @@ class CommandMetadataManager {
       const metadata = await this.storage.get<GlobalCommandMetadata>(
         this.GLOBAL_METADATA_KEY,
       )
-      console.log("Loaded global command metadata:", metadata)
-      return metadata || null
+      if (metadata) {
+        return metadata
+      }
+      console.warn("Global command metadata not found.")
+      return null
     } catch (error) {
       console.error("Failed to load global metadata:", error)
       return null
@@ -662,9 +666,6 @@ export const CommandStorage = {
   ): Promise<boolean | chrome.runtime.LastError> => {
     const current = await hybridStorage.loadCommands()
 
-    // TODO: use metadate
-    debugger
-
     // If update first time, set DefaultCommands.
     const count = await storage.get<number>(STORAGE_KEY.COMMAND_COUNT)
     if (count === DEFAULT_COUNT) {
diff --git a/src/services/storage/index.ts b/src/services/storage/index.ts
index d0ea5012..9e9ac17d 100644
--- a/src/services/storage/index.ts
+++ b/src/services/storage/index.ts
@@ -9,7 +9,6 @@ export enum STORAGE_KEY {
   USER_STATS = 3,
   SHORTCUTS = 4,
   SYNC_COMMAND_METADATA = 5,
-  GLOBAL_COMMAND_METADATA = 6,
 }
 
 export enum LOCAL_STORAGE_KEY {
@@ -20,6 +19,7 @@ export enum LOCAL_STORAGE_KEY {
   COMMAND_LOCAL_COUNT = "commandLocalCount",
   MIGRATION_STATUS = "migrationStatus",
   LOCAL_COMMAND_METADATA = "localCommandMetadata",
+  GLOBAL_COMMAND_METADATA = "globalCommandMetadata",
   COMMANDS_BACKUP = "commandsBackup",
   DAILY_COMMANDS_BACKUP = "dailyCommandsBackup",
   WEEKLY_COMMANDS_BACKUP = "weeklyCommandsBackup",
@@ -84,7 +84,6 @@ const DEFAULTS = {
     shortcuts: [],
   },
   [STORAGE_KEY.SYNC_COMMAND_METADATA]: null,
-  [STORAGE_KEY.GLOBAL_COMMAND_METADATA]: null,
   [LOCAL_STORAGE_KEY.CACHES]: {
     images: {},
   },
@@ -97,6 +96,7 @@ const DEFAULTS = {
   [LOCAL_STORAGE_KEY.DAILY_COMMANDS_BACKUP]: null,
   [LOCAL_STORAGE_KEY.WEEKLY_COMMANDS_BACKUP]: null,
   [LOCAL_STORAGE_KEY.LOCAL_COMMAND_METADATA]: null,
+  [LOCAL_STORAGE_KEY.GLOBAL_COMMAND_METADATA]: null,
   [SESSION_STORAGE_KEY.BG]: {},
   [SESSION_STORAGE_KEY.SESSION_DATA]: null,
   [SESSION_STORAGE_KEY.MESSAGE_QUEUE]: [],

From aebf239ba84685b6d4903d7aec54c6b393b041fe Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 5 Jul 2025 16:07:53 +0900
Subject: [PATCH 59/64] Update: Add shadow to sub-folder.

---
 src/components/ui/menubar.tsx | 42 +++++++++++++++++------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index e8c8d15d..fba40e9a 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as MenubarPrimitive from '@radix-ui/react-menubar'
-import { Check, ChevronRight, Circle } from 'lucide-react'
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils"
 
 const MenubarMenu = MenubarPrimitive.Menu
 
@@ -23,7 +23,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      'flex items-center p-0.5 space-x-px border rounded-md bg-background',
+      "flex items-center p-0.5 space-x-px border rounded-md bg-background",
       className,
     )}
     {...props}
@@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm outline-none focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      "flex cursor-default select-none items-center rounded-sm outline-none focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       className,
     )}
     {...props}
@@ -55,8 +55,8 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm outline-none focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-      inset && 'pl-8',
+      "flex cursor-default select-none items-center rounded-sm outline-none focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
       className,
     )}
     {...props}
@@ -74,7 +74,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-[2147483647] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      "z-[2147483647] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}
@@ -87,7 +87,7 @@ const MenubarContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
 >(
   (
-    { className, align = 'start', alignOffset = -4, sideOffset, ...props },
+    { className, align = "start", alignOffset = -4, sideOffset, ...props },
     ref,
   ) => (
     <MenubarPrimitive.Content
@@ -96,7 +96,7 @@ const MenubarContent = React.forwardRef<
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        'z-[2147483647] overflow-hidden rounded-md bg-background foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        "z-[2147483647] shadow-xl overflow-hidden rounded-md bg-background foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}
@@ -114,8 +114,8 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
+      "relative flex cursor-default select-none items-center rounded-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
       className,
     )}
     {...props}
@@ -130,7 +130,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
@@ -153,7 +153,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -177,8 +177,8 @@ const MenubarLabel = React.forwardRef<
   <MenubarPrimitive.Label
     ref={ref}
     className={cn(
-      'px-2 py-1.5 text-sm font-semibold',
-      inset && 'pl-8',
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
       className,
     )}
     {...props}
@@ -192,7 +192,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
 ))
@@ -205,14 +205,14 @@ const MenubarShortcut = ({
   return (
     <span
       className={cn(
-        'ml-auto text-xs tracking-widest text-muted-foreground',
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
       {...props}
     />
   )
 }
-MenubarShortcut.displayname = 'MenubarShortcut'
+MenubarShortcut.displayname = "MenubarShortcut"
 
 export {
   Menubar,

From 33d97cf3a6cda1fd01d9c90d2c5cf2ff668d5110 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 5 Jul 2025 17:59:37 +0900
Subject: [PATCH 60/64] Update: Improved display of large number of commands.

---
 package.json                      |   1 +
 src/components/menu/Menu.tsx      | 109 ++++++++++++++++++++----------
 src/components/menu/MenuItem.tsx  |  30 ++++----
 src/components/ui/menubar.tsx     |   2 +-
 src/components/ui/scroll-area.tsx |  58 ++++++++++++++++
 yarn.lock                         |  20 ++++++
 6 files changed, 167 insertions(+), 53 deletions(-)
 create mode 100644 src/components/ui/scroll-area.tsx

diff --git a/package.json b/package.json
index d22ee9f6..a0c10b5b 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-toggle": "^1.1.6",
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 99db57bb..c5d707ff 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,25 +1,26 @@
-import React, { useState, useRef } from 'react'
-import clsx from 'clsx'
+import React, { useState, useRef } from "react"
+import clsx from "clsx"
 import {
   Menubar,
   MenubarMenu,
   MenubarTrigger,
   MenubarContent,
-} from '@/components/ui/menubar'
+} from "@/components/ui/menubar"
+import { ScrollArea } from "@/components/ui/scroll-area"
 
-import { STYLE, SIDE } from '@/const'
-import { MenuItem } from './MenuItem'
-import { Icon } from '@/components/Icon'
-import { HoverArea } from '@/components/menu/HoverArea'
-import { MenuImage } from '@/components/menu/MenuImage'
-import css from './Menu.module.css'
-import type { Command, CommandFolder } from '@/types'
-import { useSettingsWithImageCache, useUserSettings } from '@/hooks/useSetting'
-import { onHover, isMenuCommand } from '@/lib/utils'
+import { STYLE, SIDE } from "@/const"
+import { MenuItem } from "./MenuItem"
+import { Icon } from "@/components/Icon"
+import { HoverArea } from "@/components/menu/HoverArea"
+import { MenuImage } from "@/components/menu/MenuImage"
+import css from "./Menu.module.css"
+import type { Command, CommandFolder } from "@/types"
+import { useSettingsWithImageCache, useUserSettings } from "@/hooks/useSetting"
+import { onHover, isMenuCommand } from "@/lib/utils"
 import {
   toCommandTree,
   type CommandTreeNode,
-} from '@/services/option/commandTree'
+} from "@/services/option/commandTree"
 
 type MenuTreeNodeProps = {
   node: CommandTreeNode
@@ -33,8 +34,8 @@ type MenuTreeNodeProps = {
 
 export function Menu(): JSX.Element {
   const menuRef = useRef(null)
-  const [hoverTrigger, setHoverTrigger] = useState('')
-  const [hoverContent, setHoverContent] = useState('')
+  const [hoverTrigger, setHoverTrigger] = useState("")
+  const [hoverContent, setHoverContent] = useState("")
   const { commands: allCommands, folders } = useSettingsWithImageCache()
   const commands = allCommands.filter(isMenuCommand)
   const { userSettings } = useUserSettings()
@@ -78,7 +79,7 @@ const MenuTreeNode = (props: MenuTreeNodeProps): JSX.Element => {
     depth = 0,
   } = props
 
-  if (node.type === 'command') {
+  if (node.type === "command") {
     return (
       <MenuItem
         menuRef={menuRef}
@@ -113,8 +114,8 @@ const MenuFolder = (props: {
   depth?: number
 }) => {
   const { folder, children, isHorizontal, depth = 0 } = props
-  const [hoverTrigger, setHoverTrigger] = useState('')
-  const [hoverContent, setHoverContent] = useState('')
+  const [hoverTrigger, setHoverTrigger] = useState("")
+  const [hoverContent, setHoverContent] = useState("")
   const activeFolder = hoverTrigger || hoverContent
 
   const menuSide = isHorizontal
@@ -140,6 +141,14 @@ const MenuFolder = (props: {
     }, 200)
   }
 
+  const menubarStyle = isHorizontal
+    ? {
+        maxWidth: ((anchorRef.current?.clientWidth ?? 0) + 1) * 10 + 5,
+      }
+    : {
+        maxHeight: ((anchorRef.current?.clientHeight ?? 0) + 2) * 11.6,
+      }
+
   return (
     <MenubarMenu value={folder.id}>
       <MenubarTrigger
@@ -169,25 +178,51 @@ const MenuFolder = (props: {
         ref={contentRef}
         {...onHover(props.onHoverContent, folder.id)}
       >
-        <Menubar
-          value={activeFolder}
-          className={clsx({
-            [css.menuVertical]: !isHorizontal,
-          })}
-        >
-          {children?.map((child) => (
-            <MenuTreeNode
-              node={child}
-              isHorizontal={isHorizontal}
-              side={props.side}
-              menuRef={props.menuRef}
-              onHoverTrigger={setHoverTrigger}
-              onHoverContent={setHoverContent}
-              depth={depth + 1}
-              key={child.content.id}
-            />
-          ))}
-        </Menubar>
+        {!isHorizontal ? (
+          <ScrollArea>
+            <Menubar
+              value={activeFolder}
+              style={menubarStyle}
+              className={clsx({
+                [css.menuVertical]: !isHorizontal,
+              })}
+            >
+              {children?.map((child) => (
+                <MenuTreeNode
+                  node={child}
+                  isHorizontal={isHorizontal}
+                  side={props.side}
+                  menuRef={props.menuRef}
+                  onHoverTrigger={setHoverTrigger}
+                  onHoverContent={setHoverContent}
+                  depth={depth + 1}
+                  key={child.content.id}
+                />
+              ))}
+            </Menubar>
+          </ScrollArea>
+        ) : (
+          <Menubar
+            value={activeFolder}
+            style={menubarStyle}
+            className={clsx({
+              "flex-wrap": isHorizontal,
+            })}
+          >
+            {children?.map((child) => (
+              <MenuTreeNode
+                node={child}
+                isHorizontal={isHorizontal}
+                side={props.side}
+                menuRef={props.menuRef}
+                onHoverTrigger={setHoverTrigger}
+                onHoverContent={setHoverContent}
+                depth={depth + 1}
+                key={child.content.id}
+              />
+            ))}
+          </Menubar>
+        )}
         <HoverArea
           anchor={anchorRect}
           content={contentRect}
diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx
index 4d3a3b14..9cf1ade4 100644
--- a/src/components/menu/MenuItem.tsx
+++ b/src/components/menu/MenuItem.tsx
@@ -1,16 +1,16 @@
-import React, { useRef, useContext } from 'react'
-import clsx from 'clsx'
-import { popupContext } from '@/components/Popup'
-import { Tooltip } from '../Tooltip'
-import { Icon } from '@/components/Icon'
-import { ResultPopup } from '@/components/result/ResultPopup'
-import { linksInSelection } from '@/services/dom'
-import { useSelectContext } from '@/hooks/useSelectContext'
-import { useCommandExecutor } from '@/hooks/useCommandExecutor'
-import { OPEN_MODE, ExecState } from '@/const'
-import type { Command } from '@/types'
+import React, { useRef, useContext } from "react"
+import clsx from "clsx"
+import { popupContext } from "@/components/Popup"
+import { Tooltip } from "../Tooltip"
+import { Icon } from "@/components/Icon"
+import { ResultPopup } from "@/components/result/ResultPopup"
+import { linksInSelection } from "@/services/dom"
+import { useSelectContext } from "@/hooks/useSelectContext"
+import { useCommandExecutor } from "@/hooks/useCommandExecutor"
+import { OPEN_MODE, ExecState } from "@/const"
+import type { Command } from "@/types"
 
-import css from './Menu.module.css'
+import css from "./Menu.module.css"
 
 type MenuItemProps = {
   menuRef: React.RefObject<Element>
@@ -31,7 +31,7 @@ export function MenuItem(props: MenuItemProps): React.ReactNode {
 
   if (openMode === OPEN_MODE.LINK_POPUP) {
     const links = linksInSelection()
-    console.debug('links', links)
+    console.debug("links", links)
     enable = links.length > 0
     message = `${links.length} links`
   }
@@ -67,9 +67,9 @@ export function MenuItem(props: MenuItemProps): React.ReactNode {
           css.button,
           {
             [css.itemHorizontal]: onlyIcon,
-            ['hover:bg-accent']: !inTransition,
+            ["hover:bg-accent"]: !inTransition,
           },
-          'rounded-sm ',
+          "rounded-sm ",
         )}
         ref={buttonRef}
         onClick={handleClick}
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index fba40e9a..ad4911ae 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -23,7 +23,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex items-center p-0.5 space-x-px border rounded-md bg-background",
+      "flex items-center p-0.5 gap-[1px] border rounded-md bg-background",
       className,
     )}
     {...props}
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..05745e9d
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/yarn.lock b/yarn.lock
index c6dc7780..4e2b265d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -717,6 +717,11 @@
   resolved "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz"
   integrity sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==
 
+"@radix-ui/number@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.1.tgz#7b2c9225fbf1b126539551f5985769d0048d9090"
+  integrity sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==
+
 "@radix-ui/primitive@1.1.1":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz"
@@ -1164,6 +1169,21 @@
     "@radix-ui/react-use-callback-ref" "1.1.1"
     "@radix-ui/react-use-controllable-state" "1.2.2"
 
+"@radix-ui/react-scroll-area@^1.2.9":
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.9.tgz#90c49bd3231d7f0796d5d12dabc065afa829cf07"
+  integrity sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==
+  dependencies:
+    "@radix-ui/number" "1.1.1"
+    "@radix-ui/primitive" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-presence" "1.1.4"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
 "@radix-ui/react-select@^2.1.6":
   version "2.1.6"
   resolved "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.6.tgz"

From a3811eb9a3744db11336046b2957267bd9e17a40 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 5 Jul 2025 21:08:06 +0900
Subject: [PATCH 61/64] Update: Improve the shape of hoverArea.

---
 src/components/menu/HoverArea.tsx | 36 +++++++++++++++++--------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/menu/HoverArea.tsx b/src/components/menu/HoverArea.tsx
index a85d181a..bfdd2cd6 100644
--- a/src/components/menu/HoverArea.tsx
+++ b/src/components/menu/HoverArea.tsx
@@ -4,7 +4,7 @@ type Props = {
   isHorizontal: boolean
 }
 
-type Placement = 'top' | 'bottom' | 'left' | 'right'
+type Placement = "top" | "bottom" | "left" | "right"
 
 export const HoverArea = (props: Props) => {
   const { anchor, content, isHorizontal } = props
@@ -24,20 +24,21 @@ export const HoverArea = (props: Props) => {
   const isBottom = isHorizontal && anchor.bottom >= content.bottom
   const isLeft = !isHorizontal && anchor.x <= content.x
   const placement: Placement = isTop
-    ? 'top'
+    ? "top"
     : isBottom
-      ? 'bottom'
+      ? "bottom"
       : isLeft
-        ? 'left'
-        : 'right'
+        ? "left"
+        : "right"
 
   let top = 0
   let left = 0
   let d
 
   switch (placement) {
-    case 'top':
+    case "top":
       d = `M ${anchor.right} ${anchor.top}
+         v ${anchor.height / 4}
          Q ${anchor.right} ${content.top},
            ${content.right} ${content.top}
          h ${-content.width}
@@ -47,34 +48,37 @@ export const HoverArea = (props: Props) => {
          z`
       top = anchor.top - content.top
       break
-    case 'bottom':
+    case "bottom":
       d = `M ${anchor.left} ${anchor.bottom}
          Q ${anchor.left} ${content.bottom},
            ${content.left} ${content.bottom}
          h ${content.width}
          Q ${anchor.right} ${content.bottom},
-           ${anchor.right} ${anchor.bottom}
+           ${anchor.right} ${anchor.bottom - anchor.height / 4}
+         v ${anchor.height / 4}
          h ${-anchor.width}
          z`
       break
-    case 'left':
+    case "left":
       d = `M ${anchor.x} ${anchor.y}
          Q ${content.x} ${anchor.y},
            ${content.x} ${content.y}
          v ${content.height}
          Q ${content.x} ${anchor.bottom},
-           ${anchor.x} ${anchor.bottom}
+           ${anchor.right - (anchor.width * 3) / 4} ${anchor.bottom}
+         h ${-(anchor.width / 4)}
          v ${-anchor.height}
          z`
       left = -anchor.width + 2
       break
-    case 'right':
+    case "right":
       d = `M ${anchor.right} ${anchor.top}
          Q ${content.right} ${anchor.top},
            ${content.right} ${content.top}
          v ${content.height}
          Q ${content.right} ${anchor.bottom},
-           ${anchor.right} ${anchor.bottom}
+           ${anchor.right - anchor.width / 4} ${anchor.bottom}
+         h ${anchor.width / 4}
          v ${-anchor.height}
          z`
       left = -2
@@ -87,17 +91,17 @@ export const HoverArea = (props: Props) => {
       height={height}
       viewBox={`${x} ${y} ${width} ${height}`}
       style={{
-        pointerEvents: 'none',
-        position: 'absolute',
+        pointerEvents: "none",
+        position: "absolute",
         top,
         left,
       }}
     >
       <path
         d={d}
-        fill={'skyblue'}
+        fill={"skyblue"}
         fillOpacity="0"
-        style={{ pointerEvents: 'auto' }}
+        style={{ pointerEvents: "auto" }}
       />
     </svg>
   )

From c74cd0196eab9694b3919737c3d7249c8469b054 Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 5 Jul 2025 21:26:29 +0900
Subject: [PATCH 62/64] Update: Improved submenu size calculations.

---
 src/components/menu/Menu.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index c5d707ff..93a94052 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -141,12 +141,22 @@ const MenuFolder = (props: {
     }, 200)
   }
 
+  const baseSize = anchorRef.current?.clientHeight ?? 0
   const menubarStyle = isHorizontal
     ? {
-        maxWidth: ((anchorRef.current?.clientWidth ?? 0) + 1) * 10 + 5,
+        maxWidth:
+          baseSize * 10 /* buttons */ +
+          1 * 9 /* gap */ +
+          2 * 2 /* padding */ +
+          1 * 2 /* border */ +
+          5,
       }
     : {
-        maxHeight: ((anchorRef.current?.clientHeight ?? 0) + 2) * 11.6,
+        maxHeight:
+          baseSize * 11.4 /* buttons */ +
+          2 * 11 /* gap */ +
+          2 * 2 /* padding */ +
+          1 * 2 /* border */,
       }
 
   return (

From b1000401705cbdc2b2be7d70151f477f462aa04d Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sat, 5 Jul 2025 22:08:48 +0900
Subject: [PATCH 63/64] Fix: Storage usage.

---
 src/components/option/StorageUsage.tsx | 62 +++++++++++++-------------
 src/services/storage/storageUsage.ts   |  8 ++--
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/components/option/StorageUsage.tsx b/src/components/option/StorageUsage.tsx
index 1c633bd1..43b384ea 100644
--- a/src/components/option/StorageUsage.tsx
+++ b/src/components/option/StorageUsage.tsx
@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from 'react'
-import MultiProgress from 'react-multi-progress'
-import { Cloud, Monitor } from 'lucide-react'
+import React, { useState, useEffect } from "react"
+import MultiProgress from "react-multi-progress"
+import { Cloud, Monitor } from "lucide-react"
 import {
   subscribeStorageUsage,
   StorageUsageData,
-} from '@/services/storage/storageUsage'
-import { cn } from '@/lib/utils'
+} from "@/services/storage/storageUsage"
+import { cn } from "@/lib/utils"
 
-import s from './Option.module.css'
+import s from "./Option.module.css"
 
 const StorageUsage: React.FC = () => {
   const [storageData, setStorageData] = useState<StorageUsageData | null>(null)
@@ -21,8 +21,8 @@ const StorageUsage: React.FC = () => {
         setStorageData(data)
         setError(null)
       } catch (err) {
-        console.error('Failed to load storage usage:', err)
-        setError('Failed to load storage usage')
+        console.error("Failed to load storage usage:", err)
+        setError("Failed to load storage usage")
       } finally {
         setLoading(false)
       }
@@ -32,7 +32,7 @@ const StorageUsage: React.FC = () => {
 
   if (loading) {
     return (
-      <div className={cn(s.menu, 'w-[240px]')}>
+      <div className={cn(s.menu, "w-[240px]")}>
         <h3 className={s.menuLabel}>Storage Usage</h3>
         <p className="text-sm text-gray-600 font-medium font-mono mb-2">
           Loading...
@@ -43,9 +43,9 @@ const StorageUsage: React.FC = () => {
 
   if (error || !storageData) {
     return (
-      <div className={cn(s.menu, 'w-[240px]')}>
+      <div className={cn(s.menu, "w-[240px]")}>
         <h3 className={s.menuLabel}>Storage Usage</h3>
-        <p className="text-red-500">{error || 'No data available'}</p>
+        <p className="text-red-500">{error || "No data available"}</p>
       </div>
     )
   }
@@ -53,53 +53,53 @@ const StorageUsage: React.FC = () => {
   const syncElements = [
     {
       value: storageData.sync.systemPercent,
-      color: '#4b5563', // gray-600
-      name: 'System',
+      color: "#4b5563", // gray-600
+      name: "System",
     },
     {
       value: storageData.sync.commandsPercent,
-      color: '#9ca3af', // gray-400
-      name: 'Commands',
+      color: "#9ca3af", // gray-400
+      name: "Commands",
     },
     {
-      value: storageData.sync.reservedRemain,
-      color: '#fff',
-      name: 'Reserved',
+      value: storageData.sync.reservedPercent,
+      color: "#fff",
+      name: "Reserved",
       className: s.bgHatching,
     },
     {
       value: storageData.sync.freePercent,
-      color: '#e5e7eb', // gray-200
-      name: 'Free',
+      color: "#e5e7eb", // gray-200
+      name: "Free",
     },
   ]
 
   const localElements = [
     {
       value: storageData.local.systemPercent,
-      color: '#4b5563', // gray-600
-      name: 'System',
+      color: "#4b5563", // gray-600
+      name: "System",
     },
     {
       value: storageData.local.commandsPercent,
-      color: '#9ca3af', // gray-400
-      name: 'Commands',
+      color: "#9ca3af", // gray-400
+      name: "Commands",
     },
     {
       value: storageData.local.backupPercent,
-      color: '#fff',
-      name: 'Backup',
+      color: "#fff",
+      name: "Backup",
       className: s.bgHatching,
     },
     {
       value: storageData.local.freePercent,
-      color: '#e5e7eb', // gray-200
-      name: 'Free',
+      color: "#e5e7eb", // gray-200
+      name: "Free",
     },
   ]
 
   return (
-    <div className={cn(s.menu, 'w-[240px]')}>
+    <div className={cn(s.menu, "w-[240px]")}>
       <h3 className={s.menuLabel}>Storage Usage</h3>
       <div className="mb-6 w-full">
         <h4 className="text-sm text-gray-600 font-medium font-mono my-2">
@@ -123,7 +123,7 @@ const StorageUsage: React.FC = () => {
           </div>
           <div className="flex items-center">
             <div
-              className={cn('w-3 h-3 border rounded-sm mr-1', s.bgHatching)}
+              className={cn("w-3 h-3 border rounded-sm mr-1", s.bgHatching)}
             ></div>
             <span>Reserved: {storageData.sync.reservedPercent}%</span>
           </div>
@@ -156,7 +156,7 @@ const StorageUsage: React.FC = () => {
           </div>
           <div className="flex items-center">
             <div
-              className={cn('w-3 h-3 border rounded-sm mr-1', s.bgHatching)}
+              className={cn("w-3 h-3 border rounded-sm mr-1", s.bgHatching)}
             ></div>
             <span>Backup: {storageData.local.backupPercent}%</span>
           </div>
diff --git a/src/services/storage/storageUsage.ts b/src/services/storage/storageUsage.ts
index c66683ef..524b5ce8 100644
--- a/src/services/storage/storageUsage.ts
+++ b/src/services/storage/storageUsage.ts
@@ -1,4 +1,4 @@
-import { CMD_PREFIX, STORAGE_KEY, LOCAL_STORAGE_KEY } from '@/services/storage'
+import { CMD_PREFIX, STORAGE_KEY, LOCAL_STORAGE_KEY } from "@/services/storage"
 
 export interface StorageUsageData {
   sync: {
@@ -114,7 +114,7 @@ const getStorageUsage = async (): Promise<StorageUsageData> => {
 
     const syncUsed = syncTotalBytes
     const reservedRemain = reservedTotal - syncSystemBytes
-    const syncFree = syncLimitTotal - reservedRemain - syncUsed
+    const syncFree = syncLimitTotal - reservedTotal - syncCommandBytes
     const localUsed = localTotalBytes
     const localFree = localLimitTotal - localUsed
 
@@ -157,7 +157,7 @@ const getStorageUsage = async (): Promise<StorageUsageData> => {
       },
     }
   } catch (error) {
-    console.error('Failed to get storage usage:', error)
+    console.error("Failed to get storage usage:", error)
     throw error
   }
 }
@@ -170,7 +170,7 @@ export const subscribeStorageUsage = (
       const data = await getStorageUsage()
       callback(data)
     } catch (error) {
-      console.error('Failed to get storage usage:', error)
+      console.error("Failed to get storage usage:", error)
     }
   }
 

From a2a1449f892e1cb1c99c466e1ce5408a2135b3ba Mon Sep 17 00:00:00 2001
From: ujiro99 <siro.cola@gmail.com>
Date: Sun, 6 Jul 2025 10:29:29 +0900
Subject: [PATCH 64/64] Add: Add translations for the Restore from backup menu.

---
 public/_locales/de/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/en/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/es/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/fr/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/hi/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/id/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/it/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/ja/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/ko/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/ms/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/pt_BR/messages.json    | 57 ++++++++++++++++++++++++++
 public/_locales/pt_PT/messages.json    | 57 ++++++++++++++++++++++++++
 public/_locales/ru/messages.json       | 57 ++++++++++++++++++++++++++
 public/_locales/zh_CN/messages.json    | 57 ++++++++++++++++++++++++++
 src/components/option/ImportExport.tsx | 50 +++++++++++-----------
 15 files changed, 824 insertions(+), 24 deletions(-)

diff --git a/public/_locales/de/messages.json b/public/_locales/de/messages.json
index 1d824a1f..3fcf4d6e 100644
--- a/public/_locales/de/messages.json
+++ b/public/_locales/de/messages.json
@@ -781,5 +781,62 @@
   },
   "clipboard_error_action": {
     "message": "OK"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "Aus Backup wiederherstellen"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "Backups werden überprüft..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "Kein Backup verfügbar"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "Befehle aus Backup wiederherstellen"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "Keine Backup-Daten gefunden."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "Aus Backup wiederherstellen"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "Keine Backup-Daten verfügbar."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "Wählen Sie ein Backup zum Wiederherstellen:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "Wiederherstellen"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "Legacy-Migration"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "Tägliches Backup"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "Wöchentliches Backup"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "Erstellt:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "Befehle:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "Ordner:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "Elemente"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "Warnung:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "Dies ersetzt alle aktuellen Befehle durch die Backup-Daten."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "Wiederherstellung aus Backup fehlgeschlagen."
   }
 }
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index e2387c3d..7ece6283 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -793,5 +793,62 @@
   "clipboard_error_action": {
     "message": "OK",
     "description": "Action button for clipboard error"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "Restore from Backup"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "Checking backups..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "No backup available"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "Restore commands from backup"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "No backup data found."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "Restore from Backup"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "No backup data available."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "Select a backup to restore:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "Restore"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "Legacy Migration"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "Daily Backup"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "Weekly Backup"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "Created:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "Commands:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "Folders:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "items"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "Warning:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "This will replace all current commands with the backup data."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "Failed to restore from backup."
   }
 }
diff --git a/public/_locales/es/messages.json b/public/_locales/es/messages.json
index bd3f7a16..8b546eda 100644
--- a/public/_locales/es/messages.json
+++ b/public/_locales/es/messages.json
@@ -781,5 +781,62 @@
   },
   "clipboard_error_action": {
     "message": "OK"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "Restaurar desde Respaldo"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "Verificando respaldos..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "Sin respaldo disponible"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "Restaurar comandos desde respaldo"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "No se encontraron datos de respaldo."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "Restaurar desde Respaldo"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "No hay datos de respaldo disponibles."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "Seleccione un respaldo para restaurar:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "Restaurar"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "Migración Heredada"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "Respaldo Diario"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "Respaldo Semanal"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "Creado:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "Comandos:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "Carpetas:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "elementos"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "Advertencia:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "Esto reemplazará todos los comandos actuales con los datos del respaldo."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "Error al restaurar desde respaldo."
   }
 }
diff --git a/public/_locales/fr/messages.json b/public/_locales/fr/messages.json
index 191f5526..3698edcf 100644
--- a/public/_locales/fr/messages.json
+++ b/public/_locales/fr/messages.json
@@ -781,5 +781,62 @@
   },
   "clipboard_error_action": {
     "message": "OK"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "Restaurer depuis Sauvegarde"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "Vérification des sauvegardes..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "Aucune sauvegarde disponible"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "Restaurer les commandes depuis la sauvegarde"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "Aucune donnée de sauvegarde trouvée."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "Restaurer depuis Sauvegarde"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "Aucune donnée de sauvegarde disponible."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "Sélectionnez une sauvegarde à restaurer :"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "Restaurer"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "Migration Héritée"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "Sauvegarde Quotidienne"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "Sauvegarde Hebdomadaire"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "Créé :"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "Commandes :"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "Dossiers :"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "éléments"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "Attention :"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "Ceci remplacera toutes les commandes actuelles par les données de sauvegarde."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "Échec de la restauration depuis la sauvegarde."
   }
 }
diff --git a/public/_locales/hi/messages.json b/public/_locales/hi/messages.json
index 5b033ed0..fbdd412b 100644
--- a/public/_locales/hi/messages.json
+++ b/public/_locales/hi/messages.json
@@ -781,5 +781,62 @@
   },
   "clipboard_error_action": {
     "message": "ठीक है"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "बैकअप से पुनर्स्थापना"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "बैकअप जांच रहे हैं..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "कोई बैकअप उपलब्ध नहीं"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "बैकअप से कमांड पुनर्स्थापित करें"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "कोई बैकअप डेटा नहीं मिला।"
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "बैकअप से पुनर्स्थापना"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "कोई बैकअप डेटा उपलब्ध नहीं।"
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "पुनर्स्थापित करने के लिए बैकअप चुनें:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "पुनर्स्थापना"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "लेगेसी माइग्रेशन"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "दैनिक बैकअप"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "साप्ताहिक बैकअप"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "बनाया गया:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "कमांड:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "फ़ोल्डर:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "आइटम"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "चेतावनी:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "यह सभी वर्तमान कमांड को बैकअप डेटा से बदल देगा।"
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "बैकअप से पुनर्स्थापना विफल।"
   }
 }
diff --git a/public/_locales/id/messages.json b/public/_locales/id/messages.json
index 35eb128f..0f74e261 100644
--- a/public/_locales/id/messages.json
+++ b/public/_locales/id/messages.json
@@ -784,5 +784,62 @@
   "clipboard_error_action": {
     "message": "OK",
     "description": "Action button for clipboard error"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "Pulihkan dari Cadangan"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "Memeriksa cadangan..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "Tidak ada cadangan tersedia"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "Pulihkan perintah dari cadangan"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "Data cadangan tidak ditemukan."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "Pulihkan dari Cadangan"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "Tidak ada data cadangan tersedia."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "Pilih cadangan untuk dipulihkan:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "Pulihkan"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "Migrasi Warisan"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "Cadangan Harian"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "Cadangan Mingguan"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "Dibuat:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "Perintah:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "Folder:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "item"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "Peringatan:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "Ini akan mengganti semua perintah saat ini dengan data cadangan."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "Gagal memulihkan dari cadangan."
   }
 }
diff --git a/public/_locales/it/messages.json b/public/_locales/it/messages.json
index 43e74ae6..94363fc4 100644
--- a/public/_locales/it/messages.json
+++ b/public/_locales/it/messages.json
@@ -781,5 +781,62 @@
   },
   "clipboard_error_action": {
     "message": "OK"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "Ripristina da Backup"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "Controllo backup in corso..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "Nessun backup disponibile"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "Ripristina comandi da backup"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "Nessun dato di backup trovato."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "Ripristina da Backup"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "Nessun dato di backup disponibile."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "Seleziona un backup da ripristinare:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "Ripristina"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "Migrazione Legacy"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "Backup Giornaliero"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "Backup Settimanale"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "Creato:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "Comandi:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "Cartelle:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "elementi"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "Attenzione:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "Questo sostituirà tutti i comandi attuali con i dati del backup."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "Ripristino da backup fallito."
   }
 }
diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
index d1981f3e..f31492ac 100644
--- a/public/_locales/ja/messages.json
+++ b/public/_locales/ja/messages.json
@@ -787,5 +787,62 @@
   },
   "clipboard_error_action": {
     "message": "OK"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "バックアップから復元"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "バックアップを確認中..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "バックアップなし"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "バックアップからコマンドを復元"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "バックアップデータが見つかりません。"
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "バックアップから復元"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "バックアップデータがありません。"
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "復元するバックアップを選択："
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "復元"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "レガシー移行"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "日次バックアップ"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "週次バックアップ"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "作成日時："
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "コマンド："
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "フォルダ："
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "件"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "警告："
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "現在のコマンドがすべてバックアップデータに置き換えられます。"
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "バックアップからの復元に失敗しました。"
   }
 }
diff --git a/public/_locales/ko/messages.json b/public/_locales/ko/messages.json
index cf16d85a..9997794f 100644
--- a/public/_locales/ko/messages.json
+++ b/public/_locales/ko/messages.json
@@ -781,5 +781,62 @@
   },
   "clipboard_error_action": {
     "message": "확인"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "백업에서 복원"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "백업 확인 중..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "사용 가능한 백업 없음"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "백업에서 명령어 복원"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "백업 데이터를 찾을 수 없습니다."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "백업에서 복원"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "사용 가능한 백업 데이터가 없습니다."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "복원할 백업을 선택하세요:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "복원"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "레거시 마이그레이션"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "일간 백업"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "주간 백업"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "생성일:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "명령어:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "폴더:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "개"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "경고:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "현재 모든 명령어가 백업 데이터로 교체됩니다."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "백업에서 복원하지 못했습니다."
   }
 }
diff --git a/public/_locales/ms/messages.json b/public/_locales/ms/messages.json
index 984d2c84..c8b1640b 100644
--- a/public/_locales/ms/messages.json
+++ b/public/_locales/ms/messages.json
@@ -784,5 +784,62 @@
   "clipboard_error_action": {
     "message": "OK",
     "description": "Action button for clipboard error"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "Pulihkan dari Sandaran"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "Memeriksa sandaran..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "Tiada sandaran tersedia"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "Pulihkan arahan dari sandaran"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "Data sandaran tidak dijumpai."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "Pulihkan dari Sandaran"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "Tiada data sandaran tersedia."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "Pilih sandaran untuk dipulihkan:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "Pulihkan"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "Migrasi Legasi"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "Sandaran Harian"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "Sandaran Mingguan"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "Dicipta:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "Arahan:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "Folder:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "item"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "Amaran:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "Ini akan menggantikan semua arahan semasa dengan data sandaran."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "Gagal memulihkan dari sandaran."
   }
 }
diff --git a/public/_locales/pt_BR/messages.json b/public/_locales/pt_BR/messages.json
index b7dd5acf..c9b1aeb7 100644
--- a/public/_locales/pt_BR/messages.json
+++ b/public/_locales/pt_BR/messages.json
@@ -784,5 +784,62 @@
   "clipboard_error_action": {
     "message": "OK",
     "description": "Action button for clipboard error"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "Restaurar do Backup"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "Verificando backups..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "Nenhum backup disponível"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "Restaurar comandos do backup"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "Nenhum dado de backup encontrado."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "Restaurar do Backup"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "Nenhum dado de backup disponível."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "Selecione um backup para restaurar:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "Restaurar"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "Migração Legada"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "Backup Diário"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "Backup Semanal"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "Criado:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "Comandos:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "Pastas:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "itens"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "Aviso:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "Isso substituirá todos os comandos atuais pelos dados do backup."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "Falha ao restaurar do backup."
   }
 }
diff --git a/public/_locales/pt_PT/messages.json b/public/_locales/pt_PT/messages.json
index afd8b61a..918ab745 100644
--- a/public/_locales/pt_PT/messages.json
+++ b/public/_locales/pt_PT/messages.json
@@ -784,5 +784,62 @@
   "clipboard_error_action": {
     "message": "OK",
     "description": "Action button for clipboard error"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "Restaurar da Cópia de Segurança"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "A verificar cópias de segurança..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "Nenhuma cópia de segurança disponível"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "Restaurar comandos da cópia de segurança"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "Nenhum dado de cópia de segurança encontrado."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "Restaurar da Cópia de Segurança"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "Nenhum dado de cópia de segurança disponível."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "Selecione uma cópia de segurança para restaurar:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "Restaurar"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "Migração Legada"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "Cópia de Segurança Diária"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "Cópia de Segurança Semanal"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "Criado:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "Comandos:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "Pastas:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "itens"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "Aviso:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "Isto substituirá todos os comandos actuais pelos dados da cópia de segurança."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "Falha ao restaurar da cópia de segurança."
   }
 }
diff --git a/public/_locales/ru/messages.json b/public/_locales/ru/messages.json
index a7c17266..2f5c167a 100644
--- a/public/_locales/ru/messages.json
+++ b/public/_locales/ru/messages.json
@@ -781,5 +781,62 @@
   },
   "clipboard_error_action": {
     "message": "OK"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "Восстановить из резервной копии"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "Проверка резервных копий..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "Нет доступных резервных копий"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "Восстановить команды из резервной копии"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "Данные резервной копии не найдены."
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "Восстановить из резервной копии"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "Нет доступных данных резервной копии."
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "Выберите резервную копию для восстановления:"
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "Восстановить"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "Унаследованная миграция"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "Ежедневная резервная копия"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "Еженедельная резервная копия"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "Создано:"
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "Команды:"
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "Папки:"
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "элементов"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "Предупреждение:"
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "Это заменит все текущие команды данными из резервной копии."
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "Не удалось восстановить из резервной копии."
   }
 }
diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
index 4531b878..13db41c1 100644
--- a/public/_locales/zh_CN/messages.json
+++ b/public/_locales/zh_CN/messages.json
@@ -781,5 +781,62 @@
   },
   "clipboard_error_action": {
     "message": "确定"
+  },
+  "Option_RestoreFromBackup": {
+    "message": "从备份恢复"
+  },
+  "Option_RestoreFromBackup_checking": {
+    "message": "正在检查备份..."
+  },
+  "Option_RestoreFromBackup_no_backup": {
+    "message": "无可用备份"
+  },
+  "Option_RestoreFromBackup_tooltip": {
+    "message": "从备份恢复命令"
+  },
+  "Option_RestoreFromBackup_no_data": {
+    "message": "未找到备份数据。"
+  },
+  "Option_RestoreFromBackup_dialog_title": {
+    "message": "从备份恢复"
+  },
+  "Option_RestoreFromBackup_dialog_no_data": {
+    "message": "无可用备份数据。"
+  },
+  "Option_RestoreFromBackup_dialog_select": {
+    "message": "选择要恢复的备份："
+  },
+  "Option_RestoreFromBackup_dialog_restore": {
+    "message": "恢复"
+  },
+  "Option_RestoreFromBackup_legacy": {
+    "message": "传统迁移"
+  },
+  "Option_RestoreFromBackup_daily": {
+    "message": "每日备份"
+  },
+  "Option_RestoreFromBackup_weekly": {
+    "message": "每周备份"
+  },
+  "Option_RestoreFromBackup_created": {
+    "message": "创建时间："
+  },
+  "Option_RestoreFromBackup_commands": {
+    "message": "命令："
+  },
+  "Option_RestoreFromBackup_folders": {
+    "message": "文件夹："
+  },
+  "Option_RestoreFromBackup_items": {
+    "message": "项"
+  },
+  "Option_RestoreFromBackup_warning": {
+    "message": "警告："
+  },
+  "Option_RestoreFromBackup_warning_message": {
+    "message": "这将用备份数据替换所有当前命令。"
+  },
+  "Option_RestoreFromBackup_failed": {
+    "message": "从备份恢复失败。"
   }
 }
diff --git a/src/components/option/ImportExport.tsx b/src/components/option/ImportExport.tsx
index 14080551..8baac1a7 100644
--- a/src/components/option/ImportExport.tsx
+++ b/src/components/option/ImportExport.tsx
@@ -281,7 +281,7 @@ export function ImportExport() {
     )
 
     if (!hasAnyBackup) {
-      alert("No backup data found.")
+      alert(t("Option_RestoreFromBackup_no_data"))
       return
     }
 
@@ -344,7 +344,7 @@ export function ImportExport() {
             await Storage.setCommands(backupCommands)
             location.reload()
           } else {
-            alert("Failed to restore from backup.")
+            alert(t("Option_RestoreFromBackup_failed"))
           }
         } catch (error) {
           console.error("Failed to restore from backup:", error)
@@ -388,22 +388,16 @@ export function ImportExport() {
             Object.values(backupData).every(
               (backup) => backup.status === BACKUP_STATUS.CHECKING,
             )
-              ? "Checking backups..."
+              ? t("Option_RestoreFromBackup_checking")
               : !Object.values(backupData).some(
                     (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
                   )
-                ? "No backup available"
-                : "Restore commands from backup"
+                ? t("Option_RestoreFromBackup_no_backup")
+                : t("Option_RestoreFromBackup_tooltip")
           }
         >
           <RotateCcw size={18} className="mr-2 stroke-gray-600" />
-          Restore from Backup
-          {Object.values(backupData).every(
-            (backup) => backup.status === BACKUP_STATUS.CHECKING,
-          ) && <span className="ml-2 text-xs opacity-50">...</span>}
-          {!Object.values(backupData).some(
-            (backup) => backup.status === BACKUP_STATUS.AVAILABLE,
-          ) && <span className="ml-2 text-xs opacity-50">(N/A)</span>}
+          {t("Option_RestoreFromBackup")}
         </button>
         <button onClick={handleReset} className={css.menuButton} type="button">
           <Undo2 size={18} className="mr-2 stroke-gray-600" />
@@ -444,19 +438,19 @@ export function ImportExport() {
       <Dialog
         open={restoreDialog}
         onClose={handleRestoreClose}
-        title={"Restore from Backup"}
+        title={t("Option_RestoreFromBackup_dialog_title")}
         description={() => {
           const availableBackups = Object.entries(backupData).filter(
             ([, backup]) => backup.status === BACKUP_STATUS.AVAILABLE,
           )
 
           if (availableBackups.length === 0) {
-            return <span>No backup data available.</span>
+            return <span>{t("Option_RestoreFromBackup_dialog_no_data")}</span>
           }
 
-          return <span>Select a backup to restore:</span>
+          return <span>{t("Option_RestoreFromBackup_dialog_select")}</span>
         }}
-        okText="Restore"
+        okText={t("Option_RestoreFromBackup_dialog_restore")}
       >
         {(() => {
           const availableBackups = Object.entries(backupData).filter(
@@ -470,11 +464,11 @@ export function ImportExport() {
           const getBackupTypeLabel = (type: string) => {
             switch (type) {
               case BACKUP_TYPES.LEGACY:
-                return "Legacy Migration"
+                return t("Option_RestoreFromBackup_legacy")
               case BACKUP_TYPES.DAILY:
-                return "Daily Backup"
+                return t("Option_RestoreFromBackup_daily")
               case BACKUP_TYPES.WEEKLY:
-                return "Weekly Backup"
+                return t("Option_RestoreFromBackup_weekly")
               default:
                 return type
             }
@@ -505,12 +499,20 @@ export function ImportExport() {
                       {backup.info && (
                         <div className="text-xs text-gray-600 mt-1">
                           <div>
-                            Created:{" "}
+                            {t("Option_RestoreFromBackup_created")}{" "}
                             {new Date(backup.info.timestamp).toLocaleString()}
                           </div>
-                          <div>Commands: {backup.info.commandCount} items</div>
+                          <div>
+                            {t("Option_RestoreFromBackup_commands")}{" "}
+                            {backup.info.commandCount}{" "}
+                            {t("Option_RestoreFromBackup_items")}
+                          </div>
                           {backup.info.folderCount !== undefined && (
-                            <div>Folders: {backup.info.folderCount} items</div>
+                            <div>
+                              {t("Option_RestoreFromBackup_folders")}{" "}
+                              {backup.info.folderCount}{" "}
+                              {t("Option_RestoreFromBackup_items")}
+                            </div>
                           )}
                         </div>
                       )}
@@ -519,8 +521,8 @@ export function ImportExport() {
                 ))}
               </RadioGroup>
               <p className="mt-4 text-sm text-yellow-600">
-                <strong>Warning:</strong> This will replace all current commands
-                with the backup data.
+                <strong>{t("Option_RestoreFromBackup_warning")}</strong>{" "}
+                {t("Option_RestoreFromBackup_warning_message")}
               </p>
             </div>
           )