diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index c9460941e..22c782ab0 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -37,6 +37,19 @@ const textVariants = {
my: '6px',
color: '$grayText',
},
+ settingsSection: {
+ fontWeight: '600',
+ fontSize: '17px',
+ fontFamily: '$inter',
+ color: '$grayText',
+ },
+ settingsItem: {
+ fontSize: '13px',
+ fontFamily: '$display',
+ color: '$grayText',
+ marginBlockStart: '0px',
+ marginBlockEnd: '0px',
+ },
userNote: {
fontSize: '16px',
paddingTop: '0px',
diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx
index 48bdcbb33..93d0d76d7 100644
--- a/packages/web/components/templates/navMenu/LibraryMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useEffect, useMemo, useRef } from 'react'
import { StyledText } from '../../elements/StyledText'
import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
-import { Circle } from 'phosphor-react'
+import { Circle, Gear, GearSix, UserGear } from 'phosphor-react'
import {
Subscription,
SubscriptionType,
@@ -24,6 +24,7 @@ import { FollowingIcon } from '../../elements/icons/FollowingIcon'
import { HomeIcon } from '../../elements/icons/HomeIcon'
import { LibraryIcon } from '../../elements/icons/LibraryIcon'
import { HighlightsIcon } from '../../elements/icons/HighlightsIcon'
+import { CoverImage } from '../../elements/CoverImage'
export const LIBRARY_LEFT_MENU_WIDTH = '275px'
@@ -122,9 +123,10 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
-
+
+ {/*
-
+ */}
@@ -149,6 +151,7 @@ const LibraryNav = (props: LibraryFilterMenuProps): JSX.Element => {
{
)
}
+const Shortcuts = (props: LibraryFilterMenuProps): JSX.Element => {
+ const shortcuts = [
+ {
+ id: '12asdfasdf',
+ name: 'Omnivore Blog',
+ icon: 'https://substackcdn.com/image/fetch/w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F052c15c4-ecfd-4d32-87db-13bcac9afad5_512x512.png',
+ filter: 'subscription:"Money Talk"',
+ type: 'newsletter',
+ },
+ ]
+
+ return (
+
+
+
+ SHORTCUTS
+
+
+
+ {shortcuts.map((shortcut) => {
+ return (
+
+
+ {shortcut.name}
+ {/*
+
+ */}
+
+ )
+ })}
+
+ )
+}
+
function SavedSearches(
props: LibraryFilterMenuProps & { savedSearches: SavedSearch[] | undefined }
): JSX.Element {
diff --git a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
index 50efdebf8..764b732d9 100644
--- a/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetSubscriptionsQuery.tsx
@@ -16,6 +16,7 @@ export type Subscription = {
newsletterEmail?: string
url?: string
+ icon?: string
description?: string
status: SubscriptionStatus
@@ -57,6 +58,7 @@ export function useGetSubscriptionsQuery(
type
newsletterEmail
url
+ icon
description
status
unsubscribeMailTo