vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-09 20:29:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix icon and wrap on collection title

Browse Source
This commit is contained in:
jeffvli
2026-01-30 21:29:33 -08:00
parent 25ee57da1c
commit 6962a05c96
4 changed files with 67 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/sidebar/components/collapsed-sidebar.tsx
+5 -6
View File
@@ -15,6 +15,7 @@ import { ServerSelectorItems } from '/@/renderer/features/sidebar/components/ser
import { getCollectionTo } from '/@/renderer/features/sidebar/components/sidebar-collection-list'; import { getCollectionTo } from '/@/renderer/features/sidebar/components/sidebar-collection-list';
import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon'; import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu'; import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
import { AppRoute } from '/@/renderer/router/routes';
import { import {
SidebarItemType, SidebarItemType,
useCollections, useCollections,
@@ -141,15 +142,13 @@ export const CollapsedSidebar = () => {
component={Link} component={Link}
key={collection.id} key={collection.id}
leftSection={ leftSection={
<Icon <SidebarIcon
color="muted" route={
icon={
collection.type === collection.type ===
LibraryItem.ALBUM LibraryItem.ALBUM
? 'itemAlbum' ? AppRoute.LIBRARY_ALBUMS
: 'itemSong' : AppRoute.LIBRARY_SONGS
} }
size="sm"
/> />
} }
to={to} to={to}
src/renderer/features/sidebar/components/sidebar-collection-list.tsx
+9 -7
View File
@@ -5,6 +5,7 @@ import { Link, useLocation } from 'react-router';
import styles from './sidebar-collection-list.module.css'; import styles from './sidebar-collection-list.module.css';
import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { useCollections, useSettingsStoreActions } from '/@/renderer/store'; import { useCollections, useSettingsStoreActions } from '/@/renderer/store';
import { getFilterQueryStringFromSearchParams } from '/@/renderer/utils/query-params'; import { getFilterQueryStringFromSearchParams } from '/@/renderer/utils/query-params';
@@ -13,7 +14,6 @@ import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Button } from '/@/shared/components/button/button'; import { Button } from '/@/shared/components/button/button';
import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu'; import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
import { Group } from '/@/shared/components/group/group'; import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { Popover } from '/@/shared/components/popover/popover'; import { Popover } from '/@/shared/components/popover/popover';
import { Stack } from '/@/shared/components/stack/stack'; import { Stack } from '/@/shared/components/stack/stack';
import { TextInput } from '/@/shared/components/text-input/text-input'; import { TextInput } from '/@/shared/components/text-input/text-input';
@@ -93,13 +93,15 @@ const CollectionRow = ({
<Popover.Target> <Popover.Target>
<div className={clsx(styles.row, { [styles.rowActive]: isActive })}> <div className={clsx(styles.row, { [styles.rowActive]: isActive })}>
<Link className={styles.rowLink} to={to}> <Link className={styles.rowLink} to={to}>
<Group className={styles.rowContent}> <Group className={styles.rowContent} wrap="nowrap">
<Icon <SidebarIcon
color={isActive ? 'primary' : 'muted'} active={isActive}
icon={ route={
collection.type === LibraryItem.ALBUM ? 'itemAlbum' : 'itemSong' collection.type === LibraryItem.ALBUM
? AppRoute.LIBRARY_ALBUMS
: AppRoute.LIBRARY_SONGS
} }
size="md" size="1rem"
/> />
<Text className={styles.name} fw={500} size="md"> <Text className={styles.name} fw={500} size="md">
{collection.name} {collection.name}
src/renderer/features/sidebar/components/sidebar-icon.module.css
+4
View File
@@ -0,0 +1,4 @@
.wrapper {
display: inline-flex;
flex-shrink: 0;
}
src/renderer/features/sidebar/components/sidebar-icon.tsx
+49 -44
View File
@@ -26,6 +26,8 @@ import {
} from 'react-icons/ri'; } from 'react-icons/ri';
import { generatePath, useLocation } from 'react-router'; import { generatePath, useLocation } from 'react-router';
import styles from './sidebar-icon.module.css';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { LibraryItem } from '/@/shared/types/domain-types'; import { LibraryItem } from '/@/shared/types/domain-types';
@@ -38,48 +40,51 @@ interface SidebarIconProps {
export const SidebarIcon = ({ active, route, size }: SidebarIconProps) => { export const SidebarIcon = ({ active, route, size }: SidebarIconProps) => {
const location = useLocation(); const location = useLocation();
const isActive = active !== undefined ? active : location.pathname === route; const isActive = active !== undefined ? active : location.pathname === route;
switch (route) { const renderIcon = () => {
case AppRoute.HOME: switch (route) {
if (isActive) return <RiHome6Fill size={size} />; case AppRoute.HOME:
return <RiHome6Line size={size} />; if (isActive) return <RiHome6Fill size={size} />;
case AppRoute.LIBRARY_ALBUM_ARTISTS: return <RiHome6Line size={size} />;
if (isActive) return <RiUserVoiceFill size={size} />; case AppRoute.LIBRARY_ALBUM_ARTISTS:
return <RiUserVoiceLine size={size} />; if (isActive) return <RiUserVoiceFill size={size} />;
case AppRoute.LIBRARY_ALBUMS: return <RiUserVoiceLine size={size} />;
if (isActive) return <RiAlbumFill size={size} />; case AppRoute.LIBRARY_ALBUMS:
return <RiAlbumLine size={size} />; if (isActive) return <RiAlbumFill size={size} />;
case AppRoute.LIBRARY_ARTISTS: return <RiAlbumLine size={size} />;
if (isActive) return <RiUserVoiceFill size={size} />; case AppRoute.LIBRARY_ARTISTS:
return <RiUserVoiceLine size={size} />; if (isActive) return <RiUserVoiceFill size={size} />;
case AppRoute.LIBRARY_FOLDERS: return <RiUserVoiceLine size={size} />;
if (isActive) return <RiFolder3Fill size={size} />; case AppRoute.LIBRARY_FOLDERS:
return <RiFolder3Line size={size} />; if (isActive) return <RiFolder3Fill size={size} />;
case AppRoute.LIBRARY_GENRES: return <RiFolder3Line size={size} />;
if (isActive) return <RiFlag2Fill size={size} />; case AppRoute.LIBRARY_GENRES:
return <RiFlag2Line size={size} />; if (isActive) return <RiFlag2Fill size={size} />;
case AppRoute.LIBRARY_SONGS: return <RiFlag2Line size={size} />;
if (isActive) return <RiMusic2Fill size={size} />; case AppRoute.LIBRARY_SONGS:
return <RiMusic2Line size={size} />; if (isActive) return <RiMusic2Fill size={size} />;
case AppRoute.NOW_PLAYING: return <RiMusic2Line size={size} />;
if (isActive) return <RiPlayFill size={size} />; case AppRoute.NOW_PLAYING:
return <RiPlayLine size={size} />; if (isActive) return <RiPlayFill size={size} />;
case AppRoute.PLAYLISTS: return <RiPlayLine size={size} />;
if (isActive) return <RiPlayListFill size={size} />; case AppRoute.PLAYLISTS:
return <RiPlayListLine size={size} />; if (isActive) return <RiPlayListFill size={size} />;
case AppRoute.RADIO: return <RiPlayListLine size={size} />;
if (isActive) return <RiRadioFill size={size} />; case AppRoute.RADIO:
return <RiRadioLine size={size} />; if (isActive) return <RiRadioFill size={size} />;
case AppRoute.SETTINGS: return <RiRadioLine size={size} />;
if (isActive) return <RiSettings2Fill size={size} />; case AppRoute.SETTINGS:
return <RiSettings2Line size={size} />; if (isActive) return <RiSettings2Fill size={size} />;
case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }): return <RiSettings2Line size={size} />;
if (isActive) return <RiSearchFill size={size} />; case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }):
return <RiSearchLine size={size} />; if (isActive) return <RiSearchFill size={size} />;
default: return <RiSearchLine size={size} />;
if (route.startsWith(AppRoute.FAVORITES)) { default:
if (isActive) return <RiHeartFill size={size} />; if (route.startsWith(AppRoute.FAVORITES)) {
return <RiHeartLine size={size} />; if (isActive) return <RiHeartFill size={size} />;
} return <RiHeartLine size={size} />;
return <RiHome6Line size={size} />; }
} return <RiHome6Line size={size} />;
}
};
return <span className={styles.wrapper}>{renderIcon()}</span>;
}; };