From 0ec7743fca089b7456a3aa0e27eea058fe76adcc Mon Sep 17 00:00:00 2001
From: LandaMm <qwer.009771@gmail.com>
Date: Fri, 13 Jun 2025 21:45:39 +0200
Subject: [PATCH] feat: delimiter handling/support

---
 web/src/components/Home/Sidebar/index.tsx | 31 +++++++++++++++++------
 web/src/components/Home/TopBar/index.tsx  | 28 ++++++++++----------
 2 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/web/src/components/Home/Sidebar/index.tsx b/web/src/components/Home/Sidebar/index.tsx
index b68b9bc..dfba9e6 100644
--- a/web/src/components/Home/Sidebar/index.tsx
+++ b/web/src/components/Home/Sidebar/index.tsx
@@ -7,17 +7,32 @@ const Sidebar: FC = () => {
 
   return (
     <div className="hidden sm:flex flex-col gap-2 items-stretch border-r border-gray-300 dark:border-gray-700 min-w-80 w-80 p-5 pt-18 min-h-screen select-none">
-      {barItems.map((item) => (
-        <Link to={item.pathname} key={item.tab}>
+      {barItems.map((item, index) =>
+        item.type !== "delimiter" ? (
+          <Link to={item.pathname} key={item.tab}>
+            <div
+              className={`dark:text-gray-200 transition-colors text-sm cursor-pointer p-4 rounded-lg flex flex-row items-center gap-3${
+                isActive(item) ? " bg-gray-200 dark:bg-gray-900" : ""
+              }`}
+            >
+              {item.icon} {item.title}
+            </div>
+          </Link>
+        ) : (
           <div
-            className={`dark:text-gray-200 transition-colors text-sm cursor-pointer p-4 rounded-lg flex flex-row items-center gap-3${
-              isActive(item) ? " bg-gray-200 dark:bg-gray-900" : ""
-            }`}
+            key={item.key}
+            className={`flex flex-row items-center gap-4 my-2 ${index === 0 ? "mt-0" : "mt-4"}`}
           >
-            {item.icon} {item.title}
+            <div className="w-full h-[2px] rounded-lg bg-gray-800"></div>
+            {typeof item.title === "string" && (
+              <p className="text-gray-800 dark:text-gray-400 text-sm">
+                {item.title}
+              </p>
+            )}
+            <div className="w-full h-[2px] rounded-lg bg-gray-800"></div>
           </div>
-        </Link>
-      ))}
+        ),
+      )}
     </div>
   );
 };
diff --git a/web/src/components/Home/TopBar/index.tsx b/web/src/components/Home/TopBar/index.tsx
index 97017a1..bcf56b5 100644
--- a/web/src/components/Home/TopBar/index.tsx
+++ b/web/src/components/Home/TopBar/index.tsx
@@ -7,19 +7,21 @@ const TopBar: FC = () => {
 
   return (
     <div className="sm:hidden flex w-full overflow-x-auto sm:overflow-x-visible max-w-full min-w-full sm:justify-center sm:space-x-4 no-scrollbar shadow-md shadow-gray-300 dark:shadow-gray-700 dark:bg-black/70 bg-white/70">
-      {barItems.map((item) => (
-        <Link to={item.pathname} key={item.tab}>
-          <div
-            className={`flex-shrink-0 transition-all border-b-4 px-4 py-2 min-w-[120px] sm:min-w-0 sm:flex-1 flex items-center justify-center cursor-pointer select-none whitespace-nowrap text-sm font-medium ${
-              isActive(item)
-                ? " border-b-4 border-b-blue-500 text-blue-500"
-                : " border-b-transparent text-gray-500"
-            }`}
-          >
-            {item.title}
-          </div>
-        </Link>
-      ))}
+      {barItems
+        .filter((item) => item.type !== "delimiter")
+        .map((item) => (
+          <Link to={item.pathname} key={item.tab}>
+            <div
+              className={`flex-shrink-0 transition-all border-b-4 px-4 py-2 min-w-[120px] sm:min-w-0 sm:flex-1 flex items-center justify-center cursor-pointer select-none whitespace-nowrap text-sm font-medium ${
+                isActive(item)
+                  ? " border-b-4 border-b-blue-500 text-blue-500"
+                  : " border-b-transparent text-gray-500"
+              }`}
+            >
+              {item.title}
+            </div>
+          </Link>
+        ))}
     </div>
   );
 };