Add new nav icons, fixes for highlights view on smaller screen

2026-03-11 08:54:26 +00:00 · 2024-02-16 14:41:49 +08:00 · 2024-02-16 14:41:49 +08:00 · 2615a0d33e
commit 2615a0d33e
parent d8194363eb
5 changed files with 179 additions and 37 deletions
--- a/packages/web/components/elements/icons/HighlightsIcon.tsx
+++ b/packages/web/components/elements/icons/HighlightsIcon.tsx
@ -4,38 +4,48 @@ import { IconProps } from './IconProps'

 import React from 'react'

-export class FollowingIcon extends React.Component<IconProps> {
+export class HighlightsIcon extends React.Component<IconProps> {
  render() {
    const size = (this.props.size || 26).toString()
    const color = (this.props.color || '#2A2A2A').toString()

    return (
      <svg
-        width={size}
-        height={size}
-        viewBox="0 0 25 25"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g>
          <path
-            d="M12.5 4.5L4.5 8.5L12.5 12.5L20.5 8.5L12.5 4.5Z"
-            fill={color}
-            stroke={color}
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            d="M3.74023 18.8567H7.57357L17.6361 8.79423C18.1444 8.2859 18.43 7.59646 18.43 6.87757C18.43 6.15868 18.1444 5.46923 17.6361 4.9609C17.1277 4.45257 16.4383 4.16699 15.7194 4.16699C15.0005 4.16699 14.3111 4.45257 13.8027 4.9609L3.74023 15.0234V18.8567Z"
+            fill="#FFD234"
+            stroke="#FFD234"
+            strokeWidth="1.25"
+            strokeLinecap="round"
+            strokeLinejoin="round"
          />
          <path
-            d="M4.5 12.5L12.5 16.5L20.5 12.5"
-            stroke={color}
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            d="M12.8447 5.91931L16.6781 9.75265"
+            stroke="#FFD234"
+            strokeWidth="1.25"
+            strokeLinecap="round"
+            strokeLinejoin="round"
          />
          <path
-            d="M4.5 16.5L12.5 20.5L20.5 16.5"
-            stroke={color}
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            d="M5.17773 13.5859L9.01107 17.4193"
+            stroke="#FFD234"
+            strokeWidth="1.25"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M20.9899 15.0234V18.8568H13.3232L17.1566 15.0234H20.9899Z"
+            stroke="#FFD234"
+            strokeWidth="1.25"
+            strokeLinecap="round"
+            strokeLinejoin="round"
          />
        </g>
      </svg>
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@ -20,23 +20,24 @@ import {
 import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard'
 import { NotebookContent } from '../article/Notebook'
 import { EmptyHighlights } from './EmptyHighlights'
-import { DEFAULT_HEADER_HEIGHT } from './HeaderSpacer'
 import { highlightsAsMarkdown } from './HighlightItem'
+import { MenuHeaderButton } from './LibraryHeader'

 type HighlightItemsLayoutProps = {
  items: LibraryItem[]
  viewer: UserBasicData | undefined

+  showFilterMenu: boolean
+  setShowFilterMenu: (show: boolean) => void
+
  gridContainerRef: React.RefObject<HTMLDivElement>
 }

 export function HighlightItemsLayout(
  props: HighlightItemsLayoutProps
 ): JSX.Element {
-  // const headerHeight = useGetHeaderHeight()
-  const [currentItem, setCurrentItem] = useState<LibraryItem | undefined>(
-    undefined
-  )
+  const [currentItem, setCurrentItem] =
+    useState<LibraryItem | undefined>(undefined)

  const listReducer = (
    state: LibraryItem[],
@ -106,10 +107,7 @@ export function HighlightItemsLayout(
      <Box
        css={{
          width: '100%',
-          height: `calc(100vh - ${DEFAULT_HEADER_HEIGHT})`,
-          '@mdDown': {
-            height: DEFAULT_HEADER_HEIGHT,
-          },
+          height: `100vh`,
        }}
      >
        <EmptyHighlights />
@ -122,15 +120,12 @@ export function HighlightItemsLayout(
      <HStack
        css={{
          width: '100%',
-          height: `calc(100vh - ${DEFAULT_HEADER_HEIGHT})`,
+          height: `100vh`,
          '@lgDown': {
            overflowY: 'scroll',
          },
          bg: '$thBackground2',
          overflow: 'hidden',
-          '@mdDown': {
-            height: DEFAULT_HEADER_HEIGHT,
-          },
        }}
        distribution="start"
        alignment="start"
@ -153,7 +148,7 @@ export function HighlightItemsLayout(
        >
          <VStack
            css={{
-              minHeight: `calc(100vh - ${DEFAULT_HEADER_HEIGHT})`,
+              minHeight: `100vh`,
              bg: '$thBackground',
            }}
            distribution="start"
@ -167,8 +162,22 @@ export function HighlightItemsLayout(
                borderBottom: '1px solid $thBorderColor',
              }}
              alignment="center"
-              distribution="center"
-            ></HStack>
+              distribution="start"
+            >
+              <SpanBox
+                css={{
+                  display: 'none',
+                  '@mdDown': {
+                    display: 'flex',
+                  },
+                }}
+              >
+                <MenuHeaderButton
+                  showFilterMenu={props.showFilterMenu}
+                  setShowFilterMenu={props.setShowFilterMenu}
+                />
+              </SpanBox>
+            </HStack>
            <LibraryItemsList
              items={items}
              viewer={props.viewer}
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@ -982,6 +982,8 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
            gridContainerRef={props.gridContainerRef}
            items={props.items}
            viewer={viewerData?.me}
+            showFilterMenu={showFilterMenu}
+            setShowFilterMenu={setShowFilterMenu}
          />
        )}

--- a/packages/web/components/templates/navMenu/LibraryMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@ -20,6 +20,10 @@ import { ToggleCaretDownIcon } from '../../elements/icons/ToggleCaretDownIcon'
 import Link from 'next/link'
 import { ToggleCaretRightIcon } from '../../elements/icons/ToggleCaretRightIcon'
 import { NavMenuFooter } from './Footer'
+import { FollowingIcon } from '../../elements/icons/FollowingIcon'
+import { HomeIcon } from '../../elements/icons/HomeIcon'
+import { LibraryIcon } from '../../elements/icons/LibraryIcon'
+import { HighlightsIcon } from '../../elements/icons/HighlightsIcon'

 export const LIBRARY_LEFT_MENU_WIDTH = '275px'

@ -110,13 +114,14 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
          css={{
            width: '100%',
            px: '25px',
-            pb: '25px',
+            pb: '17px',
            pt: '4.5px',
            lineHeight: '1',
          }}
        >
          <LogoBox />
        </Box>
+        <LibraryNav {...props} />
        <SavedSearches {...props} savedSearches={savedSearches} />
        <Subscriptions {...props} subscriptions={subscriptions} />
        <Labels {...props} labels={labels} />
@ -139,6 +144,48 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
  )
 }

+const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
+  return (
+    <VStack
+      css={{
+        m: '0px',
+        gap: '5px',
+        width: '100%',
+        borderBottom: '1px solid $thBorderColor',
+        px: '15px',
+        pb: '25px',
+      }}
+      alignment="start"
+      distribution="start"
+    >
+      <NavButton
+        {...props}
+        text="Home"
+        filterTerm="in:library OR in:following use:folders"
+        icon={<HomeIcon color={theme.colors.thHomeIcon.toString()} />}
+      />
+      <NavButton
+        {...props}
+        text="Following"
+        filterTerm="in:following use:folders"
+        icon={<FollowingIcon color="#F59932" />}
+      />
+      <NavButton
+        {...props}
+        text="Library"
+        filterTerm="in:library use:folders"
+        icon={<LibraryIcon color={theme.colors.ctaBlue.toString()} />}
+      />
+      <NavButton
+        {...props}
+        text="Highlights"
+        filterTerm="in:all has:highlights mode:highlights"
+        icon={<HighlightsIcon color={theme.colors.highlight.toString()} />}
+      />
+    </VStack>
+  )
+}
+
 function SavedSearches(
  props: LibraryFilterMenuProps & { savedSearches: SavedSearch[] | undefined }
 ): JSX.Element {
@ -175,7 +222,7 @@ function SavedSearches(

  return (
    <MenuPanel
-      title="Saved Searches"
+      title="SHORTCUTS"
      collapsed={collapsed}
      setCollapsed={setCollapsed}
    >
@ -400,6 +447,78 @@ function MenuPanel(props: MenuPanelProps): JSX.Element {
  )
 }

+type NavButtonProps = {
+  text: string
+  icon: ReactNode
+
+  filterTerm: string
+  searchTerm: string | undefined
+
+  applySearchQuery: (searchTerm: string) => void
+  setShowFilterMenu: (show: boolean) => void
+}
+
+function NavButton(props: NavButtonProps): JSX.Element {
+  const isInboxFilter = (filter: string) => {
+    return filter === '' || filter === 'in:inbox'
+  }
+  const selected = useMemo(() => {
+    if (isInboxFilter(props.filterTerm) && !props.searchTerm) {
+      return true
+    }
+    return props.searchTerm === props.filterTerm
+  }, [props.searchTerm, props.filterTerm])
+
+  return (
+    <HStack
+      alignment="center"
+      distribution="start"
+      css={{
+        pl: '10px',
+        mb: '2px',
+        gap: '10px',
+        display: 'flex',
+        width: '100%',
+        maxWidth: '100%',
+        height: '34px',
+
+        backgroundColor: selected ? '$thLibrarySelectionColor' : 'unset',
+        fontSize: '15px',
+        fontWeight: 'regular',
+        fontFamily: '$display',
+        color: selected
+          ? '$thLibraryMenuSecondary'
+          : '$thLibraryMenuUnselected',
+        verticalAlign: 'middle',
+        borderRadius: '3px',
+        cursor: 'pointer',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        '&:hover': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+        '&:active': {
+          backgroundColor: selected
+            ? '$thLibrarySelectionColor'
+            : '$thBackground4',
+        },
+      }}
+      title={props.text}
+      onClick={(e) => {
+        props.applySearchQuery(props.filterTerm)
+        props.setShowFilterMenu(false)
+        e.preventDefault()
+      }}
+    >
+      {props.icon}
+      {props.text}
+    </HStack>
+  )
+}
+
 type FilterButtonProps = {
  text: string

--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@ -181,11 +181,12 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
        thLibrarySearchbox: '#FCFCFC',
        thLibraryMenuPrimary: '#3D3D3D',
        thLibraryMenuSecondary: '#3D3D3D',
-        thLibraryMenuUnselected: '#898989',
+        thLibraryMenuUnselected: '#3D3D3D',
        thLibrarySelectionColor: '#FFEA9F',
        thLibraryNavigationMenuFooter: '#EFEADE',
        thLibraryMenuFooterHover: '#FFFFFF',
        thFormInput: '#EBEBEB',
+        thHomeIcon: '#2A2A2A',

        thHeaderIconRing: '#D9D9D9',
        thHeaderIconInner: '#898989',
@ -305,12 +306,13 @@ const darkThemeSpec = {
    thLibrarySearchbox: '#3D3D3D',
    thLibraryMenuPrimary: '#EBEBEB',
    thLibraryMenuSecondary: '#EBEBEB',
-    thLibraryMenuUnselected: '#898989',
+    thLibraryMenuUnselected: 'white',
    thLibrarySelectionColor: '#3D3D3D',
    thLibraryNavigationMenuFooter: '#3D3D3D',
    thLibraryMenuFooterHover: '#6A6968',
    searchActiveOutline: '#866D15',
    thFormInput: '#3D3D3D',
+    thHomeIcon: '#FFFFFF',

    thHeaderIconRing: '#3D3D3D',
    thHeaderIconInner: '#D9D9D9',