From aa97dfbd870701a6a676a962cf5389bf33154a08 Mon Sep 17 00:00:00 2001
From: Xu Quan <xuquan1225@hotmail.com>
Date: Fri, 2 May 2025 22:33:21 +0800
Subject: [PATCH] refactor: use function to generate indent style in Folder and
 Tag component

---
 src/components/Folder/index.tsx | 19 ++++++++++---------
 src/components/Tag/index.tsx    | 19 ++++++++++---------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx
index 6805b81..b53e2ce 100644
--- a/src/components/Folder/index.tsx
+++ b/src/components/Folder/index.tsx
@@ -122,7 +122,15 @@ const Folder = ({
 		return `${folder.name}\n${filesCountInfo}${PUNCTUATION_COPY.comma[language]}${foldersCountInfo}`;
 	};
 
-	const folderLevel = isRoot ? 0 : folder.path.split("/").length - 1;
+	const getIndentStyle = () => {
+		if (disableHoverIndent) return undefined;
+		const folderLevel = isRoot ? 0 : folder.path.split("/").length - 1;
+		return {
+			marginInlineStart: -17 * folderLevel,
+			paddingInlineStart: 24 + 17 * folderLevel,
+		};
+	};
+
 	return (
 		<div
 			className={classNames(
@@ -135,14 +143,7 @@ const Folder = ({
 			)}
 			ref={setDropRef}
 			onClick={() => setFocusedFolder(folder)}
-			style={
-				disableHoverIndent
-					? undefined
-					: {
-							marginInlineStart: -17 * folderLevel,
-							paddingInlineStart: 24 + 17 * folderLevel,
-					  }
-			}
+			style={getIndentStyle()}
 			data-tooltip-position="right"
 			aria-label={getAriaLabel()}
 		>
diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
index d95d77c..b6a89be 100644
--- a/src/components/Tag/index.tsx
+++ b/src/components/Tag/index.tsx
@@ -57,7 +57,15 @@ const Tag = ({
 		return `${tag.name}\n${filesCountInfo}${PUNCTUATION_COPY.comma[language]}${tagsCountInfo}`;
 	};
 
-	const tagLevel = tag.fullPath.split("/").length - 1;
+	const getIndentStyle = () => {
+		if (disableHoverIndent) return undefined;
+		const tagLevel = tag.fullPath.split("/").length - 1;
+		return {
+			marginInlineStart: -17 * tagLevel,
+			paddingInlineStart: 24 + 17 * tagLevel,
+		};
+	};
+
 	return (
 		<div
 			className={classNames(
@@ -67,14 +75,7 @@ const Tag = ({
 					"is-active": isFocused,
 				}
 			)}
-			style={
-				disableHoverIndent
-					? undefined
-					: {
-							marginInlineStart: -17 * tagLevel,
-							paddingInlineStart: 24 + 17 * tagLevel,
-					  }
-			}
+			style={getIndentStyle()}
 			onClick={() => setFocusedTag(tag)}
 			data-tooltip-position="right"
 			aria-label={getAriaLabel()}