feat: collapsible feed list

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "@radix-ui/react-collapsible": "1.0.3",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
     "@tanstack/react-query": "5.29.2",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@electron-toolkit/utils':
     specifier: ^3.0.0
     version: 3.0.0(electron@29.2.0)
+  '@radix-ui/react-collapsible':
+    specifier: 1.0.3
+    version: 1.0.3(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-tabs':
     specifier: 1.0.4
     version: 1.0.4(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)
@@ -1153,6 +1156,34 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.4
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.75)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.75)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.75)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.75)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.75)(react@18.2.0)
+      '@types/react': 18.2.75
+      '@types/react-dom': 18.2.24
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:

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

@@ -1,12 +1,57 @@
 import { useFeeds } from '@renderer/lib/feeds'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@renderer/components/ui/collapsible"
+import { m, AnimatePresence } from "framer-motion"
 
 export function FeedList({ type }: { type: string }) {
   const feeds = useFeeds()
-  console.log('feeds', feeds.data)
+
+  const categories = {}
+  feeds.data?.forEach((feed) => {
+    if (!categories[feed.category.title]) {
+      categories[feed.category.title] = []
+    }
+    categories[feed.category.title].push(feed)
+  })
+  console.log('categories', categories)
 
   return (
     <div className="w-80 px-4">
-      <div>{type}</div>
+      <div className='font-bold my-2'>{type}</div>
+      {Object.keys(categories).map((category) => (
+        <Collapsible>
+          <CollapsibleTrigger className='flex items-center text-[15px] font-medium leading-loose py-[1px] w-full [&>i]:data-[state=open]:rotate-90'>
+            <i className='i-mingcute-right-fill mr-2 transition-transform' />
+            <span>{category}</span>
+          </CollapsibleTrigger>
+          <AnimatePresence>
+            <CollapsibleContent>
+              <m.div
+                className='overflow-hidden'
+                initial={{
+                  height: 0,
+                }}
+                animate={{
+                  height: "auto",
+                }}
+                exit={{
+                  height: 0,
+                }}
+              >
+                {categories[category].map((feed) => (
+                  <div key={feed.id} className="flex items-center my-2 text-sm font-medium leading-loose w-full pl-6">
+                    <img src={`https://icons.duckduckgo.com/ip3/${new URL(feed.site_url).host}.ico`} className="w-4 h-4 mr-2 rounded-sm" />
+                    <div>{feed.title}</div>
+                  </div>
+                ))}
+              </m.div>
+            </CollapsibleContent>
+          </AnimatePresence>
+        </Collapsible>
+      ))}
     </div>
   )
 }

src/renderer/src/components/type-tab.tsx

@@ -52,7 +52,7 @@ export function TypeTab() {
   const [active, setActive] = useState(0)
   const spring = useSpring(0, {
     stiffness: 700,
-    damping: 30,
+    damping: 40,
   })
 
   useEffect(() => {

src/renderer/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }