Start working on the profile refactoring.

2026-07-14 11:16:13 +02:00 · 2025-12-21 16:55:12 +01:00
parent 428782e8a4
commit 116229a29e
77 changed files with 5076 additions and 509 deletions
@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { Account, Session, User } from "@/db/schema/02_user";
+import { ProfileSidebar } from "./profile-sidebar";
+import {ProfileProviders} from "@/components/wrappers/dashboard/profile/profile-providers";
+import {ProfileAccount} from "@/components/wrappers/dashboard/profile/profile-account";
+import {ProfileAppearance} from "@/components/wrappers/dashboard/profile/profile-apperance";
+import {ProfileSecurity} from "@/components/wrappers/dashboard/profile/profile-security";
+import {ProfileGeneral} from "@/components/wrappers/dashboard/profile/profile-general";
+
+type ProfileModalProps = {
+    open: boolean;
+    user: User;
+    sessions: Session[];
+    currentSession: Session;
+    accounts: Account[];
+    onOpenChange: (open: boolean) => void;
+};
+
+export const ProfileModal = ({ user, sessions, currentSession, accounts, open, onOpenChange }: ProfileModalProps) => {
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="w-[95vw] h-[90vh] max-w-md lg:max-w-[1000px] lg:h-[800px] p-0 overflow-hidden flex flex-col outline-none gap-0 rounded-xl bg-background">
+                <DialogHeader className="sr-only">
+                    <DialogTitle>Settings</DialogTitle>
+                    <DialogDescription>Manage your account settings</DialogDescription>
+                </DialogHeader>
+                <Tabs defaultValue="profile" orientation="vertical" className="flex flex-col lg:flex-row h-full w-full">
+                    <ProfileSidebar user={user} />
+
+                    <div className="flex-1 overflow-y-auto bg-background h-full scroll-smooth">
+                        <TabsContent value="profile" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileGeneral user={user} />
+                        </TabsContent>
+
+                        <TabsContent value="security" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileSecurity
+                                user={user}
+                                sessions={sessions}
+                                currentSession={currentSession}
+                                credentialAccount={accounts.find((acc) => acc.providerId === "credential")!}
+                            />
+                        </TabsContent>
+
+                        <TabsContent value="providers" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileProviders accounts={accounts} />
+                        </TabsContent>
+
+                        <TabsContent value="account" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileAccount user={user} />
+                        </TabsContent>
+
+                        <TabsContent value="appearance" className="mt-0 h-full p-6 lg:p-10 outline-none focus-visible:ring-0">
+                            <ProfileAppearance />
+                        </TabsContent>
+                    </div>
+                </Tabs>
+            </DialogContent>
+        </Dialog>
+    );
+};
@@ -0,0 +1,51 @@
+"use client";
+
+import React, { use } from "react";
+import { TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { UserIcon, Settings, Palette, ShieldHalf, Workflow } from "lucide-react";
+import { User } from "@/db/schema/02_user";
+
+interface ProfileSidebarProps {
+    user: User;
+}
+
+export function ProfileSidebar({ user }: ProfileSidebarProps) {
+
+    return (
+        <div className="w-full lg:w-[260px] flex-shrink-0 lg:border-r bg-muted/10 p-4 lg:p-6 flex flex-col gap-4 border-b lg:border-b-0">
+            <div className="flex items-center px-2 mb-2">
+                <span className="font-bold text-xl tracking-tight">Settings</span>
+            </div>
+
+            <TabsList className="flex flex-col h-auto w-full bg-transparent p-0 gap-1 justify-start items-stretch">
+                <SettingsTabTrigger value="profile" icon={<UserIcon className="w-4 h-4" />}>
+                    Profile
+                </SettingsTabTrigger>
+                <SettingsTabTrigger value="security" icon={<ShieldHalf className="w-4 h-4" />}>
+                    Security & Access
+                </SettingsTabTrigger>
+                <SettingsTabTrigger value="providers" icon={<Workflow className="w-4 h-4" />}>
+                    Connected Accounts
+                </SettingsTabTrigger>
+                <SettingsTabTrigger value="account" icon={<Settings className="w-4 h-4" />}>
+                    Account
+                </SettingsTabTrigger>
+                <SettingsTabTrigger value="appearance" icon={<Palette className="w-4 h-4" />}>
+                    Appearance
+                </SettingsTabTrigger>
+            </TabsList>
+        </div>
+    );
+}
+
+function SettingsTabTrigger({ value, icon, children }: { value: string; icon: React.ReactNode; children: React.ReactNode }) {
+    return (
+        <TabsTrigger
+            value={value}
+            className="w-full justify-start gap-3 px-3 py-2.5 rounded-md transition-all whitespace-nowrap flex-shrink-0 text-sm data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-sm data-[state=active]:font-medium hover:bg-muted/50 hover:text-foreground text-muted-foreground"
+        >
+            {icon}
+            {children}
+        </TabsTrigger>
+    );
+}