From c7b1794591229b4fced48206393785a7b8fccc6b Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 12 Jun 2024 21:00:14 +0800 Subject: [PATCH 1/5] Implement more of Recently Added section --- .../api/src/resolvers/function_resolvers.ts | 2 +- .../web/components/nav-containers/home.tsx | 140 ++++++++++++++---- 2 files changed, 116 insertions(+), 26 deletions(-) diff --git a/packages/api/src/resolvers/function_resolvers.ts b/packages/api/src/resolvers/function_resolvers.ts index 506f722a5..dfb0e276c 100644 --- a/packages/api/src/resolvers/function_resolvers.ts +++ b/packages/api/src/resolvers/function_resolvers.ts @@ -628,7 +628,7 @@ export const functionResolvers = { switch (section.layout) { case 'just_added': - return 'Just Added' + return 'Recently Added' case 'top_picks': return 'Top Picks' case 'quick_links': diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 8ae31204b..2f07ffa5c 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -26,6 +26,7 @@ import { } from '../../lib/networking/queries/useGetSubscriptionsQuery' import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives' import { Toaster } from 'react-hot-toast' +import Link from 'next/link' export function HomeContainer(): JSX.Element { const homeData = useGetHomeItems() @@ -47,7 +48,7 @@ export function HomeContainer(): JSX.Element { distribution="start" css={{ width: '646px', - gap: '40px', + gap: '50px', minHeight: '100vh', '@mdDown': { width: '100%', @@ -109,19 +110,64 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => { gap: '20px', }} > - - {props.homeSection.title} - - {props.homeSection.items.map((homeItem) => { - return - })} + + {props.homeSection.title} + + + + + + + {props.homeSection.items.map((homeItem) => { + return + })} + ) } @@ -301,6 +347,7 @@ const TimeAgo = (props: HomeItemViewProps): JSX.Element => { const Title = (props: HomeItemViewProps): JSX.Element => { return ( { display: '-webkit-box', '-webkit-line-clamp': '3', '-webkit-box-orient': 'vertical', + '&:title-text': { + transition: 'text-decoration 0.3s ease', + }, + }} + > + {props.homeItem.title} + + ) +} + +const TitleSmall = (props: HomeItemViewProps): JSX.Element => { + return ( + {props.homeItem.title} @@ -353,13 +428,19 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => { return ( { if (event.metaKey || event.ctrlKey) { @@ -372,12 +453,15 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => { - - + + + + - + + <TitleSmall homeItem={props.homeItem} /> </VStack> ) } @@ -391,12 +475,15 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => { width: '100%', p: '0px', pt: '35px', - + cursor: 'pointer', borderRadius: '5px', '&:hover': { bg: '$homeCardHover', borderRadius: '0px', }, + '&:hover .title-text': { + textDecoration: 'underline', + }, }} onClick={(event) => { if (event.metaKey || event.ctrlKey) { @@ -511,13 +598,17 @@ const SiteIconLarge = styled('img', { borderRadius: '100px', }) -const SourceInfo = (props: HomeItemViewProps) => ( +type SourceInfoProps = { + subtle?: boolean +} + +const SourceInfo = (props: HomeItemViewProps & SourceInfoProps) => ( <HoverCard.Root> <HoverCard.Trigger asChild> <HStack distribution="start" alignment="center" - css={{ gap: '5px', cursor: 'pointer' }} + css={{ gap: '8px', cursor: 'pointer' }} > {props.homeItem.source.icon && ( <SiteIconSmall @@ -528,11 +619,10 @@ const SourceInfo = (props: HomeItemViewProps) => ( <HStack css={{ lineHeight: '1', - pb: '3px', fontFamily: '$inter', fontWeight: '500', - fontSize: '13px', - color: '$homeTextSource', + fontSize: props.subtle ? '12px' : '13px', + color: props.subtle ? '$homeTextSubtle' : '$homeTextSource', textDecoration: 'underline', }} > From 6424ea86694a50a3007fb3bb5c320b88cb16da2e Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Wed, 12 Jun 2024 21:11:30 +0800 Subject: [PATCH 2/5] Fix slugs for opening articles --- .../web/components/nav-containers/home.tsx | 34 ++++++++++++++----- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx index 2f07ffa5c..3d1029ab8 100644 --- a/packages/web/components/nav-containers/home.tsx +++ b/packages/web/components/nav-containers/home.tsx @@ -26,12 +26,18 @@ import { } from '../../lib/networking/queries/useGetSubscriptionsQuery' import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives' import { Toaster } from 'react-hot-toast' -import Link from 'next/link' +import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery' export function HomeContainer(): JSX.Element { const homeData = useGetHomeItems() + const { viewerData } = useGetViewerQuery() + useApplyLocalTheme() + const viewerUsername = useMemo(() => { + return viewerData?.me?.profile.username + }, [viewerData]) + return ( <VStack distribution="start" @@ -65,6 +71,7 @@ export function HomeContainer(): JSX.Element { <JustAddedHomeSection key={`section-${idx}`} homeSection={homeSection} + viewerUsername={viewerUsername} /> ) case 'top_picks': @@ -72,6 +79,7 @@ export function HomeContainer(): JSX.Element { <TopPicksHomeSection key={`section-${idx}`} homeSection={homeSection} + viewerUsername={viewerUsername} /> ) case 'quick_links': @@ -79,6 +87,7 @@ export function HomeContainer(): JSX.Element { <QuickLinksHomeSection key={`section-${idx}`} homeSection={homeSection} + viewerUsername={viewerUsername} /> ) case 'hidden': @@ -86,6 +95,7 @@ export function HomeContainer(): JSX.Element { <HiddenHomeSection key={`section-${idx}`} homeSection={homeSection} + viewerUsername={viewerUsername} /> ) default: @@ -99,9 +109,11 @@ export function HomeContainer(): JSX.Element { type HomeSectionProps = { homeSection: HomeSection + viewerUsername: string | undefined } const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => { + const router = useRouter() return ( <VStack distribution="start" @@ -137,7 +149,7 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => { <Button style="link" onClick={(event) => { - // router + router.push('/l/library') event.preventDefault() }} css={{ @@ -211,7 +223,7 @@ const QuickLinksHomeSection = (props: HomeSectionProps): JSX.Element => { css={{ width: '100%', gap: '20px', - bg: '#3D3D3D', + bg: '$thNavMenuFooter', py: '30px', px: '20px', borderRadius: '5px', @@ -325,6 +337,7 @@ const CoverImage = styled('img', { type HomeItemViewProps = { homeItem: HomeItem + viewerUsername?: string | undefined } const TimeAgo = (props: HomeItemViewProps): JSX.Element => { @@ -443,10 +456,11 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => { }, }} onClick={(event) => { + const path = `/${props.viewerUsername ?? 'me'}/${props.homeItem.slug}` if (event.metaKey || event.ctrlKey) { - window.open(props.homeItem.url, '_blank') + window.open(path, '_blank') } else { - router.push(props.homeItem.url) + router.push(path) } }} > @@ -486,10 +500,11 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => { }, }} onClick={(event) => { + const path = `/${props.viewerUsername ?? 'me'}/${props.homeItem.slug}` if (event.metaKey || event.ctrlKey) { - window.open(props.homeItem.url, '_blank') + window.open(path, '_blank') } else { - router.push(props.homeItem.url) + router.push(path) } }} alignment="start" @@ -569,10 +584,11 @@ const QuickLinkHomeItemView = (props: HomeItemViewProps): JSX.Element => { }, }} onClick={(event) => { + const path = `/${props.viewerUsername ?? 'me'}/${props.homeItem.slug}` if (event.metaKey || event.ctrlKey) { - window.open(props.homeItem.url, '_blank') + window.open(path, '_blank') } else { - router.push(props.homeItem.url) + router.push(path) } }} > From 25082b31829be73336e76fff267a1712ca63e8a9 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Wed, 12 Jun 2024 21:16:38 +0800 Subject: [PATCH 3/5] Improve action button hover --- packages/web/components/elements/Button.tsx | 2 +- packages/web/components/tokens/stitches.config.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index 010e0bdba..350362947 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -436,7 +436,7 @@ export const Button = styled('button', { cursor: 'pointer', p: '5px', borderRadius: '5px', - '&:hover': { bg: '$readerHoverBg', opacity: '1' }, + '&:hover': { bg: '$homeActionHoverBg', opacity: '1' }, }, menuAction: { display: 'flex', diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 6ed792011..1dee7a738 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -157,7 +157,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = readerTableHeader: '#FFFFFF', readerMargin: 'white', readerTextSubtle: '#898989', - readerHoverBg: '#1E1E1E', // Avatar Fallback color avatarBg: '#FFEA9F', @@ -236,6 +235,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = homeTextBody: '#3D3D3D', homeTextSubtle: '#898989', homeActionIcons: '#898989', + homeActionHoverBg: '#DFDFDF', homeDivider: '#D9D9D9', thLibraryAISummaryBorder: '#6A6968', @@ -306,7 +306,6 @@ const darkThemeSpec = { readerFontHighContrast: 'white', readerTableHeader: '#FFFFFF', readerMargin: '#2A2A2A', - readerHoverBg: '#1E1E1E', readerTextSubtle: '#EDEDED', avatarBg: '#7B5C3E', @@ -390,6 +389,7 @@ const darkThemeSpec = { homeTextBody: '#D9D9D9', homeTextSubtle: '#898989', homeActionIcons: '#898989', + homeActionHoverBg: '#515151', homeDivider: '#3D3D3D', thLibraryAISummaryBorder: '#6A6968', @@ -427,6 +427,7 @@ const apolloThemeSpec = { homeCardHover: '#525252', homeDivider: '#6A6968', + homeActionHoverBg: '#515151', thBackground: '#474747', thBackground2: '#515151', @@ -456,6 +457,7 @@ const sepiaThemeSpec = { homeCardHover: '#EEE8D5', homeDivider: '#DDD6C1', + homeActionHoverBg: '#DDD6C1', thLibraryMultiselectHover: '#EEE8D5', }, From 9f6e65cb9dcff2fff756763c44b2f7e402fe9df3 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Wed, 12 Jun 2024 21:43:49 +0800 Subject: [PATCH 4/5] resize the shortcuts tree view --- .../components/templates/navMenu/NavigationMenu.tsx | 11 ++++++++--- packages/web/package.json | 3 ++- yarn.lock | 2 +- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx index 2f02eb8e0..ebe18b1cd 100644 --- a/packages/web/components/templates/navMenu/NavigationMenu.tsx +++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx @@ -39,6 +39,7 @@ import { NavMoreButtonUpIcon } from '../../elements/icons/NavMoreButtonUp' import { ShortcutFolderClosed } from '../../elements/icons/ShortcutFolderClosed' import { TrashSectionIcon } from '../../elements/icons/TrashSectionIcon' import { ShortcutFolderOpen } from '../../elements/icons/ShortcutFolderOpen' +import useResizeObserver from 'use-resize-observer' export const LIBRARY_LEFT_MENU_WIDTH = '275px' @@ -356,6 +357,8 @@ const Shortcuts = (props: NavigationMenuProps): JSX.Element => { </HStack> <Box css={{ + width: '100%', + height: '100%', '[role="treeitem"]': { outline: 'none', }, @@ -456,6 +459,7 @@ const cachedShortcutsData = (): Shortcut[] | undefined => { const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => { const router = useRouter() + const { ref, width, height } = useResizeObserver() const { isValidating, data } = useSWR('/api/shortcuts', getShortcuts, { fallbackData: cachedShortcutsData(), @@ -562,7 +566,7 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => { ) return ( - <> + <div ref={ref}> {!isValidating && ( <Tree ref={props.treeRef} @@ -575,12 +579,13 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => { onActivate={onActivate} rowHeight={36} initialOpenState={folderOpenState} - width={275} + width={width} + height={640} > {NodeRenderer} </Tree> )} - </> + </div> ) } diff --git a/packages/web/package.json b/packages/web/package.json index bb1d23f49..bc7ba1258 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -67,6 +67,7 @@ "remark-gfm": "^3.0.1", "sharp": "^0.32.6", "swr": "^2.2.5", + "use-resize-observer": "^9.1.0", "uuid": "^8.3.2", "yet-another-react-lightbox": "^3.12.0" }, @@ -108,4 +109,4 @@ "volta": { "extends": "../../package.json" } -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index aad75218f..549cbf289 100644 --- a/yarn.lock +++ b/yarn.lock @@ -31183,7 +31183,7 @@ use-latest@^1.0.0: dependencies: use-isomorphic-layout-effect "^1.0.0" -use-resize-observer@^9.0.0: +use-resize-observer@^9.0.0, use-resize-observer@^9.1.0: version "9.1.0" resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c" integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow== From 68624714d6a0d0ae506063870fdddf45c0929e34 Mon Sep 17 00:00:00 2001 From: Jackson Harper <jacksonh@gmail.com> Date: Wed, 12 Jun 2024 21:55:36 +0800 Subject: [PATCH 5/5] Some fixes for responsive --- .../components/templates/NavigationLayout.tsx | 22 ++++++++++++------- .../templates/library/LibraryContainer.tsx | 7 ++++++ .../templates/library/LibraryHeader.tsx | 2 +- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/packages/web/components/templates/NavigationLayout.tsx b/packages/web/components/templates/NavigationLayout.tsx index 9d23ce1e5..a1bb2f4ad 100644 --- a/packages/web/components/templates/NavigationLayout.tsx +++ b/packages/web/components/templates/NavigationLayout.tsx @@ -1,10 +1,10 @@ import { PageMetaData, PageMetaDataProps } from '../patterns/PageMetaData' -import { Box, HStack, VStack } from '../elements/LayoutPrimitives' +import { HStack, SpanBox, VStack } from '../elements/LayoutPrimitives' import { ReactNode, useEffect, useState, useCallback } from 'react' import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery' import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts' import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts' -import { NextRouter, useRouter } from 'next/router' +import { useRouter } from 'next/router' import { ConfirmationModal } from '../patterns/ConfirmationModal' import { KeyboardShortcutListModal } from './KeyboardShortcutListModal' import { setupAnalytics } from '../../lib/analytics' @@ -19,8 +19,6 @@ 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 'allotment/dist/style.css' -import { LibrarySideBar } from './library/LibrarySideBar' export type NavigationSection = | 'home' @@ -122,11 +120,19 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element { {props.pageMetaDataProps ? ( <PageMetaData {...props.pageMetaDataProps} /> ) : null} - <Header - toggleMenu={() => { - setShowNavMenu(!showNavMenu) + <SpanBox + css={{ + '@lgDown': { + display: 'none', + }, }} - /> + > + <Header + toggleMenu={() => { + setShowNavMenu(!showNavMenu) + }} + /> + </SpanBox> {showNavMenu && ( <NavigationMenu section={props.section} diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index 8bd7babab..94d226a87 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -926,6 +926,9 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element { px: '20px', py: '20px', width: '100%', + '@mdDown': { + px: '0px', + }, }} distribution="start" alignment="start" @@ -1189,6 +1192,10 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element { '@lgDown': { px: '10px', }, + '@mdDown': { + px: '0px', + gap: '0px', + }, gridTemplateColumns: props.layout == 'LIST_LAYOUT' ? 'none' diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx index aead3f2fe..b982c45de 100644 --- a/packages/web/components/templates/library/LibraryHeader.tsx +++ b/packages/web/components/templates/library/LibraryHeader.tsx @@ -133,7 +133,7 @@ const HeaderControls = (props: LibraryHeaderProps): JSX.Element => { <SpanBox css={{ display: 'none', - '@mdDown': { display: 'flex' }, + '@lgDown': { display: 'flex' }, }} > <MenuHeaderButton {...props} />