From d55125149bdf800bc369540425d35aa66c270da9 Mon Sep 17 00:00:00 2001
From: Floyd Wang <gassnake999@gmail.com>
Date: Thu, 20 Nov 2025 16:46:57 +0800
Subject: [PATCH] list: Fix incorrect selected item background color (#1648)

It will mix `accent` and `list_active` before.
---
 crates/story/src/list_story.rs  | 28 ++++------------------------
 crates/ui/src/list/list_item.rs | 11 +++++++----
 2 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/crates/story/src/list_story.rs b/crates/story/src/list_story.rs
index 3e68ea92..b0456f28 100644
--- a/crates/story/src/list_story.rs
+++ b/crates/story/src/list_story.rs
@@ -4,7 +4,7 @@ use fake::Fake;
 use gpui::{
     App, AppContext, Context, ElementId, Entity, FocusHandle, Focusable, InteractiveElement,
     IntoElement, ParentElement, Render, RenderOnce, ScrollStrategy, SharedString, Styled,
-    Subscription, Task, Timer, Window, actions, div, prelude::FluentBuilder as _, px,
+    Subscription, Task, Timer, Window, actions, div, px,
 };
 
 use gpui_component::{
@@ -46,22 +46,15 @@ impl Company {
 #[derive(IntoElement)]
 struct CompanyListItem {
     base: ListItem,
-    ix: IndexPath,
     company: Rc<Company>,
     selected: bool,
 }
 
 impl CompanyListItem {
-    pub fn new(
-        id: impl Into<ElementId>,
-        company: Rc<Company>,
-        ix: IndexPath,
-        selected: bool,
-    ) -> Self {
+    pub fn new(id: impl Into<ElementId>, company: Rc<Company>, selected: bool) -> Self {
         CompanyListItem {
             company,
-            ix,
-            base: ListItem::new(id),
+            base: ListItem::new(id).selected(selected),
             selected,
         }
     }
@@ -92,24 +85,11 @@ impl RenderOnce for CompanyListItem {
             _ => cx.theme().foreground,
         };
 
-        let bg_color = if self.selected {
-            cx.theme().list_active
-        } else if self.ix.row % 2 == 0 {
-            cx.theme().list
-        } else {
-            cx.theme().list_even
-        };
-
         self.base
             .px_2()
             .py_1()
             .overflow_x_hidden()
-            .bg(bg_color)
             .border_1()
-            .border_color(bg_color)
-            .when(self.selected, |this| {
-                this.border_color(cx.theme().list_active_border)
-            })
             .rounded(cx.theme().radius)
             .child(
                 h_flex()
@@ -293,7 +273,7 @@ impl ListDelegate for CompanyListDelegate {
     fn render_item(&self, ix: IndexPath, _: &mut Window, _: &mut App) -> Option<Self::Item> {
         let selected = Some(ix) == self.selected_index || Some(ix) == self.confirmed_index;
         if let Some(company) = self.matched_companies[ix.section].get(ix.row) {
-            return Some(CompanyListItem::new(ix, company.clone(), ix, selected));
+            return Some(CompanyListItem::new(ix, company.clone(), selected));
         }
 
         None
diff --git a/crates/ui/src/list/list_item.rs b/crates/ui/src/list/list_item.rs
index d03179cf..c1d3d869 100644
--- a/crates/ui/src/list/list_item.rs
+++ b/crates/ui/src/list/list_item.rs
@@ -203,16 +203,19 @@ impl RenderOnce for ListItem {
             .when_some(self.suffix, |this, suffix| this.child(suffix(window, cx)))
             .map(|this| {
                 if is_selectable && (self.selected || self.secondary_selected) {
-                    this.bg(cx.theme().accent).child(
+                    let bg = if self.selected {
+                        cx.theme().list_active
+                    } else {
+                        cx.theme().accent
+                    };
+
+                    this.bg(bg).child(
                         div()
                             .absolute()
                             .top_0()
                             .left_0()
                             .right_0()
                             .bottom_0()
-                            .when(!self.secondary_selected, |this| {
-                                this.bg(cx.theme().list_active)
-                            })
                             .border_1()
                             .border_color(cx.theme().list_active_border)
                             .refine_style(&selected_style),