Move website selector into top navigation

src/app/(main)/App.tsx

@@ -4,8 +4,8 @@ import Script from 'next/script';
 import { useEffect } from 'react';
 import { MobileNav } from '@/app/(main)/MobileNav';
 import { SideNav } from '@/app/(main)/SideNav';
+import { TopNav } from '@/app/(main)/TopNav';
 import { useConfig, useLoginQuery, useNavigation } from '@/components/hooks';
-import { TeamsButton } from '@/components/input/TeamsButton';
 import { LAST_TEAM_CONFIG } from '@/lib/constants';
 import { removeItem, setItem } from '@/lib/storage';
 import { UpdateNotice } from './UpdateNotice';
@@ -51,18 +51,7 @@ export function App({ children }) {
         <SideNav />
       </Column>
       <Column overflowX="hidden" position="relative">
-        <Row
+        <TopNav />
-          position="sticky"
-          top="0"
-          alignItems="center"
-          justifyContent="space-between"
-          paddingY="2"
-          zIndex={100}
-        >
-          <Row backgroundColor="surface-raised">
-            <TeamsButton />
-          </Row>
-        </Row>
         <Column alignItems="center">{children}</Column>
       </Column>
       <UpdateNotice user={user} config={config} />

src/app/(main)/TopNav.tsx

@@ -1,30 +1,47 @@
-import { Row, ThemeButton } from '@umami/react-zen';
+'use client';
-import { LanguageButton } from '@/components/input/LanguageButton';
+import { Icon, Row } from '@umami/react-zen';
-import { ProfileButton } from '@/components/input/ProfileButton';
+import { useNavigation } from '@/components/hooks';
+import { Slash } from '@/components/icons';
+import { TeamsButton } from '@/components/input/TeamsButton';
+import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 
 export function TopNav() {
+  const { websiteId, teamId, router, renderUrl } = useNavigation();
+
+  const handleWebsiteChange = (value: string) => {
+    router.push(renderUrl(`/websites/${value}`));
+  };
+
   return (
     <Row
-      position="absolute"
+      position="sticky"
       top="0"
       alignItems="center"
-      justifyContent="flex-end"
+      justifyContent="flex-start"
       paddingY="2"
       paddingX="3"
       paddingRight="5"
       width="100%"
-      style={{ position: 'sticky', top: 0 }}
+      zIndex={100}
-      zIndex={1}
     >
-      <Row
+      <Row alignItems="center" backgroundColor="surface-raised" borderRadius>
-        alignItems="center"
+        <TeamsButton />
-        justifyContent="flex-end"
+        {websiteId && (
-        backgroundColor="surface-raised"
+          <>
-        borderRadius
+            <Icon size="sm" color="muted" style={{ opacity: 0.7, margin: '0 6px' }}>
-      >
+              <Slash />
-        <ThemeButton />
+            </Icon>
-        <LanguageButton />
+            <WebsiteSelect
-        <ProfileButton />
+              websiteId={websiteId}
+              teamId={teamId}
+              onChange={handleWebsiteChange}
+              buttonProps={{
+                variant: 'quiet',
+                style: { minHeight: 40, minWidth: 200, maxWidth: 200 },
+              }}
+            />
+          </>
+        )}
       </Row>
     </Row>
   );

src/app/(main)/websites/[websiteId]/WebsiteNav.tsx

@@ -1,19 +1,8 @@
-import {
+import { Column, Focusable, Row, Text, Tooltip, TooltipTrigger } from '@umami/react-zen';
-  Box,
-  Column,
-  Focusable,
-  Label,
-  Row,
-  Text,
-  Tooltip,
-  TooltipTrigger,
-} from '@umami/react-zen';
 import Link from 'next/link';
 import { IconLabel } from '@/components/common/IconLabel';
-import { NavMenu } from '@/components/common/NavMenu';
 import { useMessages, useNavigation, useWebsiteNavItems } from '@/components/hooks';
 import { ArrowLeft } from '@/components/icons';
-import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 
 export function WebsiteNav({
   websiteId,
@@ -25,16 +14,12 @@ export function WebsiteNav({
   onItemClick?: () => void;
 }) {
   const { t, labels } = useMessages();
-  const { teamId, router, renderUrl } = useNavigation();
+  const { renderUrl } = useNavigation();
   const { items, selectedKey } = useWebsiteNavItems(websiteId);
 
-  const handleChange = (value: string) => {
-    router.push(renderUrl(`/websites/${value}`));
-  };
-
   return (
     <Column gap="2">
-      <Link href={renderUrl('/websites', false)} role="button">
+      <Link href={renderUrl('/websites', false)} role="button" onClick={onItemClick}>
         <TooltipTrigger isDisabled={!isCollapsed} delay={0}>
           <Focusable>
             <Row
@@ -49,15 +34,6 @@ export function WebsiteNav({
           <Tooltip placement="right">{t(labels.back)}</Tooltip>
         </TooltipTrigger>
       </Link>
-      <Box marginBottom="2">
-        <WebsiteSelect
-          websiteId={websiteId}
-          teamId={teamId}
-          onChange={handleChange}
-          buttonProps={{ style: { outline: 'none' } }}
-          isCollapsed={isCollapsed}
-        />
-      </Box>
       {items.map(({ label: sectionLabel, items: sectionItems }, index) => (
         <Column key={`${sectionLabel}${index}`} gap="1" marginBottom="1">
           {!isCollapsed && (
@@ -68,7 +44,7 @@ export function WebsiteNav({
           {sectionItems.map(({ id, path, label, icon }) => {
             const isSelected = selectedKey === id;
             return (
-              <Link key={id} href={path} role="button">
+              <Link key={id} href={path} role="button" onClick={onItemClick}>
                 <TooltipTrigger isDisabled={!isCollapsed} delay={0}>
                   <Focusable>
                     <Row

src/components/input/WebsiteSelect.tsx

@@ -1,5 +1,4 @@
 import { Icon, ListItem, Row, Select, type SelectProps, Text } from '@umami/react-zen';
-import { ChevronRight } from 'lucide-react';
 import { useState } from 'react';
 import { Empty } from '@/components/common/Empty';
 import {
@@ -8,6 +7,7 @@ import {
   useUserWebsitesQuery,
   useWebsiteQuery,
 } from '@/components/hooks';
+import { Globe } from '@/components/icons';
 
 export function WebsiteSelect({
   websiteId,
@@ -15,6 +15,8 @@ export function WebsiteSelect({
   onChange,
   includeTeams,
   isCollapsed,
+  buttonProps,
+  listProps,
   ...props
 }: {
   websiteId?: string;
@@ -47,7 +49,18 @@ export function WebsiteSelect({
   };
 
   const renderValue = () => {
-    return isCollapsed ? '' : name;
+    if (isCollapsed) {
+      return '';
+    }
+
+    return (
+      <Row alignItems="center" gap>
+        <Icon>
+          <Globe />
+        </Icon>
+        <Text truncate>{name}</Text>
+      </Row>
+    );
   };
 
   return (
@@ -61,12 +74,24 @@ export function WebsiteSelect({
       onChange={handleChange}
       onOpenChange={handleOpenChange}
       renderValue={renderValue}
-      listProps={{
-        renderEmptyState: () => <Empty message={t(messages.noResultsFound)} />,
-        style: { maxHeight: 'calc(42vh - 65px)', width: 280 },
-      }}
       buttonProps={{
-        style: { minHeight: 40, gap: 0, justifyContent: isCollapsed ? 'start' : undefined },
+        ...buttonProps,
+        style: {
+          minHeight: 40,
+          gap: 0,
+          justifyContent: isCollapsed ? 'start' : undefined,
+          ...buttonProps?.style,
+        },
+      }}
+      listProps={{
+        ...listProps,
+        renderEmptyState:
+          listProps?.renderEmptyState || (() => <Empty message={t(messages.noResultsFound)} />),
+        style: {
+          maxHeight: 'calc(42vh - 65px)',
+          width: 280,
+          ...listProps?.style,
+        },
       }}
     >
       {listItems.map(({ id, name }) => (