diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index f44265e41..ef186a759 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -2,7 +2,7 @@ import { Action, createAction, useKBar, useRegisterActions } from 'kbar' import debounce from 'lodash/debounce' import { useRouter } from 'next/router' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' -import toast, { Toaster } from 'react-hot-toast' +import { Toaster } from 'react-hot-toast' import TopBarProgress from 'react-topbar-progress-indicator' import { useFetchMore } from '../../../lib/hooks/useFetchMoreScroll' import { usePersistedState } from '../../../lib/hooks/usePersistedState' @@ -42,15 +42,17 @@ 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' import { articleQuery } from '../../../lib/networking/queries/useGetArticleQuery' import { PinnedButtons } from './PinnedButtons' import { PinnedSearch } from '../../../pages/settings/pinned-searches' -import { ErrorSlothIcon } from '../../elements/icons/ErrorSlothIcon' -import { DEFAULT_HEADER_HEIGHT } from './HeaderSpacer' import { FetchItemsError } from './FetchItemsError' import { TLDRLayout } from './TLDRLayout' @@ -797,26 +799,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', + }) +}