feat(02-04): add swipe-to-delete gesture for mobile
- Install svelte-gestures package for touch gesture support - Add useSwipe hook to EntryCard for left-swipe detection - Implement delete confirmation overlay on swipe - Add red delete background revealed during swipe - Maintain desktop delete button in expanded view
This commit is contained in:
Thomas Richter
7
package-lock.json
generated
7
package-lock.json
generated
@@ -12,6 +12,7 @@
|
|||||||
"better-sqlite3": "^12.6.2",
|
"better-sqlite3": "^12.6.2",
|
||||||
"drizzle-orm": "^0.45.1",
|
"drizzle-orm": "^0.45.1",
|
||||||
"nanoid": "^5.1.6",
|
"nanoid": "^5.1.6",
|
||||||
|
"svelte-gestures": "^5.2.2",
|
||||||
"svelte-persisted-store": "^0.12.0",
|
"svelte-persisted-store": "^0.12.0",
|
||||||
"tailwindcss": "^4.1.18",
|
"tailwindcss": "^4.1.18",
|
||||||
"zod": "^4.3.6"
|
"zod": "^4.3.6"
|
||||||
@@ -4722,6 +4723,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/svelte-gestures": {
|
||||||
|
"version": "5.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-5.2.2.tgz",
|
||||||
|
"integrity": "sha512-Y+chXPaSx8OsPoFppUwPk8PJzgrZ7xoDJKXeiEc7JBqyKKzXer9hlf8F9O34eFuAWB4/WQEvccACvyBplESL7A==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/svelte-persisted-store": {
|
"node_modules/svelte-persisted-store": {
|
||||||
"version": "0.12.0",
|
"version": "0.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/svelte-persisted-store/-/svelte-persisted-store-0.12.0.tgz",
|
"resolved": "https://registry.npmjs.org/svelte-persisted-store/-/svelte-persisted-store-0.12.0.tgz",
|
||||||
|
|||||||
@@ -35,6 +35,7 @@
|
|||||||
"better-sqlite3": "^12.6.2",
|
"better-sqlite3": "^12.6.2",
|
||||||
"drizzle-orm": "^0.45.1",
|
"drizzle-orm": "^0.45.1",
|
||||||
"nanoid": "^5.1.6",
|
"nanoid": "^5.1.6",
|
||||||
|
"svelte-gestures": "^5.2.2",
|
||||||
"svelte-persisted-store": "^0.12.0",
|
"svelte-persisted-store": "^0.12.0",
|
||||||
"tailwindcss": "^4.1.18",
|
"tailwindcss": "^4.1.18",
|
||||||
"zod": "^4.3.6"
|
"zod": "^4.3.6"
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
import type { Entry } from '$lib/server/db/schema';
|
import type { Entry } from '$lib/server/db/schema';
|
||||||
import { enhance } from '$app/forms';
|
import { enhance } from '$app/forms';
|
||||||
import { slide } from 'svelte/transition';
|
import { slide } from 'svelte/transition';
|
||||||
|
import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
entry: Entry;
|
entry: Entry;
|
||||||
@@ -21,6 +22,41 @@
|
|||||||
let saveTimeout: ReturnType<typeof setTimeout>;
|
let saveTimeout: ReturnType<typeof setTimeout>;
|
||||||
let isSaving = $state(false);
|
let isSaving = $state(false);
|
||||||
|
|
||||||
|
// Swipe state
|
||||||
|
let swipeOffset = $state(0);
|
||||||
|
let isConfirmingDelete = $state(false);
|
||||||
|
|
||||||
|
function handleSwipe(event: SwipeCustomEvent) {
|
||||||
|
const { direction } = event.detail;
|
||||||
|
if (direction === 'left') {
|
||||||
|
isConfirmingDelete = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create swipe gesture using useSwipe hook
|
||||||
|
const swipeGesture = useSwipe(handleSwipe, () => ({
|
||||||
|
timeframe: 300,
|
||||||
|
minSwipeDistance: 60,
|
||||||
|
touchAction: 'pan-y'
|
||||||
|
}));
|
||||||
|
|
||||||
|
function cancelDelete() {
|
||||||
|
isConfirmingDelete = false;
|
||||||
|
swipeOffset = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirmDelete() {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('id', entry.id);
|
||||||
|
|
||||||
|
await fetch('?/delete', {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
});
|
||||||
|
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
|
||||||
async function debouncedSave() {
|
async function debouncedSave() {
|
||||||
clearTimeout(saveTimeout);
|
clearTimeout(saveTimeout);
|
||||||
saveTimeout = setTimeout(async () => {
|
saveTimeout = setTimeout(async () => {
|
||||||
@@ -64,163 +100,210 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<article class="p-4 border-b border-gray-100 md:border md:rounded-lg md:shadow-sm md:mb-3 bg-white">
|
<div class="relative overflow-hidden">
|
||||||
<!-- Collapsed view - clickable header -->
|
<!-- Delete background revealed during swipe -->
|
||||||
<div class="flex items-start gap-3">
|
<div
|
||||||
{#if entry.type === 'task'}
|
class="absolute inset-y-0 right-0 w-24 bg-red-500 flex items-center justify-center"
|
||||||
<form method="POST" action="?/toggleComplete" use:enhance>
|
aria-hidden="true"
|
||||||
<input type="hidden" name="id" value={entry.id} />
|
>
|
||||||
<button
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
type="submit"
|
<path
|
||||||
class="w-6 h-6 rounded border-2 border-gray-300 flex items-center justify-center touch-target
|
stroke-linecap="round"
|
||||||
{entry.status === 'done' ? 'bg-green-500 border-green-500' : 'hover:border-gray-400'}"
|
stroke-linejoin="round"
|
||||||
aria-label={entry.status === 'done' ? 'Mark as incomplete' : 'Mark as complete'}
|
stroke-width="2"
|
||||||
>
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||||
{#if entry.status === 'done'}
|
/>
|
||||||
<svg
|
</svg>
|
||||||
class="w-4 h-4 text-white"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M5 13l4 4L19 7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
{/if}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
{:else}
|
|
||||||
<span class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
|
|
||||||
<span class="text-purple-600 text-xs font-medium">T</span>
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
||||||
<div
|
|
||||||
class="flex-1 min-w-0 cursor-pointer"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
onclick={toggleExpand}
|
|
||||||
onkeydown={handleKeydown}
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
class="font-medium text-gray-900 text-base md:text-lg {entry.status === 'done'
|
|
||||||
? 'line-through text-gray-400'
|
|
||||||
: ''}"
|
|
||||||
>
|
|
||||||
{entry.title || 'Untitled'}
|
|
||||||
</h3>
|
|
||||||
{#if !expanded}
|
|
||||||
<p
|
|
||||||
class="text-gray-600 text-sm md:text-base line-clamp-2 {entry.status === 'done'
|
|
||||||
? 'text-gray-400'
|
|
||||||
: ''}"
|
|
||||||
>
|
|
||||||
{entry.content}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
{#if isSaving}
|
|
||||||
<span class="text-xs text-gray-400">Saving...</span>
|
|
||||||
{/if}
|
|
||||||
<span
|
|
||||||
class="text-xs px-2 py-1 rounded-full {entry.type === 'task'
|
|
||||||
? 'bg-blue-100 text-blue-700'
|
|
||||||
: 'bg-purple-100 text-purple-700'}"
|
|
||||||
>
|
|
||||||
{entry.type}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={toggleExpand}
|
|
||||||
class="p-1 hover:bg-gray-100 rounded"
|
|
||||||
aria-label={expanded ? 'Collapse entry' : 'Expand entry'}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="w-5 h-5 text-gray-400 transform transition-transform {expanded
|
|
||||||
? 'rotate-180'
|
|
||||||
: ''}"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M19 9l-7 7-7-7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Expanded view - edit fields -->
|
<!-- Swipeable entry card -->
|
||||||
{#if expanded}
|
<article
|
||||||
<div transition:slide={{ duration: 200 }} class="mt-4 pl-9 space-y-3">
|
{...swipeGesture}
|
||||||
<div>
|
style="transform: translateX({swipeOffset}px); transition: {swipeOffset === 0
|
||||||
<label for="edit-title-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
|
? 'transform 0.2s'
|
||||||
>Title</label
|
: 'none'}"
|
||||||
>
|
class="p-4 border-b border-gray-100 md:border md:rounded-lg md:shadow-sm md:mb-3 bg-white relative"
|
||||||
<input
|
>
|
||||||
id="edit-title-{entry.id}"
|
<!-- Collapsed view - clickable header -->
|
||||||
bind:value={editTitle}
|
<div class="flex items-start gap-3">
|
||||||
oninput={handleInput}
|
{#if entry.type === 'task'}
|
||||||
placeholder="Add a title..."
|
<form method="POST" action="?/toggleComplete" use:enhance>
|
||||||
class="w-full px-3 py-2 border border-gray-200 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for="edit-content-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
|
|
||||||
>Content</label
|
|
||||||
>
|
|
||||||
<textarea
|
|
||||||
id="edit-content-{entry.id}"
|
|
||||||
bind:value={editContent}
|
|
||||||
oninput={handleInput}
|
|
||||||
rows="4"
|
|
||||||
class="w-full px-3 py-2 border border-gray-200 rounded-lg text-base resize-y focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<label for="edit-type-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
|
|
||||||
>Type</label
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
id="edit-type-{entry.id}"
|
|
||||||
bind:value={editType}
|
|
||||||
onchange={handleInput}
|
|
||||||
class="px-3 py-2 border border-gray-200 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
>
|
|
||||||
<option value="thought">Thought</option>
|
|
||||||
<option value="task">Task</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form method="POST" action="?/delete" use:enhance>
|
|
||||||
<input type="hidden" name="id" value={entry.id} />
|
<input type="hidden" name="id" value={entry.id} />
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
class="px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg touch-target"
|
class="w-6 h-6 rounded border-2 border-gray-300 flex items-center justify-center touch-target
|
||||||
onclick={(e) => {
|
{entry.status === 'done' ? 'bg-green-500 border-green-500' : 'hover:border-gray-400'}"
|
||||||
if (!confirm('Delete this entry?')) {
|
aria-label={entry.status === 'done' ? 'Mark as incomplete' : 'Mark as complete'}
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Delete
|
{#if entry.status === 'done'}
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 text-white"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M5 13l4 4L19 7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
{:else}
|
||||||
|
<span
|
||||||
|
class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0"
|
||||||
|
>
|
||||||
|
<span class="text-purple-600 text-xs font-medium">T</span>
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
|
<div
|
||||||
|
class="flex-1 min-w-0 cursor-pointer"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
onclick={toggleExpand}
|
||||||
|
onkeydown={handleKeydown}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
class="font-medium text-gray-900 text-base md:text-lg {entry.status === 'done'
|
||||||
|
? 'line-through text-gray-400'
|
||||||
|
: ''}"
|
||||||
|
>
|
||||||
|
{entry.title || 'Untitled'}
|
||||||
|
</h3>
|
||||||
|
{#if !expanded}
|
||||||
|
<p
|
||||||
|
class="text-gray-600 text-sm md:text-base line-clamp-2 {entry.status === 'done'
|
||||||
|
? 'text-gray-400'
|
||||||
|
: ''}"
|
||||||
|
>
|
||||||
|
{entry.content}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
{#if isSaving}
|
||||||
|
<span class="text-xs text-gray-400">Saving...</span>
|
||||||
|
{/if}
|
||||||
|
<span
|
||||||
|
class="text-xs px-2 py-1 rounded-full {entry.type === 'task'
|
||||||
|
? 'bg-blue-100 text-blue-700'
|
||||||
|
: 'bg-purple-100 text-purple-700'}"
|
||||||
|
>
|
||||||
|
{entry.type}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick={toggleExpand}
|
||||||
|
class="p-1 hover:bg-gray-100 rounded"
|
||||||
|
aria-label={expanded ? 'Collapse entry' : 'Expand entry'}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 text-gray-400 transform transition-transform {expanded
|
||||||
|
? 'rotate-180'
|
||||||
|
: ''}"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M19 9l-7 7-7-7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Expanded view - edit fields -->
|
||||||
|
{#if expanded}
|
||||||
|
<div transition:slide={{ duration: 200 }} class="mt-4 pl-9 space-y-3">
|
||||||
|
<div>
|
||||||
|
<label for="edit-title-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
|
||||||
|
>Title</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="edit-title-{entry.id}"
|
||||||
|
bind:value={editTitle}
|
||||||
|
oninput={handleInput}
|
||||||
|
placeholder="Add a title..."
|
||||||
|
class="w-full px-3 py-2 border border-gray-200 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="edit-content-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
|
||||||
|
>Content</label
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
id="edit-content-{entry.id}"
|
||||||
|
bind:value={editContent}
|
||||||
|
oninput={handleInput}
|
||||||
|
rows="4"
|
||||||
|
class="w-full px-3 py-2 border border-gray-200 rounded-lg text-base resize-y focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<label for="edit-type-{entry.id}" class="block text-sm font-medium text-gray-700 mb-1"
|
||||||
|
>Type</label
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
id="edit-type-{entry.id}"
|
||||||
|
bind:value={editType}
|
||||||
|
onchange={handleInput}
|
||||||
|
class="px-3 py-2 border border-gray-200 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
>
|
||||||
|
<option value="thought">Thought</option>
|
||||||
|
<option value="task">Task</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form method="POST" action="?/delete" use:enhance>
|
||||||
|
<input type="hidden" name="id" value={entry.id} />
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg touch-target"
|
||||||
|
onclick={(e) => {
|
||||||
|
if (!confirm('Delete this entry?')) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Delete confirmation overlay -->
|
||||||
|
{#if isConfirmingDelete}
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 bg-white/95 flex items-center justify-center gap-4 z-10"
|
||||||
|
transition:slide={{ duration: 150 }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onclick={cancelDelete}
|
||||||
|
class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg touch-target min-w-[44px] min-h-[44px]"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onclick={confirmDelete}
|
||||||
|
class="px-4 py-2 bg-red-600 text-white rounded-lg touch-target min-w-[44px] min-h-[44px]"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</article>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user