From bc934a4706ca2f80ca3e1fb271bb264fedf630b3 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 21 Jun 2024 15:07:21 +0800 Subject: [PATCH 1/2] Make sure recently added has a max of two lines --- .../web/components/nav-containers/HomeContainer.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/web/components/nav-containers/HomeContainer.tsx b/packages/web/components/nav-containers/HomeContainer.tsx index 59ff4e84a..0c1da5be9 100644 --- a/packages/web/components/nav-containers/HomeContainer.tsx +++ b/packages/web/components/nav-containers/HomeContainer.tsx @@ -469,7 +469,13 @@ const Title = (props: HomeItemViewProps): JSX.Element => { ) } -const TitleSmall = (props: HomeItemViewProps): JSX.Element => { +type TitleSmallProps = { + maxLines?: string +} + +const TitleSmall = ( + props: HomeItemViewProps & TitleSmallProps +): JSX.Element => { return ( { textOverflow: 'ellipsis', wordBreak: 'break-word', display: '-webkit-box', - '-webkit-line-clamp': '3', + '-webkit-line-clamp': props.maxLines ?? '3', '-webkit-box-orient': 'vertical', }} > @@ -565,7 +571,7 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => { - + ) } From b39bffdc1a2dc2bbecc88f177263be495adc2a02 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Fri, 21 Jun 2024 15:31:57 +0800 Subject: [PATCH 2/2] Add hover bg for apollo, implement share --- .../nav-containers/HomeContainer.tsx | 9 ++++--- .../web/components/tokens/stitches.config.ts | 2 +- .../web/lib/hooks/useLibraryItemActions.tsx | 24 ++++++++++++++++++- 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/web/components/nav-containers/HomeContainer.tsx b/packages/web/components/nav-containers/HomeContainer.tsx index 0c1da5be9..2dbd80152 100644 --- a/packages/web/components/nav-containers/HomeContainer.tsx +++ b/packages/web/components/nav-containers/HomeContainer.tsx @@ -542,7 +542,7 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => { bg: '$homeCardHover', borderRadius: '5px', '&:hover': { - bg: '$homeCardHover', + bg: '#007AFF10', }, '&:hover .title-text': { textDecoration: 'underline', @@ -584,7 +584,8 @@ const TopPicksItemView = ( props: HomeItemViewProps & TopPicksItemViewProps ): JSX.Element => { const router = useRouter() - const { archiveItem, deleteItem, moveItem } = useLibraryItemActions() + const { archiveItem, deleteItem, moveItem, shareItem } = + useLibraryItemActions() return ( { + onClick={async (event) => { event.preventDefault() event.stopPropagation() + + await shareItem(props.homeItem.title, props.homeItem.url) }} > diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 99dd8d755..d07b70932 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -431,7 +431,7 @@ const apolloThemeSpec = { homeCardHover: '#525252', homeDivider: '#6A6968', - homeActionHoverBg: '#515151', + homeActionHoverBg: '#474747', thBackground: '#474747', thBackground2: '#515151', diff --git a/packages/web/lib/hooks/useLibraryItemActions.tsx b/packages/web/lib/hooks/useLibraryItemActions.tsx index d2b4d28ab..8be217b34 100644 --- a/packages/web/lib/hooks/useLibraryItemActions.tsx +++ b/packages/web/lib/hooks/useLibraryItemActions.tsx @@ -65,5 +65,27 @@ export default function useLibraryItemActions() { return !!result }, []) - return { archiveItem, deleteItem, moveItem } + const shareItem = useCallback( + async (title: string, originalArticleUrl: string | undefined) => { + if (!originalArticleUrl) { + showErrorToast('Article has no public URL to share', { + position: 'bottom-right', + }) + } else if (navigator.share) { + navigator.share({ + title: title + '\n', + text: title + '\n', + url: originalArticleUrl, + }) + } else { + await navigator.clipboard.writeText(originalArticleUrl) + showSuccessToast('URL copied to clipboard', { + position: 'bottom-right', + }) + } + }, + [] + ) + + return { archiveItem, deleteItem, moveItem, shareItem } }