diff --git a/packages/web/components/elements/Avatar.tsx b/packages/web/components/elements/Avatar.tsx index 34656f5d5..e6b478471 100644 --- a/packages/web/components/elements/Avatar.tsx +++ b/packages/web/components/elements/Avatar.tsx @@ -1,5 +1,5 @@ import { styled } from './../tokens/stitches.config' -import { Root, Image, Fallback } from '@radix-ui/react-avatar' +import { Root, Fallback } from '@radix-ui/react-avatar' type AvatarProps = { imageURL?: string diff --git a/packages/web/components/nav-containers/HighlightsContainer.tsx b/packages/web/components/nav-containers/HighlightsContainer.tsx index bc35a9d9f..c10d18454 100644 --- a/packages/web/components/nav-containers/HighlightsContainer.tsx +++ b/packages/web/components/nav-containers/HighlightsContainer.tsx @@ -1,23 +1,18 @@ -import { NavigationLayout } from '../templates/NavigationLayout' import { Box, HStack, VStack } from '../elements/LayoutPrimitives' import { useFetchMore } from '../../lib/hooks/useFetchMoreScroll' import { useCallback, useMemo, useState } from 'react' import { useGetHighlights } from '../../lib/networking/queries/useGetHighlights' import { Highlight } from '../../lib/networking/fragments/highlightFragment' import { NextRouter, useRouter } from 'next/router' -import { - UserBasicData, - useGetViewerQuery, -} from '../../lib/networking/queries/useGetViewerQuery' +import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery' import { SetHighlightLabelsModalPresenter } from '../templates/article/SetLabelsModalPresenter' import { TrashIcon } from '../elements/icons/TrashIcon' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { ConfirmationModal } from '../patterns/ConfirmationModal' -import { deleteHighlightMutation } from '../../lib/networking/mutations/deleteHighlightMutation' import { LabelChip } from '../elements/LabelChip' import ReactMarkdown from 'react-markdown' import remarkGfm from 'remark-gfm' -import { timeAgo } from '../patterns/LibraryCards/LibraryCardStyles' +import { timeAgo } from '../../lib/textFormatting' import { HighlightHoverActions } from '../patterns/HighlightHoverActions' import { autoUpdate, diff --git a/packages/web/components/nav-containers/HomeContainer.tsx b/packages/web/components/nav-containers/HomeContainer.tsx index e4dabc403..c5cbbabc5 100644 --- a/packages/web/components/nav-containers/HomeContainer.tsx +++ b/packages/web/components/nav-containers/HomeContainer.tsx @@ -16,7 +16,7 @@ import { ArchiveActionIcon } from '../elements/icons/home/ArchiveActionIcon' import { RemoveActionIcon } from '../elements/icons/home/RemoveActionIcon' import { ShareActionIcon } from '../elements/icons/home/ShareActionIcon' import Pagination from '../elements/Pagination' -import { timeAgo } from '../patterns/LibraryCards/LibraryCardStyles' +import { timeAgo } from '../../lib/textFormatting' import { theme } from '../tokens/stitches.config' import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme' import { useGetHiddenHomeSection } from '../../lib/networking/queries/useGetHiddenHomeSection' @@ -33,7 +33,6 @@ import { useGetSubscriptionsQuery, } from '../../lib/networking/queries/useGetSubscriptionsQuery' import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives' -import { Toaster } from 'react-hot-toast' import useLibraryItemActions from '../../lib/hooks/useLibraryItemActions' import { SyncLoader } from 'react-spinners' import { useGetLibraryItems } from '../../lib/networking/library_items/useLibraryItems' @@ -423,7 +422,6 @@ export function HomeContainer(): JSX.Element { }, }} > - { - if (!date) { - return '' - } - return dayjs(date).fromNow() -} - -const shouldHideUrl = (url: string): boolean => { - try { - const origin = new URL(url).origin - const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app'] - if (hideHosts.indexOf(origin) != -1) { - return true - } - } catch { - console.log('invalid url item', url) - } - return false -} - export const FLAIR_ICON_NAMES = [ 'favorite', 'pinned', @@ -148,27 +124,6 @@ export function FlairIcon(props: FlairIconProps): JSX.Element { ) } -export const siteName = ( - originalArticleUrl: string, - itemUrl: string, - siteName?: string -): string => { - if (siteName) { - return siteName - } - - if (shouldHideUrl(originalArticleUrl)) { - return '' - } - try { - return new URL(originalArticleUrl).hostname.replace(/^www\./, '') - } catch {} - try { - return new URL(itemUrl).hostname.replace(/^www\./, '') - } catch {} - return '' -} - type LibraryItemMetadataProps = { item: LibraryItemNode showProgress?: boolean diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index f8b1fe399..f47eede82 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -10,11 +10,11 @@ import { CardCheckbox, LibraryItemMetadata, MetaStyle, - siteName, TitleStyle, MenuStyle, FLAIR_ICON_NAMES, } from './LibraryCardStyles' +import { siteName } from '../../../lib/textFormatting' import { sortedLabels } from '../../../lib/labelsSort' import { LibraryHoverActions } from './LibraryHoverActions' import { diff --git a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx index 828935989..5c2f7a83d 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx @@ -1,7 +1,7 @@ import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives' import { useCallback, useMemo, useState } from 'react' import { CaretDown, CaretUp } from '@phosphor-icons/react' -import { MetaStyle, timeAgo, TitleStyle } from './LibraryCardStyles' +import { MetaStyle, TitleStyle } from './LibraryCardStyles' import { styled } from '@stitches/react' import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' import { LibraryItemNode } from '../../../lib/networking/library_items/useLibraryItems' @@ -12,6 +12,7 @@ import { HighlightView } from '../HighlightView' import { useRouter } from 'next/router' import { showErrorToast } from '../../../lib/toastHelpers' import { sortHighlights } from '../../../lib/highlights/sortHighlights' +import { timeAgo } from '../../../lib/textFormatting' export const GridSeparator = styled(Box, { height: '1px', diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx index 7b15be1b5..6681c6abe 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx @@ -7,11 +7,11 @@ import { CardCheckbox, LibraryItemMetadata, MetaStyle, - siteName, TitleStyle, MenuStyle, FLAIR_ICON_NAMES, } from './LibraryCardStyles' +import { siteName } from '../../../lib/textFormatting' import { sortedLabels } from '../../../lib/labelsSort' import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/navMenu/LibraryMenu' import { LibraryHoverActions } from './LibraryHoverActions' diff --git a/packages/web/components/templates/OnboardingLayout.tsx b/packages/web/components/templates/OnboardingLayout.tsx deleted file mode 100644 index ac63d1c52..000000000 --- a/packages/web/components/templates/OnboardingLayout.tsx +++ /dev/null @@ -1,258 +0,0 @@ -import React, { ReactNode } from 'react' -import { PageMetaData } from '../patterns/PageMetaData' -import { VStack, HStack, Box } from '../elements/LayoutPrimitives' -import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo' -import { StyledText } from '../elements/StyledText' -import { Button } from '../elements/Button' -import { useRouter } from 'next/router' -import { Toaster } from 'react-hot-toast' - -const TOTAL_ONBOARDING_PAGES = 6 - -type OnboardingLayoutProps = { - pageNumber: number - title: string - subTitle: string - description?: string - children: ReactNode - image?: ReactNode - nextPage?: string - reduceSpace?: boolean - onNext?: () => void | Promise -} - -export const OnboardingLayout = ({ - pageNumber, - title, - subTitle, - description, - image, - children, - nextPage, - reduceSpace, - onNext, -}: OnboardingLayoutProps) => { - const router = useRouter() - - const NextButton = () => { - const handleNext = async () => { - onNext && (await onNext()) - router.push(nextPage ?? `/onboarding/0${pageNumber + 1}`) - } - - return ( - - ) - } - - return ( - <> - - - - - - - - - - Omnivore - - - - {title} - - - {subTitle} - - {image && ( - - {image} - - )} - - - - - - - - {description && ( - - {description} - - )} - {children} - - - - - - - - ) -} diff --git a/packages/web/components/templates/discoverFeed/DiscoverFeed/DiscoverFeed.tsx b/packages/web/components/templates/discoverFeed/DiscoverFeed/DiscoverFeed.tsx index 0d2844d3b..04c3222de 100644 --- a/packages/web/components/templates/discoverFeed/DiscoverFeed/DiscoverFeed.tsx +++ b/packages/web/components/templates/discoverFeed/DiscoverFeed/DiscoverFeed.tsx @@ -1,13 +1,12 @@ -import { HStack, VStack } from "../../../elements/LayoutPrimitives" -import { Toaster } from 'react-hot-toast' +import { HStack, VStack } from '../../../elements/LayoutPrimitives' import { LayoutType } from '../../homeFeed/HomeFeedContainer' import { UserBasicData } from '../../../../lib/networking/queries/useGetViewerQuery' import { DiscoverItems } from '../DiscoverItems/DiscoverItems' -import { SaveDiscoverArticleOutput } from "../../../../lib/networking/mutations/saveDiscoverArticle" -import { HeaderText } from "../DiscoverHeader/HeaderText" -import React from "react" -import { TopicTabData } from "../DiscoverContainer" -import { DiscoverFeedItem } from "../../../../lib/networking/queries/useGetDiscoverFeedItems" +import { SaveDiscoverArticleOutput } from '../../../../lib/networking/mutations/saveDiscoverArticle' +import { HeaderText } from '../DiscoverHeader/HeaderText' +import React from 'react' +import { TopicTabData } from '../DiscoverContainer' +import { DiscoverFeedItem } from '../../../../lib/networking/queries/useGetDiscoverFeedItems' type DiscoverItemFeedProps = { items: DiscoverFeedItem[] @@ -33,7 +32,6 @@ export const DiscoverItemFeed = (props: DiscoverItemFeedProps) => { minHeight: '100vh', }} > - ( - undefined - ) + const [currentItem, setCurrentItem] = + useState(undefined) const listReducer = ( state: LibraryItem[], @@ -131,7 +127,6 @@ export function HighlightItemsLayout( distribution="start" alignment="start" > - void -} - -const SiteIcon = styled('img', { - width: '22px', - height: '22px', - borderRadius: '100px', -}) - -export function TLDRLayout(props: TLDRLayoutProps): JSX.Element { - return ( - <> - - - - {props.isValidating && props.items.length == 0 && } - - {props.items.map((item) => { - const sourceName = siteName( - item.node.originalArticleUrl, - item.node.url, - item.node.siteName - ) - const source = - sourceName == item.node.author ? undefined : item.node.author - - return ( - - - - - - {source && ( - - {item.node.siteName} - - )} - {source && item.node.author && ( - - • - - )} - {item.node.author && ( - - {item.node.author} - - )} - - - - - - - - {item.node.title} - - - {item.node.aiSummary} - - - - - - - - - - ) - })} - - - {props.hasMore ? ( - - ) : ( - - )} - - - - ) -} - -const ArchiveButton = (): JSX.Element => { - const [foreground, setForegroundColor] = useState( - theme.colors.thTextContrast2.toString() - ) - return ( - - ) -} - -const RemoveButton = (): JSX.Element => { - const [foreground, setForegroundColor] = useState( - theme.colors.thTextContrast2.toString() - ) - return ( - - ) -} - -const OpenOriginalButton = (): JSX.Element => { - const [foreground, setForegroundColor] = useState( - theme.colors.thTextContrast2.toString() - ) - return ( - - ) -} diff --git a/packages/web/components/templates/integrations/Webhooks.tsx b/packages/web/components/templates/integrations/Webhooks.tsx index 83ace3980..bc5c5946a 100644 --- a/packages/web/components/templates/integrations/Webhooks.tsx +++ b/packages/web/components/templates/integrations/Webhooks.tsx @@ -44,7 +44,6 @@ export function Webhooks(): JSX.Element { return webhooksList }, [webhooks]) - console.log('webhooksList', webhooksList) return ( - - { export const SettingsTable = (props: SettingsTableProps): JSX.Element => { return ( - { + if (!date) { + return '' + } + return dayjs(date).fromNow() +} + +export const shouldHideUrl = (url: string): boolean => { + try { + const origin = new URL(url).origin + const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app'] + if (hideHosts.indexOf(origin) != -1) { + return true + } + } catch { + console.log('invalid url item', url) + } + return false +} + +export const siteName = ( + originalArticleUrl: string, + itemUrl: string, + siteName?: string +): string => { + if (siteName) { + return shouldHideUrl(siteName) ? '' : siteName + } + + if (shouldHideUrl(originalArticleUrl)) { + return '' + } + try { + return new URL(originalArticleUrl).hostname.replace(/^www\./, '') + } catch {} + try { + return new URL(itemUrl).hostname.replace(/^www\./, '') + } catch {} + return '' +} diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx index 1c5b858b3..ff4f19497 100644 --- a/packages/web/pages/[username]/[slug]/index.tsx +++ b/packages/web/pages/[username]/[slug]/index.tsx @@ -1,16 +1,11 @@ import { PrimaryLayout } from '../../../components/templates/PrimaryLayout' import { LoadingView } from '../../../components/patterns/LoadingView' -import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery' import { useRouter } from 'next/router' import { VStack } from './../../../components/elements/LayoutPrimitives' -import { - ArticleContainer, - UpdateTitleEvent, -} from './../../../components/templates/article/ArticleContainer' +import { ArticleContainer } from './../../../components/templates/article/ArticleContainer' import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer' import { useCallback, useEffect, useState } from 'react' import dynamic from 'next/dynamic' -import { Toaster } from 'react-hot-toast' import Script from 'next/script' import { ArticleActionsMenu } from '../../../components/templates/article/ArticleActionsMenu' import { Label } from '../../../lib/networking/fragments/labelFragment' @@ -505,8 +500,6 @@ export default function Reader(): JSX.Element { id="MathJax-script" src="/static/mathjax/tex-mml-chtml.js" /> - - + -
diff --git a/packages/web/pages/home/debug.tsx b/packages/web/pages/home/debug.tsx index 376afe110..6132bf81d 100644 --- a/packages/web/pages/home/debug.tsx +++ b/packages/web/pages/home/debug.tsx @@ -1,33 +1,8 @@ -import { styled } from '@stitches/react' -import { AddToLibraryActionIcon } from '../../components/elements/icons/home/AddToLibraryActionIcon' -import { ArchiveActionIcon } from '../../components/elements/icons/home/ArchiveActionIcon' -import { CommentActionIcon } from '../../components/elements/icons/home/CommentActionIcon' -import { RemoveActionIcon } from '../../components/elements/icons/home/RemoveActionIcon' -import { ShareActionIcon } from '../../components/elements/icons/home/ShareActionIcon' import { useApplyLocalTheme } from '../../lib/hooks/useApplyLocalTheme' -import { - HStack, - SpanBox, - VStack, -} from './../../components/elements/LayoutPrimitives' - -import * as HoverCard from '@radix-ui/react-hover-card' +import { SpanBox, VStack } from './../../components/elements/LayoutPrimitives' import { Button } from '../../components/elements/Button' -import { - HomeItem, - HomeItemSource, - HomeItemSourceType, - HomeSection, - useGetHomeItems, -} from '../../lib/networking/queries/useGetHome' -import { timeAgo } from '../../components/patterns/LibraryCards/LibraryCardStyles' -import { theme } from '../../components/tokens/stitches.config' -import { useRouter } from 'next/router' -import { - SubscriptionType, - useGetSubscriptionsQuery, -} from '../../lib/networking/queries/useGetSubscriptionsQuery' -import { useCallback, useMemo } from 'react' +import { useGetHomeItems } from '../../lib/networking/queries/useGetHome' +import { useCallback } from 'react' import { refreshHomeMutation } from '../../lib/networking/mutations/refreshHome' export default function DebugHome(): JSX.Element { diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx index 40d215c91..a863a1543 100644 --- a/packages/web/pages/settings/account.tsx +++ b/packages/web/pages/settings/account.tsx @@ -1,5 +1,4 @@ import { useCallback, useEffect, useMemo, useState } from 'react' -import { Toaster } from 'react-hot-toast' import { Button } from '../../components/elements/Button' import { Box, @@ -224,12 +223,6 @@ export default function Account(): JSX.Element { return ( - - - - - - -
Integrations diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index 149673484..83e006e13 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -8,7 +8,6 @@ import { HStack, VStack, } from '../../components/elements/LayoutPrimitives' -import { Toaster } from 'react-hot-toast' import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { Label, LabelColor } from '../../lib/networking/fragments/labelFragment' @@ -156,9 +155,8 @@ export default function LabelsPage(): JSX.Element { const [descriptionInputText, setDescriptionInputText] = useState('') const [isCreateMode, setIsCreateMode] = useState(false) const [windowWidth, setWindowWidth] = useState(0) - const [confirmRemoveLabelId, setConfirmRemoveLabelId] = useState< - string | null - >(null) + const [confirmRemoveLabelId, setConfirmRemoveLabelId] = + useState(null) const [showLabelPageHelp, setShowLabelPageHelp] = usePersistedState({ key: `--settings-labels-show-help`, initialValue: true, @@ -262,11 +260,6 @@ export default function LabelsPage(): JSX.Element { return ( - - { } } - const [actionType, setActionType] = useState( - undefined - ) + const [actionType, setActionType] = + useState(undefined) return ( ( - undefined - ) + const [createActionRule, setCreateActionRule] = + useState(undefined) const dataSource = useMemo(() => { return rules.map((rule: Rule) => { @@ -435,12 +432,6 @@ export default function Rules(): JSX.Element { return ( - - (null) const [isCreateMode, setIsCreateMode] = useState(false) const [windowWidth, setWindowWidth] = useState(0) - const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = useState< - string | null - >(null) + const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = + useState(null) const [draggedElementId, setDraggedElementId] = useState(null) - const [draggedElementPosition, setDraggedElementPosition] = useState<{ - x: number - y: number - } | null>(null) + const [draggedElementPosition, setDraggedElementPosition] = + useState<{ + x: number + y: number + } | null>(null) const [sortedSavedSearch, setSortedSavedSearch] = useState([]) // Some theming stuff here. @@ -330,11 +329,6 @@ export default function SavedSearchesPage(): JSX.Element { return ( - - >(DEFAULT_STYLE) + const [style, setStyle] = + useState< + Partial<{ + position: string | null + top: string + left: string + maxWidth: string + }> + >(DEFAULT_STYLE) const handleEdit = () => { editingId && updateSavedSearch(editingId) setEditingId(null) diff --git a/packages/web/pages/settings/shortcuts.tsx b/packages/web/pages/settings/shortcuts.tsx index cc1b14569..b07485edd 100644 --- a/packages/web/pages/settings/shortcuts.tsx +++ b/packages/web/pages/settings/shortcuts.tsx @@ -1,18 +1,6 @@ -import { - ReactNode, - useCallback, - useEffect, - useMemo, - useReducer, - useRef, - useState, -} from 'react' -import { applyStoredTheme } from '../../lib/themeUpdater' - +import { useCallback, useEffect, useMemo, useReducer } from 'react' import { SettingsLayout } from '../../components/templates/SettingsLayout' -import { NavigationLayout } from '../../components/templates/NavigationLayout' - -import { Toaster } from 'react-hot-toast' +import { styled } from '../../components/tokens/stitches.config' import { Box, VStack, @@ -20,36 +8,23 @@ import { SpanBox, Separator, } from '../../components/elements/LayoutPrimitives' -import { LabelChip } from '../../components/elements/LabelChip' import { StyledText } from '../../components/elements/StyledText' -import { - Subscription, - SubscriptionType, - useGetSubscriptionsQuery, -} from '../../lib/networking/queries/useGetSubscriptionsQuery' -import { DragIcon } from '../../components/elements/icons/DragIcon' +import { SubscriptionType } from '../../lib/networking/queries/useGetSubscriptionsQuery' import { CoverImage } from '../../components/elements/CoverImage' -import { Label } from '../../lib/networking/fragments/labelFragment' -import { usePersistedState } from '../../lib/hooks/usePersistedState' -import { CheckSquare, Square, Tag } from '@phosphor-icons/react' -import { Button } from '../../components/elements/Button' -import { styled } from '@stitches/react' -import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment' -import { escapeQuotes } from '../../utils/helper' import { useGetLabels } from '../../lib/networking/labels/useLabels' import { useGetSavedSearches } from '../../lib/networking/savedsearches/useSavedSearches' import { Shortcut, ShortcutType, useGetShortcuts, - useResetShortcuts, useSetShortcuts, } from '../../lib/networking/shortcuts/useShortcuts' import * as Switch from '@radix-ui/react-switch' import { useGetSubscriptions } from '../../lib/networking/subscriptions/useGetSubscriptions' import { NewsletterIcon } from '../../components/elements/icons/NewsletterIcon' import { FollowingIcon } from '../../components/elements/icons/FollowingIcon' -import { LIBRARY_LEFT_MENU_WIDTH } from '../../components/templates/navMenu/NavigationMenu' +import { escapeQuotes } from '../../utils/helper' +import { Tag } from '@phosphor-icons/react' function flattenShortcuts(shortcuts: Shortcut[]): string[] { let result: string[] = [] diff --git a/packages/web/pages/settings/webhooks.tsx b/packages/web/pages/settings/webhooks.tsx index 6a27518be..75b92d4ef 100644 --- a/packages/web/pages/settings/webhooks.tsx +++ b/packages/web/pages/settings/webhooks.tsx @@ -1,5 +1,4 @@ import { SettingsLayout } from '../../components/templates/SettingsLayout' -import { Toaster } from 'react-hot-toast' import { VStack } from '../../components/elements/LayoutPrimitives' import Link from 'next/link' import { StyledText } from '../../components/elements/StyledText' @@ -7,11 +6,6 @@ import { StyledText } from '../../components/elements/StyledText' export default function Webhooks(): JSX.Element { return ( - - -const Template = ({ showToast, position }: { showToast: () => void; position?: ToastPosition }) => ( -
- -
- -
-
-) - -export const SuccessSnackbar: ComponentStory = (args: any) => { - return ( -