From 1f66bd269116208375ad052682c4faa49b475e6b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 14 Jun 2024 14:22:18 +0800
Subject: [PATCH 1/2] Get nav into higher z-index, start to add the ADdLink
 control

---
 .../elements/icons/HighlightsIcon.tsx         |  2 +-
 .../elements/icons/ShortcutFolderOpen.tsx     |  2 +-
 .../components/templates/NavigationLayout.tsx | 44 ++++++++++++++++---
 .../templates/navMenu/NavigationMenu.tsx      |  2 +-
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/packages/web/components/elements/icons/HighlightsIcon.tsx b/packages/web/components/elements/icons/HighlightsIcon.tsx
index 428786819..d89d03625 100644
--- a/packages/web/components/elements/icons/HighlightsIcon.tsx
+++ b/packages/web/components/elements/icons/HighlightsIcon.tsx
@@ -16,7 +16,7 @@ export class HighlightsIcon extends React.Component<IconProps> {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g clip-path="url(#clip0_11629_6956)">
+        <g>
           <path
             d="M2.91113 18.5169H6.74447L16.807 8.45439C17.3153 7.94606 17.6009 7.25661 17.6009 6.53772C17.6009 5.81883 17.3153 5.12939 16.807 4.62106C16.2986 4.11273 15.6092 3.82715 14.8903 3.82715C14.1714 3.82715 13.482 4.11273 12.9736 4.62106L2.91113 14.6836V18.5169Z"
             fill={color}
diff --git a/packages/web/components/elements/icons/ShortcutFolderOpen.tsx b/packages/web/components/elements/icons/ShortcutFolderOpen.tsx
index 7c196bca9..85e175c3c 100644
--- a/packages/web/components/elements/icons/ShortcutFolderOpen.tsx
+++ b/packages/web/components/elements/icons/ShortcutFolderOpen.tsx
@@ -16,7 +16,7 @@ export class ShortcutFolderOpen extends React.Component<IconProps> {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g clip-path="url(#clip0_11426_11319)">
+        <g>
           <path
             d="M5.24447 20.4395L8.11634 12.7822C8.19075 12.5836 8.32397 12.4126 8.49819 12.2918C8.67241 12.171 8.87934 12.1062 9.09134 12.1061H21.9111M5.24447 20.4395H19.8549C20.3395 20.4393 20.809 20.2702 21.1824 19.9613C21.5558 19.6523 21.8098 19.2228 21.9007 18.7467L22.9382 13.3186C22.963 13.1695 22.955 13.0167 22.9149 12.8709C22.8747 12.7251 22.8032 12.5899 22.7055 12.4745C22.6077 12.3591 22.4861 12.2664 22.3489 12.2028C22.2117 12.1392 22.0623 12.1062 21.9111 12.1061M5.24447 20.4395C4.69193 20.4395 4.16203 20.22 3.77133 19.8293C3.38063 19.4386 3.16113 18.9087 3.16113 18.3561V6.89779C3.16113 6.34525 3.38063 5.81535 3.77133 5.42465C4.16203 5.03395 4.69193 4.81445 5.24447 4.81445H9.41113L12.5361 7.93945H19.8278C20.3803 7.93945 20.9102 8.15895 21.3009 8.54965C21.6916 8.94035 21.9111 9.47025 21.9111 10.0228V12.1061"
             stroke={color}
diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx
index 2e35aa311..b8eb4e9ba 100644
--- a/packages/web/components/templates/NavigationLayout.tsx
+++ b/packages/web/components/templates/NavigationLayout.tsx
@@ -19,6 +19,12 @@ import { Button } from '../elements/Button'
 import { List } from '@phosphor-icons/react'
 import { usePersistedState } from '../../lib/hooks/usePersistedState'
 import { LIBRARY_LEFT_MENU_WIDTH } from './navMenu/LibraryLegacyMenu'
+import { AddLinkModal } from './AddLinkModal'
+import { saveUrlMutation } from '../../lib/networking/mutations/saveUrlMutation'
+import {
+  showErrorToast,
+  showSuccessToastWithAction,
+} from '../../lib/toastHelpers'
 
 export type NavigationSection =
   | 'home'
@@ -103,6 +109,25 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
     setShowLogoutConfirmation(true)
   }, [setShowLogoutConfirmation])
 
+  const [showAddLinkModal, setShowAddLinkModal] = useState(false)
+
+  const handleLinkAdded = useCallback(
+    async (link: string, timezone: string, locale: string) => {
+      const result = await saveUrlMutation(link, timezone, locale)
+      if (result) {
+        showSuccessToastWithAction('Link saved', 'Read now', async () => {
+          window.location.href = `/article?url=${encodeURIComponent(link)}`
+          return Promise.resolve()
+        })
+        // const id = result.url?.match(/[^/]+$/)?.[0] ?? ''
+        // performActionOnItem('refresh', undefined as unknown as any)
+      } else {
+        showErrorToast('Error saving link', { position: 'bottom-right' })
+      }
+    },
+    []
+  )
+
   useEffect(() => {
     document.addEventListener('logout', showLogout)
 
@@ -141,8 +166,7 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
         <>
           <NavigationMenu
             section={props.section}
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            setShowAddLinkModal={() => {}}
+            setShowAddLinkModal={setShowAddLinkModal}
             showMenu={showNavMenu}
           />
           <SpanBox
@@ -156,18 +180,24 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
         </>
       )}
       {props.children}
-      {showLogoutConfirmation ? (
+      {showLogoutConfirmation && (
         <ConfirmationModal
           message={'Are you sure you want to log out?'}
           onAccept={logout}
           onOpenChange={() => setShowLogoutConfirmation(false)}
         />
-      ) : null}
-      {showKeyboardCommandsModal ? (
+      )}
+      {showKeyboardCommandsModal && (
         <KeyboardShortcutListModal
           onOpenChange={() => setShowKeyboardCommandsModal(false)}
         />
-      ) : null}
+      )}
+      {showAddLinkModal && (
+        <AddLinkModal
+          onOpenChange={setShowAddLinkModal}
+          handleLinkSubmission={handleLinkAdded}
+        />
+      )}
     </HStack>
   )
 }
@@ -183,7 +213,7 @@ const Header = (props: HeaderProps): JSX.Element => {
       alignment="start"
       distribution="center"
       css={{
-        zIndex: 5,
+        zIndex: 10,
         position: props.menuOpen ? 'fixed' : 'absolute',
         left: '0px',
         top: '0px',
diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx
index 794e235b4..eeef9c4c0 100644
--- a/packages/web/components/templates/navMenu/NavigationMenu.tsx
+++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx
@@ -90,7 +90,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
             boxShadow:
               'rgb(48, 54, 61) 0px 0px 0px 1px, rgba(1, 4, 9, 0.4) 0px 6px 12px -3px, rgba(1, 4, 9, 0.4) 0px 6px 18px 0px',
           },
-          zIndex: 2,
+          zIndex: 5,
         }}
       >
         <Box css={{ width: '100%', height: '60px' }}></Box>

From 16d57f24960630bf17906521fc60900bcc6f23fc Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 14 Jun 2024 14:32:22 +0800
Subject: [PATCH 2/2] better dropdown handling on the main menu

---
 packages/web/components/elements/DropdownElements.tsx | 7 +++----
 packages/web/components/templates/PrimaryDropdown.tsx | 7 ++++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index a9657642e..2c6400684 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@@ -16,13 +16,12 @@ const StyledItem = styled(Item, {
   fontWeight: '400',
   py: '10px',
   px: '15px',
-  borderRadius: 3,
   cursor: 'default',
   color: '$utilityTextDefault',
 
   '&:focus': {
     outline: 'none',
-    backgroundColor: '$grayBgHover',
+    backgroundColor: '$thLeftMenuBackground',
   },
 })
 
@@ -32,7 +31,7 @@ const DropdownTrigger = styled(Trigger, {
   padding: 0,
   backgroundColor: 'transparent',
   '&:hover': {
-    opacity: 0.7,
+    opacity: 1.0,
   },
   '&:focus': {
     outline: 'none',
@@ -129,7 +128,7 @@ type DropdownProps = {
 export const DropdownSeparator = styled(Separator, {
   height: '1px',
   margin: 0,
-  backgroundColor: '$grayBorder',
+  backgroundColor: '$homeDivider',
 })
 
 type DropdownOptionProps = {
diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index 2785f8a57..659df484f 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -53,9 +53,10 @@ const TriggerButton = (props: TriggerButtonProps): JSX.Element => {
         alignItems: 'center',
         borderRadius: '5px',
         height: '32px',
-        padding: '5px',
+        px: '10px',
+        py: '20px',
         '&:hover': {
-          bg: '$thLibraryMenuFooterHover',
+          bg: '$thLeftMenuBackground',
           opacity: '0.7px',
         },
       }}
@@ -130,7 +131,7 @@ export function PrimaryDropdown(props: PrimaryDropdownProps): JSX.Element {
       triggerElement={
         props.children ?? <TriggerButton name={viewerData?.me?.name} />
       }
-      css={{ width: '240px', ml: '15px' }}
+      css={{ width: '240px', ml: '15px', bg: '$thNavMenuFooter' }}
     >
       <HStack
         alignment="center"