feat: empty entry content

RSSNext · Jun 3, 2024 · 8b55c21 · 8b55c21
1 parent 73bcec0
commit 8b55c21
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 38 deletions.
diff --git a/src/renderer/src/components/entry-content/index.tsx b/src/renderer/src/components/entry-content/index.tsx
@@ -2,13 +2,15 @@ import { useBizQuery } from "@renderer/hooks/useBizQuery"
 import { parseHtml } from "@renderer/lib/parse-html"
 import type { ActiveEntry } from "@renderer/lib/types"
 import { Queries } from "@renderer/queries"
+import { useFeedStore } from "@renderer/store"
 import { m } from "framer-motion"
 import { useEffect, useState } from "react"
 
 import { EntryShare } from "./share"
 
 export function EntryContent({ entryId }: { entryId: ActiveEntry }) {
   const entry = useBizQuery(Queries.entries.byId(entryId))
+  const activeList = useFeedStore((state) => state.activeList)
 
   const [content, setContent] = useState<JSX.Element>()
 
@@ -22,41 +24,50 @@ export function EntryContent({ entryId }: { entryId: ActiveEntry }) {
     }
   }, [entry.data?.entries.content])
 
-  if (!entry.data) return null
-
-  return (
-    <>
-      <EntryShare entryId={entry.data.entries.id} view={0} />
-      <m.div
-        className="h-[calc(100%-3.5rem)] overflow-y-auto p-5"
-        initial={{ opacity: 0.01, y: 100 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0.01, y: -100 }}
-        key={entry.data?.entries.id}
-      >
-        <div>
-          <a
-            href={entry.data?.entries.url || void 0}
-            target="_blank"
-            className="mx-auto block max-w-[598px] rounded-md p-6 transition-colors hover:bg-zinc-100 dark:hover:bg-neutral-800"
-            rel="noreferrer"
+  return entry.data ?
+      (
+        <>
+          <EntryShare entryId={entry.data.entries.id} view={0} />
+          <m.div
+            className="h-[calc(100%-3.5rem)] overflow-y-auto p-5"
+            initial={{ opacity: 0.01, y: 100 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0.01, y: -100 }}
+            key={entry.data?.entries.id}
           >
-            <div className="select-text break-words text-3xl font-bold">
-              {entry.data?.entries.title}
-            </div>
-            <div className="mt-2 text-[13px] font-medium text-zinc-500">
-              {entry.data?.feeds?.title}
-            </div>
-            <div className="text-[13px] text-zinc-500">
-              {entry.data?.entries.publishedAt &&
-              new Date(entry.data?.entries.publishedAt).toUTCString()}
+            <div>
+              <a
+                href={entry.data?.entries.url || void 0}
+                target="_blank"
+                className="mx-auto block max-w-[598px] rounded-md p-6 transition-colors hover:bg-zinc-100 dark:hover:bg-neutral-800"
+                rel="noreferrer"
+              >
+                <div className="select-text break-words text-3xl font-bold">
+                  {entry.data?.entries.title}
+                </div>
+                <div className="mt-2 text-[13px] font-medium text-zinc-500">
+                  {entry.data?.feeds?.title}
+                </div>
+                <div className="text-[13px] text-zinc-500">
+                  {entry.data?.entries.publishedAt &&
+                  new Date(entry.data?.entries.publishedAt).toUTCString()}
+                </div>
+              </a>
+              <div className="prose prose-zinc mx-auto mb-32 mt-10 max-w-[550px] cursor-auto select-text break-all text-[15px] dark:prose-invert">
+                {content}
+              </div>
             </div>
-          </a>
-          <div className="prose prose-zinc mx-auto mb-32 mt-10 max-w-[550px] cursor-auto select-text break-all text-[15px] dark:prose-invert">
-            {content}
-          </div>
-        </div>
-      </m.div>
-    </>
-  )
+          </m.div>
+        </>
+      ) :
+      (
+        <m.div
+          className="flex flex-col items-center justify-center size-full font-medium text-zinc-400 gap-1 text-lg"
+          initial={{ opacity: 0.01, y: 300 }}
+          animate={{ opacity: 1, y: 0 }}
+        >
+          <img src="./icon.svg" alt="logo" className="size-16 grayscale opacity-40" />
+          {activeList?.name}
+        </m.div>
+      )
 }
diff --git a/src/renderer/src/components/ui/image.tsx b/src/renderer/src/components/ui/image.tsx
@@ -43,11 +43,11 @@ export const Image = ({
   const { toast } = useToast()
 
   return (
-    <div className={cn("overflow-hidden rounded bg-stone-100", className)}>
+    <div className={cn("overflow-hidden rounded", className)}>
       <img
         {...props}
         onError={errorHandle}
-        className={cn(hidden && "hidden", "size-full object-cover")}
+        className={cn(hidden && "hidden", "size-full object-cover bg-stone-100")}
         src={imgSrc}
         {...(!disableContextMenu ?
             {

diff --git a/src/renderer/src/pages/(main)/(context)/index.tsx b/src/renderer/src/pages/(main)/(context)/index.tsx
@@ -34,7 +34,7 @@ export function Component() {
         <EntryColumn />
       </div>
       <AnimatePresence>
-        {!(activeList && views[activeList.view].wideMode) && activeEntry && (
+        {!(activeList && views[activeList.view].wideMode) && (
           <div className="flex-1">
             <EntryContent entryId={activeEntry} />
           </div>