diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx index c807ef3ac..24bc6dccb 100644 --- a/packages/web/components/elements/LabelChip.tsx +++ b/packages/web/components/elements/LabelChip.tsx @@ -26,7 +26,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element { color: '$thLabelChipForeground', borderColor: props.isSelected ? '$thLabelChipSelectedBorder' - : '$thLabelChipUnselectedBorder', + : '$thLabelChipBackground', backgroundColor: '$thLabelChipBackground', }} > diff --git a/packages/web/components/elements/icons/ArchiveSectionIcon.tsx b/packages/web/components/elements/icons/ArchiveSectionIcon.tsx index b37c0447b..52ad5c73d 100644 --- a/packages/web/components/elements/icons/ArchiveSectionIcon.tsx +++ b/packages/web/components/elements/icons/ArchiveSectionIcon.tsx @@ -11,18 +11,18 @@ export class ArchiveSectionIcon extends React.Component { return ( diff --git a/packages/web/components/elements/icons/FollowingIcon.tsx b/packages/web/components/elements/icons/FollowingIcon.tsx index e9fca6c04..2de2f0bbe 100644 --- a/packages/web/components/elements/icons/FollowingIcon.tsx +++ b/packages/web/components/elements/icons/FollowingIcon.tsx @@ -6,33 +6,32 @@ import React from 'react' export class FollowingIcon extends React.Component { render() { - const size = (this.props.size || 26).toString() const color = (this.props.color || '#2A2A2A').toString() return ( { render() { - const size = (this.props.size || 26).toString() const color = (this.props.color || '#2A2A2A').toString() return ( @@ -17,32 +16,32 @@ export class HighlightsIcon extends React.Component { fill="none" xmlns="http://www.w3.org/2000/svg" > - + { render() { - const size = (this.props.size || 26).toString() const color = (this.props.color || '#2A2A2A').toString() return ( diff --git a/packages/web/components/elements/icons/LibraryIcon.tsx b/packages/web/components/elements/icons/LibraryIcon.tsx index c3a24a013..858c170de 100644 --- a/packages/web/components/elements/icons/LibraryIcon.tsx +++ b/packages/web/components/elements/icons/LibraryIcon.tsx @@ -6,24 +6,23 @@ import React from 'react' export class LibraryIcon extends React.Component { render() { - const size = (this.props.size || 26).toString() const color = (this.props.color || '#2A2A2A').toString() return ( diff --git a/packages/web/components/elements/icons/NavMoreButtonDown.tsx b/packages/web/components/elements/icons/NavMoreButtonDown.tsx index 4d76c4c0a..97b6d9a57 100644 --- a/packages/web/components/elements/icons/NavMoreButtonDown.tsx +++ b/packages/web/components/elements/icons/NavMoreButtonDown.tsx @@ -20,7 +20,7 @@ export class NavMoreButtonDownIcon extends React.Component { diff --git a/packages/web/components/elements/icons/NavMoreButtonUp.tsx b/packages/web/components/elements/icons/NavMoreButtonUp.tsx index 4270cad1e..467321bf0 100644 --- a/packages/web/components/elements/icons/NavMoreButtonUp.tsx +++ b/packages/web/components/elements/icons/NavMoreButtonUp.tsx @@ -19,7 +19,7 @@ export class NavMoreButtonUpIcon extends React.Component { diff --git a/packages/web/components/elements/icons/TrashSectionIcon.tsx b/packages/web/components/elements/icons/TrashSectionIcon.tsx index a42cea548..d0627bb8c 100644 --- a/packages/web/components/elements/icons/TrashSectionIcon.tsx +++ b/packages/web/components/elements/icons/TrashSectionIcon.tsx @@ -10,19 +10,19 @@ export class TrashSectionIcon extends React.Component { return ( diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 41e353b87..09f435cc9 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -1,7 +1,7 @@ import * as HoverCard from '@radix-ui/react-hover-card' import { styled } from '@stitches/react' import { useRouter } from 'next/router' -import { useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo, useReducer, useState } from 'react' import { Button } from '../elements/Button' import { AddToLibraryActionIcon } from '../elements/icons/home/AddToLibraryActionIcon' import { ArchiveActionIcon } from '../elements/icons/home/ArchiveActionIcon' @@ -198,6 +198,41 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => { } const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => { + const listReducer = ( + state: HomeItem[], + action: { + type: string + itemId?: string + items?: HomeItem[] + } + ) => { + console.log('handling action: ', action) + switch (action.type) { + case 'RESET': + return action.items ?? [] + case 'REMOVE_ITEM': + return state.filter((item) => item.id !== action.itemId) + default: + throw new Error() + } + } + + const [items, dispatchList] = useReducer(listReducer, []) + + function handleDelete(item: HomeItem) { + dispatchList({ + type: 'REMOVE_ITEM', + itemId: item.id, + }) + } + + useEffect(() => { + dispatchList({ + type: 'RESET', + items: props.homeSection.items, + }) + }, [props]) + return ( { ( - + )} /> @@ -511,9 +550,14 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => { ) } -const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => { - const router = useRouter() +type TopPickItemViewProps = { + dispatchList: (args: { type: string; itemId?: string }) => void +} +const TopicPickHomeItemView = ( + props: HomeItemViewProps & TopPickItemViewProps +): JSX.Element => { + const router = useRouter() return ( { - - */} + + {props.homeItem.canArchive && ( + + )} + {props.homeItem.canDelete && ( + + )} + {props.homeItem.canShare && ( + + )} ( alignment="center" css={{ gap: '8px', + height: '16px', cursor: 'pointer', flex: '1', overflow: 'hidden', @@ -681,10 +749,7 @@ const SourceInfo = (props: HomeItemViewProps & SourceInfoProps) => ( }} > {props.homeItem.source.icon && ( - + )} - {props.source.icon && ( - - )} + {props.source.icon && } {!isLoading && showNavMenu && ( - {}} - showMenu={showNavMenu} - setShowMenu={setShowNavMenu} - /> + <> + {}} + showMenu={showNavMenu} + setShowMenu={setShowNavMenu} + /> + + )} {props.children} {showLogoutConfirmation ? ( @@ -181,7 +189,7 @@ const Header = (props: HeaderProps): JSX.Element => { alignment="start" distribution="start" css={{ - zIndex: 5, + zIndex: 2, position: 'fixed', left: '15px', top: '15px', diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx index 303d50c85..ea0a5f054 100644 --- a/packages/web/components/templates/navMenu/NavigationMenu.tsx +++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx @@ -98,13 +98,9 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { css={{ width: '100%', px: '15px', - pb: '17px', + pb: '10px', pt: '15px', lineHeight: '1', - '@mdDown': { - pb: '0px', - px: '15px', - }, }} > @@ -127,18 +123,6 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { - {/* This spacer pushes library content to the right of - the fixed left side menu. */} - ) } @@ -169,28 +153,36 @@ const LibraryNav = (props: NavigationMenuProps): JSX.Element => { text="Home" section="home" isSelected={props.section == 'home'} - icon={} + icon={} /> } + icon={ + + } /> } + icon={ + + } /> } + icon={ + + } />