Ole-Morten Duesund
59e2f95767
HTML5 native drag-and-drop doesn't fire on touchscreens — mobile
users couldn't reorder the list at all. Swapped the manual DnD
wiring (dragstart/dragover/drop) for svelte-dnd-action, which uses
Pointer Events and handles mouse, touch, AND keyboard reorder
uniformly. Linear-quality reorder UX for ~11 KB gzipped.
Replacement details:
- bun add svelte-dnd-action (0.9.69)
- Home.svelte: ~70 lines of manual handler code deleted, replaced
with ~30 lines wiring up `use:dndzone` + `onconsider` +
`onfinalize`. The midpoint-position math for sort_position is
unchanged (finalize gives us the new neighbour list directly).
- ActivityRow.svelte: the drag handle's `onpointerdown` flips a
parent-owned dragDisabled flag to false — the library then
takes over. Standard "handle-only drag" recipe; clicks on the
title/buttons inside the card don't initiate drag because
dragDisabled stays true everywhere else.
- dndItems is a buffer copy of `filtered` that the library
mutates during a drag. An $effect re-syncs it from `filtered`
between drags (so new activities still float to the top, etc).
- Shadow item (the library's placeholder while dragging) is
rendered at 30% opacity so the drop target is visible without
flashing.
Accessibility wins for free:
- Keyboard reorder: focus an item, press Space to "pick up",
arrow keys to move, Space to drop. Screen readers get
polite-live announcements of each move from the library.
- Touch reorder works on iOS Safari and Android Chrome.
96 tests still pass; typecheck clean; build ok.
Bundle: 122 KB → 154 KB (gzipped 42 → 53 KB, ~+11 KB).
30 lines
921 B
JSON
30 lines
921 B
JSON
{
|
|
"name": "vinterliste",
|
|
"version": "0.1.0",
|
|
"description": "End-to-end encrypted winter activity list",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev:server": "bun run --hot server/index.ts",
|
|
"dev:frontend": "vite --config frontend/vite.config.ts",
|
|
"build:frontend": "vite build --config frontend/vite.config.ts",
|
|
"start": "NODE_ENV=production bun run server/index.ts",
|
|
"test": "bun test",
|
|
"typecheck": "tsc --noEmit && tsc --noEmit -p frontend/tsconfig.json"
|
|
},
|
|
"dependencies": {
|
|
"hono": "^4.6.0",
|
|
"libsodium-wrappers-sumo": "^0.7.15",
|
|
"svelte-dnd-action": "^0.9.69"
|
|
},
|
|
"devDependencies": {
|
|
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
|
"@tsconfig/svelte": "^5.0.4",
|
|
"@types/bun": "^1.1.0",
|
|
"@types/libsodium-wrappers-sumo": "^0.7.8",
|
|
"svelte": "^5.0.0",
|
|
"svelte-check": "^4.0.0",
|
|
"typescript": "^5.6.0",
|
|
"vite": "^6.0.0"
|
|
}
|
|
}
|