diff --git a/packages/renderer/src/features/albums/components/album-list-header.tsx b/packages/renderer/src/features/albums/components/album-list-header.tsx index 03b40b605..f05adc4ff 100644 --- a/packages/renderer/src/features/albums/components/album-list-header.tsx +++ b/packages/renderer/src/features/albums/components/album-list-header.tsx @@ -1,6 +1,7 @@ import type { MouseEvent } from 'react'; import { useCallback } from 'react'; import { Group, Slider } from '@mantine/core'; +import { motion } from 'framer-motion'; import throttle from 'lodash/throttle'; import { RiArrowDownSLine } from 'react-icons/ri'; import { JFAlbumListSort } from '/@/api/jellyfin.types'; @@ -8,7 +9,12 @@ import { NDAlbumListSort } from '/@/api/navidrome.types'; import type { AlbumListSort } from '/@/api/types'; import { SortOrder } from '/@/api/types'; import { Button, DropdownMenu } from '/@/components'; -import { useCurrentServer, useAppStoreActions, useAlbumRouteStore } from '/@/store'; +import { + useCurrentServer, + useAppStoreActions, + useAlbumRouteStore, + useSidebarRightExpanded, +} from '/@/store'; import { CardDisplayType } from '/@/types'; import styled from 'styled-components'; @@ -42,8 +48,10 @@ const ORDER = [ { name: 'Descending', value: SortOrder.DESC }, ]; -const AlbumListHeaderContainer = styled.div` - padding: 1rem 170px 1rem 1rem; +const AlbumListHeaderContainer = styled(motion.div)<{ $padRight?: boolean }>` + padding: 0.8rem 1rem; + + padding: ${(props) => (props.$padRight ? '0.8rem 1rem' : '0.8rem 170px 0.8rem 1rem')}; button { -webkit-app-region: no-drag; @@ -61,6 +69,8 @@ export const AlbumListHeader = () => { )?.name : 'Unknown'; + const isRightSidebarExpanded = useSidebarRightExpanded(); + const sortOrderLabel = ORDER.find((s) => s.value === filters.sortOrder)?.name; const setSize = throttle( @@ -140,7 +150,7 @@ export const AlbumListHeader = () => { ); return ( - + { @@ -217,8 +227,8 @@ export const AlbumListHeader = () => { @@ -240,10 +250,10 @@ export const AlbumListHeader = () => { {/* diff --git a/packages/renderer/src/store/app.store.ts b/packages/renderer/src/store/app.store.ts index 4af711687..10dde1464 100644 --- a/packages/renderer/src/store/app.store.ts +++ b/packages/renderer/src/store/app.store.ts @@ -130,7 +130,6 @@ export const useAppStore = create()( }, isReorderingQueue: false, platform: Platform.WINDOWS, - sidebar: { expanded: [], image: false, @@ -156,3 +155,5 @@ export const useAppStoreActions = () => useAppStore((state) => state.actions); export const useAlbumRouteStore = () => useAppStore((state) => state.albums); export const useSidebarStore = () => useAppStore((state) => state.sidebar); + +export const useSidebarRightExpanded = () => useAppStore((state) => state.sidebar.rightExpanded);