From 973221d207cbcb8ad0c988f43c1ac784fae98155 Mon Sep 17 00:00:00 2001
From: biast12 <53872542+biast12@users.noreply.github.com>
Date: Sat, 26 Sep 2026 22:03:10 +0200
Subject: [PATCH] Use Discord CDN avatars in gallery views

Centralizes gallery submitter avatar rendering through userAvatarUrl so users without stored avatar URLs still display their Discord avatar consistently across cards, previews, admin listings, and detail pages.
---
 frontend/src/components/GalleryCard.tsx       | 13 +++++------
 .../components/modals/GalleryPreviewModal.tsx | 13 +++++------
 frontend/src/pages/admin/gallery/_index.tsx   | 16 +++++++------
 frontend/src/pages/gallery/view.tsx           | 23 ++++++-------------
 4 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/GalleryCard.tsx b/frontend/src/components/GalleryCard.tsx
index 48022970..7ce0df9c 100644
--- a/frontend/src/components/GalleryCard.tsx
+++ b/frontend/src/components/GalleryCard.tsx
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownload, faStar } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "react-router";
 import { GALLERY_TYPE_BADGES } from "@/components/gallery/GalleryListingPreview";
+import { userAvatarUrl } from "@/lib/discord-cdn";
 
 interface GalleryCardProps {
   listing: GalleryListing;
@@ -119,13 +120,11 @@ const GalleryCard: FC<GalleryCardProps> = ({
             </span>
           )}
           <span className="text-gray-400 flex items-center gap-1.5">
-            {listing.submitted_user.avatar_url ? (
-              <img
-                src={listing.submitted_user.avatar_url}
-                alt=""
-                className="w-4 h-4 rounded-full"
-              />
-            ) : null}
+            <img
+              src={userAvatarUrl(listing.submitted_user.id, listing.submitted_user.avatar_url)}
+              alt=""
+              className="w-4 h-4 rounded-full"
+            />
             {listing.submitted_user.username}
           </span>
         </div>
diff --git a/frontend/src/components/modals/GalleryPreviewModal.tsx b/frontend/src/components/modals/GalleryPreviewModal.tsx
index 097960ee..0a0034c2 100644
--- a/frontend/src/components/modals/GalleryPreviewModal.tsx
+++ b/frontend/src/components/modals/GalleryPreviewModal.tsx
@@ -5,6 +5,7 @@ import GalleryListingPreview, {
   GALLERY_TYPE_BADGES,
   listingHasMarkdown,
 } from "@/components/gallery/GalleryListingPreview";
+import { userAvatarUrl } from "@/lib/discord-cdn";
 import type { GallerySubmission } from "@/types";
 
 type PreviewView = "rendered" | "raw";
@@ -108,13 +109,11 @@ const GalleryPreviewModal: FC<GalleryPreviewModalProps> = ({ listing, open, onCl
             </MetaRow>
             <MetaRow label="Submitted by">
               <span className="inline-flex items-center gap-1.5">
-                {listing.submitted_user.avatar_url && (
-                  <img
-                    src={listing.submitted_user.avatar_url}
-                    alt=""
-                    className="w-4 h-4 rounded-full"
-                  />
-                )}
+                <img
+                  src={userAvatarUrl(listing.submitted_user.id, listing.submitted_user.avatar_url)}
+                  alt=""
+                  className="w-4 h-4 rounded-full"
+                />
                 {listing.submitted_user.username}
               </span>
             </MetaRow>
diff --git a/frontend/src/pages/admin/gallery/_index.tsx b/frontend/src/pages/admin/gallery/_index.tsx
index 6425b6e7..3c0239a0 100644
--- a/frontend/src/pages/admin/gallery/_index.tsx
+++ b/frontend/src/pages/admin/gallery/_index.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useId, useMemo, type FC } from "react";
 import { apiClient } from "@/lib/api";
+import { userAvatarUrl } from "@/lib/discord-cdn";
 import { toast } from "sonner";
 import type { GallerySubmission } from "@/types";
 import Button from "@/components/Button";
@@ -224,13 +225,14 @@ const AdminGalleryPage: FC = () => {
                     </div>
                     <div className="text-xs text-gray-500 mt-1 flex items-center gap-1.5">
                       by
-                      {submission.submitted_user.avatar_url && (
-                        <img
-                          src={submission.submitted_user.avatar_url}
-                          alt=""
-                          className="w-4 h-4 rounded-full inline"
-                        />
-                      )}
+                      <img
+                        src={userAvatarUrl(
+                          submission.submitted_user.id,
+                          submission.submitted_user.avatar_url,
+                        )}
+                        alt=""
+                        className="w-4 h-4 rounded-full inline"
+                      />
                       {submission.submitted_user.username} &middot; {date}
                     </div>
                   </div>
diff --git a/frontend/src/pages/gallery/view.tsx b/frontend/src/pages/gallery/view.tsx
index b07b226b..3f97ef05 100644
--- a/frontend/src/pages/gallery/view.tsx
+++ b/frontend/src/pages/gallery/view.tsx
@@ -3,6 +3,7 @@ import { useParams, Link } from "react-router";
 import { MainLayout } from "@/pages/layout/Main";
 import Button from "@/components/Button";
 import { apiClient } from "@/lib/api";
+import { userAvatarUrl } from "@/lib/discord-cdn";
 import type { GalleryListing } from "@/types";
 import GalleryImportModal from "@/components/modals/GalleryImportModal";
 import GalleryImportTagModal from "@/components/modals/GalleryImportTagModal";
@@ -12,13 +13,7 @@ import GalleryListingPreview, {
   GALLERY_TYPE_BADGES,
 } from "@/components/gallery/GalleryListingPreview";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faArrowLeft,
-  faDownload,
-  faStar,
-  faClock,
-  faUser,
-} from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faDownload, faStar, faClock } from "@fortawesome/free-solid-svg-icons";
 
 function getImportButtonLabel(type: string): string {
   if (type === "tag") return "Import Tag";
@@ -131,15 +126,11 @@ const GalleryViewPage: FC = () => {
 
             <div className="space-y-2 text-sm text-gray-400 mb-6">
               <div className="flex items-center gap-2">
-                {listing.submitted_user.avatar_url ? (
-                  <img
-                    src={listing.submitted_user.avatar_url}
-                    alt=""
-                    className="w-5 h-5 rounded-full"
-                  />
-                ) : (
-                  <FontAwesomeIcon icon={faUser} className="w-4" aria-hidden="true" />
-                )}
+                <img
+                  src={userAvatarUrl(listing.submitted_user.id, listing.submitted_user.avatar_url)}
+                  alt=""
+                  className="w-5 h-5 rounded-full"
+                />
                 <span>{listing.submitted_user.username}</span>
               </div>
               <div className="flex items-center gap-2">