From d6e17e23528f036bec30e89eb28b43325832c784 Mon Sep 17 00:00:00 2001
From: thomasabishop <thomasabishop@tuta.com>
Date: Fri, 18 Jul 2025 15:30:31 +0100
Subject: [PATCH] refactor: partition AppSidebar subcomponents

---
 src/components/EntriesListSidebar.tsx |  35 +++++
 src/components/TagListSidebar.tsx     |  35 +++++
 src/containers/AppSidebar.tsx         | 188 +++++++++-----------------
 3 files changed, 134 insertions(+), 124 deletions(-)
 create mode 100644 src/components/EntriesListSidebar.tsx
 create mode 100644 src/components/TagListSidebar.tsx

diff --git a/src/components/EntriesListSidebar.tsx b/src/components/EntriesListSidebar.tsx
new file mode 100644
index 0000000..6b03424
--- /dev/null
+++ b/src/components/EntriesListSidebar.tsx
@@ -0,0 +1,35 @@
+import { FileText, ChevronRight } from "lucide-react"
+
+import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components/ui/sidebar"
+import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
+import { CollapsibleContent } from "../components/ui/collapsible"
+
+import { mockEntries } from "@/mock-data/mock-entries"
+export default function EntriesListSidebar() {
+	return (
+		<Collapsible className="group/collapsible">
+			<SidebarMenuItem key="entries">
+				<CollapsibleTrigger asChild>
+					<SidebarMenuButton asChild>
+						<a href="#">
+							<FileText />
+							<span>Entries</span>
+							<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+						</a>
+					</SidebarMenuButton>
+				</CollapsibleTrigger>
+				<CollapsibleContent>
+					<SidebarMenuSub>
+						{mockEntries.map((item) => (
+							<SidebarMenuItem>
+								<a href={item.url}>
+									<span className="text-xs">{item.title}</span>
+								</a>
+							</SidebarMenuItem>
+						))}
+					</SidebarMenuSub>
+				</CollapsibleContent>
+			</SidebarMenuItem>
+		</Collapsible>
+	)
+}
diff --git a/src/components/TagListSidebar.tsx b/src/components/TagListSidebar.tsx
new file mode 100644
index 0000000..b5f4ab6
--- /dev/null
+++ b/src/components/TagListSidebar.tsx
@@ -0,0 +1,35 @@
+import { Tags, ChevronRight } from "lucide-react"
+
+import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components/ui/sidebar"
+import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
+import { CollapsibleContent } from "../components/ui/collapsible"
+import { mockTags } from "@/mock-data/mock-tags"
+
+export default function TagListSidebar() {
+	return (
+		<Collapsible className="group/collapsible">
+			<SidebarMenuItem key="tags">
+				<CollapsibleTrigger asChild>
+					<SidebarMenuButton asChild>
+						<a href="#">
+							<Tags />
+							<span>Tags</span>
+							<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+						</a>
+					</SidebarMenuButton>
+				</CollapsibleTrigger>
+				<CollapsibleContent>
+					<SidebarMenuSub>
+						{mockTags.map((item) => (
+							<SidebarMenuItem>
+								<a href={item.url}>
+									<span className="text-xs">{item.title}</span>
+								</a>
+							</SidebarMenuItem>
+						))}
+					</SidebarMenuSub>
+				</CollapsibleContent>
+			</SidebarMenuItem>
+		</Collapsible>
+	)
+}
diff --git a/src/containers/AppSidebar.tsx b/src/containers/AppSidebar.tsx
index fa6e2d1..6e2800e 100644
--- a/src/containers/AppSidebar.tsx
+++ b/src/containers/AppSidebar.tsx
@@ -1,63 +1,47 @@
-import {
-	FileText,
-	Waypoints,
-	SquareLibrary,
-	Settings,
-	Tags,
-	Info,
-	ChevronRight,
-} from "lucide-react"
+import { FileText, Waypoints, SquareLibrary, Settings, ChevronRight } from "lucide-react"
 
 import {
-	Sidebar,
-	SidebarContent,
-	SidebarGroup,
-	SidebarGroupContent,
-	SidebarMenu,
-	SidebarMenuButton,
-	SidebarMenuItem,
-	SidebarHeader,
-	SidebarFooter,
-	SidebarMenuSub,
+   Sidebar,
+   SidebarContent,
+   SidebarGroup,
+   SidebarGroupContent,
+   SidebarMenu,
+   SidebarMenuButton,
+   SidebarMenuItem,
+   SidebarHeader,
+   SidebarFooter,
 } from "@/components/ui/sidebar"
-import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
-import { CollapsibleContent } from "../components/ui/collapsible"
-import { mockEntries } from "@/mock-data/mock-entries"
-import { mockTags } from "@/mock-data/mock-tags"
+import TagListSidebar from "@/components/TagListSidebar"
+import EntriesListSidebar from "@/components/EntriesListSidebar"
 
 const footerMenu = [
-	{
-		title: "About",
-		url: "#",
-		icon: Info,
-	},
-
-	{
-		title: "Settings",
-		url: "#",
-		icon: Settings,
-	},
+   {
+      title: "Settings",
+      url: "#",
+      icon: Settings,
+   },
 ]
 
 export function AppSidebar() {
-	return (
-		<Sidebar>
-			<SidebarHeader className="border-b h-12">
-				<SidebarMenu>
-					<SidebarMenuItem>
-						<SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5">
-							<a href="#">
-								<SquareLibrary className="h-5 w-5" />
-								<span className="text-base font-semibold">Eólas</span>
-							</a>
-						</SidebarMenuButton>
-					</SidebarMenuItem>
-				</SidebarMenu>
-			</SidebarHeader>
-			<SidebarContent>
-				<SidebarGroup>
-					<SidebarGroupContent>
-						<SidebarMenu>
+   return (
+      <Sidebar>
+         <SidebarHeader className="border-b h-12">
+            <SidebarMenu>
+               <SidebarMenuItem>
+                  <SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5">
+                     <a href="#">
+                        <SquareLibrary className="h-5 w-5" />
+                        <span className="text-base font-semibold">Eólas</span>
+                     </a>
+                  </SidebarMenuButton>
+               </SidebarMenuItem>
+            </SidebarMenu>
+         </SidebarHeader>
+         <SidebarContent>
+            <SidebarGroup>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {/*
 							<SidebarMenuItem key="graph">
 								<SidebarMenuButton asChild>
 									<a href="#">
@@ -66,76 +50,32 @@ export function AppSidebar() {
 									</a>
 								</SidebarMenuButton>
 							</SidebarMenuItem>
-							<Collapsible className="group/collapsible">
-								<SidebarMenuItem key="entries">
-									<CollapsibleTrigger asChild>
-										<SidebarMenuButton asChild>
-											<a href="#">
-												<FileText />
-												<span>Entries</span>
-												<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-											</a>
-										</SidebarMenuButton>
-									</CollapsibleTrigger>
-									<CollapsibleContent>
-										<SidebarMenuSub>
-											{mockEntries.map((item) => (
-												<SidebarMenuItem>
-													<a href={item.url}>
-														<span className="text-xs">{item.title}</span>
-													</a>
-												</SidebarMenuItem>
-											))}
-										</SidebarMenuSub>
-									</CollapsibleContent>
-								</SidebarMenuItem>
-							</Collapsible>
-							<Collapsible className="group/collapsible">
-								<SidebarMenuItem key="entries">
-									<CollapsibleTrigger asChild>
-										<SidebarMenuButton asChild>
-											<a href="#">
-												<Tags />
-												<span>Tags</span>
-												<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-											</a>
-										</SidebarMenuButton>
-									</CollapsibleTrigger>
-									<CollapsibleContent>
-										<SidebarMenuSub>
-											{mockTags.map((item) => (
-												<SidebarMenuItem>
-													<a href={item.url}>
-														<span className="text-xs">{item.title}</span>
-													</a>
-												</SidebarMenuItem>
-											))}
-										</SidebarMenuSub>
-									</CollapsibleContent>
-								</SidebarMenuItem>
-							</Collapsible>
-						</SidebarMenu>
-					</SidebarGroupContent>
-				</SidebarGroup>
-			</SidebarContent>
-			<SidebarFooter>
-				<SidebarGroup>
-					<SidebarGroupContent>
-						<SidebarMenu>
-							{footerMenu.map((item) => (
-								<SidebarMenuItem key={item.title}>
-									<SidebarMenuButton asChild>
-										<a href={item.url}>
-											<item.icon />
-											<span>{item.title}</span>
-										</a>
-									</SidebarMenuButton>
-								</SidebarMenuItem>
-							))}
-						</SidebarMenu>
-					</SidebarGroupContent>
-				</SidebarGroup>
-			</SidebarFooter>
-		</Sidebar>
-	)
+
+							*/}
+                     <EntriesListSidebar />
+                     <TagListSidebar />
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+         </SidebarContent>
+         <SidebarFooter>
+            <SidebarGroup>
+               <SidebarGroupContent>
+                  <SidebarMenu>
+                     {footerMenu.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                           <SidebarMenuButton asChild>
+                              <a href={item.url}>
+                                 <item.icon />
+                                 <span>{item.title}</span>
+                              </a>
+                           </SidebarMenuButton>
+                        </SidebarMenuItem>
+                     ))}
+                  </SidebarMenu>
+               </SidebarGroupContent>
+            </SidebarGroup>
+         </SidebarFooter>
+      </Sidebar>
+   )
 }