mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-19 01:21:24 +02:00
8409f8a8a2
Implement a two-layer DnD system in @manacore/shared-ui/dnd that coexists with svelte-dnd-action (same-type reordering): - Layer 1 (Pointer Events): dragSource + dropTarget actions for cross-type drags (e.g. Tag → Task). Mobile-first with long-press (300ms) and haptic feedback. - Layer 2 (Passive Overlay): passiveDropZone action detects when svelte-dnd-action drags hover over external targets (e.g. Task → Tag pill, Task → Trash zone). - DragPreview: floating pill that follows the finger/cursor during Layer 1 drags. - ActionZone: auto-appearing drop zones (trash, archive) during any drag. Integrate into Todo app: - TagStrip pills: draggable (dragSource) + accept tasks (passiveDropZone) - TaskList items: accept tags (dropTarget) + register drags for passive layer - ViewColumn + FokusLayout: register svelte-dnd-action drags for passive layer - Layout: DragPreview + ActionZone (trash) added, tasks enriched with resolved label objects from shared tags so tag badges actually render on TaskItem. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
98 lines
2.1 KiB
Svelte
98 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* Floating drag preview that follows the pointer during Layer 1 drags.
|
|
*
|
|
* Place this once in your app layout:
|
|
* <DragPreview />
|
|
*
|
|
* It reads from dragState and renders a small pill showing what's being dragged.
|
|
*/
|
|
|
|
import { dragState } from './drag-state.svelte';
|
|
import type { TagDragData } from './types';
|
|
|
|
const OFFSET_X = 12;
|
|
const OFFSET_Y = -20;
|
|
|
|
const tagData = $derived(
|
|
dragState.activeDrag?.type === 'tag' ? (dragState.activeDrag.data as TagDragData) : null
|
|
);
|
|
|
|
const style = $derived(
|
|
dragState.isDragging
|
|
? `left:${dragState.pointerX + OFFSET_X}px;top:${dragState.pointerY + OFFSET_Y}px;`
|
|
: ''
|
|
);
|
|
</script>
|
|
|
|
{#if dragState.isDragging}
|
|
<div class="drag-preview" {style}>
|
|
{#if tagData}
|
|
<span class="tag-dot" style="background-color: {tagData.color}"></span>
|
|
<span class="tag-name">{tagData.name}</span>
|
|
{:else if dragState.activeDrag}
|
|
<span class="generic-label">{dragState.activeDrag.type}</span>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.drag-preview {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 9999px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
|
box-shadow:
|
|
0 8px 24px -4px rgba(0, 0, 0, 0.15),
|
|
0 2px 6px -1px rgba(0, 0, 0, 0.1);
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
transform: scale(1.05);
|
|
animation: drag-preview-in 150ms ease-out;
|
|
}
|
|
|
|
:global(.dark) .drag-preview {
|
|
background: rgba(30, 30, 30, 0.95);
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
@keyframes drag-preview-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.tag-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tag-name {
|
|
color: var(--color-foreground, #1a1a1a);
|
|
}
|
|
|
|
:global(.dark) .tag-name {
|
|
color: var(--color-foreground, #e5e5e5);
|
|
}
|
|
|
|
.generic-label {
|
|
color: var(--color-muted-foreground, #6b7280);
|
|
text-transform: capitalize;
|
|
}
|
|
</style>
|