feat: entry column active

RSSNext · Apr 16, 2024 · 5f1fcfc · 5f1fcfc
1 parent f7dccbb
commit 5f1fcfc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/src/renderer/src/components/entry-column.tsx b/src/renderer/src/components/entry-column.tsx
@@ -2,16 +2,25 @@ import { useEntries } from '@renderer/lib/entries'
 import { ActivedList } from '@renderer/lib/types'
 import dayjs from '@renderer/lib/dayjs'
 import { m } from 'framer-motion'
+import { cn } from '@renderer/lib/utils'
 
-export function EntryColumn({ activedList }: { activedList: ActivedList }) {
+export function EntryColumn({
+  activedList,
+  activedEntry,
+  setActivedEntry,
+}: {
+  activedList: ActivedList,
+  activedEntry: number | null,
+  setActivedEntry: (value: number | null) => void
+}) {
   const entries = useEntries({
     type: activedList?.level,
     id: activedList?.id
   })
 
   return (
-    <div>
-      <div className="ml-7">
+    <div className='px-2' onClick={() => setActivedEntry(null)}>
+      <div className="ml-9">
         <div className="font-bold text-lg">{activedList?.name}</div>
         <div className="text-xs font-medium text-zinc-400">
           {entries.data?.pages?.[0].total} Items
@@ -26,20 +35,27 @@ export function EntryColumn({ activedList }: { activedList: ActivedList }) {
             exit={{ y: -100, opacity: 0 }}
           >
             {page.entries.map((entry) => (
-              <div key={entry.id} className="mt-5 flex">
+              <div
+                key={entry.id}
+                className={cn("mt-5 flex px-2 py-3 rounded-md cursor-pointer", activedEntry === entry.id && 'bg-[#DEDDDC]')}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setActivedEntry(entry.id)
+                }}
+              >
                 <img
                   src={`https://icons.duckduckgo.com/ip3/${new URL(entry.feed.site_url).host}.ico`}
                   className="w-5 h-5 mr-2 rounded-sm shrink-0"
                 />
-                <div className="line-clamp-5 text-sm flex-1 -mt-1">
+                <div className="line-clamp-5 text-sm flex-1 -mt-0.5 leading-tight">
                   <div className="text-zinc-500 text-[13px]">
                     {dayjs
                       .duration(dayjs(entry.published_at).diff(dayjs(), 'minute'), 'minute')
                       .humanize()}{' '}
                     ago
                   </div>
                   <div className="font-medium">{entry.title}</div>
-                  <div className="text-zinc-500 text-[13px]">{entry.text}</div>
+                  <div className="text-zinc-500 text-[13px] mt-0.5">{entry.text}</div>
                 </div>
                 {entry.images?.[0] && (
                   <img

diff --git a/src/renderer/src/pages/index.tsx b/src/renderer/src/pages/index.tsx
@@ -5,14 +5,15 @@ import { ActivedList } from '@renderer/lib/types'
 
 export function Component() {
   const [activedList, setActivedList] = useState<ActivedList>(null)
+  const [activedEntry, setActivedEntry] = useState<number | null>(null)
 
   return (
     <div className="flex h-full">
       <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-[340px] pt-10 px-4 border-r shrink-0 h-full overflow-y-auto">
-        <EntryColumn activedList={activedList} />
+      <div className="w-[340px] pt-10 border-r shrink-0 h-full overflow-y-auto">
+        <EntryColumn activedList={activedList} activedEntry={activedEntry} setActivedEntry={setActivedEntry} />
       </div>
       <div className="flex-1 pt-10 px-4">Three</div>
     </div>