support for marking entries older than a threshold

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

@@ -1,12 +1,12 @@
-import { t, Trans } from "@lingui/macro"
-import { Center, Code, Divider, Group, Text } from "@mantine/core"
-import { openConfirmModal } from "@mantine/modals"
-import { markAllEntries, reloadEntries } from "app/slices/entries"
+import { t } from "@lingui/macro"
+import { Center, Divider, Group } from "@mantine/core"
+import { reloadEntries } from "app/slices/entries"
 import { changeReadingMode, changeReadingOrder } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { ActionButton } from "components/ActionButtton"
 import { Loader } from "components/Loader"
-import { TbArrowDown, TbArrowUp, TbChecks, TbEye, TbEyeOff, TbRefresh, TbUser } from "react-icons/tb"
+import { TbArrowDown, TbArrowUp, TbEye, TbEyeOff, TbRefresh, TbUser } from "react-icons/tb"
+import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
 import { ProfileMenu } from "./ProfileMenu"
 
 function HeaderDivider() {
@@ -14,46 +14,17 @@ function HeaderDivider() {
 }
 
 const iconSize = 18
-
 export function Header() {
-    const source = useAppSelector(state => state.entries.source)
-    const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
-    const entriesTimestamp = useAppSelector(state => state.entries.timestamp)
     const settings = useAppSelector(state => state.user.settings)
     const profile = useAppSelector(state => state.user.profile)
     const dispatch = useAppDispatch()
 
-    const openMarkAllEntriesModal = () =>
-        openConfirmModal({
-            title: t`Mark all entries as read`,
-            children: (
-                <Text size="sm">
-                    <Trans>
-                        Are you sure you want to mark all entries of <Code>{sourceLabel}</Code> as read?
-                    </Trans>
-                </Text>
-            ),
-            labels: { confirm: t`Confirm`, cancel: t`Cancel` },
-            confirmProps: { color: "red" },
-            onConfirm: () =>
-                dispatch(
-                    markAllEntries({
-                        sourceType: source.type,
-                        req: {
-                            id: source.id,
-                            read: true,
-                            olderThan: entriesTimestamp,
-                        },
-                    })
-                ),
-        })
-
     if (!settings) return <Loader />
     return (
         <Center>
             <Group>
                 <ActionButton icon={<TbRefresh size={iconSize} />} label={t`Refresh`} onClick={() => dispatch(reloadEntries())} />
-                <ActionButton icon={<TbChecks size={iconSize} />} label={t`Mark all as read`} onClick={openMarkAllEntriesModal} />
+                <MarkAllAsReadButton iconSize={iconSize} />
 
                 <HeaderDivider />
 

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

@@ -0,0 +1,83 @@
+import { t, Trans } from "@lingui/macro"
+
+import { Button, Code, Group, Modal, Slider, Stack, Text } from "@mantine/core"
+import { markAllEntries } from "app/slices/entries"
+import { useAppDispatch, useAppSelector } from "app/store"
+import { ActionButton } from "components/ActionButtton"
+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 dispatch = useAppDispatch()
+
+    return (
+        <>
+            <Modal opened={opened} onClose={() => setOpened(false)} title={t`Mark all entries as read`}>
+                <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}
+                    />
+                    <Group position="right">
+                        <Button variant="default" onClick={() => setOpened(false)}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button
+                            color="red"
+                            onClick={() => {
+                                setOpened(false)
+                                dispatch(
+                                    markAllEntries({
+                                        sourceType: source.type,
+                                        req: {
+                                            id: source.id,
+                                            read: true,
+                                            olderThan: entriesTimestamp - threshold * 24 * 60 * 60 * 1000,
+                                        },
+                                    })
+                                )
+                            }}
+                        >
+                            <Trans>Confirm</Trans>
+                        </Button>
+                    </Group>
+                </Stack>
+            </Modal>
+            <ActionButton
+                icon={<TbChecks size={props.iconSize} />}
+                label={t`Mark all as read`}
+                onClick={() => {
+                    setThreshold(0)
+                    setOpened(true)
+                }}
+            />
+        </>
+    )
+}