fix(ui): merge adjacent selected tree rows into one block (#1486)

Each selected row kept its own rounded corners, so a contiguous
multi-selection showed notches between rows. Rows whose neighbour is
also selected now drop the radius on that side.

src/ui/Tree.module.css

@@ -77,6 +77,15 @@
 .tree:focus-within .selected {
   background: var(--bg-tree-selected);
 }
+/* Adjacent selected rows merge into one rounded block. */
+.joinPrev {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.joinNext {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
 .tree:focus-visible .lead:not(.selected) {
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus-ring) 50%, transparent);
 }

src/ui/Tree.tsx

@@ -626,6 +626,10 @@ export function Tree<T>(props: TreeProps<T>) {
               );
             }
             const isSelected = selected.has(row.key);
+            const prevRow = rows[v.index - 1];
+            const nextRow = rows[v.index + 1];
+            const joinPrev = isSelected && !!prevRow && !prevRow.loading && selected.has(prevRow.key);
+            const joinNext = isSelected && !!nextRow && !nextRow.loading && selected.has(nextRow.key);
             const isLead = v.index === leadIndex;
             const matches = matchMap.get(row.key) ?? null;
             const state: TreeRowState = {
@@ -655,6 +659,8 @@ export function Tree<T>(props: TreeProps<T>) {
                   props.horizontalScroll && styles.wideRow,
                   rowClassName?.(row.node),
                   isSelected && styles.selected,
+                  joinPrev && styles.joinPrev,
+                  joinNext && styles.joinNext,
                   isLead && styles.lead,
                   reordering.drop?.key === row.key && styles[reordering.drop.position],
                 )}