feat: new api for feed column

src/renderer/src/components/feed-column/index.tsx

@@ -12,42 +12,10 @@ import { m, useSpring } from "framer-motion"
 import { FeedList } from "./list"
 import { ActivedList } from "@renderer/lib/types"
 import { UserButton } from "@renderer/components/user-button"
+import { views } from "@renderer/lib/constants"
 
 const lethargy = new Lethargy()
 
-const items = [
-  {
-    name: "Articles",
-    icon: <i className="i-mingcute-news-fill" />,
-    className: "text-amber-700",
-  },
-  {
-    name: "Social Media",
-    icon: <i className="i-mingcute-twitter-fill" />,
-    className: "text-sky-600",
-  },
-  {
-    name: "Pictures",
-    icon: <i className="i-mingcute-pic-fill" />,
-    className: "text-green-600",
-  },
-  {
-    name: "Videos",
-    icon: <i className="i-mingcute-youtube-fill" />,
-    className: "text-red-600",
-  },
-  {
-    name: "Audios",
-    icon: <i className="i-mingcute-headphone-fill" />,
-    className: "text-purple-600",
-  },
-  {
-    name: "Notifications",
-    icon: <i className="i-mingcute-notification-fill" />,
-    className: "text-yellow-600",
-  },
-]
-
 export function FeedColumn({
   activedList,
   setActivedList,
@@ -73,7 +41,7 @@ export function FeedColumn({
         const s = lethargy.check(event)
         if (s) {
           if (!wait && Math.abs(dex) > 20) {
-            setActive((i) => clamp(i + dx, 0, items.length - 1))
+            setActive((i) => clamp(i + dx, 0, views.length - 1))
             return true
           } else {
             return undefined
@@ -95,27 +63,27 @@ export function FeedColumn({
       className="h-full flex flex-col"
       onClick={() =>
         setActivedList({
-          level: "type",
-          id: items[active].name,
-          name: items[active].name,
-          type: items[active].name,
+          level: "view",
+          id: active,
+          name: views[active].name,
+          view: active,
         })
       }
     >
       <UserButton className="h-12 mx-3 mb-2 mt-1" />
       <div className="flex text-zinc-500 w-full justify-between text-xl my-2 px-5">
         <TooltipProvider delayDuration={300}>
-          {items.map((item, index) => (
+          {views.map((item, index) => (
             <div
               key={item.name}
               className={cn(active === index && "text-zinc-800")}
               onClick={(e) => {
                 setActive(index)
                 setActivedList({
-                  level: "type",
-                  id: items[index].name,
-                  name: items[index].name,
-                  type: items[index].name,
+                  level: "view",
+                  id: index,
+                  name: views[index].name,
+                  view: index,
                 })
                 e.stopPropagation()
               }}
@@ -130,10 +98,10 @@ export function FeedColumn({
       </div>
       <div className="w-full h-full overflow-x-hidden" ref={carouselRef}>
         <m.div className="h-full flex" style={{ x: spring }}>
-          {items.map((item) => (
+          {views.map((item, index) => (
             <section key={item.name} className="snap-center shrink-0">
               <FeedList
-                type={item.name}
+                view={index}
                 activedList={activedList}
                 setActivedList={setActivedList}
               />

src/renderer/src/components/feed-column/list.tsx

@@ -1,25 +1,26 @@
-import { useFeeds } from "@renderer/lib/feeds"
+import { useSubscriptions } from "@renderer/lib/subscriptions"
 import {
   Collapsible,
   CollapsibleTrigger,
 } from "@renderer/components/ui/collapsible"
 import { m, AnimatePresence } from "framer-motion"
 import { useState } from "react"
-import { levels } from "@renderer/lib/constants"
+import { levels, views } from "@renderer/lib/constants"
 import { ActivedList } from "@renderer/lib/types"
 import { cn } from "@renderer/lib/utils"
 import { SiteIcon } from "../site-icon"
+import { Response as SubscriptionsResponse } from "@renderer/lib/subscriptions"
 
 export function FeedList({
-  type,
+  view,
   activedList,
   setActivedList,
 }: {
-  type: string
+  view: number
   activedList: ActivedList
   setActivedList: (value: ActivedList) => void
 }) {
-  const feeds = useFeeds(type)
+  const subscriptions = useSubscriptions(view)
 
   return (
     <div className="w-64 px-3">
@@ -31,22 +32,24 @@ export function FeedList({
           e.stopPropagation()
           setActivedList({
             level: levels.type,
-            id: type,
-            name: type,
-            type,
+            id: view,
+            name: views[view].name,
+            view,
           })
         }}
       >
-        <div className="font-bold">{type}</div>
-        <div className="text-sm text-zinc-500 ml-2">{feeds.data?.unread}</div>
+        <div className="font-bold">{views[view].name}</div>
+        <div className="text-sm text-zinc-500 ml-2">
+          {subscriptions.data?.unread}
+        </div>
       </div>
-      {feeds.data?.list.map((category) => (
+      {subscriptions.data?.list.map((category) => (
         <FeedCategory
           key={category.name}
           data={category}
           activedList={activedList}
           setActivedList={setActivedList}
-          type={type}
+          view={view}
         />
       ))}
     </div>
@@ -57,12 +60,12 @@ function FeedCategory({
   data,
   activedList,
   setActivedList,
-  type,
+  view,
 }: {
-  data: any
+  data: SubscriptionsResponse["list"][number]
   activedList: ActivedList
   setActivedList: (value: ActivedList) => void
-  type: string
+  view: number
 }) {
   const [open, setOpen] = useState(false)
 
@@ -74,17 +77,17 @@ function FeedCategory({
         e.stopPropagation()
         setActivedList({
           level: levels.folder,
-          id: data.id,
+          id: data.name,
           name: data.name,
-          type,
+          view,
         })
       }}
     >
       <div
         className={cn(
           "flex items-center justify-between font-medium text-sm leading-loose px-2.5 py-[2px] rounded w-full cursor-pointer",
           activedList?.level === levels.folder &&
-            activedList.id === data.id &&
+            activedList.id === data.name &&
             "bg-[#C9C9C7]",
         )}
       >
@@ -122,26 +125,26 @@ function FeedCategory({
           >
             {data.list.map((feed) => (
               <div
-                key={feed.id}
+                key={feed.feedId}
                 className={cn(
                   "flex items-center justify-between text-sm font-medium leading-loose w-full pl-6 pr-2.5 py-[2px] rounded cursor-pointer",
                   activedList?.level === levels.feed &&
-                    activedList.id === feed.id &&
+                    activedList.id === feed.feedId &&
                     "bg-[#C9C9C7]",
                 )}
                 onClick={(e) => {
                   e.stopPropagation()
                   setActivedList({
                     level: levels.feed,
-                    id: feed.id,
-                    name: feed.title,
-                    type,
+                    id: feed.feedId,
+                    name: feed.feeds.title,
+                    view,
                   })
                 }}
               >
                 <div className="flex items-center min-w-0">
-                  <SiteIcon url={feed.site_url} className="w-4 h-4" />
-                  <div className="truncate">{feed.title}</div>
+                  <SiteIcon url={feed.feeds.siteUrl} className="w-4 h-4" />
+                  <div className="truncate">{feed.feeds.title}</div>
                 </div>
                 {!!feed.unread && (
                   <div className="text-xs text-zinc-500 ml-2">

src/renderer/src/components/site-icon.tsx

@@ -7,9 +7,13 @@ export function SiteIcon({
   url: string
   className?: string
 }) {
+  let host
+  try {
+    host = new URL(url).host
+  } catch (error) {}
   return (
     <img
-      src={`https://icons.duckduckgo.com/ip3/${new URL(url).host}.ico`}
+      src={`https://icons.duckduckgo.com/ip3/${host}.ico`}
       className={cn("w-5 h-5 mr-2 rounded-sm shrink-0", className)}
     />
   )

src/renderer/src/lib/constants.tsx

@@ -0,0 +1,39 @@
+export const levels = {
+  type: "type",
+  folder: "folder",
+  feed: "feed",
+  entry: "entry",
+}
+
+export const views = [
+  {
+    name: "Articles",
+    icon: <i className="i-mingcute-news-fill" />,
+    className: "text-amber-700",
+  },
+  {
+    name: "Social Media",
+    icon: <i className="i-mingcute-twitter-fill" />,
+    className: "text-sky-600",
+  },
+  {
+    name: "Pictures",
+    icon: <i className="i-mingcute-pic-fill" />,
+    className: "text-green-600",
+  },
+  {
+    name: "Videos",
+    icon: <i className="i-mingcute-youtube-fill" />,
+    className: "text-red-600",
+  },
+  {
+    name: "Audios",
+    icon: <i className="i-mingcute-headphone-fill" />,
+    className: "text-purple-600",
+  },
+  {
+    name: "Notifications",
+    icon: <i className="i-mingcute-notification-fill" />,
+    className: "text-yellow-600",
+  },
+]

src/renderer/src/lib/entries.ts

@@ -1,6 +1,5 @@
 import { useInfiniteQuery } from "@tanstack/react-query"
 import { parseHtml } from "./parse-html"
-import { typeMap } from "./feeds"
 import { levels } from "@renderer/lib/constants"
 
 export const useEntries = ({
@@ -40,7 +39,6 @@ export const useEntries = ({
                 direction: "desc",
                 limit: "20",
                 after_entry_id: pageParam,
-                category_id: typeMap[id as string][0] + "",
               }),
             {
               headers: {