feat: ✨ user settings

src/app/auth/login/google/callback/route.tsx

@@ -3,11 +3,11 @@ import { decodeIdToken } from "arctic";
 import { and, eq } from "drizzle-orm";
 import { cookies } from "next/headers";
 import { db } from "@/db";
-import { oauthAccounts, users } from "@/db/schema";
+import { members, oauthAccounts } from "@/db/schema";
 import { setSessionTokenCookie } from "@/lib/auth/cookies";
 import { oauth } from "@/lib/auth/oauth";
 import { createSession, generateSessionToken } from "@/lib/auth/session";
-import { createGoogleUser } from "@/lib/auth/user";
+import { createGoogleUser, generateUsername } from "@/lib/auth/user";
 import { convertTimeToUTC } from "@/lib/availability/utils";
 import { availabilityPathWithOpenInvite } from "@/lib/meeting-open-invite";
 import { createMeetingFromData } from "@/server/actions/meeting/create/action";
@@ -61,6 +61,7 @@ export async function GET(request: Request): Promise<Response> {
 		sub: string;
 		name: string;
 		email: string;
+		picture?: string;
 	};
 
 	const oidcAccessToken = tokens.accessToken();
@@ -93,6 +94,7 @@ export async function GET(request: Request): Promise<Response> {
 	const oauthUserId = claims.sub;
 	const username = claims.name;
 	const email = claims.email;
+	const picture = claims.picture ?? null;
 
 	const existingUser = await db.query.users.findFirst({
 		where: (users) => eq(users.email, email),
@@ -135,8 +137,24 @@ export async function GET(request: Request): Promise<Response> {
 			return new Response(null, { status: 500 });
 		}
 		memberId = userRecord.memberId;
+
+		const member = await db.query.members.findFirst({
+			where: eq(members.id, memberId),
+			columns: { googleName: true, username: true },
+		});
+		const backfill: {
+			googleName?: string;
+			username?: string;
+			profilePicture?: string | null;
+		} = {};
+		if (!member?.googleName) backfill.googleName = username;
+		if (!member?.username) backfill.username = await generateUsername(username);
+		if (picture !== null) backfill.profilePicture = picture;
+		if (Object.keys(backfill).length > 0) {
+			await db.update(members).set(backfill).where(eq(members.id, memberId));
+		}
 	} else {
-		const user = await createGoogleUser(oauthUserId, email, username, null);
+		const user = await createGoogleUser(oauthUserId, email, username, picture);
 
 		const sessionToken = generateSessionToken();
 		const session = await createSession(sessionToken, user.id, {

src/app/profile/page.tsx

@@ -1,4 +1,7 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
 import { notFound, redirect } from "next/navigation";
+import { ProfileSettings } from "@/components/profile/profile-settings";
 import { getCurrentSession } from "@/lib/auth";
 import { ProfileContent } from "./profile-content";
 
@@ -12,5 +15,21 @@ export default async function ProfilePage() {
 		notFound();
 	}
 
-	return <ProfileContent />;
+	return (
+		<Box sx={{ px: 8, py: 8 }}>
+			<Typography
+				variant="h4"
+				sx={{ fontWeight: 600, fontFamily: "Figtree, sans-serif" }}
+			>
+				Settings
+			</Typography>
+
+			<Box sx={{ mt: 8 }}>
+				<ProfileSettings user={session.user} />
+			</Box>
+			<Box sx={{ mt: 8, display: { md: "none" } }}>
+				<ProfileContent />
+			</Box>
+		</Box>
+	);
 }

src/app/profile/profile-content.tsx

@@ -1,17 +1,19 @@
 "use client";
 
 import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
 import { useThemeMode } from "@/components/theme/theme-provider";
 
 export function ProfileContent() {
 	const { mode, setMode } = useThemeMode();
 
 	return (
-		<div className="px-8 py-8">
-			<h1 className="font-figtree font-medium text-3xl">Profile</h1>
-			<div className="max-w-sm">
-				<p className="mb-2 font-medium">Preferred Display Mode</p>
-
+		<Box>
+			<Typography variant="body1" sx={{ fontWeight: 500, mb: 1 }}>
+				Preferred Display Mode
+			</Typography>
+			<Box sx={{ maxWidth: "24rem" }}>
 				<FormControl fullWidth>
 					<InputLabel id="theme-select-label">Mode</InputLabel>
 					<Select
@@ -27,7 +29,7 @@ export function ProfileContent() {
 						<MenuItem value="system">System</MenuItem>
 					</Select>
 				</FormControl>
-			</div>
-		</div>
+			</Box>
+		</Box>
 	);
 }

src/components/availability/availability.tsx

@@ -413,9 +413,9 @@ export function Availability({
 		];
 
 		const allMembers = new Map(
-			allAvailabilities.map(({ memberId, displayName }) => [
+			allAvailabilities.map(({ memberId, displayName, profilePicture }) => [
 				memberId,
-				{ memberId, displayName },
+				{ memberId, displayName, profilePicture },
 			]),
 		);
 
@@ -434,7 +434,11 @@ export function Availability({
 		() =>
 			allAvailabilities
 				.filter((a) => a.meetingAvailabilities.length === 0)
-				.map(({ memberId, displayName }) => ({ memberId, displayName })),
+				.map(({ memberId, displayName, profilePicture }) => ({
+					memberId,
+					displayName,
+					profilePicture,
+				})),
 		[allAvailabilities],
 	);
 

src/components/availability/group-responses.tsx

@@ -1,4 +1,4 @@
-import { Button, Chip, Switch, Typography } from "@mui/material/";
+import { Avatar, Button, Chip, Switch, Typography } from "@mui/material/";
 import { XIcon } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useShallow } from "zustand/shallow";
@@ -247,7 +247,13 @@ export function GroupResponses({
 							<Chip
 								key={member.memberId}
 								clickable
-								//put pfp here once user settings merged. icon={}
+								icon={
+									<Avatar
+										alt={member.displayName}
+										src={member.profilePicture ?? undefined}
+										sx={{ width: 24, height: 24, fontSize: 12 }}
+									/>
+								}
 								label={member.displayName}
 								color={
 									selectedMembers.includes(member.memberId)
@@ -291,6 +297,13 @@ export function GroupResponses({
 								{pendingMembers.map((member) => (
 									<Chip
 										key={member.memberId}
+										icon={
+											<Avatar
+												alt={member.displayName}
+												src={member.profilePicture ?? undefined}
+												sx={{ height: 24, width: 24 }}
+											/>
+										}
 										label={member.displayName}
 										variant="outlined"
 									/>

src/components/availability/invite-members-dialog.tsx

@@ -19,6 +19,7 @@ import { useSnackbar } from "@/components/ui/snackbar-provider";
 interface SelectedMember {
 	id: string;
 	email: string;
+	profilePicture: string | null;
 }
 
 interface InviteMembersDialogProps {
@@ -40,7 +41,7 @@ export function InviteMembersDialog({
 	const [members, setMembers] = useState<SelectedMember[]>([]);
 	const [memberQuery, setMemberQuery] = useState("");
 	const [searchResults, setSearchResults] = useState<
-		{ id: string; email: string }[]
+		{ id: string; email: string; profilePicture: string | null }[]
 	>([]);
 	const [meetingLink, setMeetingLink] = useState("");
 	const [copied, setCopied] = useState(false);
@@ -101,9 +102,16 @@ export function InviteMembersDialog({
 	);
 
 	const addMember = useCallback(
-		(user: { id: string; email: string }) => {
+		(user: { id: string; email: string; profilePicture: string | null }) => {
 			if (!members.some((m) => m.id === user.id)) {
-				setMembers((prev) => [...prev, { id: user.id, email: user.email }]);
+				setMembers((prev) => [
+					...prev,
+					{
+						id: user.id,
+						email: user.email,
+						profilePicture: user.profilePicture,
+					},
+				]);
 			}
 			setMemberQuery("");
 			setSearchResults([]);
@@ -184,9 +192,12 @@ export function InviteMembersDialog({
 						renderOption={({ key, ...optionProps }, option) => (
 							<li key={key ?? option.id} {...optionProps}>
 								<div className="flex items-center gap-3">
-									<div className="flex size-8 items-center justify-center rounded-full bg-blue-100 font-medium text-blue-700 text-xs">
+									<Avatar
+										src={option.profilePicture ?? undefined}
+										slotProps={{ img: { referrerPolicy: "no-referrer" } }}
+									>
 										{getInitials(option.email)}
-									</div>
+									</Avatar>
 									<span className="text-sm">{option.email}</span>
 								</div>
 							</li>
@@ -198,7 +209,14 @@ export function InviteMembersDialog({
 							{members.map((member) => (
 								<Chip
 									key={member.id}
-									avatar={<Avatar>{getInitials(member.email)}</Avatar>}
+									avatar={
+										<Avatar
+											src={member.profilePicture ?? undefined}
+											slotProps={{ img: { referrerPolicy: "no-referrer" } }}
+										>
+											{getInitials(member.email)}
+										</Avatar>
+									}
 									label={member.email.split("@")[0]}
 									onDelete={() => removeMember(member.id)}
 									variant="filled"

src/components/groups/create-group-dialog.tsx

@@ -21,6 +21,7 @@ const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 interface SelectedMember {
 	id: string;
 	email: string;
+	profilePicture: string | null;
 }
 
 interface CreateGroupDialogProps {
@@ -86,7 +87,7 @@ export function CreateGroupDialog({
 	const [members, setMembers] = useState<SelectedMember[]>([]);
 	const [memberQuery, setMemberQuery] = useState("");
 	const [searchResults, setSearchResults] = useState<
-		{ id: string; email: string }[]
+		{ id: string; email: string; profilePicture: string | null }[]
 	>([]);
 	const [inviteLink, setInviteLink] = useState("");
 	const [copied, setCopied] = useState(false);
@@ -162,9 +163,16 @@ export function CreateGroupDialog({
 	);
 
 	const addMember = useCallback(
-		(user: { id: string; email: string }) => {
+		(user: { id: string; email: string; profilePicture: string | null }) => {
 			if (!members.some((m) => m.id === user.id)) {
-				setMembers((prev) => [...prev, { id: user.id, email: user.email }]);
+				setMembers((prev) => [
+					...prev,
+					{
+						id: user.id,
+						email: user.email,
+						profilePicture: user.profilePicture,
+					},
+				]);
 			}
 			setMemberQuery("");
 			setSearchResults([]);
@@ -296,9 +304,12 @@ export function CreateGroupDialog({
 						renderOption={({ key, ...optionProps }, option) => (
 							<li key={key ?? option.id} {...optionProps}>
 								<div className="flex items-center gap-3">
-									<div className="flex size-8 items-center justify-center rounded-full bg-blue-100 font-medium text-blue-700 text-xs">
+									<Avatar
+										src={option.profilePicture ?? undefined}
+										slotProps={{ img: { referrerPolicy: "no-referrer" } }}
+									>
 										{getInitials(option.email)}
-									</div>
+									</Avatar>
 									<span className="text-sm">{option.email}</span>
 								</div>
 							</li>
@@ -310,7 +321,14 @@ export function CreateGroupDialog({
 							{members.map((member) => (
 								<Chip
 									key={member.id}
-									avatar={<Avatar>{getInitials(member.email)}</Avatar>}
+									avatar={
+										<Avatar
+											src={member.profilePicture ?? undefined}
+											slotProps={{ img: { referrerPolicy: "no-referrer" } }}
+										>
+											{getInitials(member.email)}
+										</Avatar>
+									}
 									label={member.email.split("@")[0]}
 									onDelete={() => removeMember(member.id)}
 									variant="filled"

src/components/nav/mui-top-nav.tsx

@@ -242,7 +242,12 @@ function Notifications({
 									>
 										<Avatar
 											alt={notif.title || "Group icon"}
-											src={notif.groupIcon || "/icssc-logo.svg"}
+											src={
+												notif.createdByAvatar ||
+												notif.groupIcon ||
+												"/icssc-logo.svg"
+											}
+											slotProps={{ img: { referrerPolicy: "no-referrer" } }}
 										/>
 										<Box sx={{ p: 1 }}>
 											<Typography variant="body1">{notif.title}</Typography>
@@ -329,7 +334,11 @@ function NavUser({ user }: { user: UserProfile | null }) {
 					gap: 1,
 				}}
 			>
-				<Avatar sx={{ width: 32, height: 32 }}>
+				<Avatar
+					src={user.profilePicture ?? undefined}
+					slotProps={{ img: { referrerPolicy: "no-referrer" } }}
+					sx={{ width: 32, height: 32 }}
+				>
 					<Person fontSize="small" />
 				</Avatar>
 				<Typography