Start using react-zen.

src/components/input/LanguageButton.tsx

@@ -1,52 +1,42 @@
-import { Icon, Button, PopupTrigger, Popup } from 'react-basics';
-import classNames from 'classnames';
+import { Icon, Button, MenuTrigger, Popover, Grid, Text, Dialog } from '@umami/react-zen';
 import { languages } from '@/lib/lang';
 import { useLocale } from '@/components/hooks';
 import Icons from '@/components/icons';
-import styles from './LanguageButton.module.css';
 
 export function LanguageButton() {
-  const { locale, saveLocale, dir } = useLocale();
+  const { locale, saveLocale } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
-  function handleSelect(value: string, close: () => void, e: MouseEvent) {
-    e.stopPropagation();
+  function handleSelect(value: string) {
     saveLocale(value);
-    close();
   }
 
   return (
-    <PopupTrigger>
+    <MenuTrigger key="language">
       <Button variant="quiet">
         <Icon>
           <Icons.Globe />
         </Icon>
       </Button>
-      <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
-        {(close: () => void) => {
-          return (
-            <div className={styles.menu}>
-              {items.map(({ value, label }) => {
-                return (
-                  <div
-                    key={value}
-                    className={classNames(styles.item, { [styles.selected]: value === locale })}
-                    onClick={(e: any) => handleSelect(value, close, e)}
+      <Popover placement="bottom end">
+        <Dialog variant="menu">
+          <Grid columns="repeat(3, minmax(200px, 1fr))" overflow="hidden">
+            {items.map(({ value, label }) => {
+              return (
+                <Button key={value} variant="quiet" onPress={() => handleSelect(value)}>
+                  <Text
+                    weight={value === locale ? 'bold' : 'normal'}
+                    color={value === locale ? 'primary' : 'muted'}
                   >
-                    <span lang={value}>{label}</span>
-                    {value === locale && (
-                      <Icon className={styles.icon}>
-                        <Icons.Check />
-                      </Icon>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          );
-        }}
-      </Popup>
-    </PopupTrigger>
+                    {label}
+                  </Text>
+                </Button>
+              );
+            })}
+          </Grid>
+        </Dialog>
+      </Popover>
+    </MenuTrigger>
   );
 }
 

src/components/input/ProfileButton.tsx

@@ -1,58 +1,63 @@
 import { Key } from 'react';
-import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basics';
+import {
+  Icon,
+  Button,
+  MenuTrigger,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+  MenuSection,
+  Text,
+} from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
 import Icons from '@/components/icons';
-import { useMessages, useLogin, useLocale } from '@/components/hooks';
-import { CURRENT_VERSION } from '@/lib/constants';
-import styles from './ProfileButton.module.css';
+import { useMessages, useLogin } from '@/components/hooks';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
   const router = useRouter();
-  const { dir } = useLocale();
   const cloudMode = !!process.env.cloudMode;
 
-  const handleSelect = (key: Key, close: () => void) => {
+  const handleSelect = (key: Key) => {
     if (key === 'profile') {
       router.push('/profile');
     }
     if (key === 'logout') {
       router.push('/logout');
     }
-    close();
   };
 
   return (
-    <PopupTrigger>
+    <MenuTrigger>
       <Button data-test="button-profile" variant="quiet">
         <Icon>
           <Icons.Profile />
         </Icon>
       </Button>
-      <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
-        {(close: () => void) => (
-          <Menu onSelect={key => handleSelect(key, close)} className={styles.menu}>
-            <Text className={styles.name}>{user.username}</Text>
-            <Item key="profile" className={styles.item} divider={true}>
+      <Popover placement="bottom end">
+        <Menu autoFocus="last" onAction={handleSelect}>
+          <MenuSection title={user.username}>
+            <MenuSeparator />
+            <MenuItem id="profile">
               <Icon>
                 <Icons.User />
               </Icon>
               <Text>{formatMessage(labels.profile)}</Text>
-            </Item>
+            </MenuItem>
             {!cloudMode && (
-              <Item data-test="item-logout" key="logout" className={styles.item}>
+              <MenuItem data-test="item-logout" id="logout">
                 <Icon>
                   <Icons.Logout />
                 </Icon>
                 <Text>{formatMessage(labels.logout)}</Text>
-              </Item>
+              </MenuItem>
             )}
-            <div className={styles.version}>{`v${CURRENT_VERSION}`}</div>
-          </Menu>
-        )}
-      </Popup>
-    </PopupTrigger>
+          </MenuSection>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
   );
 }
 

src/components/input/TeamsButton.tsx

@@ -1,28 +1,45 @@
-import { Key } from 'react';
-import { Text, Icon, Button, Popup, Menu, Item, PopupTrigger, Flexbox } from 'react-basics';
-import classNames from 'classnames';
+import { useState } from 'react';
+import type { Selection } from 'react-aria-components';
+import { useRouter } from 'next/navigation';
+import {
+  Text,
+  Icon,
+  Button,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  MenuSection,
+  MenuSeparator,
+  Popover,
+  Row,
+  Box,
+} from '@umami/react-zen';
 import Icons from '@/components/icons';
 import { useLogin, useMessages, useTeams, useTeamUrl } from '@/components/hooks';
-import styles from './TeamsButton.module.css';
 
 export function TeamsButton({
   className,
   showText = true,
-  onChange,
 }: {
   className?: string;
   showText?: boolean;
-  onChange?: (value: string) => void;
 }) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
   const { result } = useTeams(user.id);
   const { teamId } = useTeamUrl();
+  const router = useRouter();
   const team = result?.data?.find(({ id }) => id === teamId);
+  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([teamId || user.id]));
 
-  const handleSelect = (close: () => void, id: Key) => {
-    onChange?.((id !== user.id ? id : '') as string);
-    close();
+  const handleSelect = (keys: Set<string>) => {
+    if (keys.size > 0) {
+      const [id] = [...keys];
+
+      router.push(id === user.id ? '/dashboard' : `/teams/${id}/dashboard`);
+
+      setSelectedKeys(keys);
+    }
   };
 
   if (!result?.count) {
@@ -30,41 +47,47 @@ export function TeamsButton({
   }
 
   return (
-    <PopupTrigger>
-      <Button className={classNames(styles.button, className)} variant="quiet">
-        <Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
-        {showText && <Text>{teamId ? team?.name : user.username}</Text>}
-        <Icon>
-          <Icons.ChevronDown />
-        </Icon>
+    <MenuTrigger>
+      <Button className={className} variant="quiet">
+        <Row alignItems="center" gap="3">
+          <Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
+          {showText && <Text weight="bold">{teamId ? team?.name : user.username}</Text>}
+          <Icon>
+            <Icons.ChevronDown />
+          </Icon>
+        </Row>
       </Button>
-      <Popup alignment="end">
-        {(close: () => void) => (
-          <Menu className={styles.menu} variant="popup" onSelect={handleSelect.bind(null, close)}>
-            <div className={styles.heading}>{formatMessage(labels.myAccount)}</div>
-            <Item key={user.id} className={classNames({ [styles.selected]: !teamId })}>
-              <Flexbox gap={10} alignItems="center">
+      <Popover placement="bottom end">
+        <Box minWidth={300}>
+          <Menu
+            selectionMode="single"
+            selectedKeys={selectedKeys}
+            autoFocus="last"
+            onSelectionChange={keys => handleSelect(keys as Set<string>)}
+          >
+            <MenuSection title={formatMessage(labels.myAccount)}>
+              <MenuItem id={user.id}>
                 <Icon>
                   <Icons.User />
                 </Icon>
-                <Text>{user.username}</Text>
-              </Flexbox>
-            </Item>
-            <div className={styles.heading}>{formatMessage(labels.team)}</div>
-            {result?.data?.map(({ id, name }) => (
-              <Item key={id} className={classNames({ [styles.selected]: id === teamId })}>
-                <Flexbox gap={10} alignItems="center">
-                  <Icon>
+                <Text wrap="nowrap">{user.username}</Text>
+              </MenuItem>
+            </MenuSection>
+            <MenuSeparator />
+            <MenuSection title={formatMessage(labels.teams)}>
+              {result?.data?.map(({ id, name }) => (
+                <MenuItem key={id} id={id}>
+                  <Icon size="sm">
                     <Icons.Users />
                   </Icon>
-                  <Text>{name}</Text>
-                </Flexbox>
-              </Item>
-            ))}
+                  <Text wrap="nowrap">{name}</Text>
+                </MenuItem>
+              ))}
+            </MenuSection>
           </Menu>
-        )}
-      </Popup>
-    </PopupTrigger>
+        </Box>
+      </Popover>
+    </MenuTrigger>
   );
 }
 

src/components/input/ThemeButton.module.css

@@ -1,14 +0,0 @@
-.button {
-  width: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.button > div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-}

src/components/input/ThemeButton.tsx

@@ -1,38 +0,0 @@
-import { useTransition, animated } from '@react-spring/web';
-import { Button, Icon } from 'react-basics';
-import { useTheme } from '@/components/hooks';
-import Icons from '@/components/icons';
-import styles from './ThemeButton.module.css';
-
-export function ThemeButton() {
-  const { theme, saveTheme } = useTheme();
-
-  const transitions = useTransition(theme, {
-    initial: { opacity: 1 },
-    from: {
-      opacity: 0,
-      transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
-    },
-    enter: { opacity: 1, transform: 'translateY(0px) scale(1.0)' },
-    leave: {
-      opacity: 0,
-      transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
-    },
-  });
-
-  function handleClick() {
-    saveTheme(theme === 'light' ? 'dark' : 'light');
-  }
-
-  return (
-    <Button variant="quiet" className={styles.button} onClick={handleClick}>
-      {transitions((style, item) => (
-        <animated.div key={item} style={style}>
-          <Icon>{item === 'light' ? <Icons.Sun /> : <Icons.Moon />}</Icon>
-        </animated.div>
-      ))}
-    </Button>
-  );
-}
-
-export default ThemeButton;