From 7234197b77e66e4f917e6ed6ff734a2ce2316046 Mon Sep 17 00:00:00 2001
From: Brendonovich <14191578+Brendonovich@users.noreply.github.com>
Date: Wed, 26 Aug 2026 02:28:09 +0000
Subject: [PATCH 1/2] fix(app): show project logos throughout settings

---
 packages/app/src/settings/workspaces/project-dialog.tsx | 1 +
 packages/app/src/settings/workspaces/projects.tsx       | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/settings/workspaces/project-dialog.tsx b/packages/app/src/settings/workspaces/project-dialog.tsx
index 6c8f06e67262..5cd3739393a8 100644
--- a/packages/app/src/settings/workspaces/project-dialog.tsx
+++ b/packages/app/src/settings/workspaces/project-dialog.tsx
@@ -59,6 +59,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
             <Tabs.Trigger value="general">
               <ProjectAvatar
                 fallback={projectName()}
+                src={getProjectAvatarSource(props.project.id, props.project.icon)}
                 variant={getProjectAvatarVariant(props.project.icon?.color)}
                 class="!size-4 shrink-0"
               />
diff --git a/packages/app/src/settings/workspaces/projects.tsx b/packages/app/src/settings/workspaces/projects.tsx
index 10d02030bace..b8edc9d94d02 100644
--- a/packages/app/src/settings/workspaces/projects.tsx
+++ b/packages/app/src/settings/workspaces/projects.tsx
@@ -7,7 +7,7 @@ import { useLanguage } from "@/runtime/i18n/language"
 import { useGlobal } from "@/runtime/server/runtime"
 import { getProjectAvatarVariant } from "@/shell/state/layout"
 import { ServerConnection, serverName } from "@/runtime/server/registry"
-import { displayName } from "@/shell/layout/helpers"
+import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
 import { InlineServerSelect } from "@/settings/server-select"
 import { DialogEditProject } from "./project-dialog"
 import "@/settings/settings.css"
@@ -47,7 +47,12 @@ export const SettingsProjects: Component = () => {
         onClick={() => openProjectSettings(props.project, props.server)}
       >
         <div class="flex items-center gap-2.5 min-w-0 flex-1">
-          <ProjectAvatar fallback={name()} variant={color()} class="shrink-0" />
+          <ProjectAvatar
+            fallback={name()}
+            src={getProjectAvatarSource(props.project.id, props.project.icon)}
+            variant={color()}
+            class="shrink-0"
+          />
           <span class="text-13-medium text-v2-text-text-base truncate">{name()}</span>
         </div>
         <div class="flex items-center gap-2 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">

From c027ed97ca7c6c645a364832b89f72aa1911a289 Mon Sep 17 00:00:00 2001
From: Brendonovich <14191578+Brendonovich@users.noreply.github.com>
Date: Wed, 26 Aug 2026 02:32:06 +0000
Subject: [PATCH 2/2] refactor(app): centralize project avatar presentation

---
 .../settings/workspaces/project-dialog.tsx    | 18 ++++++--------
 .../app/src/settings/workspaces/projects.tsx  | 13 +++-------
 .../app/src/shell/layout/project-icon.tsx     | 24 +++++++++++++++++++
 3 files changed, 34 insertions(+), 21 deletions(-)
 create mode 100644 packages/app/src/shell/layout/project-icon.tsx

diff --git a/packages/app/src/settings/workspaces/project-dialog.tsx b/packages/app/src/settings/workspaces/project-dialog.tsx
index 5cd3739393a8..7d8232c48578 100644
--- a/packages/app/src/settings/workspaces/project-dialog.tsx
+++ b/packages/app/src/settings/workspaces/project-dialog.tsx
@@ -11,7 +11,8 @@ import { useLanguage } from "@/runtime/i18n/language"
 import { getProjectAvatarVariant, type LocalProject } from "@/shell/state/layout"
 import { ServerConnection } from "@/runtime/server/registry"
 import { LocationProvider } from "@/workspaces/location"
-import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
+import { displayName } from "@/shell/layout/helpers"
+import { ProjectIcon } from "@/shell/layout/project-icon"
 import { createEditProjectModel } from "./project-model"
 import { ProjectSettingsExtensions } from "./project-extensions"
 import { SettingsServerDataScope } from "@/settings/server-scope"
@@ -57,12 +58,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
         <Tabs.List>
           <div class="project-settings-nav">
             <Tabs.Trigger value="general">
-              <ProjectAvatar
-                fallback={projectName()}
-                src={getProjectAvatarSource(props.project.id, props.project.icon)}
-                variant={getProjectAvatarVariant(props.project.icon?.color)}
-                class="!size-4 shrink-0"
-              />
+              <ProjectIcon project={props.project} class="!size-4 shrink-0" />
               <span class="truncate">{projectName()}</span>
             </Tabs.Trigger>
             <Tabs.Trigger value="scripts">
@@ -115,14 +111,14 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
                     onDragLeave={model.dragLeave}
                     onClick={model.iconClick}
                   >
-                    <ProjectAvatar
+                    <ProjectIcon
+                      project={props.project}
                       fallback={model.store.name || model.defaultName()}
-                      src={getProjectAvatarSource(props.project.id, {
+                      icon={{
                         color: model.store.color,
                         url: props.project.icon?.url,
                         override: model.store.iconOverride,
-                      })}
-                      variant={getProjectAvatarVariant(model.store.color)}
+                      }}
                       class="!size-16 [&_[data-slot=project-avatar-surface]]:!rounded-[6px] [&_[data-slot=project-avatar-surface]]:!text-[32px]"
                     />
                     <span
diff --git a/packages/app/src/settings/workspaces/projects.tsx b/packages/app/src/settings/workspaces/projects.tsx
index b8edc9d94d02..78d949d759e4 100644
--- a/packages/app/src/settings/workspaces/projects.tsx
+++ b/packages/app/src/settings/workspaces/projects.tsx
@@ -1,13 +1,12 @@
 import { Component, For, Show, createMemo, createSignal } from "solid-js"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
-import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useGlobal } from "@/runtime/server/runtime"
-import { getProjectAvatarVariant } from "@/shell/state/layout"
 import { ServerConnection, serverName } from "@/runtime/server/registry"
-import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
+import { displayName } from "@/shell/layout/helpers"
+import { ProjectIcon } from "@/shell/layout/project-icon"
 import { InlineServerSelect } from "@/settings/server-select"
 import { DialogEditProject } from "./project-dialog"
 import "@/settings/settings.css"
@@ -40,19 +39,13 @@ export const SettingsProjects: Component = () => {
 
   const ProjectRow: Component<{ project: ProjectItem; server: ServerConnection.Any }> = (props) => {
     const name = () => displayName(props.project)
-    const color = () => getProjectAvatarVariant(props.project.icon?.color)
     return (
       <div
         class="group flex items-center justify-between gap-5 px-4 py-2.5 rounded-lg bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)] cursor-pointer transition-all hover:bg-v2-background-bg-layer-01"
         onClick={() => openProjectSettings(props.project, props.server)}
       >
         <div class="flex items-center gap-2.5 min-w-0 flex-1">
-          <ProjectAvatar
-            fallback={name()}
-            src={getProjectAvatarSource(props.project.id, props.project.icon)}
-            variant={color()}
-            class="shrink-0"
-          />
+          <ProjectIcon project={props.project} class="shrink-0" />
           <span class="text-13-medium text-v2-text-text-base truncate">{name()}</span>
         </div>
         <div class="flex items-center gap-2 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
diff --git a/packages/app/src/shell/layout/project-icon.tsx b/packages/app/src/shell/layout/project-icon.tsx
new file mode 100644
index 000000000000..e7218ce42b12
--- /dev/null
+++ b/packages/app/src/shell/layout/project-icon.tsx
@@ -0,0 +1,24 @@
+import { ProjectAvatar, type ProjectAvatarProps } from "@opencode-ai/ui/project-avatar"
+import { splitProps } from "solid-js"
+import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
+import { getProjectAvatarVariant, type LocalProject } from "@/shell/state/layout"
+
+type ProjectIconProps = Omit<ProjectAvatarProps, "fallback" | "src" | "variant"> & {
+  project: LocalProject
+  fallback?: string
+  icon?: LocalProject["icon"]
+}
+
+export function ProjectIcon(props: ProjectIconProps) {
+  const [local, rest] = splitProps(props, ["project", "fallback", "icon"])
+  const icon = () => local.icon ?? local.project.icon
+
+  return (
+    <ProjectAvatar
+      {...rest}
+      fallback={local.fallback ?? displayName(local.project)}
+      src={getProjectAvatarSource(local.project.id, icon())}
+      variant={getProjectAvatarVariant(icon()?.color)}
+    />
+  )
+}