feat: active status for wideMode entries

RSSNext · Jun 25, 2024 · 78e5f7a · 78e5f7a
1 parent 27eb274
commit 78e5f7a
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/src/renderer/src/components/ui/image/swipe-images.tsx b/src/renderer/src/components/ui/image/swipe-images.tsx
@@ -59,7 +59,7 @@ export function SwipeImages({
             {uniqImages?.slice(0, 5).map((image, i) => (
               <SwiperSlide key={image}>
                 <Image
-                  className={cn(imgClassName)}
+                  className={cn(imgClassName, "rounded-none")}
                   alt="cover"
                   src={image}
                   loading="lazy"
@@ -94,7 +94,7 @@ export function SwipeImages({
           (
             <Image
               onClick={() => onPreview?.(uniqImages)}
-              className="size-full object-cover sm:transition-transform sm:duration-300 sm:ease-in-out sm:group-hover:scale-105"
+              className="size-full rounded-none object-cover sm:transition-transform sm:duration-300 sm:ease-in-out sm:group-hover:scale-105"
               alt="cover"
               src={uniqImages[0]}
               loading="lazy"

diff --git a/src/renderer/src/modules/entry-column/index.tsx b/src/renderer/src/modules/entry-column/index.tsx
@@ -72,7 +72,7 @@ export function EntryColumn() {
       return
     }
     markReadMutation.mutate(activeEntry)
-  }, [activeEntry?.entries?.id])
+  }, [activeEntry?.entries?.id, activeEntry?.read])
 
   const handleRangeChange = useEventCallback(
     debounce(

diff --git a/src/renderer/src/modules/entry-column/item.tsx b/src/renderer/src/modules/entry-column/item.tsx
@@ -121,7 +121,6 @@ function EntryItemImpl({ entry, view }: { entry: EntryModel, view?: number }) {
       <div
         className={cn(
           "rounded-md bg-theme-background transition-colors",
-          !views[view || 0].wideMode &&
           isActive &&
           "bg-theme-item-active",
           asRead ? "text-zinc-700" : "text-zinc-900 dark:text-white/90",

diff --git a/src/renderer/src/modules/entry-column/picture-item.tsx b/src/renderer/src/modules/entry-column/picture-item.tsx
@@ -1,5 +1,7 @@
 import { SwipeImages } from "@renderer/components/ui/image/swipe-images"
 import { ReactVirtuosoItemPlaceholder } from "@renderer/components/ui/placeholder"
+import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
+import { cn } from "@renderer/lib/utils"
 import { GridItem } from "@renderer/modules/entry-column/grid-item-template"
 import { useEntry } from "@renderer/store/entry/hooks"
 
@@ -9,14 +11,16 @@ import type { UniversalItemProps } from "./types"
 export function PictureItem({ entryId, entryPreview, translation }: UniversalItemProps) {
   const entry = useEntry(entryId) || entryPreview
 
+  const isActive = useRouteParamsSelector(({ entryId }) => entryId === entry?.entries.id)
+
   const previewImage = usePreviewImages()
   if (!entry) return <ReactVirtuosoItemPlaceholder />
   return (
     <GridItem entryId={entryId} entryPreview={entryPreview} translation={translation}>
       <div className="relative flex gap-2 overflow-x-auto">
         <SwipeImages
           images={entry.entries.images}
-          className="aspect-square w-full shrink-0 rounded-md"
+          className={cn("aspect-square w-full shrink-0 rounded-md", isActive && "rounded-b-none")}
           imgClassName="object-cover"
           uniqueKey={entryId}
           onPreview={(images, i) => {

diff --git a/src/renderer/src/modules/entry-column/video-item.tsx b/src/renderer/src/modules/entry-column/video-item.tsx
@@ -1,5 +1,7 @@
 import { Image } from "@renderer/components/ui/image"
+import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
 import { urlToIframe } from "@renderer/lib/url-to-iframe"
+import { cn } from "@renderer/lib/utils"
 import { GridItem } from "@renderer/modules/entry-column/grid-item-template"
 import { useEntry } from "@renderer/store/entry/hooks"
 import { useHover } from "@use-gesture/react"
@@ -11,6 +13,8 @@ import type { UniversalItemProps } from "./types"
 export function VideoItem({ entryId, entryPreview, translation }: UniversalItemProps) {
   const entry = useEntry(entryId) || entryPreview
 
+  const isActive = useRouteParamsSelector(({ entryId }) => entryId === entry?.entries.id)
+
   const iframeSrc = useMemo(() => urlToIframe(entry?.entries.url), [entry?.entries.url])
 
   const ref = useRef<HTMLDivElement>(null)
@@ -33,13 +37,13 @@ export function VideoItem({ entryId, entryPreview, translation }: UniversalItemP
             // eslint-disable-next-line @eslint-react/dom/no-missing-iframe-sandbox
             <iframe
               src={iframeSrc}
-              className="pointer-events-none aspect-video w-full shrink-0 rounded-md bg-black object-cover"
+              className={cn("pointer-events-none aspect-video w-full shrink-0 rounded-md bg-black object-cover", isActive && "rounded-b-none")}
             />
           ) : (
             <Image
               key={entry.entries.images?.[0]}
               src={entry.entries.images?.[0]}
-              className="aspect-video w-full shrink-0 rounded-md object-cover"
+              className={cn("aspect-video w-full shrink-0 rounded-md object-cover", isActive && "rounded-b-none")}
               loading="lazy"
               proxy={{
                 width: 640,