refactor(linux): drop the leftmost-cell ribbon on changed rows; tint + strikethrough are enough

Author: datlechin

linux/crates/app/src/ui/app/mod.rs

@@ -749,38 +749,21 @@ impl SimpleComponent for App {
                     box-shadow: inset 0 0 0 2px @accent_color;\
                     border-radius: 2px;\
                 }\
-                /* Row-level pending indicators on the leftmost cell.\
-                   A 4px inset ribbon flush to the left edge marks the\
-                   row's overall mutation state. Independent of the\
-                   per-cell highlights so a row with one modified cell\
-                   still reads as a modified row at a glance. The\
-                   `solid` (non-alpha) accent matches the saturation of\
-                   GNOME Builder's diff gutters — at 3px+alpha the\
-                   ribbon was effectively invisible against tinted row\
-                   backgrounds.\
-                */\
-                .tp-row-leftmost-insert {\
-                    box-shadow: inset 4px 0 0 @success_color;\
-                }\
-                .tp-row-leftmost-update {\
-                    box-shadow: inset 4px 0 0 @warning_color;\
-                }\
-                .tp-row-leftmost-delete {\
-                    box-shadow: inset 4px 0 0 @error_color;\
-                }\
                 /* One-shot flash on the row that produced a failing\
                    commit statement. Animation fades the red overlay\
                    to transparent over ~1.8s; the bind callback\
                    re-applies the class until the BrowseTab clears\
-                   tracker.error_row.\
+                   tracker.error_row. No leftmost ribbon — the row's\
+                   background already turns red via the animation,\
+                   matching the pending-state row tints which are\
+                   themselves background-only (no extra gutter).\
                 */\
                 @keyframes tp-flash-error {\
                     0%   { background: alpha(@error_color, 0.55); }\
                     100% { background: alpha(@error_color, 0); }\
                 }\
                 .tp-row-leftmost-error-flash {\
                     animation: tp-flash-error 1.8s ease-out;\
-                    box-shadow: inset 3px 0 0 @error_color;\
                 }",
             );
             gtk::style_context_add_provider_for_display(&display, &provider, gtk::STYLE_PROVIDER_PRIORITY_APPLICATION);

linux/crates/app/src/ui/grid.rs

@@ -341,17 +341,16 @@ fn build_column(
         // Persisted rows are keyed by PK column values via
         // RowKey::from_pk_values.
         //
-        // The leftmost cell (idx == 0) gets an extra row-level class
-        // (tp-row-leftmost-{insert|update|delete}) that draws a 3px
-        // accent ribbon flush to the left edge — a HIG-aligned signal
-        // for "this row has changes" that survives row recycling.
+        // Pending state is communicated through the row's BACKGROUND
+        // TINT alone (insert = green, modified = orange via
+        // `.tp-cell-modified`, delete = red+strikethrough). No
+        // leftmost-cell ribbon — that custom GNOME-Builder-style
+        // gutter felt foreign next to the AdwListView idiom, and
+        // the tint+strikethrough already make the row state legible
+        // at a glance.
         let pending_classes: Vec<&'static str> = if let Some(_tab_id) = tab_ctx_for_bind.tab_id {
             if row.draft_id().is_some() {
-                let mut v = vec!["tp-row-pending-insert"];
-                if idx == 0 {
-                    v.push("tp-row-leftmost-insert");
-                }
-                v
+                vec!["tp-row-pending-insert"]
             } else {
                 let pk_values: Vec<Value> = tab_ctx_for_bind
                     .pk_col_indices
@@ -372,20 +371,12 @@ fn build_column(
                         (_, CellState::Modified) => v.push("tp-cell-modified"),
                         _ => {}
                     }
-                    if idx == 0 {
-                        // Error-row flash takes precedence over the
-                        // pending-state ribbon: the user's attention
-                        // should be on the failing row first.
-                        if t.is_error_row(&key) {
-                            v.push("tp-row-leftmost-error-flash");
-                        } else {
-                            match row_state {
-                                RowState::PendingDelete => v.push("tp-row-leftmost-delete"),
-                                RowState::InsertDraft => v.push("tp-row-leftmost-insert"),
-                                RowState::Modified => v.push("tp-row-leftmost-update"),
-                                RowState::Clean => {}
-                            }
-                        }
+                    // Error-flash overlay on the leftmost cell — a
+                    // transient background-only animation pulls the
+                    // eye to the row that failed to commit. No
+                    // accompanying gutter ribbon (see comment above).
+                    if idx == 0 && t.is_error_row(&key) {
+                        v.push("tp-row-leftmost-error-flash");
                     }
                     v
                 })
@@ -683,9 +674,6 @@ const PENDING_CSS_CLASSES: &[&str] = &[
     "tp-cell-modified",
     "tp-row-pending-delete",
     "tp-row-pending-insert",
-    "tp-row-leftmost-insert",
-    "tp-row-leftmost-update",
-    "tp-row-leftmost-delete",
     "tp-row-leftmost-error-flash",
 ];