feat(02-03): add expand/collapse and inline editing to EntryCard
- Add expanded state for expand/collapse toggle - Implement inline editing for title, content, and type - Add 400ms debounced auto-save using fetch to ?/update - Show 'Saving...' indicator during save - Add delete button with confirmation dialog - Use Svelte slide transition for smooth expand/collapse - Fix button nesting by restructuring layout
This commit is contained in:
Thomas Richter
@@ -1,26 +1,88 @@
|
||||
<script lang="ts">
|
||||
import type { Entry } from '$lib/server/db/schema';
|
||||
import { enhance } from '$app/forms';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
interface Props {
|
||||
entry: Entry;
|
||||
}
|
||||
|
||||
let { entry }: Props = $props();
|
||||
|
||||
// Expand/collapse state
|
||||
let expanded = $state(false);
|
||||
|
||||
// Edit state - initialize from entry
|
||||
let editTitle = $state(entry.title || '');
|
||||
let editContent = $state(entry.content);
|
||||
let editType = $state(entry.type);
|
||||
|
||||
// Debounced auto-save
|
||||
let saveTimeout: ReturnType<typeof setTimeout>;
|
||||
let isSaving = $state(false);
|
||||
|
||||
async function debouncedSave() {
|
||||
clearTimeout(saveTimeout);
|
||||
saveTimeout = setTimeout(async () => {
|
||||
isSaving = true;
|
||||
const formData = new FormData();
|
||||
formData.append('id', entry.id);
|
||||
formData.append('title', editTitle);
|
||||
formData.append('content', editContent);
|
||||
formData.append('type', editType);
|
||||
|
||||
try {
|
||||
await fetch('?/update', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
} finally {
|
||||
isSaving = false;
|
||||
}
|
||||
}, 400);
|
||||
}
|
||||
|
||||
function handleInput() {
|
||||
debouncedSave();
|
||||
}
|
||||
|
||||
function toggleExpand() {
|
||||
if (expanded) {
|
||||
// Collapsing - reset edit state to current entry values
|
||||
editTitle = entry.title || '';
|
||||
editContent = entry.content;
|
||||
editType = entry.type;
|
||||
}
|
||||
expanded = !expanded;
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
toggleExpand();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<article class="p-4 border-b border-gray-100 md:border md:rounded-lg md:shadow-sm md:mb-3">
|
||||
<article class="p-4 border-b border-gray-100 md:border md:rounded-lg md:shadow-sm md:mb-3 bg-white">
|
||||
<!-- Collapsed view - clickable header -->
|
||||
<div class="flex items-start gap-3">
|
||||
{#if entry.type === 'task'}
|
||||
<form method="POST" action="?/toggleComplete" class="flex items-center">
|
||||
<form method="POST" action="?/toggleComplete" use:enhance>
|
||||
<input type="hidden" name="id" value={entry.id} />
|
||||
<button
|
||||
type="submit"
|
||||
class="w-6 h-6 rounded border-2 border-gray-300 flex items-center justify-center touch-target
|
||||
{entry.status === 'done' ? 'bg-green-500 border-green-500' : 'hover:border-gray-400'}"
|
||||
{entry.status === 'done' ? 'bg-green-500 border-green-500' : 'hover:border-gray-400'}"
|
||||
aria-label={entry.status === 'done' ? 'Mark as incomplete' : 'Mark as complete'}
|
||||
>
|
||||
{#if entry.status === 'done'}
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg
|
||||
class="w-4 h-4 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
@@ -32,14 +94,19 @@
|
||||
</button>
|
||||
</form>
|
||||
{:else}
|
||||
<span
|
||||
class="w-6 h-6 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0"
|
||||
>
|
||||
<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}
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- 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'
|
||||
@@ -47,21 +114,113 @@
|
||||
>
|
||||
{entry.title || 'Untitled'}
|
||||
</h3>
|
||||
<p
|
||||
class="text-gray-600 text-sm md:text-base line-clamp-2 {entry.status === 'done'
|
||||
? 'text-gray-400'
|
||||
: ''}"
|
||||
>
|
||||
{entry.content}
|
||||
</p>
|
||||
{#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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
Reference in New Issue
Block a user