From ded3768766eb492af04f3311f78e5f03e0e9e002 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 2 Mar 2023 21:22:19 +0800
Subject: [PATCH] Library list view implementation

---
 .../patterns/LibraryCards/LinkedItemCard.tsx  |  4 ++-
 .../templates/homeFeed/LibraryFilterMenu.tsx  |  3 --
 .../templates/homeFeed/LibraryHeader.tsx      | 33 ++++++++++++++++---
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
index b8efa4488..a6fbb7b5b 100644
--- a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
@@ -4,6 +4,7 @@ import type { LinkedItemCardProps } from './CardTypes'
 import { HighlightItemCard } from './HighlightItemCard'
 import { PageType } from '../../../lib/networking/fragments/articleFragment'
 import { LibraryGridCard } from './LibraryGridCard'
+import { LibraryListCard } from './LibraryListCard'
 
 const shouldHideUrl = (url: string): boolean => {
   try {
@@ -40,7 +41,8 @@ export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element {
     return <HighlightItemCard {...props} />
   }
   if (props.layout == 'LIST_LAYOUT') {
-    return <ListLinkedItemCard {...props} originText={originText} />
+    return <LibraryListCard {...props} originText={originText} />
+    // return <ListLinkedItemCard {...props} originText={originText} />
   } else {
     return <LibraryGridCard {...props} originText={originText} />
     //    return <GridLinkedItemCard {...props} originText={originText} />
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index bbe1ae417..2ace65f8f 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -7,9 +7,6 @@ import { CaretRight, Circle, DotsThree, Plus } from 'phosphor-react'
 import { useGetSubscriptionsQuery } from '../../../lib/networking/queries/useGetSubscriptionsQuery'
 import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
-import { CloseButton } from '../../elements/CloseButton'
-import { MenuHeaderButton } from './LibraryHeader'
-import { LayoutType } from './HomeFeedContainer'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '300px'
 
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 374ef65ad..d91ad8d64 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -174,9 +174,6 @@ function SearchBox(props: SearchBoxProps): JSX.Element {
         mr: '15px',
         bg: '#F3F3F3',
         borderRadius: '6px',
-        '@mdDown': {
-          display: 'none',
-        },
         boxShadow: focused ? FOCUSED_BOXSHADOW : 'unset',
       }}
     >
@@ -282,6 +279,8 @@ type ControlButtonBoxProps = {
 }
 
 function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
+  const [showInlineSearch, setShowInlineSearch] = useState(false)
+
   return (
     <>
       <HStack
@@ -341,7 +340,33 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
           },
         }}
       >
-        <MagnifyingGlass size={20} color={theme.colors.graySolid.toString()} />
+        {showInlineSearch && (
+          <SpanBox
+            css={{
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              bg: 'red',
+              top: '0px',
+              left: '0px',
+              p: '10px',
+            }}
+            onClick={() => setShowInlineSearch(false)}
+          >
+            {/* <SearchBox {...props} /> */}
+          </SpanBox>
+        )}
+        <Button
+          style="ghost"
+          onClick={() => {
+            setShowInlineSearch(true)
+          }}
+        >
+          <MagnifyingGlass
+            size={20}
+            color={theme.colors.graySolid.toString()}
+          />
+        </Button>
         <PrimaryDropdown showThemeSection={true} />
       </HStack>
     </>