From 7cc3adedc48cbe139784241d37539c3ad1a63ffa Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 25 Dec 2022 02:29:00 -0800
Subject: [PATCH] Add responsive styles to header

---
 .../components/search-input/index.tsx         |  3 ++-
 .../albums/components/album-list-header.tsx   | 23 ++++++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/search-input/index.tsx b/src/renderer/components/search-input/index.tsx
index 027792b2..8169c30b 100644
--- a/src/renderer/components/search-input/index.tsx
+++ b/src/renderer/components/search-input/index.tsx
@@ -20,6 +20,7 @@ export const SearchInput = ({
   const mergedRef = useMergedRef<HTMLInputElement>(ref);
 
   const isOpened = focused || ref.current?.value;
+  const showIcon = !isOpened || (openedWidth || 150) > 150;
 
   useHotkeys([
     [
@@ -42,7 +43,7 @@ export const SearchInput = ({
     <TextInput
       ref={mergedRef}
       {...props}
-      icon={<RiSearchLine size={15} />}
+      icon={showIcon && <RiSearchLine size={15} />}
       styles={{
         input: {
           backgroundColor: isOpened ? 'inherit' : 'transparent !important',
diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx
index 0d131fca..0b441050 100644
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-list-header.tsx
@@ -36,6 +36,7 @@ import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jel
 import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
+import { useContainerQuery } from '/@/renderer/hooks';
 
 const FILTERS = {
   jellyfin: [
@@ -89,6 +90,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
   const setFilter = useSetAlbumFilters();
   const page = useAlbumListStore();
   const filters = page.filter;
+  const cq = useContainerQuery();
 
   const musicFoldersQuery = useMusicFolders();
 
@@ -97,6 +99,8 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
       FILTERS[server.type as keyof typeof FILTERS].find((f) => f.value === filters.sortBy)?.name) ||
     'Unknown';
 
+  const sortOrderLabel = ORDER.find((o) => o.value === filters.sortOrder)?.name || 'Unknown';
+
   const setSize = throttle(
     (e: number) =>
       setPage({
@@ -204,7 +208,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
 
   return (
     <PageHeader>
-      <HeaderItems>
+      <HeaderItems ref={cq.ref}>
         <Flex
           align="center"
           gap="md"
@@ -290,10 +294,16 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
                 fw="normal"
                 variant="subtle"
               >
-                {filters.sortOrder === SortOrder.ASC ? (
-                  <RiSortAsc size={15} />
+                {cq.isMd ? (
+                  sortOrderLabel
                 ) : (
-                  <RiSortDesc size={15} />
+                  <>
+                    {filters.sortOrder === SortOrder.ASC ? (
+                      <RiSortAsc size={15} />
+                    ) : (
+                      <RiSortDesc size={15} />
+                    )}
+                  </>
                 )}
               </Button>
             </DropdownMenu.Target>
@@ -318,7 +328,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
                   fw="normal"
                   variant="subtle"
                 >
-                  <RiFolder2Line size={15} />
+                  {cq.isMd ? 'Folder' : <RiFolder2Line size={15} />}
                 </Button>
               </DropdownMenu.Target>
               <DropdownMenu.Dropdown>
@@ -342,7 +352,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
                 fw="normal"
                 variant="subtle"
               >
-                <RiFilter3Line size={15} />
+                {cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
               </Button>
             </Popover.Target>
             <Popover.Dropdown>
@@ -357,6 +367,7 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
         <Flex>
           <SearchInput
             defaultValue={page.filter.searchTerm}
+            openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
             onChange={handleSearch}
           />
         </Flex>