From 756cc3a7827268e079f4e122e02fc0aeee3b4f26 Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Fri, 10 Apr 2026 02:12:29 +0800
Subject: [PATCH] refactor(sidebar): make search and new issue regular menu
 items

Replace bordered input-style search bar and icon button with
SidebarMenuButton components so they share the same visual weight,
padding, and hover behavior as all other nav items.
---
 .../(dashboard)/_components/app-sidebar.tsx   | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/apps/web/app/(dashboard)/_components/app-sidebar.tsx b/apps/web/app/(dashboard)/_components/app-sidebar.tsx
index 3c340832d..b0dc3ef7e 100644
--- a/apps/web/app/(dashboard)/_components/app-sidebar.tsx
+++ b/apps/web/app/(dashboard)/_components/app-sidebar.tsx
@@ -179,29 +179,32 @@ export function AppSidebar() {
               </DropdownMenu>
             </SidebarMenuItem>
           </SidebarMenu>
-          <div className="flex items-center gap-1.5">
-            <button
-              type="button"
-              className="flex h-8 flex-1 items-center gap-2 rounded-md border bg-background px-2 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
-              onClick={() => useSearchStore.getState().setOpen(true)}
-            >
-              <Search className="size-3.5 shrink-0" />
-              <span>Search...</span>
-              <kbd className="pointer-events-none ml-auto inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
-                <span className="text-xs">⌘</span>K
-              </kbd>
-            </button>
-            <Tooltip>
-              <TooltipTrigger
-                className="relative flex h-8 w-8 shrink-0 items-center justify-center rounded-md border bg-background text-foreground hover:bg-accent transition-colors"
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                className="text-muted-foreground"
+                onClick={() => useSearchStore.getState().setOpen(true)}
+              >
+                <Search />
+                <span>Search...</span>
+                <kbd className="pointer-events-none ml-auto inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+                  <span className="text-xs">⌘</span>K
+                </kbd>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                className="text-muted-foreground"
                 onClick={() => useModalStore.getState().open("create-issue")}
               >
-                <SquarePen className="size-3.5" />
-                <DraftDot />
-              </TooltipTrigger>
-              <TooltipContent side="bottom">New issue</TooltipContent>
-            </Tooltip>
-          </div>
+                <span className="relative">
+                  <SquarePen />
+                  <DraftDot />
+                </span>
+                <span>New Issue</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
         </SidebarHeader>
 
         {/* Navigation */}