diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index 6a407e770..831fc58cc 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -20,7 +20,7 @@ export const Button = styled('button', { }, ctaDarkYellow: { border: '1px solid transparent', - fontSize: '13px', + fontSize: '14px', fontWeight: 500, fontFamily: 'Inter', borderRadius: '5px', @@ -77,8 +77,8 @@ export const Button = styled('button', { fontFamily: 'Inter', borderRadius: '8px', cursor: 'pointer', - color: 'white', p: '10px 12px', + color: '$thTextContrast2', bg: 'rgb(125, 125, 125, 0.3)', '&:hover': { bg: 'rgb(47, 47, 47, 0.1)', diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx index b601b7f6b..1e42d61ba 100644 --- a/packages/web/components/elements/DropdownElements.tsx +++ b/packages/web/components/elements/DropdownElements.tsx @@ -53,7 +53,7 @@ export const DropdownContent = styled(Content, { borderRadius: '6px', outline: '1px solid #323232', border: '1px solid $grayBorder', - boxShadow: '$cardBoxShadow', + boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.05);', '--arrow-visibility': '', '&[data-side="top"]': { '--arrow-visibility': 'collapse', diff --git a/packages/web/components/elements/FeatureHelpBox.tsx b/packages/web/components/elements/FeatureHelpBox.tsx new file mode 100644 index 000000000..82cba8919 --- /dev/null +++ b/packages/web/components/elements/FeatureHelpBox.tsx @@ -0,0 +1,131 @@ +import { HStack, SpanBox, VStack } from './LayoutPrimitives' +import { theme } from '../tokens/stitches.config' +import { Button } from './Button' +import { CloseIcon } from './icons/CloseIcon' +import { HelpfulOwlImage } from './images/HelpfulOwlImage' +import { ArrowSquareOut } from 'phosphor-react' +import { useEffect, useState } from 'react' + +type FeatureHelpBoxProps = { + helpTitle: string + helpMessage: string + + helpCTAText?: string + onClickCTA?: () => void + + docsMessage: string + docsDestination: string + + onDismiss: () => void +} + +export const FeatureHelpBox = (props: FeatureHelpBoxProps) => { + const [display, setDisplay] = useState(false) + + useEffect(() => { + setDisplay(true) + }, []) + + if (!display) { + return <> + } + + return ( + + + + + + + + + ) +} + +const HelpSection = (props: FeatureHelpBoxProps) => { + return ( + + + + {props.helpTitle} + + + + {props.helpMessage} + + {props.helpCTAText && props.onClickCTA && ( + + )} + + + + ) +} diff --git a/packages/web/components/elements/SuggestionBox.tsx b/packages/web/components/elements/SuggestionBox.tsx new file mode 100644 index 000000000..ae6cafcee --- /dev/null +++ b/packages/web/components/elements/SuggestionBox.tsx @@ -0,0 +1,118 @@ +import Link from 'next/link' +import { HStack, SpanBox, VStack } from './LayoutPrimitives' +import { ArrowRightIcon } from './icons/ArrowRightIcon' +import { theme } from '../tokens/stitches.config' +import { ReactNode } from 'react' +import { Button } from './Button' +import { CloseIcon } from './icons/CloseIcon' + +type SuggestionBoxProps = { + helpMessage: string + helpCTAText: string | undefined + helpTarget: string | undefined + + size?: 'large' | 'small' + background?: string + + dismissible?: boolean + onDismiss?: () => void +} + +type InternalOrExternalLinkProps = { + link: string + children: ReactNode +} + +const InternalOrExternalLink = (props: InternalOrExternalLinkProps) => { + const isExternal = props.link.startsWith('https') + + return ( + + {!isExternal ? ( + {props.children} + ) : ( + + {props.children} + + )} + + ) +} + +export const SuggestionBox = (props: SuggestionBoxProps) => { + return ( + + + {props.dismissible && ( + + + + )} + {props.helpMessage} + {props.helpTarget && ( + + + <>{props.helpCTAText} + + + + )} + + + ) +} diff --git a/packages/web/components/elements/icons/CloseIcon.tsx b/packages/web/components/elements/icons/CloseIcon.tsx new file mode 100644 index 000000000..384f28150 --- /dev/null +++ b/packages/web/components/elements/icons/CloseIcon.tsx @@ -0,0 +1,39 @@ +/* eslint-disable functional/no-class */ +/* eslint-disable functional/no-this-expression */ +import { IconProps } from './IconProps' + +import React from 'react' + +export class CloseIcon extends React.Component { + render() { + const size = (this.props.size || 26).toString() + const color = (this.props.color || '#2A2A2A').toString() + + return ( + + + + + + + ) + } +} diff --git a/packages/web/components/elements/images/HelpfulOwlImage.tsx b/packages/web/components/elements/images/HelpfulOwlImage.tsx new file mode 100644 index 000000000..3268d3a29 --- /dev/null +++ b/packages/web/components/elements/images/HelpfulOwlImage.tsx @@ -0,0 +1,17 @@ +import Image from 'next/image' + +type HelpfulOwlImageProps = { + width: number + height: number +} + +export const HelpfulOwlImage = (props: HelpfulOwlImageProps) => { + return ( + Picture of an owl reading + ) +} diff --git a/packages/web/components/patterns/ArticleNotes.tsx b/packages/web/components/patterns/ArticleNotes.tsx index 438e834ff..a4a786b99 100644 --- a/packages/web/components/patterns/ArticleNotes.tsx +++ b/packages/web/components/patterns/ArticleNotes.tsx @@ -25,7 +25,6 @@ MdEditor.use(Plugins.TabInsert, { tabMapValue: 1, // note that 1 means a '\t' instead of ' '. }) -console.log() MdEditor.use(Counter) type NoteSectionProps = { diff --git a/packages/web/components/patterns/SettingsHeader.tsx b/packages/web/components/patterns/SettingsHeader.tsx index bd98428de..2d33a3a58 100644 --- a/packages/web/components/patterns/SettingsHeader.tsx +++ b/packages/web/components/patterns/SettingsHeader.tsx @@ -3,6 +3,7 @@ import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo' import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery' import { PrimaryDropdown } from '../templates/PrimaryDropdown' import { HEADER_HEIGHT } from '../templates/homeFeed/HeaderSpacer' +import { LogoBox } from '../elements/LogoBox' type HeaderProps = { user?: UserBasicData @@ -21,25 +22,14 @@ export function SettingsHeader(props: HeaderProps): JSX.Element { display: 'flex', position: 'fixed', width: '100%', - px: '25px', + pr: '25px', height: HEADER_HEIGHT, - bg: '$thBackground3', - borderBottom: '1px solid $thBorderColor', '@mdDown': { - px: '15px', + pr: '15px', }, }} > - - - - + diff --git a/packages/web/components/templates/ErrorLayout.tsx b/packages/web/components/templates/ErrorLayout.tsx index b0837c883..b3370b928 100644 --- a/packages/web/components/templates/ErrorLayout.tsx +++ b/packages/web/components/templates/ErrorLayout.tsx @@ -13,7 +13,6 @@ type ErrorLayoutProps = { export function ErrorLayout(props: ErrorLayoutProps): JSX.Element { const { viewerData } = useGetViewerQuery() - console.log(viewerData?.me) return ( diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx index 7ec179af3..eb5c291a7 100644 --- a/packages/web/components/templates/SettingsLayout.tsx +++ b/packages/web/components/templates/SettingsLayout.tsx @@ -49,7 +49,6 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element { {props.children} diff --git a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx index 7e342ef24..8f227a4fe 100644 --- a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx +++ b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx @@ -9,6 +9,7 @@ import { searchQuery } from '../../../lib/networking/queries/search' import { LIBRARY_LEFT_MENU_WIDTH } from './LibraryFilterMenu' import { LayoutType } from './HomeFeedContainer' import { ArrowRightIcon } from '../../elements/icons/ArrowRightIcon' +import { SuggestionBox } from '../../elements/SuggestionBox' type EmptyLibraryProps = { searchTerm: string | undefined @@ -17,7 +18,13 @@ type EmptyLibraryProps = { layoutType: LayoutType } -type MessageType = 'feed' | 'newsletter' | 'library' +type MessageType = + | 'inbox' + | 'files' + | 'archive' + | 'feed' + | 'newsletter' + | 'library' type HelpMessageProps = { type: MessageType @@ -83,6 +90,12 @@ const HelpMessage = (props: HelpMessageProps) => { export const ErrorBox = (props: HelpMessageProps) => { const errorTitle = useMemo(() => { switch (props.type) { + case 'inbox': + return 'Your inbox is empty.' + case 'archive': + return 'You do not have any archived items.' + case 'files': + return 'No files found.' case 'feed': return 'You do not have any feed items matching this query.' case 'newsletter': @@ -116,70 +129,70 @@ export const ErrorBox = (props: HelpMessageProps) => { ) } -export const SuggestionBox = (props: HelpMessageProps) => { +export const Suggestion = (props: HelpMessageProps) => { const helpMessage = useMemo(() => { switch (props.type) { case 'feed': - return 'Want to add an RSS or Atom Subscription?' + return ['Want to add an RSS or Atom Subscription?', 'Click Here'] + case 'archive': + return [ + 'When you are done reading something archive it and it will be saved in Omnivore forever.', + 'Read the Docs', + ] + case 'files': + return [ + 'Drag PDFs into the library to add them to your Omnivore account.', + undefined, + ] case 'newsletter': - return 'Create an Omnivore email address and subscribe to newsletters.' + return [ + 'Create an Omnivore email address and subscribe to newsletters.', + 'Click Here', + ] } - return "Add a link or read more about Omnivore's Advanced Search." + return [ + "Add a link or read more about Omnivore's Advanced Search.", + 'Read the Docs', + ] }, [props.type]) const helpTarget = useMemo(() => { switch (props.type) { case 'feed': return '/settings/feeds' + case 'archive': + case 'files': + return undefined + case 'archive': + case 'inbox': + return 'https://docs.omnivore.app/using/saving' case 'newsletter': return '/settings/emails' } return 'https://docs.omnivore.app/' }, [props.type]) + const helpTargetWindow = useMemo(() => { + switch (props.type) { + case 'archive': + case 'inbox': + return '_blank' + } + return undefined + }, [props.type]) + return ( - - {helpMessage} - - - - <>Click Here - - - - - + <> + {helpMessage[0] ? ( + + ) : ( + <> + )} + ) } @@ -187,6 +200,12 @@ export const EmptyLibrary = (props: EmptyLibraryProps) => { const type = useMemo(() => { if (props.searchTerm) { switch (props.searchTerm) { + case 'in:archive': + return 'archive' + case 'in:inbox': + return 'inbox' + case 'type:file': + return 'files' case 'label:RSS': return 'feed' case 'label:Newsletter': @@ -205,9 +224,7 @@ export const EmptyLibrary = (props: EmptyLibraryProps) => { pl: '0px', width: '100%', - '@media (max-width: 1300px)': { - flexDirection: 'column', - }, + flexDirection: 'column', '@media (max-width: 768px)': { p: '15px', @@ -232,7 +249,7 @@ export const EmptyLibrary = (props: EmptyLibraryProps) => { }} > - + ) } diff --git a/packages/web/components/templates/settings/SettingsTable.tsx b/packages/web/components/templates/settings/SettingsTable.tsx index a71e290d1..dda8dd4fa 100644 --- a/packages/web/components/templates/settings/SettingsTable.tsx +++ b/packages/web/components/templates/settings/SettingsTable.tsx @@ -8,6 +8,9 @@ import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' import { StyledText } from '../../elements/StyledText' import { theme } from '../../tokens/stitches.config' import { SettingsLayout } from '../SettingsLayout' +import { SuggestionBox } from '../../elements/SuggestionBox' +import { usePersistedState } from '../../../lib/hooks/usePersistedState' +import { FeatureHelpBox } from '../../elements/FeatureHelpBox' type SettingsTableProps = { pageId: string @@ -17,6 +20,8 @@ type SettingsTableProps = { createTitle?: string createAction?: () => void + suggestionInfo: SuggestionInfo + children: React.ReactNode } @@ -52,6 +57,16 @@ type MoreOptionsProps = { onEdit?: () => void } +type SuggestionInfo = { + title: string + message: string + docs: string + key: string + + CTAText?: string + onClickCTA?: () => void +} + const MoreOptions = (props: MoreOptionsProps) => ( { } export const SettingsTable = (props: SettingsTableProps): JSX.Element => { + const [showSuggestion, setShowSuggestion] = usePersistedState({ + key: props.suggestionInfo.key, + initialValue: !!props.suggestionInfo, + }) + return ( { }, }} > + {props.suggestionInfo && showSuggestion && ( + { + setShowSuggestion(false) + }} + helpCTAText={props.suggestionInfo.CTAText} + onClickCTA={props.suggestionInfo.onClickCTA} + /> + )} { break case 'setMarginWidth': { const value = Number(arg) - console.log('setMarginWidth: ', value) if (value >= 200 && value <= 560) { setMarginWidth(value) } diff --git a/packages/web/lib/networking/mutations/addPopularReadMutation.ts b/packages/web/lib/networking/mutations/addPopularReadMutation.ts index 2ab326d3b..c8914e7b5 100644 --- a/packages/web/lib/networking/mutations/addPopularReadMutation.ts +++ b/packages/web/lib/networking/mutations/addPopularReadMutation.ts @@ -26,11 +26,8 @@ export async function addPopularReadMutation( } ` - console.log('addPopularReadMutation', mutation) - try { const response = await gqlFetcher(mutation, { readName }) - console.log('response', response) const data = response as AddPopularReadResponse | undefined return data?.addPopularRead?.pageId } catch (error) { diff --git a/packages/web/lib/networking/mutations/bulkActionMutation.ts b/packages/web/lib/networking/mutations/bulkActionMutation.ts index c1070ccec..71d02a281 100644 --- a/packages/web/lib/networking/mutations/bulkActionMutation.ts +++ b/packages/web/lib/networking/mutations/bulkActionMutation.ts @@ -45,8 +45,6 @@ export async function bulkActionMutation( } ` - console.log('bulkActionbulkActionMutation', mutation) - try { const response = await gqlFetcher(mutation, { action, @@ -54,7 +52,6 @@ export async function bulkActionMutation( labelIds, expectedCount, }) - console.log('response', response) const data = response as BulkActionResponse | undefined return data?.bulkAction?.success ?? false } catch (error) { diff --git a/packages/web/lib/networking/mutations/createNewsletterEmailMutation.ts b/packages/web/lib/networking/mutations/createNewsletterEmailMutation.ts index e56d58427..ba7d46ab6 100644 --- a/packages/web/lib/networking/mutations/createNewsletterEmailMutation.ts +++ b/packages/web/lib/networking/mutations/createNewsletterEmailMutation.ts @@ -11,7 +11,9 @@ type CreateNewsletterEmail = { newsletterEmail: NewsletterEmail } -export async function createNewsletterEmailMutation(): Promise { +export async function createNewsletterEmailMutation(): Promise< + string | undefined +> { const mutation = gql` mutation createNewsletterEmailMutation { createNewsletterEmail { @@ -29,9 +31,10 @@ export async function createNewsletterEmailMutation(): Promise { + sendNotification: boolean +): Promise { const mutation = gql` mutation createReminderMutation($input: CreateReminderInput!) { createReminder(input: $input) { @@ -35,13 +36,12 @@ export async function createReminderMutation( reminderType, archiveUntil, sendNotification, - scheduledAt: new Date() + scheduledAt: new Date(), } const data = await gqlFetcher(mutation, { input }) - console.log('created reminder', data) return 'data' } catch (error) { console.log('createReminder error', error) return undefined } -} \ No newline at end of file +} diff --git a/packages/web/lib/networking/mutations/deleteAccountMutation.ts b/packages/web/lib/networking/mutations/deleteAccountMutation.ts index 15c6a6f6e..d65c3f4f7 100644 --- a/packages/web/lib/networking/mutations/deleteAccountMutation.ts +++ b/packages/web/lib/networking/mutations/deleteAccountMutation.ts @@ -26,8 +26,6 @@ export async function deleteAccountMutation( } ` - console.log('deleteAccountMutation', mutation) - try { const response = await gqlFetcher(mutation, { userId }) console.log('response', response) diff --git a/packages/web/lib/networking/mutations/deleteRuleMutation.ts b/packages/web/lib/networking/mutations/deleteRuleMutation.ts index 0e36bad2a..b41e4cc5b 100644 --- a/packages/web/lib/networking/mutations/deleteRuleMutation.ts +++ b/packages/web/lib/networking/mutations/deleteRuleMutation.ts @@ -35,7 +35,6 @@ export async function deleteRuleMutation(id: string): Promise { const data = (await gqlFetcher(mutation, { id })) as DeleteRuleResult const output = data as any const error = data.deleteRule?.errorCodes?.find(() => true) - console.log('DATA: ', output.deleteRule) if (error) { throw error } diff --git a/packages/web/lib/networking/mutations/importFromIntegrationMutation.ts b/packages/web/lib/networking/mutations/importFromIntegrationMutation.ts index e74b5429b..0d14dba25 100644 --- a/packages/web/lib/networking/mutations/importFromIntegrationMutation.ts +++ b/packages/web/lib/networking/mutations/importFromIntegrationMutation.ts @@ -25,7 +25,6 @@ export async function importFromIntegrationMutation( }` const data = await gqlFetcher(mutation, { integrationId }) - console.log('integrationId: ', data) const output = data as ImportFromIntegrationDataResponseData | undefined const error = output?.importFromIntegration?.errorCodes?.find(() => true) console.log('error: ', error) diff --git a/packages/web/lib/networking/mutations/joinGroupMutation.ts b/packages/web/lib/networking/mutations/joinGroupMutation.ts index 86c7b9000..30d18be36 100644 --- a/packages/web/lib/networking/mutations/joinGroupMutation.ts +++ b/packages/web/lib/networking/mutations/joinGroupMutation.ts @@ -38,10 +38,7 @@ export async function joinGroupMutation( } ` - console.log('JoinGroupMutation', mutation) - const response = await gqlFetcher(mutation, { inviteCode }) - console.log(' -- response', response) const data = response as JoinGroupResponse | undefined const error = data?.errorCodes?.find(() => true) if (error) { diff --git a/packages/web/lib/networking/mutations/markEmailAsItemMutation.ts b/packages/web/lib/networking/mutations/markEmailAsItemMutation.ts index fc6e60690..c54a12726 100644 --- a/packages/web/lib/networking/mutations/markEmailAsItemMutation.ts +++ b/packages/web/lib/networking/mutations/markEmailAsItemMutation.ts @@ -25,7 +25,6 @@ export async function markEmailAsItemMutation( }` const data = await gqlFetcher(mutation, { recentEmailId }) - console.log('recentEmailId: ', data) const output = data as MarkEmailAsItemDataResponseData | undefined const error = output?.markEmailAsItem?.errorCodes?.find(() => true) console.log('error: ', error) diff --git a/packages/web/lib/networking/mutations/setLabelsForHighlight.ts b/packages/web/lib/networking/mutations/setLabelsForHighlight.ts index a2c4521eb..b1f25f76a 100644 --- a/packages/web/lib/networking/mutations/setLabelsForHighlight.ts +++ b/packages/web/lib/networking/mutations/setLabelsForHighlight.ts @@ -31,18 +31,10 @@ export async function setLabelsForHighlight( ${labelFragment} ` - console.log( - 'setting label for highlight id: ', - highlightId, - 'labelIds', - labelIds - ) - try { const data = (await gqlFetcher(mutation, { input: { highlightId, labelIds }, })) as SetLabelsForHighlightResult - console.log(' -- errorCodes', data.setLabelsForHighlight.errorCodes) return data.setLabelsForHighlight.errorCodes ? undefined diff --git a/packages/web/lib/networking/mutations/updateLabelMutation.ts b/packages/web/lib/networking/mutations/updateLabelMutation.ts index d05f11b35..07e6cdbc8 100644 --- a/packages/web/lib/networking/mutations/updateLabelMutation.ts +++ b/packages/web/lib/networking/mutations/updateLabelMutation.ts @@ -3,8 +3,8 @@ import { gqlFetcher } from '../networkHelpers' export type UpdateLabelInput = { labelId: string - name: string, - color: string, + name: string + color: string description?: string } @@ -39,9 +39,7 @@ export async function updateLabelMutation( try { const data = await gqlFetcher(mutation) - console.log(input, data); const output = data as any - console.log(output) return output?.updatedLabel } catch (err) { return undefined diff --git a/packages/web/lib/networking/mutations/uploadImportFileMutation.ts b/packages/web/lib/networking/mutations/uploadImportFileMutation.ts index 055fe9078..aac8e9675 100644 --- a/packages/web/lib/networking/mutations/uploadImportFileMutation.ts +++ b/packages/web/lib/networking/mutations/uploadImportFileMutation.ts @@ -32,10 +32,8 @@ export async function uploadImportFileRequestMutation( }` const data = await gqlFetcher(mutation, { type, contentType }) - console.log('UploadImportFile: ', data) const output = data as UploadImportFileResponseData | undefined const error = output?.uploadImportFile?.errorCodes?.find(() => true) - console.log('error: ', error) if (error) { throw error } diff --git a/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx b/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx index c12443eec..edee9e662 100644 --- a/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx +++ b/packages/web/lib/networking/queries/useGetArticleOriginalHtmlQuery.tsx @@ -53,8 +53,6 @@ export function useGetArticleOriginalHtmlQuery({ ) const resultData: ArticleData | undefined = data as ArticleData - console.log('RESULT', JSON.stringify(data)) - return resultData?.article.article.originalHtml } diff --git a/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx b/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx index 711079bae..9c28e2505 100644 --- a/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetIntegrationsQuery.tsx @@ -53,8 +53,6 @@ export function useGetIntegrationsQuery(): IntegrationsQueryResponse { ` const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher) - console.log('integrations data', data) - try { if (data) { const result = data as IntegrationsQueryResponseData diff --git a/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx b/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx index 2fa16675b..ea97cd71d 100644 --- a/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx +++ b/packages/web/lib/networking/queries/useGetWebhooksQuery.tsx @@ -62,8 +62,6 @@ export function useGetWebhooksQuery(): WebhooksQueryResponse { ` const { data, mutate, isValidating } = useSWR(query, publicGqlFetcher) - console.log('webhooks data', data) - try { if (data) { const result = data as WebhooksQueryResponseData diff --git a/packages/web/next.config.js b/packages/web/next.config.js index e84e4370d..edac9f067 100644 --- a/packages/web/next.config.js +++ b/packages/web/next.config.js @@ -2,7 +2,7 @@ const ContentSecurityPolicy = ` default-src 'self'; base-uri 'self'; block-all-mixed-content; - connect-src 'self' ${process.env.NEXT_PUBLIC_SERVER_BASE_URL} https://proxy-prod.omnivore-image-cache.app https://accounts.google.com https://proxy-demo.omnivore-image-cache.app https://storage.googleapis.com https://api.segment.io https://cdn.segment.com https://widget.intercom.io https://api-iam.intercom.io https://static.intercomassets.com https://downloads.intercomcdn.com https://platform.twitter.com wss://nexus-websocket-a.intercom.io wss://nexus-websocket-b.intercom.io wss://nexus-europe-websocket.intercom.io wss://nexus-australia-websocket.intercom.io; + connect-src 'self' ${process.env.NEXT_PUBLIC_SERVER_BASE_URL} https://proxy-prod.omnivore-image-cache.app https://accounts.google.com https://proxy-demo.omnivore-image-cache.app https://storage.googleapis.com https://api.segment.io https://cdn.segment.com https://widget.intercom.io https://api-iam.intercom.io https://static.intercomassets.com https://downloads.intercomcdn.com https://platform.twitter.com wss://nexus-websocket-a.intercom.io wss://nexus-websocket-b.intercom.io wss://nexus-europe-websocket.intercom.io wss://nexus-australia-websocket.intercom.io https://tools.applemediaservices.com; font-src 'self' data: https://cdn.jsdelivr.net https://js.intercomcdn.com https://fonts.intercomcdn.com; form-action 'self' ${process.env.NEXT_PUBLIC_SERVER_BASE_URL} https://getpocket.com/auth/authorize https://intercom.help https://api-iam.intercom.io https://api-iam.eu.intercom.io https://api-iam.au.intercom.io; frame-ancestors 'none'; diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx index 885a63a7a..69b51531a 100644 --- a/packages/web/pages/settings/api.tsx +++ b/packages/web/pages/settings/api.tsx @@ -65,7 +65,6 @@ export default function Api(): JSX.Element { name: 'expiredAt', required: true, onChange: (e) => { - console.log('onChange: ', e) let additionalDays = 0 switch (e.target.value) { case 'in 7 days': @@ -114,13 +113,28 @@ export default function Api(): JSX.Element { pageId="api-keys" pageInfoLink="https://docs.omnivore.app/integrations/api.html" headerTitle="API Keys" - createTitle="Generate API Key" + createTitle="Create an API Key" createAction={() => { onAdd() setName('') setExpiresAt(neverExpiresDate) setAddModalOpen(true) }} + suggestionInfo={{ + title: + 'Use API keys to Integrate Omnivore with other apps and services', + message: + 'Create API keys to connect Omnivore to other apps such as Logseq and Obsidian or to query the API. Check out the integrations documentation for more info on connecting to Omnivore via the API.', + docs: 'https://docs.omnivore.app/integrations/api.html', + key: '--settings-apikeys-show-help', + CTAText: 'Create an API Key', + onClickCTA: () => { + onAdd() + setName('') + setExpiresAt(neverExpiresDate) + setAddModalOpen(true) + }, + }} > {sortedApiKeys.length > 0 ? ( sortedApiKeys.map((apiKey, i) => { @@ -163,7 +177,7 @@ export default function Api(): JSX.Element { {addModalOpen && ( { + createEmail() + }, + }} > {sortedEmailAddresses.length > 0 ? ( sortedEmailAddresses.map((email, i) => { diff --git a/packages/web/pages/settings/emails/recent.tsx b/packages/web/pages/settings/emails/recent.tsx index 3dd1107b4..3a77c106e 100644 --- a/packages/web/pages/settings/emails/recent.tsx +++ b/packages/web/pages/settings/emails/recent.tsx @@ -168,9 +168,17 @@ export default function RecentEmails(): JSX.Element { return ( {sortedRecentEmails.length > 0 ? ( sortedRecentEmails.map((recentEmail: RecentEmail, i) => { diff --git a/packages/web/pages/settings/feeds/index.tsx b/packages/web/pages/settings/feeds/index.tsx index cbe310e8c..48f1d73cd 100644 --- a/packages/web/pages/settings/feeds/index.tsx +++ b/packages/web/pages/settings/feeds/index.tsx @@ -92,10 +92,21 @@ export default function Rss(): JSX.Element { pageId={'feeds'} pageInfoLink="https://docs.omnivore.app/using/feeds.html" headerTitle="Subscribed feeds" - createTitle="Add feed" + createTitle="Add a feed" createAction={() => { router.push('/settings/feeds/add') }} + suggestionInfo={{ + title: 'Add RSS and Atom feeds to your Omnivore account', + message: + 'When you add a new feed the last 24hrs of items, or at least one item will be added to your account. Feeds will be checked for updates every hour, and new items will be added to your library.', + docs: 'https://docs.omnivore.app/using/feeds.html', + key: '--settings-feeds-show-help', + CTAText: 'Add a feed', + onClickCTA: () => { + router.push('/settings/feeds/add') + }, + }} > {subscriptions.length === 0 ? ( diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index 572002fc2..03579e8bb 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -35,6 +35,9 @@ import { import { LabelChip } from '../../components/elements/LabelChip' import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' import { InfoLink } from '../../components/elements/InfoLink' +import { SuggestionBox } from '../../components/elements/SuggestionBox' +import { usePersistedState } from '../../lib/hooks/usePersistedState' +import { FeatureHelpBox } from '../../components/elements/FeatureHelpBox' const HeaderWrapper = styled(Box, { width: '100%', @@ -153,6 +156,10 @@ export default function LabelsPage(): JSX.Element { const [confirmRemoveLabelId, setConfirmRemoveLabelId] = useState< string | null >(null) + const [showLabelPageHelp, setShowLabelPageHelp] = usePersistedState({ + key: `--settings-labels-show-help`, + initialValue: true, + }) const breakpoint = 768 applyStoredTheme(false) @@ -270,6 +277,23 @@ export default function LabelsPage(): JSX.Element { onOpenChange={() => setConfirmRemoveLabelId(null)} /> ) : null} + {showLabelPageHelp && ( + { + setShowLabelPageHelp(false) + }} + helpCTAText="Create a label" + onClickCTA={() => { + resetLabelState() + handleGenerateRandomColor() + setIsCreateMode(true) + }} + /> + )} - Add Label - - - + Create a label diff --git a/packages/web/pages/settings/subscriptions.tsx b/packages/web/pages/settings/subscriptions.tsx index 76b85b477..b6921e563 100644 --- a/packages/web/pages/settings/subscriptions.tsx +++ b/packages/web/pages/settings/subscriptions.tsx @@ -44,8 +44,15 @@ export default function SubscriptionsPage(): JSX.Element { return ( <> {sortedSubscriptions.length > 0 ? ( diff --git a/packages/web/public/static/images/helpful-owl@1x.png b/packages/web/public/static/images/helpful-owl@1x.png new file mode 100644 index 000000000..70fcb7926 Binary files /dev/null and b/packages/web/public/static/images/helpful-owl@1x.png differ diff --git a/packages/web/public/static/images/helpful-owl@2x.png b/packages/web/public/static/images/helpful-owl@2x.png new file mode 100644 index 000000000..98692a53a Binary files /dev/null and b/packages/web/public/static/images/helpful-owl@2x.png differ