Add dashboard crosslinks and card drag-and-drop reordering

Dashboard cards (targets, auto-start, profiles) are now clickable,
navigating to the full entity card on the appropriate tab. Card
sections support drag-and-drop reordering via grip handles with
localStorage persistence. Fix crosslink navigation scoping to avoid
matching dashboard cards, and fix highlight race on rapid clicks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 00:40:37 +03:00
parent 88abd31c1c
commit 9194b978e0
8 changed files with 364 additions and 38 deletions

View File

@@ -76,6 +76,87 @@ section {
animation: cardEnter 0.25s ease-out both;
}
/* ── Card drag-and-drop reordering ── */
.card-drag-handle {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
opacity: 0;
color: var(--text-secondary);
font-size: 10px;
letter-spacing: 1px;
line-height: 1;
border-radius: 3px;
transition: opacity 0.2s ease, background 0.15s ease;
z-index: 2;
touch-action: none;
user-select: none;
}
.card:hover > .card-drag-handle,
.template-card:hover > .card-drag-handle {
opacity: 0.5;
}
.card-drag-handle:hover {
opacity: 1 !important;
background: var(--border-color);
}
.card-drag-handle:active {
cursor: grabbing;
}
/* Clone floating during drag */
.card-drag-clone {
position: fixed;
z-index: 9999;
pointer-events: none;
opacity: 0.92;
transform: scale(1.03) rotate(0.8deg);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
transition: none;
will-change: left, top;
}
/* Placeholder in grid */
.card-drag-placeholder {
border: 2px dashed var(--primary-color);
border-radius: 8px;
background: rgba(33, 150, 243, 0.04);
min-height: 80px;
transition: none;
}
/* Suppress hover effects during drag */
.cs-dragging .card,
.cs-dragging .template-card {
transition: none !important;
transform: none !important;
}
.cs-dragging .card-drag-handle {
opacity: 0 !important;
}
/* Hide drag handles when filter is active */
.cs-filtering .card-drag-handle {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.card-drag-clone {
transform: none;
}
}
.card-tutorial-btn {
position: absolute;
bottom: 10px;