feat: mark read doesn't require manual confirmation if hotkey called, f…

…ixed #293
RSSNext · Sep 9, 2024 · 6ce06be · 6ce06be
1 parent 33a049a
commit 6ce06be
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 51 deletions.
diff --git a/src/renderer/src/components/user-button.tsx b/src/renderer/src/components/user-button.tsx
@@ -113,11 +113,11 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
         >
           Profile
         </DropdownMenuItem>
-        <DropdownMenuSeparator />
+        {/* <DropdownMenuSeparator />
 
         <DropdownMenuLabel>
           <AppTheme />
-        </DropdownMenuLabel>
+        </DropdownMenuLabel> */}
 
         <DropdownMenuSeparator />
 
@@ -217,41 +217,41 @@ export function UserAvatar({
   )
 }
 
-const AppTheme = () => {
-  const theme = useThemeAtomValue()
-  const setTheme = useSetTheme()
-  return (
-    <SettingTabbedSegment
-      className="mb-0"
-      label={(
-        <span>
-          <i className="i-mgc-palette-cute-re mr-2 translate-y-0.5" />
-          <span className="text-sm font-normal">
-            Theme
-          </span>
-        </span>
-      )}
-      value={theme}
-      values={[
-        {
-          value: "system",
-          label: "",
-          icon: <i className="i-mingcute-monitor-line" />,
-        },
-        {
-          value: "light",
-          label: "",
-          icon: <i className="i-mingcute-sun-line" />,
-        },
-        {
-          value: "dark",
-          label: "",
-          icon: <i className="i-mingcute-moon-line" />,
-        },
-      ]}
-      onValueChanged={(value) => {
-        setTheme(value as "light" | "dark" | "system")
-      }}
-    />
-  )
-}
+// const AppTheme = () => {
+//   const theme = useThemeAtomValue()
+//   const setTheme = useSetTheme()
+//   return (
+//     <SettingTabbedSegment
+//       className="mb-0"
+//       label={(
+//         <span>
+//           <i className="i-mgc-palette-cute-re mr-2 translate-y-0.5" />
+//           <span className="text-sm font-normal">
+//             Theme
+//           </span>
+//         </span>
+//       )}
+//       value={theme}
+//       values={[
+//         {
+//           value: "system",
+//           label: "",
+//           icon: <i className="i-mingcute-monitor-line" />,
+//         },
+//         {
+//           value: "light",
+//           label: "",
+//           icon: <i className="i-mingcute-sun-line" />,
+//         },
+//         {
+//           value: "dark",
+//           label: "",
+//           icon: <i className="i-mingcute-moon-line" />,
+//         },
+//       ]}
+//       onValueChanged={(value) => {
+//         setTheme(value as "light" | "dark" | "system")
+//       }}
+//     />
+//   )
+// }
diff --git a/src/renderer/src/modules/entry-column/components/mark-all-button.tsx b/src/renderer/src/modules/entry-column/components/mark-all-button.tsx
@@ -4,17 +4,21 @@ import {
   Button,
   IconButton,
 } from "@renderer/components/ui/button"
+import { Kbd, KbdCombined } from "@renderer/components/ui/kbd/Kbd"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@renderer/components/ui/popover"
 import { RootPortal } from "@renderer/components/ui/portal"
+import { HotKeyScopeMap } from "@renderer/constants"
 import { shortcuts } from "@renderer/constants/shortcuts"
 import { cn } from "@renderer/lib/utils"
-import { AnimatePresence, m } from "framer-motion"
+import { AnimatePresence, calcLength, m } from "framer-motion"
 import type { FC, ReactNode } from "react"
 import { forwardRef, Fragment, useState } from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { toast } from "sonner"
 import { useOnClickOutside } from "usehooks-ts"
 
 import type { MarkAllFilter } from "../hooks/useMarkAll"
@@ -88,19 +92,61 @@ export const MarkAllReadWithOverlay = forwardRef<
       </RootPortal>
     )
   }
+  useHotkeys(
+    shortcuts.entries.markAllAsRead.key,
+    () => {
+      setShow(false)
+
+      let cancel = false
+      const undo = () => {
+        toast.dismiss(id)
+        if (cancel) return
+        cancel = true
+      }
+      const id = toast(<ConfirmMarkAllReadInfo undo={undo} />, {
+        duration: 3000,
+        onAutoClose() {
+          if (cancel) return
+          handleMarkAllAsRead()
+        },
+        action: {
+          label: (
+            <span className="flex items-center gap-1">
+              Undo
+              <Kbd className="inline-flex items-center border border-border bg-transparent dark:text-white">
+                Meta+Z
+              </Kbd>
+            </span>
+          ),
+          onClick: undo,
+        },
+      })
+    },
+    {
+      preventDefault: true,
+      scopes: HotKeyScopeMap.Home,
+    },
+  )
+
   return (
     <Fragment>
       <ActionButton
-        shortcut={shortcut ? shortcuts.entries.markAllAsRead.key : undefined}
-        tooltip={(
-          <span>
-            Mark
-            <span> </span>
-            {which}
-            <span> </span>
-            as read
-          </span>
-        )}
+        tooltip={<>
+            <span>
+              Mark
+              <span> </span>
+              {which}
+              <span> </span>
+              as read
+            </span>
+            {shortcut && (
+              <div className="ml-1">
+                <KbdCombined className="text-foreground/80">
+                  {shortcuts.entries.markAllAsRead.key}
+                </KbdCombined>
+              </div>
+            )}
+          </>}
         className={className}
         ref={ref}
         onClick={() => {
@@ -115,6 +161,21 @@ export const MarkAllReadWithOverlay = forwardRef<
   )
 })
 
+const ConfirmMarkAllReadInfo = ({ undo }: { undo: () => any }) => {
+  useHotkeys("ctrl+z,meta+z", undo, {
+    scopes: HotKeyScopeMap.Home,
+    preventDefault: true,
+  })
+  return (
+    <div>
+      <p>Confirm mark all as read?</p>
+      <small className="opacity-50">
+        Will confirmed automatically after 3s.
+      </small>
+    </div>
+  )
+}
+
 /**
  * @deprecated
  */