feat : add icon and introduce login with google

app/page.tsx

@@ -24,7 +24,7 @@ export default function HomePage() {
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 pt-4 pb-10 sm:px-6 sm:pt-6 sm:pb-14">
         <header className="max-w-3xl">
           <h1 className="font-heading text-4xl font-semibold">
-            เลือกตัวละครแล้วส่องดู
+            เลือกตัวละครแล้วดูได้เลย
           </h1>
           <p className="mt-3 text-lg leading-8 text-muted-foreground">
             ไกด์ตัวละคร อาวุธ อาร์ติแฟกต์ กลุ่มดาว ดาเมทแต่ละทีม และ ส่วนเสริมเล็กๆน้อยๆ

app/profile/page.tsx

@@ -1,22 +1,24 @@
 import { eq } from "drizzle-orm";
 import { redirect } from "next/navigation";
 import { connection } from "next/server";
+import { UserRoundIcon } from "lucide-react";
 import { getDb } from "@/db";
 import { accounts, users } from "@/db/schema";
 import { SiteHeader } from "@/components/public/site-header";
 import { AdminHeader } from "@/components/admin/admin-header";
 import { ProfileForm } from "@/components/auth/profile-form";
+import { GoogleAccountSettings } from "@/components/auth/google-account-settings";
 import { PasswordForm } from "@/components/auth/password-form";
 import { EmailSettings } from "@/components/auth/email-settings";
 import { isAuthorizedAdmin } from "@/lib/auth/authorization";
-import { getCustomerSession } from "@/lib/auth/server";
+import { getCustomerSession, isGoogleAuthEnabled } from "@/lib/auth/server";
 import { safeAuthReturnPath } from "@/lib/auth/return-path";
 
 export const instant = false;
 
 export default async function ProfilePage({ searchParams }: PageProps<"/profile">) {
   await connection();
-  const { setup, next, upload, emailAction, error } = await searchParams;
+  const { setup, next, upload, emailAction, error, googleLinkError } = await searchParams;
   const nextPath = safeAuthReturnPath(next);
   const setupNextPath = nextPath === "/profile" || nextPath.startsWith("/profile?") ? "/" : nextPath;
   const session = await getCustomerSession();
@@ -25,15 +27,21 @@ export default async function ProfilePage({ searchParams }: PageProps<"/profile"
     getDb().select({ name: users.name, email: users.email,
       emailVerified: users.emailVerified, image: users.image })
       .from(users).where(eq(users.id, session.user.id)).limit(1),
-    getDb().select({ providerId: accounts.providerId })
+    getDb().select({ id: accounts.id, providerId: accounts.providerId })
       .from(accounts).where(eq(accounts.userId, session.user.id)),
   ]);
   const [user] = userRows;
   if (!user) redirect("/auth/login?next=%2Fprofile");
   const hasCredential = accountRows.some((account) => account.providerId === "credential");
+  const googleAccountIds = accountRows.filter((account) => account.providerId === "google")
+    .map((account) => account.id);
+  const hasOtherAuthMethod = accountRows.some((account) => account.providerId !== "google");
   return <div className="min-h-svh">{isAuthorizedAdmin(session.user) ? <AdminHeader /> : <SiteHeader />}
     <main className="mx-auto max-w-5xl p-4 py-10 sm:p-8">
-      <h1 className="mb-6 font-heading text-3xl font-semibold">โปรไฟล์ของฉัน</h1>
+      <h1 className="mb-6 flex items-center gap-2 font-heading text-3xl font-semibold">
+        <UserRoundIcon aria-hidden="true" className="size-7 shrink-0" />
+        โปรไฟล์ของฉัน
+      </h1>
       {setup === "1" && <p className="mb-6 text-muted-foreground">
         {upload === "failed" ? "สร้างบัญชีแล้ว แต่บันทึกรูปโปรไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง" :
           "สร้างบัญชีเรียบร้อยแล้ว เพิ่มรูปโปรไฟล์ได้ตามต้องการ หรือกดข้ามเพื่อเริ่มใช้งาน"}
@@ -41,7 +49,9 @@ export default async function ProfilePage({ searchParams }: PageProps<"/profile"
       <div className="grid items-start gap-6 md:grid-cols-2">
         <ProfileForm {...user} nextPath={setup === "1" ? setupNextPath : undefined} />
         <EmailSettings email={user.email} verified={user.emailVerified}
-          callbackCompleted={emailAction === "1" && !error} callbackError={typeof error === "string"} />
+          callbackCompleted={emailAction === "1" && !error} callbackError={emailAction === "1" && typeof error === "string"} />
+        {isGoogleAuthEnabled() && <GoogleAccountSettings googleAccountIds={googleAccountIds}
+          hasOtherAuthMethod={hasOtherAuthMethod} linkError={googleLinkError === "1"} />}
         {hasCredential && <PasswordForm />}
       </div>
     </main>