From 7076612d29f20b5cb98fd75e5ca988fec8f5653d Mon Sep 17 00:00:00 2001
From: Ethan Swan <ethanpswan@gmail.com>
Date: Sat, 14 Mar 2026 13:18:10 -0700
Subject: [PATCH 1/2] Add clickable profile picture popup on account page

Clicking the avatar on /account now opens a dialog with an enlarged
version of the photo, similar to Instagram profile pictures. Uses the
existing shadcn Dialog component with a transparent background overlay.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/account/account-details.tsx | 42 +++++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/app/account/account-details.tsx b/app/account/account-details.tsx
index cf65c29..50d4b38 100644
--- a/app/account/account-details.tsx
+++ b/app/account/account-details.tsx
@@ -1,6 +1,12 @@
 "use client";
 
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { useCurrentUser } from "@/hooks/useCurrentUser";
 import { ExternalLink, User2 } from "lucide-react";
 import Image from "next/image";
@@ -29,6 +35,8 @@ function AccountSettingsSection({
   pictureUrl: string | null;
   idpBaseUrl?: string;
 }) {
+  const [avatarOpen, setAvatarOpen] = useState(false);
+
   function getAccountSettingsUrl() {
     if (idpBaseUrl) {
       const normalizedBaseUrl = idpBaseUrl.replace(/\/+$/, "");
@@ -42,13 +50,33 @@ function AccountSettingsSection({
       <div className="space-y-6">
         <div className="flex flex-col items-center gap-4">
           {pictureUrl ? (
-            <Image
-              src={pictureUrl}
-              alt="Your avatar"
-              width={80}
-              height={80}
-              className="h-20 w-20 rounded-full object-cover border border-border"
-            />
+            <>
+              <button
+                type="button"
+                onClick={() => setAvatarOpen(true)}
+                className="cursor-pointer rounded-full focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+              >
+                <Image
+                  src={pictureUrl}
+                  alt="Your avatar"
+                  width={80}
+                  height={80}
+                  className="h-20 w-20 rounded-full object-cover border border-border"
+                />
+              </button>
+              <Dialog open={avatarOpen} onOpenChange={setAvatarOpen}>
+                <DialogContent className="flex items-center justify-center bg-transparent border-none shadow-none p-0 max-w-fit [&>button]:hidden">
+                  <DialogTitle className="sr-only">Profile picture</DialogTitle>
+                  <Image
+                    src={pictureUrl}
+                    alt="Your avatar"
+                    width={300}
+                    height={300}
+                    className="h-72 w-72 rounded-full object-cover"
+                  />
+                </DialogContent>
+              </Dialog>
+            </>
           ) : (
             <div className="h-20 w-20 rounded-full border border-border bg-muted flex items-center justify-center">
               <User2 className="h-10 w-10 text-muted-foreground" />

From 963866b673d86234f4ad3f4302c73adf13d0be9c Mon Sep 17 00:00:00 2001
From: Ethan Swan <ethanpswan@gmail.com>
Date: Sat, 14 Mar 2026 13:21:27 -0700
Subject: [PATCH 2/2] Remove focus outline from avatar popup dialog

The Radix dialog container receives focus on open, causing a visible
blue border around the transparent content area.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/account/account-details.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/account/account-details.tsx b/app/account/account-details.tsx
index 50d4b38..1754ab3 100644
--- a/app/account/account-details.tsx
+++ b/app/account/account-details.tsx
@@ -65,7 +65,7 @@ function AccountSettingsSection({
                 />
               </button>
               <Dialog open={avatarOpen} onOpenChange={setAvatarOpen}>
-                <DialogContent className="flex items-center justify-center bg-transparent border-none shadow-none p-0 max-w-fit [&>button]:hidden">
+                <DialogContent className="flex items-center justify-center bg-transparent border-none shadow-none p-0 max-w-fit outline-none focus:outline-none [&>button]:hidden">
                   <DialogTitle className="sr-only">Profile picture</DialogTitle>
                   <Image
                     src={pictureUrl}