wip: impl UI and fix errors

src/app/(main)/(narrow)/home/page.tsx

@@ -1,12 +1,11 @@
 "use client"
 
-import { Loader2 } from "lucide-react"
+import BottomSpinner from "~/components/BottomSpinner"
 import { useBottom } from "~/features/common"
 import NotePreview from "~/features/note/NotePreview"
 import { useTL } from "~/features/timeline"
 import TLSwitch from "~/features/timeline/TLSwitch"
 
-// todo: TLの切り替え
 export default function HomePage() {
   const { notes, more } = useTL()
   useBottom(more)
@@ -21,10 +20,7 @@ export default function HomePage() {
           </div>
         ))}
       </div>
-      <div className="mx-auto mb-8 mt-6 flex items-center gap-1 font-bold">
-        <Loader2 className="animate-spin" size={24} />
-        <p className="text-center">Loading...</p>
-      </div>
+      <BottomSpinner />
     </>
   )
 }

src/app/(main)/(narrow)/notifications/page.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import BottomSpinner from "~/components/BottomSpinner"
 import { useBottom } from "~/features/common"
 import { useNotifications } from "~/features/notifications"
 import Notice from "~/features/notifications/Notice"
@@ -10,11 +11,12 @@ export default function NotificationsPage() {
   useBottom(more)
   return (
     <>
-      <div className="flex flex-col bg-white rounded-xl">
+      <div className="flex flex-col rounded-xl bg-white">
         {notifications.map(notice => {
           return <Notice notice={notice} key={notice.id} />
         })}
       </div>
+      <BottomSpinner />
     </>
   )
 }

src/app/(main)/(narrow)/profile/page.tsx

@@ -3,11 +3,15 @@
 import { Tooltip } from "@radix-ui/themes"
 import { useSearchParams } from "next/navigation"
 import { Suspense, use } from "react"
+import Anon from "~/assets/anon.png"
+import BottomSpinner from "~/components/BottomSpinner"
+import IdStr from "~/components/IdStr"
+import TopAppBar from "~/components/TopAppBar"
 import { useAPI } from "~/features/api"
 import { Note, User } from "~/features/api/clients/entities"
-import { useAccount } from "~/features/auth"
+import NotePreview from "~/features/note/NotePreview"
 import { statusEmoji } from "~/features/profile"
-import UserIcon from "~/features/profile/UserIcon"
+import { hostname } from "~/utils"
 
 export default function ProfilePage() {
   return (
@@ -20,7 +24,6 @@ export default function ProfilePage() {
 function ProfileFetch() {
   const api = useAPI()
   const searchParams = useSearchParams()
-  const account = useAccount()
 
   if (!api) return <ProfileContent />
 
@@ -34,8 +37,9 @@ function ProfileFetch() {
     userFetch = api.me()
   }
   const user = use(userFetch)
+  if (user) user.host ??= hostname(api.host)
 
-  const notesFetch = user && api.notes(user.id)
+  const notesFetch = user && api.userNotes(user.id)
   const notes = (notesFetch && use(notesFetch)) ?? []
 
   return <ProfileContent user={user} notes={notes} />
@@ -46,19 +50,44 @@ function ProfileContent({ user = null, notes = [] }: { user?: User | null; notes
 
   return (
     <>
-      <div className="relative h-fit w-fit rounded-full border-4 bg-white p-2">
-        <div className="h-36 w-36 rounded-full border-4">
-          <UserIcon user={user} />
+      <TopAppBar
+        content={
+          <div>
+            <p className="text-lg font-bold">{user?.name}</p>
+          </div>
+        }
+        back
+      />
+      <div className="min-h-48 w-full bg-black" />
+      <div className="-mb-20 ml-4 h-fit w-fit -translate-y-1/2">
+        {/* todo: grow */}
+        <div className="h-36 w-36 overflow-hidden rounded-[100%] border-4 transition-all hover:rounded-xl">
+          <img className="h-full w-full object-cover" src={user?.avatarUrl ?? Anon.src} />
         </div>
-        <div className="absolute bottom-1.5 right-1.5 flex h-11 w-11 rounded-full border-4 bg-white">
+        <div className="absolute bottom-2 right-2 flex">
           <Tooltip content={onlineStatus}>
-            <span className="m-auto cursor-default text-3xl leading-none">
+            <span className="cursor-default text-3xl leading-none">
               {statusEmoji(onlineStatus)}
             </span>
           </Tooltip>
-          {JSON.stringify(notes)}
         </div>
       </div>
+      {user ? (
+        <div className="p-4">
+          <div className="text-2xl font-bold">{user.name}</div>
+          <div className="text-sm">
+            <IdStr username={user.username} host={user.host!} />
+          </div>
+        </div>
+      ) : (
+        <div className="animate-pulse p-4">dummy</div>
+      )}
+      <div className="flex flex-col gap-px bg-gray-200 py-px">
+        {notes.map(note => (
+          <NotePreview note={note as any} key={note.id} />
+        ))}
+      </div>
+      <BottomSpinner />
     </>
   )
 }

src/components/BottomSpinner.tsx

@@ -0,0 +1,10 @@
+import { Loader2 } from "lucide-react"
+
+export default function BottomSpinner() {
+  return (
+    <div className="mx-auto flex items-center justify-center gap-1 py-4 font-bold">
+      <Loader2 className="animate-spin" size={24} />
+      <p>Loading...</p>
+    </div>
+  )
+}

src/components/TopAppBar.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { Tooltip } from "@radix-ui/themes"
+import { ArrowLeft } from "lucide-react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+
+export default function TopAppBar({ content, back }: { content: React.ReactNode; back?: boolean }) {
+  const router = useRouter()
+
+  return (
+    <div className="flex min-h-12 items-center border-b px-2">
+      {back && (
+        <Tooltip content="戻る">
+          <Link
+            className="mr-5 rounded-full p-2 hover:bg-neutral-100"
+            href="/home/"
+            onClick={router.back}>
+            <ArrowLeft className="text-neutral-600" size={18} />
+          </Link>
+        </Tooltip>
+      )}
+      {content}
+    </div>
+  )
+}

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

@@ -67,8 +67,8 @@ export default class MisskeyLatestClient extends BaseClient {
    * @param opts - オプション
    * @returns
    */
-  async notes(userId: string, opts: NotesOpts = {}) {
-    return this.post<NotesResponse>("notes", {
+  async userNotes(userId: string, opts: NotesOpts = {}) {
+    return this.post<NotesResponse>("users/notes", {
       body: { userId, ...opts },
     })
   }

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

@@ -1,12 +1,12 @@
-import { Emoji } from ".."
+import { Emoji } from "../types"
 import MisskeyLatestClient from "./misskey-latest"
 
 export default class MisskeyV12Client extends MisskeyLatestClient {
   id = "misskey-v12"
 
   override async emojiUrl(name: string): Promise<string | null> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const { emojis } = await super.post<any>("meta")
+    const { emojis } = await super.post<any>("meta", {})
     return emojis?.find?.((e: Record<keyof Emoji, unknown>) => e.name == name)?.url ?? null
   }
 }

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

@@ -1,12 +1,12 @@
-import { Emoji } from ".."
+import { Emoji } from "../types"
 import MisskeyLatestClient from "./misskey-latest"
 
 export default class MisskeyV13Client extends MisskeyLatestClient {
   id = "misskey-v13"
 
   override async emojiUrl(name: string): Promise<string | null> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const { emojis } = await super.get<any>("emojis")
+    const { emojis } = await super.get<any>("emojis", {})
     return emojis?.find?.((e: Record<keyof Emoji, unknown>) => e.name == name)?.url ?? null
   }
 }

src/features/note/NotePreview/index.tsx

@@ -42,7 +42,7 @@ function NotePreview({ note }: NotePreviewProps) {
 
   return (
     <CustomEmojiCtx.Provider value={{ host }}>
-      <div className="rounded-xl bg-white p-3 shadow">
+      <div className="bg-white p-3">
         {renotebar}
         <div className="flex gap-1.5">
           {/* アイコン */}

src/features/timeline/TLSwitch.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { ReactNode } from "react"
+import { TLChanNames } from "~/features/api/types"
 import { useTLName } from "."
-import { TLChanNames } from "../api"
 
 const TLButton = ({ tl, children }: { tl: TLChanNames; children: ReactNode }) => {
   const [currentTl, setCurrentTl] = useTLName()

src/features/timeline/index.ts

@@ -2,8 +2,8 @@ import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"
 import { atomWithStorage } from "jotai/utils"
 import { entities } from "misskey-js"
 import { useCallback, useEffect, useState } from "react"
-
-import { TLChanNameToAPIEndpoint, TLChanNames, useMisskeyJS, useStream } from "~/features/api"
+import { useMisskeyJS, useStream } from "~/features/api"
+import { TLChanNameToAPIEndpoint, TLChanNames } from "~/features/api/types"
 import { useLogin } from "~/features/auth"
 
 ////////////////////////////////////////////////////////////////