feat: use classnames to manage class names

package-lock.json

@@ -12,6 +12,7 @@
 				"@dnd-kit/core": "^6.3.1",
 				"@dnd-kit/modifiers": "^9.0.0",
 				"@dnd-kit/sortable": "^10.0.0",
+				"classnames": "^2.5.1",
 				"react": "^19.0.0",
 				"react-dom": "^19.0.0",
 				"styled-components": "^6.1.15",
@@ -1110,6 +1111,12 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
+		"node_modules/classnames": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
+			"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+			"license": "MIT"
+		},
 		"node_modules/color-convert": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",

package.json

@@ -27,6 +27,7 @@
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/modifiers": "^9.0.0",
 		"@dnd-kit/sortable": "^10.0.0",
+		"classnames": "^2.5.1",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
 		"styled-components": "^6.1.15",

src/components/Folder/ExpandIcon.tsx

@@ -1,6 +1,7 @@
 import { TFolder } from "obsidian";
 import { useShallow } from "zustand/react/shallow";
 import { ReactNode } from "react";
+import classNames from "classnames";
 
 import { ArrowDownIcon, ArrowRightIcon } from "src/assets/icons";
 import { ExplorerStore } from "src/store";
@@ -63,10 +64,9 @@ const FolderExpandIcon = ({ folder, isFocused = false }: Props) => {
 
 	return (
 		<div
-			className={
-				"ffs__expand-icon-wrapper" +
-				(isFocused ? " ffs__expand-icon-wrapper--active" : "")
-			}
+			className={classNames("ffs__expand-icon-wrapper", {
+				"ffs__expand-icon-wrapper--active": isFocused,
+			})}
 			onClick={onClickExpandIcon}
 		>
 			{content}

src/components/Folder/FilesCount.tsx

@@ -1,12 +1,12 @@
 import { TFolder } from "obsidian";
 import { useShallow } from "zustand/react/shallow";
+import classNames from "classnames";
 
 import { ExplorerStore } from "src/store";
 import { useIncludeSubfolderFilesCount } from "src/hooks/useSettingsHandler";
 import { VaultChangeEvent, VaultChangeEventName } from "src/assets/constants";
 import { isFile } from "src/utils";
 import { useEffect, useState } from "react";
-import { StyledFilesCount } from "./Styled";
 import { useExplorer } from "src/hooks/useExplorer";
 
 type Props = {
@@ -53,10 +53,9 @@ const FilesCount = ({ folder, isFocused }: Props) => {
 
 	return (
 		<div
-			className={
-				`ffs__files-count` +
-				(isFocused ? " ffs__files-count--focused" : "")
-			}
+			className={classNames("ffs__files-count", {
+				"ffs__files-count--focused": isFocused,
+			})}
 		>
 			{count}
 		</div>

src/components/FolderTree/index.tsx

@@ -1,5 +1,6 @@
 import { useShallow } from "zustand/react/shallow";
 import { TFolder } from "obsidian";
+import classNames from "classnames";
 
 import { ExplorerStore } from "src/store";
 import {
@@ -73,12 +74,10 @@ const FolderTree = ({ onOpenFilesPane = () => {} }: Props) => {
 					{renderFolder(folder)}
 					{isExpanded && hasFolderChildren(folder) && (
 						<div
-							className={
-								`ffs__subfolders-group` +
-								(showHierarchyLines
-									? " ffs__subfolders-group--show-lines"
-									: "")
-							}
+							className={classNames("ffs__subfolders-group", {
+								"ffs__subfolders-group--show-lines":
+									showHierarchyLines,
+							})}
 						>
 							{renderFolders(getFoldersByParent(folder))}
 						</div>