Merge pull request #4879 from h3poteto/feat/bookmarks

Add bookmarks

locales/en/translation.json

@@ -4,6 +4,7 @@
     "notifications": "Notifications",
     "local": "Local",
     "public": "Public",
+    "bookmarks": "Bookmarks",
     "search": "Search",
     "status": {
       "avatar": "Aavtar of {user}",

renderer/components/Jump.tsx

@@ -2,15 +2,12 @@ import { Dialog, DialogBody, Input, List, ListItem } from '@material-tailwind/re
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useIntl } from 'react-intl'
+import { Timeline } from './layouts/timelines'
 
 type Props = {
   opened: boolean
   close: () => void
-}
-
-type Timeline = {
-  title: string
-  path: string
+  timelines: Array<Timeline>
 }
 
 export default function Jump(props: Props) {
@@ -65,13 +62,8 @@ export default function Jump(props: Props) {
   }, [keyword, timelines])
 
   useEffect(() => {
-    setTimelines([
-      { title: formatMessage({ id: 'timeline.home' }), path: `/accounts/${router.query.id}/home` },
-      { title: formatMessage({ id: 'timeline.notifications' }), path: `/accounts/${router.query.id}/notifications` },
-      { title: formatMessage({ id: 'timeline.local' }), path: `/accounts/${router.query.id}/local` },
-      { title: formatMessage({ id: 'timeline.public' }), path: `/accounts/${router.query.id}/public` }
-    ])
-  }, [router.query.id])
+    setTimelines(props.timelines)
+  }, [router.query.id, props.timelines])
 
   const jump = (path: string) => {
     props.close()

renderer/components/layouts/timelines.tsx

@@ -4,7 +4,7 @@ import generator, { Entity } from 'megalodon'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { FaBell, FaGlobe, FaHouse, FaList, FaUsers } from 'react-icons/fa6'
+import { FaBell, FaBookmark, FaGlobe, FaHouse, FaList, FaUsers } from 'react-icons/fa6'
 import { useIntl } from 'react-intl'
 import Jump from '../Jump'
 import { useUnreads } from '@/provider/unreads'
@@ -13,6 +13,13 @@ type LayoutProps = {
   children: React.ReactNode
 }
 
+export type Timeline = {
+  id: string
+  title: string
+  icon: JSX.Element
+  path: string
+}
+
 export default function Layout({ children }: LayoutProps) {
   const router = useRouter()
   const { formatMessage } = useIntl()
@@ -45,7 +52,7 @@ export default function Layout({ children }: LayoutProps) {
     f()
   }, [account])
 
-  const pages = [
+  const pages: Array<Timeline> = [
     {
       id: 'home',
       title: formatMessage({ id: 'timeline.home' }),
@@ -69,12 +76,18 @@ export default function Layout({ children }: LayoutProps) {
       title: formatMessage({ id: 'timeline.public' }),
       icon: <FaGlobe />,
       path: `/accounts/${router.query.id}/public`
+    },
+    {
+      id: 'bookmarks',
+      title: formatMessage({ id: 'timeline.bookmarks' }),
+      icon: <FaBookmark />,
+      path: `/accounts/${router.query.id}/bookmarks`
     }
   ]
 
   return (
     <section className="flex h-screen w-full overflow-hidden">
-      <Jump opened={openJump} close={() => setOpenJump(false)} />
+      <Jump opened={openJump} close={() => setOpenJump(false)} timelines={pages} />
       <Card className="text-blue-100 sidebar w-64 bg-blue-950 rounded-none">
         <div className="max-w-full pl-4 mt-2 mb-4 my-profile">
           <p>{account?.username}</p>

renderer/components/timelines/Timeline.tsx

@@ -73,7 +73,7 @@ export default function Timeline(props: Props) {
         }
         default: {
           const match = props.timeline.match(/list_(\d+)/)
-          if (match[1] && typeof match[1] === 'string') {
+          if (match && match[1] && typeof match[1] === 'string') {
             const res = await props.client.getList(match[1])
             streaming.current = c.listSocket(match[1])
             setList(res.data)
@@ -145,6 +145,10 @@ export default function Timeline(props: Props) {
         const res = await client.getPublicTimeline(options)
         return res.data
       }
+      case 'bookmarks': {
+        const res = await client.getBookmarks(options)
+        return res.data
+      }
       default: {
         // Check list
         const match = tl.match(/list_(\d+)/)