[UI] Highlight the selected trace and spans better in the UI [1/n]

[XinweiHe]

Summary

as titled.
resolves https://github.com/traceroot-ai/traceroot-internal/issues/295

Type of Change

• feat - A new feature
• fix - A bug fix
• docs - Documentation only changes
• style - Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• refactor - A code change that neither fixes a bug nor adds a feature
• perf - A code change that improves performance
• test - Adding missing tests or correcting existing tests
• build - Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci - Changes to our Cl configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
• chore - Other changes that don't modify sc or test files
• revert - Reverts a previous commit
• security - A security fix or improvement
• github - Changes to our GitHub configuration files and scripts
• other (please describe):

Details

as titled.

Screenshots / Recordings (if applicable)

Checklist

• I have read the CONTRIBUTING.md
• I have added/updated tests where applicable
• I have added screenshots or recordings for UI changes (if applicable)
• I have updated documentation where necessary

[greptile-apps]

Greptile Overview

Greptile Summary

Enhanced the visual highlighting of selected traces and spans in the UI by updating the background color from bg-zinc-100 to bg-zinc-200 (and dark mode equivalents) and adding a 4px left border with a distinctive color (border-l-zinc-400).

• Improved visual contrast makes selected items more distinguishable from unselected items
• Consistent styling applied across both trace and span components
• Changes are purely cosmetic with no impact on functionality or logic

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are purely cosmetic, involving only CSS class modifications to improve UI visibility. No logic changes, no new functionality, and no potential for runtime errors.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
ui/src/components/explore/Trace.tsx	5/5	Enhanced visual highlighting for selected traces with darker background (bg-zinc-200) and 4px left border indicator
ui/src/components/explore/span/Span.tsx	5/5	Applied consistent visual highlighting to selected spans matching trace styling

Sequence Diagram

sequenceDiagram
    participant User
    participant Trace
    participant Span
    participant DOM

    User->>Trace: Click on trace item
    Trace->>Trace: handleTraceClick(traceId)
    Trace->>Trace: Update selectedTraceIds
    Trace->>DOM: Apply new styling classes
    Note over DOM: bg-zinc-200 dark:bg-zinc-800<br/>border-l-4 border-l-zinc-400
    Trace->>Span: Expand trace and render spans
    
    User->>Span: Click on span item
    Span->>Span: handleSpanClick()
    Span->>Trace: onSpanSelect(spanId, childSpanIds)
    Span->>DOM: Apply new styling classes
    Note over DOM: bg-zinc-200 dark:bg-zinc-800<br/>border-l-4 border-l-zinc-400

Loading

[greptile-apps]

_{2 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}