Refactor layout components

src/renderer/features/albums/components/album-list-header.tsx

@@ -9,14 +9,8 @@ import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { AlbumListQuery, LibraryItem } from '/@/renderer/api/types';
-import {
+import { PageHeader, SearchInput, VirtualInfiniteGridRef } from '/@/renderer/components';
-  PageHeader,
+import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
-  Paper,
-  SearchInput,
-  SpinnerIcon,
-  VirtualInfiniteGridRef,
-} from '/@/renderer/components';
-import { LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
 import {
   AlbumListFilter,
@@ -209,14 +203,9 @@ export const AlbumListHeader = ({
           <LibraryHeaderBar>
             <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
             <LibraryHeaderBar.Title>{title || 'Albums'}</LibraryHeaderBar.Title>
-            <Paper
+            <LibraryHeaderBar.Badge isLoading={itemCount === null || itemCount === undefined}>
-              fw="600"
+              {itemCount}
-              px="1rem"
+            </LibraryHeaderBar.Badge>
-              py="0.3rem"
-              radius="sm"
-            >
-              {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
-            </Paper>
           </LibraryHeaderBar>
           <Group>
             <SearchInput
@@ -227,14 +216,14 @@ export const AlbumListHeader = ({
           </Group>
         </Flex>
       </PageHeader>
-      <Paper p="1rem">
+      <FilterBar>
         <AlbumListHeaderFilters
           customFilters={customFilters}
           gridRef={gridRef}
           itemCount={itemCount}
           tableRef={tableRef}
         />
-      </Paper>
+      </FilterBar>
     </Stack>
   );
 };

src/renderer/features/artists/components/album-artist-list-header.tsx

@@ -7,13 +7,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import debounce from 'lodash/debounce';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import {
+import { PageHeader, SearchInput, VirtualInfiniteGridRef } from '/@/renderer/components';
-  PageHeader,
-  Paper,
-  SearchInput,
-  SpinnerIcon,
-  VirtualInfiniteGridRef,
-} from '/@/renderer/components';
 import { LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
 import {
@@ -25,6 +19,7 @@ import {
 import { ListDisplayType } from '/@/renderer/types';
 import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters';
 import { useAlbumArtistListContext } from '/@/renderer/features/artists/context/album-artist-list-context';
+import { FilterBar } from '../../shared/components/filter-bar';
 
 interface AlbumArtistListHeaderProps {
   gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -154,14 +149,9 @@ export const AlbumArtistListHeader = ({
         >
           <LibraryHeaderBar>
             <LibraryHeaderBar.Title>Album Artists</LibraryHeaderBar.Title>
-            <Paper
+            <LibraryHeaderBar.Badge isLoading={itemCount === null || itemCount === undefined}>
-              fw="600"
+              {itemCount}
-              px="1rem"
+            </LibraryHeaderBar.Badge>
-              py="0.3rem"
-              radius="sm"
-            >
-              {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
-            </Paper>
           </LibraryHeaderBar>
           <Group>
             <SearchInput
@@ -172,12 +162,12 @@ export const AlbumArtistListHeader = ({
           </Group>
         </Flex>
       </PageHeader>
-      <Paper p="1rem">
+      <FilterBar>
         <AlbumArtistListHeaderFilters
           gridRef={gridRef}
           tableRef={tableRef}
         />
-      </Paper>
+      </FilterBar>
     </Stack>
   );
 };

src/renderer/features/shared/components/filter-bar.tsx

@@ -0,0 +1,13 @@
+import { PaperProps } from '@mantine/core';
+import styled from 'styled-components';
+import { Paper } from '/@/renderer/components';
+
+const StyledFilterBar = styled(Paper)`
+  z-index: 1;
+  padding: 1rem;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 65%);
+`;
+
+export const FilterBar = ({ children, ...props }: PaperProps) => {
+  return <StyledFilterBar {...props}>{children}</StyledFilterBar>;
+};

src/renderer/features/shared/components/library-header-bar.tsx

@@ -1,25 +1,25 @@
 import { ReactNode } from 'react';
-import { Group, Box } from '@mantine/core';
+import { Box } from '@mantine/core';
-import { TextTitle } from '/@/renderer/components';
+import { Paper, PaperProps, SpinnerIcon, TextTitle } from '/@/renderer/components';
 import { PlayButton as PlayBtn } from '/@/renderer/features/shared/components/play-button';
+import styled from 'styled-components';
 
 interface LibraryHeaderBarProps {
   children: ReactNode;
 }
 
+const HeaderContainer = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 1rem;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 1rem;
+`;
+
 export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
-  return (
+  return <HeaderContainer>{children}</HeaderContainer>;
-    <Group
-      noWrap
-      align="center"
-      h="100%"
-      px="1rem"
-      spacing="md"
-      w="100%"
-    >
-      {children}
-    </Group>
-  );
 };
 
 interface TitleProps {
@@ -54,5 +54,20 @@ const PlayButton = ({ onClick }: PlayButtonProps) => {
   );
 };
 
+const Badge = styled(Paper)`
+  padding: 0.3rem 1rem;
+  font-weight: 600;
+  border-radius: 0.3rem;
+`;
+
+interface HeaderBadgeProps extends PaperProps {
+  isLoading?: boolean;
+}
+
+const HeaderBadge = ({ children, isLoading, ...props }: HeaderBadgeProps) => {
+  return <Badge {...props}>{isLoading ? <SpinnerIcon /> : children}</Badge>;
+};
+
 LibraryHeaderBar.Title = Title;
 LibraryHeaderBar.PlayButton = PlayButton;
+LibraryHeaderBar.Badge = HeaderBadge;

src/renderer/features/shared/index.ts

@@ -7,3 +7,4 @@ export * from './components/library-header-bar';
 export * from './mutations/create-favorite-mutation';
 export * from './mutations/delete-favorite-mutation';
 export * from './mutations/update-rating-mutation';
+export * from './components/filter-bar';

src/renderer/features/songs/components/song-list-header.tsx

@@ -6,9 +6,9 @@ import { ChangeEvent, MutableRefObject, useCallback } from 'react';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { LibraryItem, SongListQuery } from '/@/renderer/api/types';
-import { PageHeader, Paper, SearchInput, SpinnerIcon } from '/@/renderer/components';
+import { PageHeader, SearchInput } from '/@/renderer/components';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { LibraryHeaderBar } from '/@/renderer/features/shared';
+import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
 import { useSongListContext } from '/@/renderer/features/songs/context/song-list-context';
 import { useContainerQuery } from '/@/renderer/hooks';
@@ -119,14 +119,9 @@ export const SongListHeader = ({
           <LibraryHeaderBar>
             <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
             <LibraryHeaderBar.Title>{title || 'Tracks'}</LibraryHeaderBar.Title>
-            <Paper
+            <LibraryHeaderBar.Badge isLoading={itemCount === null || itemCount === undefined}>
-              fw="600"
+              {itemCount}
-              px="1rem"
+            </LibraryHeaderBar.Badge>
-              py="0.3rem"
-              radius="sm"
-            >
-              {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
-            </Paper>
           </LibraryHeaderBar>
           <Group>
             <SearchInput
@@ -137,13 +132,13 @@ export const SongListHeader = ({
           </Group>
         </Flex>
       </PageHeader>
-      <Paper p="1rem">
+      <FilterBar>
         <SongListHeaderFilters
           customFilters={customFilters}
           itemCount={itemCount}
           tableRef={tableRef}
         />
-      </Paper>
+      </FilterBar>
     </Stack>
   );
 };

src/renderer/styles/ag-grid.scss

@@ -10,6 +10,10 @@
   transition: position 0.2s ease-in-out;
 }
 
+.ag-header {
+  z-index: 5;
+}
+
 .window-frame {
   top: 95px;
 }