Swap tabler-icons for react-icons

package-lock.json

@@ -32,6 +32,7 @@
         "react-dom": "^18.2.0",
         "react-helmet-async": "^1.3.0",
         "react-i18next": "^11.16.7",
+        "react-icons": "^4.4.0",
         "react-lazy-load-image-component": "^1.5.4",
         "react-player": "^2.10.0",
         "react-query": "^4.0.0-beta.23",
@@ -44,7 +45,6 @@
         "react-window": "^1.8.7",
         "react-window-infinite-loader": "^1.0.8",
         "styled-components": "^5.3.5",
-        "tabler-icons-react": "^1.46.0",
         "zustand": "^4.0.0-rc.1"
       },
       "devDependencies": {
@@ -17056,6 +17056,14 @@
         }
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -20970,14 +20978,6 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/tabler-icons-react": {
-      "version": "1.46.0",
-      "resolved": "https://registry.npmjs.org/tabler-icons-react/-/tabler-icons-react-1.46.0.tgz",
-      "integrity": "sha512-tQt686DPfGRXxdCMg63gEO7KP1mcmx0JvzgAq5HKkD3ts9HSL9AAaGAGpa/IJdD0tLaoviegdpv6MOp8DsAr9Q==",
-      "peerDependencies": {
-        "react": ">= 16.8.0"
-      }
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -36382,6 +36382,12 @@
         "html-parse-stringify": "^3.0.1"
       }
     },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -39457,12 +39463,6 @@
         }
       }
     },
-    "tabler-icons-react": {
-      "version": "1.46.0",
-      "resolved": "https://registry.npmjs.org/tabler-icons-react/-/tabler-icons-react-1.46.0.tgz",
-      "integrity": "sha512-tQt686DPfGRXxdCMg63gEO7KP1mcmx0JvzgAq5HKkD3ts9HSL9AAaGAGpa/IJdD0tLaoviegdpv6MOp8DsAr9Q==",
-      "requires": {}
-    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

package.json

@@ -270,6 +270,7 @@
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-i18next": "^11.16.7",
+    "react-icons": "^4.4.0",
     "react-lazy-load-image-component": "^1.5.4",
     "react-player": "^2.10.0",
     "react-query": "^4.0.0-beta.23",
@@ -282,7 +283,6 @@
     "react-window": "^1.8.7",
     "react-window-infinite-loader": "^1.0.8",
     "styled-components": "^5.3.5",
-    "tabler-icons-react": "^1.46.0",
     "zustand": "^4.0.0-rc.1"
   },
   "resolutions": {

src/renderer/features/auth/queries/login.ts

@@ -1,7 +1,8 @@
 import md5 from 'md5';
 import { nanoid } from 'nanoid';
-import { useMutation } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 import { authApi } from 'renderer/api/authApi';
+import { queryKeys } from 'renderer/api/queryKeys';
 import { useAuthStore } from 'renderer/store';
 
 export const useLogin = (
@@ -36,3 +37,12 @@ export const useLogin = (
     },
   });
 };
+
+export const usePingServer = (server: string) => {
+  return useQuery({
+    enabled: !!server,
+    queryFn: () => authApi.ping(server),
+    queryKey: queryKeys.ping(server),
+    retry: false,
+  });
+};

src/renderer/features/auth/routes/LoginRoute.tsx

@@ -10,11 +10,10 @@ import {
 } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'react-i18next';
+import { RiCheckboxCircleFill } from 'react-icons/ri';
 import { useSearchParams } from 'react-router-dom';
-import { AlertCircle, CircleCheck } from 'tabler-icons-react';
 import { normalizeServerUrl } from 'renderer/utils';
-import { useLogin } from '../queries/useLogin';
+import { useLogin, usePingServer } from '../queries/login';
-import { usePingServer } from '../queries/usePingServer';
 import styles from './LoginRoute.module.scss';
 
 export const LoginRoute = () => {
@@ -66,7 +65,7 @@ export const LoginRoute = () => {
               isCheckingServer ? (
                 <Loader size="xs" />
               ) : isValidServer ? (
-                <CircleCheck />
+                <RiCheckboxCircleFill size={20} />
               ) : null
             }
             value={server}
@@ -105,7 +104,7 @@ export const LoginRoute = () => {
             Login
           </Button>
           {isError && (
-            <Alert color="red" icon={<AlertCircle />} variant="outline">
+            <Alert color="red" variant="outline">
               {t('Invalid username or password.')}
             </Alert>
           )}

src/renderer/features/library/components/ViewTypeButton.tsx

@@ -1,6 +1,6 @@
 import { Dispatch } from 'react';
 import { ActionIcon, Menu, MenuProps } from '@mantine/core';
-import { LayoutGrid, LayoutList, Table } from 'tabler-icons-react';
+import { RiLayoutGridFill, RiLayoutTopFill } from 'react-icons/ri';
 
 export enum ViewType {
   Detail = 'detail',
@@ -23,30 +23,18 @@ export const ViewTypeButton = ({
     <Menu {...menuProps}>
       <Menu.Target>
         <ActionIcon variant="transparent">
-          {type === ViewType.Grid ? (
+          {type === ViewType.Grid ? <RiLayoutGridFill /> : <RiLayoutTopFill />}
-            <LayoutGrid />
-          ) : type === ViewType.Detail ? (
-            <LayoutList />
-          ) : (
-            <Table />
-          )}
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item
-          icon={<LayoutGrid size={14} />}
+          icon={<RiLayoutGridFill />}
           onClick={() => handler(ViewType.Grid)}
         >
           Grid
         </Menu.Item>
         <Menu.Item
-          icon={<LayoutList size={14} />}
+          icon={<RiLayoutTopFill />}
-          onClick={() => handler(ViewType.Detail)}
-        >
-          Detail
-        </Menu.Item>
-        <Menu.Item
-          icon={<Table size={14} />}
           onClick={() => handler(ViewType.Table)}
         >
           Table

src/renderer/features/library/routes/LibraryAlbumsRoute.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { Button, Group, Menu } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { CaretDown } from 'tabler-icons-react';
 import i18n from 'i18n/i18n';
 import { albumsApi } from 'renderer/api/albumsApi';
 import { VirtualInfiniteGrid } from 'renderer/components/virtual-grid/VirtualInfiniteGrid';
@@ -66,37 +65,29 @@ export const LibraryAlbumsRoute = () => {
             </Menu.Target>
             <Menu.Dropdown>
               <Menu.Item
-                rightSection={<CaretDown size={12} />}
                 onClick={() => setFilters({ sortBy: AlbumSort.TITLE })}
               >
                 Title
               </Menu.Item>
-              <Menu.Item
+              <Menu.Item onClick={() => setFilters({ sortBy: AlbumSort.YEAR })}>
-                rightSection={<CaretDown size={12} />}
-                onClick={() => setFilters({ sortBy: AlbumSort.YEAR })}
-              >
                 Year
               </Menu.Item>
               <Menu.Item
-                rightSection={<CaretDown size={12} />}
                 onClick={() => setFilters({ sortBy: AlbumSort.RATING })}
               >
                 Rating
               </Menu.Item>
               <Menu.Item
-                rightSection={<CaretDown size={12} />}
                 onClick={() => setFilters({ sortBy: AlbumSort.DATE_RELEASED })}
               >
                 Date Released
               </Menu.Item>
               <Menu.Item
-                rightSection={<CaretDown size={12} />}
                 onClick={() => setFilters({ sortBy: AlbumSort.DATE_ADDED })}
               >
                 Date Added
               </Menu.Item>
               <Menu.Item
-                rightSection={<CaretDown size={12} />}
                 onClick={() =>
                   setFilters({ sortBy: AlbumSort.DATE_ADDED_REMOTE })
                 }

src/renderer/features/player/components/CenterControls.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useMemo, useState } from 'react';
 import format from 'format-duration';
 import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
 import {
-  PlayerPause,
+  RiPlayFill,
-  PlayerPlay,
+  RiSkipForwardFill,
-  PlayerSkipBack,
+  RiSkipBackFill,
-  PlayerSkipForward,
+  RiSpeedFill,
-  PlayerTrackNext,
+  RiRewindFill,
-  PlayerTrackPrev,
+  RiPauseFill,
-} from 'tabler-icons-react';
+} from 'react-icons/ri';
+import styled from 'styled-components';
 import { Text } from 'renderer/components';
 import { usePlayerStore } from 'renderer/store';
 import { Font } from 'renderer/styles';
@@ -106,13 +106,13 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
       <ControlsContainer onScroll={(e) => console.log(e)}>
         <ButtonsContainer>
           <PlayerButton
-            icon={<PlayerSkipBack size={15} />}
+            icon={<RiSkipBackFill size={15} />}
             tooltip={{ label: `${t('player.prev')}` }}
             variant="secondary"
             onClick={handlePrevTrack}
           />
           <PlayerButton
-            icon={<PlayerTrackPrev size={15} />}
+            icon={<RiRewindFill size={15} />}
             tooltip={{ label: `${t('player.skipBack')}` }}
             variant="secondary"
             onClick={handleSkipBackward}
@@ -120,9 +120,9 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
           <PlayerButton
             icon={
               status === PlayerStatus.Paused ? (
-                <PlayerPlay size={20} />
+                <RiPlayFill size={20} />
               ) : (
-                <PlayerPause size={20} />
+                <RiPauseFill size={20} />
               )
             }
             tooltip={{
@@ -135,13 +135,13 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             onClick={handlePlayPause}
           />
           <PlayerButton
-            icon={<PlayerTrackNext size={15} />}
+            icon={<RiSpeedFill size={15} />}
             tooltip={{ label: `${t('player.skipForward')}` }}
             variant="secondary"
             onClick={handleSkipForward}
           />
           <PlayerButton
-            icon={<PlayerSkipForward size={15} />}
+            icon={<RiSkipForwardFill size={15} />}
             tooltip={{ label: `${t('player.next')}` }}
             variant="secondary"
             onClick={handleNextTrack}

src/renderer/features/player/components/RightControls.tsx

@@ -1,5 +1,5 @@
+import { RiVolumeUpFill, RiVolumeMuteFill } from 'react-icons/ri';
 import styled from 'styled-components';
-import { Volume2, Volume3 } from 'tabler-icons-react';
 import { IconButton } from 'renderer/components';
 import { usePlayerStore } from 'renderer/store';
 import { useRightControls } from '../hooks/useRightControls';
@@ -42,9 +42,9 @@ export const RightControls = () => {
           <IconButton
             icon={
               muted ? (
-                <Volume3 size={20} strokeWidth={1.5} />
+                <RiVolumeMuteFill size={20} />
               ) : (
-                <Volume2 size={20} strokeWidth={1.5} />
+                <RiVolumeUpFill size={20} />
               )
             }
             size={20}

src/renderer/features/servers/components/ServerList.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { EditCircle } from 'tabler-icons-react';
 import { ServerResponse } from 'renderer/api/types';
 import { IconButton } from 'renderer/components';
 import { useServers } from '../queries/useServers';
@@ -61,10 +60,7 @@ export const ServerList = () => {
                 {server.name}
                 <Text>Hello</Text>
               </div>
-              <IconButton
+              <IconButton onClick={() => editServerHandlers.toggle()}>
-                icon={<EditCircle />}
-                onClick={() => editServerHandlers.toggle()}
-              >
                 Edit
               </IconButton>
             </div>

src/renderer/features/sidebar/components/Sidebar.tsx

@@ -1,43 +1,35 @@
+import {
+  RiDashboardFill,
+  RiFileList2Fill,
+  RiSearch2Fill,
+} from 'react-icons/ri';
 import styled from 'styled-components';
-import { Home, Notebook, Search } from 'tabler-icons-react';
-import { UserMenu } from 'renderer/features/user-menu';
 import { AppRoute } from 'renderer/router/utils/routes';
 import { ListItem } from './ListItem';
 
-const SidebarContainer = styled.div`
-  width: 100%;
-  height: 100%;
-`;
-
-const ItemGroup = styled.ul``;
-
-const Item = styled.li``;
-
 const StyledSidebar = styled.div``;
 
 export const Sidebar = () => {
-
   return (
     <StyledSidebar>
-      <ListItem icon={<Home />}>
+      <ListItem>
         <ListItem.Link to={AppRoute.HOME}>
-          <Home />
+          <RiDashboardFill size={20} />
           Home
         </ListItem.Link>
       </ListItem>
       <ListItem>
         <ListItem.Link to={AppRoute.SEARCH}>
-          <Search />
+          <RiSearch2Fill size={20} />
           Search
         </ListItem.Link>
       </ListItem>
       <ListItem>
         <ListItem.Link to={AppRoute.LIBRARY}>
-          <Notebook />
+          <RiFileList2Fill size={20} />
           Your Library
         </ListItem.Link>
       </ListItem>
-      <UserMenu />
     </StyledSidebar>
   );
 };

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import { Group } from '@mantine/core';
+import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import { ChevronLeft, ChevronRight } from 'tabler-icons-react';
 import { IconButton } from 'renderer/components';
 import { WindowControls } from 'renderer/features/window-controls';
 
@@ -47,12 +47,12 @@ export const Titlebar = ({ children }: TitlebarProps) => {
         <Left>
           <Group spacing="xs">
             <IconButton
-              icon={<ChevronLeft size={25} strokeWidth={1.5} />}
+              icon={<RiArrowLeftSLine size={25} />}
               size={25}
               onClick={() => navigate(-1)}
             />
             <IconButton
-              icon={<ChevronRight size={25} strokeWidth={1.5} />}
+              icon={<RiArrowRightSLine size={25} />}
               size={25}
               onClick={() => navigate(1)}
             />

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

@@ -1,7 +1,7 @@
 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 { Logout, Server, Settings } from 'tabler-icons-react';
 import { AddServerModal } from 'renderer/features/servers';
 import { useAuthStore } from 'renderer/store';
 
@@ -18,25 +18,24 @@ export const UserMenu = () => {
 
   return (
     <>
-      <Menu
+      <Menu position="bottom">
-        control={
+        <Menu.Target>
           <Button radius="lg" size="xs" variant="default">
             User
           </Button>
-        }
+        </Menu.Target>
-        position="bottom"
+        <Menu.Dropdown>
-        size="md"
-      >
           <Menu.Item
-          icon={<Server size={20} />}
+            icon={<RiServerFill />}
             onClick={() => addServerHandlers.open()}
           >
             Servers
           </Menu.Item>
-        <Menu.Item icon={<Settings size={20} />}>Settings</Menu.Item>
+          <Menu.Item icon={<RiSettings3Fill />}>Settings</Menu.Item>
-        <Menu.Item icon={<Logout size={20} />} onClick={handleLogout}>
+          <Menu.Item icon={<RiLogoutBoxLine />} onClick={handleLogout}>
             Logout
           </Menu.Item>
+        </Menu.Dropdown>
       </Menu>
       <AddServerModal
         opened={addServerModal}

src/renderer/features/user-menu/UserMenu.module.scss

@@ -1,9 +0,0 @@
-.root {
-  position: absolute;
-  top: 10px;
-  right: 150px;
-}
-
-.icon {
-  margin-right: 1rem;
-}

src/renderer/features/user-menu/UserMenu.tsx

@@ -1,49 +0,0 @@
-import { Button, Menu } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import { useNavigate } from 'react-router';
-import { Logout, Server, Settings } from 'tabler-icons-react';
-import { useAuthStore } from 'renderer/store';
-import { AddServerModal } from '../servers/components/AddServerModal';
-import styles from './UserMenu.module.scss';
-
-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
-        classNames={{ itemIcon: styles.icon, root: styles.root }}
-        control={
-          <Button radius="lg" size="xs" variant="default">
-            User
-          </Button>
-        }
-        position="bottom"
-        size="md"
-      >
-        <Menu.Item
-          icon={<Server size={20} />}
-          onClick={() => addServerHandlers.open()}
-        >
-          Servers
-        </Menu.Item>
-        <Menu.Item icon={<Settings size={20} />}>Settings</Menu.Item>
-        <Menu.Item icon={<Logout size={20} />} onClick={handleLogout}>
-          Logout
-        </Menu.Item>
-      </Menu>
-      <AddServerModal
-        opened={addServerModal}
-        onClose={() => addServerHandlers.close()}
-      />
-    </>
-  );
-};