refactor: use variable to store class names for reuse

src/assets/constants/className.ts

@@ -0,0 +1,10 @@
+export const ACTIONS_SECTION_CLASS_NAME =
+	"ffs__actions-section nav-buttons-container";
+
+export const ACTION_BUTTON_WRAPPER_CLASS_NAME =
+	"ffs__action-button-wrapper clickable-icon nav-action-button";
+
+export const CLICKABLE_TREE_ITEM_CLASS_NAME = "tree-item-self is-clickable";
+
+export const TREE_ITEM_INNER_CLASS_NAME =
+	"tree-item-inner nav-file-title-content";

src/assets/constants/index.ts

@@ -45,3 +45,5 @@ export const FFS_DRAG_FILE = "Drag_File";
 export const FFS_SORT_FILE = "Sort_File";
 export const FFS_DRAG_FOLDER = "Drag_Folder";
 export const FFS_SORT_FOLDER = "Sort_Folder";
+
+export * from './className'

src/components/File/Content.tsx

@@ -3,6 +3,7 @@ import { Menu, TFile } from "obsidian";
 import { useRef } from "react";
 import { useShallow } from "zustand/react/shallow";
 
+import { CLICKABLE_TREE_ITEM_CLASS_NAME } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
 import { useShowFileItemDivider } from "src/hooks/useSettingsHandler";
 import { FILE_OPERATION_COPY } from "src/locales";
@@ -137,7 +138,8 @@ const FileContent = ({ file }: FileProps) => {
 
 	const getClassNames = () => {
 		return classNames(
-			"ffs__file-content tree-item-self nav-file-title tappable is-clickable",
+			"ffs__file-content nav-file-title tappable",
+			CLICKABLE_TREE_ITEM_CLASS_NAME,
 			{
 				"is-active": isFocused,
 				"ffs__file-content--divider": showFileItemDivider,

src/components/File/ContentInner.tsx

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { TFile } from "obsidian";
 import { forwardRef, RefObject, useRef } from "react";
 
+import { TREE_ITEM_INNER_CLASS_NAME } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useFileItemSpacing,
@@ -37,7 +38,8 @@ const FileContentInner = forwardRef(
 
 		const getClassNames = () => {
 			return classNames(
-				"ffs__file-content-header tree-item-inner nav-file-title-content",
+				"ffs__file-content-header",
+				TREE_ITEM_INNER_CLASS_NAME,
 				{
 					"ffs__file-content-header--comfortable":
 						fileItemSpacing === FILE_ITEM_SPACING.COMFORTABLE,

src/components/File/index.tsx

@@ -10,8 +10,8 @@ import { ExplorerStore } from "src/store";
 import FileContent from "./Content";
 import { getPopupInfo } from "./popupInfo";
 
-type Props =  {
-	file: TFile
+type Props = {
+	file: TFile;
 	onOpenFoldersPane: () => void;
 	disableDrag?: boolean;
 };

src/components/FileActions/CreateFile.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { useShallow } from "zustand/react/shallow";
 
+import { ACTION_BUTTON_WRAPPER_CLASS_NAME } from "src/assets/constants";
 import { AddFileIcon } from "src/assets/icons";
 import { useExplorer } from "src/hooks/useExplorer";
 import { ExplorerStore } from "src/store";
@@ -29,12 +30,9 @@ const CreateFile = () => {
 	};
 
 	const getClassNames = () => {
-		return classNames(
-			"ffs__action-button-wrapper clickable-icon nav-action-button",
-			{
-				"ffs__action-button-wrapper--disabled": !isCreateFileAbled(),
-			}
-		);
+		return classNames(ACTION_BUTTON_WRAPPER_CLASS_NAME, {
+			"ffs__action-button-wrapper--disabled": !isCreateFileAbled(),
+		});
 	};
 
 	const getAriaLabel = () => {

src/components/FileActions/SearchFiles.tsx

@@ -1,6 +1,6 @@
-import classNames from "classnames";
 import { useShallow } from "zustand/react/shallow";
 
+import { ACTION_BUTTON_WRAPPER_CLASS_NAME } from "src/assets/constants";
 import { SearchIcon } from "src/assets/icons";
 import { useExplorer } from "src/hooks/useExplorer";
 import { ExplorerStore } from "src/store";
@@ -19,12 +19,6 @@ const SearchFiles = () => {
 			}))
 		);
 
-	const getClassNames = () => {
-		return classNames(
-			"ffs__action-button-wrapper clickable-icon nav-action-button"
-		);
-	};
-
 	const onBeginSearch = () => {
 		changeToSearchMode();
 		if (focusedFolder) {
@@ -41,7 +35,10 @@ const SearchFiles = () => {
 	};
 
 	return (
-		<div className={getClassNames()} onClick={onBeginSearch}>
+		<div
+			className={ACTION_BUTTON_WRAPPER_CLASS_NAME}
+			onClick={onBeginSearch}
+		>
 			<SearchIcon className="ffs__action-button svg-icon" />
 		</div>
 	);

src/components/Folder/DraggableContent.tsx

@@ -1,6 +1,10 @@
 import { useDraggable } from "@dnd-kit/core";
+import classNames from "classnames";
 
-import { FFS_DRAG_FOLDER } from "src/assets/constants";
+import {
+	FFS_DRAG_FOLDER,
+	TREE_ITEM_INNER_CLASS_NAME,
+} from "src/assets/constants";
 
 import FolderContent, { FolderProps } from "./Content";
 
@@ -21,7 +25,10 @@ const FolderDraggableContent = ({ folder, disableDrag = false }: Props) => {
 
 	return (
 		<div
-			className="ffs__draggable-container tree-item-inner nav-folder-title-content"
+			className={classNames(
+				"ffs__draggable-container",
+				TREE_ITEM_INNER_CLASS_NAME
+			)}
 			style={{ opacity: isDragging ? 0.5 : 1 }}
 			ref={setDragRef}
 			{...attributes}

src/components/Folder/index.tsx

@@ -3,7 +3,7 @@ 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 { CLICKABLE_TREE_ITEM_CLASS_NAME, FFS_DRAG_FILE, FFS_DRAG_FOLDER } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
 import { ExplorerStore } from "src/store";
 import { getIndentStyle } from "src/utils";
@@ -80,7 +80,8 @@ const Folder = ({
 
 	const getClassNames = () => {
 		return classNames(
-			"ffs__folder-container tree-item-self nav-folder-title is-clickable",
+			"ffs__folder-container nav-folder-title",
+			CLICKABLE_TREE_ITEM_CLASS_NAME,
 			{
 				"mod-collapsible": hasSubFolder(folder),
 				"is-active": isFocused,

src/components/FolderAndTagActions/CreateFolder.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { useShallow } from "zustand/react/shallow";
 
+import { ACTION_BUTTON_WRAPPER_CLASS_NAME } from "src/assets/constants";
 import { AddFolderIcon } from "src/assets/icons";
 import { useExplorer } from "src/hooks/useExplorer";
 import { useShowFolderView } from "src/hooks/useSettingsHandler";
@@ -35,12 +36,9 @@ const CreateFolder = () => {
 	};
 
 	const getClassNames = () => {
-		return classNames(
-			"ffs__action-button-wrapper clickable-icon nav-action-button",
-			{
-				"ffs__action-button-wrapper--disabled": !showFolderView,
-			}
-		);
+		return classNames(ACTION_BUTTON_WRAPPER_CLASS_NAME, {
+			"ffs__action-button-wrapper--disabled": !showFolderView,
+		});
 	};
 
 	const getAriaLabel = () => {

src/components/FolderAndTagActions/ToggleFolderAndTagView.tsx

@@ -1,5 +1,9 @@
 import classNames from "classnames";
 
+import {
+	ACTION_BUTTON_WRAPPER_CLASS_NAME,
+	ACTIONS_SECTION_CLASS_NAME,
+} from "src/assets/constants";
 import { FolderIcon, TagIcon } from "src/assets/icons";
 import { useExplorer } from "src/hooks/useExplorer";
 import {
@@ -20,12 +24,9 @@ const ToggleFolderAndTagMode = () => {
 	const copy_lang = language === "zh" ? "zh" : "en";
 
 	const getButtonClassNames = (disabled: boolean) =>
-		classNames(
-			"ffs__action-button-wrapper clickable-icon nav-action-button",
-			{
-				"ffs__action-button-wrapper--inactive": disabled,
-			}
-		);
+		classNames(ACTION_BUTTON_WRAPPER_CLASS_NAME, {
+			"ffs__action-button-wrapper--inactive": disabled,
+		});
 
 	const renderFolderButton = () => {
 		const copy = !showFolderView
@@ -65,7 +66,7 @@ const ToggleFolderAndTagMode = () => {
 	};
 
 	return (
-		<div className="ffs__actions-section nav-buttons-container">
+		<div className={ACTIONS_SECTION_CLASS_NAME}>
 			{renderFolderButton()}
 			{renderTagButton()}
 		</div>

src/components/FolderAndTagActions/ToggleFoldersAndTags.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 
+import { ACTION_BUTTON_WRAPPER_CLASS_NAME } from "src/assets/constants";
 import { ExpandIcon, CollapseIcon } from "src/assets/icons";
 import { useExplorer } from "src/hooks/useExplorer";
 import { TIPS_COPY } from "src/locales";
@@ -62,7 +63,7 @@ const ToggleFolders = () => {
 
 	return (
 		<div
-			className="ffs__action-button-wrapper clickable-icon nav-action-button"
+			className={ACTION_BUTTON_WRAPPER_CLASS_NAME}
 			onClick={onToggleAllFolders}
 			aria-label={getAriaLabel()}
 			data-tooltip-position="bottom"

src/components/FolderAndTagTree/FolderTreeItem.tsx

@@ -48,7 +48,10 @@ const FolderTreeItem = ({ folder }: Props) => {
 		if (!showSubfolders) return null;
 		return (
 			<div
-				className={`ffs__subfolders-group ${SUB_ITEMS_CLASSNAMES}`}
+				className={classNames(
+					"ffs__subfolders-group",
+					SUB_ITEMS_CLASSNAMES
+				)}
 				style={getSubItemsStyle(showHierarchyLines)}
 			>
 				{subFolders.map((folder) => (

src/components/SortAction.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { Menu } from "obsidian";
 
+import { ACTION_BUTTON_WRAPPER_CLASS_NAME } from "src/assets/constants";
 import {
 	ArrowUpDownIcon,
 	AscendingSortIcon,
@@ -70,12 +71,9 @@ const SortAction = ({
 	};
 
 	const getClassNames = () => {
-		return classNames(
-			"ffs__action-button-wrapper clickable-icon nav-action-button",
-			{
-				"ffs__action-button-wrapper--disabled": disabled,
-			}
-		);
+		return classNames(ACTION_BUTTON_WRAPPER_CLASS_NAME, {
+			"ffs__action-button-wrapper--disabled": disabled,
+		});
 	};
 
 	return (

src/components/Tag/index.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { useShallow } from "zustand/react/shallow";
 
+import { CLICKABLE_TREE_ITEM_CLASS_NAME } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
 import { ExplorerStore } from "src/store";
 import { TagNode } from "src/store/tag";
@@ -58,7 +59,8 @@ const Tag = ({
 
 	const getClassNames = () => {
 		return classNames(
-			"ffs__folder-container tree-item-self nav-folder-title is-clickable",
+			"ffs__folder-container nav-folder-title",
+			CLICKABLE_TREE_ITEM_CLASS_NAME,
 			{
 				"mod-collapsible": hasSubTag(tag),
 				"is-active": isFocused,

src/components/layout/Actions.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames";
 
+import { ACTIONS_SECTION_CLASS_NAME } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useAutoHideActionBar,
@@ -15,7 +16,7 @@ import ToggleFolders from "../FolderAndTagActions/ToggleFoldersAndTags";
 
 
 export const FolderAndTagActionSection = () => (
-	<div className="ffs__actions-section nav-buttons-container">
+	<div className={ACTIONS_SECTION_CLASS_NAME}>
 		<CreateFolder />
 		<SortFolders />
 		<ToggleFolders />
@@ -23,7 +24,7 @@ export const FolderAndTagActionSection = () => (
 );
 
 export const FileActionSection = () => (
-	<div className="ffs__actions-section nav-buttons-container">
+	<div className={ACTIONS_SECTION_CLASS_NAME}>
 		<CreateFile />
 		<SortFiles />
 		<SearchFiles />

src/components/layout/VerticalSplitFilesPane.tsx

@@ -1,3 +1,6 @@
+import classNames from "classnames";
+
+import { ACTIONS_SECTION_CLASS_NAME } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
 import { VERTICAL_SPLIT_LAYOUT_OPERATION_COPY } from "src/locales";
 
@@ -22,10 +25,15 @@ const VerticalSplitFilesPane = ({
 	if (isFilesCollapsed) {
 		return (
 			<ActionsContainer>
-				<div className="ffs__actions-section ffs__collapsed-files nav-buttons-container">
+				<div
+					className={classNames(
+						"ffs__collapsed-files",
+						ACTIONS_SECTION_CLASS_NAME
+					)}
+				>
 					Files
 				</div>
-				<div className="ffs__actions-section nav-buttons-container">
+				<div className={ACTIONS_SECTION_CLASS_NAME}>
 					<OpenPaneButton
 						onOpen={() => setIsFilesCollapsed(false)}
 						label={openFiles[language]}
@@ -39,7 +47,7 @@ const VerticalSplitFilesPane = ({
 		<div className="ffs__layout-pane ffs__files-pane--vertical">
 			<ActionsContainer>
 				<FileActionSection />
-				<div className="ffs__actions-section nav-buttons-container">
+				<div className={ACTIONS_SECTION_CLASS_NAME}>
 					<ClosePaneButton
 						onClose={() => setIsFilesCollapsed(true)}
 						label={closeFiles[language]}

src/components/layout/VerticalSplitFoldersAndTagsPane.tsx

@@ -1,3 +1,6 @@
+import classNames from "classnames";
+
+import { ACTIONS_SECTION_CLASS_NAME } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
 import {
 	useShowFolderView,
@@ -39,10 +42,10 @@ const VerticalSplitFoldersAndTagsPane = ({
 	if (isFoldersCollapsed) {
 		return (
 			<ActionsContainer>
-				<div className="ffs__actions-section ffs__collapsed-folders nav-buttons-container">
+				<div className={classNames("ffs__collapsed-folders", ACTIONS_SECTION_CLASS_NAME)}>
 					{copy}
 				</div>
-				<div className="ffs__actions-section nav-buttons-container">
+				<div className={ACTIONS_SECTION_CLASS_NAME}>
 					<OpenPaneButton
 						onOpen={() => setIsFoldersCollapsed(false)}
 						label={openFoldersAndTags[language]}
@@ -61,7 +64,7 @@ const VerticalSplitFoldersAndTagsPane = ({
 		>
 			<ActionsContainer>
 				<FolderAndTagActionSection />
-				<div className="ffs__actions-section nav-buttons-container">
+				<div className={ACTIONS_SECTION_CLASS_NAME}>
 					<ToggleFolderAndTagMode />
 					<ClosePaneButton
 						onClose={() => setIsFoldersCollapsed(true)}

src/hooks/useVaultChangeHandler/useChangeFolder.tsx

@@ -20,7 +20,7 @@ const useChangeFolder = () => {
 		unpinFolder,
 		updatePinnedFolderPath,
 		updateFolderPathInManualOrder,
-		sortFolders
+		sortFolders,
 	} = useExplorerStore(
 		useShallow((store: ExplorerStore) => ({
 			getTopLevelFolders: store.getTopLevelFolders,
@@ -30,7 +30,7 @@ const useChangeFolder = () => {
 			unpinFolder: store.unpinFolder,
 			updatePinnedFolderPath: store.updatePinnedFolderPath,
 			updateFolderPathInManualOrder: store.updateFolderPathInManualOrder,
-			sortFolders: store.sortFolders
+			sortFolders: store.sortFolders,
 		}))
 	);
 

src/hooks/useVaultChangeHandler/useChangeTag.tsx

@@ -13,10 +13,7 @@ import { useExplorer } from "../useExplorer";
 const useChangeTag = () => {
 	const { useExplorerStore } = useExplorer();
 
-	const {
-		getTopLevelTags,
-		generateTagTree,
-	} = useExplorerStore(
+	const { getTopLevelTags, generateTagTree } = useExplorerStore(
 		useShallow((store: ExplorerStore) => ({
 			getTopLevelTags: store.getTopLevelTags,
 			generateTagTree: store.generateTagTree,

src/store/common/viewMode.ts

@@ -65,7 +65,11 @@ export const createViewModeSlice =
 				key: "viewMode",
 				transform: (mode: ViewMode) => {
 					const { FOLDER, TAG } = VIEW_MODE;
-					if (![FOLDER, TAG].includes(mode as typeof FOLDER | typeof TAG)) {
+					if (
+						![FOLDER, TAG].includes(
+							mode as typeof FOLDER | typeof TAG
+						)
+					) {
 						if (focusedFolder) {
 							return FOLDER;
 						}
@@ -74,7 +78,7 @@ export const createViewModeSlice =
 						}
 						return FOLDER;
 					}
-					return mode
+					return mode;
 				},
 			});
 		},