diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index f44265e41..10a77911a 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -42,7 +42,11 @@ import { LibraryHeader, MultiSelectMode } from './LibraryHeader'
import { UploadModal } from '../UploadModal'
import { BulkAction } from '../../../lib/networking/mutations/bulkActionMutation'
import { bulkActionMutation } from '../../../lib/networking/mutations/bulkActionMutation'
-import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import {
+ showErrorToast,
+ showSuccessToast,
+ showSuccessToastWithAction,
+} from '../../../lib/toastHelpers'
import { SetPageLabelsModalPresenter } from '../article/SetLabelsModalPresenter'
import { NotebookPresenter } from '../article/NotebookPresenter'
import { saveUrlMutation } from '../../../lib/networking/mutations/saveUrlMutation'
@@ -797,26 +801,10 @@ export function HomeFeedContainer(): JSX.Element {
) => {
const result = await saveUrlMutation(link, timezone, locale)
if (result) {
- toast(
- () => (
-
- Link Saved
-
-
-
- ),
- { position: 'bottom-right' }
- )
+ showSuccessToastWithAction('Link saved', 'Read now', async () => {
+ window.location.href = `/article?url=${encodeURIComponent(link)}`
+ return Promise.resolve()
+ })
const id = result.url?.match(/[^/]+$/)?.[0] ?? ''
performActionOnItem('refresh', undefined as unknown as any)
} else {
diff --git a/packages/web/lib/toastHelpers.tsx b/packages/web/lib/toastHelpers.tsx
index 867880a41..18c92a75c 100644
--- a/packages/web/lib/toastHelpers.tsx
+++ b/packages/web/lib/toastHelpers.tsx
@@ -107,6 +107,46 @@ const showToastWithUndo = (
)
}
+const showToastWithAction = (
+ message: string,
+ background: string,
+ actionName: string,
+ action: () => Promise,
+ options?: ToastOptions
+) => {
+ return toast(
+ ({ id }) => (
+
+
+ {message}
+
+
+
+
+ ),
+ {
+ style: {
+ ...toastStyles,
+ background: background,
+ },
+ duration: 3500,
+ ...options,
+ }
+ )
+}
+
export const showSuccessToast = (message: string, options?: ToastOptions) => {
return showToast(message, '#55B938', 'success', {
position: 'bottom-right',
@@ -129,3 +169,13 @@ export const showSuccessToastWithUndo = (
position: 'bottom-right',
})
}
+
+export const showSuccessToastWithAction = (
+ message: string,
+ actionName: string,
+ action: () => Promise
+) => {
+ return showToastWithAction(message, '#55B938', actionName, action, {
+ position: 'bottom-right',
+ })
+}