feat: add eslint import order rule and formaize import orders

.eslintrc

@@ -1,23 +1,49 @@
 {
-    "root": true,
-    "parser": "@typescript-eslint/parser",
-    "env": { "node": true },
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "extends": [
-      "eslint:recommended",
-      "plugin:@typescript-eslint/eslint-recommended",
-      "plugin:@typescript-eslint/recommended"
-    ], 
-    "parserOptions": {
-        "sourceType": "module"
-    },
-    "rules": {
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
-      "@typescript-eslint/ban-ts-comment": "off",
-      "no-prototype-builtins": "off",
-      "@typescript-eslint/no-empty-function": "off"
-    } 
-  }
+	"root": true,
+	"parser": "@typescript-eslint/parser",
+	"env": { "node": true },
+	"plugins": ["@typescript-eslint", "import"],
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/eslint-recommended",
+		"plugin:@typescript-eslint/recommended"
+	],
+	"parserOptions": {
+		"sourceType": "module"
+	},
+	"rules": {
+		"no-unused-vars": "off",
+		"@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
+		"@typescript-eslint/ban-ts-comment": "off",
+		"no-prototype-builtins": "off",
+		"@typescript-eslint/no-empty-function": "off",
+		"import/order": [
+			"warn",
+			{
+				"groups": [
+					"builtin",
+					"external",
+					"internal",
+					"parent",
+					"sibling",
+					"index",
+					"object",
+					"type"
+				],
+				"pathGroups": [
+					{
+						"pattern": "src/**",
+						"group": "internal",
+						"position": "after"
+					}
+				],
+				"pathGroupsExcludedImportTypes": ["builtin"],
+				"newlines-between": "always",
+				"alphabetize": {
+					"order": "asc",
+					"caseInsensitive": true
+				}
+			}
+		]
+	}
+}

package.json

@@ -6,7 +6,11 @@
 	"scripts": {
 		"dev": "node esbuild.config.mjs",
 		"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
-		"version": "node version-bump.mjs && git add manifest.json versions.json"
+		"version": "node version-bump.mjs && git add manifest.json versions.json",
+		"postinstall": "husky install"
+	},
+	"lint-staged": {
+		"*.{js,jsx,ts,tsx}": "eslint --fix"
 	},
 	"keywords": [],
 	"author": "",
@@ -19,6 +23,9 @@
 		"@typescript-eslint/parser": "5.29.0",
 		"builtin-modules": "3.3.0",
 		"esbuild": "0.17.3",
+		"eslint-plugin-import": "^2.32.0",
+		"husky": "^9.1.7",
+		"lint-staged": "^16.1.2",
 		"obsidian": "latest",
 		"tslib": "2.4.0",
 		"typescript": "4.7.4"

src/ExplorerView.tsx

@@ -1,8 +1,8 @@
-import { Root, createRoot } from "react-dom/client";
 import { ItemView, WorkspaceLeaf } from "obsidian";
+import { Root, createRoot } from "react-dom/client";
 
-import FolderFileSplitterPlugin from "./main";
 import Explorer from "./components/Explorer";
+import FolderFileSplitterPlugin from "./main";
 
 export class ExplorerView extends ItemView {
 	root: Root;

src/SettingTab.tsx

@@ -1,6 +1,6 @@
+import dayjs from "dayjs";
 import { App, DropdownComponent, PluginSettingTab, Setting } from "obsidian";
-import FolderFileSplitterPlugin from "./main";
-import { FolderFileSplitterPluginSettings } from "./settings";
+
 import {
 	EN_SETTINGS,
 	EN_SETTINGS_HEADER,
@@ -9,7 +9,8 @@ import {
 	ZH_SETTINGS,
 	ZH_SETTINGS_HEADER,
 } from "./locales/settings";
-import dayjs from "dayjs";
+import FolderFileSplitterPlugin from "./main";
+import { FolderFileSplitterPluginSettings } from "./settings";
 
 export class SettingTab extends PluginSettingTab {
 	plugin: FolderFileSplitterPlugin;

src/assets/icons/index.tsx

@@ -1,18 +1,18 @@
-import FolderIcon from "./FolderIcon";
-import EmptyFolderIcon from "./EmptyFolderIcon";
-import StarIcon from "./RootFolderIcon";
-import AddFolderIcon from "./AddFolderIcon";
 import AddFileIcon from "./AddFileIcon";
-import AscendingSortIcon from "./AscendingSortIcon";
-import DescendingSortIcon from "./DescendingSortIcon";
-import ExpandIcon from "./ExpandIcon";
-import CollapseIcon from "./CollapseIcon";
-import LoadingIcon from "./LoadingIcon";
-import GripIcon from "./GripIcon";
+import AddFolderIcon from "./AddFolderIcon";
 import ArrowUpDownIcon from "./ArrowUpDownIcon";
-import PinIcon from "./PinIcon";
+import AscendingSortIcon from "./AscendingSortIcon";
 import ChevronDown from "./ChevronDown";
 import ChevronRight from "./ChevronRight";
+import CollapseIcon from "./CollapseIcon";
+import DescendingSortIcon from "./DescendingSortIcon";
+import EmptyFolderIcon from "./EmptyFolderIcon";
+import ExpandIcon from "./ExpandIcon";
+import FolderIcon from "./FolderIcon";
+import GripIcon from "./GripIcon";
+import LoadingIcon from "./LoadingIcon";
+import PinIcon from "./PinIcon";
+import StarIcon from "./RootFolderIcon";
 import TagIcon from "./TagIcon";
 
 export {

src/components/ExpandIcon.tsx

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import classNames from "classnames";
+import { ReactNode } from "react";
 
 import { ChevronRight } from "src/assets/icons";
 

src/components/Explorer/Content.tsx

@@ -1,6 +1,6 @@
+import { useExplorer } from "src/hooks/useExplorer";
 import { useLayoutMode } from "src/hooks/useSettingsHandler";
 import { LAYOUT_MODE } from "src/settings";
-import { useExplorer } from "src/hooks/useExplorer";
 
 import { HorizontalSplitLayout, VerticalSplitLayout } from "../layout";
 

src/components/Explorer/DragAndDrop.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
 	DndContext,
 	DragEndEvent,
@@ -9,14 +8,15 @@ import {
 	useSensor,
 	useSensors,
 } from "@dnd-kit/core";
-import { TAbstractFile, TFile, TFolder } from "obsidian";
 import { snapCenterToCursor } from "@dnd-kit/modifiers";
+import { TAbstractFile, TFile, TFolder } from "obsidian";
+import { useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
-import { useOpenDestinationFolder } from "src/hooks/useSettingsHandler";
-import { isFile, isFolder } from "src/utils";
 import { useExplorer } from "src/hooks/useExplorer";
+import { useOpenDestinationFolder } from "src/hooks/useSettingsHandler";
+import { ExplorerStore } from "src/store";
+import { isFile, isFolder } from "src/utils";
 
 import ExplorerContent from "./Content";
 

src/components/Explorer/index.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useState } from "react";
-
 import { useShallow } from "zustand/react/shallow";
 
+import { ExplorerContext } from "src/hooks/useExplorer";
 import FolderFileSplitterPlugin from "src/main";
 import { createExplorerStore, ExplorerStore } from "src/store";
-import { ExplorerContext } from "src/hooks/useExplorer";
 
 import Loading from "../Loading";
+
 import DragAndDropExplorer from "./DragAndDrop";
 
 type Props = {

src/components/File/Content.tsx

@@ -1,19 +1,21 @@
-import { Menu, TFile } from "obsidian";
-import { useShallow } from "zustand/react/shallow";
-import { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
+import { Menu, TFile } from "obsidian";
+import { useEffect, useRef, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
-import useRenderEditableName from "src/hooks/useRenderEditableName";
 import { useExplorer } from "src/hooks/useExplorer";
-import { FILE_OPERATION_COPY } from "src/locales";
+import useRenderEditableName from "src/hooks/useRenderEditableName";
 import {
 	useBoldFileTitle,
 	useFileItemSpacing,
 	useShowFileDetail,
 	useShowFileItemDivider,
 } from "src/hooks/useSettingsHandler";
+import { FILE_OPERATION_COPY } from "src/locales";
+import { ExplorerStore } from "src/store";
+
 import { FolderListModal } from "../FolderListModal";
+
 import FileDetail from "./Detail";
 
 export type FileProps = {

src/components/File/Detail.tsx

@@ -1,9 +1,9 @@
+import dayjs from "dayjs";
 import { MarkdownRenderer, TFile } from "obsidian";
 import { useEffect, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
-import dayjs from "dayjs";
 
-import { ExplorerStore } from "src/store";
+import { VaultChangeEvent, VaultChangeEventName } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useFileCreationDateFormat,
@@ -11,7 +11,8 @@ import {
 	useShowFileCreationDate,
 	useStripMarkdownSyntaxInPreview,
 } from "src/hooks/useSettingsHandler";
-import { VaultChangeEvent, VaultChangeEventName } from "src/assets/constants";
+import { ExplorerStore } from "src/store";
+
 
 type Props = {
 	file: TFile;

src/components/File/index.tsx

@@ -1,11 +1,11 @@
-import { useEffect } from "react";
 import { useDraggable } from "@dnd-kit/core";
-import { useShallow } from "zustand/react/shallow";
 import dayjs from "dayjs";
+import { useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
 import { FFS_DRAG_FILE } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
+import { ExplorerStore } from "src/store";
 
 import FileContent, { FileProps } from "./Content";
 

src/components/FileActions/CreateFile.tsx

@@ -1,10 +1,11 @@
+
+import classNames from "classnames";
 import { useShallow } from "zustand/react/shallow";
 
 import { AddFileIcon } from "src/assets/icons";
-import { ExplorerStore } from "src/store";
 import { useExplorer } from "src/hooks/useExplorer";
-import classNames from "classnames";
 import { useShowFolderView } from "src/hooks/useSettingsHandler";
+import { ExplorerStore } from "src/store";
 
 const CreateFile = () => {
 	const { useExplorerStore, plugin } = useExplorer();

src/components/FileActions/SortFiles.tsx

@@ -1,12 +1,12 @@
 import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
-import { FILE_SORT_RULES_COPY } from "src/locales";
 import { useExplorer } from "src/hooks/useExplorer";
+import { FILE_SORT_RULES_COPY } from "src/locales";
+import { ExplorerStore } from "src/store";
+import { FILE_MANUAL_SORT_RULE, FileSortRule } from "src/store/file";
 
 import { ManualSortFilesModal } from "../ManualSortFilesModal";
 import SortAction from "../SortAction";
-import { FILE_MANUAL_SORT_RULE, FileSortRule } from "src/store/file";
 
 type FileSortRuleItem = {
 	text: string;

src/components/FileTree/PinnedFiles.tsx

@@ -1,10 +1,10 @@
+import { TFile } from "obsidian";
 import { ReactNode, useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
-import { TFile } from "obsidian";
 
-import { ExplorerStore } from "src/store";
 import { PinIcon } from "src/assets/icons";
 import { useExplorer } from "src/hooks/useExplorer";
+import { ExplorerStore } from "src/store";
 import { uniq } from "src/utils";
 
 type Props = {

src/components/FileTree/index.tsx

@@ -1,13 +1,16 @@
-import { useShallow } from "zustand/react/shallow";
 import { TFile } from "obsidian";
+import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
-import { useChangeFile } from "src/hooks/useVaultChangeHandler";
+import { EmptyFolderIcon } from "src/assets/icons";
 import { useExplorer } from "src/hooks/useExplorer";
+import { useChangeFile } from "src/hooks/useVaultChangeHandler";
+import { ExplorerStore } from "src/store";
+
 
 import File from "../File";
+
 import PinnedFiles from "./PinnedFiles";
-import { EmptyFolderIcon } from "src/assets/icons";
+
 
 type Props = {
 	onOpenFoldersPane?: () => void;

src/components/Folder/Content.tsx

@@ -1,16 +1,21 @@
-import { Menu, TFolder } from "obsidian";
-import { useShallow } from "zustand/react/shallow";
-import { useEffect, useRef, useState } from "react";
-
-import { ExplorerStore } from "src/store";
-import { FolderListModal } from "../FolderListModal";
-import { useShowFolderIcon } from "src/hooks/useSettingsHandler";
-import FilesCount from "./FilesCount";
-import useRenderEditableName from "src/hooks/useRenderEditableName";
-import { FOLDER_OPERATION_COPY } from "src/locales";
-import { useExplorer } from "src/hooks/useExplorer";
 import classNames from "classnames";
+import { Menu, TFolder } from "obsidian";
+import { useEffect, useRef, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+
 import { FolderIcon, StarIcon } from "src/assets/icons";
+import { useExplorer } from "src/hooks/useExplorer";
+import useRenderEditableName from "src/hooks/useRenderEditableName";
+import { useShowFolderIcon } from "src/hooks/useSettingsHandler";
+import { FOLDER_OPERATION_COPY } from "src/locales";
+import { ExplorerStore } from "src/store";
+
+
+import { FolderListModal } from "../FolderListModal";
+
+
+import FilesCount from "./FilesCount";
+
 
 export type FolderProps = {
 	folder: TFolder;

src/components/Folder/ExpandIcon.tsx

@@ -1,8 +1,10 @@
 import { TFolder } from "obsidian";
 import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
 import { useExplorer } from "src/hooks/useExplorer";
+import { ExplorerStore } from "src/store";
+
+
 import ExpandIcon from "../ExpandIcon";
 
 type Props = {

src/components/Folder/FilesCount.tsx

@@ -1,15 +1,15 @@
 import { TFolder } from "obsidian";
+import { useEffect, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
+import { VaultChangeEvent, VaultChangeEventName } from "src/assets/constants";
+import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useIncludeSubfolderFiles,
 	useShowFilesCount,
 } from "src/hooks/useSettingsHandler";
-import { VaultChangeEvent, VaultChangeEventName } from "src/assets/constants";
+import { ExplorerStore } from "src/store";
 import { isFile } from "src/utils";
-import { useEffect, useState } from "react";
-import { useExplorer } from "src/hooks/useExplorer";
 
 type Props = {
 	folder: TFolder;

src/components/Folder/index.tsx

@@ -1,15 +1,17 @@
-import { useShallow } from "zustand/react/shallow";
-import { useEffect } from "react";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
-
-import { ExplorerStore } from "src/store";
-import { FFS_DRAG_FILE, FFS_DRAG_FOLDER } from "src/assets/constants";
-import FolderContent, { FolderProps } from "./Content";
-import { useExplorer } from "src/hooks/useExplorer";
-import FolderExpandIcon from "./ExpandIcon";
 import classNames from "classnames";
+import { useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+
+import { FFS_DRAG_FILE, FFS_DRAG_FOLDER } from "src/assets/constants";
+import { useExplorer } from "src/hooks/useExplorer";
+import { ExplorerStore } from "src/store";
 import { pluralize } from "src/utils";
 
+import FolderContent, { FolderProps } from "./Content";
+import FolderExpandIcon from "./ExpandIcon";
+
+
 type Props = FolderProps & {
 	onOpenFilesPane: () => void;
 	disableDrag?: boolean;

src/components/FolderAndTagActions/CreateFolder.tsx

@@ -1,11 +1,11 @@
+import classNames from "classnames";
 import { TFolder } from "obsidian";
 import { useShallow } from "zustand/react/shallow";
-import classNames from "classnames";
 
 import { AddFolderIcon } from "src/assets/icons";
-import { ExplorerStore } from "src/store";
 import { useExplorer } from "src/hooks/useExplorer";
 import { useShowFolderView } from "src/hooks/useSettingsHandler";
+import { ExplorerStore } from "src/store";
 import { uniq } from "src/utils";
 
 const CreateFolder = () => {

src/components/FolderAndTagActions/SortFoldersAndTags.tsx

@@ -1,12 +1,14 @@
 import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
-import SortAction from "../SortAction";
-import { ManualSortFoldersModal } from "../ManualSortFoldersModal";
-import { FOLDER_SORT_RULES_COPY } from "src/locales";
 import { useExplorer } from "src/hooks/useExplorer";
+import { FOLDER_SORT_RULES_COPY } from "src/locales";
+import { ExplorerStore } from "src/store";
 import { FOLDER_MANUAL_SORT_RULE, FolderSortRule } from "src/store/folder";
 
+import { ManualSortFoldersModal } from "../ManualSortFoldersModal";
+import SortAction from "../SortAction";
+
+
 type FolderSortRuleItem = {
 	text: string;
 	rule: FolderSortRule;

src/components/FolderAndTagActions/ToggleFolderAndTagView.tsx

@@ -1,4 +1,5 @@
 import classNames from "classnames";
+
 import { FolderIcon, TagIcon } from "src/assets/icons";
 import { useExplorer } from "src/hooks/useExplorer";
 import {

src/components/FolderAndTagActions/ToggleFoldersAndTags.tsx

@@ -2,13 +2,13 @@ import { useEffect, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 
 import { ExpandIcon, CollapseIcon } from "src/assets/icons";
-import { ExplorerStore } from "src/store";
 import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useShowFolderView,
 	useShowTagView,
 } from "src/hooks/useSettingsHandler";
 import { TIPS_COPY } from "src/locales";
+import { ExplorerStore } from "src/store";
 
 const ToggleFolders = () => {
 	const { useExplorerStore, plugin } = useExplorer();

src/components/FolderAndTagTree/PinnedFoldersAndTags.tsx

@@ -1,16 +1,16 @@
-import { useShallow } from "zustand/react/shallow";
 import { TFolder } from "obsidian";
 import { ReactNode, useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
 import PinIcon from "src/assets/icons/PinIcon";
 import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useShowFolderView,
 	useShowTagView,
 } from "src/hooks/useSettingsHandler";
-import { uniq } from "src/utils";
+import { ExplorerStore } from "src/store";
 import { TagNode } from "src/store/tag";
+import { uniq } from "src/utils";
 
 export type RenderOptions = {
 	hideExpandIcon?: boolean;

src/components/FolderAndTagTree/index.tsx

@@ -1,8 +1,9 @@
-import { useShallow } from "zustand/react/shallow";
-import { TFolder } from "obsidian";
 import classNames from "classnames";
+import { TFolder } from "obsidian";
+import { ReactNode } from "react";
+import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
+import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useHideRootFolder,
 	useShowFolderView,
@@ -10,13 +11,14 @@ import {
 	useShowTagView,
 } from "src/hooks/useSettingsHandler";
 import { useChangeFolder } from "src/hooks/useVaultChangeHandler";
-import { useExplorer } from "src/hooks/useExplorer";
+import { ExplorerStore } from "src/store";
+import { TagNode } from "src/store/tag";
 
 import Folder from "../Folder";
-import PinnedFoldersAndTags, { RenderOptions } from "./PinnedFoldersAndTags";
-import { ReactNode } from "react";
 import Tag from "../Tag";
-import { TagNode } from "src/store/tag";
+
+import PinnedFoldersAndTags, { RenderOptions } from "./PinnedFoldersAndTags";
+
 
 type Props = {
 	onOpenFilesPane?: () => void;

src/components/ManualSortFilesModal/FileToSort.tsx

@@ -1,6 +1,6 @@
-import { TFile } from "obsidian";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { TFile } from "obsidian";
 
 import { FFS_SORT_FOLDER } from "src/assets/constants";
 import { GripIcon } from "src/assets/icons";

src/components/ManualSortFilesModal/ManualSortFiles.tsx

@@ -1,12 +1,3 @@
-import { TFile, TFolder } from "obsidian";
-import { useShallow } from "zustand/react/shallow";
-import { StoreApi, UseBoundStore } from "zustand";
-import { useState } from "react";
-import {
-	SortableContext,
-	sortableKeyboardCoordinates,
-	verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
 import {
 	closestCenter,
 	DndContext,
@@ -18,9 +9,19 @@ import {
 	useSensor,
 	useSensors,
 } from "@dnd-kit/core";
+import {
+	SortableContext,
+	sortableKeyboardCoordinates,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { TFile, TFolder } from "obsidian";
+import { useState } from "react";
+import { StoreApi, UseBoundStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
 import FolderFileSplitterPlugin from "src/main";
+import { ExplorerStore } from "src/store";
+
 import FileToSort from "./FileToSort";
 
 type Props = {

src/components/ManualSortFilesModal/index.tsx

@@ -2,9 +2,10 @@ import { Modal, TFolder } from "obsidian";
 import { createRoot, Root } from "react-dom/client";
 import { StoreApi, UseBoundStore } from "zustand";
 
+import { TIPS_COPY } from "src/locales";
 import FolderFileSplitterPlugin from "src/main";
 import { ExplorerStore } from "src/store";
-import { TIPS_COPY } from "src/locales";
+
 
 import ManualSortFiles from "./ManualSortFiles";
 

src/components/ManualSortFoldersModal/FolderToSort.tsx

@@ -1,12 +1,12 @@
-import { TFolder } from "obsidian";
-import { useShallow } from "zustand/react/shallow";
-import { StoreApi, UseBoundStore } from "zustand";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { TFolder } from "obsidian";
+import { StoreApi, UseBoundStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
 import { FFS_SORT_FOLDER } from "src/assets/constants";
 import { GripIcon } from "src/assets/icons";
+import { ExplorerStore } from "src/store";
 
 type Props = {
 	folder: TFolder;

src/components/ManualSortFoldersModal/ManualSortFolders.tsx

@@ -1,12 +1,3 @@
-import { TFolder } from "obsidian";
-import { useShallow } from "zustand/react/shallow";
-import { StoreApi, UseBoundStore } from "zustand";
-import { Fragment, useEffect, useState } from "react";
-import {
-	SortableContext,
-	sortableKeyboardCoordinates,
-	verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
 import {
 	closestCenter,
 	DndContext,
@@ -18,9 +9,19 @@ import {
 	useSensor,
 	useSensors,
 } from "@dnd-kit/core";
+import {
+	SortableContext,
+	sortableKeyboardCoordinates,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { TFolder } from "obsidian";
+import { Fragment, useEffect, useState } from "react";
+import { StoreApi, UseBoundStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
 import FolderFileSplitterPlugin from "src/main";
+import { ExplorerStore } from "src/store";
+
 import FolderToSort from "./FolderToSort";
 
 type Props = {

src/components/ManualSortFoldersModal/index.tsx

@@ -2,9 +2,10 @@ import { Modal, TFolder } from "obsidian";
 import { createRoot, Root } from "react-dom/client";
 import { StoreApi, UseBoundStore } from "zustand";
 
+import { TIPS_COPY } from "src/locales";
 import FolderFileSplitterPlugin from "src/main";
 import { ExplorerStore } from "src/store";
-import { TIPS_COPY } from "src/locales";
+
 
 import ManualSortFolders from "./ManualSortFolders";
 

src/components/Tag/Content.tsx

@@ -1,14 +1,17 @@
-import { useShowTagIcon } from "src/hooks/useSettingsHandler";
-import { useExplorer } from "src/hooks/useExplorer";
 import classNames from "classnames";
-import { TagIcon } from "src/assets/icons";
-import { TagNode } from "src/store/tag";
-import FilesCount from "./FilesCount";
-import { useShallow } from "zustand/react/shallow";
-import useRenderEditableName from "src/hooks/useRenderEditableName";
-import { useEffect, useRef, useState } from "react";
 import { Menu } from "obsidian";
+import { useEffect, useRef, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+
+import { TagIcon } from "src/assets/icons";
+import { useExplorer } from "src/hooks/useExplorer";
+import useRenderEditableName from "src/hooks/useRenderEditableName";
+import { useShowTagIcon } from "src/hooks/useSettingsHandler";
 import { TAG_OPERATION_COPY } from "src/locales";
+import { TagNode } from "src/store/tag";
+
+import FilesCount from "./FilesCount";
+
 
 type Props = {
 	tag: TagNode;

src/components/Tag/ExpandIcon.tsx

@@ -1,10 +1,13 @@
 import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
 import { useExplorer } from "src/hooks/useExplorer";
-import ExpandIcon from "../ExpandIcon";
+import { ExplorerStore } from "src/store";
 import { TagNode } from "src/store/tag";
 
+
+import ExpandIcon from "../ExpandIcon";
+
+
 type Props = {
 	tag: TagNode;
 };

src/components/Tag/FilesCount.tsx

@@ -1,15 +1,16 @@
+
+import { useEffect, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 
-import { ExplorerStore } from "src/store";
+import { VaultChangeEvent, VaultChangeEventName } from "src/assets/constants";
+import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useIncludeSubTagFiles,
 	useShowFilesCount,
 } from "src/hooks/useSettingsHandler";
-import { VaultChangeEvent, VaultChangeEventName } from "src/assets/constants";
-import { isFile } from "src/utils";
-import { useEffect, useState } from "react";
-import { useExplorer } from "src/hooks/useExplorer";
+import { ExplorerStore } from "src/store";
 import { TagNode } from "src/store/tag";
+import { isFile } from "src/utils";
 
 type Props = {
 	tag: TagNode;

src/components/Tag/index.tsx

@@ -1,13 +1,14 @@
 import classNames from "classnames";
 import { useShallow } from "zustand/react/shallow";
 
-import { TagNode } from "src/store/tag";
 import { useExplorer } from "src/hooks/useExplorer";
 import { ExplorerStore } from "src/store";
-import TagExpandIcon from "./ExpandIcon";
-import TagContent from "./Content";
+import { TagNode } from "src/store/tag";
 import { pluralize } from "src/utils";
 
+import TagContent from "./Content";
+import TagExpandIcon from "./ExpandIcon";
+
 type Props = {
 	tag: TagNode;
 	disableHoverIndent?: boolean;

src/components/layout/Actions.tsx

@@ -1,15 +1,18 @@
-import CreateFolder from "../FolderAndTagActions/CreateFolder";
-import SortFolders from "../FolderAndTagActions/SortFoldersAndTags";
-import ToggleFolders from "../FolderAndTagActions/ToggleFoldersAndTags";
-import CreateFile from "../FileActions/CreateFile";
-import SortFiles from "../FileActions/SortFiles";
 import classNames from "classnames";
+
 import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useAutoHideActionBar,
 	useHighlightActionBar,
 } from "src/hooks/useSettingsHandler";
 
+import CreateFile from "../FileActions/CreateFile";
+import SortFiles from "../FileActions/SortFiles";
+import CreateFolder from "../FolderAndTagActions/CreateFolder";
+import SortFolders from "../FolderAndTagActions/SortFoldersAndTags";
+import ToggleFolders from "../FolderAndTagActions/ToggleFoldersAndTags";
+
+
 export const FolderAndTagActionSection = () => (
 	<div className="ffs__actions-section nav-buttons-container">
 		<CreateFolder />

src/components/layout/HorizontalSplitLayout.tsx

@@ -2,19 +2,19 @@ import { useEffect, useState, useRef } from "react";
 
 import { FFS_FOLDER_PANE_WIDTH_KEY } from "src/assets/constants";
 import useChangeActiveLeaf from "src/hooks/useChangeActiveLeaf";
+import { toValidNumber } from "src/utils";
 
 import FileTree from "../FileTree";
 import ToggleFolderAndTagMode from "../FolderAndTagActions/ToggleFolderAndTagView";
+import FolderAndTagTree from "../FolderAndTagTree";
 
 import {
 	ActionsContainer,
 	FileActionSection,
 	FolderAndTagActionSection,
 } from "./Actions";
-import FolderAndTagTree from "../FolderAndTagTree";
 import { HorizontalDraggableDivider } from "./DraggableDivider";
 import ViewModeDisplay from "./ViewModeDisplay";
-import { toValidNumber } from "src/utils";
 
 const HorizontalSplitLayout = () => {
 	const [folderPaneWidth, setFolderPaneWidth] = useState<

src/components/layout/VerticalSplitFilesPane.tsx

@@ -1,7 +1,9 @@
-import { ActionsContainer, FileActionSection } from "./Actions";
-import FileTree from "../FileTree";
 import { useExplorer } from "src/hooks/useExplorer";
 import { VERTICAL_SPLIT_LAYOUT_OPERATION_COPY } from "src/locales";
+
+import FileTree from "../FileTree";
+
+import { ActionsContainer, FileActionSection } from "./Actions";
 import { ClosePaneButton, OpenPaneButton } from "./TogglePaneButton";
 
 type Props = {

src/components/layout/VerticalSplitFoldersAndTagsPane.tsx

@@ -1,12 +1,14 @@
-import { ActionsContainer, FolderAndTagActionSection } from "./Actions";
-import FolderAndTagTree from "../FolderAndTagTree";
 import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useShowFolderView,
 	useShowTagView,
 } from "src/hooks/useSettingsHandler";
-import ToggleFolderAndTagMode from "../FolderAndTagActions/ToggleFolderAndTagView";
 import { VERTICAL_SPLIT_LAYOUT_OPERATION_COPY } from "src/locales";
+
+import ToggleFolderAndTagMode from "../FolderAndTagActions/ToggleFolderAndTagView";
+import FolderAndTagTree from "../FolderAndTagTree";
+
+import { ActionsContainer, FolderAndTagActionSection } from "./Actions";
 import { ClosePaneButton, OpenPaneButton } from "./TogglePaneButton";
 
 type Props = {

src/components/layout/VerticalSplitLayout.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState, useRef } from "react";
 
 import { FFS_FOLDER_PANE_HEIGHT_KEY } from "src/assets/constants";
-import { VerticalDraggableDivider } from "./DraggableDivider";
 import useChangeActiveLeaf from "src/hooks/useChangeActiveLeaf";
 import { toValidNumber } from "src/utils";
+
+import { VerticalDraggableDivider } from "./DraggableDivider";
 import VerticalSplitFilesPane from "./VerticalSplitFilesPane";
 import VerticalSplitFoldersAndTagsPane from "./VerticalSplitFoldersAndTagsPane";
 

src/components/layout/ViewModeDisplay.tsx

@@ -1,9 +1,10 @@
 import { ReactNode } from "react";
+import { useShallow } from "zustand/react/shallow";
+
 import { FolderIcon, TagIcon } from "src/assets/icons";
 import { useExplorer } from "src/hooks/useExplorer";
 import { ExplorerStore } from "src/store";
 import { ViewMode } from "src/store/common";
-import { useShallow } from "zustand/react/shallow";
 
 const ViewModeDisplay = () => {
 	const { useExplorerStore, plugin } = useExplorer();

src/hooks/useChangeActiveLeaf.tsx

@@ -1,9 +1,11 @@
 import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
 
+import { ActiveLeafChangeEventName } from "src/assets/constants";
 import { ExplorerStore } from "src/store";
 
-import { ActiveLeafChangeEventName } from "src/assets/constants";
+
+
 import { useExplorer } from "./useExplorer";
 
 const useChangeActiveLeaf = () => {

src/hooks/useSettingsHandler/index.tsx

@@ -1,24 +1,24 @@
-import { useShowFolderIcon } from "./useShowFolderIcon";
+import { useAutoHideActionBar } from "./useAutoHideActionBar";
+import { useBoldFileTitle } from "./useBoldFileTitle";
+import { useFileCreationDateFormat } from "./useFileCreationDateFormat";
+import { useFileItemSpacing } from "./useFileItemSpacing";
+import { useHideRootFolder } from "./useHideRootFolder";
+import { useHighlightActionBar } from "./useHighlightActionBar";
 import { useIncludeSubfolderFiles } from "./useIncludeSubfolderFiles";
-import { useShowFileDetail } from "./useShowFileDetail";
-import { useShowHierarchyLines } from "./useShowHierarchyLines";
+import { useIncludeSubTagFiles } from "./useIncludeSubTagFiles";
 import { useLayoutMode } from "./useLayoutMode";
 import { useOpenDestinationFolder } from "./useOpenDestinationFolder";
-import { useHideRootFolder } from "./useHideRootFolder";
-import { useFileItemSpacing } from "./useFileItemSpacing";
-import { useShowFileItemDivider } from "./useShowFileItemDivider";
-import { useHighlightActionBar } from "./useHighlightActionBar";
-import { useAutoHideActionBar } from "./useAutoHideActionBar";
-import { useShowFileCreationDate } from "./useShowFileCreationDate";
-import { useFileCreationDateFormat } from "./useFileCreationDateFormat";
-import { useStripMarkdownSyntaxInPreview } from "./useStripMarkdownSyntax";
-import { useBoldFileTitle } from "./useBoldFileTitle";
 import { useRemoveFirstHeadingInPreview } from "./useRemoveFirstHeadingInPreview";
-import { useShowFolderView } from "./useShowFolderView";
-import { useShowTagView } from "./useShowTagView";
-import { useIncludeSubTagFiles } from "./useIncludeSubTagFiles";
-import { useShowTagIcon } from "./useShowTagIcon";
+import { useShowFileCreationDate } from "./useShowFileCreationDate";
+import { useShowFileDetail } from "./useShowFileDetail";
+import { useShowFileItemDivider } from "./useShowFileItemDivider";
 import { useShowFilesCount } from "./useShowFilesCount";
+import { useShowFolderIcon } from "./useShowFolderIcon";
+import { useShowFolderView } from "./useShowFolderView";
+import { useShowHierarchyLines } from "./useShowHierarchyLines";
+import { useShowTagIcon } from "./useShowTagIcon";
+import { useShowTagView } from "./useShowTagView";
+import { useStripMarkdownSyntaxInPreview } from "./useStripMarkdownSyntax";
 
 export {
 	useShowFolderIcon,

src/hooks/useSettingsHandler/useFileItemSpacing.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
 
-import { useWatchSettingsChange } from "./useWatchSettingsChange";
 import { FileItemSpacing } from "src/settings";
 
+import { useWatchSettingsChange } from "./useWatchSettingsChange";
+
 export const useFileItemSpacing = (
 	defaultSpacing: FileItemSpacing
 ): { fileItemSpacing: FileItemSpacing } => {

src/hooks/useSettingsHandler/useLayoutMode.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
 
-import { useWatchSettingsChange } from "./useWatchSettingsChange";
 import { LayoutMode } from "src/settings";
 
+import { useWatchSettingsChange } from "./useWatchSettingsChange";
+
 export const useLayoutMode = (
 	defaultLayout: LayoutMode
 ): { layoutMode: LayoutMode } => {

src/hooks/useVaultChangeHandler/index.tsx

@@ -1,4 +1,4 @@
-import useChangeFolder from "./useChangeFolder";
 import useChangeFile from "./useChangeFile";
+import useChangeFolder from "./useChangeFolder";
 
 export { useChangeFolder, useChangeFile };

src/hooks/useVaultChangeHandler/useChangeFile.tsx

@@ -1,17 +1,17 @@
+import { TFile } from "obsidian";
 import { useEffect, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
-import { TFile } from "obsidian";
-
-import { ExplorerStore } from "src/store";
 
 import { VaultChangeEvent, VaultChangeEventName } from "src/assets/constants";
+import { ExplorerStore } from "src/store";
+import { FILE_MANUAL_SORT_RULE } from "src/store/file";
 import { isFile } from "src/utils";
+
 import { useExplorer } from "../useExplorer";
 import {
 	useIncludeSubfolderFiles,
 	useIncludeSubTagFiles,
 } from "../useSettingsHandler";
-import { FILE_MANUAL_SORT_RULE } from "src/store/file";
 
 const useChangeFile = () => {
 	const { useExplorerStore, plugin } = useExplorer();

src/hooks/useVaultChangeHandler/useChangeFolder.tsx

@@ -1,12 +1,15 @@
+import { TFolder } from "obsidian";
 import { useEffect, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
-import { TFolder } from "obsidian";
 
-import { ExplorerStore } from "src/store";
 import { VaultChangeEvent, VaultChangeEventName } from "src/assets/constants";
-import { isFolder } from "src/utils";
-import { useExplorer } from "../useExplorer";
+import { ExplorerStore } from "src/store";
 import { FOLDER_MANUAL_SORT_RULE } from "src/store/folder";
+import { isFolder } from "src/utils";
+
+
+import { useExplorer } from "../useExplorer";
+
 
 const useChangeFolder = () => {
 	const { useExplorerStore } = useExplorer();

src/main.ts

@@ -1,15 +1,15 @@
 import { Plugin, TAbstractFile, WorkspaceLeaf } from "obsidian";
 
-import { ExplorerView } from "./ExplorerView";
-import { SettingTab } from "./SettingTab";
-import { DEFAULT_SETTINGS, FolderFileSplitterPluginSettings } from "./settings";
 import {
 	ActiveLeafChangeEventName,
 	SettingsChangeEventName,
 	VaultChangeEventName,
 	VaultChangeType,
 } from "./assets/constants";
+import { ExplorerView } from "./ExplorerView";
 import { Lang } from "./locales";
+import { DEFAULT_SETTINGS, FolderFileSplitterPluginSettings } from "./settings";
+import { SettingTab } from "./SettingTab";
 
 export default class FolderFileSplitterPlugin extends Plugin {
 	settings: FolderFileSplitterPluginSettings;

src/store/common.ts

@@ -1,9 +1,10 @@
 import { StateCreator } from "zustand";
 
-import FolderFileSplitterPlugin from "../main";
-import { ExplorerStore } from "src/store";
-import { ValueOf } from "src/settings";
 import { FFS_VIEW_MODE_KEY } from "src/assets/constants";
+import { ValueOf } from "src/settings";
+import { ExplorerStore } from "src/store";
+
+import FolderFileSplitterPlugin from "../main";
 
 export const VIEW_MODE = {
 	ALL: "all",

src/store/file.ts

@@ -1,15 +1,16 @@
-import { StateCreator } from "zustand";
 import { TFile, TFolder } from "obsidian";
+import { StateCreator } from "zustand";
+
+import { ExplorerStore } from "src/store";
 
-import FolderFileSplitterPlugin from "../main";
-import { isFile } from "../utils";
 import {
 	FFS_FILE_MANUAL_SORT_ORDER_KEY,
 	FFS_FILE_SORT_RULE_KEY,
 	FFS_FOCUSED_FILE_PATH_KEY,
 	FFS_PINNED_FILE_PATHS_KEY,
 } from "../assets/constants";
-import { ExplorerStore } from "src/store";
+import FolderFileSplitterPlugin from "../main";
+import { isFile } from "../utils";
 
 export type FileSortRule =
 	| "FileNameAscending"

src/store/folder.ts

@@ -1,8 +1,8 @@
-import { StateCreator } from "zustand";
 import { Notice, TFile, TFolder } from "obsidian";
+import { StateCreator } from "zustand";
+
+import { ExplorerStore } from "src/store";
 
-import FolderFileSplitterPlugin from "../main";
-import { isFile, isFolder, uniq } from "../utils";
 import {
 	FFS_EXPANDED_FOLDER_PATHS_KEY,
 	FFS_FOCUSED_FOLDER_PATH_KEY,
@@ -10,12 +10,14 @@ import {
 	FFS_FOLDER_SORT_RULE_KEY,
 	FFS_PINNED_FOLDER_PATHS_KEY,
 } from "../assets/constants";
+import { NOTIFICATION_MESSAGE_COPY } from "../locales/message";
+import FolderFileSplitterPlugin from "../main";
 import {
 	FOLDER_NOTE_LOCATION,
 	FOLDER_NOTE_MISSING_BEHAVIOR,
 } from "../settings";
-import { NOTIFICATION_MESSAGE_COPY } from "../locales/message";
-import { ExplorerStore } from "src/store";
+import { isFile, isFolder, uniq } from "../utils";
+
 
 export type FolderSortRule =
 	| "FolderNameAscending"

src/store/index.ts

@@ -3,8 +3,8 @@ import { create } from "zustand";
 import FolderFileSplitterPlugin from "../main";
 
 import { CommonExplorerStore, createCommonExplorerStore } from "./common";
-import { createFolderExplorerStore, FolderExplorerStore } from "./folder";
 import { createFileExplorerStore, FileExplorerStore } from "./file";
+import { createFolderExplorerStore, FolderExplorerStore } from "./folder";
 import { createTagExplorerStore, TagExplorerStore } from "./tag";
 
 type FolderPath = string;

src/store/tag.ts

@@ -1,15 +1,16 @@
-import { StateCreator } from "zustand";
 import { getAllTags, TFile } from "obsidian";
+import { StateCreator } from "zustand";
 
-import FolderFileSplitterPlugin from "../main";
-import { ExplorerStore } from "src/store";
 import {
 	FFS_EXPANDED_TAG_PATHS_KEY,
 	FFS_FOCUSED_TAG_PATH_KEY,
 	FFS_PINNED_TAG_PATHS_KEY,
 } from "src/assets/constants";
+import { ExplorerStore } from "src/store";
 import { uniq } from "src/utils";
 
+import FolderFileSplitterPlugin from "../main";
+
 type FolderPath = string;
 type ChildrenPaths = string[];
 export type ManualSortOrder = Record<FolderPath, ChildrenPaths>;