restore one-click list refresh (#1040)

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

@@ -1,7 +1,7 @@
 import { t } from "@lingui/macro"
 import { ActionIcon, Center, Divider, Indicator, Popover, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { search } from "app/slices/entries"
+import { reloadEntries, search } from "app/slices/entries"
 import { changeReadingMode, changeReadingOrder } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { ActionButton } from "components/ActionButtton"
@@ -11,7 +11,6 @@ import { useEffect } from "react"
 import { TbArrowDown, TbArrowUp, TbEye, TbEyeOff, TbRefresh, TbSearch, TbUser, TbX } from "react-icons/tb"
 import { MarkAllAsReadButton } from "./MarkAllAsReadButton"
 import { ProfileMenu } from "./ProfileMenu"
-import { RefreshMenu } from "./RefreshMenu"
 
 function HeaderDivider() {
     return <Divider orientation="vertical" />
@@ -41,7 +40,7 @@ export function Header() {
     return (
         <Center>
             <ButtonToolbar>
-                <RefreshMenu control={<ActionButton icon={<TbRefresh size={iconSize} />} label={t`Refresh`} />} />
+                <ActionButton icon={<TbRefresh size={iconSize} />} label={t`Refresh`} onClick={() => dispatch(reloadEntries())} />
                 <MarkAllAsReadButton iconSize={iconSize} />
 
                 <HeaderDivider />

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

@@ -1,11 +1,25 @@
-import { Trans } from "@lingui/macro"
+import { t, Trans } from "@lingui/macro"
 import { Box, Divider, Group, Menu, SegmentedControl, SegmentedControlItem, useMantineColorScheme } from "@mantine/core"
+import { showNotification } from "@mantine/notifications"
+import { client } from "app/client"
 import { redirectToAbout, redirectToAdminUsers, redirectToMetrics, redirectToSettings } from "app/slices/redirect"
 import { changeViewMode } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { ViewMode } from "app/types"
 import { useState } from "react"
-import { TbChartLine, TbHelp, TbLayoutList, TbList, TbMoon, TbNotes, TbPower, TbSettings, TbSun, TbUsers } from "react-icons/tb"
+import {
+    TbChartLine,
+    TbHelp,
+    TbLayoutList,
+    TbList,
+    TbMoon,
+    TbNotes,
+    TbPower,
+    TbSettings,
+    TbSun,
+    TbUsers,
+    TbWorldDownload,
+} from "react-icons/tb"
 
 interface ProfileMenuProps {
     control: React.ReactElement
@@ -56,6 +70,7 @@ const viewModeData: ViewModeControlItem[] = [
 export function ProfileMenu(props: ProfileMenuProps) {
     const [opened, setOpened] = useState(false)
     const viewMode = useAppSelector(state => state.user.settings?.viewMode)
+    const profile = useAppSelector(state => state.user.profile)
     const admin = useAppSelector(state => state.user.profile?.admin)
     const dispatch = useAppDispatch()
     const { colorScheme, toggleColorScheme } = useMantineColorScheme()
@@ -69,6 +84,7 @@ export function ProfileMenu(props: ProfileMenuProps) {
         <Menu position="bottom-end" closeOnItemClick={false} opened={opened} onChange={setOpened}>
             <Menu.Target>{props.control}</Menu.Target>
             <Menu.Dropdown>
+                {profile && <Menu.Label>{profile.name}</Menu.Label>}
                 <Menu.Item
                     icon={<TbSettings size={iconSize} />}
                     onClick={() => {
@@ -78,6 +94,21 @@ export function ProfileMenu(props: ProfileMenuProps) {
                 >
                     <Trans>Settings</Trans>
                 </Menu.Item>
+                <Menu.Item
+                    icon={<TbWorldDownload size={iconSize} />}
+                    onClick={() =>
+                        client.feed.refreshAll().then(() => {
+                            showNotification({
+                                message: t`Your feeds have been queued for refresh.`,
+                                color: "green",
+                                autoClose: 1000,
+                            })
+                            setOpened(false)
+                        })
+                    }
+                >
+                    <Trans>Fetch all my feeds now</Trans>
+                </Menu.Item>
 
                 <Divider />
                 <Menu.Label>

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

@@ -1,41 +0,0 @@
-import { t, Trans } from "@lingui/macro"
-import { Menu } from "@mantine/core"
-import { showNotification } from "@mantine/notifications"
-import { client } from "app/client"
-import { reloadEntries } from "app/slices/entries"
-import { useAppDispatch } from "app/store"
-import { TbRotateClockwise, TbWorldDownload } from "react-icons/tb"
-
-interface RefreshMenuProps {
-    control: React.ReactElement
-}
-
-const iconSize = 16
-
-export function RefreshMenu(props: RefreshMenuProps) {
-    const dispatch = useAppDispatch()
-
-    return (
-        <Menu>
-            <Menu.Target>{props.control}</Menu.Target>
-            <Menu.Dropdown>
-                <Menu.Item icon={<TbRotateClockwise size={iconSize} />} onClick={() => dispatch(reloadEntries())}>
-                    <Trans>Reload</Trans>
-                </Menu.Item>
-                <Menu.Item
-                    icon={<TbWorldDownload size={iconSize} />}
-                    onClick={() =>
-                        client.feed.refreshAll().then(() =>
-                            showNotification({
-                                message: t`Your feeds have been queued for refresh.`,
-                                color: "green",
-                            })
-                        )
-                    }
-                >
-                    <Trans>Fetch all my feeds now</Trans>
-                </Menu.Item>
-            </Menu.Dropdown>
-        </Menu>
-    )
-}