From fc3092ad44f77b72e51e239ce6c98e925494f124 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Sun, 1 Feb 2026 14:53:47 +0000
Subject: [PATCH] feat(Sidebar): enhance sidebar layout with search
 functionality and toggle button

---
 .../Elements/MainModal/backend/Tabs.jsx       |  2 +-
 .../MainModal/components/SidebarSkeleton.jsx  |  9 ++++++
 .../MainModal/scss/modules/_sidebar.scss      | 31 +++++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/Elements/MainModal/backend/Tabs.jsx b/src/components/Elements/MainModal/backend/Tabs.jsx
index 1edede01..b629be18 100644
--- a/src/components/Elements/MainModal/backend/Tabs.jsx
+++ b/src/components/Elements/MainModal/backend/Tabs.jsx
@@ -154,6 +154,7 @@ const Tabs = ({
       {showSidebar ? (
         <div className={`modalSidebar ${isSidebarCollapsed ? 'collapsed' : 'expanded'}`}>
           <div className="sidebarHeader">
+            <SidebarToggle isCollapsed={isSidebarCollapsed} onToggle={handleToggleSidebar} />
             {!isSidebarCollapsed && activeTab === TAB_TYPES.SETTINGS && (
               <SearchInput
                 value={searchQuery}
@@ -162,7 +163,6 @@ const Tabs = ({
                 fullWidth
               />
             )}
-            <SidebarToggle isCollapsed={isSidebarCollapsed} onToggle={handleToggleSidebar} />
           </div>
           {filteredChildren.map((tab, index) => (
             <Tab
diff --git a/src/components/Elements/MainModal/components/SidebarSkeleton.jsx b/src/components/Elements/MainModal/components/SidebarSkeleton.jsx
index 8ad81f86..e474a1bc 100644
--- a/src/components/Elements/MainModal/components/SidebarSkeleton.jsx
+++ b/src/components/Elements/MainModal/components/SidebarSkeleton.jsx
@@ -6,16 +6,19 @@ const TAB_CONFIGS = {
     itemCount: 16, // Excluding experimental
     dividerPositions: [10, 12], // After Weather, Language
     textWidths: [80, 100, 70, 90, 85, 75, 80, 95, 90, 75, 85, 90, 85, 80, 70, 95], // Fixed widths in pixels
+    showSearch: true, // Settings has search bar
   },
   [TAB_TYPES.DISCOVER]: {
     itemCount: 5,
     dividerPositions: [0], // After "All"
     textWidths: [60, 95, 95, 110, 90], // Fixed widths
+    showSearch: false, // Discover doesn't have search
   },
   [TAB_TYPES.LIBRARY]: {
     itemCount: 0, // Library doesn't show sidebar
     dividerPositions: [],
     textWidths: [],
+    showSearch: false,
   },
 };
 
@@ -29,6 +32,12 @@ const SidebarSkeleton = ({ currentTab = TAB_TYPES.SETTINGS }) => {
 
   return (
     <div className="sidebarSkeleton">
+      {/* Header with toggle button and optional search */}
+      <div className="skeletonHeader">
+        <div className="skeletonToggle pulse" />
+        {config.showSearch && <div className="skeletonSearch pulse" />}
+      </div>
+
       {Array.from({ length: config.itemCount }).map((_, index) => {
         const hasDivider = config.dividerPositions.includes(index);
         const textWidth = config.textWidths[index] || 80;
diff --git a/src/components/Elements/MainModal/scss/modules/_sidebar.scss b/src/components/Elements/MainModal/scss/modules/_sidebar.scss
index c1f79d34..b6fac058 100644
--- a/src/components/Elements/MainModal/scss/modules/_sidebar.scss
+++ b/src/components/Elements/MainModal/scss/modules/_sidebar.scss
@@ -17,6 +17,7 @@
     // Container for search bar and toggle button
     .sidebarHeader {
       display: flex;
+      flex-direction: row-reverse;
       justify-content: space-between;
       align-items: center;
       gap: 0.5rem;
@@ -233,6 +234,36 @@
 .sidebarSkeleton {
   padding: 0.5rem 0.2rem;
 
+  .skeletonHeader {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+
+    .skeletonToggle {
+      width: 32px;
+      height: 32px;
+      border-radius: 8px;
+      flex-shrink: 0;
+
+      @include themed {
+        background: t($modal-sidebarActive);
+      }
+    }
+
+    .skeletonSearch {
+      flex: 1;
+      height: 38px;
+      border-radius: 10px;
+
+      @include themed {
+        background: t($modal-sidebarActive);
+      }
+    }
+  }
+
   .skeletonItem {
     display: flex;
     align-items: center;