diff --git a/package-lock.json b/package-lock.json index d26f521e2..717748233 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5264dec28..80925a417 100644 --- a/package.json +++ b/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": { diff --git a/src/renderer/features/auth/queries/useLogin.ts b/src/renderer/features/auth/queries/login.ts similarity index 74% rename from src/renderer/features/auth/queries/useLogin.ts rename to src/renderer/features/auth/queries/login.ts index b0eda13cc..fd30e499f 100644 --- a/src/renderer/features/auth/queries/useLogin.ts +++ b/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, + }); +}; diff --git a/src/renderer/features/auth/routes/LoginRoute.tsx b/src/renderer/features/auth/routes/LoginRoute.tsx index 556c955d6..5befd229e 100644 --- a/src/renderer/features/auth/routes/LoginRoute.tsx +++ b/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 { usePingServer } from '../queries/usePingServer'; +import { useLogin, usePingServer } from '../queries/login'; import styles from './LoginRoute.module.scss'; export const LoginRoute = () => { @@ -66,7 +65,7 @@ export const LoginRoute = () => { isCheckingServer ? ( ) : isValidServer ? ( - + ) : null } value={server} @@ -105,7 +104,7 @@ export const LoginRoute = () => { Login {isError && ( - } variant="outline"> + {t('Invalid username or password.')} )} diff --git a/src/renderer/features/library/components/ViewTypeButton.tsx b/src/renderer/features/library/components/ViewTypeButton.tsx index 511cb3d6c..8ccf205dc 100644 --- a/src/renderer/features/library/components/ViewTypeButton.tsx +++ b/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 = ({ - {type === ViewType.Grid ? ( - - ) : type === ViewType.Detail ? ( - - ) : ( - - )} + {type === ViewType.Grid ? : } } + icon={} onClick={() => handler(ViewType.Grid)} > Grid } - onClick={() => handler(ViewType.Detail)} - > - Detail - - } + icon={} onClick={() => handler(ViewType.Table)} > Table diff --git a/src/renderer/features/library/routes/LibraryAlbumsRoute.tsx b/src/renderer/features/library/routes/LibraryAlbumsRoute.tsx index c00b82339..effe2fe93 100644 --- a/src/renderer/features/library/routes/LibraryAlbumsRoute.tsx +++ b/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 = () => { } onClick={() => setFilters({ sortBy: AlbumSort.TITLE })} > Title - } - onClick={() => setFilters({ sortBy: AlbumSort.YEAR })} - > + setFilters({ sortBy: AlbumSort.YEAR })}> Year } onClick={() => setFilters({ sortBy: AlbumSort.RATING })} > Rating } onClick={() => setFilters({ sortBy: AlbumSort.DATE_RELEASED })} > Date Released } onClick={() => setFilters({ sortBy: AlbumSort.DATE_ADDED })} > Date Added } onClick={() => setFilters({ sortBy: AlbumSort.DATE_ADDED_REMOTE }) } diff --git a/src/renderer/features/player/components/CenterControls.tsx b/src/renderer/features/player/components/CenterControls.tsx index d433441ac..aa4c7752f 100644 --- a/src/renderer/features/player/components/CenterControls.tsx +++ b/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, - PlayerPlay, - PlayerSkipBack, - PlayerSkipForward, - PlayerTrackNext, - PlayerTrackPrev, -} from 'tabler-icons-react'; + RiPlayFill, + RiSkipForwardFill, + RiSkipBackFill, + RiSpeedFill, + RiRewindFill, + RiPauseFill, +} 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) => { console.log(e)}> } + icon={} tooltip={{ label: `${t('player.prev')}` }} variant="secondary" onClick={handlePrevTrack} /> } + icon={} tooltip={{ label: `${t('player.skipBack')}` }} variant="secondary" onClick={handleSkipBackward} @@ -120,9 +120,9 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => { + ) : ( - + ) } tooltip={{ @@ -135,13 +135,13 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => { onClick={handlePlayPause} /> } + icon={} tooltip={{ label: `${t('player.skipForward')}` }} variant="secondary" onClick={handleSkipForward} /> } + icon={} tooltip={{ label: `${t('player.next')}` }} variant="secondary" onClick={handleNextTrack} diff --git a/src/renderer/features/player/components/RightControls.tsx b/src/renderer/features/player/components/RightControls.tsx index 0393ac5d6..de84104be 100644 --- a/src/renderer/features/player/components/RightControls.tsx +++ b/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 = () => { + ) : ( - + ) } size={20} diff --git a/src/renderer/features/servers/components/ServerList.tsx b/src/renderer/features/servers/components/ServerList.tsx index 84b844833..3f51494f7 100644 --- a/src/renderer/features/servers/components/ServerList.tsx +++ b/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} Hello - } - onClick={() => editServerHandlers.toggle()} - > + editServerHandlers.toggle()}> Edit diff --git a/src/renderer/features/sidebar/components/Sidebar.tsx b/src/renderer/features/sidebar/components/Sidebar.tsx index 1f95d9ee9..fd4eea9df 100644 --- a/src/renderer/features/sidebar/components/Sidebar.tsx +++ b/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 ( - }> + - + Home - + Search - + Your Library - ); }; diff --git a/src/renderer/features/titlebar/components/Titlebar.tsx b/src/renderer/features/titlebar/components/Titlebar.tsx index f68b7e17d..24e843e24 100644 --- a/src/renderer/features/titlebar/components/Titlebar.tsx +++ b/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) => { } + icon={} size={25} onClick={() => navigate(-1)} /> } + icon={} size={25} onClick={() => navigate(1)} /> diff --git a/src/renderer/features/titlebar/components/UserMenu.tsx b/src/renderer/features/titlebar/components/UserMenu.tsx index fc9b69e45..edac394d7 100644 --- a/src/renderer/features/titlebar/components/UserMenu.tsx +++ b/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 ( <> - + - } - position="bottom" - size="md" - > - } - onClick={() => addServerHandlers.open()} - > - Servers - - }>Settings - } onClick={handleLogout}> - Logout - + + + } + onClick={() => addServerHandlers.open()} + > + Servers + + }>Settings + } onClick={handleLogout}> + Logout + + { - const navigate = useNavigate(); - const [addServerModal, addServerHandlers] = useDisclosure(false); - const logout = useAuthStore((state) => state.logout); - - const handleLogout = () => { - logout(); - localStorage.removeItem('authentication'); - navigate('/login'); - }; - - return ( - <> - - User - - } - position="bottom" - size="md" - > - } - onClick={() => addServerHandlers.open()} - > - Servers - - }>Settings - } onClick={handleLogout}> - Logout - - - addServerHandlers.close()} - /> - - ); -};