From cea06813b56a2c7f748a609e6213c5e3a9b0cfdf Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Sat, 13 Apr 2024 21:03:58 +0800
Subject: [PATCH] feat: get actived list

---
 .../{type-tab.tsx => feed-column.tsx}         | 11 ++-
 src/renderer/src/components/feed-list.tsx     | 67 ++++++++++++++++---
 src/renderer/src/lib/constants.ts             |  6 ++
 src/renderer/src/lib/feeds.ts                 |  6 +-
 src/renderer/src/lib/types.ts                 |  4 ++
 src/renderer/src/pages/index.tsx              | 10 ++-
 6 files changed, 88 insertions(+), 16 deletions(-)
 rename src/renderer/src/components/{type-tab.tsx => feed-column.tsx} (90%)
 create mode 100644 src/renderer/src/lib/constants.ts
 create mode 100644 src/renderer/src/lib/types.ts

diff --git a/src/renderer/src/components/type-tab.tsx b/src/renderer/src/components/feed-column.tsx
similarity index 90%
rename from src/renderer/src/components/type-tab.tsx
rename to src/renderer/src/components/feed-column.tsx
index 1215e5a2c6..28e71b4b79 100644
--- a/src/renderer/src/components/type-tab.tsx
+++ b/src/renderer/src/components/feed-column.tsx
@@ -10,6 +10,7 @@ import { Lethargy } from 'lethargy'
 import { cn, clamp } from '@renderer/lib/utils'
 import { m, useSpring } from "framer-motion"
 import { FeedList } from './feed-list'
+import { ActivedList } from '@renderer/lib/types'
 
 const lethargy = new Lethargy()
 
@@ -46,7 +47,13 @@ const items = [
   }
 ]
 
-export function TypeTab() {
+export function FeedColumn({
+  activedList,
+  setActivedList,
+}: {
+  activedList: ActivedList,
+  setActivedList: (value: ActivedList) => void
+}) {
   const carouselRef = useRef<HTMLDivElement>(null)
 
   const [active, setActive] = useState(0)
@@ -101,7 +108,7 @@ export function TypeTab() {
         <m.div className="h-full flex" style={{ x: spring }}>
             {items.map((item) => (
               <section key={item.name} className="snap-center shrink-0">
-                <FeedList type={item.name} />
+                <FeedList type={item.name} activedList={activedList} setActivedList={setActivedList} />
               </section>
             ))}
         </m.div>
diff --git a/src/renderer/src/components/feed-list.tsx b/src/renderer/src/components/feed-list.tsx
index 1f9aa10aaa..b2848ded18 100644
--- a/src/renderer/src/components/feed-list.tsx
+++ b/src/renderer/src/components/feed-list.tsx
@@ -2,38 +2,80 @@ import { useFeeds } from '@renderer/lib/feeds'
 import { Collapsible, CollapsibleTrigger } from '@renderer/components/ui/collapsible'
 import { m, AnimatePresence } from 'framer-motion'
 import { useState } from 'react'
+import { levels } from '@renderer/lib/constants'
+import { ActivedList } from '@renderer/lib/types'
+import { cn } from '@renderer/lib/utils'
 
-export function FeedList({ type }: { type: string }) {
+export function FeedList({
+  type,
+  activedList,
+  setActivedList,
+}: {
+  type: string,
+  activedList: ActivedList,
+  setActivedList: (value: ActivedList) => void
+}) {
   const feeds = useFeeds()
 
   return (
-    <div className="w-64 px-5">
-      <div className='flex items-center justify-between mt-2 mb-3'>
+    <div className="w-64 px-3">
+      <div
+        className={cn('flex items-center justify-between mt-2 mb-3 px-2.5 py-1 rounded cursor-pointer', activedList?.level === levels.type && activedList.id === type && 'bg-[#C9C9C7]')}
+        onClick={(e) => {
+          e.stopPropagation()
+          setActivedList({
+            level: levels.type,
+            id: type,
+          })
+        }}
+      >
         <div className="font-bold">{type}</div>
         <div className='text-sm text-zinc-500 ml-2'>{feeds.data?.unread}</div>
       </div>
       {feeds.data?.list.map((category) => (
-        <FeedCategory key={category.name} data={category} />
+        <FeedCategory
+          key={category.name}
+          data={category}
+          activedList={activedList}
+          setActivedList={setActivedList}
+        />
       ))}
     </div>
   )
 }
 
-function FeedCategory({ data }: { data: any }) {
+function FeedCategory({
+  data,
+  activedList,
+  setActivedList,
+}: {
+  data: any,
+  activedList: ActivedList,
+  setActivedList: (value: ActivedList) => void
+}) {
   const [open, setOpen] = useState(false)
 
   return (
     <Collapsible
       open={open}
       onOpenChange={(o) => setOpen(o)}
+      onClick={(e) => {
+        e.stopPropagation()
+        setActivedList({
+          level: levels.folder,
+          id: data.id,
+        })
+      }}
     >
-      <CollapsibleTrigger className="flex items-center justify-between font-medium text-sm leading-loose py-[2px] w-full [&_.i-mingcute-right-fill]:data-[state=open]:rotate-90">
+      <div className={cn("flex items-center justify-between font-medium text-sm leading-loose px-2.5 py-[2px] rounded w-full [&_.i-mingcute-right-fill]:data-[state=open]:rotate-90 cursor-pointer", activedList?.level === levels.folder && activedList.id === data.id && 'bg-[#C9C9C7]')}>
         <div className='flex items-center min-w-0'>
-          <i className="i-mingcute-right-fill mr-2 transition-transform" />
+          <CollapsibleTrigger className='flex items-center'>
+            <i className="i-mingcute-right-fill mr-2 transition-transform" />
+          </CollapsibleTrigger>
           <span className='truncate'>{data.name}</span>
         </div>
         {!!data.unread && <div className='text-xs text-zinc-500 ml-2'>{data.unread}</div>}
-      </CollapsibleTrigger>
+      </div>
       <AnimatePresence>
         {open && (
           <m.div
@@ -59,7 +101,14 @@ function FeedCategory({ data }: { data: any }) {
             {data.list.map((feed) => (
               <div
                 key={feed.id}
-                className="flex items-center justify-between my-2 text-sm font-medium leading-loose w-full pl-6"
+                className={cn("flex items-center justify-between text-sm font-medium leading-loose w-full pl-6 pr-2.5 py-[2px] rounded cursor-pointer", activedList?.level === levels.feed && activedList.id === feed.id && 'bg-[#C9C9C7]')}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setActivedList({
+                    level: levels.feed,
+                    id: feed.id,
+                  })
+                }}
               >
                 <div className='flex items-center min-w-0'>
                   <img
diff --git a/src/renderer/src/lib/constants.ts b/src/renderer/src/lib/constants.ts
new file mode 100644
index 0000000000..0590ce8749
--- /dev/null
+++ b/src/renderer/src/lib/constants.ts
@@ -0,0 +1,6 @@
+export const levels = {
+  type: Symbol('type'),
+  folder: Symbol('folder'),
+  feed: Symbol('feed'),
+  entry: Symbol('entry'),
+}
diff --git a/src/renderer/src/lib/feeds.ts b/src/renderer/src/lib/feeds.ts
index b4cc4303d4..45a4196979 100644
--- a/src/renderer/src/lib/feeds.ts
+++ b/src/renderer/src/lib/feeds.ts
@@ -23,7 +23,8 @@ export const useFeeds = () =>
         if (!categories.list[feed.category.title]) {
           categories.list[feed.category.title] = {
             list: [],
-            unread: 0
+            unread: 0,
+            id: feed.category.id
           }
         }
         const unread = counters.unreads[feed.id] || 0
@@ -35,7 +36,8 @@ export const useFeeds = () =>
       const list = Object.entries(categories.list).map(([name, list]: any) => ({
         name,
         list: list.list.sort((a, b) => b.unread - a.unread),
-        unread: list.unread
+        unread: list.unread,
+        id: list.id
       })).sort((a, b) => b.unread - a.unread)
       return {
         list,
diff --git a/src/renderer/src/lib/types.ts b/src/renderer/src/lib/types.ts
new file mode 100644
index 0000000000..a5b1b2a413
--- /dev/null
+++ b/src/renderer/src/lib/types.ts
@@ -0,0 +1,4 @@
+export type ActivedList = {
+  level: Symbol
+  id: string | number
+} | null
diff --git a/src/renderer/src/pages/index.tsx b/src/renderer/src/pages/index.tsx
index 68c62b36d9..a553b2063a 100644
--- a/src/renderer/src/pages/index.tsx
+++ b/src/renderer/src/pages/index.tsx
@@ -1,10 +1,14 @@
-import { TypeTab } from '@renderer/components/type-tab'
+import { FeedColumn } from '@renderer/components/feed-column'
+import { useState } from 'react'
+import { ActivedList } from '@renderer/lib/types'
 
 export function Component() {
+  const [activedList, setActivedList] = useState<ActivedList>(null)
+
   return (
     <div className="flex h-full">
-      <div className="w-64 pt-10 border-r shrink-0 flex flex-col bg-[#E1E1E1]">
-        <TypeTab />
+      <div className="w-64 pt-10 border-r shrink-0 flex flex-col bg-[#E1E0DF]" onClick={() => setActivedList(null)}>
+        <FeedColumn activedList={activedList} setActivedList={setActivedList} />
       </div>
       <div className="w-80 pt-10 px-5 border-r shrink-0">Two</div>
       <div className="flex-1 pt-10 px-5">Three</div>