refactor(react-hooks): enable stricter effect rules

Turn on react-hooks/set-state-in-effect and react-hooks/incompatible-library, then remove effect-driven local state sync patterns across affected pages. Keep behavior stable by deriving values from source state, remounting tab state by role key, and replacing useForm watch with useWatch.

app/(account)/settings/page.tsx

@@ -2,7 +2,7 @@
 
 import { Camera } from "lucide-react"
 import Link from "next/link"
-import { useEffect, useRef, useState } from "react"
+import { useRef, useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -23,12 +23,6 @@ export default function SettingsPage() {
   const [avatar, setAvatar] = useState(user?.avatar ?? "")
   const fileRef = useRef<HTMLInputElement>(null)
 
-  useEffect(() => {
-    setNickname(user?.nickname ?? "")
-    setBio(user?.bio ?? "")
-    setAvatar(user?.avatar ?? "")
-  }, [user])
-
   const isRoleVerified = (role: UserRole) => verifiedRoles.includes(role)
 
   return (