From afad6a2636b40d1a1c95e7b6e20181fd116a1770 Mon Sep 17 00:00:00 2001
From: Greyson Parrelli <greyson@signal.org>
Date: Wed, 26 Aug 2026 22:38:03 -0400
Subject: [PATCH] Simplify sidebar styling.

---
 src/Window.zig |  6 +++---
 src/style.css  | 33 +++++++++++++++++++++++----------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/Window.zig b/src/Window.zig
index 818e043..c13e2f8 100644
--- a/src/Window.zig
+++ b/src/Window.zig
@@ -1629,9 +1629,9 @@ fn applySidebarCollapsed(self: *Window, collapsed: bool) void {
 }
 
 /// One row's share of the collapse: everything but the emoji (or kind icon)
-/// goes. The status dot goes too — the bar down the row's leading edge and the
-/// wash behind it carry the state at this width, and they were designed to be
-/// the glanceable half of the pair anyway.
+/// goes. The status dot goes too — the bar down the row's leading edge carries
+/// the state at this width (with a wash behind it for the states that have one),
+/// and it was designed to be the glanceable half of the pair anyway.
 fn applyRowCollapsed(self: *Window, tab: *Tab) void {
     const shown: c_int = @intFromBool(!self.sidebar_collapsed);
     tab.label.as(gtk.Widget).setVisible(shown);
diff --git a/src/style.css b/src/style.css
index fdc5739..2a8e29d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -133,10 +133,10 @@ button.playpen-header-button:hover,
 
 /* State on the row itself, not just on its dot.
 
-   A bar down the leading edge and a wash behind the whole row, both in the
-   state's colour. The dot says what a row is doing once you are reading it;
-   these are what let you sweep a sidebar of a dozen tabs and land on the one
-   that wants you without reading any of them.
+   A bar down the leading edge, and behind the row a wash of the same colour for
+   the two states that actually want you. The dot says what a row is doing once
+   you are reading it; these are what let you sweep a sidebar of a dozen tabs
+   and land on the one that wants you without reading any of them.
 
    The bar is an inset shadow rather than a real border because a border takes
    part in layout: 3px of it would shove every label sideways as a tab changed
@@ -144,15 +144,27 @@ button.playpen-header-button:hover,
 
    These come after the :selected rules deliberately. Equal specificity means
    source order decides, and a state outranks "this is the tab you are on". */
+
+/* No wash for working. It is the most common state by far, and a sidebar where
+   half the rows are tinted all afternoon teaches you to stop looking. */
 .playpen-list > row.playpen-attn-busy {
   box-shadow: inset 3px 0 0 @pp_accent_strong;
 }
 
-/* No wash for working. It is the most common state by far, and a sidebar where
-   half the rows are tinted all afternoon teaches you to stop looking. */
+/* No wash for finished either, for a different reason: a tinted row is what
+   selection looks like in this list, so washing the finished ones left "the tab
+   you are on" and "the tab that just finished" saying the same thing. The dot
+   and a bar are enough — nothing here is waiting on you.
+
+   The bar is a background image rather than the inset shadow the other states
+   use, because a shadow is clipped to the row's 8px corners and comes out
+   tapered at both ends. Kept short enough to clear those corners entirely, so
+   what lands is a plain rectangle. */
 .playpen-list > row.playpen-attn-done {
-  box-shadow: inset 3px 0 0 @pp_ok;
-  background-color: alpha(@pp_ok, 0.14);
+  background-image: linear-gradient(@pp_ok, @pp_ok);
+  background-size: 3px 12px;
+  background-position: left center;
+  background-repeat: no-repeat;
 }
 
 .playpen-list > row.playpen-attn-input {
@@ -167,8 +179,8 @@ button.playpen-header-button:hover,
 
 /* The current row keeps its own background: the wash and the selection would
    otherwise blend into a colour that reads as neither. The bar survives, which
-   is the part that carries the state. */
-.playpen-list > row:selected.playpen-attn-done,
+   is the part that carries the state. Done is absent because it no longer has a
+   wash to suppress. */
 .playpen-list > row:selected.playpen-attn-input,
 .playpen-list > row:selected.playpen-attn-failed {
   background-color: @pp_row_selected;
@@ -185,6 +197,7 @@ button.playpen-header-button:hover,
 .playpen-list > row.dragging {
   opacity: 0.65;
   background-color: alpha(@pp_accent_strong, 0.18);
+  background-image: none;
   box-shadow: inset 3px 0 0 @pp_accent_strong;
 }