add favorites list

src/renderer/features/sidebar/components/collapsed-sidebar.tsx

@@ -32,6 +32,7 @@ export const CollapsedSidebar = () => {
                 '\n',
             ),
             'Artists-all': t('page.sidebar.artists', { postProcess: 'titleCase' }),
+            Favorites: t('page.sidebar.favorites', { postProcess: 'titleCase' }),
             Folders: t('page.sidebar.folders', { postProcess: 'titleCase' }),
             Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
             Home: t('page.sidebar.home', { postProcess: 'titleCase' }),

src/renderer/features/sidebar/components/mobile-sidebar.tsx

@@ -28,6 +28,7 @@ export const MobileSidebar = () => {
             Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
             Artists: t('page.sidebar.albumArtists', { postProcess: 'titleCase' }),
             'Artists-all': t('page.sidebar.artists', { postProcess: 'titleCase' }),
+            Favorites: t('page.sidebar.favorites', { postProcess: 'titleCase' }),
             Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
             Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
             'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
@@ -105,7 +106,7 @@ export const MobileSidebar = () => {
                 </Accordion>
             </ScrollArea>
             <div className={styles.serverSelectorWrapper}>
-                <ServerSelector showImage={false} />
+                <ServerSelector />
             </div>
         </div>
     );

src/renderer/features/sidebar/components/sidebar-icon.tsx

@@ -5,6 +5,8 @@ import {
     RiFlag2Line,
     RiFolder3Fill,
     RiFolder3Line,
+    RiHeartFill,
+    RiHeartLine,
     RiHome6Fill,
     RiHome6Line,
     RiMusic2Fill,
@@ -67,6 +69,10 @@ export const SidebarIcon = ({ active, route, size }: SidebarIconProps) => {
             if (active) return <RiSearchFill size={size} />;
             return <RiSearchLine size={size} />;
         default:
+            if (route.startsWith(AppRoute.FAVORITES)) {
+                if (active) return <RiHeartFill size={size} />;
+                return <RiHeartLine size={size} />;
+            }
             return <RiHome6Line size={size} />;
     }
 };

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

@@ -46,6 +46,7 @@ export const Sidebar = () => {
             Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
             Artists: t('page.sidebar.albumArtists', { postProcess: 'titleCase' }),
             'Artists-all': t('page.sidebar.artists', { postProcess: 'titleCase' }),
+            Favorites: t('page.sidebar.favorites', { postProcess: 'titleCase' }),
             Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
             Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
             'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),