Add hover bg for apollo, implement share

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 (
     <VStack
@@ -724,9 +725,11 @@ const TopPicksItemView = (
         {props.homeItem.canShare && (
           <Button
             style="homeAction"
-            onClick={(event) => {
+            onClick={async (event) => {
               event.preventDefault()
               event.stopPropagation()
+
+              await shareItem(props.homeItem.title, props.homeItem.url)
             }}
           >
             <ShareActionIcon color={theme.colors.homeActionIcons.toString()} />

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',

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 }
 }