Update various components

src/renderer/features/player/components/player-button.tsx

@@ -34,42 +34,29 @@ const MotionWrapper = styled(motion.div)<MotionWrapperProps>`
 
 const ButtonMainVariant = css`
   padding: 0.5rem;
-  background-color: var(--playerbar-btn-bg);
+  background: var(--playerbar-btn-main-bg);
   border-radius: 50%;
 
   svg {
     display: flex;
-    fill: var(--playerbar-btn-fg);
+    fill: var(--playerbar-btn-main-fg);
   }
 
   &:focus-visible {
-    background: var(--playerbar-btn-bg-hover);
+    background: var(--playerbar-btn-main-bg-hover);
   }
 
   &:hover {
-    background: var(--playerbar-btn-bg-hover);
+    background: var(--playerbar-btn-main-bg-hover);
 
     svg {
-      fill: var(--playerbar-btn-fg-hover);
+      fill: var(--playerbar-btn-main-fg-hover);
     }
   }
 `;
 
 const ButtonSecondaryVariant = css`
   padding: 0.5rem;
-
-  svg {
-    display: flex;
-    fill: var(--playerbar-btn-bg);
-    stroke: var(--playerbar-btn-bg);
-  }
-
-  &:focus-visible {
-    svg {
-      fill: var(--playerbar-btn-bg-hover);
-      stroke: var(--playerbar-btn-bg-hover);
-    }
-  }
 `;
 
 const ButtonTertiaryVariant = css`
@@ -81,8 +68,8 @@ const ButtonTertiaryVariant = css`
 
   &:focus-visible {
     svg {
-      fill: var(--playerbar-btn-bg-hover);
+      fill: var(--playerbar-btn-fg-hover);
-      stroke: var(--playerbar-btn-bg-hover);
+      stroke: var(--playerbar-btn-fg-hover);
     }
   }
 `;
@@ -95,6 +82,7 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
   width: 100%;
   padding: 0.5rem;
   overflow: visible;
+  background: var(--playerbar-btn-bg-hover);
   all: unset;
   cursor: default;
 
@@ -103,6 +91,7 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
   }
 
   &:focus-visible {
+    background: var(--playerbar-btn-bg-hover);
     outline: 1px var(--primary-color) solid;
   }
 
@@ -111,12 +100,18 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
   }
 
   svg {
-    fill: ${({ $isActive }) => $isActive && 'var(--primary-color)'};
+    display: flex;
+    fill: ${({ $isActive }) =>
+      $isActive ? 'var(--primary-color)' : 'var(--playerbar-btn-fg)'};
+    stroke: var(--playerbar-btn-fg);
   }
 
   &:hover {
+    background: var(--playerbar-btn-bg-hover);
+
     svg {
-      fill: ${({ $isActive }) => !$isActive && 'var(--playerbar-btn-bg-hover)'};
+      fill: ${({ $isActive }) =>
+        $isActive ? 'var(--primary-color)' : 'var(--playerbar-btn-fg-hover)'};
     }
   }
 

src/renderer/features/servers/components/server-list-item.tsx

@@ -2,10 +2,16 @@ import { useMemo } from 'react';
 import { Stack, Group, Divider } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useQueryClient } from '@tanstack/react-query';
-import { RiDeleteBin2Line, RiEdit2Fill } from 'react-icons/ri';
+import { RiDeleteBin2Line, RiEdit2Fill, RiMore2Fill } from 'react-icons/ri';
 import { queryKeys } from '@/renderer/api/query-keys';
 import { Server, TaskType } from '@/renderer/api/types';
-import { Button, Switch, Text, toast } from '@/renderer/components';
+import {
+  Button,
+  DropdownMenu,
+  Switch,
+  Text,
+  toast,
+} from '@/renderer/components';
 import { AddServerCredentialForm } from '@/renderer/features/servers/components/add-server-credential-form';
 import { AddServerUrlForm } from '@/renderer/features/servers/components/add-server-url-form';
 import { EditServerForm } from '@/renderer/features/servers/components/edit-server-form';
@@ -134,14 +140,26 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
 
   const handleToggleFolder = (folderId: string, enabled: boolean) => {
     if (enabled) {
-      return disableServerFolder.mutate({
+      return disableServerFolder.mutate(
+        {
           query: { folderId, serverId: server.id },
-      });
+        },
+        {
+          onError: (err) =>
+            toast.error({ message: err?.response?.data?.error.message }),
+        }
+      );
     }
 
-    return enableServerFolder.mutate({
+    return enableServerFolder.mutate(
+      {
         query: { folderId, serverId: server.id },
-    });
+      },
+      {
+        onError: (err) =>
+          toast.error({ message: err?.response?.data?.error.message }),
+      }
+    );
   };
 
   return (
@@ -228,9 +246,23 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
                       }
                     />
                     {serverPermission >= ServerPermission.ADMIN && (
+                      <DropdownMenu position="right-start">
+                        <DropdownMenu.Target>
                           <Button compact variant="subtle">
-                        <RiDeleteBin2Line color="var(--danger-color)" />
+                            <RiMore2Fill size={15} />
                           </Button>
+                        </DropdownMenu.Target>
+                        <DropdownMenu.Dropdown>
+                          <DropdownMenu.Item
+                            disabled
+                            rightSection={
+                              <RiDeleteBin2Line color="var(--danger-color)" />
+                            }
+                          >
+                            Delete
+                          </DropdownMenu.Item>
+                        </DropdownMenu.Dropdown>
+                      </DropdownMenu>
                     )}
                   </>
                 </Group>
@@ -261,13 +293,25 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
                           )
                         }
                       />
-                      <Button
+                      <DropdownMenu position="right-start">
-                        compact
+                        <DropdownMenu.Target>
-                        variant="subtle"
+                          <Button compact variant="subtle">
-                        onClick={() => handleDeleteCredential(credential.id)}
+                            <RiMore2Fill size={15} />
-                      >
-                        <RiDeleteBin2Line color="var(--danger-color)" />
                           </Button>
+                        </DropdownMenu.Target>
+                        <DropdownMenu.Dropdown>
+                          <DropdownMenu.Item
+                            rightSection={
+                              <RiDeleteBin2Line color="var(--danger-color)" />
+                            }
+                            onClick={() =>
+                              handleDeleteCredential(credential.id)
+                            }
+                          >
+                            Delete
+                          </DropdownMenu.Item>
+                        </DropdownMenu.Dropdown>
+                      </DropdownMenu>
                     </Group>
                   </Group>
                 ))}
@@ -275,7 +319,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
               <Button
                 compact
                 mt={10}
-                variant="subtle"
+                variant="default"
                 onClick={() => addCredentialHandlers.open()}
               >
                 Add credential
@@ -307,13 +351,23 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
                         }
                       />
                       {serverPermission >= ServerPermission.EDITOR && (
-                        <Button
+                        <DropdownMenu position="right-start">
-                          compact
+                          <DropdownMenu.Target>
-                          variant="subtle"
+                            <Button compact variant="subtle">
+                              <RiMore2Fill size={15} />
+                            </Button>
+                          </DropdownMenu.Target>
+                          <DropdownMenu.Dropdown>
+                            <DropdownMenu.Item
+                              rightSection={
+                                <RiDeleteBin2Line color="var(--danger-color)" />
+                              }
                               onClick={() => handleDeleteUrl(serverUrl.id)}
                             >
-                          <RiDeleteBin2Line color="var(--danger-color)" />
+                              Delete
-                        </Button>
+                            </DropdownMenu.Item>
+                          </DropdownMenu.Dropdown>
+                        </DropdownMenu>
                       )}
                     </Group>
                   </Group>
@@ -323,7 +377,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
                 <Button
                   compact
                   mt={10}
-                  variant="subtle"
+                  variant="default"
                   onClick={() => addUrlHandlers.open()}
                 >
                   Add url
@@ -349,6 +403,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
                 <Divider my="xl" />
                 <Button
                   compact
+                  disabled
                   leftIcon={<RiDeleteBin2Line />}
                   size="xs"
                   sx={{

src/renderer/features/servers/components/server-list.tsx

@@ -31,15 +31,25 @@ export const ServerList = () => {
 
   return (
     <>
-      <Group mb={10} position="right">
+      <Group
+        mb={10}
+        position="right"
+        sx={{
+          position: 'absolute',
+          right: 45,
+          transform: 'translateY(-35px)',
+        }}
+      >
+        {permissions.isAdmin && (
           <Button
+            autoFocus
             compact
-          disabled={!permissions.createServer}
+            variant="default"
-          variant="subtle"
             onClick={handleAddServerModal}
           >
             Add server
           </Button>
+        )}
       </Group>
       <Accordion variant="separated">
         {servers?.data?.map((s) => (

src/renderer/features/settings/components/playback-tab.tsx

@@ -187,6 +187,7 @@ export const PlaybackTab = () => {
     {
       control: (
         <Switch
+          aria-label="Toggle global media hotkeys"
           defaultChecked={settings.globalMediaHotkeys}
           disabled={!isElectron()}
           onChange={(e) => {
@@ -241,6 +242,7 @@ export const PlaybackTab = () => {
     {
       control: (
         <Switch
+          aria-label="Toggle skip buttons"
           defaultChecked={settings.skipButtons?.enabled}
           onChange={(e) =>
             update({

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

@@ -73,7 +73,7 @@ export const ActivityMenu = () => {
             {isTaskRunning ? (
               <StyledActivitySvg color="var(--primary-color)" size={15} />
             ) : (
-              <FiActivity size={15} />
+              <FiActivity color="var(--titlebar-fg)" size={15} />
             )}
           </Button>
         </Popover.Target>

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

@@ -92,13 +92,8 @@ export const AppMenu = () => {
   return (
     <DropdownMenu withArrow withinPortal position="bottom" width={200}>
       <DropdownMenu.Target>
-        <Button
+        <Button px={5} size="xs" variant="subtle">
-          px={5}
+          <RiMenu3Fill color="var(--titlebar-fg)" size={15} />
-          size="xs"
-          sx={{ color: 'var(--titlebar-fg)' }}
-          variant="subtle"
-        >
-          <RiMenu3Fill size={15} />
         </Button>
       </DropdownMenu.Target>
       <DropdownMenu.Dropdown>
@@ -138,7 +133,7 @@ export const AppMenu = () => {
         <DropdownMenu.Item rightSection={<RiProfileLine />}>
           Edit profile
         </DropdownMenu.Item>
-        {permissions.manageUsers && (
+        {permissions.isAdmin && (
           <DropdownMenu.Item
             rightSection={<RiUserAddLine />}
             onClick={handleManageUsersModal}

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

@@ -1,11 +1,9 @@
 import { ReactNode } from 'react';
 import { Group } from '@mantine/core';
 import styled from 'styled-components';
-import { Text } from '@/renderer/components';
 import { ActivityMenu } from '@/renderer/features/titlebar/components/activity-menu';
 import { AppMenu } from '@/renderer/features/titlebar/components/app-menu';
 import { useAuthStore } from '@/renderer/store';
-import { Font } from '@/renderer/styles';
 import { WindowControls } from '../../window-controls';
 
 interface TitlebarProps {
@@ -20,6 +18,7 @@ const TitlebarContainer = styled.div`
   justify-content: space-between;
   width: 100%;
   height: 100%;
+  color: var(--titlebar-fg);
 
   button {
     -webkit-app-region: no-drag;
@@ -59,9 +58,7 @@ export const Titlebar = ({ children }: TitlebarProps) => {
     <>
       <TitlebarContainer>
         <Left>
-          <Group>
+          <Group>Feishin</Group>
-            <Text font={Font.POPPINS}>Feishin</Text>
-          </Group>
         </Left>
         <Center />
         <Right>

src/renderer/features/users/components/user-list.tsx

@@ -1,11 +1,17 @@
+import React from 'react';
 import { Avatar, Group, Stack } from '@mantine/core';
 import { openContextModal } from '@mantine/modals';
-import { RiAdminLine, RiDeleteBin2Line, RiEdit2Line } from 'react-icons/ri';
+import {
+  RiAdminLine,
+  RiDeleteBin2Line,
+  RiEdit2Line,
+  RiMore2Fill,
+} from 'react-icons/ri';
 import { User } from '@/renderer/api/types';
 import {
   Button,
   ContextModalVars,
-  Popover,
+  DropdownMenu,
   Text,
   toast,
   Tooltip,
@@ -74,14 +80,27 @@ export const UserList = () => {
 
   return (
     <Stack>
-      <Group mb={10} position="right">
+      <Group
-        <Button compact variant="default" onClick={handleAddUserModal}>
+        mb={10}
+        position="right"
+        sx={{
+          position: 'absolute',
+          right: 45,
+          transform: 'translateY(-35px)',
+        }}
+      >
+        <Button
+          autoFocus
+          compact
+          variant="default"
+          onClick={handleAddUserModal}
+        >
           Add user
         </Button>
       </Group>
       {users?.data?.map((u) => (
+        <React.Fragment key={u.id}>
           <Group
-          key={u.id}
             noWrap
             position="apart"
             sx={{
@@ -92,16 +111,21 @@ export const UserList = () => {
           >
             <Group>
               <Avatar radius="xl" />
+              <Stack spacing="xs">
                 <Text overflow="hidden">
-              {u.displayName ? u.displayName : u.username}{' '}
+                  {u.username}
-              {u.isAdmin && (
+                  {(u.isSuperAdmin || u.isAdmin) && (
-                <Tooltip label="Admin">
+                    <Tooltip label={u.isSuperAdmin ? 'Super Admin' : 'Admin'}>
                       <span>
                         <RiAdminLine />
                       </span>
                     </Tooltip>
                   )}
                 </Text>
+                <Text $secondary size="xs">
+                  {u.displayName}
+                </Text>
+              </Stack>
             </Group>
             <Group>
               <Button
@@ -113,36 +137,30 @@ export const UserList = () => {
               >
                 Edit
               </Button>
-            <Popover position="bottom-start">
+              <DropdownMenu position="right-start">
-              <Popover.Target>
+                <DropdownMenu.Target>
                   <Button
                     compact
                     disabled={!permissions.isAdmin}
                     variant="subtle"
                   >
-                  <RiDeleteBin2Line color="var(--danger-color)" size={15} />
+                    <RiMore2Fill size={15} />
                   </Button>
-              </Popover.Target>
+                </DropdownMenu.Target>
-              <Popover.Dropdown>
+                <DropdownMenu.Dropdown>
-                <Group>
+                  <DropdownMenu.Item
-                  <Button
+                    rightSection={
-                    compact
+                      <RiDeleteBin2Line color="var(--danger-color)" />
-                    uppercase
+                    }
-                    sx={{
-                      '&:hover': {
-                        background: 'var(--danger-color)',
-                      },
-                      background: 'var(--danger-color)',
-                    }}
                     onClick={() => handleDeleteUser(u)}
                   >
                     Delete
-                  </Button>
+                  </DropdownMenu.Item>
-                </Group>
+                </DropdownMenu.Dropdown>
-              </Popover.Dropdown>
+              </DropdownMenu>
-            </Popover>
             </Group>
           </Group>
+        </React.Fragment>
       ))}
     </Stack>
   );