till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:21:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(manacore/web): show item title + app color in drag preview

Browse source 
DragPreview now accepts a resolveEntity callback that maps drag type
+ data to display info (title, app color, app name). Dragging a task
shows "Meeting mit Team · Todo" instead of just "task".

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-03 13:24:58 +02:00
parent a60799ddff
commit 2529c91d58
2 changed files with 70 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

66
packages/shared-ui/src/dnd/DragPreview.svelte
View file

@ -5,12 +5,24 @@
* Place this once in your app layout:
* <DragPreview />
*
* It reads from dragState and renders a small pill showing what's being dragged.
* It reads from dragState and renders a pill showing what's being dragged.
* For tags: colored dot + tag name.
* For entities: app color dot + item title + app name.
*/
import { dragState } from './drag-state.svelte';
import type { TagDragData } from './types';
interface Props {
/** Resolve display data for a dragged entity. */
resolveEntity?: (
type: string,
data: Record<string, unknown>
) => { title: string; subtitle?: string; color?: string; appName?: string } | null;
}
let { resolveEntity }: Props = $props();
const OFFSET_X = 12;
const OFFSET_Y = -20;
@ -18,6 +30,15 @@
dragState.activeDrag?.type === 'tag' ? (dragState.activeDrag.data as TagDragData) : null
);
const entityData = $derived(() => {
if (!dragState.activeDrag || dragState.activeDrag.type === 'tag') return null;
if (!resolveEntity) return null;
return resolveEntity(
dragState.activeDrag.type,
dragState.activeDrag.data as Record<string, unknown>
);
});
const style = $derived(
dragState.isDragging
? `left:${dragState.pointerX + OFFSET_X}px;top:${dragState.pointerY + OFFSET_Y}px;`
@ -28,10 +49,17 @@
{#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>
<span class="preview-dot" style="background-color: {tagData.color}"></span>
<span class="preview-title">{tagData.name}</span>
{:else if entityData()}
{@const entity = entityData()}
<span class="preview-dot" style="background-color: {entity?.color ?? '#6B7280'}"></span>
<span class="preview-title">{entity?.title}</span>
{#if entity?.appName}
<span class="preview-app">{entity.appName}</span>
{/if}
{:else if dragState.activeDrag}
<span class="generic-label">{dragState.activeDrag.type}</span>
<span class="preview-title fallback">{dragState.activeDrag.type}</span>
{/if}
</div>
{/if}
@ -54,8 +82,8 @@
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;
max-width: 280px;
transform: scale(1.05);
animation: drag-preview-in 150ms ease-out;
}
@ -76,23 +104,33 @@
}
}
.tag-dot {
.preview-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.tag-name {
color: var(--color-foreground, #1a1a1a);
.preview-title {
font-weight: 600;
color: #1a1a1a;
overflow: hidden;
text-overflow: ellipsis;
}
:global(.dark) .preview-title {
color: #e5e5e5;
}
:global(.dark) .tag-name {
color: var(--color-foreground, #e5e5e5);
}
.generic-label {
color: var(--color-muted-foreground, #6b7280);
.preview-title.fallback {
color: #6b7280;
text-transform: capitalize;
font-weight: 500;
}
.preview-app {
font-size: 0.6875rem;
font-weight: 400;
color: #9ca3af;
flex-shrink: 0;
}
</style>