WIP: add pinned items to the library header

packages/web/components/elements/Button.tsx

@@ -174,14 +174,17 @@ export const Button = styled('button', {
         },
       },
       ctaPill: {
-        borderRadius: '$3',
-        px: '$3',
-        py: '$2',
+        borderRadius: '15px',
+        px: '10px',
+        py: '4px',
+        font: '$inter',
+        fontSize: '12px',
+        fontWeight: 'medium',
         border: '1px solid $grayBorder',
         bg: '$grayBgActive',
         '&:hover': {
           bg: '$grayBgHover',
-          border: '1px solid $grayBorderHover',
+          //         border: '1px solid $grayBorderHover',
         },
       },
       link: {
@@ -246,7 +249,6 @@ export const Button = styled('button', {
         '&:hover': {
           opacity: 0.5,
         },
-
       },
       articleActionIcon: {
         bg: 'transparent',

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

@@ -2,6 +2,7 @@ import { Book } from 'phosphor-react'
 import { VStack } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { theme } from '../../tokens/stitches.config'
+import { HEADER_HEIGHT } from './HeaderSpacer'
 
 export function EmptyHighlights(): JSX.Element {
   return (
@@ -11,7 +12,7 @@ export function EmptyHighlights(): JSX.Element {
       css={{
         color: '$grayTextContrast',
         textAlign: 'center',
-        marginTop: '70px',
+        marginTop: HEADER_HEIGHT,
       }}
     >
       <Book size={44} color={theme.colors.grayTextContrast.toString()} />

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

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

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

@@ -30,6 +30,7 @@ import { LabelIcon } from '../../elements/icons/LabelIcon'
 import { ListViewIcon } from '../../elements/icons/ListViewIcon'
 import { GridViewIcon } from '../../elements/icons/GridViewIcon'
 import { CaretDownIcon } from '../../elements/icons/CaretDownIcon'
+import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
 
 export type MultiSelectMode = 'off' | 'none' | 'some' | 'visible' | 'search'
 
@@ -106,19 +107,34 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
         },
       }}
     >
-      <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}
-      />
+      <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>
     </HStack>
   )
 }
@@ -400,6 +416,29 @@ 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