vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +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 { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
import { AppRoute } from '/@/renderer/router/routes';
import {
SidebarItemType,
useCollections,
@@ -141,15 +142,13 @@ export const CollapsedSidebar = () => {
component={Link}
key={collection.id}
leftSection={
<Icon
color="muted"
icon={
<SidebarIcon
route={
collection.type ===
LibraryItem.ALBUM
? 'itemAlbum'
: 'itemSong'
? AppRoute.LIBRARY_ALBUMS
: AppRoute.LIBRARY_SONGS
}
size="sm"
/>
}
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 { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
import { AppRoute } from '/@/renderer/router/routes';
import { useCollections, useSettingsStoreActions } from '/@/renderer/store';
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 { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { Popover } from '/@/shared/components/popover/popover';
import { Stack } from '/@/shared/components/stack/stack';
import { TextInput } from '/@/shared/components/text-input/text-input';
@@ -93,13 +93,15 @@ const CollectionRow = ({
<Popover.Target>
<div className={clsx(styles.row, { [styles.rowActive]: isActive })}>
<Link className={styles.rowLink} to={to}>
<Group className={styles.rowContent}>
<Icon
color={isActive ? 'primary' : 'muted'}
icon={
collection.type === LibraryItem.ALBUM ? 'itemAlbum' : 'itemSong'
<Group className={styles.rowContent} wrap="nowrap">
<SidebarIcon
active={isActive}
route={
collection.type === LibraryItem.ALBUM
? AppRoute.LIBRARY_ALBUMS
: AppRoute.LIBRARY_SONGS
}
size="md"
size="1rem"
/>
<Text className={styles.name} fw={500} size="md">
{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';
import { generatePath, useLocation } from 'react-router';
import styles from './sidebar-icon.module.css';
import { AppRoute } from '/@/renderer/router/routes';
import { LibraryItem } from '/@/shared/types/domain-types';
@@ -38,48 +40,51 @@ interface SidebarIconProps {
export const SidebarIcon = ({ active, route, size }: SidebarIconProps) => {
const location = useLocation();
const isActive = active !== undefined ? active : location.pathname === route;
switch (route) {
case AppRoute.HOME:
if (isActive) return <RiHome6Fill size={size} />;
return <RiHome6Line size={size} />;
case AppRoute.LIBRARY_ALBUM_ARTISTS:
if (isActive) return <RiUserVoiceFill size={size} />;
return <RiUserVoiceLine size={size} />;
case AppRoute.LIBRARY_ALBUMS:
if (isActive) return <RiAlbumFill size={size} />;
return <RiAlbumLine size={size} />;
case AppRoute.LIBRARY_ARTISTS:
if (isActive) return <RiUserVoiceFill size={size} />;
return <RiUserVoiceLine size={size} />;
case AppRoute.LIBRARY_FOLDERS:
if (isActive) return <RiFolder3Fill size={size} />;
return <RiFolder3Line size={size} />;
case AppRoute.LIBRARY_GENRES:
if (isActive) return <RiFlag2Fill size={size} />;
return <RiFlag2Line size={size} />;
case AppRoute.LIBRARY_SONGS:
if (isActive) return <RiMusic2Fill size={size} />;
return <RiMusic2Line size={size} />;
case AppRoute.NOW_PLAYING:
if (isActive) return <RiPlayFill size={size} />;
return <RiPlayLine size={size} />;
case AppRoute.PLAYLISTS:
if (isActive) return <RiPlayListFill size={size} />;
return <RiPlayListLine size={size} />;
case AppRoute.RADIO:
if (isActive) return <RiRadioFill size={size} />;
return <RiRadioLine size={size} />;
case AppRoute.SETTINGS:
if (isActive) return <RiSettings2Fill size={size} />;
return <RiSettings2Line size={size} />;
case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }):
if (isActive) return <RiSearchFill size={size} />;
return <RiSearchLine size={size} />;
default:
if (route.startsWith(AppRoute.FAVORITES)) {
if (isActive) return <RiHeartFill size={size} />;
return <RiHeartLine size={size} />;
}
return <RiHome6Line size={size} />;
}
const renderIcon = () => {
switch (route) {
case AppRoute.HOME:
if (isActive) return <RiHome6Fill size={size} />;
return <RiHome6Line size={size} />;
case AppRoute.LIBRARY_ALBUM_ARTISTS:
if (isActive) return <RiUserVoiceFill size={size} />;
return <RiUserVoiceLine size={size} />;
case AppRoute.LIBRARY_ALBUMS:
if (isActive) return <RiAlbumFill size={size} />;
return <RiAlbumLine size={size} />;
case AppRoute.LIBRARY_ARTISTS:
if (isActive) return <RiUserVoiceFill size={size} />;
return <RiUserVoiceLine size={size} />;
case AppRoute.LIBRARY_FOLDERS:
if (isActive) return <RiFolder3Fill size={size} />;
return <RiFolder3Line size={size} />;
case AppRoute.LIBRARY_GENRES:
if (isActive) return <RiFlag2Fill size={size} />;
return <RiFlag2Line size={size} />;
case AppRoute.LIBRARY_SONGS:
if (isActive) return <RiMusic2Fill size={size} />;
return <RiMusic2Line size={size} />;
case AppRoute.NOW_PLAYING:
if (isActive) return <RiPlayFill size={size} />;
return <RiPlayLine size={size} />;
case AppRoute.PLAYLISTS:
if (isActive) return <RiPlayListFill size={size} />;
return <RiPlayListLine size={size} />;
case AppRoute.RADIO:
if (isActive) return <RiRadioFill size={size} />;
return <RiRadioLine size={size} />;
case AppRoute.SETTINGS:
if (isActive) return <RiSettings2Fill size={size} />;
return <RiSettings2Line size={size} />;
case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }):
if (isActive) return <RiSearchFill size={size} />;
return <RiSearchLine size={size} />;
default:
if (route.startsWith(AppRoute.FAVORITES)) {
if (isActive) return <RiHeartFill size={size} />;
return <RiHeartLine size={size} />;
}
return <RiHome6Line size={size} />;
}
};
return <span className={styles.wrapper}>{renderIcon()}</span>;
};