feat: optimize feed external page ui and extract create zustand store…

… logic (#38) * feat: optimize reading ui Signed-off-by: Innei <i@innei.in> * refactor: zustand creattor Signed-off-by: Innei <i@innei.in> * fix: update feed columns Signed-off-by: Innei <i@innei.in> * feat: helmet and feed external page ui Signed-off-by: Innei <i@innei.in> * fix: spacing Signed-off-by: Innei <i@innei.in> * fix: spacing Signed-off-by: Innei <i@innei.in> * fix: ts Signed-off-by: Innei <i@innei.in> * fix: login page laytou Signed-off-by: Innei <i@innei.in> * chore: remove copy line Signed-off-by: Innei <i@innei.in> --------- Signed-off-by: Innei <i@innei.in>
RSSNext · Jun 5, 2024 · 66adbcc · 66adbcc
1 parent 5e666b0
commit 66adbcc
Show file tree

Hide file tree

Showing 38 changed files with 683 additions and 361 deletions.
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "lodash-es": "4.17.21",
     "lucide-react": "0.381.0",
     "ofetch": "1.3.4",
+    "react-helmet-async": "2.0.5",
     "react-hook-form": "7.51.5",
     "react-intersection-observer": "9.10.2",
     "react-router-dom": "6.23.1",
@@ -88,6 +89,7 @@
     "@egoist/tailwindcss-icons": "1.8.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@iconify-json/mingcute": "1.1.17",
+    "@tailwindcss/container-queries": "0.1.1",
     "@tailwindcss/typography": "0.5.13",
     "@types/lodash-es": "4.17.12",
     "@types/node": "^20.12.13",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main/window.ts b/src/main/window.ts
@@ -33,7 +33,7 @@ export function createWindow(options?: {
     transparent: true,
     backgroundColor: "#00000000", // transparent hexadecimal or anything with transparency,
     vibrancy: "sidebar",
-    visualEffectState: "followWindow",
+    visualEffectState: "active",
   })
 
   window.on("ready-to-show", () => {

diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -18,6 +18,7 @@
           (document.documentElement.dataset.theme = "dark");
       })();
     </script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
     <div id="root">

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
@@ -19,10 +19,12 @@ function App() {
 
   return (
     <>
-      <div
-        className="drag-region absolute inset-x-0 top-0 h-12 shrink-0"
-        aria-hidden
-      />
+      {window.electron && (
+        <div
+          className="drag-region absolute inset-x-0 top-0 h-12 shrink-0"
+          aria-hidden
+        />
+      )}
 
       <Outlet />
     </>

diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
@@ -241,7 +241,7 @@ const ListHeader: FC = () => {
           </Popover>
         </div>
       </div>
-      <div className="mt-[18px]">
+      <div>
         <div className="text-lg font-bold leading-none">{activeList?.name}</div>
         <div className="text-xs font-medium text-zinc-400">
           {entries.data?.pages?.[0].total || 0}

diff --git a/src/renderer/src/components/entry-column/item-wrapper.tsx b/src/renderer/src/components/entry-column/item-wrapper.tsx
@@ -34,7 +34,9 @@ export function EntryItemWrapper({
         },
       }),
     onMutate: () => {
-      entryActions.markRead(entry.feeds.id, entry.entries.id, true)
+      entryActions.optimisticUpdate(entry.entries.id, {
+        read: true,
+      })
     },
     // TODO  fallback
   })

diff --git a/src/renderer/src/components/entry-content/index.tsx b/src/renderer/src/components/entry-content/index.tsx
@@ -30,36 +30,38 @@ export function EntryContent({ entryId }: { entryId: ActiveEntry }) {
       (
         <>
           <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-theme-item-hover"
-                rel="noreferrer"
-              >
-                <div className="select-text break-words text-3xl font-bold">
-                  {entry.data?.entries.title}
+          <div className="h-[calc(100%-3.5rem)] overflow-y-auto @container">
+            <m.div
+              className="p-5"
+              initial={{ opacity: 0.01, y: 100 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0.01, y: -100 }}
+              key={entry.data?.entries.id}
+            >
+              <article className="relative m-auto min-w-0 max-w-[550px] @4xl:max-w-[70ch]">
+                <a
+                  href={entry.data?.entries.url || void 0}
+                  target="_blank"
+                  className="-mx-6 block rounded-md p-6 transition-colors hover:bg-theme-item-hover"
+                  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-full cursor-auto select-text break-all text-[15px] dark:prose-invert">
+                  {content}
                 </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>
-          </m.div>
+              </article>
+            </m.div>
+          </div>
         </>
       ) :
       (
@@ -68,7 +70,11 @@ export function EntryContent({ entryId }: { entryId: ActiveEntry }) {
           initial={{ opacity: 0.01, y: 300 }}
           animate={{ opacity: 1, y: 0 }}
         >
-          <img src="./icon.svg" alt="logo" className="size-16 opacity-40 grayscale" />
+          <img
+            src="./icon.svg"
+            alt="logo"
+            className="size-16 opacity-40 grayscale"
+          />
           {activeList?.name}
         </m.div>
       )

diff --git a/src/renderer/src/components/feed-column/index.tsx b/src/renderer/src/components/feed-column/index.tsx
@@ -5,7 +5,7 @@ import {
   TooltipTrigger,
 } from "@renderer/components/ui/tooltip"
 import { UserButton } from "@renderer/components/user-button"
-import { levels, views } from "@renderer/lib/constants"
+import { APP_NAME, levels, views } from "@renderer/lib/constants"
 import { clamp, cn } from "@renderer/lib/utils"
 import { feedActions } from "@renderer/store"
 import { useWheel } from "@use-gesture/react"
@@ -55,9 +55,14 @@ export function FeedColumn() {
     },
   )
 
+  const normalStyle = !window.electron || (window.electron.process.platform !== "darwin")
+
   return (
     <div
-      className="flex h-full flex-col gap-3"
+      className={cn(
+        "flex h-full flex-col gap-3 pt-2.5",
+        normalStyle && "bg-native",
+      )}
       onClick={() =>
         setActiveList({
           level: levels.view,
@@ -67,7 +72,30 @@ export function FeedColumn() {
           preventNavigate: true,
         })}
     >
-      <div className="ml-5 mr-3 flex items-center justify-end">
+      <div
+        className={cn(
+          "ml-5 mr-3 flex items-center",
+
+          normalStyle ? "ml-4 justify-between" : "justify-end",
+        )}
+      >
+        {normalStyle && (
+          <div
+            className="flex items-center gap-1 text-xl font-bold"
+            onClick={(e) => {
+              e.stopPropagation()
+              setActiveList({
+                level: levels.view,
+                id: active,
+                name: views[active].name,
+                view: active,
+              })
+            }}
+          >
+            <img src="./icon.svg" alt="logo" className="size-6" />
+            {APP_NAME}
+          </div>
+        )}
         <div className="flex items-center gap-2">
           <Link to="/profile">
             <HeaderActionButton tooltip="Profile">
@@ -118,7 +146,10 @@ export function FeedColumn() {
               key={item.name}
               className="shrink-0 snap-center overflow-y-auto"
             >
-              <FeedList className="flex min-h-full w-64 flex-col px-3 pb-6" 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/item.tsx b/src/renderer/src/components/feed-column/item.tsx
@@ -109,7 +109,7 @@ export function FeedItem({
       }}
       onDoubleClick={() => {
         window.open(
-          `${import.meta.env.VITE_WEB_URL}/feed/${feed.feedId}`,
+          `${import.meta.env.VITE_WEB_URL}/feed/${feed.feedId}?view=${view}`,
           "_blank",
         )
       }}

diff --git a/src/renderer/src/components/feed-column/list.tsx b/src/renderer/src/components/feed-column/list.tsx
@@ -158,15 +158,17 @@ export function FeedList({
           />
         ))
       ) : (
-        <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>
+        !hideTitle && (
+          <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>
   )

diff --git a/src/renderer/src/components/header.tsx b/src/renderer/src/components/header.tsx
@@ -5,6 +5,7 @@ import {
   NavigationMenuList,
   navigationMenuTriggerStyle,
 } from "@renderer/components/ui/navigation-menu"
+import { APP_NAME } from "@renderer/lib/constants"
 import { Link } from "react-router-dom"
 
 import { UserButton } from "./user-button"
@@ -21,15 +22,16 @@ const items = [{
 }]
 
 export function Header() {
+  // TODO optimize ui in mobile view
   return (
-    <header className="w-full border-b px-10 py-3">
+    <header className="w-full border-b px-4 py-3 lg:px-10">
       <div className="mx-auto flex w-full max-w-[1400px] items-center justify-between">
         <div className="flex items-center gap-8">
           <div className="flex items-center gap-2 text-xl font-bold">
             <img src="../icon.svg" alt="logo" className="size-8" />
-            Follow
+            {APP_NAME}
           </div>
-          <NavigationMenu>
+          <NavigationMenu className="hidden lg:block">
             <NavigationMenuList>
               {items.map((item) => (
                 <NavigationMenuItem key={item.link}>
@@ -43,7 +45,7 @@ export function Header() {
             </NavigationMenuList>
           </NavigationMenu>
         </div>
-        <UserButton className="h-10 bg-transparent px-10 py-0" />
+        <UserButton className="h-10 bg-transparent p-0 lg:px-10" />
       </div>
     </header>
   )