feat: entry item active styles

src/renderer/src/components/entry-column/item-wrapper.tsx

@@ -1,4 +1,5 @@
 import { useEntryActions } from "@renderer/hooks/useEntryActions"
+import { views } from "@renderer/lib/constants"
 import { showNativeMenu } from "@renderer/lib/native-menu"
 import { cn } from "@renderer/lib/utils"
 import { apiClient } from "@renderer/queries/api-fetch"
@@ -48,7 +49,8 @@ export function EntryItemWrapper({
       key={entry.entries.id}
       className={cn(
         "rounded-md transition-colors",
-        activeEntry === entry.entries.id && "bg-native-active/40",
+        !views[view || 0].wideMode && activeEntry === entry.entries.id && "bg-native-active/40",
+        views[view || 0].wideMode && !views[view || 0].gridMode && "hover:bg-native-active/30",
         entry.read ? "text-zinc-600 opacity-85" : "text-zinc-900 dark:text-white/90",
       )}
       // ref={ref}

src/renderer/src/components/entry-column/picture-item.tsx

@@ -12,7 +12,7 @@ export function PictureItem({ entryId, entryPreview }: UniversalItemProps) {
   return (
     <div>
       <div>
-        <div className="flex gap-2 overflow-x-auto">
+        <div className="flex gap-2 overflow-x-auto relative after:rounded-md after:absolute after:transition-colors after:inset-0 hover:after:bg-black/25">
           {entry.entries.images?.slice(0, 1).map((image) => (
             <Image
               key={image}

src/renderer/src/components/entry-column/video-item.tsx

@@ -12,7 +12,7 @@ export function VideoItem({ entryId, entryPreview }: UniversalItemProps) {
   return (
     <div className="flex">
       <div className="w-full">
-        <div className="flex gap-2 overflow-x-auto">
+        <div className="flex gap-2 overflow-x-auto relative after:rounded-md after:absolute after:transition-colors after:inset-0 hover:after:bg-black/25">
           <Image
             key={entry.entries.images?.[0]}
             src={entry.entries.images?.[0]}