impl NavReact

重いけどとりまこれで

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "dependencies": {
     "@fontsource-variable/fira-code": "5.0.18",
-    "@fontsource-variable/inter": "5.0.18",
+    "@fontsource-variable/inter": "5.0.19",
     "@fontsource/zen-kaku-gothic-new": "5.0.19",
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-dialog": "1.1.1",
@@ -14,14 +14,15 @@
     "@serwist/next": "9.0.3",
     "ahooks": "3.8.0",
     "clsx": "2.1.1",
+    "emoji-picker-react": "4.11.1",
     "immer": "10.1.1",
-    "jotai": "2.8.3",
-    "lucide-react": "0.396.0",
+    "jotai": "2.9.0",
+    "lucide-react": "0.408.0",
     "mfm-js": "0.24.0",
     "mitt": "3.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-hook-form": "7.52.0",
+    "react-hook-form": "7.52.1",
     "react-mfm": "0.5.1",
     "react-textarea-autosize": "8.5.3",
     "serwist": "9.0.3",
@@ -34,18 +35,18 @@
     "@types/react": "18",
     "@types/react-dom": "18",
     "@types/uuid": "10",
-    "@typescript-eslint/eslint-plugin": "7.13.1",
-    "@typescript-eslint/parser": "7.13.1",
+    "@typescript-eslint/eslint-plugin": "7.16.0",
+    "@typescript-eslint/parser": "7.16.0",
     "autoprefixer": "10.4.19",
     "eslint": "<9",
-    "eslint-config-next": "14.2.4",
+    "eslint-config-next": "14.2.5",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
     "next": "<14.2",
-    "postcss": "8.4.38",
+    "postcss": "8.4.39",
     "postcss-import": "16.1.0",
-    "prettier": "3.3.2",
-    "prettier-plugin-organize-imports": "3.2.4",
+    "prettier": "3.3.3",
+    "prettier-plugin-organize-imports": "4.0.0",
     "prettier-plugin-tailwindcss": "0.6.5",
     "tailwindcss": "3.4.4",
     "tailwindcss-radix": "3.0.3",

src/features/api/clients/misskey-latest.ts

@@ -106,6 +106,18 @@ export default class MisskeyLatestClient extends BaseClient {
     })
   }
 
+  async reactNote(noteId: string, reaction: string) {
+    return this.post<void>("notes/reactions/create", {
+      body: { noteId, reaction },
+    })
+  }
+
+  async unReactNote(noteId: string) {
+    return this.post<void>("notes/reactions/delete", {
+      body: { noteId },
+    })
+  }
+
   async noteRenotes(noteId: string, opts: NotesOpts = {}) {
     return this.post<Note[]>("notes/renotes", {
       body: { noteId, ...opts },

src/features/common/EmojiPicker.tsx

@@ -1,24 +1,7 @@
-"use client"
+import dynamic from "next/dynamic"
 
-import * as Collapsible from "@radix-ui/react-collapsible"
-import { ChevronRight } from "lucide-react"
+const Picker = dynamic(() => import("emoji-picker-react"))
 
 export function EmojiPicker({ onPicked }: { onPicked: (res: string | null) => void }) {
-  return (
-    <div>
-      <CategoryName name="履歴" />
-      <div>😀</div>
-      <Collapsible.Root>
-        <Collapsible.Trigger className="flex">
-          <ChevronRight />
-          others
-        </Collapsible.Trigger>
-        <Collapsible.Content>emojis</Collapsible.Content>
-      </Collapsible.Root>
-    </div>
-  )
-}
-
-function CategoryName({ name }: { name: string }) {
-  return <div>{name}</div>
+  return <Picker onEmojiClick={({ emoji }) => onPicked(emoji)} />
 }

src/features/note/NotePreview/NavReact.tsx

@@ -3,21 +3,13 @@
 import { Popover } from "@radix-ui/themes"
 import { Plus } from "lucide-react"
 import { useRouter } from "next/navigation"
-import { Suspense, useState } from "react"
+import { useState } from "react"
 import { useAPI } from "~/features/api"
 import { useCurrentPath } from "~/features/common"
 import { EmojiPicker } from "~/features/common/EmojiPicker"
 import { Note } from ".."
 
-export default function NavReact(props: { note: Note }) {
-  return (
-    <Suspense>
-      <NavReactSuspense {...props} />
-    </Suspense>
-  )
-}
-
-function NavReactSuspense({ note }: { note: Note }) {
+export default function NavReact({ note }: { note: Note }) {
   const [open, setOpen] = useState(false)
   const api = useAPI()
   const router = useRouter()
@@ -36,8 +28,8 @@ function NavReactSuspense({ note }: { note: Note }) {
       <Popover.Content>
         <EmojiPicker
           onPicked={emoji => {
-            alert(`react: ${emoji}`)
-            setOpen(false)
+            if (!api || !emoji) return
+            api.reactNote(note.id, emoji).catch(console.error)
           }}
         />
       </Popover.Content>