v5.1.0 (#2970)

* chore(release): v5.1.0 * feat: implement resume thumbnails * fix: remove unused mcp tools * docs: fix formatting of docs
2026-08-24 07:12:18 +10:00 · 2026-05-07 15:12:33 +02:00
parent 51c366310e
commit 50ba37a27f
1015 changed files with 106087 additions and 141872 deletions
@@ -0,0 +1,16 @@
+import { createServerFn } from "@tanstack/react-start";
+import { getCookie, setCookie } from "@tanstack/react-start/server";
+import z from "zod";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+
+export const getDashboardSidebarServerFn = createServerFn({ method: "GET" }).handler(async () => {
+	const sidebarState = getCookie(SIDEBAR_COOKIE_NAME) !== "false";
+	return sidebarState;
+});
+
+export const setDashboardSidebarServerFn = createServerFn({ method: "POST" })
+	.inputValidator(z.boolean())
+	.handler(async ({ data }) => {
+		setCookie(SIDEBAR_COOKIE_NAME, data.toString());
+	});
@@ -0,0 +1,19 @@
+import type { Icon as IconType } from "@phosphor-icons/react";
+import { SidebarTrigger } from "@reactive-resume/ui/components/sidebar";
+import { cn } from "@reactive-resume/utils/style";
+
+type Props = {
+	title: string;
+	icon: IconType;
+	className?: string;
+};
+
+export function DashboardHeader({ title, icon: IconComponent, className }: Props) {
+	return (
+		<div className={cn("relative flex items-center justify-center gap-x-2.5 md:justify-start", className)}>
+			<SidebarTrigger className="absolute inset-s-0 md:hidden" />
+			<IconComponent weight="light" className="size-5" />
+			<h1 className="font-medium text-xl tracking-tight">{title}</h1>
+		</div>
+	);
+}
@@ -0,0 +1,199 @@
+import type { MessageDescriptor } from "@lingui/core";
+import { msg } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
+import { Trans } from "@lingui/react/macro";
+import {
+	BrainIcon,
+	GearSixIcon,
+	KeyIcon,
+	ReadCvLogoIcon,
+	ShieldCheckIcon,
+	UserCircleIcon,
+	WarningIcon,
+} from "@phosphor-icons/react";
+import { Link } from "@tanstack/react-router";
+import { AnimatePresence, motion } from "motion/react";
+import { Avatar, AvatarFallback, AvatarImage } from "@reactive-resume/ui/components/avatar";
+import { BrandIcon } from "@reactive-resume/ui/components/brand-icon";
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarRail,
+	SidebarSeparator,
+	useSidebarState,
+} from "@reactive-resume/ui/components/sidebar";
+import { getInitials } from "@reactive-resume/utils/string";
+import { Copyright } from "@/components/ui/copyright";
+import { UserDropdownMenu } from "@/components/user/dropdown-menu";
+
+type SidebarItem = {
+	icon: React.ReactNode;
+	label: MessageDescriptor;
+	href: React.ComponentProps<typeof Link>["to"];
+};
+
+const appSidebarItems = [
+	{
+		icon: <ReadCvLogoIcon />,
+		label: msg`Resumes`,
+		href: "/dashboard/resumes",
+	},
+] as const satisfies SidebarItem[];
+
+const settingsSidebarItems = [
+	{
+		icon: <UserCircleIcon />,
+		label: msg`Profile`,
+		href: "/dashboard/settings/profile",
+	},
+	{
+		icon: <GearSixIcon />,
+		label: msg`Preferences`,
+		href: "/dashboard/settings/preferences",
+	},
+	{
+		icon: <ShieldCheckIcon />,
+		label: msg`Authentication`,
+		href: "/dashboard/settings/authentication",
+	},
+	{
+		icon: <KeyIcon />,
+		label: msg`API Keys`,
+		href: "/dashboard/settings/api-keys",
+	},
+	{
+		icon: <BrainIcon />,
+		label: msg`Integrations`,
+		href: "/dashboard/settings/integrations",
+	},
+	{
+		icon: <WarningIcon />,
+		label: msg`Danger Zone`,
+		href: "/dashboard/settings/danger-zone",
+	},
+] as const satisfies SidebarItem[];
+
+type SidebarItemListProps = {
+	items: readonly SidebarItem[];
+};
+
+function SidebarItemList({ items }: SidebarItemListProps) {
+	const { i18n } = useLingui();
+
+	return (
+		<SidebarMenu>
+			{items.map((item) => (
+				<SidebarMenuItem key={item.href}>
+					<SidebarMenuButton
+						title={i18n.t(item.label)}
+						render={
+							<Link to={item.href} activeProps={{ className: "bg-sidebar-accent" }}>
+								{item.icon}
+								<span className="shrink-0 transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ms-8 group-data-[collapsible=icon]:opacity-0">
+									{i18n.t(item.label)}
+								</span>
+							</Link>
+						}
+					/>
+				</SidebarMenuItem>
+			))}
+		</SidebarMenu>
+	);
+}
+
+export function DashboardSidebar() {
+	const { state } = useSidebarState();
+
+	return (
+		<Sidebar variant="floating" collapsible="icon">
+			<SidebarHeader>
+				<SidebarMenu>
+					<SidebarMenuItem>
+						<SidebarMenuButton
+							className="h-auto justify-center"
+							render={
+								<Link to="/">
+									<BrandIcon variant="icon" className="size-6" />
+									<h1 className="sr-only">Reactive Resume</h1>
+								</Link>
+							}
+						/>
+					</SidebarMenuItem>
+				</SidebarMenu>
+			</SidebarHeader>
+
+			<SidebarSeparator />
+
+			<SidebarContent>
+				<SidebarGroup>
+					<SidebarGroupLabel>
+						<Trans>App</Trans>
+					</SidebarGroupLabel>
+					<SidebarGroupContent>
+						<SidebarItemList items={appSidebarItems} />
+					</SidebarGroupContent>
+				</SidebarGroup>
+
+				<SidebarGroup>
+					<SidebarGroupLabel>
+						<Trans>Settings</Trans>
+					</SidebarGroupLabel>
+					<SidebarGroupContent>
+						<SidebarItemList items={settingsSidebarItems} />
+					</SidebarGroupContent>
+				</SidebarGroup>
+			</SidebarContent>
+
+			<SidebarSeparator />
+
+			<SidebarFooter className="gap-y-0">
+				<SidebarMenu>
+					<SidebarMenuItem>
+						<UserDropdownMenu>
+							{({ session }) => (
+								<SidebarMenuButton className="h-auto gap-x-3 group-data-[collapsible=icon]:p-1!">
+									<Avatar className="size-8 shrink-0 transition-all group-data-[collapsible=icon]:size-6">
+										<AvatarImage src={session.user.image ?? undefined} />
+										<AvatarFallback className="group-data-[collapsible=icon]:text-[0.5rem]">
+											{getInitials(session.user.name)}
+										</AvatarFallback>
+									</Avatar>
+
+									<div className="transition-[margin,opacity] duration-200 ease-in-out group-data-[collapsible=icon]:-ms-8 group-data-[collapsible=icon]:opacity-0">
+										<p className="font-medium">{session.user.name}</p>
+										<p className="text-muted-foreground text-xs">{session.user.email}</p>
+									</div>
+								</SidebarMenuButton>
+							)}
+						</UserDropdownMenu>
+					</SidebarMenuItem>
+				</SidebarMenu>
+
+				<AnimatePresence>
+					{state === "expanded" && (
+						<motion.div
+							key="copyright"
+							className="will-change-[transform,opacity]"
+							initial={{ y: 12, opacity: 0 }}
+							animate={{ y: 0, opacity: 1 }}
+							exit={{ y: 12, opacity: 0 }}
+							transition={{ duration: 0.2, ease: "easeOut" }}
+						>
+							<Copyright className="wrap-break-word shrink-0 whitespace-normal p-2" />
+						</motion.div>
+					)}
+				</AnimatePresence>
+			</SidebarFooter>
+
+			<SidebarRail />
+		</Sidebar>
+	);
+}
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashboard/")({
+	beforeLoad: () => {
+		throw redirect({ to: "/dashboard/resumes", search: { sort: "lastUpdatedAt", tags: [] }, replace: true });
+	},
+});
@@ -0,0 +1,40 @@
+import { Badge } from "@reactive-resume/ui/components/badge";
+import { cn } from "@reactive-resume/utils/style";
+import { CometCard } from "@/components/animation/comet-card";
+
+type BaseCardProps = React.ComponentProps<"div"> & {
+	title: string;
+	description: string;
+	tags?: string[];
+	className?: string;
+	children?: React.ReactNode;
+};
+
+export function BaseCard({ title, description, tags, className, children, ...props }: BaseCardProps) {
+	return (
+		<CometCard translateDepth={3} rotateDepth={6}>
+			<div
+				{...props}
+				className={cn(
+					"relative flex aspect-page size-full overflow-hidden rounded-md bg-popover shadow transition-shadow hover:shadow-xl",
+					className,
+				)}
+			>
+				{children}
+
+				<div className="absolute inset-x-0 bottom-0 flex w-full flex-col justify-end space-y-0.5 bg-background/40 px-4 py-3 backdrop-blur-xs">
+					<h3 className="truncate font-medium tracking-tight">{title}</h3>
+					<p className="truncate text-xs opacity-80">{description}</p>
+
+					<div className={cn("mt-2 hidden flex-wrap items-center gap-1", tags && tags.length > 0 && "flex")}>
+						{tags?.map((tag) => (
+							<Badge key={tag} variant="secondary">
+								{tag}
+							</Badge>
+						))}
+					</div>
+				</div>
+			</div>
+		</CometCard>
+	);
+}
@@ -0,0 +1,20 @@
+import { t } from "@lingui/core/macro";
+import { PlusIcon } from "@phosphor-icons/react";
+import { useDialogStore } from "@/dialogs/store";
+import { BaseCard } from "./base-card";
+
+export function CreateResumeCard() {
+	const { openDialog } = useDialogStore();
+
+	return (
+		<BaseCard
+			title={t`Create a new resume`}
+			description={t`Start building your resume from scratch`}
+			onClick={() => openDialog("resume.create", undefined)}
+		>
+			<div className="absolute inset-0 flex items-center justify-center">
+				<PlusIcon weight="thin" className="size-12" />
+			</div>
+		</BaseCard>
+	);
+}
@@ -0,0 +1,20 @@
+import { t } from "@lingui/core/macro";
+import { DownloadSimpleIcon } from "@phosphor-icons/react";
+import { useDialogStore } from "@/dialogs/store";
+import { BaseCard } from "./base-card";
+
+export function ImportResumeCard() {
+	const { openDialog } = useDialogStore();
+
+	return (
+		<BaseCard
+			title={t`Import an existing resume`}
+			description={t`Continue where you left off`}
+			onClick={() => openDialog("resume.import", undefined)}
+		>
+			<div className="absolute inset-0 flex items-center justify-center">
+				<DownloadSimpleIcon weight="thin" className="size-12" />
+			</div>
+		</BaseCard>
+	);
+}
@@ -0,0 +1,62 @@
+import type { RouterOutput } from "@/libs/orpc/client";
+import { t } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
+import { LockSimpleIcon } from "@phosphor-icons/react";
+import { Link } from "@tanstack/react-router";
+import { AnimatePresence, motion } from "motion/react";
+import { useMemo } from "react";
+import { ResumeContextMenu } from "../menus/context-menu";
+import { BaseCard } from "./base-card";
+import { ResumeThumbnail } from "./resume-thumbnail";
+
+type ResumeCardProps = {
+	resume: RouterOutput["resume"]["list"][number];
+};
+
+export function ResumeCard({ resume }: ResumeCardProps) {
+	const { i18n } = useLingui();
+
+	const updatedAt = useMemo(() => {
+		return Intl.DateTimeFormat(i18n.locale, { dateStyle: "long", timeStyle: "short" }).format(resume.updatedAt);
+	}, [i18n.locale, resume.updatedAt]);
+
+	return (
+		<ResumeContextMenu resume={resume}>
+			<Link to="/builder/$resumeId" params={{ resumeId: resume.id }} className="cursor-default">
+				<motion.div
+					className="will-change-transform"
+					whileHover={{ y: -2, scale: 1.005 }}
+					whileTap={{ scale: 0.998 }}
+					transition={{ type: "spring", stiffness: 320, damping: 28 }}
+				>
+					<BaseCard title={resume.name} description={t`Last updated on ${updatedAt}`} tags={resume.tags}>
+						<ResumeThumbnail resume={resume} isLocked={resume.isLocked} />
+
+						<ResumeLockOverlay isLocked={resume.isLocked} />
+					</BaseCard>
+				</motion.div>
+			</Link>
+		</ResumeContextMenu>
+	);
+}
+
+function ResumeLockOverlay({ isLocked }: { isLocked: boolean }) {
+	return (
+		<AnimatePresence>
+			{isLocked && (
+				<motion.div
+					key="resume-lock-overlay"
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 0.6 }}
+					exit={{ opacity: 0 }}
+					transition={{ duration: 0.15 }}
+					className="absolute inset-0 flex items-center justify-center will-change-[opacity]"
+				>
+					<div className="flex items-center justify-center rounded-full bg-popover p-6">
+						<LockSimpleIcon weight="thin" className="size-12 opacity-60" />
+					</div>
+				</motion.div>
+			)}
+		</AnimatePresence>
+	);
+}
@@ -0,0 +1,26 @@
+type PageSize = {
+	height: number;
+	width: number;
+};
+
+export const RESUME_THUMBNAIL_TARGET_WIDTH = 420;
+const MAX_THUMBNAIL_PIXEL_RATIO = 2;
+
+export const getResumeThumbnailCacheKey = (resumeId: string, updatedAt: Date) => {
+	return `${resumeId}:${updatedAt.getTime()}`;
+};
+
+export const getResumeThumbnailRenderSize = (
+	pageSize: PageSize,
+	targetWidth = RESUME_THUMBNAIL_TARGET_WIDTH,
+	pixelRatio = 1,
+) => {
+	const outputScale = Math.min(Math.max(pixelRatio, 1), MAX_THUMBNAIL_PIXEL_RATIO);
+	const pageScale = targetWidth / pageSize.width;
+
+	return {
+		height: Math.round(pageSize.height * pageScale * outputScale),
+		scale: pageScale * outputScale,
+		width: Math.round(targetWidth * outputScale),
+	};
+};
@@ -0,0 +1,189 @@
+import type { ResumeData } from "@reactive-resume/schema/resume/data";
+import type { RouterOutput } from "@/libs/orpc/client";
+import { FileTextIcon } from "@phosphor-icons/react";
+import { useQuery } from "@tanstack/react-query";
+import { useInView } from "motion/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Spinner } from "@reactive-resume/ui/components/spinner";
+import { cn } from "@reactive-resume/utils/style";
+import { orpc } from "@/libs/orpc/client";
+import { createResumePdfBlob } from "@/libs/resume/pdf-document";
+import {
+	getResumeThumbnailCacheKey,
+	getResumeThumbnailRenderSize,
+	RESUME_THUMBNAIL_TARGET_WIDTH,
+} from "./resume-thumbnail.shared";
+
+type ResumeListItem = RouterOutput["resume"]["list"][number];
+
+type ThumbnailState = { status: "error" | "idle" | "loading" } | { status: "ready"; url: string };
+
+const canvasToBlob = async (canvas: HTMLCanvasElement) => {
+	return await new Promise<Blob>((resolve, reject) => {
+		canvas.toBlob((blob) => {
+			if (!blob) {
+				reject(new Error("Failed to create resume thumbnail image."));
+				return;
+			}
+
+			resolve(blob);
+		}, "image/png");
+	});
+};
+
+const createPdfFirstPageImageUrl = async (file: Blob) => {
+	const { AnnotationMode, GlobalWorkerOptions, getDocument } = await import("pdfjs-dist");
+	GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString();
+
+	const arrayBuffer = await file.arrayBuffer();
+	const loadingTask = getDocument({ data: new Uint8Array(arrayBuffer) });
+	let pdfDocument: Awaited<typeof loadingTask.promise> | undefined;
+
+	try {
+		pdfDocument = await loadingTask.promise;
+		const page = await pdfDocument.getPage(1);
+
+		try {
+			const baseViewport = page.getViewport({ scale: 1 });
+			const renderSize = getResumeThumbnailRenderSize(
+				{ height: baseViewport.height, width: baseViewport.width },
+				RESUME_THUMBNAIL_TARGET_WIDTH,
+				window.devicePixelRatio || 1,
+			);
+
+			const canvas = document.createElement("canvas");
+			const canvasContext = canvas.getContext("2d");
+
+			if (!canvasContext) throw new Error("Failed to create resume thumbnail canvas context.");
+
+			canvas.height = renderSize.height;
+			canvas.width = renderSize.width;
+
+			const viewport = page.getViewport({ scale: renderSize.scale });
+			const renderTask = page.render({
+				canvas,
+				canvasContext,
+				viewport,
+				annotationMode: AnnotationMode.DISABLE,
+				background: "white",
+			});
+
+			await renderTask.promise;
+
+			const image = await canvasToBlob(canvas);
+			return URL.createObjectURL(image);
+		} finally {
+			page.cleanup();
+		}
+	} finally {
+		if (pdfDocument) {
+			void pdfDocument.destroy();
+		} else {
+			void loadingTask.destroy();
+		}
+	}
+};
+
+function useResumeThumbnail(data: ResumeData | undefined, cacheKey: string | undefined) {
+	const [thumbnail, setThumbnail] = useState<ThumbnailState>({ status: "idle" });
+	const currentUrlRef = useRef<string | null>(null);
+
+	const revokeCurrentThumbnail = useCallback(() => {
+		if (!currentUrlRef.current) return;
+		URL.revokeObjectURL(currentUrlRef.current);
+		currentUrlRef.current = null;
+	}, []);
+
+	useEffect(() => {
+		return () => {
+			revokeCurrentThumbnail();
+		};
+	}, [revokeCurrentThumbnail]);
+
+	useEffect(() => {
+		if (!data || !cacheKey) {
+			revokeCurrentThumbnail();
+			setThumbnail({ status: "idle" });
+			return;
+		}
+
+		let isCancelled = false;
+		let nextUrl: string | null = null;
+
+		setThumbnail({ status: "loading" });
+
+		const generateThumbnail = async () => {
+			try {
+				const pdf = await createResumePdfBlob(data);
+				if (isCancelled) return;
+
+				nextUrl = await createPdfFirstPageImageUrl(pdf);
+				if (isCancelled) {
+					URL.revokeObjectURL(nextUrl);
+					nextUrl = null;
+					return;
+				}
+
+				revokeCurrentThumbnail();
+				currentUrlRef.current = nextUrl;
+				setThumbnail({ status: "ready", url: nextUrl });
+				nextUrl = null;
+			} catch (error) {
+				if (isCancelled) return;
+
+				console.error("Failed to generate resume thumbnail", error);
+				revokeCurrentThumbnail();
+				setThumbnail({ status: "error" });
+			}
+		};
+
+		void generateThumbnail();
+
+		return () => {
+			isCancelled = true;
+
+			if (nextUrl) {
+				URL.revokeObjectURL(nextUrl);
+			}
+		};
+	}, [data, cacheKey, revokeCurrentThumbnail]);
+
+	return thumbnail;
+}
+
+export function ResumeThumbnail({ isLocked, resume }: { isLocked: boolean; resume: ResumeListItem }) {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const isInView = useInView(containerRef, { amount: 0.1, margin: "240px", once: true });
+	const resumeQuery = useQuery({
+		...orpc.resume.getById.queryOptions({ input: { id: resume.id } }),
+		enabled: isInView,
+	});
+	const thumbnail = useResumeThumbnail(
+		resumeQuery.data?.data,
+		isInView ? getResumeThumbnailCacheKey(resume.id, resume.updatedAt) : undefined,
+	);
+	const hasFailed = resumeQuery.isError || thumbnail.status === "error";
+
+	return (
+		<div
+			ref={containerRef}
+			className={cn("relative size-full overflow-hidden bg-muted/40 transition-all", isLocked && "blur-xs")}
+		>
+			{thumbnail.status === "ready" ? (
+				<div
+					aria-hidden
+					className="absolute inset-0 bg-center bg-contain bg-white bg-no-repeat"
+					style={{ backgroundImage: `url(${thumbnail.url})` }}
+				/>
+			) : hasFailed ? (
+				<div className="absolute inset-0 flex items-center justify-center">
+					<FileTextIcon weight="thin" className="size-12 opacity-40" />
+				</div>
+			) : (
+				<div className="absolute inset-0 flex items-center justify-center">
+					<Spinner className="size-8 text-muted-foreground" />
+				</div>
+			)}
+		</div>
+	);
+}
@@ -0,0 +1,57 @@
+import type { RouterOutput } from "@/libs/orpc/client";
+import { AnimatePresence, motion } from "motion/react";
+import { CreateResumeCard } from "./cards/create-card";
+import { ImportResumeCard } from "./cards/import-card";
+import { ResumeCard } from "./cards/resume-card";
+
+type Resume = RouterOutput["resume"]["list"][number];
+
+type Props = {
+	resumes: Resume[];
+};
+
+export function GridView({ resumes }: Props) {
+	return (
+		<div className="grid 3xl:grid-cols-6 grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+			<motion.div
+				initial={{ opacity: 0, y: -20 }}
+				animate={{ opacity: 1, y: 0 }}
+				exit={{ opacity: 0, y: -20 }}
+				transition={{ duration: 0.2, ease: "easeOut" }}
+				className="will-change-[transform,opacity]"
+			>
+				<CreateResumeCard />
+			</motion.div>
+
+			<motion.div
+				initial={{ opacity: 0, y: -20 }}
+				animate={{ opacity: 1, y: 0 }}
+				exit={{ opacity: 0, y: -20 }}
+				transition={{ duration: 0.2, delay: 0.03, ease: "easeOut" }}
+				className="will-change-[transform,opacity]"
+			>
+				<ImportResumeCard />
+			</motion.div>
+
+			<AnimatePresence initial={false} mode="popLayout">
+				{resumes?.map((resume, index) => (
+					<motion.div
+						layout
+						key={resume.id}
+						initial={{ opacity: 0, y: -20 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{
+							opacity: 0,
+							y: -20,
+							filter: "blur(8px)",
+						}}
+						transition={{ duration: 0.2, delay: Math.min(0.12, (index + 2) * 0.02), ease: "easeOut" }}
+						className="will-change-[transform,opacity]"
+					>
+						<ResumeCard resume={resume} />
+					</motion.div>
+				))}
+			</AnimatePresence>
+		</div>
+	);
+}
@@ -0,0 +1,132 @@
+import type { RouterOutput } from "@/libs/orpc/client";
+import { useLingui } from "@lingui/react";
+import { Trans } from "@lingui/react/macro";
+import { DotsThreeIcon, DownloadSimpleIcon, PlusIcon } from "@phosphor-icons/react";
+import { Link } from "@tanstack/react-router";
+import { AnimatePresence, motion } from "motion/react";
+import { useMemo } from "react";
+import { Button } from "@reactive-resume/ui/components/button";
+import { useDialogStore } from "@/dialogs/store";
+import { ResumeDropdownMenu } from "./menus/dropdown-menu";
+
+type Resume = RouterOutput["resume"]["list"][number];
+
+type Props = {
+	resumes: Resume[];
+};
+
+export function ListView({ resumes }: Props) {
+	const { openDialog } = useDialogStore();
+
+	const handleCreateResume = () => {
+		openDialog("resume.create", undefined);
+	};
+
+	const handleImportResume = () => {
+		openDialog("resume.import", undefined);
+	};
+
+	return (
+		<div className="flex flex-col gap-y-1">
+			<motion.div
+				className="will-change-[transform,opacity]"
+				initial={{ opacity: 0, y: -20 }}
+				animate={{ opacity: 1, y: 0 }}
+				exit={{ opacity: 0, y: -20 }}
+				transition={{ duration: 0.2, ease: "easeOut" }}
+			>
+				<Button
+					size="lg"
+					variant="ghost"
+					className="h-12 w-full justify-start gap-x-4 text-start"
+					onClick={handleCreateResume}
+				>
+					<PlusIcon />
+					<div className="min-w-80 truncate">
+						<Trans>Create a new resume</Trans>
+					</div>
+
+					<p className="text-xs opacity-60">
+						<Trans>Start building your resume from scratch</Trans>
+					</p>
+				</Button>
+			</motion.div>
+
+			<motion.div
+				className="will-change-[transform,opacity]"
+				initial={{ opacity: 0, y: -20 }}
+				animate={{ opacity: 1, y: 0 }}
+				exit={{ opacity: 0, y: -20 }}
+				transition={{ duration: 0.2, delay: 0.03, ease: "easeOut" }}
+			>
+				<Button
+					size="lg"
+					variant="ghost"
+					className="h-12 w-full justify-start gap-x-4 text-start"
+					onClick={handleImportResume}
+				>
+					<DownloadSimpleIcon />
+
+					<div className="min-w-80 truncate">
+						<Trans>Import an existing resume</Trans>
+					</div>
+
+					<p className="text-xs opacity-60">
+						<Trans>Continue where you left off</Trans>
+					</p>
+				</Button>
+			</motion.div>
+
+			<AnimatePresence initial={false} mode="popLayout">
+				{resumes?.map((resume, index) => (
+					<motion.div
+						layout
+						key={resume.id}
+						className="will-change-[transform,opacity]"
+						initial={{ opacity: 0, y: -20 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: -20 }}
+						transition={{ duration: 0.18, delay: Math.min(0.12, (index + 2) * 0.02), ease: "easeOut" }}
+					>
+						<ResumeListItem resume={resume} />
+					</motion.div>
+				))}
+			</AnimatePresence>
+		</div>
+	);
+}
+
+function ResumeListItem({ resume }: { resume: Resume }) {
+	const { i18n } = useLingui();
+
+	const updatedAt = useMemo(() => {
+		return Intl.DateTimeFormat(i18n.locale, { dateStyle: "long", timeStyle: "short" }).format(resume.updatedAt);
+	}, [i18n.locale, resume.updatedAt]);
+
+	return (
+		<div className="flex items-center gap-x-2">
+			<Button
+				size="lg"
+				variant="ghost"
+				nativeButton={false}
+				className="h-12 w-full flex-1 justify-start gap-x-4 text-start"
+				render={
+					<Link to="/builder/$resumeId" params={{ resumeId: resume.id }}>
+						<div className="size-3" />
+						<div className="min-w-80 truncate">{resume.name}</div>
+
+						<p className="text-xs opacity-60">
+							<Trans>Last updated on {updatedAt}</Trans>
+						</p>
+					</Link>
+				}
+			/>
+
+			<ResumeDropdownMenu resume={resume} align="end">
+				<Button size="icon" variant="ghost" className="size-12">
+					<DotsThreeIcon />
+				</Button>
+			</ResumeDropdownMenu>
+		</div>
+	);
+}
@@ -0,0 +1,132 @@
+import type { RouterOutput } from "@/libs/orpc/client";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import {
+	CopySimpleIcon,
+	FolderOpenIcon,
+	LockSimpleIcon,
+	LockSimpleOpenIcon,
+	PencilSimpleLineIcon,
+	TrashSimpleIcon,
+} from "@phosphor-icons/react";
+import { useMutation } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { toast } from "sonner";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuTrigger,
+} from "@reactive-resume/ui/components/context-menu";
+import { useDialogStore } from "@/dialogs/store";
+import { useConfirm } from "@/hooks/use-confirm";
+import { getResumeErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+
+type Props = {
+	resume: RouterOutput["resume"]["list"][number];
+	children: React.ComponentProps<typeof ContextMenuTrigger>["render"];
+};
+
+export function ResumeContextMenu({ resume, children }: Props) {
+	const confirm = useConfirm();
+	const { openDialog } = useDialogStore();
+
+	const { mutate: deleteResume } = useMutation(orpc.resume.delete.mutationOptions());
+	const { mutate: setLockedResume } = useMutation(orpc.resume.setLocked.mutationOptions());
+
+	const handleUpdate = () => {
+		openDialog("resume.update", resume);
+	};
+
+	const handleDuplicate = () => {
+		openDialog("resume.duplicate", resume);
+	};
+
+	const handleToggleLock = async () => {
+		if (!resume.isLocked) {
+			const confirmation = await confirm(t`Are you sure you want to lock this resume?`, {
+				description: t`When locked, the resume cannot be updated or deleted.`,
+			});
+
+			if (!confirmation) return;
+		}
+
+		setLockedResume(
+			{ id: resume.id, isLocked: !resume.isLocked },
+			{
+				onError: (error) => {
+					toast.error(getResumeErrorMessage(error));
+				},
+			},
+		);
+	};
+
+	const handleDelete = async () => {
+		const confirmation = await confirm(t`Are you sure you want to delete this resume?`, {
+			description: t`This action cannot be undone.`,
+		});
+
+		if (!confirmation) return;
+
+		const toastId = toast.loading(t`Deleting your resume...`);
+
+		deleteResume(
+			{ id: resume.id },
+			{
+				onSuccess: () => {
+					toast.success(t`Your resume has been deleted successfully.`, { id: toastId });
+				},
+				onError: (error) => {
+					toast.error(getResumeErrorMessage(error), { id: toastId });
+				},
+			},
+		);
+	};
+
+	return (
+		<ContextMenu>
+			<ContextMenuTrigger render={children} />
+
+			<ContextMenuContent>
+				<ContextMenuItem
+					render={
+						<Link to="/builder/$resumeId" params={{ resumeId: resume.id }}>
+							<FolderOpenIcon />
+							<Trans comment="Resume card context menu action to open the resume editor">Open</Trans>
+						</Link>
+					}
+				/>
+
+				<ContextMenuSeparator />
+
+				<ContextMenuItem disabled={resume.isLocked} onClick={handleUpdate}>
+					<PencilSimpleLineIcon />
+					<Trans comment="Resume card context menu action to edit resume metadata">Update</Trans>
+				</ContextMenuItem>
+
+				<ContextMenuItem onClick={handleDuplicate}>
+					<CopySimpleIcon />
+					<Trans comment="Resume card context menu action to create a copy">Duplicate</Trans>
+				</ContextMenuItem>
+
+				<ContextMenuItem onClick={handleToggleLock}>
+					{resume.isLocked ? <LockSimpleOpenIcon /> : <LockSimpleIcon />}
+					{resume.isLocked ? (
+						<Trans comment="Resume card context menu action to remove edit lock">Unlock</Trans>
+					) : (
+						<Trans comment="Resume card context menu action to prevent edits">Lock</Trans>
+					)}
+				</ContextMenuItem>
+
+				<ContextMenuSeparator />
+
+				<ContextMenuItem variant="destructive" disabled={resume.isLocked} onClick={handleDelete}>
+					<TrashSimpleIcon />
+					<Trans comment="Resume card context menu destructive action to remove a resume">Delete</Trans>
+				</ContextMenuItem>
+			</ContextMenuContent>
+		</ContextMenu>
+	);
+}
@@ -0,0 +1,130 @@
+import type { RouterOutput } from "@/libs/orpc/client";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import {
+	CopySimpleIcon,
+	FolderOpenIcon,
+	LockSimpleIcon,
+	LockSimpleOpenIcon,
+	PencilSimpleLineIcon,
+	TrashSimpleIcon,
+} from "@phosphor-icons/react";
+import { useMutation } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { toast } from "sonner";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@reactive-resume/ui/components/dropdown-menu";
+import { useDialogStore } from "@/dialogs/store";
+import { useConfirm } from "@/hooks/use-confirm";
+import { getResumeErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+
+type Props = Omit<React.ComponentProps<typeof DropdownMenuContent>, "children"> & {
+	resume: RouterOutput["resume"]["list"][number];
+	children: React.ComponentProps<typeof DropdownMenuTrigger>["render"];
+};
+
+export function ResumeDropdownMenu({ resume, children, ...props }: Props) {
+	const confirm = useConfirm();
+	const { openDialog } = useDialogStore();
+
+	const { mutate: deleteResume } = useMutation(orpc.resume.delete.mutationOptions());
+	const { mutate: setLockedResume } = useMutation(orpc.resume.setLocked.mutationOptions());
+
+	const handleUpdate = () => {
+		openDialog("resume.update", resume);
+	};
+
+	const handleDuplicate = () => {
+		openDialog("resume.duplicate", resume);
+	};
+
+	const handleToggleLock = async () => {
+		if (!resume.isLocked) {
+			const confirmation = await confirm(t`Are you sure you want to lock this resume?`, {
+				description: t`When locked, the resume cannot be updated or deleted.`,
+			});
+
+			if (!confirmation) return;
+		}
+
+		setLockedResume(
+			{ id: resume.id, isLocked: !resume.isLocked },
+			{
+				onError: (error) => {
+					toast.error(getResumeErrorMessage(error));
+				},
+			},
+		);
+	};
+
+	const handleDelete = async () => {
+		const confirmation = await confirm(t`Are you sure you want to delete this resume?`, {
+			description: t`This action cannot be undone.`,
+		});
+
+		if (!confirmation) return;
+
+		const toastId = toast.loading(t`Deleting your resume...`);
+
+		deleteResume(
+			{ id: resume.id },
+			{
+				onSuccess: () => {
+					toast.success(t`Your resume has been deleted successfully.`, { id: toastId });
+				},
+				onError: (error) => {
+					toast.error(getResumeErrorMessage(error), { id: toastId });
+				},
+			},
+		);
+	};
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger render={children} />
+
+			<DropdownMenuContent {...props}>
+				<Link to="/builder/$resumeId" params={{ resumeId: resume.id }}>
+					<DropdownMenuItem>
+						<FolderOpenIcon />
+						<Trans comment="Resume card dropdown action to open the resume editor">Open</Trans>
+					</DropdownMenuItem>
+				</Link>
+
+				<DropdownMenuSeparator />
+
+				<DropdownMenuItem disabled={resume.isLocked} onClick={handleUpdate}>
+					<PencilSimpleLineIcon />
+					<Trans comment="Resume card dropdown action to edit resume metadata">Update</Trans>
+				</DropdownMenuItem>
+
+				<DropdownMenuItem onClick={handleDuplicate}>
+					<CopySimpleIcon />
+					<Trans comment="Resume card dropdown action to create a copy">Duplicate</Trans>
+				</DropdownMenuItem>
+
+				<DropdownMenuItem onClick={handleToggleLock}>
+					{resume.isLocked ? <LockSimpleOpenIcon /> : <LockSimpleIcon />}
+					{resume.isLocked ? (
+						<Trans comment="Resume card dropdown action to remove edit lock">Unlock</Trans>
+					) : (
+						<Trans comment="Resume card dropdown action to prevent edits">Lock</Trans>
+					)}
+				</DropdownMenuItem>
+
+				<DropdownMenuSeparator />
+
+				<DropdownMenuItem variant="destructive" disabled={resume.isLocked} onClick={handleDelete}>
+					<TrashSimpleIcon />
+					<Trans comment="Resume card dropdown destructive action to remove a resume">Delete</Trans>
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
@@ -0,0 +1,122 @@
+import { t } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
+import { Trans } from "@lingui/react/macro";
+import { GridFourIcon, ListIcon, ReadCvLogoIcon } from "@phosphor-icons/react";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, Link, stripSearchParams, useNavigate } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { useMemo } from "react";
+import z from "zod";
+import { Label } from "@reactive-resume/ui/components/label";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { Tabs, TabsList, TabsTrigger } from "@reactive-resume/ui/components/tabs";
+import { cn } from "@reactive-resume/utils/style";
+import { Combobox } from "@/components/ui/combobox";
+import { orpc } from "@/libs/orpc/client";
+import { DashboardHeader } from "../-components/header";
+import { GridView } from "./-components/grid-view";
+import { ListView } from "./-components/list-view";
+
+type SortOption = "lastUpdatedAt" | "createdAt" | "name";
+
+const searchSchema = z.object({
+	tags: z.array(z.string()).default([]),
+	sort: z.enum(["lastUpdatedAt", "createdAt", "name"]).default("lastUpdatedAt"),
+	view: z.enum(["grid", "list"]).default("grid"),
+});
+
+export const Route = createFileRoute("/dashboard/resumes/")({
+	component: RouteComponent,
+	validateSearch: zodValidator(searchSchema),
+	search: {
+		middlewares: [stripSearchParams({ tags: [], sort: "lastUpdatedAt", view: "grid" })],
+	},
+});
+
+function RouteComponent() {
+	const { i18n } = useLingui();
+	const { tags, sort, view } = Route.useSearch();
+	const navigate = useNavigate({ from: Route.fullPath });
+
+	const { data: allTags } = useQuery(orpc.resume.tags.list.queryOptions());
+	const { data: resumes } = useQuery(orpc.resume.list.queryOptions({ input: { tags, sort } }));
+
+	const tagOptions = useMemo(() => {
+		if (!allTags) return [];
+		return allTags.map((tag) => ({ value: tag, label: tag }));
+	}, [allTags]);
+
+	const sortOptions = useMemo(() => {
+		return [
+			{ value: "lastUpdatedAt", label: i18n.t("Last Updated") },
+			{ value: "createdAt", label: i18n.t("Created") },
+			{ value: "name", label: i18n.t("Name") },
+		];
+	}, [i18n]);
+
+	return (
+		<div className="space-y-4">
+			<DashboardHeader icon={ReadCvLogoIcon} title={t`Resumes`} />
+
+			<Separator />
+
+			<div className="flex items-center gap-x-4">
+				<div className="flex gap-2">
+					<Label>
+						<Trans>Sort by</Trans>
+					</Label>
+					<Combobox
+						value={sort}
+						options={sortOptions}
+						placeholder={t`Sort by`}
+						onValueChange={(value) => {
+							if (!value) return;
+							void navigate({ search: { tags, sort: value as SortOption } });
+						}}
+					/>
+				</div>
+
+				<div className={cn("flex gap-2", { hidden: tagOptions.length === 0 })}>
+					<Label>
+						<Trans>Filter by</Trans>
+					</Label>
+					<Combobox
+						multiple
+						value={tags}
+						options={tagOptions}
+						placeholder={t`Filter by`}
+						onValueChange={(value) => {
+							void navigate({ search: { tags: value ?? [], sort } });
+						}}
+					/>
+				</div>
+
+				<Tabs className="ltr:ms-auto rtl:me-auto" value={view}>
+					<TabsList>
+						<TabsTrigger
+							value="grid"
+							nativeButton={false}
+							className="rounded-r-none"
+							render={<Link to="." search={{ view: "grid" }} />}
+						>
+							<GridFourIcon />
+							<Trans>Grid</Trans>
+						</TabsTrigger>
+
+						<TabsTrigger
+							value="list"
+							nativeButton={false}
+							className="rounded-l-none"
+							render={<Link to="." search={{ view: "list" }} />}
+						>
+							<ListIcon />
+							<Trans>List</Trans>
+						</TabsTrigger>
+					</TabsList>
+				</Tabs>
+			</div>
+
+			{view === "list" ? <ListView resumes={resumes ?? []} /> : <GridView resumes={resumes ?? []} />}
+		</div>
+	);
+}
@@ -0,0 +1,36 @@
+import { createFileRoute, Outlet, redirect, useRouter } from "@tanstack/react-router";
+import { SidebarProvider } from "@reactive-resume/ui/components/sidebar";
+import { getDashboardSidebarServerFn, setDashboardSidebarServerFn } from "./-components/functions";
+import { DashboardSidebar } from "./-components/sidebar";
+
+export const Route = createFileRoute("/dashboard")({
+	component: RouteComponent,
+	beforeLoad: async ({ context }) => {
+		if (!context.session) throw redirect({ to: "/auth/login", replace: true });
+		return { session: context.session };
+	},
+	loader: async () => {
+		const sidebarState = await getDashboardSidebarServerFn();
+		return { sidebarState };
+	},
+});
+
+function RouteComponent() {
+	const router = useRouter();
+	const { sidebarState } = Route.useLoaderData();
+
+	const handleSidebarOpenChange = async (open: boolean) => {
+		await setDashboardSidebarServerFn({ data: open });
+		void router.invalidate();
+	};
+
+	return (
+		<SidebarProvider open={sidebarState} onOpenChange={handleSidebarOpenChange}>
+			<DashboardSidebar />
+
+			<main className="@container flex-1 p-4 md:ps-2">
+				<Outlet />
+			</main>
+		</SidebarProvider>
+	);
+}
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashboard/settings/ai")({
+	beforeLoad: () => {
+		throw redirect({ to: "/dashboard/settings/integrations", replace: true });
+	},
+});
@@ -0,0 +1,164 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { BookOpenIcon, KeyIcon, LinkSimpleIcon, PlusIcon, TrashSimpleIcon } from "@phosphor-icons/react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { AnimatePresence, motion } from "motion/react";
+import { toast } from "sonner";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { useDialogStore } from "@/dialogs/store";
+import { useConfirm } from "@/hooks/use-confirm";
+import { authClient } from "@/libs/auth/client";
+import { getReadableErrorMessage } from "@/libs/error-message";
+import { DashboardHeader } from "../-components/header";
+
+export const Route = createFileRoute("/dashboard/settings/api-keys")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const confirm = useConfirm();
+	const queryClient = useQueryClient();
+	const openDialog = useDialogStore((state) => state.openDialog);
+
+	const { data: apiKeys = [] } = useQuery({
+		queryKey: ["auth", "api-keys"],
+		queryFn: () => authClient.apiKey.list(),
+		select: ({ data }) => {
+			if (!data) return [];
+
+			return data.apiKeys
+				.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
+				.filter((key) => !!key.expiresAt && key.expiresAt.getTime() > Date.now());
+		},
+	});
+
+	const onDelete = async (id: string) => {
+		const confirmation = await confirm(t`Are you sure you want to delete this API key?`, {
+			description: t`The API key will no longer be able to access your data after deletion. This action cannot be undone.`,
+			confirmText: t({
+				comment: "API key deletion confirmation dialog confirm action in settings",
+				message: "Delete",
+			}),
+			cancelText: t({
+				comment: "API key deletion confirmation dialog cancel action in settings",
+				message: "Cancel",
+			}),
+		});
+
+		if (!confirmation) return;
+
+		const toastId = toast.loading(t`Deleting your API key...`);
+
+		const { error } = await authClient.apiKey.delete({ keyId: id });
+
+		if (error) {
+			toast.error(
+				getReadableErrorMessage(
+					error,
+					t({
+						comment: "Fallback toast when deleting an API key fails",
+						message: "Failed to delete the API key. Please try again.",
+					}),
+				),
+				{ id: toastId },
+			);
+			return;
+		}
+
+		toast.success(t`The API key has been deleted successfully.`, { id: toastId });
+		void queryClient.invalidateQueries({ queryKey: ["auth", "api-keys"] });
+	};
+
+	return (
+		<div className="space-y-4">
+			<DashboardHeader icon={KeyIcon} title={t`API Keys`} />
+
+			<Separator />
+
+			<motion.div
+				initial={{ opacity: 0, y: -20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.25, ease: "easeOut" }}
+				className="grid max-w-xl gap-6 will-change-[transform,opacity]"
+			>
+				<div className="flex items-start gap-4 rounded-md border bg-popover p-6">
+					<div className="rounded-md bg-primary/10 p-2.5">
+						<BookOpenIcon className="text-primary" size={24} />
+					</div>
+
+					<div className="flex-1 space-y-2">
+						<h3 className="font-semibold">
+							<Trans>How do I use the API?</Trans>
+						</h3>
+
+						<p className="text-muted-foreground leading-relaxed">
+							<Trans>
+								Explore the API documentation to learn how to integrate Reactive Resume with your applications. Find
+								detailed endpoints, request examples, and authentication methods.
+							</Trans>
+						</p>
+
+						<Button
+							variant="link"
+							nativeButton={false}
+							render={
+								<a href="https://docs.rxresu.me/api-reference" target="_blank" rel="noopener noreferrer">
+									<LinkSimpleIcon />
+									<Trans>API Reference</Trans>
+								</a>
+							}
+						/>
+					</div>
+				</div>
+
+				<Separator />
+
+				<div>
+					<Button
+						variant="outline"
+						className="h-auto w-full py-3"
+						onClick={() => openDialog("api-key.create", undefined)}
+					>
+						<PlusIcon />
+						<Trans>Create a new API key</Trans>
+					</Button>
+
+					<AnimatePresence initial={false} mode="popLayout">
+						{apiKeys.map((key, index) => (
+							<motion.div
+								key={key.id}
+								className="flex items-center gap-x-4 py-4 will-change-[transform,opacity]"
+								initial={{ opacity: 0, y: -16 }}
+								animate={{ opacity: 1, y: 0 }}
+								exit={{ opacity: 0, y: -16 }}
+								transition={{ duration: 0.16, delay: Math.min(0.12, index * 0.04) }}
+							>
+								<KeyIcon />
+
+								<div className="flex-1 space-y-1">
+									<p className="font-mono text-xs">{key.start}...</p>
+									<div className="text-muted-foreground text-xs">
+										<Trans>Expires on {key.expiresAt?.toLocaleDateString()}</Trans>
+									</div>
+								</div>
+
+								<motion.div
+									className="will-change-transform"
+									whileHover={{ y: -1, scale: 1.03 }}
+									whileTap={{ scale: 0.96 }}
+									transition={{ duration: 0.14, ease: "easeOut" }}
+								>
+									<Button size="icon" variant="ghost" onClick={() => onDelete(key.id)}>
+										<TrashSimpleIcon />
+									</Button>
+								</motion.div>
+							</motion.div>
+						))}
+					</AnimatePresence>
+				</div>
+			</motion.div>
+		</div>
+	);
+}
@@ -0,0 +1,166 @@
+import type { AuthProvider } from "@reactive-resume/auth/types";
+import type { ReactNode } from "react";
+import { t } from "@lingui/core/macro";
+import {
+	FingerprintIcon,
+	GithubLogoIcon,
+	GoogleLogoIcon,
+	LinkedinLogoIcon,
+	PasswordIcon,
+	VaultIcon,
+} from "@phosphor-icons/react";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { toast } from "sonner";
+import { match } from "ts-pattern";
+import { authClient } from "@/libs/auth/client";
+import { getReadableErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+
+/**
+ * Get the display name for a social provider
+ */
+export function getProviderName(providerId: AuthProvider): string {
+	return match(providerId)
+		.with("credential", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "Password",
+			}),
+		)
+		.with("passkey", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "Passkey",
+			}),
+		)
+		.with("google", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "Google",
+			}),
+		)
+		.with("github", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "GitHub",
+			}),
+		)
+		.with("linkedin", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "LinkedIn",
+			}),
+		)
+		.with("custom", () =>
+			t({
+				comment: "Authentication provider display name in account settings",
+				message: "Custom OAuth",
+			}),
+		)
+		.exhaustive();
+}
+
+/**
+ * Get the icon component for a social provider
+ */
+export function getProviderIcon(providerId: AuthProvider): ReactNode {
+	return match(providerId)
+		.with("credential", () => <PasswordIcon />)
+		.with("passkey", () => <FingerprintIcon />)
+		.with("google", () => <GoogleLogoIcon />)
+		.with("github", () => <GithubLogoIcon />)
+		.with("linkedin", () => <LinkedinLogoIcon />)
+		.with("custom", () => <VaultIcon />)
+		.exhaustive();
+}
+
+/**
+ * Hook to fetch and manage authentication accounts
+ */
+export function useAuthAccounts() {
+	const { data: accounts } = useQuery({
+		queryKey: ["auth", "accounts"],
+		queryFn: () => authClient.listAccounts(),
+		select: ({ data }) => data ?? [],
+	});
+
+	const getAccountByProviderId = useCallback(
+		(providerId: string) => accounts?.find((account) => account.providerId === providerId),
+		[accounts],
+	);
+
+	const hasAccount = useCallback(
+		(providerId: string) => !!getAccountByProviderId(providerId),
+		[getAccountByProviderId],
+	);
+
+	return {
+		accounts,
+		hasAccount,
+		getAccountByProviderId,
+	};
+}
+
+/**
+ * Hook to manage authentication provider linking/unlinking
+ */
+export function useAuthProviderActions() {
+	const link = useCallback(async (provider: AuthProvider) => {
+		const providerName = getProviderName(provider);
+		const toastId = toast.loading(t`Linking your ${providerName} account...`);
+
+		const { error } = await authClient.linkSocial({ provider, callbackURL: "/dashboard/settings/authentication" });
+
+		if (error) {
+			toast.error(
+				getReadableErrorMessage(
+					error,
+					t({
+						comment: "Fallback toast when linking a social authentication provider fails",
+						message: "Failed to link provider. Please try again.",
+					}),
+				),
+				{ id: toastId },
+			);
+			return;
+		}
+
+		toast.dismiss(toastId);
+	}, []);
+
+	const unlink = useCallback(async (provider: AuthProvider, accountId: string) => {
+		const providerName = getProviderName(provider);
+		const toastId = toast.loading(t`Unlinking your ${providerName} account...`);
+
+		const { error } = await authClient.unlinkAccount({ providerId: provider, accountId });
+
+		if (error) {
+			toast.error(
+				getReadableErrorMessage(
+					error,
+					t({
+						comment: "Fallback toast when unlinking a social authentication provider fails",
+						message: "Failed to unlink provider. Please try again.",
+					}),
+				),
+				{ id: toastId },
+			);
+			return;
+		}
+
+		toast.dismiss(toastId);
+	}, []);
+
+	return { link, unlink };
+}
+
+/**
+ * Hook to get enabled social providers for the current user
+ * Possible values: "credential", "google", "github", "linkedin", "custom"
+ */
+export function useEnabledProviders() {
+	const { data: enabledProviders = [] } = useQuery(orpc.auth.providers.list.queryOptions());
+
+	return { enabledProviders };
+}
@@ -0,0 +1,172 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { KeyIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { motion } from "motion/react";
+import { toast } from "sonner";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { usePrompt } from "@/hooks/use-prompt";
+import { authClient } from "@/libs/auth/client";
+import { getReadableErrorMessage } from "@/libs/error-message";
+
+export function PasskeysSection() {
+	const queryClient = useQueryClient();
+	const prompt = usePrompt();
+
+	const { data: passkeys = [] } = useQuery({
+		queryKey: ["auth", "passkeys"],
+		queryFn: () => authClient.passkey.listUserPasskeys(),
+		select: ({ data }) => data ?? [],
+	});
+
+	const registerPasskeyMutation = useMutation({
+		mutationFn: async () => {
+			return await authClient.passkey.addPasskey();
+		},
+		onSuccess: async ({ data, error }) => {
+			if (error) {
+				toast.error(
+					getReadableErrorMessage(
+						error,
+						t({
+							comment: "Fallback toast when passkey registration fails",
+							message: "Failed to register passkey. Please try again.",
+						}),
+					),
+				);
+				return;
+			}
+
+			toast.success(t`Passkey registered successfully.`);
+			await queryClient.invalidateQueries({ queryKey: ["auth", "passkeys"] });
+
+			const name = await prompt(t`Enter a name for your passkey.`, {
+				description: t`This will help you identify it later, if you plan to have multiple passkeys.`,
+				defaultValue: "",
+				confirmText: t({
+					comment: "Passkey rename prompt confirm action in authentication settings",
+					message: "Save",
+				}),
+			});
+			if (name === null) return;
+
+			const passkeyId = typeof data?.id === "string" ? data.id : null;
+			const passkeyName = name.trim();
+			if (!passkeyId || passkeyName.length === 0) return;
+
+			const { error: renameError } = await authClient.passkey.updatePasskey({ id: passkeyId, name: passkeyName });
+			if (renameError) {
+				toast.error(
+					getReadableErrorMessage(
+						renameError,
+						t({
+							comment: "Fallback toast when renaming a passkey fails",
+							message: "Failed to rename passkey. Please try again.",
+						}),
+					),
+				);
+				return;
+			}
+
+			await queryClient.invalidateQueries({ queryKey: ["auth", "passkeys"] });
+		},
+		onError: () => {
+			toast.error(t`Failed to register passkey. Please try again.`);
+		},
+	});
+
+	const deletePasskeyMutation = useMutation({
+		mutationFn: async (id: string) => {
+			return await authClient.passkey.deletePasskey({ id });
+		},
+		onSuccess: async ({ error }) => {
+			if (error) {
+				toast.error(
+					getReadableErrorMessage(
+						error,
+						t({
+							comment: "Fallback toast when deleting a passkey fails",
+							message: "Failed to delete passkey. Please try again.",
+						}),
+					),
+				);
+				return;
+			}
+
+			toast.success(t`Passkey deleted successfully.`);
+			await queryClient.invalidateQueries({ queryKey: ["auth", "passkeys"] });
+		},
+		onError: () => {
+			toast.error(t`Failed to delete passkey. Please try again.`);
+		},
+	});
+
+	const handleRegisterPasskey = () => {
+		if (registerPasskeyMutation.isPending) return;
+		registerPasskeyMutation.mutate();
+	};
+
+	const handleDeletePasskey = (id: string) => {
+		if (deletePasskeyMutation.isPending) return;
+		deletePasskeyMutation.mutate(id);
+	};
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.2, delay: 0.3, ease: "easeOut" }}
+			className="will-change-[transform,opacity]"
+		>
+			<Separator />
+
+			<div className="mt-4 grid gap-3">
+				<div className="flex flex-wrap items-center justify-between gap-3">
+					<h2 className="flex items-center gap-x-3 font-medium text-base">
+						<KeyIcon />
+						<Trans>Passkeys</Trans>
+					</h2>
+
+					<Button variant="outline" onClick={handleRegisterPasskey} disabled={registerPasskeyMutation.isPending}>
+						<PlusIcon />
+						<Trans>Register New Device</Trans>
+					</Button>
+				</div>
+
+				{passkeys.length === 0 && (
+					<p className="text-muted-foreground text-sm">
+						<Trans>No passkeys registered yet.</Trans>
+					</p>
+				)}
+
+				{passkeys.length > 0 && (
+					<div className="grid gap-2">
+						{passkeys.map((passkey) => {
+							return (
+								<div
+									key={passkey.id}
+									className="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/40 px-3 py-2"
+								>
+									<p className="truncate font-medium text-sm">{passkey.name ?? t`Unnamed passkey`}</p>
+
+									<div className="flex items-center gap-2">
+										<Button
+											variant="destructive"
+											size="sm"
+											onClick={() => handleDeletePasskey(passkey.id)}
+											disabled={deletePasskeyMutation.isPending}
+										>
+											<TrashIcon />
+											<Trans comment="Passkey row action to remove the selected passkey">Delete</Trans>
+										</Button>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</div>
+		</motion.div>
+	);
+}
@@ -0,0 +1,73 @@
+import { Trans } from "@lingui/react/macro";
+import { PasswordIcon, PencilSimpleLineIcon } from "@phosphor-icons/react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { motion } from "motion/react";
+import { useCallback, useMemo } from "react";
+import { match } from "ts-pattern";
+import { Button } from "@reactive-resume/ui/components/button";
+import { useDialogStore } from "@/dialogs/store";
+import { useAuthAccounts } from "./hooks";
+
+export function PasswordSection() {
+	const navigate = useNavigate();
+	const { openDialog } = useDialogStore();
+	const { hasAccount } = useAuthAccounts();
+
+	const hasPassword = useMemo(() => hasAccount("credential"), [hasAccount]);
+
+	const handleUpdatePassword = useCallback(() => {
+		if (hasPassword) {
+			openDialog("auth.change-password", undefined);
+		} else {
+			void navigate({ to: "/auth/forgot-password" });
+		}
+	}, [hasPassword, navigate, openDialog]);
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.2, delay: 0.1, ease: "easeOut" }}
+			className="flex items-center justify-between gap-x-4 will-change-[transform,opacity]"
+		>
+			<h2 className="flex items-center gap-x-3 font-medium text-base">
+				<PasswordIcon />
+				<Trans>Password</Trans>
+			</h2>
+
+			{match(hasPassword)
+				.with(true, () => (
+					<motion.div
+						className="will-change-transform"
+						whileHover={{ y: -1, scale: 1.01 }}
+						whileTap={{ scale: 0.99 }}
+						transition={{ duration: 0.14, ease: "easeOut" }}
+					>
+						<Button variant="outline" onClick={handleUpdatePassword}>
+							<PencilSimpleLineIcon />
+							<Trans>Update Password</Trans>
+						</Button>
+					</motion.div>
+				))
+				.with(false, () => (
+					<motion.div
+						className="will-change-transform"
+						whileHover={{ y: -1, scale: 1.01 }}
+						whileTap={{ scale: 0.99 }}
+						transition={{ duration: 0.14, ease: "easeOut" }}
+					>
+						<Button
+							variant="outline"
+							nativeButton={false}
+							render={
+								<Link to="/auth/forgot-password">
+									<Trans>Set Password</Trans>
+								</Link>
+							}
+						/>
+					</motion.div>
+				))
+				.exhaustive()}
+		</motion.div>
+	);
+}
@@ -0,0 +1,84 @@
+import type { AuthProvider } from "@reactive-resume/auth/types";
+import { Trans } from "@lingui/react/macro";
+import { LinkBreakIcon, LinkIcon } from "@phosphor-icons/react";
+import { motion } from "motion/react";
+import { useCallback, useMemo } from "react";
+import { match } from "ts-pattern";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { getProviderIcon, getProviderName, useAuthAccounts, useAuthProviderActions } from "./hooks";
+
+type SocialProviderSectionProps = {
+	provider: AuthProvider;
+	name?: string;
+	animationDelay?: number;
+};
+
+export function SocialProviderSection({ provider, name, animationDelay = 0 }: SocialProviderSectionProps) {
+	const { link, unlink } = useAuthProviderActions();
+	const { hasAccount, getAccountByProviderId } = useAuthAccounts();
+
+	const providerName = useMemo(() => name ?? getProviderName(provider), [name, provider]);
+	const providerIcon = useMemo(() => getProviderIcon(provider), [provider]);
+
+	const account = useMemo(() => getAccountByProviderId(provider), [getAccountByProviderId, provider]);
+	const isConnected = useMemo(() => hasAccount(provider), [hasAccount, provider]);
+
+	const handleLink = useCallback(async () => {
+		await link(provider);
+	}, [link, provider]);
+
+	const handleUnlink = useCallback(async () => {
+		if (!account?.accountId) return;
+		await unlink(provider, account.accountId);
+	}, [account, unlink, provider]);
+
+	return (
+		<motion.div
+			className="will-change-[transform,opacity]"
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.2, delay: animationDelay, ease: "easeOut" }}
+		>
+			<Separator />
+
+			<div className="mt-4 flex items-center justify-between gap-x-4">
+				<h2 className="flex items-center gap-x-3 font-medium text-base">
+					{providerIcon}
+					{providerName}
+				</h2>
+
+				{match(isConnected)
+					.with(true, () => (
+						<motion.div
+							className="will-change-transform"
+							whileHover={{ y: -1, scale: 1.01 }}
+							whileTap={{ scale: 0.99 }}
+							transition={{ duration: 0.14, ease: "easeOut" }}
+						>
+							<Button variant="outline" onClick={handleUnlink}>
+								<LinkBreakIcon />
+								<Trans comment="Authentication settings action to unlink a connected social login provider">
+									Disconnect
+								</Trans>
+							</Button>
+						</motion.div>
+					))
+					.with(false, () => (
+						<motion.div
+							className="will-change-transform"
+							whileHover={{ y: -1, scale: 1.01 }}
+							whileTap={{ scale: 0.99 }}
+							transition={{ duration: 0.14, ease: "easeOut" }}
+						>
+							<Button variant="outline" onClick={handleLink}>
+								<LinkIcon />
+								<Trans comment="Authentication settings action to link a social login provider">Connect</Trans>
+							</Button>
+						</motion.div>
+					))
+					.exhaustive()}
+			</div>
+		</motion.div>
+	);
+}
@@ -0,0 +1,76 @@
+import { Trans } from "@lingui/react/macro";
+import { KeyIcon, LockOpenIcon, ToggleLeftIcon, ToggleRightIcon } from "@phosphor-icons/react";
+import { motion } from "motion/react";
+import { useCallback, useMemo } from "react";
+import { match } from "ts-pattern";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { useDialogStore } from "@/dialogs/store";
+import { authClient } from "@/libs/auth/client";
+import { useAuthAccounts } from "./hooks";
+
+export function TwoFactorSection() {
+	const { openDialog } = useDialogStore();
+	const { hasAccount } = useAuthAccounts();
+	const { data: session } = authClient.useSession();
+
+	const hasPassword = useMemo(() => hasAccount("credential"), [hasAccount]);
+	const hasTwoFactor = useMemo(() => session?.user.twoFactorEnabled ?? false, [session]);
+
+	const handleTwoFactorAction = useCallback(() => {
+		if (hasTwoFactor) {
+			openDialog("auth.two-factor.disable", undefined);
+		} else {
+			openDialog("auth.two-factor.enable", undefined);
+		}
+	}, [hasTwoFactor, openDialog]);
+
+	if (!hasPassword) return null;
+
+	return (
+		<motion.div
+			className="will-change-[transform,opacity]"
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.2, delay: 0.2, ease: "easeOut" }}
+		>
+			<Separator />
+
+			<div className="mt-4 flex items-center justify-between gap-x-4">
+				<h2 className="flex items-center gap-x-3 font-medium text-base">
+					{hasTwoFactor ? <LockOpenIcon /> : <KeyIcon />}
+					<Trans>Two-Factor Authentication</Trans>
+				</h2>
+
+				{match(hasTwoFactor)
+					.with(true, () => (
+						<motion.div
+							className="will-change-transform"
+							whileHover={{ y: -1, scale: 1.01 }}
+							whileTap={{ scale: 0.99 }}
+							transition={{ duration: 0.14, ease: "easeOut" }}
+						>
+							<Button variant="outline" onClick={handleTwoFactorAction}>
+								<ToggleLeftIcon />
+								<Trans>Disable 2FA</Trans>
+							</Button>
+						</motion.div>
+					))
+					.with(false, () => (
+						<motion.div
+							className="will-change-transform"
+							whileHover={{ y: -1, scale: 1.01 }}
+							whileTap={{ scale: 0.99 }}
+							transition={{ duration: 0.14, ease: "easeOut" }}
+						>
+							<Button variant="outline" onClick={handleTwoFactorAction}>
+								<ToggleRightIcon />
+								<Trans>Enable 2FA</Trans>
+							</Button>
+						</motion.div>
+					))
+					.exhaustive()}
+			</div>
+		</motion.div>
+	);
+}
@@ -0,0 +1,50 @@
+import { t } from "@lingui/core/macro";
+import { ShieldCheckIcon } from "@phosphor-icons/react";
+import { createFileRoute } from "@tanstack/react-router";
+import { motion } from "motion/react";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { DashboardHeader } from "../../-components/header";
+import { useEnabledProviders } from "./-components/hooks";
+import { PasskeysSection } from "./-components/passkeys";
+import { PasswordSection } from "./-components/password";
+import { SocialProviderSection } from "./-components/social-provider";
+import { TwoFactorSection } from "./-components/two-factor";
+
+export const Route = createFileRoute("/dashboard/settings/authentication/")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { enabledProviders } = useEnabledProviders();
+
+	return (
+		<div className="space-y-4">
+			<DashboardHeader icon={ShieldCheckIcon} title={t`Authentication`} />
+
+			<Separator />
+
+			<motion.div
+				initial={{ opacity: 0, y: -20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.25, ease: "easeOut" }}
+				className="grid max-w-xl gap-4 will-change-[transform,opacity]"
+			>
+				<PasswordSection />
+
+				<TwoFactorSection />
+
+				<PasskeysSection />
+
+				{"google" in enabledProviders && <SocialProviderSection provider="google" animationDelay={0.4} />}
+
+				{"github" in enabledProviders && <SocialProviderSection provider="github" animationDelay={0.5} />}
+
+				{"linkedin" in enabledProviders && <SocialProviderSection provider="linkedin" animationDelay={0.6} />}
+
+				{"custom" in enabledProviders && (
+					<SocialProviderSection provider="custom" animationDelay={0.7} name={enabledProviders.custom} />
+				)}
+			</motion.div>
+		</div>
+	);
+}
@@ -0,0 +1,107 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { TrashSimpleIcon, WarningIcon } from "@phosphor-icons/react";
+import { useMutation } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { motion } from "motion/react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Input } from "@reactive-resume/ui/components/input";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { useConfirm } from "@/hooks/use-confirm";
+import { authClient } from "@/libs/auth/client";
+import { getReadableErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+import { DashboardHeader } from "../-components/header";
+
+export const Route = createFileRoute("/dashboard/settings/danger-zone")({
+	component: RouteComponent,
+});
+
+const CONFIRMATION_TEXT = "delete";
+
+function RouteComponent() {
+	const confirm = useConfirm();
+	const navigate = useNavigate();
+	const [confirmationText, setConfirmationText] = useState("");
+	const isConfirmationValid = confirmationText === CONFIRMATION_TEXT;
+
+	const { mutate: deleteAccount } = useMutation(orpc.auth.deleteAccount.mutationOptions());
+
+	const handleDeleteAccount = async () => {
+		const confirmed = await confirm(t`Are you sure you want to delete your account?`, {
+			description: t`This action cannot be undone. All your data will be permanently deleted.`,
+			confirmText: t({
+				comment: "Account deletion confirmation dialog confirm action in danger zone",
+				message: "Confirm",
+			}),
+			cancelText: t({
+				comment: "Account deletion confirmation dialog cancel action in danger zone",
+				message: "Cancel",
+			}),
+		});
+
+		if (!confirmed) return;
+
+		const toastId = toast.loading(t`Deleting your account...`);
+
+		deleteAccount(undefined, {
+			onSuccess: async () => {
+				toast.success(t`Your account has been deleted successfully.`, { id: toastId });
+				await authClient.signOut();
+				void navigate({ to: "/" });
+			},
+			onError: (error) => {
+				toast.error(
+					getReadableErrorMessage(
+						error,
+						t({
+							comment: "Fallback toast when account deletion fails",
+							message: "Failed to delete your account. Please try again.",
+						}),
+					),
+					{ id: toastId },
+				);
+			},
+		});
+	};
+
+	return (
+		<div className="space-y-4">
+			<DashboardHeader icon={WarningIcon} title={t`Danger Zone`} />
+
+			<Separator />
+
+			<motion.div
+				initial={{ opacity: 0, y: -20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.25, ease: "easeOut" }}
+				className="grid max-w-xl gap-6 will-change-[transform,opacity]"
+			>
+				<p className="leading-relaxed">
+					<Trans>To delete your account, you need to enter the confirmation text and click the button below.</Trans>
+				</p>
+
+				<Input
+					type="text"
+					value={confirmationText}
+					onChange={(e) => setConfirmationText(e.target.value)}
+					placeholder={t`Type "${CONFIRMATION_TEXT}" to confirm`}
+				/>
+
+				<motion.div
+					className="justify-self-end will-change-transform"
+					whileHover={!isConfirmationValid ? undefined : { y: -1, scale: 1.01 }}
+					whileTap={!isConfirmationValid ? undefined : { scale: 0.98 }}
+					transition={{ duration: 0.14, ease: "easeOut" }}
+				>
+					<Button variant="destructive" onClick={handleDeleteAccount} disabled={!isConfirmationValid}>
+						<TrashSimpleIcon />
+						<Trans>Delete Account</Trans>
+					</Button>
+				</motion.div>
+			</motion.div>
+		</div>
+	);
+}
@@ -0,0 +1,299 @@
+import type { AIProvider } from "@reactive-resume/ai/types";
+import type { ComboboxOption } from "@/components/ui/combobox";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { CheckCircleIcon, InfoIcon, XCircleIcon } from "@phosphor-icons/react";
+import { useMutation } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { toast } from "sonner";
+import { useAIStore } from "@reactive-resume/ai/store";
+import { AI_PROVIDER_DEFAULT_BASE_URLS } from "@reactive-resume/ai/types";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Input } from "@reactive-resume/ui/components/input";
+import { Label } from "@reactive-resume/ui/components/label";
+import { Spinner } from "@reactive-resume/ui/components/spinner";
+import { Switch } from "@reactive-resume/ui/components/switch";
+import { cn } from "@reactive-resume/utils/style";
+import { Combobox } from "@/components/ui/combobox";
+import { getOrpcErrorMessage } from "@/libs/error-message";
+import { orpc } from "@/libs/orpc/client";
+
+type AIProviderOption = ComboboxOption<AIProvider> & { defaultBaseURL: string };
+
+const providerOptions: AIProviderOption[] = [
+	{
+		value: "openai",
+		label: t({
+			comment: "AI provider option label in dashboard AI settings",
+			message: "OpenAI",
+		}),
+		keywords: ["openai", "gpt", "chatgpt"],
+		defaultBaseURL: AI_PROVIDER_DEFAULT_BASE_URLS.openai,
+	},
+	{
+		value: "anthropic",
+		label: t({
+			comment: "AI provider option label in dashboard AI settings",
+			message: "Anthropic Claude",
+		}),
+		keywords: ["anthropic", "claude", "ai"],
+		defaultBaseURL: AI_PROVIDER_DEFAULT_BASE_URLS.anthropic,
+	},
+	{
+		value: "gemini",
+		label: t({
+			comment: "AI provider option label in dashboard AI settings",
+			message: "Google Gemini",
+		}),
+		keywords: ["gemini", "google", "bard"],
+		defaultBaseURL: AI_PROVIDER_DEFAULT_BASE_URLS.gemini,
+	},
+	{
+		value: "vercel-ai-gateway",
+		label: t({
+			comment: "AI provider option label in dashboard AI settings",
+			message: "Vercel AI Gateway",
+		}),
+		keywords: ["vercel", "gateway", "ai"],
+		defaultBaseURL: AI_PROVIDER_DEFAULT_BASE_URLS["vercel-ai-gateway"],
+	},
+	{
+		value: "openrouter",
+		label: t({
+			comment: "AI provider option label in dashboard AI settings",
+			message: "OpenRouter",
+		}),
+		keywords: ["openrouter", "router", "multi", "proxy"],
+		defaultBaseURL: AI_PROVIDER_DEFAULT_BASE_URLS.openrouter,
+	},
+	{
+		value: "ollama",
+		label: t({
+			comment: "AI provider option label in dashboard AI settings",
+			message: "Ollama",
+		}),
+		keywords: ["ollama", "ai", "local"],
+		defaultBaseURL: AI_PROVIDER_DEFAULT_BASE_URLS.ollama,
+	},
+];
+
+function isValidOptionalBaseURL(value: string) {
+	const trimmedValue = value.trim();
+	if (!trimmedValue) return true;
+
+	try {
+		return new URL(trimmedValue).protocol === "https:";
+	} catch {
+		return false;
+	}
+}
+
+function AIForm() {
+	const { set, model, apiKey, baseURL, provider, enabled, testStatus } = useAIStore();
+
+	const selectedOption = useMemo(() => {
+		return providerOptions.find((option) => option.value === provider);
+	}, [provider]);
+
+	const canTestConnection = model.trim().length > 0 && apiKey.trim().length > 0 && isValidOptionalBaseURL(baseURL);
+
+	const { mutate: testConnection, isPending: isTesting } = useMutation(orpc.ai.testConnection.mutationOptions());
+
+	const handleProviderChange = (value: AIProvider | null) => {
+		if (!value) return;
+
+		set((draft) => {
+			draft.provider = value;
+		});
+	};
+
+	const handleTestConnection = () => {
+		if (!canTestConnection) return;
+
+		testConnection(
+			{ provider, model: model.trim(), apiKey: apiKey.trim(), baseURL: baseURL.trim() },
+			{
+				onSuccess: (data) => {
+					set((draft) => {
+						draft.testStatus = data ? "success" : "failure";
+					});
+				},
+				onError: (error) => {
+					set((draft) => {
+						draft.testStatus = "failure";
+					});
+
+					toast.error(
+						getOrpcErrorMessage(error, {
+							byCode: {
+								BAD_REQUEST: t({
+									comment: "Error shown when AI provider credentials or base URL are invalid in AI settings",
+									message: "Invalid AI provider configuration. Please check your settings.",
+								}),
+								BAD_GATEWAY: t({
+									comment: "Error shown when the configured AI provider cannot be reached during connection test",
+									message: "Could not reach the AI provider. Please try again.",
+								}),
+							},
+							fallback: t({
+								comment: "Fallback toast when testing AI provider connection fails",
+								message: "Failed to test AI provider connection. Please try again.",
+							}),
+						}),
+					);
+				},
+			},
+		);
+	};
+
+	return (
+		<div className="grid gap-6 sm:grid-cols-2">
+			<div className="flex flex-col gap-y-2">
+				<Label htmlFor="ai-provider">
+					<Trans>Provider</Trans>
+				</Label>
+				<Combobox
+					id="ai-provider"
+					value={provider}
+					disabled={enabled}
+					options={providerOptions}
+					onValueChange={handleProviderChange}
+				/>
+			</div>
+
+			<div className="flex flex-col gap-y-2">
+				<Label htmlFor="ai-model">
+					<Trans>Model</Trans>
+				</Label>
+				<Input
+					id="ai-model"
+					name="ai-model"
+					type="text"
+					value={model}
+					disabled={enabled}
+					onChange={(e) =>
+						set((draft) => {
+							draft.model = e.target.value;
+						})
+					}
+					placeholder={t({
+						comment: "Example model-name placeholder in AI settings",
+						message: "e.g., gpt-4, claude-3-opus, gemini-pro",
+					})}
+					autoCorrect="off"
+					autoComplete="off"
+					spellCheck="false"
+					autoCapitalize="off"
+				/>
+			</div>
+
+			<div className="flex flex-col gap-y-2 sm:col-span-2">
+				<Label htmlFor="ai-api-key">
+					<Trans>API Key</Trans>
+				</Label>
+				<Input
+					id="ai-api-key"
+					name="ai-api-key"
+					type="password"
+					value={apiKey}
+					disabled={enabled}
+					onChange={(e) =>
+						set((draft) => {
+							draft.apiKey = e.target.value;
+						})
+					}
+					autoCorrect="off"
+					autoComplete="off"
+					spellCheck="false"
+					autoCapitalize="off"
+					data-lpignore="true"
+					data-bwignore="true"
+					data-1p-ignore="true"
+				/>
+			</div>
+
+			<div className="flex flex-col gap-y-2 sm:col-span-2">
+				<Label htmlFor="ai-base-url">
+					<Trans>Base URL (Optional)</Trans>
+				</Label>
+				<Input
+					id="ai-base-url"
+					name="ai-base-url"
+					type="url"
+					value={baseURL}
+					disabled={enabled}
+					placeholder={selectedOption?.defaultBaseURL}
+					onChange={(e) =>
+						set((draft) => {
+							draft.baseURL = e.target.value;
+						})
+					}
+					autoCorrect="off"
+					autoComplete="off"
+					spellCheck="false"
+					autoCapitalize="off"
+				/>
+			</div>
+
+			<div>
+				<Button variant="outline" disabled={isTesting || enabled || !canTestConnection} onClick={handleTestConnection}>
+					{isTesting ? (
+						<Spinner />
+					) : testStatus === "success" ? (
+						<CheckCircleIcon className="text-success" />
+					) : testStatus === "failure" ? (
+						<XCircleIcon className="text-destructive" />
+					) : null}
+					<Trans>Test Connection</Trans>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export function AISettingsSection() {
+	const aiEnabled = useAIStore((state) => state.enabled);
+	const canEnableAI = useAIStore((state) => state.canEnable());
+	const setAIEnabled = useAIStore((state) => state.setEnabled);
+
+	return (
+		<section className="grid gap-6">
+			<h2 className="font-semibold text-lg">
+				<Trans>Artificial Intelligence</Trans>
+			</h2>
+
+			<div className="flex items-start gap-4 rounded-md border bg-popover p-6">
+				<div className="rounded-md bg-primary/10 p-2.5">
+					<InfoIcon className="text-primary" size={24} />
+				</div>
+
+				<div className="flex-1 space-y-2">
+					<h3 className="font-semibold">
+						<Trans>Your data is stored locally</Trans>
+					</h3>
+
+					<p className="text-muted-foreground leading-relaxed">
+						<Trans>
+							Everything entered here is stored locally on your browser. Your data is only sent to the server when
+							making a request to the AI provider, and is never stored or logged on our servers.
+						</Trans>
+					</p>
+				</div>
+			</div>
+
+			<div className="flex items-center justify-between">
+				<Label htmlFor="enable-ai">
+					<Trans>Enable AI Features</Trans>
+				</Label>
+				<Switch id="enable-ai" checked={aiEnabled} disabled={!canEnableAI} onCheckedChange={setAIEnabled} />
+			</div>
+
+			<p className={cn("flex items-center gap-x-2", aiEnabled ? "text-success" : "text-destructive")}>
+				{aiEnabled ? <CheckCircleIcon /> : <XCircleIcon />}
+				{aiEnabled ? <Trans>Enabled</Trans> : <Trans>Disabled</Trans>}
+			</p>
+
+			<AIForm />
+		</section>
+	);
+}
@@ -0,0 +1,35 @@
+import { t } from "@lingui/core/macro";
+import { BrainIcon } from "@phosphor-icons/react";
+import { createFileRoute } from "@tanstack/react-router";
+import { motion } from "motion/react";
+import { useIsClient } from "usehooks-ts";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { DashboardHeader } from "../../-components/header";
+import { AISettingsSection } from "./-components/ai-section";
+
+export const Route = createFileRoute("/dashboard/settings/integrations")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const isClient = useIsClient();
+
+	if (!isClient) return null;
+
+	return (
+		<div className="space-y-4">
+			<DashboardHeader icon={BrainIcon} title={t`Integrations`} />
+
+			<Separator />
+
+			<motion.div
+				initial={{ opacity: 0, y: -20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.25, ease: "easeOut" }}
+				className="grid max-w-xl gap-8 will-change-[transform,opacity]"
+			>
+				<AISettingsSection />
+			</motion.div>
+		</div>
+	);
+}
@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashboard/settings/job-search")({
+	beforeLoad: () => {
+		throw redirect({ to: "/dashboard/settings/integrations", replace: true });
+	},
+});
@@ -0,0 +1,58 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { ArrowRightIcon, GearSixIcon } from "@phosphor-icons/react";
+import { createFileRoute } from "@tanstack/react-router";
+import { motion } from "motion/react";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Label } from "@reactive-resume/ui/components/label";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { LocaleCombobox } from "@/components/locale/combobox";
+import { ThemeCombobox } from "@/components/theme/combobox";
+import { DashboardHeader } from "../-components/header";
+
+export const Route = createFileRoute("/dashboard/settings/preferences")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return (
+		<div className="space-y-4">
+			<DashboardHeader icon={GearSixIcon} title={t`Preferences`} />
+
+			<Separator />
+
+			<motion.div
+				initial={{ opacity: 0, y: -20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.25, ease: "easeOut" }}
+				className="grid max-w-xl gap-6 will-change-[transform,opacity]"
+			>
+				<div className="grid gap-1.5">
+					<Label className="mb-0.5">
+						<Trans>Theme</Trans>
+					</Label>
+					<ThemeCombobox />
+				</div>
+
+				<div className="grid gap-1.5">
+					<Label className="mb-0.5">
+						<Trans>Language</Trans>
+					</Label>
+					<LocaleCombobox />
+					<Button
+						size="sm"
+						variant="link"
+						nativeButton={false}
+						className="h-5 justify-start text-muted-foreground text-xs active:scale-100"
+						render={
+							<a href="https://crowdin.com/project/reactive-resume" target="_blank" rel="noopener noreferrer">
+								<Trans>Help translate the app to your language</Trans>
+								<ArrowRightIcon className="size-3" />
+							</a>
+						}
+					/>
+				</div>
+			</motion.div>
+		</div>
+	);
+}
@@ -0,0 +1,280 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
+import { CheckIcon, UserCircleIcon, WarningIcon } from "@phosphor-icons/react";
+import { useStore } from "@tanstack/react-form";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { AnimatePresence, motion } from "motion/react";
+import { toast } from "sonner";
+import { match } from "ts-pattern";
+import z from "zod";
+import { Button } from "@reactive-resume/ui/components/button";
+import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
+import { Input } from "@reactive-resume/ui/components/input";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { authClient } from "@/libs/auth/client";
+import { getReadableErrorMessage } from "@/libs/error-message";
+import { useAppForm } from "@/libs/tanstack-form";
+import { DashboardHeader } from "../-components/header";
+
+export const Route = createFileRoute("/dashboard/settings/profile")({
+	component: RouteComponent,
+});
+
+const formSchema = z.object({
+	name: z.string().trim().min(1).max(64),
+	username: z
+		.string()
+		.trim()
+		.min(1)
+		.max(64)
+		.regex(/^[a-z0-9._-]+$/, {
+			message: "Username can only contain lowercase letters, numbers, dots, hyphens and underscores.",
+		}),
+	email: z.email().trim(),
+});
+
+function RouteComponent() {
+	const router = useRouter();
+	const { session } = Route.useRouteContext();
+
+	const form = useAppForm({
+		defaultValues: {
+			name: session.user.name,
+			username: session.user.username,
+			email: session.user.email,
+		},
+		validators: { onSubmit: formSchema },
+		onSubmit: async ({ value }) => {
+			const { error } = await authClient.updateUser({
+				name: value.name,
+				username: value.username,
+				displayUsername: value.username,
+			});
+
+			if (error) {
+				toast.error(
+					getReadableErrorMessage(
+						error,
+						t({
+							comment: "Fallback toast when updating profile details fails",
+							message: "Failed to update your profile. Please try again.",
+						}),
+					),
+				);
+				return;
+			}
+
+			toast.success(t`Your profile has been updated successfully.`);
+			form.reset({ name: value.name, username: value.username, email: session.user.email });
+			void router.invalidate();
+
+			if (value.email !== session.user.email) {
+				const { error } = await authClient.changeEmail({
+					newEmail: value.email,
+					callbackURL: "/dashboard/settings/profile",
+				});
+
+				if (error) {
+					toast.error(
+						getReadableErrorMessage(
+							error,
+							t({
+								comment: "Fallback toast when requesting email change confirmation fails",
+								message: "Failed to request email change. Please try again.",
+							}),
+						),
+					);
+					return;
+				}
+
+				toast.success(
+					t`A confirmation link has been sent to your current email address. Please check your inbox to confirm the change.`,
+				);
+				form.reset({ name: value.name, username: value.username, email: session.user.email });
+				void router.invalidate();
+			}
+		},
+	});
+
+	const onCancel = () => {
+		form.reset();
+	};
+
+	const isDirty = useStore(form.store, (s) => s.isDirty);
+
+	const handleResendVerificationEmail = async () => {
+		const toastId = toast.loading(t`Resending verification email...`);
+
+		const { error } = await authClient.sendVerificationEmail({
+			email: session.user.email,
+			callbackURL: "/dashboard/settings/profile",
+		});
+
+		if (error) {
+			toast.error(
+				getReadableErrorMessage(
+					error,
+					t({
+						comment: "Fallback toast when resending account verification email fails",
+						message: "Failed to resend verification email. Please try again.",
+					}),
+				),
+				{ id: toastId },
+			);
+			return;
+		}
+
+		toast.success(
+			t`A new verification link has been sent to your email address. Please check your inbox to verify your account.`,
+			{ id: toastId },
+		);
+		void router.invalidate();
+	};
+
+	return (
+		<div className="space-y-4">
+			<DashboardHeader icon={UserCircleIcon} title={t`Profile`} />
+
+			<Separator />
+
+			<motion.form
+				initial={{ opacity: 0, y: -20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.25, ease: "easeOut" }}
+				className="grid max-w-xl gap-6 will-change-[transform,opacity]"
+				onSubmit={(event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					void form.handleSubmit();
+				}}
+			>
+				<form.Field name="name">
+					{(field) => (
+						<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+							<FormLabel>
+								<Trans>Name</Trans>
+							</FormLabel>
+							<FormControl
+								render={
+									<Input
+										min={3}
+										max={64}
+										autoComplete="name"
+										placeholder={t({
+											comment: "Example full name placeholder on profile settings form",
+											message: "John Doe",
+										})}
+										name={field.name}
+										value={field.state.value}
+										onBlur={field.handleBlur}
+										onChange={(event) => field.handleChange(event.target.value)}
+									/>
+								}
+							/>
+							<FormMessage errors={field.state.meta.errors} />
+						</FormItem>
+					)}
+				</form.Field>
+
+				<form.Field name="username">
+					{(field) => (
+						<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+							<FormLabel>
+								<Trans>Username</Trans>
+							</FormLabel>
+							<FormControl
+								render={
+									<Input
+										min={3}
+										max={64}
+										autoComplete="username"
+										placeholder={t({
+											comment: "Example username placeholder on profile settings form",
+											message: "john.doe",
+										})}
+										className="lowercase"
+										name={field.name}
+										value={field.state.value}
+										onBlur={field.handleBlur}
+										onChange={(event) => field.handleChange(event.target.value)}
+									/>
+								}
+							/>
+							<FormMessage errors={field.state.meta.errors} />
+						</FormItem>
+					)}
+				</form.Field>
+
+				<form.Field name="email">
+					{(field) => (
+						<FormItem hasError={field.state.meta.isTouched && field.state.meta.errors.length > 0}>
+							<FormLabel>
+								<Trans>Email Address</Trans>
+							</FormLabel>
+							<FormControl
+								render={
+									<Input
+										type="email"
+										autoComplete="email"
+										placeholder={t({
+											comment: "Example email placeholder on profile settings form",
+											message: "john.doe@example.com",
+										})}
+										className="lowercase"
+										name={field.name}
+										value={field.state.value}
+										onBlur={field.handleBlur}
+										onChange={(event) => field.handleChange(event.target.value)}
+									/>
+								}
+							/>
+							<FormMessage errors={field.state.meta.errors} />
+							{match(session.user.emailVerified)
+								.with(true, () => (
+									<p className="flex items-center gap-x-1.5 text-green-700 text-xs">
+										<CheckIcon />
+										<Trans>Verified</Trans>
+									</p>
+								))
+								.with(false, () => (
+									<p className="flex items-center gap-x-1.5 text-amber-600 text-xs">
+										<WarningIcon className="size-3.5" />
+										<Trans>Unverified</Trans>
+										<span>|</span>
+										<Button
+											variant="link"
+											className="h-auto gap-x-1.5 p-0! text-inherit text-xs"
+											onClick={handleResendVerificationEmail}
+										>
+											<Trans>Resend verification email</Trans>
+										</Button>
+									</p>
+								))
+								.exhaustive()}
+						</FormItem>
+					)}
+				</form.Field>
+
+				<AnimatePresence initial={false} mode="popLayout">
+					{isDirty && (
+						<motion.div
+							initial={{ opacity: 0, y: -8 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -8 }}
+							transition={{ duration: 0.16, ease: "easeOut" }}
+							className="flex items-center gap-x-4 justify-self-end will-change-[transform,opacity]"
+						>
+							<Button type="reset" variant="ghost" onClick={onCancel}>
+								<Trans comment="Profile settings form action to discard unsaved edits">Cancel</Trans>
+							</Button>
+
+							<Button type="submit">
+								<Trans>Save Changes</Trans>
+							</Button>
+						</motion.div>
+					)}
+				</AnimatePresence>
+			</motion.form>
+		</div>
+	);
+}