From 62d0cb81a72e96302ef35cb33756f6191ef5044d Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Tue, 25 Nov 2025 20:49:33 +0100
Subject: [PATCH] Refactor account page structure and update UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move user settings form to dedicated /account/settings route
- Update PageHeader icon from Settings to AccountCircle for clarity
- Update debug log labels in auth config for better readability

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/[locale]/account/settings/page.tsx | 33 ++++++++++++++++++++++++++
 app/lib/auth.ts                        |  6 ++---
 app/ui/PageHeader.tsx                  |  4 ++--
 3 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 app/[locale]/account/settings/page.tsx

diff --git a/app/[locale]/account/settings/page.tsx b/app/[locale]/account/settings/page.tsx
new file mode 100644
index 0000000..f4cab95
--- /dev/null
+++ b/app/[locale]/account/settings/page.tsx
@@ -0,0 +1,33 @@
+import { FC, Suspense } from 'react';
+import { Main } from '@/app/ui/Main';
+import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/UserSettingsForm';
+import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
+
+const UserSettingsPage: FC = async () => {
+    const userSettings = await getUserSettings();
+
+    return (
+        <Main>
+            <div className="flex flex-col items-center">
+                <UserSettingsForm userSettings={userSettings} />
+            </div>
+        </Main>
+    );
+};
+
+const Page: FC = () => {
+    return (
+        <Suspense fallback={
+            <Main>
+                <div className="flex flex-col items-center">
+                    <div className="h-8 w-48 skeleton mb-4"></div>
+                    <UserSettingsFormSkeleton />
+                </div>
+            </Main>
+        }>
+            <UserSettingsPage />
+        </Suspense>
+    );
+};
+
+export default Page;
diff --git a/app/lib/auth.ts b/app/lib/auth.ts
index 5c09a61..dac126a 100644
--- a/app/lib/auth.ts
+++ b/app/lib/auth.ts
@@ -35,8 +35,8 @@ export const authConfig: NextAuthConfig = {
       // see: https://stackoverflow.com/questions/70409219/get-user-id-from-session-in-next-auth-client
       jwt({ token, account, user }) {
          if (account) {
-            // console.log("(jwt) account:", account);
-            // console.log("(jwt) user:", user);
+            // console.log("(JWT) account:", account);
+            // console.log("(JWT) user:", user);
            token.accessToken = account.access_token;
            // attach Google account ID to the token
            token.piggyback_providerAccountId = account.providerAccountId;
@@ -51,7 +51,7 @@ export const authConfig: NextAuthConfig = {
          if(session.user && token) {
             // assign Google account ID from the token to the Session user ID
             session.user.id = token.piggyback_providerAccountId;
-            // console.log("(jwt) token:", token);
+//            console.log("(SESSION) token:", token);
          }
          return session;
        },
diff --git a/app/ui/PageHeader.tsx b/app/ui/PageHeader.tsx
index 2c02d7e..04d2b15 100644
--- a/app/ui/PageHeader.tsx
+++ b/app/ui/PageHeader.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { SelectLanguage } from "./SelectLanguage";
-import Settings from "@mui/icons-material/Settings";
+import AccountCircle from "@mui/icons-material/AccountCircle";
 
 export const PageHeader = () =>
     <div className="navbar bg-base-100 mb-6">
@@ -9,6 +9,6 @@ export const PageHeader = () =>
         <span className="grow">&nbsp;</span>
         <SelectLanguage />
         <Link href="/account/" className="btn btn-ghost btn-circle">
-            <Settings className="w-6 h-6" />
+            <AccountCircle  />
         </Link>
     </div>
\ No newline at end of file