feat: mark all as read new design

Signed-off-by: Innei <i@innei.in>

src/renderer/src/modules/entry-column/components/mark-all-button.tsx

@@ -9,11 +9,13 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@renderer/components/ui/popover"
+import { RootPortal } from "@renderer/components/ui/portal"
 import { shortcuts } from "@renderer/constants/shortcuts"
 import { cn } from "@renderer/lib/utils"
 import { AnimatePresence, m } from "framer-motion"
 import type { FC, ReactNode } from "react"
-import { forwardRef, useState } from "react"
+import { forwardRef, Fragment, useState } from "react"
+import { useOnClickOutside } from "usehooks-ts"
 
 import type { MarkAllFilter } from "../hooks/useMarkAll"
 import { useMarkAllByRoute } from "../hooks/useMarkAll"
@@ -25,7 +27,94 @@ interface MarkAllButtonProps {
 
   shortcut?: boolean
 }
-export const MarkAllReadButton = forwardRef<
+
+export const MarkAllReadWithOverlay = forwardRef<
+  HTMLButtonElement,
+  MarkAllButtonProps & {
+    containerRef: React.RefObject<HTMLDivElement>
+  }
+>(({ filter, className, which = "all", shortcut, containerRef }, ref) => {
+  const [show, setShow] = useState(false)
+
+  const handleMarkAllAsRead = useMarkAllByRoute(filter)
+
+  const [popoverRef, setPopoverRef] = useState<HTMLDivElement | null>(null)
+  useOnClickOutside({ current: popoverRef }, () => {
+    setShow(false)
+  })
+  return (
+    <Fragment>
+      <ActionButton
+        shortcut={shortcut ? shortcuts.entries.markAllAsRead.key : undefined}
+        tooltip={(
+          <span>
+            Mark
+            <span> </span>
+            {which}
+            <span> </span>
+            as read
+          </span>
+        )}
+        className={className}
+        ref={ref}
+        onClick={() => {
+          setShow(true)
+        }}
+      >
+        <i className="i-mgc-check-circle-cute-re" />
+      </ActionButton>
+
+      <AnimatePresence>
+        {show && (
+          <RootPortal>
+            <m.div
+              ref={setPopoverRef}
+              initial={{ y: -70 }}
+              animate={{ y: 0 }}
+              exit={{ y: -70 }}
+              transition={{ type: "spring", damping: 20, stiffness: 300 }}
+              className="shadow-modal fixed z-50 bg-theme-modal-background-opaque shadow"
+              style={{
+                left: containerRef.current?.getBoundingClientRect().left,
+                top: containerRef.current?.getBoundingClientRect().top,
+                width: containerRef.current?.getBoundingClientRect().width,
+              }}
+            >
+              <div className="flex w-full translate-x-[-2px] items-center justify-between gap-3 !py-3 pl-6 pr-3 [&_button]:text-xs">
+                <span className="center gap-[calc(0.5rem+2px)]">
+                  <i className="i-mgc-check-circle-cute-re" />
+                  <span className="text-sm font-bold">
+                    Mark
+                    <span> </span>
+                    {which}
+                    <span> </span>
+                    as read?
+                  </span>
+                </span>
+                <div className="space-x-4">
+                  <IconButton
+                    icon={<i className="i-mgc-check-filled" />}
+                    onClick={() => {
+                      handleMarkAllAsRead()
+                      setShow(false)
+                    }}
+                  >
+                    Confirm
+                  </IconButton>
+                </div>
+              </div>
+            </m.div>
+          </RootPortal>
+        )}
+      </AnimatePresence>
+    </Fragment>
+  )
+})
+
+/**
+ * @deprecated
+ */
+export const MarkAllReadPopover = forwardRef<
   HTMLButtonElement,
   MarkAllButtonProps
 >(({ filter, className, which = "all", shortcut }, ref) => {

src/renderer/src/modules/entry-column/layouts/EntryListHeader.tsx

@@ -25,7 +25,9 @@ import { useFeedById, useFeedHeaderTitle } from "@renderer/store/feed"
 import type { FC } from "react"
 import * as React from "react"
 
-import { MarkAllReadButton } from "../components/mark-all-button"
+import {
+  MarkAllReadWithOverlay,
+} from "../components/mark-all-button"
 
 export const EntryListHeader: FC<{
   totalCount: number
@@ -79,8 +81,11 @@ export const EntryListHeader: FC<{
     "pl-12",
   ]
 
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
   return (
     <div
+      ref={containerRef}
       className={cn(
         "mb-2 flex w-full flex-col pr-4 pt-2.5",
         titleStyleBasedView[view],
@@ -163,7 +168,7 @@ export const EntryListHeader: FC<{
               <i className="i-mgc-round-cute-re" />
             )}
           </ActionButton>
-          <MarkAllReadButton shortcut />
+          <MarkAllReadWithOverlay containerRef={containerRef} shortcut />
         </div>
       </div>
       {titleAtBottom && titleInfo}

src/renderer/src/modules/entry-content/components/EntryReadHistory.tsx

@@ -13,6 +13,7 @@ import { useAuthQuery } from "@renderer/hooks/common"
 import { Queries } from "@renderer/queries"
 import { useEntryReadHistory } from "@renderer/store/entry"
 import { useUserById } from "@renderer/store/user"
+import { LayoutGroup, m } from "framer-motion"
 import { Fragment } from "react"
 
 import { usePresentUserProfileModal } from "../../profile/hooks"
@@ -33,15 +34,17 @@ export const EntryReadHistory: Component<{ entryId: string }> = ({
 
   return (
     <div className="flex items-center">
-      {entryHistory.userIds
-        .filter((id) => id !== me?.id)
-        .slice(0, 10)
+      <LayoutGroup>
+        {entryHistory.userIds
+          .filter((id) => id !== me?.id)
+          .slice(0, 10)
 
-        .map((userId, i) => (
-          <Fragment key={userId}>
-            <EntryUser userId={userId} i={i} />
-          </Fragment>
-        ))}
+          .map((userId, i) => (
+            <Fragment key={userId}>
+              <EntryUser userId={userId} i={i} />
+            </Fragment>
+          ))}
+      </LayoutGroup>
 
       {entryHistory.readCount &&
         entryHistory.readCount > 10 &&
@@ -57,8 +60,7 @@ export const EntryReadHistory: Component<{ entryId: string }> = ({
               className="relative z-[11] flex size-7 items-center justify-center rounded-full border border-border bg-muted ring ring-background"
             >
               <span className="text-[10px] font-medium text-muted-foreground">
-                +
-                {Math.min(entryHistory.readCount - 10, 99)}
+                +{Math.min(entryHistory.readCount - 10, 99)}
               </span>
             </div>
           </TooltipTrigger>
@@ -85,7 +87,9 @@ const EntryUser: Component<{
           zIndex: i,
         }}
       >
-        <button
+        <m.button
+          layout="position"
+          layoutId={userId}
           className="no-drag-region cursor-pointer"
           type="button"
           onClick={() => {
@@ -96,13 +100,9 @@ const EntryUser: Component<{
             <AvatarImage src={user?.image || undefined} />
             <AvatarFallback>{user.name?.slice(0, 2)}</AvatarFallback>
           </Avatar>
-        </button>
+        </m.button>
       </TooltipTrigger>
-      <TooltipContent side="top">
-        Recent reader:
-        {" "}
-        {user.name}
-      </TooltipContent>
+      <TooltipContent side="top">Recent reader: {user.name}</TooltipContent>
     </Tooltip>
   )
 }