From ba273c3b3c1a6ea696fb6225b9e9a6a40038f934 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 13 Jun 2024 20:16:52 +0800
Subject: [PATCH 1/5] Ensure layout doesnt change if siteicons arent set or
 fail to load

---
 packages/web/components/nav-containers/home.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx
index 41e353b87..a20efbe0c 100644
--- a/packages/web/components/nav-containers/home.tsx
+++ b/packages/web/components/nav-containers/home.tsx
@@ -673,6 +673,7 @@ const SourceInfo = (props: HomeItemViewProps & SourceInfoProps) => (
         alignment="center"
         css={{
           gap: '8px',
+          height: '16px',
           cursor: 'pointer',
           flex: '1',
           overflow: 'hidden',
@@ -681,10 +682,7 @@ const SourceInfo = (props: HomeItemViewProps & SourceInfoProps) => (
         }}
       >
         {props.homeItem.source.icon && (
-          <SiteIconSmall
-            src={props.homeItem.source.icon}
-            alt={props.homeItem.source.name}
-          />
+          <SiteIconSmall src={props.homeItem.source.icon} />
         )}
         <HStack
           css={{
@@ -756,9 +754,7 @@ const SubscriptionSourceHoverContent = (
         alignment="center"
         css={{ width: '100%', gap: '10px' }}
       >
-        {props.source.icon && (
-          <SiteIconLarge src={props.source.icon} alt={props.source.name} />
-        )}
+        {props.source.icon && <SiteIconLarge src={props.source.icon} />}
         <SpanBox
           css={{
             fontFamily: '$inter',

From b1408a05db27dc046b6020eceff072b6f39cb1a6 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 13 Jun 2024 20:23:21 +0800
Subject: [PATCH 2/5] Fix some spacing issues in left menu

---
 .../templates/navMenu/NavigationMenu.tsx       | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx
index 303d50c85..9ba894bed 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',
-            },
           }}
         >
           <SpanBox css={{ mr: 'auto' }}>
@@ -127,18 +123,6 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element {
         <NavMenuFooter {...props} showFullThemeSection={true} />
         <Box css={{ height: '250px ' }} />
       </Box>
-      {/* This spacer pushes library content to the right of 
-      the fixed left side menu. */}
-      <Box
-        css={{
-          minWidth: LIBRARY_LEFT_MENU_WIDTH,
-          height: '100%',
-          bg: '$thBackground',
-          '@mdDown': {
-            display: 'none',
-          },
-        }}
-      ></Box>
     </>
   )
 }

From bbdf598918391b67233f32866c5b01afaa864a61 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 13 Jun 2024 20:49:11 +0800
Subject: [PATCH 3/5] Update icons of left menu

---
 .../elements/icons/ArchiveSectionIcon.tsx     |  6 ++---
 .../elements/icons/FollowingIcon.tsx          | 13 +++++-----
 .../elements/icons/HighlightsIcon.tsx         | 21 ++++++++--------
 .../components/elements/icons/HomeIcon.tsx    |  9 ++++---
 .../components/elements/icons/LibraryIcon.tsx | 11 ++++-----
 .../elements/icons/NavMoreButtonDown.tsx      |  2 +-
 .../elements/icons/NavMoreButtonUp.tsx        |  2 +-
 .../elements/icons/TrashSectionIcon.tsx       | 10 ++++----
 .../components/templates/NavigationLayout.tsx | 24 ++++++++++++-------
 .../templates/navMenu/NavigationMenu.tsx      | 16 +++++++++----
 10 files changed, 63 insertions(+), 51 deletions(-)

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<IconProps> {
     return (
       <svg
         width="23"
-        height="23"
+        height="24"
         viewBox="0 0 23 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <g>
           <path
-            d="M19.1667 3.18359H3.83341C2.77487 3.18359 1.91675 4.04171 1.91675 5.10026C1.91675 6.15881 2.77487 7.01693 3.83341 7.01693H19.1667C20.2253 7.01693 21.0834 6.15881 21.0834 5.10026C21.0834 4.04171 20.2253 3.18359 19.1667 3.18359Z"
+            d="M18.5 4.30859H3.83333C2.82081 4.30859 2 5.1294 2 6.14193C2 7.15445 2.82081 7.97526 3.83333 7.97526H18.5C19.5125 7.97526 20.3333 7.15445 20.3333 6.14193C20.3333 5.1294 19.5125 4.30859 18.5 4.30859Z"
             fill={color}
           />
           <path
-            d="M18.2083 8.93359C18.6999 8.93359 19.1053 9.3773 19.1599 9.94943L19.1666 10.0836V16.9836C19.1666 18.8207 17.9696 20.3224 16.4603 20.4278L16.2916 20.4336H6.70825C5.17684 20.4336 3.92525 18.9971 3.83804 17.1868L3.83325 16.9836V10.0836C3.83325 9.44822 4.26259 8.93359 4.79159 8.93359H18.2083ZM13.4166 10.8503H9.58325L9.47113 10.857C9.2382 10.8847 9.02353 10.9968 8.86777 11.1722C8.71201 11.3476 8.62599 11.574 8.62599 11.8086C8.62599 12.0432 8.71201 12.2696 8.86777 12.445C9.02353 12.6203 9.2382 12.7325 9.47113 12.7602L9.58325 12.7669H13.4166L13.5287 12.7602C13.7616 12.7325 13.9763 12.6203 14.1321 12.445C14.2878 12.2696 14.3739 12.0432 14.3739 11.8086C14.3739 11.574 14.2878 11.3476 14.1321 11.1722C13.9763 10.9968 13.7616 10.8847 13.5287 10.857L13.4166 10.8503Z"
+            d="M17.75 9.80859C18.2202 9.80859 18.608 10.233 18.6602 10.7803L18.6667 10.9086V17.5086C18.6667 19.2658 17.5217 20.7023 16.078 20.8031L15.9167 20.8086H6.75C5.28517 20.8086 4.088 19.4345 4.00458 17.7029L4 17.5086V10.9086C4 10.3008 4.41067 9.80859 4.91667 9.80859H17.75ZM13.1667 11.6419H9.5L9.39275 11.6483C9.16995 11.6748 8.96461 11.7821 8.81563 11.9499C8.66664 12.1177 8.58435 12.3342 8.58435 12.5586C8.58435 12.783 8.66664 12.9995 8.81563 13.1673C8.96461 13.3351 9.16995 13.4423 9.39275 13.4688L9.5 13.4753H13.1667L13.2739 13.4688C13.4967 13.4423 13.7021 13.3351 13.851 13.1673C14 12.9995 14.0823 12.783 14.0823 12.5586C14.0823 12.3342 14 12.1177 13.851 11.9499C13.7021 11.7821 13.4967 11.6748 13.2739 11.6483L13.1667 11.6419Z"
             fill={color}
           />
         </g>
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<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"
+            d="M11.5361 4.14185L3.86945 7.97518L11.5361 11.8085L19.2028 7.97518L11.5361 4.14185Z"
             fill={color}
             stroke={color}
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M4.5 12.5L12.5 16.5L20.5 12.5"
+            d="M3.86945 11.8086L11.5361 15.6419L19.2028 11.8086"
             stroke={color}
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M4.5 16.5L12.5 20.5L20.5 16.5"
+            d="M3.86945 15.6418L11.5361 19.4752L19.2028 15.6418"
             stroke={color}
             strokeLinecap="round"
             strokeLinejoin="round"
diff --git a/packages/web/components/elements/icons/HighlightsIcon.tsx b/packages/web/components/elements/icons/HighlightsIcon.tsx
index 10684b273..428786819 100644
--- a/packages/web/components/elements/icons/HighlightsIcon.tsx
+++ b/packages/web/components/elements/icons/HighlightsIcon.tsx
@@ -6,7 +6,6 @@ import React from 'react'
 
 export class HighlightsIcon extends React.Component<IconProps> {
   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<IconProps> {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <g>
+        <g clip-path="url(#clip0_11629_6956)">
           <path
-            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"
+            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}
+            stroke={color}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M12.8447 5.91931L16.6781 9.75265"
-            stroke="#FFD234"
+            d="M12.0153 5.57935L15.8487 9.41268"
+            stroke={color}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M5.17773 13.5859L9.01107 17.4193"
-            stroke="#FFD234"
+            d="M4.34863 13.2461L8.18197 17.0794"
+            stroke={color}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
           <path
-            d="M20.9899 15.0234V18.8568H13.3232L17.1566 15.0234H20.9899Z"
-            stroke="#FFD234"
+            d="M20.1611 14.6836V18.5169H12.4944L16.3278 14.6836H20.1611Z"
+            stroke={color}
             strokeWidth="1.25"
             strokeLinecap="round"
             strokeLinejoin="round"
diff --git a/packages/web/components/elements/icons/HomeIcon.tsx b/packages/web/components/elements/icons/HomeIcon.tsx
index 2bba94f9f..7638ef2d5 100644
--- a/packages/web/components/elements/icons/HomeIcon.tsx
+++ b/packages/web/components/elements/icons/HomeIcon.tsx
@@ -7,20 +7,19 @@ import React from 'react'
 
 export class HomeIcon extends React.Component<IconProps> {
   render() {
-    const size = (this.props.size || 26).toString()
     const color = (this.props.color || '#2A2A2A').toString()
 
     return (
       <svg
-        width="26"
-        height="26"
-        viewBox="0 0 26 26"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <g>
           <path
-            d="M19.9329 11.8028L12.7458 5.53907C12.3924 5.23127 11.8662 5.23187 11.514 5.54027L4.35753 11.8043C3.70713 12.3737 4.11003 13.445 4.97433 13.445C5.49123 13.445 5.91033 13.8641 5.91033 14.3813V19.8503C5.91033 20.3675 6.32973 20.7863 6.84663 20.7863H10.1271V15.9932C10.1271 15.7007 10.3638 15.464 10.656 15.464H13.6359C13.9281 15.464 14.1651 15.7007 14.1651 15.9932V20.7866H17.2806C17.7978 20.7866 18.2169 20.3678 18.2169 19.8506V14.3816C18.2169 13.8644 18.636 13.4453 19.1529 13.4453H19.3179C20.1831 13.4447 20.5854 12.3713 19.9329 11.8028Z"
+            d="M19.6026 10.7825L12.0964 4.24071C11.7273 3.91924 11.1778 3.91987 10.8099 4.24196L3.33566 10.7841C2.65639 11.3788 3.07717 12.4976 3.97985 12.4976C4.5197 12.4976 4.95741 12.9354 4.95741 13.4755V19.1873C4.95741 19.7275 5.39543 20.1649 5.93528 20.1649H9.36144V15.159C9.36144 14.8535 9.60865 14.6063 9.91383 14.6063H13.026C13.3312 14.6063 13.5787 14.8535 13.5787 15.159V20.1652H16.8326C17.3727 20.1652 17.8104 19.7278 17.8104 19.1877V13.4758C17.8104 12.9357 18.2482 12.498 18.788 12.498H18.9603C19.8639 12.4973 20.2841 11.3763 19.6026 10.7825Z"
             fill={color}
           />
         </g>
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<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="M13.5 6.5H7.5C6.70435 6.5 5.94129 6.81607 5.37868 7.37868C4.81607 7.94129 4.5 8.70435 4.5 9.5V21.5L4.506 21.614C4.52514 21.7802 4.58565 21.9389 4.68199 22.0756C4.77833 22.2123 4.90743 22.3227 5.05746 22.3966C5.20749 22.4705 5.37366 22.5056 5.54077 22.4987C5.70788 22.4918 5.87059 22.4431 6.014 22.357L10.5 19.666L14.986 22.357C15.1377 22.4479 15.3108 22.4969 15.4876 22.4991C15.6645 22.5013 15.8387 22.4566 15.9926 22.3695C16.1465 22.2823 16.2746 22.156 16.3637 22.0032C16.4528 21.8505 16.4999 21.6768 16.5 21.5V9.5C16.5 8.70435 16.1839 7.94129 15.6213 7.37868C15.0587 6.81607 14.2956 6.5 13.5 6.5Z"
+            d="M12.4944 6.05859H6.74445C5.98195 6.05859 5.25068 6.36149 4.71151 6.90066C4.17235 7.43983 3.86945 8.1711 3.86945 8.93359V20.4336L3.8752 20.5428C3.89354 20.7021 3.95153 20.8542 4.04386 20.9852C4.13618 21.1162 4.2599 21.222 4.40368 21.2928C4.54746 21.3637 4.70671 21.3973 4.86685 21.3907C5.027 21.3841 5.18293 21.3374 5.32036 21.2549L9.61945 18.676L13.9185 21.2549C14.0639 21.342 14.2298 21.389 14.3992 21.3911C14.5687 21.3932 14.7357 21.3503 14.8832 21.2668C15.0307 21.1833 15.1534 21.0622 15.2388 20.9159C15.3242 20.7695 15.3693 20.6031 15.3694 20.4336V8.93359C15.3694 8.1711 15.0665 7.43983 14.5274 6.90066C13.9882 6.36149 13.2569 6.05859 12.4944 6.05859Z"
             fill={color}
           />
           <path
-            d="M17.5 2.5C18.2652 2.49996 19.0015 2.79233 19.5582 3.31728C20.115 3.84224 20.4501 4.56011 20.495 5.324L20.5 5.5V17.5C20.5 17.6673 20.4581 17.8319 20.3781 17.9788C20.298 18.1256 20.1824 18.2501 20.0419 18.3407C19.9013 18.4314 19.7402 18.4853 19.5734 18.4976C19.4066 18.5098 19.2393 18.4801 19.087 18.411L18.986 18.357L17.986 17.757C17.8004 17.6456 17.656 17.4769 17.5744 17.2764C17.4929 17.0759 17.4786 16.8543 17.5337 16.645C17.5888 16.4357 17.7104 16.2499 17.8801 16.1156C18.0499 15.9812 18.2586 15.9056 18.475 15.9L18.5 15.901V5.5C18.5 5.25507 18.41 5.01866 18.2473 4.83563C18.0845 4.65259 17.8602 4.53566 17.617 4.507L17.5 4.5H11.499C11.3432 4.49965 11.1894 4.53572 11.05 4.60535C10.9106 4.67497 10.7893 4.77621 10.696 4.901L10.566 5.098C10.4124 5.29946 10.1881 5.43512 9.9383 5.47756C9.68854 5.52001 9.43199 5.46608 9.22046 5.32667C9.00893 5.18726 8.8582 4.97276 8.79871 4.7265C8.73923 4.48025 8.77542 4.2206 8.89999 4C9.14644 3.57292 9.49437 3.21316 9.91298 2.95258C10.3316 2.69199 10.808 2.53861 11.3 2.506L11.5 2.5H17.5Z"
+            d="M16.3278 2.22534C17.0611 2.2253 17.7667 2.50549 18.3003 3.00857C18.8338 3.51166 19.155 4.19961 19.198 4.93168L19.2028 5.10034V16.6003C19.2028 16.7606 19.1627 16.9184 19.086 17.0592C19.0093 17.1999 18.8985 17.3192 18.7638 17.406C18.629 17.4929 18.4747 17.5446 18.3148 17.5563C18.1549 17.5681 17.9947 17.5396 17.8487 17.4734L17.7519 17.4216L16.7935 16.8466C16.6157 16.7398 16.4773 16.5782 16.3991 16.3861C16.321 16.1939 16.3073 15.9816 16.3601 15.781C16.4129 15.5804 16.5294 15.4023 16.6921 15.2736C16.8548 15.1448 17.0548 15.0724 17.2622 15.067L17.2861 15.068V5.10034C17.2861 4.86561 17.1999 4.63906 17.0439 4.46365C16.888 4.28824 16.673 4.17618 16.4399 4.14872L16.3278 4.14201H10.5768C10.4275 4.14167 10.2801 4.17624 10.1465 4.24297C10.0129 4.30969 9.89675 4.40671 9.8073 4.5263L9.68271 4.71509C9.53552 4.90816 9.32053 5.03816 9.08118 5.07884C8.84183 5.11951 8.59596 5.06783 8.39325 4.93423C8.19053 4.80063 8.04608 4.59507 7.98908 4.35907C7.93207 4.12308 7.96676 3.87425 8.08613 3.66284C8.32231 3.25355 8.65574 2.90879 9.05691 2.65906C9.45808 2.40934 9.91462 2.26234 10.3861 2.23109L10.5778 2.22534H16.3278Z"
             fill={color}
           />
         </g>
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<IconProps> {
           <path
             d="M6.25 9.43359L12 15.1836L17.75 9.43359"
             stroke={color}
-            strokeWidth="1.75"
+            strokeWidth="1.5"
             strokeLinecap="round"
             strokeLinejoin="round"
           />
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<IconProps> {
         <path
           d="M17.75 15.1836L12 9.43359L6.25 15.1836"
           stroke={color}
-          strokeWidth="1.75"
+          strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
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<IconProps> {
 
     return (
       <svg
-        width="24"
-        height="25"
-        viewBox="0 0 24 25"
+        width="23"
+        height="24"
+        viewBox="0 0 23 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <g>
           <path
-            d="M20.0001 6.30859C20.255 6.30888 20.5001 6.40647 20.6855 6.58144C20.8708 6.75641 20.9823 6.99555 20.9973 7.24999C21.0122 7.50443 20.9294 7.75497 20.7658 7.95043C20.6023 8.14588 20.3702 8.27149 20.1171 8.30159L20.0001 8.30859H19.9191L19.0001 19.3086C19.0002 20.0738 18.7078 20.8101 18.1828 21.3669C17.6579 21.9236 16.94 22.2587 16.1761 22.3036L16.0001 22.3086H8.00011C6.40211 22.3086 5.09611 21.0596 5.00811 19.5586L5.00311 19.3916L4.08011 8.30859H4.00011C3.74523 8.30831 3.50008 8.21071 3.31474 8.03575C3.12941 7.86078 3.01788 7.62164 3.00294 7.3672C2.988 7.11276 3.07079 6.86221 3.23438 6.66676C3.39797 6.47131 3.63002 6.3457 3.88311 6.31559L4.00011 6.30859H20.0001Z"
+            d="M18.5823 7C18.816 7.00026 19.0407 7.08972 19.2106 7.25011C19.3805 7.4105 19.4827 7.62971 19.4964 7.86295C19.5101 8.09618 19.4342 8.32585 19.2842 8.50501C19.1343 8.68418 18.9216 8.79932 18.6896 8.82692L18.5823 8.83333H18.5081L17.6656 18.9167C17.6657 19.6181 17.3977 20.2931 16.9165 20.8034C16.4353 21.3138 15.7772 21.6209 15.077 21.6621L14.9156 21.6667H7.58232C6.11748 21.6667 4.92032 20.5217 4.83965 19.1458L4.83507 18.9927L3.98898 8.83333H3.91565C3.68201 8.83307 3.45729 8.74361 3.2874 8.58322C3.11751 8.42283 3.01527 8.20363 3.00158 7.97039C2.98788 7.73715 3.06377 7.50749 3.21373 7.32832C3.36368 7.14915 3.5764 7.03401 3.8084 7.00642L3.91565 7H18.5823Z"
             fill={color}
           />
           <path
-            d="M14 2.30859C14.5304 2.30859 15.0391 2.51931 15.4142 2.89438C15.7893 3.26945 16 3.77816 16 4.30859C15.9997 4.56347 15.9021 4.80863 15.7272 4.99396C15.5522 5.1793 15.313 5.29083 15.0586 5.30577C14.8042 5.3207 14.5536 5.23792 14.3582 5.07433C14.1627 4.91074 14.0371 4.67869 14.007 4.42559L14 4.30859H10L9.993 4.42559C9.9629 4.67869 9.83729 4.91074 9.64183 5.07433C9.44638 5.23792 9.19584 5.3207 8.94139 5.30577C8.68695 5.29083 8.44782 5.1793 8.27285 4.99396C8.09788 4.80863 8.00028 4.56347 8 4.30859C7.99984 3.80402 8.19041 3.31803 8.5335 2.94805C8.87659 2.57806 9.34685 2.35144 9.85 2.31359L10 2.30859H14Z"
+            d="M13.0823 3.30859C13.5685 3.30859 14.0348 3.50175 14.3786 3.84556C14.7225 4.18938 14.9156 4.6557 14.9156 5.14193C14.9153 5.37557 14.8259 5.60029 14.6655 5.77018C14.5051 5.94007 14.2859 6.04231 14.0527 6.056C13.8194 6.06969 13.5898 5.99381 13.4106 5.84385C13.2314 5.69389 13.1163 5.48118 13.0887 5.24918L13.0823 5.14193H9.41561L9.40919 5.24918C9.3816 5.48118 9.26645 5.69389 9.08729 5.84385C8.90812 5.99381 8.67846 6.06969 8.44522 6.056C8.21198 6.04231 7.99277 5.94007 7.83239 5.77018C7.672 5.60029 7.58253 5.37557 7.58228 5.14193C7.58213 4.6794 7.75681 4.23391 8.07131 3.89476C8.38581 3.55561 8.81688 3.34787 9.27811 3.31318L9.41561 3.30859H13.0823Z"
             fill={color}
           />
         </g>
diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx
index c3a8b09d0..e1b5742b9 100644
--- a/packages/web/components/templates/NavigationLayout.tsx
+++ b/packages/web/components/templates/NavigationLayout.tsx
@@ -19,6 +19,7 @@ import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
 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'
 
 export type NavigationSection =
   | 'home'
@@ -144,13 +145,20 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
         />
       </SpanBox>
       {!isLoading && showNavMenu && (
-        <NavigationMenu
-          section={props.section}
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          setShowAddLinkModal={() => {}}
-          showMenu={showNavMenu}
-          setShowMenu={setShowNavMenu}
-        />
+        <>
+          <NavigationMenu
+            section={props.section}
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            setShowAddLinkModal={() => {}}
+            showMenu={showNavMenu}
+            setShowMenu={setShowNavMenu}
+          />
+          <SpanBox
+            css={{
+              width: LIBRARY_LEFT_MENU_WIDTH,
+            }}
+          ></SpanBox>
+        </>
       )}
       {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 9ba894bed..ea0a5f054 100644
--- a/packages/web/components/templates/navMenu/NavigationMenu.tsx
+++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx
@@ -153,28 +153,36 @@ const LibraryNav = (props: NavigationMenuProps): JSX.Element => {
         text="Home"
         section="home"
         isSelected={props.section == 'home'}
-        icon={<HomeIcon color={theme.colors.thHomeIcon.toString()} />}
+        icon={<HomeIcon color={theme.colors.thLibraryMenuPrimary.toString()} />}
       />
       <NavButton
         {...props}
         text="Library"
         section="library"
         isSelected={props.section == 'library'}
-        icon={<LibraryIcon color={theme.colors.ctaBlue.toString()} />}
+        icon={
+          <LibraryIcon color={theme.colors.thLibraryMenuPrimary.toString()} />
+        }
       />
       <NavButton
         {...props}
         text="Subscriptions"
         section="subscriptions"
         isSelected={props.section == 'subscriptions'}
-        icon={<FollowingIcon color="#F59932" />}
+        icon={
+          <FollowingIcon color={theme.colors.thLibraryMenuPrimary.toString()} />
+        }
       />
       <NavButton
         {...props}
         text="Highlights"
         section="highlights"
         isSelected={props.section == 'highlights'}
-        icon={<HighlightsIcon color={theme.colors.highlight.toString()} />}
+        icon={
+          <HighlightsIcon
+            color={theme.colors.thLibraryMenuPrimary.toString()}
+          />
+        }
       />
       <Button
         style="articleActionIcon"

From 9b92cceedbd92bdd2820fdc7f61b8d43f0507f67 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 13 Jun 2024 20:57:08 +0800
Subject: [PATCH 4/5] Label and border updates

---
 packages/web/components/elements/LabelChip.tsx              | 2 +-
 .../components/patterns/LibraryCards/LibraryGridCard.tsx    | 4 +++-
 packages/web/components/tokens/stitches.config.ts           | 6 ++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

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/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 5c99cbed3..857816954 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -72,7 +72,9 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         borderStyle: 'none',
         overflow: 'hidden',
         cursor: 'pointer',
-        border: props.legacyLayout ? 'unset' : '1px solid black',
+        border: props.legacyLayout
+          ? 'unset'
+          : '1px solid $thLeftMenuBackground',
         '@media (max-width: 930px)': {
           width: 'calc(100% - 30px)',
         },
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 7638b9de4..4351694c9 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -199,7 +199,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thHomeIcon: '#2A2A2A',
 
         thLabelChipForeground: '#2A2A2A',
-        thLabelChipBackground: '#F5F5F5',
+        thLabelChipBackground: '#EDEDED',
         thLabelChipSelectedBorder: 'black',
         thLabelChipUnselectedBorder: '#F5F5F5',
         thLabelOutlineChipBorder: '#D9D9D9',
@@ -354,7 +354,7 @@ const darkThemeSpec = {
     thHomeIcon: '#FFFFFF',
 
     thLabelChipForeground: '#EBEBEB',
-    thLabelChipBackground: '#2A2A2A',
+    thLabelChipBackground: '#343434',
     thLabelChipSelectedBorder: '#FFEA9F',
     thLabelChipUnselectedBorder: '#2A2A2A',
     thLabelOutlineChipBorder: '#6A696850',
@@ -438,6 +438,7 @@ const apolloThemeSpec = {
     backgroundMedium: '#525252',
 
     thLibraryMultiselectHover: '#EEE8D5',
+    thLabelChipBackground: '#6A6968',
   },
 }
 
@@ -456,6 +457,7 @@ const sepiaThemeSpec = {
     thNavMenuFooter: '#DDD6C1',
 
     thLibrarySelectionColor: '#DDD6C1',
+    thLabelChipBackground: '#EEE8D5',
     thBackground4: '#DDD6C166', // used on hover of menu items
     thBorderColor: '#DDD6C1',
 

From ecb7b6de3a6728d457df894c1cc86e440fcebf68 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 13 Jun 2024 21:17:03 +0800
Subject: [PATCH 5/5] Initial work on action items, need to test with larger
 data sets

---
 .../web/components/nav-containers/home.tsx    | 109 ++++++++++++++----
 1 file changed, 88 insertions(+), 21 deletions(-)

diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx
index a20efbe0c..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 (
     <VStack
       distribution="start"
@@ -224,11 +259,15 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
       </SpanBox>
 
       <Pagination
-        items={props.homeSection.items}
+        items={items}
         itemsPerPage={4}
         loadMoreButtonText="Load more Top Picks"
         render={(homeItem) => (
-          <TopicPickHomeItemView key={homeItem.id} homeItem={homeItem} />
+          <TopicPickHomeItemView
+            key={homeItem.id}
+            homeItem={homeItem}
+            dispatchList={dispatchList}
+          />
         )}
       />
     </VStack>
@@ -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 (
     <VStack
       css={{
@@ -575,23 +619,46 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
       </Box>
       <SpanBox css={{ px: '20px' }}></SpanBox>
       <HStack css={{ gap: '10px', my: '15px', px: '20px' }}>
-        <Button style="homeAction">
-          <AddToLibraryActionIcon
-            color={theme.colors.homeActionIcons.toString()}
-          />
-        </Button>
-        <Button style="homeAction">
+        {props.homeItem.canSave && (
+          <Button style="homeAction">
+            <AddToLibraryActionIcon
+              color={theme.colors.homeActionIcons.toString()}
+            />
+          </Button>
+        )}
+        {/* <Button style="homeAction">
           <CommentActionIcon color={theme.colors.homeActionIcons.toString()} />
-        </Button>
-        <Button style="homeAction">
-          <ShareActionIcon color={theme.colors.homeActionIcons.toString()} />
-        </Button>
-        <Button style="homeAction">
-          <ArchiveActionIcon color={theme.colors.homeActionIcons.toString()} />
-        </Button>
-        <Button style="homeAction">
-          <RemoveActionIcon color={theme.colors.homeActionIcons.toString()} />
-        </Button>
+        </Button> */}
+
+        {props.homeItem.canArchive && (
+          <Button
+            style="homeAction"
+            onClick={(event) => {
+              // archiveItem(props.homeItem)
+              console.log('archiving')
+              props.dispatchList({
+                type: 'REMOVE_ITEM',
+                itemId: props.homeItem.id,
+              })
+              event.preventDefault()
+              event.stopPropagation()
+            }}
+          >
+            <ArchiveActionIcon
+              color={theme.colors.homeActionIcons.toString()}
+            />
+          </Button>
+        )}
+        {props.homeItem.canDelete && (
+          <Button style="homeAction">
+            <RemoveActionIcon color={theme.colors.homeActionIcons.toString()} />
+          </Button>
+        )}
+        {props.homeItem.canShare && (
+          <Button style="homeAction">
+            <ShareActionIcon color={theme.colors.homeActionIcons.toString()} />
+          </Button>
+        )}
       </HStack>
       <Box
         css={{ mt: '15px', width: '100%', height: '1px', bg: '$homeDivider' }}