Add board selector to top navigation

src/app/(main)/TopNav.tsx

@@ -2,13 +2,14 @@
 import { Icon, Row } from '@umami/react-zen';
 import { useNavigation } from '@/components/hooks';
 import { Slash } from '@/components/icons';
+import { BoardSelect } from '@/components/input/BoardSelect';
 import { LinkSelect } from '@/components/input/LinkSelect';
 import { PixelSelect } from '@/components/input/PixelSelect';
 import { TeamsButton } from '@/components/input/TeamsButton';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 
 export function TopNav() {
-  const { websiteId, linkId, pixelId, teamId, router, renderUrl } = useNavigation();
+  const { websiteId, linkId, pixelId, boardId, teamId, router, renderUrl } = useNavigation();
 
   const handleWebsiteChange = (value: string) => {
     router.push(renderUrl(`/websites/${value}`));
@@ -22,6 +23,10 @@ export function TopNav() {
     router.push(renderUrl(`/pixels/${value}`));
   };
 
+  const handleBoardChange = (value: string) => {
+    router.push(renderUrl(`/boards/${value}`));
+  };
+
   return (
     <Row
       position="sticky"
@@ -36,7 +41,7 @@ export function TopNav() {
     >
       <Row alignItems="center" backgroundColor="surface-raised" borderRadius>
         <TeamsButton />
-        {(websiteId || linkId || pixelId) && (
+        {(websiteId || linkId || pixelId || boardId) && (
           <>
             <Icon size="sm" color="muted" style={{ opacity: 0.7, margin: '0 6px' }}>
               <Slash />
@@ -74,6 +79,17 @@ export function TopNav() {
                 }}
               />
             )}
+            {boardId && (
+              <BoardSelect
+                boardId={boardId}
+                teamId={teamId}
+                onChange={handleBoardChange}
+                buttonProps={{
+                  variant: 'quiet',
+                  style: { minHeight: 40, minWidth: 200, maxWidth: 200 },
+                }}
+              />
+            )}
           </>
         )}
       </Row>