Start working on the profile refactoring.

This commit is contained in:
charlesgauthereau
2025-12-21 16:55:12 +01:00
parent 428782e8a4
commit 116229a29e
77 changed files with 5076 additions and 509 deletions
@@ -1,34 +1,42 @@
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { SidebarMenuButton } from "@/components/ui/sidebar";
import { ChevronUp } from "lucide-react";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import { currentUser } from "@/lib/auth/current-user";
import { SidebarMenuButton } from "@/components/ui/sidebar";
import { getAccounts, getSession, getSessions } from "@/lib/auth/auth";
import {LoggedInDropdown} from "@/components/wrappers/dashboard/common/logged-in/logged-in-dropdown";
export const LoggedInButton = async () => {
const user = await currentUser();
const sessions = await getSessions();
const currentSession = await getSession();
const accounts = await getAccounts();
if (!user) return null;
return (
<LoggedInDropdown
user={{
...user,
image: user.image ?? null,
role: user.role ?? null,
banned: user.banned ?? null,
banReason: user.banReason ?? null,
banExpires: user.banExpires ?? null,
deletedAt: user.deletedAt ? new Date(user.deletedAt) : null,
}}
>
<SidebarMenuButton>
<Avatar className="size-6">
<AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
{user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
</Avatar>
<span className="first-letter:capitalize">{user.name}</span>
<ChevronUp className="ml-auto" />
</SidebarMenuButton>
</LoggedInDropdown>
<>
<LoggedInDropdown
// @ts-ignore
user={user}
// @ts-ignore
sessions={sessions}
// @ts-ignore
currentSession={currentSession.session}
// @ts-ignore
accounts={accounts}
>
<SidebarMenuButton>
<Avatar className="size-6">
<AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
{user.image ? <AvatarImage src={user.image} alt={`${user.name ?? "-"}'s profile picture`} /> : null}
</Avatar>
<span className="first-letter:capitalize">{user.name}</span>
<ChevronUp className="ml-auto" />
</SidebarMenuButton>
</LoggedInDropdown>
</>
);
};
@@ -1,63 +1,63 @@
"use client";
import { PropsWithChildren } from "react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { redirect } from "next/navigation";
import { CircleUser, LogOut, ShieldHalf } from "lucide-react";
import { signOut } from "@/lib/auth/auth-client";
import {PropsWithChildren, ReactNode, useState} from "react";
import { useRouter } from "next/navigation";
import { User } from "@/db/schema/02_user";
import { CircleUser, LogOut } from "lucide-react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { signOut } from "@/lib/auth/auth-client";
import {ProfileModal} from "@/components/wrappers/dashboard/common/profile/profile-modal";
import {Account, Session, User} from "@/db/schema/02_user";
export type LoggedInDropdownProps = PropsWithChildren<{
user: User;
sessions: Session[];
currentSession: Session;
accounts: Account[];
children: ReactNode;
}>;
export const LoggedInDropdown = (props: LoggedInDropdownProps) => {
export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, children }: LoggedInDropdownProps) => {
const router = useRouter();
const [isModalOpen, setIsModalOpen] = useState(false);
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>{props.children}</DropdownMenuTrigger>
<DropdownMenuContent side="top" className="min-w-[var(--radix-popper-anchor-width)]">
<DropdownMenuItem
onClick={() => {
redirect("/dashboard/profile");
}}
>
<div className="flex justify-start items-center gap-2">
<CircleUser size={16} />
<span>Account</span>
</div>
</DropdownMenuItem>
{/*{(props.user.role === "superadmin" || props.user.role === "admin") && (*/}
{/* <DropdownMenuItem*/}
{/* onClick={() => {*/}
{/* redirect("/dashboard/admin");*/}
{/* }}*/}
{/* >*/}
{/* <div className="flex justify-start items-center gap-2">*/}
{/* <ShieldHalf size={16} />*/}
{/* <span>Administration Panel</span>*/}
{/* </div>*/}
{/* </DropdownMenuItem>*/}
{/*)}*/}
<DropdownMenuItem
onClick={async () => {
await signOut({
fetchOptions: {
onSuccess: () => {
router.push("/login");
<>
<ProfileModal
user={user}
sessions={sessions}
currentSession={currentSession}
accounts={accounts}
open={isModalOpen}
onOpenChange={setIsModalOpen}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
<DropdownMenuContent side="top" className="min-w-[var(--radix-popper-anchor-width)]">
<DropdownMenuItem onClick={() => setIsModalOpen(!isModalOpen)}>
<div className="flex justify-start items-center gap-2">
<CircleUser size={16} />
<span>Account</span>
</div>
</DropdownMenuItem>
<DropdownMenuItem
onClick={async () => {
await signOut({
fetchOptions: {
onSuccess: () => {
router.push("/login");
},
},
},
});
}}
>
<div className="flex justify-start items-center gap-2">
<LogOut size={16} />
<span>Log out</span>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
});
}}
>
<div className="flex justify-start items-center gap-2">
<LogOut size={16} className="text-red-500" />
<span className="text-red-500">Logout</span>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
);
};