fix: consolidate project avatar source logic (#23819)

2 files changed, 23 insertions, 13 deletions

diff --git a/packages/app/src/components/dialog-edit-project.tsx b/packages/app/src/components/dialog-edit-project.tsx
index 621d56646..8eb12daf5 100644
--- a/packages/app/src/components/dialog-edit-project.tsx
+++ b/packages/app/src/components/dialog-edit-project.tsx
@@ -12,6 +12,7 @@ import { type LocalProject, getAvatarColors } from "@/context/layout"
 import { getFilename } from "@opencode-ai/shared/util/path"
 import { Avatar } from "@opencode-ai/ui/avatar"
 import { useLanguage } from "@/context/language"
+import { getProjectAvatarSource } from "@/pages/layout/sidebar-items"
 
 const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
 
@@ -144,7 +145,11 @@ export function DialogEditProject(props: { project: LocalProject }) {
                   }}
                 >
                   <Show
-                    when={store.iconOverride || (!store.color && props.project.icon?.url)}
+                    when={getProjectAvatarSource(props.project.id, {
+                      color: store.color,
+                      url: props.project.icon?.url,
+                      override: store.iconOverride,
+                    })}
                     fallback={
                       <div class="size-full flex items-center justify-center">
                         <Avatar
@@ -155,11 +160,13 @@ export function DialogEditProject(props: { project: LocalProject }) {
                       </div>
                     }
                   >
-                    <img
-                      src={store.iconOverride || props.project.icon?.url}
-                      alt={language.t("dialog.project.edit.icon.alt")}
-                      class="size-full object-cover"
-                    />
+                    {(src) => (
+                      <img
+                        src={src()}
+                        alt={language.t("dialog.project.edit.icon.alt")}
+                        class="size-full object-cover"
+                      />
+                    )}
                   </Show>
                 </div>
                 <div
@@ -216,6 +223,7 @@ export function DialogEditProject(props: { project: LocalProject }) {
                           store.color !== color,
                       }}
                       onClick={() => {
+                        if (store.color === color && !props.project.icon?.url) return
                         setStore("color", store.color === color ? undefined : color)
                       }}
                     >
diff --git a/packages/app/src/pages/layout/sidebar-items.tsx b/packages/app/src/pages/layout/sidebar-items.tsx
index 88d50db3e..5170311a7 100644
--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ b/packages/app/src/pages/layout/sidebar-items.tsx
@@ -19,6 +19,14 @@ import { childSessionOnPath, hasProjectPermissions } from "./helpers"
 
 const OPENCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
 
+export function getProjectAvatarSource(id?: string, icon?: { color?: string; url?: string; override?: string }) {
+  return id === OPENCODE_PROJECT_ID
+    ? "https://opencode.ai/favicon.svg"
+    : icon?.color
+      ? undefined
+      : icon?.override || icon?.url
+}
+
 export const ProjectIcon = (props: { project: LocalProject; class?: string; notify?: boolean }): JSX.Element => {
   const globalSync = useGlobalSync()
   const notification = useNotification()
@@ -42,13 +50,7 @@ export const ProjectIcon = (props: { project: LocalProject; class?: string; noti
       <div class="size-full rounded overflow-clip">
         <Avatar
           fallback={name()}
-          src={
-            props.project.id === OPENCODE_PROJECT_ID
-              ? "https://opencode.ai/favicon.svg"
-              : props.project.icon?.color
-                ? undefined
-                : props.project.icon?.override || props.project.icon?.url
-          }
+          src={getProjectAvatarSource(props.project.id, props.project.icon)}
           {...getAvatarColors(props.project.icon?.color)}
           class="size-full rounded"
           classList={{ "badge-mask": notify() }}