diff options
Diffstat (limited to 'frontend/src/components/Sidebar.tsx')
| -rw-r--r-- | frontend/src/components/Sidebar.tsx | 20 |
1 files changed, 19 insertions, 1 deletions
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 06c8704..3008ba3 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1875,6 +1875,9 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => { .map((trace) => { const isSelected = mergeSelectedIds.includes(trace.id); const isDragging = mergeDraggedId === trace.id; + const traceColors = trace.isMerged && trace.mergedColors && trace.mergedColors.length > 0 + ? trace.mergedColors + : [trace.color]; return ( <div @@ -1898,7 +1901,22 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onToggle, onInteract }) => { onChange={() => toggleMergeSelection(trace.id)} /> - <div className="w-3 h-3 rounded-full" style={{ backgroundColor: trace.color }}></div> + <div className="flex -space-x-1"> + {traceColors.slice(0, 3).map((c, idx) => ( + <div + key={idx} + className="w-3 h-3 rounded-full border-2" + style={{ backgroundColor: c, borderColor: isDark ? '#1f2937' : '#fff' }} + /> + ))} + {traceColors.length > 3 && ( + <div className={`w-3 h-3 rounded-full flex items-center justify-center text-[8px] ${ + isDark ? 'bg-gray-700 text-gray-400' : 'bg-gray-200 text-gray-500' + }`}> + +{traceColors.length - 3} + </div> + )} + </div> <div className="flex-1"> <span className={`font-mono text-sm ${isDark ? 'text-gray-300' : 'text-gray-600'}`}> |