From 11338469989ac5ec01bf0b650907bd691d09320e Mon Sep 17 00:00:00 2001 From: Cita Date: Wed, 1 Apr 2026 21:24:25 +0800 Subject: [PATCH] [codex] restore route priority drag behavior (#376) * fix: restore route priority drag behavior * fix: use theme rail highlight surface --- src/web/pages/token-routes/RouteCard.tsx | 77 ++----------------- .../pages/token-routes/SortableChannelRow.tsx | 2 +- .../pages/token-routes/priorityRail.test.ts | 17 ++-- src/web/pages/token-routes/priorityRail.ts | 13 +++- 4 files changed, 26 insertions(+), 83 deletions(-) diff --git a/src/web/pages/token-routes/RouteCard.tsx b/src/web/pages/token-routes/RouteCard.tsx index 9ef4c40..363bec6 100644 --- a/src/web/pages/token-routes/RouteCard.tsx +++ b/src/web/pages/token-routes/RouteCard.tsx @@ -1,7 +1,6 @@ import { memo, useState, type ReactNode } from 'react'; import { DndContext, - DragOverlay, KeyboardSensor, PointerSensor, closestCenter, @@ -42,13 +41,12 @@ import { isExplicitGroupRoute, resolveRouteTitle, resolveRouteIcon, - getPriorityTagStyle, } from './utils.js'; import { buildPriorityBuckets, } from './priorityBuckets.js'; import { - buildPriorityDragPreviewStyle, + buildPriorityRailNodeStyle, buildPriorityRailSections, createPriorityRailNewLayerId, isPriorityRailNewLayerId, @@ -159,52 +157,6 @@ function PriorityRailNewLayerRow({ ); } -function PriorityDragPreview({ - channel, - displayPriority, - activeRowWidth, -}: { - channel: RouteChannel; - displayPriority: number; - activeRowWidth?: number | null; -}) { - return ( -
- - {`P${displayPriority}`} - - - {channel.account?.username || `account-${channel.accountId}`} - - - {channel.site?.name || 'unknown'} - -
- ); -} - function RouteCardInner({ route, brand, @@ -281,14 +233,10 @@ function RouteCardInner({ const priorityBuckets = buildPriorityBuckets(channels || []); const priorityRailSections = buildPriorityRailSections(channels || []); const [activeDragChannelId, setActiveDragChannelId] = useState(null); - const [activeDragRowWidth, setActiveDragRowWidth] = useState(null); const [dragOverId, setDragOverId] = useState(null); - const activeDragChannel = activeDragChannelId == null - ? null - : (channels || []).find((channel) => channel.id === activeDragChannelId) || null; - const activeDragBucketIndex = activeDragChannel == null + const activeDragBucketIndex = activeDragChannelId == null ? -1 - : priorityBuckets.findIndex((bucket) => bucket.channels.some((channel) => channel.id === activeDragChannel.id)); + : priorityBuckets.findIndex((bucket) => bucket.channels.some((channel) => channel.id === activeDragChannelId)); const hoveredBucketIndex = typeof dragOverId === 'number' ? priorityBuckets.findIndex((bucket) => bucket.channels.some((channel) => channel.id === dragOverId)) : -1; @@ -298,14 +246,12 @@ function RouteCardInner({ const clearDragState = () => { setActiveDragChannelId(null); - setActiveDragRowWidth(null); setDragOverId(null); }; const handleDragStart = (event: DragStartEvent) => { const nextId = Number(event.active.id); setActiveDragChannelId(Number.isFinite(nextId) ? nextId : null); - setActiveDragRowWidth(event.active.rect.current.initial?.width ?? null); setDragOverId(event.active.id); }; @@ -679,7 +625,7 @@ function RouteCardInner({ const hoveredExistingLayer = activeDragChannelId != null && hoveredBucketIndex === bucketIndex; const hoveredCrossLayer = hoveredExistingLayer && activeDragBucketIndex !== bucketIndex; const hoveredNewLayer = activeDragChannelId != null && hoveredNewLayerBucketIndex === bucketIndex; - const railTone = getPriorityTagStyle(bucketIndex); + const railNodeStyle = buildPriorityRailNodeStyle(bucketIndex, hoveredExistingLayer); return (
{railSection ? `P${bucketIndex} ยท ${railSection.channelCount}` : railLabel} @@ -806,15 +748,6 @@ function RouteCardInner({ })}
- - {activeDragChannel && !compact ? ( - - ) : null} - ) : ( diff --git a/src/web/pages/token-routes/SortableChannelRow.tsx b/src/web/pages/token-routes/SortableChannelRow.tsx index 707ce09..fd59eeb 100644 --- a/src/web/pages/token-routes/SortableChannelRow.tsx +++ b/src/web/pages/token-routes/SortableChannelRow.tsx @@ -50,7 +50,7 @@ export function SortableChannelRow({ const rowStyle: CSSProperties = { transform: CSS.Transform.toString(transform), transition, - opacity: isDragging ? (mobile ? 0.72 : 0) : channel.enabled === false ? 0.5 : 1, + opacity: isDragging ? 0.72 : channel.enabled === false ? 0.5 : 1, zIndex: isDragging ? 10 : 1, display: 'grid', gridTemplateColumns: managementLocked || mobile ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) auto auto auto', diff --git a/src/web/pages/token-routes/priorityRail.test.ts b/src/web/pages/token-routes/priorityRail.test.ts index 6780638..2eae565 100644 --- a/src/web/pages/token-routes/priorityRail.test.ts +++ b/src/web/pages/token-routes/priorityRail.test.ts @@ -1,7 +1,7 @@ import { describe, expect, it } from 'vitest'; import { applyPriorityRailDrop, - buildPriorityDragPreviewStyle, + buildPriorityRailNodeStyle, buildPriorityRailDragTargets, buildPriorityRailSections, createPriorityRailNewLayerId, @@ -76,10 +76,15 @@ describe('priorityRail helpers', () => { ]); }); - it('uses the active row width for drag preview alignment when available', () => { - expect(buildPriorityDragPreviewStyle(640)).toMatchObject({ - width: 640, - maxWidth: 'calc(100vw - 32px)', - }); + it('keeps priority color hierarchy even when a rail node is highlighted', () => { + const p0 = buildPriorityRailNodeStyle(0, false); + const p0Highlighted = buildPriorityRailNodeStyle(0, true); + const p1Highlighted = buildPriorityRailNodeStyle(1, true); + + expect(p0.background).not.toBe('var(--color-bg)'); + expect(String(p0Highlighted.background)).toContain('var(--color-bg)'); + expect(String(p0Highlighted.background)).not.toContain('white'); + expect(p0Highlighted.color).toBe('var(--color-primary)'); + expect(p0Highlighted.background).not.toBe(p1Highlighted.background); }); }); diff --git a/src/web/pages/token-routes/priorityRail.ts b/src/web/pages/token-routes/priorityRail.ts index b606291..8d46470 100644 --- a/src/web/pages/token-routes/priorityRail.ts +++ b/src/web/pages/token-routes/priorityRail.ts @@ -1,5 +1,6 @@ import type { CSSProperties } from 'react'; import type { PriorityRailDragTarget, PriorityRailSection } from './types.js'; +import { getPriorityTagStyle } from './utils.js'; type PriorityRailChannelLike = { id: number; @@ -119,10 +120,14 @@ export function applyPriorityRailDrop( ); } -export function buildPriorityDragPreviewStyle(activeRowWidth?: number | null): CSSProperties { - const resolvedWidth = Number.isFinite(activeRowWidth ?? Number.NaN) ? activeRowWidth ?? undefined : undefined; +export function buildPriorityRailNodeStyle(priority: number, highlighted: boolean): CSSProperties { + const tone = getPriorityTagStyle(priority); + return { - width: resolvedWidth, - maxWidth: 'calc(100vw - 32px)', + border: `1px solid ${highlighted ? 'var(--color-primary)' : 'color-mix(in srgb, currentColor 24%, transparent)'}`, + background: highlighted + ? `color-mix(in srgb, ${tone.background} 78%, var(--color-bg))` + : tone.background, + color: highlighted ? 'var(--color-primary)' : tone.color, }; }