Make staged hunks hollow and unstaged filled

Author: bohutang

packages/ui/src/components/panels/diff/ZedDiffViewer.test.tsx

@@ -163,6 +163,6 @@ describe('ZedDiffViewer', () => {
     );
     const css = container.querySelector('style')?.textContent || '';
     expect(css).toContain('st-hunk-status--staged');
-    expect(css).toContain('Zed-like: staged hunks have a persistent frame');
+    expect(css).toContain('Zed-like: staged_hollow -> staged has border');
   });
 });

packages/ui/src/components/panels/diff/ZedDiffViewer.tsx

@@ -471,12 +471,17 @@ export const ZedDiffViewer: React.FC<{
             box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-hunk-frame-color) 36%, transparent);
             transition: opacity 110ms ease;
           }
-          /* Zed-like: staged hunks have a persistent frame to distinguish them from unstaged hunks. */
-          .st-diff-table .diff-hunk:has(.st-hunk-status--staged):has(.diff-code-insert, .diff-code-delete)::after { opacity: 1; }
-          .st-diff-table .diff-hunk:has(.diff-code-insert, .diff-code-delete):hover::after {
+          /* Zed-like: staged_hollow -> staged has border; unstaged filled -> no border even on hover. */
+          .st-diff-table .diff-hunk:has(.st-hunk-status--staged):has(.diff-code-insert, .diff-code-delete)::after {
             opacity: 1;
+          }
+          .st-diff-table .diff-hunk:has(.st-hunk-status--staged):has(.diff-code-insert, .diff-code-delete):hover::after {
             box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-hunk-frame-color) 48%, transparent);
           }
+          .st-diff-table .diff-hunk:has(.st-hunk-status--unstaged):has(.diff-code-insert, .diff-code-delete)::after,
+          .st-diff-table .diff-hunk:has(.st-hunk-status--unstaged):has(.diff-code-insert, .diff-code-delete):hover::after {
+            opacity: 0;
+          }
 
           .st-diff-table .diff-hunk:has(.diff-code-insert, .diff-code-delete) tr td {
             background-image: linear-gradient(
@@ -497,9 +502,12 @@ export const ZedDiffViewer: React.FC<{
             );
           }
           /* Extra contrast on hover (more Zed-like). */
-          .st-diff-table .diff-hunk:has(.diff-code-insert, .diff-code-delete):hover {
+          .st-diff-table .diff-hunk:has(.st-hunk-status--unstaged):has(.diff-code-insert, .diff-code-delete):hover {
             filter: saturate(1.04) brightness(1.02);
           }
+          .st-diff-table .diff-hunk:has(.st-hunk-status--staged):has(.diff-code-insert, .diff-code-delete):hover {
+            filter: saturate(1.02) brightness(1.01);
+          }
 
           /* The widget row is used only as an "anchor"; it should not consume height. */
           .st-diff-table .diff-widget { height: 0; }