feat: redesign navs

frontend/src/app/kosmos/KosmosSidebar.tsx

@@ -38,7 +38,6 @@ export function KosmosSidebar() {
   const navigate = useNavigate()
   const location = useLocation()
   const { recollectionId: selectedRecollectionId } = useParams<{ recollectionId: string }>()
-  const handleSelectRecollection = useCallback((id: string) => navigate(`/recollections/${id}`), [navigate])
 
   const handleCreateRecollection = useCallback(
     (recollection: Parameters<typeof createRecollection>[0]) => {
@@ -149,13 +148,11 @@ export function KosmosSidebar() {
                   const isActive = selectedRecollectionId === recollection.id
                   return (
                     <SidebarMenuItem key={recollection.id}>
-                      <SidebarMenuButton
-                        tooltip={recollection.name}
-                        isActive={isActive}
-                        onClick={() => handleSelectRecollection(recollection.id)}
-                      >
-                        <Icon className="size-4" />
-                        <span>{recollection.name}</span>
+                      <SidebarMenuButton asChild tooltip={recollection.name} isActive={isActive}>
+                        <Link to={`/recollections/${recollection.id}`}>
+                          <Icon className="size-4" />
+                          <span>{recollection.name}</span>
+                        </Link>
                       </SidebarMenuButton>
                     </SidebarMenuItem>
                   )