From b477badc0439bfc91c59c11f8bfee34632826d69 Mon Sep 17 00:00:00 2001
From: Ryan Brooks <ryanjeffrey.brooks112@gmail.com>
Date: Fri, 24 Oct 2025 16:29:49 -0700
Subject: [PATCH] Wireup app icon frontend

---
 .../sidebar/buildDetailsSidebarAppInfo.tsx    | 21 ++++++++++++-------
 .../views/preprod/types/buildDetailsTypes.ts  |  1 +
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx b/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx
index 7a52ac701284dd..7c82db8242aa2d 100644
--- a/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx
+++ b/static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx
@@ -10,6 +10,7 @@ import {t} from 'sentry/locale';
 import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
 import {getFormattedDate} from 'sentry/utils/dates';
 import {unreachable} from 'sentry/utils/unreachable';
+import useOrganization from 'sentry/utils/useOrganization';
 import {openInstallModal} from 'sentry/views/preprod/components/installModal';
 import {
   BuildDetailsSizeAnalysisState,
@@ -70,14 +71,21 @@ interface BuildDetailsSidebarAppInfoProps {
 }
 
 export function BuildDetailsSidebarAppInfo(props: BuildDetailsSidebarAppInfoProps) {
+  const organization = useOrganization();
   const labels = getLabels(props.appInfo.platform ?? undefined);
 
+  let iconUrl = null;
+  if (props.appInfo.app_icon_id) {
+    iconUrl = `/api/0/projects/${organization.slug}/${props.projectId}/files/app-icons/${props.appInfo.app_icon_id}/`;
+  }
+
   return (
     <Flex direction="column" gap="xl">
       <Flex align="center" gap="sm">
-        <AppIcon>
+        {iconUrl && <img src={iconUrl} alt="App Icon" width={24} height={24} />}
+        {!iconUrl && (
           <AppIconPlaceholder>{props.appInfo.name?.charAt(0) || ''}</AppIconPlaceholder>
-        </AppIcon>
+        )}
         {props.appInfo.name && <Heading as="h3">{props.appInfo.name}</Heading>}
       </Flex>
 
@@ -187,19 +195,16 @@ export function BuildDetailsSidebarAppInfo(props: BuildDetailsSidebarAppInfoProp
   );
 }
 
-const AppIcon = styled('div')`
+const AppIconPlaceholder = styled('div')`
   width: 24px;
   height: 24px;
   border-radius: 4px;
-  background: #ff6600;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-`;
-
-const AppIconPlaceholder = styled('div')`
-  color: white;
+  background: ${p => p.theme.purple400};
+  color: ${p => p.theme.white};
   font-weight: ${p => p.theme.fontWeight.bold};
   font-size: ${p => p.theme.fontSize.sm};
 `;
diff --git a/static/app/views/preprod/types/buildDetailsTypes.ts b/static/app/views/preprod/types/buildDetailsTypes.ts
index b6c777da03b491..bde9f1f31b2a46 100644
--- a/static/app/views/preprod/types/buildDetailsTypes.ts
+++ b/static/app/views/preprod/types/buildDetailsTypes.ts
@@ -9,6 +9,7 @@ export interface BuildDetailsApiResponse {
 }
 
 export interface BuildDetailsAppInfo {
+  app_icon_id?: string | null;
   app_id?: string | null;
   artifact_type?: BuildDetailsArtifactType | null;
   build_configuration?: string | null;