useAccountとかProfile関連とか整理

package.json

@@ -22,7 +22,6 @@
     "react-hook-form": "7.50.1",
     "react-mfm": "0.5.1",
     "react-textarea-autosize": "8.5.3",
-    "swr": "2.2.5",
     "uuid": "9.0.1"
   },
   "devDependencies": {

src/app/(center)/login/page.tsx

@@ -6,7 +6,7 @@ import { useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import { v4 as uuidv4 } from "uuid"
-import { useAuth, useMultiAccounts } from "~/features/auth"
+import { useAuth } from "~/features/auth"
 import { ensureproto } from "~/utils"
 
 export default function LoginPage() {
@@ -158,8 +158,7 @@ function ManualLogin({ go, host }: LoginProps) {
     handleSubmit,
   } = useForm<ManualLoginForm>()
   const router = useRouter()
-  const { setAuth } = useAuth()
-  const { addMultiAccount } = useMultiAccounts()
+  const { setAuth, addMultiAccount } = useAuth()
 
   const onSubmit = async ({ host, token }: ManualLoginForm) => {
     const realHost = ensureproto(host),

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

@@ -1,13 +1,14 @@
 "use client"
 
+import { Tooltip } from "@radix-ui/themes"
 import { useSearchParams } from "next/navigation"
 import { Suspense } from "react"
-
-import UserProfile from "~/features/profile/UserProfile"
+import { statusEmoji } from "~/features/profile"
+import UserIcon from "~/features/profile/UserIcon"
 
 export default function ProfilePage() {
   return (
-    <Suspense fallback={<UserProfile />}>
+    <Suspense fallback={null /* todo */}>
       <ProfileSuspense />
     </Suspense>
   )
@@ -17,5 +18,23 @@ function ProfileSuspense() {
   const searchParams = useSearchParams()
   const id = searchParams.get("user")
 
-  return <UserProfile id={id ?? undefined} />
+  const user = null
+  const onlineStatus = "unknown"
+
+  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} />
+        </div>
+        <div className="absolute bottom-1.5 right-1.5 flex h-11 w-11 rounded-full border-4 bg-white">
+          <Tooltip content={onlineStatus}>
+            <span className="m-auto cursor-default text-3xl leading-none">
+              {statusEmoji(onlineStatus)}
+            </span>
+          </Tooltip>
+        </div>
+      </div>
+    </>
+  )
 }

src/app/(main)/(nav)/settings/page.tsx

@@ -1,10 +1,10 @@
 "use client"
 
-import { useAuth } from "~/features/auth"
+import { useAccount } from "~/features/auth"
 import { useSettings } from "~/features/settings"
 
 export default function SetingsPage() {
-  const { account } = useAuth()
+  const account = useAccount()
   const [settings] = useSettings()
 
   const h2class = "pt-6 pb-2.5 text-xl font-bold"

src/app/(main)/Header.tsx

@@ -3,13 +3,12 @@
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
 import Link from "next/link"
 import { Suspense } from "react"
-
 import BrandLogo from "~/components/BrandLogo"
 import LinkButton from "~/components/LinkButton"
 import { useAuth, useLogin } from "~/features/auth"
 import { useProfile } from "~/features/profile"
-import ProfileIcon from "~/features/profile/ProfileIcon"
 import UserIcon from "~/features/profile/UserIcon"
+import UesrStatusIcon from "~/features/profile/UserStatusIcon"
 import { hostname } from "~/utils"
 
 export default function Header() {
@@ -29,7 +28,7 @@ export default function Header() {
           <Suspense
             fallback={
               <div className="h-12 w-12 animate-pulse">
-                <UserIcon />
+                <UserIcon user={null} />
               </div>
             }>
             <UserMenu />
@@ -63,7 +62,7 @@ function UserMenu() {
         <button
           className="rounded-full bg-white outline-none hover:brightness-95"
           aria-label="User menu">
-          <ProfileIcon />
+          <UesrStatusIcon />
         </button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>

src/app/auth/page.tsx

@@ -3,7 +3,7 @@
 import { useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useState } from "react"
 import NBSK from "~/components/NBSK"
-import { useAuth, useMultiAccounts } from "~/features/auth"
+import { useAuth } from "~/features/auth"
 import { useClient, useMutex } from "~/features/common"
 import { dbg } from "~/utils"
 
@@ -18,8 +18,7 @@ export default function AuthPage() {
 function AuthSuspense() {
   const router = useRouter()
   const searchParams = useSearchParams()
-  const { session, setAuth } = useAuth()
-  const { addMultiAccount } = useMultiAccounts()
+  const { session, addMultiAccount, setAuth } = useAuth()
   const client = useClient()
   const [once, setOnce] = useState(false) // 💩
 

src/features/api/index.ts

@@ -1,7 +1,7 @@
 import { atom, useAtom, useAtomValue } from "jotai"
 import { Channels, Endpoints, Stream, api, entities } from "misskey-js"
 import { use, useState } from "react"
-import { accountAtom, useAuth } from "~/features/auth"
+import { accountAtom, useAccount } from "~/features/auth"
 import { ensureproto } from "~/utils"
 import { APIClient, detect } from "./clients"
 
@@ -47,7 +47,7 @@ export const streamConnectAtom = atom(get => {
 // hooks
 
 export function useAPI(host?: string) {
-  const { account } = useAuth()
+  const account = useAccount()
   const [clients, setClients] = useAtom(clientsAtom)
   const [clientFetch, setClientFetch] = useState<Promise<APIClient | null>>()
 

src/features/auth/index.ts

@@ -29,11 +29,15 @@ export const authErrorAtom = atom<string | null>(null)
 //  hooks
 ////////////////////////////////////////////////////////////////
 
+export function useAccount() {
+  return useAtomValue(accountAtom)
+}
+
 // 現在のアカウントを取得する
 export function useLogin(login?: boolean) {
-  const account = useAtomValue(accountAtom)
-  const client = useClient()
+  const account = useAccount()
   const router = useRouter()
+  const client = useClient()
 
   useEffect(() => {
     if (login && client && !account) router.push("/")
@@ -79,6 +83,7 @@ export function useAuth() {
     account: authAccount,
     session: authSession,
     error: authError,
+    addMultiAccount,
     setAuth,
     logout,
   }

src/features/note/NotePreview/NavMore.tsx

@@ -2,7 +2,7 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
 import { Item } from "@radix-ui/react-dropdown-menu"
 import { MoreHorizontal } from "lucide-react"
 import { entities } from "misskey-js"
-import { useAuth } from "~/features/auth"
+import { useAccount } from "~/features/auth"
 
 const menuItem =
   "focus:outline-none focus:bg-lime-200 mx-1 text-sm cursor-pointer px-2.5 py-1.5 font-bold rounded-md"
@@ -27,7 +27,7 @@ function NavMoreRoot({ children }: { note: entities.Note; children?: React.React
 }
 
 export default function NavMore({ note }: { note: entities.Note }) {
-  const { account } = useAuth()
+  const account = useAccount()
 
   return (
     <NavMoreRoot note={note}>

src/features/notifications/Notice/index.tsx

@@ -3,7 +3,7 @@ import Link from "next/link"
 import { ReactNode } from "react"
 import TimeText from "~/components/TimeText"
 import { profileLink } from "~/features/profile"
-import TLUserIcon from "~/features/profile/TLUserIcon"
+import UserIcon from "~/features/profile/UserIcon"
 import NoticeNotePreview from "./NoticeNotePreview"
 
 export default function Notice({ notice }: { notice: Notification }) {
@@ -20,7 +20,7 @@ export default function Notice({ notice }: { notice: Notification }) {
 export const NoticeUser = ({ user, children }: { user: User; children?: ReactNode }) => {
   return (
     <div className="flex gap-1.5">
-      <TLUserIcon user={user} />
+      <UserIcon user={user} />
       <div className="flex w-full flex-col gap-0.5">
         <div className="flex justify-between">
           <div className="flex gap-1 font-bold">

src/features/profile/ProfileCard.tsx

@@ -0,0 +1,18 @@
+import { entities } from "misskey-js"
+import { Suspense } from "react"
+
+type Props = {
+  user: entities.UserLite
+}
+
+export default function ProfileCard(props: Props) {
+  return (
+    <Suspense>
+      <ProfileCardSuspense {...props} />
+    </Suspense>
+  )
+}
+
+function ProfileCardSuspense({ user }: Props) {
+  return null
+}

src/features/profile/UserIcon.tsx

@@ -1,13 +1,27 @@
+import { entities } from "misskey-js"
 import Image from "next/image"
-
+import Link from "next/link"
 import Anon from "~/assets/anon.png"
+import { profileLink } from "."
 
-export default function UserIcon({ src }: { src?: string | null }) {
-  const className = "h-full overflow-hidden rounded-full"
+export function Icon({ src }: { src: string | null }) {
+  return (
+    <Image
+      className="m-1 h-fit w-fit overflow-hidden rounded-[48px] shadow transition-all hover:rounded-md"
+      src={src ?? Anon}
+      width={48}
+      height={48}
+      alt="icon"
+    />
+  )
+}
 
-  return src ? (
-    <img className={className} src={src} alt="icon" />
+export default function UserIcon({ user }: { user: entities.User | null }) {
+  return !user ? (
+    <Icon src={null} />
   ) : (
-    <Image className={className} src={Anon} alt="icon" />
+    <Link href={profileLink(user)} passHref>
+      <Icon src={user.avatarUrl} />
+    </Link>
   )
 }

src/features/profile/ProfileIcon.tsx → src/features/profile/UserStatusIcon.tsx

@@ -1,14 +1,12 @@
 import { statusEmoji, useProfile } from "."
 import UserIcon from "./UserIcon"
 
-export default function ProfileIcon() {
+export default function UesrStatusIcon() {
   const profile = useProfile()
 
-  // todo: SWRでステータスの更新
-
   return (
     <div className="relative h-12 w-12">
-      <UserIcon src={profile?.avatarUrl} />
+      <UserIcon user={profile} />
       <span className="absolute bottom-0 right-0 rounded-full bg-white leading-none">
         {statusEmoji(profile?.onlineStatus)}
       </span>