mark all as read confirmation now also applies to the "shift+a" keyboard shortcut (#1744)

commafeed-client/src/app/entries/slice.ts

@@ -28,6 +28,7 @@ interface EntriesState {
     loading: boolean
     search?: string
     scrollingToEntry: boolean
+    markAllAsReadConfirmationDialogOpen: boolean
 }
 
 const initialState: EntriesState = {
@@ -41,6 +42,7 @@ const initialState: EntriesState = {
     hasMore: true,
     loading: false,
     scrollingToEntry: false,
+    markAllAsReadConfirmationDialogOpen: false,
 }
 
 export const entriesSlice = createSlice({
@@ -61,6 +63,9 @@ export const entriesSlice = createSlice({
         setSearch: (state, action: PayloadAction<string>) => {
             state.search = action.payload
         },
+        setMarkAllAsReadConfirmationDialogOpen: (state, action: PayloadAction<boolean>) => {
+            state.markAllAsReadConfirmationDialogOpen = action.payload
+        },
     },
     extraReducers: builder => {
         builder.addCase(markEntry.pending, (state, action) => {
@@ -119,4 +124,4 @@ export const entriesSlice = createSlice({
     },
 })
 
-export const { setSearch } = entriesSlice.actions
+export const { setSearch, setMarkAllAsReadConfirmationDialogOpen } = entriesSlice.actions

commafeed-client/src/app/entries/thunks.ts

@@ -1,7 +1,7 @@
 import { createAppAsyncThunk } from "app/async-thunk"
 import { client } from "app/client"
 import { Constants } from "app/constants"
-import { type EntrySource, type EntrySourceType, entriesSlice, setSearch } from "app/entries/slice"
+import { type EntrySource, type EntrySourceType, entriesSlice, setMarkAllAsReadConfirmationDialogOpen, setSearch } from "app/entries/slice"
 import type { RootState } from "app/store"
 import { reloadTree } from "app/tree/thunks"
 import type { Entry, MarkRequest, TagRequest } from "app/types"
@@ -123,6 +123,32 @@ export const markAllEntries = createAppAsyncThunk(
     }
 )
 
+export const markAllAsReadWithConfirmationIfRequired = createAppAsyncThunk(
+    "entries/entry/markAllAsReadWithConfirmationIfRequired",
+    async (_, thunkApi) => {
+        const state = thunkApi.getState()
+        const source = state.entries.source
+        const entriesTimestamp = state.entries.timestamp ?? Date.now()
+        const markAllAsReadConfirmation = state.user.settings?.markAllAsReadConfirmation
+
+        if (markAllAsReadConfirmation) {
+            thunkApi.dispatch(setMarkAllAsReadConfirmationDialogOpen(true))
+        } else {
+            thunkApi.dispatch(
+                markAllEntries({
+                    sourceType: source.type,
+                    req: {
+                        id: source.id,
+                        read: true,
+                        olderThan: Date.now(),
+                        insertedBefore: entriesTimestamp,
+                    },
+                })
+            )
+        }
+    }
+)
+
 export const starEntry = createAppAsyncThunk(
     "entries/entry/star",
     (arg: { entry: Entry; starred: boolean }) => {

commafeed-client/src/components/MarkAllAsReadConfirmationDialog.tsx

@@ -0,0 +1,77 @@
+import { Trans } from "@lingui/react/macro"
+import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
+import { setMarkAllAsReadConfirmationDialogOpen } from "app/entries/slice"
+import { markAllEntries } from "app/entries/thunks"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { useState } from "react"
+
+export function MarkAllAsReadConfirmationDialog() {
+    const [threshold, setThreshold] = useState(0)
+    const open = useAppSelector(state => state.entries.markAllAsReadConfirmationDialogOpen)
+    const source = useAppSelector(state => state.entries.source)
+    const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
+    const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
+    const dispatch = useAppDispatch()
+
+    const onConfirm = () => {
+        dispatch(
+            markAllEntries({
+                sourceType: source.type,
+                req: {
+                    id: source.id,
+                    read: true,
+                    olderThan: Date.now() - threshold * 24 * 60 * 60 * 1000,
+                    insertedBefore: entriesTimestamp,
+                },
+            })
+        )
+        dispatch(setMarkAllAsReadConfirmationDialogOpen(false))
+    }
+
+    return (
+        <Modal
+            opened={open}
+            onClose={() => dispatch(setMarkAllAsReadConfirmationDialogOpen(false))}
+            title={<Trans>Mark all entries as read</Trans>}
+        >
+            <Stack>
+                <Text size="sm">
+                    {threshold === 0 && (
+                        <Trans>
+                            Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
+                        </Trans>
+                    )}
+                    {threshold > 0 && (
+                        <Trans>
+                            Are you sure you want to mark entries older than {threshold} days of <Code>{sourceLabel}</Code> as read?
+                        </Trans>
+                    )}
+                </Text>
+                <Slider
+                    py="xl"
+                    min={0}
+                    max={28}
+                    marks={[
+                        { value: 0, label: "0" },
+                        { value: 7, label: "7" },
+                        { value: 14, label: "14" },
+                        { value: 21, label: "21" },
+                        { value: 28, label: "28" },
+                    ]}
+                    value={threshold}
+                    onChange={setThreshold}
+                    data-autofocus
+                    onKeyDown={e => e.key === "Enter" && onConfirm()}
+                />
+                <Group justify="flex-end">
+                    <Button variant="default" onClick={() => dispatch(setMarkAllAsReadConfirmationDialogOpen(false))}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button color="red" onClick={onConfirm}>
+                        <Trans>Confirm</Trans>
+                    </Button>
+                </Group>
+            </Stack>
+        </Modal>
+    )
+}

commafeed-client/src/components/content/FeedEntries.tsx

@@ -5,7 +5,7 @@ import { Constants } from "app/constants"
 import type { ExpendableEntry } from "app/entries/slice"
 import {
     loadMoreEntries,
-    markAllEntries,
+    markAllAsReadWithConfirmationIfRequired,
     markEntry,
     reloadEntries,
     selectEntry,
@@ -275,17 +275,7 @@ export function FeedEntries() {
     })
     useMousetrap("shift+a", () => {
         // mark all entries as read
-        dispatch(
-            markAllEntries({
-                sourceType: source.type,
-                req: {
-                    id: source.id,
-                    read: true,
-                    olderThan: Date.now(),
-                    insertedBefore: entriesTimestamp,
-                },
-            })
-        )
+        dispatch(markAllAsReadWithConfirmationIfRequired())
     })
     useMousetrap("g a", async () => await dispatch(redirectToRootCategory()))
     useMousetrap("f", () => dispatch(toggleSidebar()))

commafeed-client/src/components/header/Header.tsx

@@ -2,7 +2,7 @@ import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
 import { Box, Center, CloseButton, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { reloadEntries, search, selectNextEntry, selectPreviousEntry } from "app/entries/thunks"
+import { markAllAsReadWithConfirmationIfRequired, reloadEntries, search, selectNextEntry, selectPreviousEntry } from "app/entries/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { changeReadingMode, changeReadingOrder } from "app/user/thunks"
 import { ActionButton } from "components/ActionButton"
@@ -14,6 +14,7 @@ import { useEffect } from "react"
 import {
     TbArrowDown,
     TbArrowUp,
+    TbChecks,
     TbExternalLink,
     TbEye,
     TbEyeOff,
@@ -24,7 +25,6 @@ import {
     TbSortDescending,
     TbUser,
 } from "react-icons/tb"
-import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
 import { ProfileMenu } from "./ProfileMenu"
 
 function HeaderDivider() {
@@ -111,7 +111,11 @@ export function Header() {
                     label={msg`Refresh`}
                     onClick={async () => await dispatch(reloadEntries())}
                 />
-                <MarkAllAsReadButton iconSize={iconSize} />
+                <ActionButton
+                    icon={<TbChecks size={iconSize} />}
+                    label={msg`Mark all as read`}
+                    onClick={() => dispatch(markAllAsReadWithConfirmationIfRequired())}
+                />
 
                 <HeaderDivider />
 

commafeed-client/src/components/header/MarkAllAsReadButton.tsx

@@ -1,99 +0,0 @@
-import { msg } from "@lingui/core/macro"
-import { Trans } from "@lingui/react/macro"
-
-import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
-import { markAllEntries } from "app/entries/thunks"
-import { useAppDispatch, useAppSelector } from "app/store"
-import { ActionButton } from "components/ActionButton"
-import { useState } from "react"
-import { TbChecks } from "react-icons/tb"
-
-export function MarkAllAsReadButton(props: { iconSize: number }) {
-    const [opened, setOpened] = useState(false)
-    const [threshold, setThreshold] = useState(0)
-    const source = useAppSelector(state => state.entries.source)
-    const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
-    const entriesTimestamp = useAppSelector(state => state.entries.timestamp) ?? Date.now()
-    const markAllAsReadConfirmation = useAppSelector(state => state.user.settings?.markAllAsReadConfirmation)
-    const dispatch = useAppDispatch()
-
-    const buttonClicked = () => {
-        if (markAllAsReadConfirmation) {
-            setThreshold(0)
-            setOpened(true)
-        } else {
-            dispatch(
-                markAllEntries({
-                    sourceType: source.type,
-                    req: {
-                        id: source.id,
-                        read: true,
-                        olderThan: Date.now(),
-                        insertedBefore: entriesTimestamp,
-                    },
-                })
-            )
-        }
-    }
-
-    const onConfirm = () => {
-        setOpened(false)
-        dispatch(
-            markAllEntries({
-                sourceType: source.type,
-                req: {
-                    id: source.id,
-                    read: true,
-                    olderThan: Date.now() - threshold * 24 * 60 * 60 * 1000,
-                    insertedBefore: entriesTimestamp,
-                },
-            })
-        )
-    }
-
-    return (
-        <>
-            <Modal opened={opened} onClose={() => setOpened(false)} title={<Trans>Mark all entries as read</Trans>}>
-                <Stack>
-                    <Text size="sm">
-                        {threshold === 0 && (
-                            <Trans>
-                                Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
-                            </Trans>
-                        )}
-                        {threshold > 0 && (
-                            <Trans>
-                                Are you sure you want to mark entries older than {threshold} days of <Code>{sourceLabel}</Code> as read?
-                            </Trans>
-                        )}
-                    </Text>
-                    <Slider
-                        py="xl"
-                        min={0}
-                        max={28}
-                        marks={[
-                            { value: 0, label: "0" },
-                            { value: 7, label: "7" },
-                            { value: 14, label: "14" },
-                            { value: 21, label: "21" },
-                            { value: 28, label: "28" },
-                        ]}
-                        value={threshold}
-                        onChange={setThreshold}
-                        data-autofocus
-                        onKeyDown={e => e.key === "Enter" && onConfirm()}
-                    />
-                    <Group justify="flex-end">
-                        <Button variant="default" onClick={() => setOpened(false)}>
-                            <Trans>Cancel</Trans>
-                        </Button>
-                        <Button color="red" onClick={onConfirm}>
-                            <Trans>Confirm</Trans>
-                        </Button>
-                    </Group>
-                </Stack>
-            </Modal>
-            <ActionButton icon={<TbChecks size={props.iconSize} />} label={msg`Mark all as read`} onClick={buttonClicked} />
-        </>
-    )
-}

commafeed-client/src/pages/app/Layout.tsx

@@ -11,6 +11,7 @@ import { ActionButton } from "components/ActionButton"
 import { AnnouncementDialog } from "components/AnnouncementDialog"
 import { Loader } from "components/Loader"
 import { Logo } from "components/Logo"
+import { MarkAllAsReadConfirmationDialog } from "components/MarkAllAsReadConfirmationDialog"
 import { OnDesktop } from "components/responsive/OnDesktop"
 import { OnMobile } from "components/responsive/OnMobile"
 import { useAppLoading } from "hooks/useAppLoading"
@@ -216,6 +217,7 @@ export default function Layout(props: LayoutProps) {
                 <AppShell.Main id="content">
                     <Suspense fallback={<Loader />}>
                         <AnnouncementDialog />
+                        <MarkAllAsReadConfirmationDialog />
                         <Outlet />
                     </Suspense>
                 </AppShell.Main>