feat: empty status for columns

RSSNext · Jun 3, 2024 · 546cc51 · 546cc51
1 parent 571d36e
commit 546cc51
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 10 deletions.
diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
@@ -111,6 +111,7 @@ export function EntryColumn() {
   const virtuosoOptions = {
     components: {
       List: ListContent,
+      EmptyPlaceholder: EmptyList,
     },
     overscan: window.innerHeight,
     rangeChanged: handleRangeChange,
@@ -260,3 +261,25 @@ const ListContent = forwardRef<HTMLDivElement>((props, ref) => (
     ref={ref}
   />
 ))
+
+const EmptyList = (props, ref) => {
+  const unreadOnly = useAtomValue(unreadOnlyAtom)
+
+  return (
+    <m.div
+      initial={{ opacity: 0.01, y: 100 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0.01, y: -100 }}
+      className="-mt-10 flex h-full flex-col items-center justify-center gap-2 text-zinc-400"
+      {...props}
+      ref={ref}
+    >
+      {unreadOnly && (
+        <>
+          <i className="i-mingcute-celebrate-line text-4xl" />
+          Zero Unread
+        </>
+      )}
+    </m.div>
+  )
+}
diff --git a/src/renderer/src/components/feed-column/index.tsx b/src/renderer/src/components/feed-column/index.tsx
@@ -133,7 +133,7 @@ export function FeedColumn() {
               key={item.name}
               className="shrink-0 snap-center overflow-y-auto"
             >
-              <FeedList className="mb-6 w-64 px-3" view={index} />
+              <FeedList className="flex min-h-full w-64 flex-col px-3 pb-6" view={index} />
             </section>
           ))}
         </m.div>

diff --git a/src/renderer/src/components/feed-column/list.tsx b/src/renderer/src/components/feed-column/list.tsx
@@ -4,6 +4,7 @@ import { cn } from "@renderer/lib/utils"
 import { Queries } from "@renderer/queries"
 import { feedActions } from "@renderer/store"
 import { useState } from "react"
+import { Link } from "react-router-dom"
 
 import { FeedCategory } from "./category"
 
@@ -19,7 +20,6 @@ export function FeedList({
   const subscriptions = useBizQuery(Queries.subscription.byView(view))
   const [expansion, setExpansion] = useState(false)
   const { setActiveList } = feedActions
-  console.log(subscriptions.data)
 
   return (
     <div className={className}>
@@ -60,14 +60,23 @@ export function FeedList({
           </div>
         </div>
       )}
-      {subscriptions.data?.list.map((category) => (
-        <FeedCategory
-          key={category.name}
-          data={category}
-          view={view}
-          expansion={expansion}
-        />
-      ))}
+      {subscriptions.data?.list?.length ?
+        subscriptions.data?.list.map((category) => (
+          <FeedCategory
+            key={category.name}
+            data={category}
+            view={view}
+            expansion={expansion}
+          />
+        )) :
+          (
+            <div className="flex  h-full flex-1 items-center text-zinc-500">
+              <Link to="/discover" className="-mt-36 flex h-full flex-1 flex-col items-center justify-center gap-2">
+                <i className="i-mingcute-add-line text-3xl " />
+                Add some feeds
+              </Link>
+            </div>
+          )}
     </div>
   )
 }