Move pinned items into the grid

packages/web/components/elements/Button.tsx

@@ -174,6 +174,7 @@ export const Button = styled('button', {
         },
       },
       ctaPill: {
+        cursor: 'pointer',
         borderRadius: '15px',
         px: '10px',
         py: '4px',
@@ -184,7 +185,20 @@ export const Button = styled('button', {
         bg: '$grayBgActive',
         '&:hover': {
           bg: '$grayBgHover',
-          //         border: '1px solid $grayBorderHover',
+        },
+      },
+      ctaPillUnselected: {
+        cursor: 'pointer',
+        borderRadius: '15px',
+        px: '10px',
+        py: '4px',
+        font: '$inter',
+        fontSize: '12px',
+        fontWeight: 'medium',
+        border: '1px solid transparent',
+        bg: 'transparent',
+        '&:hover': {
+          bg: '$grayBgHover',
         },
       },
       link: {

packages/web/components/templates/homeFeed/HeaderSpacer.tsx

@@ -1,6 +1,6 @@
 import { Box } from '../../elements/LayoutPrimitives'
 
-export const HEADER_HEIGHT = '110px'
+export const HEADER_HEIGHT = '70px'
 
 export function HeaderSpacer(): JSX.Element {
   return (

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -51,6 +51,8 @@ import { NotebookPresenter } from '../article/NotebookPresenter'
 import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutation'
 import { articleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
 import { searchQuery } from '../../../lib/networking/queries/search'
+import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
+import { theme } from '../../tokens/stitches.config'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 export type LibraryMode = 'reads' | 'highlights'
@@ -1019,6 +1021,61 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
   )
 }
 
+type PinnedItem = {
+  title: string
+  search: string
+}
+
+type PinnedButtonsProps = {
+  items: PinnedItem[]
+  searchTerm: string | undefined
+  applySearchQuery: (searchQuery: string) => void
+}
+
+const PinnedButtons = (props: PinnedButtonsProps): JSX.Element => {
+  if (!props.items.length) {
+    return <></>
+  }
+
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{
+        width: '100%',
+        pt: '0px',
+        pb: '15px',
+        gap: '10px',
+        bg: 'transparent',
+      }}
+    >
+      {props.items.map((item) => {
+        const style =
+          item.search == props.searchTerm ? 'ctaPill' : 'ctaPillUnselected'
+        return (
+          <Button
+            key={item.search}
+            style={style}
+            onClick={(event) => {
+              props.applySearchQuery(item.search)
+              event.preventDefault()
+            }}
+          >
+            {item.title}
+          </Button>
+        )
+      })}
+      <Button style="ghost" css={{ display: 'flex', pt: '1px' }}>
+        <MoreOptionsIcon
+          size={18}
+          strokeColor={theme.colors.grayText.toString()}
+          orientation={'horizontal'}
+        />
+      </Button>
+    </HStack>
+  )
+}
+
 type LibraryItemsLayoutProps = {
   layout: LayoutType
   viewer?: UserBasicData
@@ -1057,6 +1114,16 @@ function LibraryItemsLayout(props: LibraryItemsLayoutProps): JSX.Element {
       >
         <Toaster />
 
+        <PinnedButtons
+          items={[
+            { search: 'label:"Coding"', title: 'Coding' },
+            { search: 'label:"Hockey"', title: 'Hockey' },
+            { search: 'label:"Football"', title: 'Football' },
+          ]}
+          searchTerm={props.searchTerm}
+          applySearchQuery={props.applySearchQuery}
+        />
+
         {props.isValidating && props.items.length == 0 && <TopBarProgress />}
         <div
           onDragEnter={(event) => {

packages/web/components/templates/homeFeed/LibraryHeader.tsx

@@ -107,34 +107,19 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
         },
       }}
     >
-      <VStack
-        alignment="start"
-        distribution="start"
-        css={
-          {
-            // width: '100%',
-            // height: '100%',
-            // '@mdDown': {
-            //   display: 'none',
-            // },
-          }
-        }
-      >
-        <ControlButtonBox
-          layout={props.layout}
-          updateLayout={props.updateLayout}
-          numItemsSelected={props.numItemsSelected}
-          multiSelectMode={props.multiSelectMode}
-          setMultiSelectMode={props.setMultiSelectMode}
-          showAddLinkModal={props.showAddLinkModal}
-          performMultiSelectAction={props.performMultiSelectAction}
-          searchTerm={props.searchTerm}
-          applySearchQuery={props.applySearchQuery}
-          allowSelectMultiple={props.allowSelectMultiple}
-          handleLinkSubmission={props.handleLinkSubmission}
-        />
-        <PinnedButtons />
-      </VStack>
+      <ControlButtonBox
+        layout={props.layout}
+        updateLayout={props.updateLayout}
+        numItemsSelected={props.numItemsSelected}
+        multiSelectMode={props.multiSelectMode}
+        setMultiSelectMode={props.setMultiSelectMode}
+        showAddLinkModal={props.showAddLinkModal}
+        performMultiSelectAction={props.performMultiSelectAction}
+        searchTerm={props.searchTerm}
+        applySearchQuery={props.applySearchQuery}
+        allowSelectMultiple={props.allowSelectMultiple}
+        handleLinkSubmission={props.handleLinkSubmission}
+      />
     </HStack>
   )
 }
@@ -416,29 +401,6 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
   )
 }
 
-const PinnedButtons = (): JSX.Element => {
-  return (
-    <HStack
-      alignment="center"
-      distribution="start"
-      css={{ width: '100%', pt: '20px', pb: '0px', gap: '10px' }}
-    >
-      <Button style="ctaPill">Problem Solving</Button>
-      <Button style="ctaPill">Music</Button>
-      <Button style="ctaPill">Sleeping</Button>
-      <Button style="ctaPill">Productivity</Button>
-      <Button style="ctaPill">Movies</Button>
-      <Button style="ghost">
-        <MoreOptionsIcon
-          size={18}
-          strokeColor={'white'}
-          orientation={'horizontal'}
-        />
-      </Button>
-    </HStack>
-  )
-}
-
 type ControlButtonBoxProps = {
   layout: LayoutType
   updateLayout: (layout: LayoutType) => void