fix(ui): make compass logo link to dashboard home (#96)

The logo in the org switcher is now a separate clickable link
to /dashboard (fullscreen chat). The org name + chevron still
opens the workspace dropdown independently.

Co-authored-by: Nicholai <nicholaivogelfilms@gmail.com>

src/components/org-switcher.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import Link from "next/link"
 import { useRouter } from "next/navigation"
 import {
   IconBuilding,
@@ -76,71 +77,84 @@ export function OrgSwitcher({
   return (
     <SidebarMenu>
       <SidebarMenuItem>
-        <DropdownMenu>
+        <SidebarMenuButton
-          <DropdownMenuTrigger asChild disabled={!hasOrgs}>
+          size="lg"
-            <SidebarMenuButton
+          className="gap-0 px-0 hover:bg-transparent active:bg-transparent"
-              size="lg"
+          asChild={false}
-              className={cn(
+        >
-                "data-[state=open]:bg-sidebar-accent",
+          <Link
-                "data-[state=open]:text-sidebar-accent-foreground",
+            href="/dashboard"
-              )}
+            className="flex shrink-0 items-center justify-center size-8 rounded-md hover:bg-sidebar-accent transition-colors"
-            >
+            aria-label="Compass home"
-              <span
-                aria-label="Compass"
-                className="!size-5 shrink-0 block bg-current"
-                style={{
-                  maskImage: "url(/logo-black.png)",
-                  maskSize: "contain",
-                  maskRepeat: "no-repeat",
-                  WebkitMaskImage: "url(/logo-black.png)",
-                  WebkitMaskSize: "contain",
-                  WebkitMaskRepeat: "no-repeat",
-                }}
-              />
-              <span className="truncate text-sm font-semibold">
-                {displayName}
-              </span>
-              {hasOrgs && (
-                <IconSelector
-                  className="ml-auto size-4 shrink-0 opacity-50"
-                />
-              )}
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            side={isMobile ? "bottom" : "right"}
-            align="start"
-            sideOffset={4}
           >
-            {orgs.map((org, i) => {
+            <span
-              const isActive = org.id === activeOrgId
+              className="!size-5 block bg-current"
-              const OrgIcon =
+              style={{
-                org.type === "personal" ? IconUser : IconBuilding
+                maskImage: "url(/logo-black.png)",
+                maskSize: "contain",
+                maskRepeat: "no-repeat",
+                WebkitMaskImage: "url(/logo-black.png)",
+                WebkitMaskSize: "contain",
+                WebkitMaskRepeat: "no-repeat",
+              }}
+            />
+          </Link>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild disabled={!hasOrgs}>
+              <button
+                className={cn(
+                  "flex min-w-0 flex-1 items-center gap-1 rounded-md px-2 py-1 text-left",
+                  "hover:bg-sidebar-accent transition-colors",
+                  "data-[state=open]:bg-sidebar-accent",
+                  "data-[state=open]:text-sidebar-accent-foreground",
+                  !hasOrgs && "cursor-default hover:bg-transparent",
+                )}
+              >
+                <span className="truncate text-sm font-semibold">
+                  {displayName}
+                </span>
+                {hasOrgs && (
+                  <IconSelector
+                    className="size-4 shrink-0 opacity-50"
+                  />
+                )}
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+              side={isMobile ? "bottom" : "right"}
+              align="start"
+              sideOffset={4}
+            >
+              {orgs.map((org, i) => {
+                const isActive = org.id === activeOrgId
+                const OrgIcon =
+                  org.type === "personal" ? IconUser : IconBuilding
 
-              return (
+                return (
-                <React.Fragment key={org.id}>
+                  <React.Fragment key={org.id}>
-                  {i > 0 && <DropdownMenuSeparator />}
+                    {i > 0 && <DropdownMenuSeparator />}
-                  <DropdownMenuItem
+                    <DropdownMenuItem
-                    onClick={() => void handleOrgSwitch(org.id)}
+                      onClick={() => void handleOrgSwitch(org.id)}
-                    disabled={isLoading}
+                      disabled={isLoading}
-                    className="gap-2 px-2 py-1.5"
+                      className="gap-2 px-2 py-1.5"
-                  >
+                    >
-                    <OrgIcon className="size-4 shrink-0 opacity-60" />
+                      <OrgIcon className="size-4 shrink-0 opacity-60" />
-                    <span className="truncate font-medium">
+                      <span className="truncate font-medium">
-                      {org.name}
+                        {org.name}
-                    </span>
+                      </span>
-                    {isActive && (
+                      {isActive && (
-                      <IconCheck
+                        <IconCheck
-                        className="ml-auto size-4 shrink-0 text-primary"
+                          className="ml-auto size-4 shrink-0 text-primary"
-                      />
+                        />
-                    )}
+                      )}
-                  </DropdownMenuItem>
+                    </DropdownMenuItem>
-                </React.Fragment>
+                  </React.Fragment>
-              )
+                )
-            })}
+              })}
-          </DropdownMenuContent>
+            </DropdownMenuContent>
-        </DropdownMenu>
+          </DropdownMenu>
+        </SidebarMenuButton>
       </SidebarMenuItem>
     </SidebarMenu>
   )