feat(preprod): Wireup app icon frontend (#102118)

Queries the new preprod `files/images/` API to get the app icon if
available. If not available, falls back to a Sentry purple icon with the
first character of the app's name.
<img width="510" height="308" alt="Screenshot 2025-10-30 at 11 22 41 AM"
src="https://github.com/user-attachments/assets/fa03494f-bac7-43c7-856b-f9ff5f4ceb17"
/>

Author: rbro112

static/app/views/preprod/buildDetails/sidebar/buildDetailsSidebarAppInfo.tsx

@@ -1,3 +1,4 @@
+import {useState} from 'react';
 import styled from '@emotion/styled';
 import {PlatformIcon} from 'platformicons';
 
@@ -10,6 +11,7 @@ import Feature from 'sentry/components/acl/feature';
 import {IconClock, IconFile, IconJson, IconLink, IconMobile} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {getFormat, getFormattedDate, getUtcToSystem} from 'sentry/utils/dates';
+import useOrganization from 'sentry/utils/useOrganization';
 import {openInstallModal} from 'sentry/views/preprod/components/installModal';
 import {type BuildDetailsAppInfo} from 'sentry/views/preprod/types/buildDetailsTypes';
 import {
@@ -27,19 +29,35 @@ interface BuildDetailsSidebarAppInfoProps {
 }
 
 export function BuildDetailsSidebarAppInfo(props: BuildDetailsSidebarAppInfoProps) {
+  const organization = useOrganization();
   const labels = getLabels(props.appInfo.platform ?? undefined);
+  const [imageError, setImageError] = useState(false);
 
   const datetimeFormat = getFormat({
     seconds: true,
     timeZone: true,
   });
 
+  let iconUrl = null;
+  if (props.appInfo.app_icon_id) {
+    iconUrl = `/api/0/projects/${organization.slug}/${props.projectId}/files/images/${props.appInfo.app_icon_id}/`;
+  }
+
   return (
     <Flex direction="column" gap="xl">
       <Flex align="center" gap="sm">
-        <AppIcon>
+        {iconUrl && !imageError && (
+          <AppIcon
+            src={iconUrl}
+            alt="App Icon"
+            width={24}
+            height={24}
+            onError={() => setImageError(true)}
+          />
+        )}
+        {(!iconUrl || imageError) && (
           <AppIconPlaceholder>{props.appInfo.name?.charAt(0) || ''}</AppIconPlaceholder>
-        </AppIcon>
+        )}
         {props.appInfo.name && <Heading as="h3">{props.appInfo.name}</Heading>}
       </Flex>
 
@@ -133,19 +151,20 @@ export function BuildDetailsSidebarAppInfo(props: BuildDetailsSidebarAppInfoProp
   );
 }
 
-const AppIcon = styled('div')`
+const AppIcon = styled('img')`
+  border-radius: 4px;
+`;
+
+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};
 `;

static/app/views/preprod/types/buildDetailsTypes.ts

@@ -13,6 +13,7 @@ export interface BuildDetailsApiResponse {
 }
 
 export interface BuildDetailsAppInfo {
+  app_icon_id?: string | null;
   android_app_info?: AndroidAppInfo | null;
   app_id?: string | null;
   apple_app_info?: AppleAppInfo | null;