Update titlebar

src/renderer/features/titlebar/components/Titlebar.tsx

@@ -2,11 +2,10 @@ import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { Group } from '@mantine/core';
 import { FiActivity } from 'react-icons/fi';
-import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
+import { Button, Text } from '@/renderer/components';
-import { useNavigate } from 'react-router-dom';
 import { AppMenu } from '@/renderer/features/titlebar/components/app-menu';
 import { useAuthStore } from '@/renderer/store';
-import { Button } from '../../../components';
+import { Font } from '@/renderer/styles';
 import { WindowControls } from '../../window-controls';
 
 interface TitlebarProps {
@@ -32,57 +31,41 @@ const TitlebarContainer = styled.div`
 `;
 
 const Left = styled.div`
+  display: flex;
   flex: 1/3;
+  justify-content: center;
   height: 100%;
+  padding-left: 1rem;
 `;
 
 const Center = styled.div`
+  display: flex;
   flex: 1/3;
+  justify-content: center;
   height: 100%;
 `;
 
 const Right = styled.div`
+  display: flex;
   flex: 1/3;
+  justify-content: center;
   height: 100%;
 `;
 
 export const Titlebar = ({ children }: TitlebarProps) => {
-  const navigate = useNavigate();
   const isAuthenticated = useAuthStore((state) => !!state.accessToken);
 
   return (
     <>
       <TitlebarContainer>
         <Left>
-          <Group spacing="xs">
+          <Group>
-            {isAuthenticated && (
+            <Text font={Font.POPPINS}>Feishin</Text>
-              <>
-                <Button
-                  px={5}
-                  size="xs"
-                  sx={{ color: 'var(--titlebar-fg)' }}
-                  variant="subtle"
-                  onClick={() => navigate(-1)}
-                >
-                  <RiArrowLeftSLine size={20} />
-                </Button>
-                <Button
-                  px={5}
-                  size="xs"
-                  sx={{ color: 'var(--titlebar-fg)' }}
-                  variant="subtle"
-                  onClick={() => navigate(1)}
-                >
-                  <RiArrowRightSLine size={20} />
-                </Button>
-              </>
-            )}
           </Group>
         </Left>
         <Center />
         <Right>
           {children}
-
           <Group spacing="xs">
             {isAuthenticated && (
               <>

src/renderer/features/titlebar/components/app-menu.tsx

@@ -1,5 +1,4 @@
 import { openModal, closeAllModals } from '@mantine/modals';
-import { useTranslation } from 'react-i18next';
 import { RiArrowLeftLine, RiLogoutBoxLine, RiMenu3Fill } from 'react-icons/ri';
 import { useNavigate } from 'react-router';
 import { Button, DropdownMenu } from '@/renderer/components';
@@ -8,23 +7,22 @@ import {
   ServerList,
   useServerList,
 } from '@/renderer/features/servers';
+import { usePermissions } from '@/renderer/features/shared';
 import { useAuthStore } from '@/renderer/store';
 
 export const AppMenu = () => {
   const navigate = useNavigate();
-  const { t } = useTranslation();
   const logout = useAuthStore((state) => state.logout);
   const currentServer = useAuthStore((state) => state.currentServer);
   const setCurrentServer = useAuthStore((state) => state.setCurrentServer);
+  const permissions = usePermissions();
   const { data: servers } = useServerList();
 
   const serverList =
-    servers?.data?.map((s) => ({ id: s.id, label: `${s.name} - ${s.url}` })) ??
+    servers?.data?.map((s) => ({ id: s.id, label: `${s.name}` })) ?? [];
-    [];
 
   const handleLogout = () => {
     logout();
-    localStorage.removeItem('authentication');
     navigate('/login');
   };
 
@@ -32,7 +30,7 @@ export const AppMenu = () => {
     openModal({
       centered: true,
       children: <AddServerForm onCancel={closeAllModals} />,
-      title: t('modal.add_server.title'),
+      title: 'Add server',
     });
   };
 
@@ -40,7 +38,7 @@ export const AppMenu = () => {
     openModal({
       centered: true,
       children: <ServerList />,
-      title: t('modal.manage_servers.title'),
+      title: 'Manage servers',
     });
   };
 
@@ -51,7 +49,7 @@ export const AppMenu = () => {
   };
 
   return (
-    <DropdownMenu withinPortal position="bottom-start">
+    <DropdownMenu withinPortal position="bottom" width={200}>
       <DropdownMenu.Target>
         <Button
           px={5}
@@ -80,26 +78,24 @@ export const AppMenu = () => {
           </DropdownMenu.Item>
         ))}
         <DropdownMenu.Divider />
-        <DropdownMenu.Item>{t('global.menu.search_label')}</DropdownMenu.Item>
+        <DropdownMenu.Item disabled>Search</DropdownMenu.Item>
-        <DropdownMenu.Item>
+        <DropdownMenu.Item>Configure</DropdownMenu.Item>
-          {t('global.menu.configure_label')}
-        </DropdownMenu.Item>
         <DropdownMenu.Divider />
-        <DropdownMenu.Item onClick={handleAddServerModal}>
+        {permissions.createServer && (
-          {t('global.menu.label_add_server_label')}
+          <DropdownMenu.Item onClick={handleAddServerModal}>
-        </DropdownMenu.Item>
+            Add server
+          </DropdownMenu.Item>
+        )}
         <DropdownMenu.Item onClick={handleManageServersModal}>
-          {t('global.menu.label_manage_servers_label')}
+          Manage servers
-        </DropdownMenu.Item>
-        <DropdownMenu.Item disabled>
-          {t('global.menu.label_manage_users_label')}
         </DropdownMenu.Item>
+        <DropdownMenu.Item disabled>Manage users</DropdownMenu.Item>
         <DropdownMenu.Divider />
         <DropdownMenu.Item
           rightSection={<RiLogoutBoxLine />}
           onClick={handleLogout}
         >
-          {t('global.menu.log_out_label')}
+          Log out
         </DropdownMenu.Item>
       </DropdownMenu.Dropdown>
     </DropdownMenu>

src/renderer/features/titlebar/components/user-menu.tsx

@@ -1,41 +0,0 @@
-import { Button, Menu } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { RiLogoutBoxLine, RiServerFill, RiSettings3Fill } from 'react-icons/ri';
-import { useNavigate } from 'react-router';
-import { useAuthStore } from '../../../store';
-
-export const UserMenu = () => {
-  const navigate = useNavigate();
-  const [addServerModal, addServerHandlers] = useDisclosure(false);
-  const logout = useAuthStore((state) => state.logout);
-
-  const handleLogout = () => {
-    logout();
-    localStorage.removeItem('authentication');
-    navigate('/login');
-  };
-
-  return (
-    <>
-      <Menu position="bottom">
-        <Menu.Target>
-          <Button radius="lg" size="xs" variant="default">
-            User
-          </Button>
-        </Menu.Target>
-        <Menu.Dropdown>
-          <Menu.Item
-            icon={<RiServerFill />}
-            onClick={() => addServerHandlers.open()}
-          >
-            Servers
-          </Menu.Item>
-          <Menu.Item icon={<RiSettings3Fill />}>Settings</Menu.Item>
-          <Menu.Item icon={<RiLogoutBoxLine />} onClick={handleLogout}>
-            Logout
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
-    </>
-  );
-};

src/renderer/features/titlebar/index.ts

@@ -1,2 +0,0 @@
-export * from './components/titlebar';
-export * from './components/user-menu';