fix: entry item overlay flash

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

Hide file tree

Showing 3 changed files with 32 additions and 42 deletions.
diff --git a/src/renderer/src/components/ui/list-item-hover-overlay.tsx b/src/renderer/src/components/ui/list-item-hover-overlay.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { views } from "@renderer/constants"
 import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
 import clsx from "clsx"
@@ -39,9 +37,11 @@ export const ListItemHoverOverlay = ({
   const view = useRouteParamsSelector((s) => s.view)
 
   const mClassName = clsx(
-    "absolute",
+    "absolute z-[-1]",
     "bg-zinc-200/80 dark:bg-neutral-800",
-    views[view].wideMode ? "inset-0 rounded-xl" : "-inset-x-2 inset-y-0",
+    views[view].wideMode ?
+      "inset-x-0 inset-y-1 rounded-xl" :
+      "-inset-x-2 inset-y-0",
     className,
   )
   const motionConfig = {
@@ -59,7 +59,7 @@ export const ListItemHoverOverlay = ({
   return (
     <>
       <AnimatePresence>
-        {(mouseEnter && !isActive) && (
+        {mouseEnter && !isActive && (
           <m.div
             layout
             {...motionConfig}
@@ -68,12 +68,7 @@ export const ListItemHoverOverlay = ({
           />
         )}
       </AnimatePresence>
-      {isActive && (
-        <m.div
-          {...motionConfig}
-          className={mClassName}
-        />
-      )}
+      {isActive && <m.div {...motionConfig} className={mClassName} />}
       <div
         ref={ref}
         className="relative"

diff --git a/src/renderer/src/modules/entry-column/Items/picture-item.tsx b/src/renderer/src/modules/entry-column/Items/picture-item.tsx
@@ -82,37 +82,36 @@ export const PictureWaterFallItem = memo(function PictureWaterFallItem({
   const previewMedia = usePreviewMedia()
 
   if (!entry) return null
+  const hasMedia = entry.entries.media && entry.entries.media.length > 0
 
+  if (!hasMedia) return null
   return (
     <EntryItemWrapper
       view={FeedViewType.Pictures}
       entry={entry}
-      itemClassName="group hover:bg-theme-item-hover"
+      itemClassName="group hover:bg-theme-item-hover rounded-md"
     >
       <GridItem
         wrapperClassName="p-0 h-full flex flex-col"
         entryId={entryId}
         entryPreview={entryPreview}
         translation={translation}
       >
-        {entry.entries.media ? (
-          <MasonryItemFixedDimensionWrapper url={entry.entries.media[0].url}>
-            <SwipeMedia
-
-              media={entry.entries.media}
-              className={cn(
-                "w-full shrink-0 grow rounded-md",
-                isActive && "rounded-b-none",
-              )}
-              proxySize={proxySize}
-              imgClassName="object-cover"
-              uniqueKey={entryId}
-              onPreview={(media, i) => {
-                previewMedia(media, i)
-              }}
-            />
-          </MasonryItemFixedDimensionWrapper>
-        ) : null}
+        <MasonryItemFixedDimensionWrapper url={entry.entries.media![0].url}>
+          <SwipeMedia
+            media={entry.entries.media}
+            className={cn(
+              "w-full shrink-0 grow rounded-md",
+              isActive && "rounded-b-none",
+            )}
+            proxySize={proxySize}
+            imgClassName="object-cover"
+            uniqueKey={entryId}
+            onPreview={(media, i) => {
+              previewMedia(media, i)
+            }}
+          />
+        </MasonryItemFixedDimensionWrapper>
       </GridItem>
     </EntryItemWrapper>
   )

diff --git a/src/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx b/src/renderer/src/modules/entry-column/layouts/EntryItemWrapper.tsx
@@ -1,6 +1,5 @@
 import { useGeneralSettingKey } from "@renderer/atoms/settings/general"
 import { ListItemHoverOverlay } from "@renderer/components/ui/list-item-hover-overlay"
-import { views } from "@renderer/constants"
 import { useAsRead } from "@renderer/hooks/biz/useAsRead"
 import { useEntryActions } from "@renderer/hooks/biz/useEntryActions"
 import { useFeedActions } from "@renderer/hooks/biz/useFeedActions"
@@ -112,7 +111,7 @@ export const EntryItemWrapper: FC<
     <div data-entry-id={entry.entries.id}>
       <div
         className={cn(
-          "relative rounded-md bg-theme-background transition-colors",
+          "relative",
           asRead ?
             "text-zinc-700 dark:text-neutral-400" :
             "text-zinc-900 dark:text-neutral-300",
@@ -123,16 +122,13 @@ export const EntryItemWrapper: FC<
         onDoubleClick={handleDoubleClick}
         onContextMenu={handleContextMenu}
       >
-        {
-          overlay ? (
-            <ListItemHoverOverlay
-              className={cn(views[view || 0].gridMode ? "inset-0" : "inset-y-1")}
-              isActive={isActive}
-            >
-              {children}
-            </ListItemHoverOverlay>
-          ) : children
-        }
+        {overlay ? (
+          <ListItemHoverOverlay isActive={isActive}>
+            {children}
+          </ListItemHoverOverlay>
+        ) : (
+          children
+        )}
       </div>
     </div>
   )