diff --git a/packages/web/components/elements/SuggestionBox.tsx b/packages/web/components/elements/SuggestionBox.tsx
index ae6cafcee..fd01bf44d 100644
--- a/packages/web/components/elements/SuggestionBox.tsx
+++ b/packages/web/components/elements/SuggestionBox.tsx
@@ -6,10 +6,14 @@ import { ReactNode } from 'react'
import { Button } from './Button'
import { CloseIcon } from './icons/CloseIcon'
+export type SuggestionAction = {
+ url: string
+ text: string
+}
+
type SuggestionBoxProps = {
helpMessage: string
- helpCTAText: string | undefined
- helpTarget: string | undefined
+ suggestions: SuggestionAction[]
size?: 'large' | 'small'
background?: string
@@ -90,28 +94,33 @@ export const SuggestionBox = (props: SuggestionBoxProps) => {
)}
{props.helpMessage}
- {props.helpTarget && (
-
- {
+ return (
+
- <>{props.helpCTAText}>
-
-
-
- )}
+
+ <>{suggestion.text}>
+
+
+
+ )
+ })}
)
diff --git a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
index 8f227a4fe..04b6df2e0 100644
--- a/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
+++ b/packages/web/components/templates/homeFeed/EmptyLibrary.tsx
@@ -1,15 +1,8 @@
-import Link from 'next/link'
-import { Book } from 'phosphor-react'
-import { Button } from '../../elements/Button'
-import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
-import { StyledText } from '../../elements/StyledText'
-import { theme } from '../../tokens/stitches.config'
+import { Box } from '../../elements/LayoutPrimitives'
import { useMemo } from 'react'
-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'
+import { SuggestionBox, SuggestionAction } from '../../elements/SuggestionBox'
type EmptyLibraryProps = {
searchTerm: string | undefined
@@ -20,9 +13,14 @@ type EmptyLibraryProps = {
type MessageType =
| 'inbox'
+ | 'continue'
+ | 'non-feed'
+ | 'highlight'
+ | 'unlabeled'
| 'files'
| 'archive'
| 'feed'
+ | 'subscription'
| 'newsletter'
| 'library'
@@ -30,76 +28,29 @@ type HelpMessageProps = {
type: MessageType
}
-const HelpMessage = (props: HelpMessageProps) => {
- switch (props.type) {
- case 'library':
- return (
- <>
- You can add a link or read more about Omnivore's{' '}
-
- advanced search
-
- .
- >
- )
- case 'feed':
- return (
- <>
- You can subscribe to RSS feeds using the{' '}
-
- feeds page
-
- . Learn more about feeds at 's{' '}
-
- docs.omnivore.app/using/feeds.html
-
- .
- >
- )
- case 'newsletter':
- return (
- <>
- Create email addresses that can be used to subscribe to newsletters on
- the{' '}
-
- emails page
-
- . Learn more about reading newsletters in Omnivore at 's{' '}
-
- docs.omnivore.app/using/inbox.html
-
- .
- >
- )
- }
- return <>>
-}
-
export const ErrorBox = (props: HelpMessageProps) => {
const errorTitle = useMemo(() => {
switch (props.type) {
case 'inbox':
- return 'Your inbox is empty.'
+ return 'Your inbox is empty. The inbox will contain all your non-archived saved items.'
+ case 'continue':
+ return "No continue reading items. Continue Reading items are items you have started but haven't finished reading."
+ case 'non-feed':
+ return "No non-feed items found. Non-feed items are items you've add to the library using the mobile apps, browser extensions, or Add Link button. Not newsletter or feed items."
+ case 'highlight':
+ return 'No highlights found. Add highlights to your library by highlighting text in the reader view.'
+ case 'unlabeled':
+ return 'No unlabeled items found. Items without labels can be found here. Use this query to easily triage your library.'
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 'subscription':
+ return 'You do not have any subscriptions.'
case 'newsletter':
- return 'You do not have any newsletter item matching this query.'
+ return 'You do not have any newsletter items matching this query.'
}
return 'No results found for this query.'
}, [props.type])
@@ -129,65 +80,79 @@ export const ErrorBox = (props: HelpMessageProps) => {
)
}
+type SuggestionMessage = {
+ message: string
+ actions: SuggestionAction[]
+}
+
export const Suggestion = (props: HelpMessageProps) => {
- const helpMessage = useMemo(() => {
+ const helpMessage = useMemo(() => {
switch (props.type) {
case 'feed':
- return ['Want to add an RSS or Atom Subscription?', 'Click Here']
+ return {
+ message: 'Want to add an RSS or Atom Subscription?',
+ actions: [
+ { text: 'Add an RSS or Atom feed', url: '/settings/feeds' },
+ ],
+ }
case 'archive':
- return [
- 'When you are done reading something archive it and it will be saved in Omnivore forever.',
- 'Read the Docs',
- ]
+ return {
+ message:
+ 'When you are done reading something archive it and it will be saved in Omnivore forever.',
+ actions: [
+ {
+ text: 'Read the docs',
+ url: 'https://docs.omnivore.app/using/saving',
+ },
+ ],
+ }
case 'files':
- return [
- 'Drag PDFs into the library to add them to your Omnivore account.',
- undefined,
- ]
+ return {
+ message:
+ 'Drag PDFs into the library to add them to your Omnivore account.',
+ actions: [],
+ }
case 'newsletter':
- return [
- 'Create an Omnivore email address and subscribe to newsletters.',
- 'Click Here',
- ]
+ return {
+ message:
+ 'Create an Omnivore email address and subscribe to newsletters.',
+ actions: [
+ {
+ text: 'Create an email address for newsletters',
+ url: '/settings/emails',
+ },
+ ],
+ }
+ case 'subscription':
+ return {
+ message:
+ 'Create an Omnivore email address and subscribe to newsletters or add a feed from the Feeds page.',
+ actions: [
+ { text: 'Add an RSS or Atom feed', url: '/settings/feeds' },
+ {
+ text: 'Create an email address for newsletters',
+ url: '/settings/emails',
+ },
+ ],
+ }
}
- 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 {
+ message: "Add a link or read more about Omnivore's Advanced Search.",
+ actions: [
+ {
+ text: 'Read the Docs',
+ url: 'https://docs.omnivore.app/using/search.html',
+ },
+ ],
}
- 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[0] ? (
+ {helpMessage ? (
) : (
<>>
@@ -200,14 +165,24 @@ 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 'in:inbox sort:read-desc is:unread':
+ return 'continue'
+ case 'in:library':
+ return 'non-feed'
+ case 'has:highlights mode:highlights':
+ return 'highlight'
+ case 'no:label':
+ return 'unlabeled'
case 'type:file':
return 'files'
+ case 'in:archive':
+ return 'archive'
case 'label:RSS':
return 'feed'
+ case 'in:subscription':
+ return 'subscription'
case 'label:Newsletter':
return 'newsletter'
}
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 666f2741e..9c056182a 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -194,6 +194,7 @@ function Subscriptions(props: LibraryFilterMenuProps): JSX.Element {
>
{!collapsed ? (
<>
+