replace old client with new client from commafeed-ui repository

2026-03-21 21:37:29 +00:00 · 2022-08-13 10:56:07 +02:00
parent ac7b6eeb21
commit 04894f118b
183 changed files with 20326 additions and 12678 deletions
--- a/commafeed-client/src/components/header/Header.tsx
+++ b/commafeed-client/src/components/header/Header.tsx
@@ -0,0 +1,77 @@
+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 { 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 { ProfileMenu } from "./ProfileMenu"
+
+function HeaderDivider() {
+    return <Divider orientation="vertical" />
+}
+
+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} />
+
+                <HeaderDivider />
+
+                <ActionButton
+                    icon={settings.readingMode === "all" ? <TbEye size={iconSize} /> : <TbEyeOff size={iconSize} />}
+                    label={settings.readingMode === "all" ? t`All` : t`Unread`}
+                    onClick={() => dispatch(changeReadingMode(settings.readingMode === "all" ? "unread" : "all"))}
+                />
+                <ActionButton
+                    icon={settings.readingOrder === "asc" ? <TbArrowUp size={iconSize} /> : <TbArrowDown size={iconSize} />}
+                    label={settings.readingOrder === "asc" ? t`Asc` : t`Desc`}
+                    onClick={() => dispatch(changeReadingOrder(settings.readingOrder === "asc" ? "desc" : "asc"))}
+                />
+
+                <HeaderDivider />
+
+                <ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} />} />
+            </Group>
+        </Center>
+    )
+}