From 18c0bd94eff682510fac38558ea00625e6622a85 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 16 Apr 2024 11:39:42 +0800
Subject: [PATCH] feat: entry column animation

---
 src/renderer/src/components/entry-column.tsx | 66 +++++++++++---------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/src/renderer/src/components/entry-column.tsx b/src/renderer/src/components/entry-column.tsx
index a6ff9fb00..364913e1b 100644
--- a/src/renderer/src/components/entry-column.tsx
+++ b/src/renderer/src/components/entry-column.tsx
@@ -1,7 +1,7 @@
 import { useEntries } from '@renderer/lib/entries'
 import { ActivedList } from '@renderer/lib/types'
 import dayjs from '@renderer/lib/dayjs'
-import { parseHtml } from '@renderer/lib/parse-html'
+import { m } from 'framer-motion'
 
 export function EntryColumn({ activedList }: { activedList: ActivedList }) {
   const entries = useEntries({
@@ -11,39 +11,49 @@ export function EntryColumn({ activedList }: { activedList: ActivedList }) {
 
   return (
     <div>
-      <div className='ml-7'>
+      <div className="ml-7">
         <div className="font-bold text-lg">{activedList?.name}</div>
         <div className="text-xs font-medium text-zinc-400">
           {entries.data?.pages?.[0].total} Items
         </div>
       </div>
-      {entries.data?.pages?.map((page) =>
-        page.entries.map((entry) => (
-          <div key={entry.id} className="mt-5 flex">
-            <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='text-zinc-500 text-[13px]'>
-                {dayjs
-                  .duration(dayjs(entry.published_at).diff(dayjs(), 'minute'), 'minute')
-                  .humanize()} ago
+      <div>
+        {entries.data?.pages?.map((page, index) => (
+          <m.div
+            key={`${activedList?.level}-${activedList?.id}-${index}`}
+            initial={{ y: 100, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -100, opacity: 0 }}
+          >
+            {page.entries.map((entry) => (
+              <div key={entry.id} className="mt-5 flex">
+                <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="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>
+                {entry.images?.[0] && (
+                  <img
+                    src={entry.images[0]}
+                    className="w-14 h-14 shrink-0 ml-2 rounded object-cover"
+                    referrerPolicy="no-referrer"
+                    loading="lazy"
+                  />
+                )}
               </div>
-              <div className='font-medium'>{entry.title}</div>
-              <div className='text-zinc-500 text-[13px]'>{entry.text}</div>
-            </div>
-            {entry.images?.[0] && (
-              <img
-                src={entry.images[0]}
-                className="w-14 h-14 shrink-0 ml-2 rounded object-cover"
-                referrerPolicy="no-referrer"
-                loading='lazy'
-              />
-            )}
-          </div>
-        ))
-      )}
+            ))}
+          </m.div>
+        ))}
+      </div>
     </div>
   )
 }