fix(app): distinguish selected sidebar rows

Give selected rows their own semantic surface so selection remains visible through hover while badges, status rings, and action scrims inherit the correct backdrop.

packages/app/src/components/sidebar-workspace-list.tsx

@@ -388,8 +388,8 @@ function getProjectWorkspaceRowStyle({
 }) {
   return [
     styles.workspaceRow,
-    selected && styles.sidebarRowSelected,
     isHovered && styles.workspaceRowHovered,
+    selected && styles.sidebarRowSelected,
     isDragging && styles.workspaceRowDragging,
     isPressed && styles.workspaceRowPressed,
   ];
@@ -2751,7 +2751,7 @@ const styles = StyleSheet.create((theme) => ({
     ...theme.shadow.md,
   },
   sidebarRowSelected: {
-    backgroundColor: theme.colors.surfaceSidebarHover,
+    backgroundColor: theme.colors.surfaceSidebarSelected,
   },
   workspaceRowContainer: {
     position: "relative",

packages/app/src/components/sidebar/project-leading-visual.tsx

@@ -207,6 +207,8 @@ function getStatusBadgeBackdropStyle(backdrop: SidebarSurfaceBackdrop): ViewStyl
       return styles.statusBadgeOnSidebar;
     case "surfaceSidebarHover":
       return styles.statusBadgeOnSidebarHover;
+    case "surfaceSidebarSelected":
+      return styles.statusBadgeOnSidebarSelected;
     case "surface2":
       return styles.statusBadgeOnSurface2;
   }
@@ -309,6 +311,7 @@ const styles = StyleSheet.create((theme) => {
     },
     statusBadgeOnSidebar: { backgroundColor: theme.colors.surfaceSidebar },
     statusBadgeOnSidebarHover: { backgroundColor: theme.colors.surfaceSidebarHover },
+    statusBadgeOnSidebarSelected: { backgroundColor: theme.colors.surfaceSidebarSelected },
     statusBadgeOnSurface2: { backgroundColor: theme.colors.surface2 },
     statusDotRunning: statusDot("running"),
     statusDotFailed: statusDot("failed"),

packages/app/src/components/sidebar/sidebar-row-backdrop.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { getSidebarRowBackdrop } from "./sidebar-row-backdrop";
+
+describe("getSidebarRowBackdrop", () => {
+  it("keeps selected rows on the selected surface while hovered", () => {
+    expect(getSidebarRowBackdrop({ selected: true, isHovered: true })).toBe(
+      "surfaceSidebarSelected",
+    );
+  });
+
+  it("uses the hover surface for an unselected hovered row", () => {
+    expect(getSidebarRowBackdrop({ isHovered: true })).toBe("surfaceSidebarHover");
+  });
+});

packages/app/src/components/sidebar/sidebar-row-backdrop.ts

@@ -22,6 +22,7 @@ export function getSidebarRowBackdrop({
   isHovered?: boolean;
 }): SidebarSurfaceBackdrop {
   if (isDragging || isPressed) return "surface2";
-  if (selected || isHovered) return "surfaceSidebarHover";
+  if (selected) return "surfaceSidebarSelected";
+  if (isHovered) return "surfaceSidebarHover";
   return "surfaceSidebar";
 }

packages/app/src/components/sidebar/sidebar-status-list.tsx

@@ -1025,8 +1025,8 @@ function getStatusWorkspaceRowStyle({
   return [
     styles.workspaceRow,
     inStatusGroup && sidebarWorkspaceRowStyles.rowIndented,
-    selected && styles.sidebarRowSelected,
     isHovered && styles.workspaceRowHovered,
+    selected && styles.sidebarRowSelected,
     isDragging && styles.workspaceRowDragging,
     isPressed && styles.workspaceRowPressed,
   ];
@@ -1131,6 +1131,6 @@ const styles = StyleSheet.create((theme) => ({
     ...theme.shadow.md,
   },
   sidebarRowSelected: {
-    backgroundColor: theme.colors.surfaceSidebarHover,
+    backgroundColor: theme.colors.surfaceSidebarSelected,
   },
 }));

packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx

@@ -73,6 +73,7 @@ const ThemedTrailingActionScrimSvg = withUnistyles(TrailingActionScrimSvg);
 const scrimColorMappings: Record<SidebarSurfaceBackdrop, (theme: Theme) => { color: string }> = {
   surfaceSidebar: (theme) => ({ color: theme.colors.surfaceSidebar }),
   surfaceSidebarHover: (theme) => ({ color: theme.colors.surfaceSidebarHover }),
+  surfaceSidebarSelected: (theme) => ({ color: theme.colors.surfaceSidebarSelected }),
   surface2: (theme) => ({ color: theme.colors.surface2 }),
 };
 

packages/app/src/components/sidebar/sidebar-workspace-row.tsx

@@ -494,8 +494,8 @@ function getWorkspaceRowStyle({
 }) {
   return [
     styles.workspaceRow,
-    selected && styles.sidebarRowSelected,
     isHovered && styles.workspaceRowHovered,
+    selected && styles.sidebarRowSelected,
     isDragging && styles.workspaceRowDragging,
     isPressed && styles.workspaceRowPressed,
   ];
@@ -535,7 +535,7 @@ const styles = StyleSheet.create((theme) => ({
     ...theme.shadow.md,
   },
   sidebarRowSelected: {
-    backgroundColor: theme.colors.surfaceSidebarHover,
+    backgroundColor: theme.colors.surfaceSidebarSelected,
   },
   workspaceCreatingText: {
     color: theme.colors.foregroundMuted,

packages/app/src/components/status-ring/frame.tsx

@@ -50,6 +50,8 @@ function getBackdropStyle(backdrop: SurfaceBackdrop | null | undefined) {
       return styles.backdropSurfaceSidebar;
     case "surfaceSidebarHover":
       return styles.backdropSurfaceSidebarHover;
+    case "surfaceSidebarSelected":
+      return styles.backdropSurfaceSidebarSelected;
     case "surface2":
       return styles.backdropSurface2;
     default:
@@ -91,6 +93,7 @@ export const styles = StyleSheet.create((theme) => {
     backdropSurface1: { backgroundColor: theme.colors.surface1 },
     backdropSurfaceSidebar: { backgroundColor: theme.colors.surfaceSidebar },
     backdropSurfaceSidebarHover: { backgroundColor: theme.colors.surfaceSidebarHover },
+    backdropSurfaceSidebarSelected: { backgroundColor: theme.colors.surfaceSidebarSelected },
     backdropSurface2: { backgroundColor: theme.colors.surface2 },
 
     // The closed ring the quarter runs on. Same colour rather than a grey so the indicator is one