Refactor layout components

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 { TextTitle } from '/@/renderer/components';
+import { Box } from '@mantine/core';
+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 (
-    <Group
-      noWrap
-      align="center"
-      h="100%"
-      px="1rem"
-      spacing="md"
-      w="100%"
-    >
-      {children}
-    </Group>
-  );
+  return <HeaderContainer>{children}</HeaderContainer>;
 };
 
 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';