feat: entry preview modal

Signed-off-by: Innei <i@innei.in>
RSSNext · Aug 15, 2024 · 3981995 · 3981995
1 parent 8511a79
commit 3981995
Show file tree

Hide file tree

Showing 13 changed files with 207 additions and 105 deletions.
diff --git a/icons/mgc/fullscreen_2_cute_re.svg b/icons/mgc/fullscreen_2_cute_re.svg
diff --git a/src/renderer/src/components/common/PoweredByFooter.tsx b/src/renderer/src/components/common/PoweredByFooter.tsx
@@ -11,7 +11,7 @@ export const PoweredByFooter: Component = ({ className }) => (
     {" "}
     <a
       href={pkg.homepage}
-      className="cursor-pointer font-bold text-theme-accent"
+      className="cursor-pointer font-bold text-theme-accent no-underline"
       target="_blank"
       rel="noreferrer"
     >

diff --git a/src/renderer/src/components/ui/datetime/index.tsx b/src/renderer/src/components/ui/datetime/index.tsx
@@ -1,3 +1,4 @@
+import { stopPropagation } from "@renderer/lib/dom"
 import dayjs from "dayjs"
 import type { FC } from "react"
 import { useEffect, useRef, useState } from "react"
@@ -75,7 +76,11 @@ export const RelativeTime: FC<{
 
   return (
     <Tooltip>
-      <TooltipTrigger>{relative}</TooltipTrigger>
+
+      {/* https://github.com/radix-ui/primitives/issues/2248#issuecomment-2147056904 */}
+      <TooltipTrigger onFocusCapture={stopPropagation}>
+        {relative}
+      </TooltipTrigger>
 
       <TooltipPortal>
         <TooltipContent>{dayjs(props.date).format("llll")}</TooltipContent>

diff --git a/src/renderer/src/components/ui/markdown/renderers/MarkdownLink.tsx b/src/renderer/src/components/ui/markdown/renderers/MarkdownLink.tsx
@@ -1,12 +1,7 @@
-import { useNavigateEntry } from "@renderer/hooks/biz/useNavigateEntry"
-import { useAuthQuery } from "@renderer/hooks/common"
 import { FeedViewType } from "@renderer/lib/enum"
-import { isBizId } from "@renderer/lib/utils"
 import { useEntryContentContext } from "@renderer/modules/entry-content/hooks"
-import { Queries } from "@renderer/queries"
-import { useEntry } from "@renderer/store/entry"
 import { useFeedByIdSelector } from "@renderer/store/feed"
-import { useCallback, useMemo } from "react"
+import { useMemo } from "react"
 
 import type { LinkProps } from "../../link"
 import {
@@ -37,26 +32,6 @@ export const MarkdownLink = (props: LinkProps) => {
     if (href.startsWith("/") && feedSiteUrl) return safeUrl(href, feedSiteUrl)
     return href
   }, [feedSiteUrl, props])
-  const entryId = isBizId(props.href) ? props.href : null
-  const entry = useEntry(entryId)
-
-  useAuthQuery(Queries.entries.byId(entryId!), {
-    enabled: !!entryId && !entry,
-    staleTime: 1000 * 60 * 5,
-  })
-
-  const navigate = useNavigateEntry()
-  const onClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (entryId) {
-        e.preventDefault()
-        navigate({
-          entryId,
-        })
-      }
-    },
-    [entryId, navigate],
-  )
 
   const parseTimeStamp = view === FeedViewType.Audios
   if (parseTimeStamp) {
@@ -76,7 +51,6 @@ export const MarkdownLink = (props: LinkProps) => {
           href={populatedFullHref}
           title={props.title}
           target="_blank"
-          onClick={onClick}
         >
           {props.children}
 
@@ -88,7 +62,7 @@ export const MarkdownLink = (props: LinkProps) => {
       {!!props.href && (
         <TooltipPortal>
           <TooltipContent align="start" className="break-all" side="bottom">
-            {entry?.entries.title || populatedFullHref}
+            {populatedFullHref}
           </TooltipContent>
         </TooltipPortal>
       )}

diff --git a/src/renderer/src/components/ui/modal/inspire/PeekModal.tsx b/src/renderer/src/components/ui/modal/inspire/PeekModal.tsx
@@ -0,0 +1,55 @@
+import { m } from "framer-motion"
+import type { PropsWithChildren } from "react"
+import { Link } from "react-router-dom"
+
+import { microReboundPreset } from "../../constants/spring"
+import { useModalStack } from "../stacked"
+
+export const PeekModal = (
+  props: PropsWithChildren<{
+    to: string
+  }>,
+) => {
+  const { dismissAll, dismissTop } = useModalStack()
+  const { to, children } = props
+
+  return (
+    <div className="relative mx-auto mt-[10vh] max-w-full overflow-auto px-2 scrollbar-none lg:max-w-[65rem] lg:p-0">
+      <m.div
+        initial={{ opacity: 0.5, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 50 }}
+        transition={microReboundPreset}
+        className="scrollbar-none"
+      >
+        {children}
+      </m.div>
+
+      <m.div
+        initial={true}
+        exit={{
+          opacity: 0,
+        }}
+        className="fixed right-3 top-2 flex items-center gap-4"
+      >
+        <Link
+          className="center flex size-8 rounded-full p-1 shadow-sm ring-1 ring-zinc-200 dark:ring-neutral-800"
+          to={to}
+          onClick={dismissAll}
+        >
+          <i className="i-mgc-fullscreen-2-cute-re text-lg" />
+          <span className="sr-only">Go to this link</span>
+        </Link>
+
+        <button
+          type="button"
+          className="center flex size-8 rounded-full p-1 shadow-sm ring-1 ring-zinc-200 dark:ring-neutral-800"
+          onClick={dismissTop}
+        >
+          <i className="i-mgc-close-cute-re text-lg" />
+          <span className="sr-only">Dimiss</span>
+        </button>
+      </m.div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/ui/modal/stacked/modal.tsx b/src/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -232,12 +232,16 @@ export const ModalInternal = memo(
           if (CustomModalComponent) {
             return (
               <Wrapper>
-                <Dialog.Root open onOpenChange={onClose} modal={modal}>
+                <Dialog.Root
+                  open
+                  onOpenChange={onClose}
+                  modal={modal}
+                >
                   <Dialog.Portal>
                     <Dialog.DialogTitle className="sr-only">
                       {title}
                     </Dialog.DialogTitle>
-                    <Dialog.Content asChild>
+                    <Dialog.Content asChild onFocusCapture={stopPropagation}>
                       <div
                         ref={edgeElementRef}
                         className={cn(
@@ -249,8 +253,10 @@ export const ModalInternal = memo(
                           modalContainerClassName,
                         )}
                         onClick={
-                          clickOutsideToDismiss && canClose && modal ?
-                            dismiss :
+                          modal ?
+                            clickOutsideToDismiss && canClose ?
+                              dismiss :
+                              noticeModal :
                             undefined
                         }
                         style={zIndexStyle}
@@ -276,7 +282,7 @@ export const ModalInternal = memo(
             <Wrapper>
               <Dialog.Root modal={modal} open onOpenChange={onClose}>
                 <Dialog.Portal>
-                  <Dialog.Content asChild>
+                  <Dialog.Content asChild onFocusCapture={stopPropagation}>
                     <div
                       ref={edgeElementRef}
                       style={zIndexStyle}
@@ -288,9 +294,11 @@ export const ModalInternal = memo(
                         !isResizeable && "center",
                       )}
                       onClick={
-                        clickOutsideToDismiss && canClose && modal ?
-                          dismiss :
-                          noticeModal
+                        modal ?
+                          clickOutsideToDismiss && canClose ?
+                            dismiss :
+                            noticeModal :
+                          undefined
                       }
                     >
                       <m.div

diff --git a/src/renderer/src/components/ui/paper/Paper.tsx b/src/renderer/src/components/ui/paper/Paper.tsx
@@ -0,0 +1,20 @@
+import { cn } from "@renderer/lib/utils"
+import type { JSX } from "react"
+
+export const Paper: Component<{
+  as?: keyof JSX.IntrinsicElements | Component
+}> = ({ children, className, as: As = "main" }) => (
+  <As
+    className={cn(
+      "relative bg-white dark:bg-zinc-900 md:col-start-1 lg:col-auto",
+      "-m-4 p-[2rem_1rem] md:m-0 lg:p-[30px_45px]",
+      "rounded-[0_6px_6px_0] border-zinc-200/70 dark:border-neutral-800 lg:border",
+      "shadow-perfect perfect-sm",
+      "min-w-0",
+      "print:!border-none print:!bg-transparent print:!shadow-none",
+      className,
+    )}
+  >
+    {children}
+  </As>
+)
diff --git a/src/renderer/src/components/ui/paper/index.ts b/src/renderer/src/components/ui/paper/index.ts
@@ -0,0 +1 @@
+export * from "./Paper"
diff --git a/src/renderer/src/lib/utils.ts b/src/renderer/src/lib/utils.ts
@@ -88,22 +88,9 @@ export const isASCII = (str) => /^[\u0000-\u007F]*$/.test(str)
 export const isBizId = (id: string) => {
   if (!id) return false
 
-  // id is uuid or snowflake
-
-  // 0. check is uuid
-  if (
-    id.length === 36 &&
-    id[8] === "-" &&
-    id[13] === "-" &&
-    id[18] === "-" &&
-    id[23] === "-"
-  ) {
-    return true
-  }
-
   // 1. check is snowflake
   // snowflake ep 1712546615000
-  if (id.length > 16 && id.length < 20 && !Number.isNaN(id)) {
+  if (id.length > 13 && id.length < 20 && !Number.isNaN(id)) {
     return true
   }