From be0db3fd8ac9703c34ec8dbf23bcd7da564aba2d Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+frooodle@users.noreply.github.com>
Date: Wed, 10 Jun 2026 14:49:16 +0100
Subject: [PATCH] fix: show profile picture in the FileSidebar bottom bar

The home page's bottom-left settings button is FileSidebar's bottom
bar, which hardcoded an initials circle - the avatar work in
useConfigButtonIcon only affects the QuickAccessBar rail, which the
home page doesn't render. Add a layered useProfilePictureUrl hook
(core stub returns null; saas returns the auth context URL) and render
the picture inside the existing avatar circle, falling back to the
initial when absent or on image load failure.
---
 .../src/core/components/shared/FileSidebar.css  |  8 ++++++++
 .../src/core/components/shared/FileSidebar.tsx  | 17 ++++++++++++++++-
 .../src/core/hooks/useProfilePictureUrl.ts      |  6 ++++++
 .../src/saas/hooks/useProfilePictureUrl.ts      |  5 +++++
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 frontend/editor/src/core/hooks/useProfilePictureUrl.ts
 create mode 100644 frontend/editor/src/saas/hooks/useProfilePictureUrl.ts

diff --git a/frontend/editor/src/core/components/shared/FileSidebar.css b/frontend/editor/src/core/components/shared/FileSidebar.css
index 875fcd9e7..fce21b32c 100644
--- a/frontend/editor/src/core/components/shared/FileSidebar.css
+++ b/frontend/editor/src/core/components/shared/FileSidebar.css
@@ -396,6 +396,14 @@
   justify-content: center;
   flex-shrink: 0;
   user-select: none;
+  overflow: hidden;
+}
+
+.file-sidebar-bottom-avatar-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
 }
 
 .file-sidebar-bottom-name {
diff --git a/frontend/editor/src/core/components/shared/FileSidebar.tsx b/frontend/editor/src/core/components/shared/FileSidebar.tsx
index c11ff76e8..2d6dc79d2 100644
--- a/frontend/editor/src/core/components/shared/FileSidebar.tsx
+++ b/frontend/editor/src/core/components/shared/FileSidebar.tsx
@@ -20,6 +20,7 @@ import {
 import { useViewer } from "@app/contexts/ViewerContext";
 import { useFileHandler } from "@app/hooks/useFileHandler";
 import { useAuth } from "@app/auth/UseSession";
+import { useProfilePictureUrl } from "@app/hooks/useProfilePictureUrl";
 import {
   useIndexedDB,
   useIndexedDBRevision,
@@ -184,6 +185,11 @@ const FileSidebar = forwardRef<HTMLDivElement, FileSidebarProps>(
     const displayName =
       authDisplayName ?? accountUsername ?? t("auth.displayName.user", "User");
 
+    const profilePictureUrl = useProfilePictureUrl();
+    const [pictureFailed, setPictureFailed] = useState(false);
+    useEffect(() => setPictureFailed(false), [profilePictureUrl]);
+    const showProfilePicture = !!profilePictureUrl && !pictureFailed;
+
     useEffect(() => {
       if (!config?.enableLogin) {
         setAccountUsername(null);
@@ -941,7 +947,16 @@ const FileSidebar = forwardRef<HTMLDivElement, FileSidebarProps>(
               className="file-sidebar-bottom-avatar"
               aria-label={displayName}
             >
-              {displayName.charAt(0).toUpperCase()}
+              {showProfilePicture ? (
+                <img
+                  src={profilePictureUrl}
+                  alt=""
+                  className="file-sidebar-bottom-avatar-img"
+                  onError={() => setPictureFailed(true)}
+                />
+              ) : (
+                displayName.charAt(0).toUpperCase()
+              )}
             </div>
             {!collapsed && (
               <span className="file-sidebar-bottom-name sidebar-content-fade">
diff --git a/frontend/editor/src/core/hooks/useProfilePictureUrl.ts b/frontend/editor/src/core/hooks/useProfilePictureUrl.ts
new file mode 100644
index 000000000..b43e673c9
--- /dev/null
+++ b/frontend/editor/src/core/hooks/useProfilePictureUrl.ts
@@ -0,0 +1,6 @@
+/**
+ * Core stub — no profile picture source; auth-aware layers override this.
+ */
+export function useProfilePictureUrl(): string | null {
+  return null;
+}
diff --git a/frontend/editor/src/saas/hooks/useProfilePictureUrl.ts b/frontend/editor/src/saas/hooks/useProfilePictureUrl.ts
new file mode 100644
index 000000000..3d2b4c635
--- /dev/null
+++ b/frontend/editor/src/saas/hooks/useProfilePictureUrl.ts
@@ -0,0 +1,5 @@
+import { useAuth } from "@app/auth/UseSession";
+
+export function useProfilePictureUrl(): string | null {
+  return useAuth().profilePictureUrl;
+}