feat: enhance list feed item with active state and improved interaction

- Add active state highlighting for selected feed items
- Implement event propagation prevention in feed item click handler
- Update ListFeedList component to pass current feed ID for active state
- Refine padding and styling for feed list items

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/renderer/src/modules/timeline-column/FeedItem.tsx

@@ -171,8 +171,8 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
       }
       className={cn(
         feedColumnStyles.item,
-        isFeed ? "py-[2px]" : "py-1.5",
-        "justify-between py-[2px]",
+        isFeed ? "py-0.5" : "py-1.5",
+        "justify-between py-0.5",
         className,
       )}
       onClick={handleClick}
@@ -354,7 +354,7 @@ const InboxItemImpl: Component<{
       className={cn(
         "flex w-full cursor-menu items-center justify-between rounded-md pr-2.5 text-base font-medium leading-loose lg:text-sm",
         feedColumnStyles.item,
-        "py-[2px] pl-2.5",
+        "py-0.5 pl-2.5",
         className,
       )}
       onClick={handleNavigate}

apps/renderer/src/modules/timeline-column/FeedList.mobile.tsx

@@ -92,7 +92,7 @@ const FeedListImpl = ({ className, view }: { className?: string; view: number })
                     feedId: null,
                   })
                 }}
-                className={cn(feedColumnStyles.item, "px-2.5 py-[2px]")}
+                className={cn(feedColumnStyles.item, "px-2.5 py-0.5")}
               >
                 {views[view]!.icon}
                 <span className="ml-2">

apps/renderer/src/modules/timeline-column/ListFeedList.tsx

@@ -7,10 +7,11 @@ import {
 } from "@follow/components/ui/tooltip/index.js"
 import { cn } from "@follow/utils/utils"
 import dayjs from "dayjs"
-import type { FC } from "react"
+import type { FC, MouseEventHandler } from "react"
 import { useTranslation } from "react-i18next"
 
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
+import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
 import { useFeedById } from "~/store/feed"
 import { useListById } from "~/store/list"
 
@@ -20,29 +21,42 @@ import { feedColumnStyles } from "./styles"
 
 export const ListFeedList: FC<{ listId: string }> = ({ listId }) => {
   const list = useListById(listId)
+  const currentFeedId = useRouteParamsSelector((s) => s.feedId)
 
   if (!list) return null
   return (
     <ScrollArea.ScrollArea flex viewportClassName="!px-3" rootClassName="h-full">
-      {list?.feedIds.map((feedId) => <FeedItem key={feedId} feedId={feedId} />)}
+      {list?.feedIds.map((feedId) => (
+        <FeedItem key={feedId} feedId={feedId} isActive={feedId === currentFeedId} />
+      ))}
     </ScrollArea.ScrollArea>
   )
 }
 
 interface FeedItemProps {
   feedId: string
+  isActive: boolean
 }
-const FeedItem = ({ feedId }: FeedItemProps) => {
+const FeedItem = ({ feedId, isActive }: FeedItemProps) => {
   const feed = useFeedById(feedId)
   const { t } = useTranslation()
   const navigate = useNavigateEntry()
+
   if (!feed) return null
 
-  const handleClick = () => {
+  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
+    e.stopPropagation()
     navigate({ feedId })
   }
   return (
-    <div className={cn("my-px px-2.5 py-0.5", feedColumnStyles.item)} onClick={handleClick}>
+    <div
+      className={cn(
+        "my-px px-2.5 py-0.5",
+        feedColumnStyles.item,
+        isActive && "bg-theme-item-active",
+      )}
+      onClick={handleClick}
+    >
       <div
         className={cn(
           "flex min-w-0 items-center",