Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Work on new left menu w/shortcuts

Browse Source
This commit is contained in:
Jackson Harper
2024-06-10 17:34:38 +08:00
parent 4295e8228d
commit 3f6e7c924a
70 changed files with 1043 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/components/templates/AddLinkModal.tsx
View File

@ -1,6 +1,6 @@
import { useCallback, useRef, useState } from 'react'
import * as Progress from '@radix-ui/react-progress'
import { File, Info } from 'phosphor-react'
import { File, Info } from '@phosphor-icons/react'
import { locale, timeZone } from '../../lib/dateFormatting'
import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
import { Button } from '../elements/Button'

6
packages/web/components/templates/NavigationLayout.tsx
View File

@ -17,12 +17,10 @@ import { ThemeId, theme } from '../tokens/stitches.config'
import { NavigationMenu } from './navMenu/NavigationMenu'
import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
import { Button } from '../elements/Button'
import { List } from 'phosphor-react'
import { List } from '@phosphor-icons/react'
import { usePersistedState } from '../../lib/hooks/usePersistedState'
import { Allotment } from 'allotment'
import 'allotment/dist/style.css'
import { LibrarySideBar } from './library/LibrarySideBar'
import NoSsr from './NoSsr'
export type NavigationSection =
| 'justread'
@ -126,8 +124,10 @@ export function NavigationLayout(props: NavigationLayoutProps): JSX.Element {
/>
<NavigationMenu
section={props.section}
// eslint-disable-next-line @typescript-eslint/no-empty-function
setShowAddLinkModal={() => {}}
searchTerm=""
// eslint-disable-next-line @typescript-eslint/no-empty-function
applySearchQuery={() => {}}
showFilterMenu={showNavMenu}
setShowFilterMenu={setShowNavMenu}

2
packages/web/components/templates/PrimaryDropdown.tsx
View File

@ -1,5 +1,5 @@
import { useRouter } from 'next/router'
import { Moon, Sun } from 'phosphor-react'
import { Moon, Sun } from '@phosphor-icons/react'
import { ReactNode, useCallback } from 'react'
import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
import { Avatar } from '../elements/Avatar'

2
packages/web/components/templates/SettingsLayout.tsx
View File

@ -13,7 +13,7 @@ import { SettingsMenu } from './navMenu/SettingsMenu'
import { SettingsDropdown } from './navMenu/SettingsDropdown'
import { useVerifyAuth } from '../../lib/hooks/useVerifyAuth'
import Link from 'next/link'
import { CaretLeft } from 'phosphor-react'
import { CaretLeft } from '@phosphor-icons/react'
type SettingsLayoutProps = {
title?: string

2
packages/web/components/templates/UploadModal.tsx
View File

@ -1,7 +1,7 @@
import * as Progress from '@radix-ui/react-progress'
import { styled } from '@stitches/react'
import axios from 'axios'
import { File } from 'phosphor-react'
import { File } from '@phosphor-icons/react'
import { useCallback, useRef, useState } from 'react'
import Dropzone, { DropEvent, DropzoneRef, FileRejection } from 'react-dropzone'
import { v4 as uuidv4 } from 'uuid'

2
packages/web/components/templates/article/NotebookHeader.tsx
View File

@ -1,6 +1,6 @@
import { HStack } from '../../elements/LayoutPrimitives'
import { StyledText } from '../../elements/StyledText'
import { Sidebar } from 'phosphor-react'
import { Sidebar } from '@phosphor-icons/react'
import { theme } from '../../tokens/stitches.config'
import { Button } from '../../elements/Button'
import { ExportIcon } from '../../elements/icons/ExportIcon'

12
packages/web/components/templates/article/NotebookModal.tsx
View File

@ -9,7 +9,7 @@ import { StyledText } from '../../elements/StyledText'
import { theme } from '../../tokens/stitches.config'
import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
import { useCallback, useState } from 'react'
import { X } from 'phosphor-react'
import { X } from '@phosphor-icons/react'
import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
import { diff_match_patch } from 'diff-match-patch'
@ -37,11 +37,13 @@ export const getHighlightLocation = (patch: string): number | undefined => {
export function NotebookModal(props: NotebookModalProps): JSX.Element {
const [showConfirmDeleteNote, setShowConfirmDeleteNote] = useState(false)
const [allAnnotations, setAllAnnotations] =
useState<Highlight[] | undefined>(undefined)
const [allAnnotations, setAllAnnotations] = useState<Highlight[] | undefined>(
undefined
)
const [deletedHighlights, setDeletedAnnotations] =
useState<Highlight[] | undefined>(undefined)
const [deletedHighlights, setDeletedAnnotations] = useState<
Highlight[] | undefined
>(undefined)
const handleClose = useCallback(() => {
props.onClose(allAnnotations ?? [], deletedHighlights ?? [])

2
packages/web/components/templates/article/ReaderSettingsControl.tsx
View File

@ -8,7 +8,7 @@ import {
CaretLeft,
CaretRight,
Check,
} from 'phosphor-react'
} from '@phosphor-icons/react'
import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
import { showSuccessToast } from '../../../lib/toastHelpers'
import { ReaderSettings } from '../../../lib/hooks/useReaderSettings'

2
packages/web/components/templates/article/SetLabelsControl.tsx
View File

@ -5,7 +5,7 @@ import { StyledText } from '../../elements/StyledText'
import { styled, theme } from '../../tokens/stitches.config'
import { Label } from '../../../lib/networking/fragments/labelFragment'
import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
import { Check, Circle, Plus, WarningCircle } from 'phosphor-react'
import { Check, Circle, Plus, WarningCircle } from '@phosphor-icons/react'
import { createLabelMutation } from '../../../lib/networking/mutations/createLabelMutation'
import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
import { randomLabelColorHex } from '../../../utils/settings-page/labels/labelColorObjects'

2
packages/web/components/templates/article/ShareModal.tsx
View File

@ -16,7 +16,7 @@ import { useCopyLink } from '../../../lib/hooks/useCopyLink'
import { CloseIcon } from '../../elements/images/CloseIcon'
import { OmnivoreLogoIcon } from '../../elements/images/OmnivoreNameLogo'
import { useState } from 'react'
import { TwitterLogo, FacebookLogo } from 'phosphor-react'
import { TwitterLogo, FacebookLogo } from '@phosphor-icons/react'
type ShareType = 'link' | 'highlight'

2
packages/web/components/templates/discoverFeed/DiscoverHeader/SmallTopicBar.tsx
View File

@ -1,6 +1,6 @@
import { HStack } from '../../../elements/LayoutPrimitives'
import { TopicTab } from './TopicTab'
import { CaretLeft, CaretRight } from 'phosphor-react'
import { CaretLeft, CaretRight } from '@phosphor-icons/react'
import React, { useEffect, useRef, useState } from 'react'
import { TopicTabData } from '../DiscoverContainer'

2
packages/web/components/templates/discoverFeed/DiscoverHeader/SmallerHeaderLayout.tsx
View File

@ -2,7 +2,7 @@ import React from 'react'
import { HStack } from '../../../elements/LayoutPrimitives'
import { OmnivoreSmallLogo } from '../../../elements/images/OmnivoreNameLogo'
import { theme } from '../../../tokens/stitches.config'
import { FunnelSimple } from 'phosphor-react'
import { FunnelSimple } from '@phosphor-icons/react'
import { DiscoverHeaderProps } from './DiscoverHeader'
import { SmallTopicBar } from './SmallTopicBar'
import { PrimaryDropdown } from '../../PrimaryDropdown'

2
packages/web/components/templates/discoverFeed/DiscoverHeader/TopicBar.tsx
View File

@ -1,6 +1,6 @@
import { Box, HStack } from '../../../elements/LayoutPrimitives'
import { TopicTab } from './TopicTab'
import { CaretLeft, CaretRight } from 'phosphor-react'
import { CaretLeft, CaretRight } from '@phosphor-icons/react'
import React, { useEffect, useRef, useState } from 'react'
import { TopicTabData } from '../DiscoverContainer'

23
packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverHoverActions.tsx
View File

@ -7,12 +7,12 @@ import {
Browsers,
MinusCircle,
PlusCircle,
} from 'phosphor-react'
} from '@phosphor-icons/react'
import { timeZone, locale } from '../../../../lib/dateFormatting'
import React from 'react'
import { SaveDiscoverArticleOutput } from "../../../../lib/networking/mutations/saveDiscoverArticle"
import { DiscoverFeedItem } from "../../../../lib/networking/queries/useGetDiscoverFeedItems"
import { BrowserIcon } from "../../../elements/icons/BrowserIcon"
import { SaveDiscoverArticleOutput } from '../../../../lib/networking/mutations/saveDiscoverArticle'
import { DiscoverFeedItem } from '../../../../lib/networking/queries/useGetDiscoverFeedItems'
import { BrowserIcon } from '../../../elements/icons/BrowserIcon'
type DiscoverHoverActionsProps = {
viewer?: UserBasicData
@ -29,7 +29,7 @@ type DiscoverHoverActionsProps = {
setSavedUrl: (url: string) => void
savedUrl?: string
deleteDiscoverItem: (item: DiscoverFeedItem) => Promise<void>,
deleteDiscoverItem: (item: DiscoverFeedItem) => Promise<void>
}
export const DiscoverHoverActions = (props: DiscoverHoverActionsProps) => {
@ -60,14 +60,14 @@ export const DiscoverHoverActions = (props: DiscoverHoverActionsProps) => {
>
<Button
title={
(props.savedId && 'Remove From Library (A)') ||
'Add to Library (A)'
(props.savedId && 'Remove From Library (A)') || 'Add to Library (A)'
}
style="hoverActionIcon"
onClick={(event) => {
console.log(props);
console.log(props)
if (!props.savedUrl) {
props.handleLinkSubmission(props.item.id, timeZone, locale)
props
.handleLinkSubmission(props.item.id, timeZone, locale)
.then((item) => {
if (item) {
props.setSavedId(item.saveDiscoverArticle.saveId)
@ -120,7 +120,10 @@ export const DiscoverHoverActions = (props: DiscoverHoverActionsProps) => {
event.stopPropagation()
}}
>
<BrowserIcon size={21} color={theme.colors.thNotebookSubtle.toString()} />
<BrowserIcon
size={21}
color={theme.colors.thNotebookSubtle.toString()}
/>
</Button>
</Box>
)

26
packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemGridCard.tsx
View File

@ -22,10 +22,13 @@ import {
siteName,
TitleStyle,
} from '../../../patterns/LibraryCards/LibraryCardStyles'
import { DiscoverItemCardProps, DiscoverItemSubCardProps } from "./DiscoverItemCard"
import {
DiscoverItemCardProps,
DiscoverItemSubCardProps,
} from './DiscoverItemCard'
import { DiscoverItemMetadata } from './DiscoverItemMetadata'
import { DiscoverHoverActions } from './DiscoverHoverActions'
import { CheckCircle, Circle } from 'phosphor-react'
import { CheckCircle, Circle } from '@phosphor-icons/react'
export function DiscoverGridCard(props: DiscoverItemSubCardProps): JSX.Element {
const [isHovered, setIsHovered] = useState(false)
@ -100,7 +103,12 @@ export function DiscoverGridCard(props: DiscoverItemSubCardProps): JSX.Element {
/>
</Box>
)}
<DiscoverGridCardContent {...props} savedId={props.savedId} savedUrl={props.savedUrl} isHovered={isHovered} />
<DiscoverGridCardContent
{...props}
savedId={props.savedId}
savedUrl={props.savedUrl}
isHovered={isHovered}
/>
</VStack>
)
}
@ -122,7 +130,15 @@ const DiscoverGridCardContent = (
}
return (
<VStack css={{ p: '0px', m: '0px', width: '100%', cursor: props.savedId ? 'pointer' : 'default' }} onClick={goToUrl} >
<VStack
css={{
p: '0px',
m: '0px',
width: '100%',
cursor: props.savedId ? 'pointer' : 'default',
}}
onClick={goToUrl}
>
<Box css={{ position: 'relative', width: '100%', height: '150px' }}>
<>
<HStack
@ -161,7 +177,7 @@ const DiscoverGridCardContent = (
height="150px"
css={{
bg: '$thBackground',
cursor: props.savedId ? 'pointer' : 'default'
cursor: props.savedId ? 'pointer' : 'default',
}}
onError={(e) => {
setDisplayFallback(true)

24
packages/web/components/templates/discoverFeed/DiscoverItems/DiscoverItemListCard.tsx
View File

@ -23,8 +23,11 @@ import {
siteName,
TitleStyle,
} from '../../../patterns/LibraryCards/LibraryCardStyles'
import { CheckCircle, Circle } from 'phosphor-react'
import { DiscoverItemCardProps, DiscoverItemSubCardProps } from "./DiscoverItemCard"
import { CheckCircle, Circle } from '@phosphor-icons/react'
import {
DiscoverItemCardProps,
DiscoverItemSubCardProps,
} from './DiscoverItemCard'
import { DiscoverItemMetadata } from './DiscoverItemMetadata'
import { DiscoverHoverActions } from './DiscoverHoverActions'
@ -103,13 +106,17 @@ export function DiscoverItemListCard(
/>
</Box>
)}
<DiscoverListCardContent {...props} savedId={props.savedId} isHovered={isOpen} />
<DiscoverListCardContent
{...props}
savedId={props.savedId}
isHovered={isOpen}
/>
</VStack>
)
}
export function DiscoverListCardContent(
props: DiscoverItemCardProps & { savedId?: string; savedUrl? : string }
props: DiscoverItemCardProps & { savedId?: string; savedUrl?: string }
): JSX.Element {
const originText = siteName(props.item.url, props.item.url)
const [displayFallback, setDisplayFallback] = useState(
@ -123,7 +130,14 @@ export function DiscoverListCardContent(
}
return (
<HStack css={{ gap: '15px', width: '100%', cursor: props.savedId ? 'pointer' : 'default' }} onClick={goToUrl} >
<HStack
css={{
gap: '15px',
width: '100%',
cursor: props.savedId ? 'pointer' : 'default',
}}
onClick={goToUrl}
>
<Box css={{ position: 'relative', width: '55px' }}>
<HStack
css={{

2
packages/web/components/templates/homeFeed/EmptyHighlights.tsx
View File

@ -1,4 +1,4 @@
import { Book } from 'phosphor-react'
import { Book } from '@phosphor-icons/react'
import { VStack } from '../../elements/LayoutPrimitives'
import { StyledText } from '../../elements/StyledText'
import { theme } from '../../tokens/stitches.config'

7
packages/web/components/templates/homeFeed/HighlightItem.tsx
View File

@ -1,5 +1,5 @@
import Link from 'next/link'
import { DotsThreeVertical } from 'phosphor-react'
import { DotsThreeVertical } from '@phosphor-icons/react'
import { useCallback } from 'react'
import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
@ -108,7 +108,8 @@ export function HighlightsMenu(props: HighlightsMenuProps): JSX.Element {
<DropdownSeparator />
<Link
href={`/${props.viewer.profile.username}/${props.item.slug}#${props.highlight.id}`}
legacyBehavior>
legacyBehavior
>
<StyledLinkItem
onClick={(event) => {
console.log('event.ctrlKey: ', event.ctrlKey, event.metaKey)
@ -129,7 +130,7 @@ export function HighlightsMenu(props: HighlightsMenuProps): JSX.Element {
</Link>
</Dropdown>
</VStack>
);
)
}
const sortHighlights = (highlights: Highlight[]) => {

7
packages/web/components/templates/homeFeed/HighlightsLayout.tsx
View File

@ -1,5 +1,5 @@
import { useRouter } from 'next/router'
import { HighlighterCircle } from 'phosphor-react'
import { HighlighterCircle } from '@phosphor-icons/react'
import { useCallback, useEffect, useReducer, useState } from 'react'
import { Toaster } from 'react-hot-toast'
import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
@ -36,8 +36,9 @@ type HighlightItemsLayoutProps = {
export function HighlightItemsLayout(
props: HighlightItemsLayoutProps
): JSX.Element {
const [currentItem, setCurrentItem] =
useState<LibraryItem | undefined>(undefined)
const [currentItem, setCurrentItem] = useState<LibraryItem | undefined>(
undefined
)
const listReducer = (
state: LibraryItem[],

2
packages/web/components/templates/homeFeed/LibraryHeader.tsx
View File

@ -5,7 +5,7 @@ import { FormInput } from '../../elements/FormElements'
import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
import { Button, IconButton } from '../../elements/Button'
import { FunnelSimple, X } from 'phosphor-react'
import { FunnelSimple, X } from '@phosphor-icons/react'
import { LayoutType, LibraryMode } from './HomeFeedContainer'
import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
import { DEFAULT_HEADER_HEIGHT, HeaderSpacer } from './HeaderSpacer'

2
packages/web/components/templates/homeFeed/MultiSelectControls.tsx
View File

@ -8,7 +8,7 @@ import { LabelIcon } from '../../elements/icons/LabelIcon'
import { TrashIcon } from '../../elements/icons/TrashIcon'
import { ConfirmationModal } from '../../patterns/ConfirmationModal'
import { AddBulkLabelsModal } from '../article/AddBulkLabelsModal'
import { X } from 'phosphor-react'
import { X } from '@phosphor-icons/react'
import { MultiSelectMode } from './LibraryHeader'
import { HeaderCheckboxIcon } from '../../elements/icons/HeaderCheckboxIcon'
import { Label } from '../../../lib/networking/fragments/labelFragment'

2
packages/web/components/templates/homeFeed/TLDRLayout.tsx
View File

@ -12,7 +12,7 @@ import { BrowserIcon } from '../../elements/icons/BrowserIcon'
import { styled } from '@stitches/react'
import { siteName } from '../../patterns/LibraryCards/LibraryCardStyles'
import { theme } from '../../tokens/stitches.config'
import { DotsThree } from 'phosphor-react'
import { DotsThree } from '@phosphor-icons/react'
import { useState } from 'react'
type TLDRLayoutProps = {

2
packages/web/components/templates/integrations/Webhooks.tsx
View File

@ -4,7 +4,7 @@ import Image from 'next/image'
import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { Link, Plus } from 'phosphor-react'
import { Link, Plus } from '@phosphor-icons/react'
import { useGetWebhooksQuery } from '../../../lib/networking/queries/useGetWebhooksQuery'
import { useMemo } from 'react'

2
packages/web/components/templates/library/LibraryHeader.tsx
View File

@ -5,7 +5,7 @@ import { FormInput } from '../../elements/FormElements'
import { searchBarCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
import { Button, IconButton } from '../../elements/Button'
import { FunnelSimple, X } from 'phosphor-react'
import { FunnelSimple, X } from '@phosphor-icons/react'
import { LayoutType, LibraryMode } from '../homeFeed/HomeFeedContainer'
import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
import { DEFAULT_HEADER_HEIGHT, HeaderSpacer } from '../homeFeed/HeaderSpacer'

2
packages/web/components/templates/navMenu/LibraryLegacyMenu.tsx
View File

@ -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, NewspaperClipping, X } from 'phosphor-react'
import { Circle, NewspaperClipping, X } from '@phosphor-icons/react'
import {
Subscription,
SubscriptionType,

2
packages/web/components/templates/navMenu/LibraryMenu.tsx
View File

@ -2,7 +2,7 @@ import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
import { StyledText } from '../../elements/StyledText'
import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Button } from '../../elements/Button'
import { Circle, DotsThree, MagnifyingGlass, X } from 'phosphor-react'
import { Circle, DotsThree, MagnifyingGlass, X } from '@phosphor-icons/react'
import {
Subscription,
SubscriptionType,

1063
packages/web/components/templates/navMenu/NavigationMenu.tsx
View File

File diff suppressed because it is too large Load Diff

2
packages/web/components/templates/navMenu/SettingsDropdown.tsx
View File

@ -5,7 +5,7 @@ import {
DropdownSeparator,
} from '../../elements/DropdownElements'
import { useRouter } from 'next/router'
import { List } from 'phosphor-react'
import { List } from '@phosphor-icons/react'
export const SettingsDropdown = (): JSX.Element => {
const router = useRouter()

2
packages/web/components/templates/navMenu/SettingsMenu.tsx
View File

@ -5,7 +5,7 @@ import { LogoBox } from '../../elements/LogoBox'
import Link from 'next/link'
import { styled, theme } from '../../tokens/stitches.config'
import { Button } from '../../elements/Button'
import { ArrowSquareUpRight } from 'phosphor-react'
import { ArrowSquareUpRight } from '@phosphor-icons/react'
import { useRouter } from 'next/router'
import { NavMenuFooter } from './Footer'

2
packages/web/components/templates/settings/SettingsTable.tsx
View File

@ -1,4 +1,4 @@
import { Pencil, Trash } from 'phosphor-react'
import { Pencil, Trash } from '@phosphor-icons/react'
import { Toaster } from 'react-hot-toast'
import { Button } from '../../elements/Button'
import { Dropdown, DropdownOption } from '../../elements/DropdownElements'