@joewinke/jatui 0.1.11 → 0.1.19

package/src/lib/components/CommentThread.svelte

@@ -0,0 +1,773 @@
+<!--
+  CommentThread — universal threaded comments for any commentable entity
+  (project, invoice, contract, asset, task, form submission).
+
+  Transport-agnostic: all data operations go through the `callbacks` prop,
+  so the component imports no server code and has no DB/framework coupling
+  (same house style as MessageThread / UserAvatar). The consuming page
+  wires the callbacks to a SvelteKit load + form action or a fetch API.
+
+  Threading is one level deep on the data side (a reply's parent is always
+  a top-level comment); rendered as two visual levels. Replies to a reply
+  are re-anchored to the top-level parent and inherit its visibility —
+  this mirrors the server contract so optimistic rendering stays correct.
+
+  staffView=true  → staff: internal + client comments, visibility toggle.
+  staffView=false → portal: client-only, every post forced to 'client'.
+-->
+
+<script lang="ts">
+	import { slide, fade } from 'svelte/transition'
+	import { untrack } from 'svelte'
+	import UserAvatar from './UserAvatar.svelte'
+	import { formatRelativeTime, formatFullDate } from '../utils/dateFormatters'
+	import type {
+		Comment,
+		CommentCallbacks,
+		CommentEntityType,
+		CommentVisibility
+	} from '../types/comments'
+
+	interface Props {
+		entityType: CommentEntityType
+		entityId: string
+		/** Used for own-comment ownership checks (edit/delete). */
+		currentUserId: string
+		/** false = portal mode (client-only, no internal toggle). Default true. */
+		staffView?: boolean
+		/**
+		 * When false, the staff internal/client visibility toggle is hidden,
+		 * every new comment is forced to 'internal', and the per-comment
+		 * visibility badge is suppressed. Use for entities that are never
+		 * portal-exposed (e.g. internal tasks). Default true (no change to
+		 * existing staff threads). Ignored when staffView is false.
+		 */
+		allowClientVisibility?: boolean
+		/** Allow edit/delete of other people's comments (team owner/admin). */
+		isAdmin?: boolean
+		/** Initial top-level comments (typically from a server load). */
+		comments?: Comment[]
+		/** Total top-level comments matching the visibility filter (for paging). */
+		total?: number
+		/** Show the skeleton loading state instead of the thread. */
+		loading?: boolean
+		callbacks: CommentCallbacks
+		placeholder?: string
+		emptyText?: string
+		class?: string
+	}
+
+	let {
+		entityType,
+		entityId,
+		currentUserId,
+		staffView = true,
+		allowClientVisibility = true,
+		isAdmin = false,
+		comments = [],
+		total = 0,
+		loading = false,
+		callbacks,
+		placeholder = 'Write a comment…',
+		emptyText = 'No comments yet.',
+		class: className = ''
+	}: Props = $props()
+
+	// ── Local working copy ────────────────────────────────────────────────
+	// Re-synced from the `comments` prop only when its reference changes
+	// (server navigation / fresh load), so optimistic mutations survive
+	// re-renders. The identity guard prevents an effect write loop.
+	let items = $state<Comment[]>([])
+	let syncedFrom: Comment[] | null = null
+	$effect(() => {
+		if (comments !== syncedFrom) {
+			syncedFrom = comments
+			items = comments.map((c) => ({ ...c, replies: [...(c.replies ?? [])] }))
+		}
+	})
+
+	// In portal mode, defensively show only client-visible rows even if the
+	// server over-returns (it shouldn't — visibility is enforced server-side).
+	const visibleItems = $derived(
+		staffView ? items : items.filter((c) => c.visibility === 'client')
+	)
+
+	// Show the internal/client toggle + per-comment badge only for staff
+	// AND when the entity can have client-visible comments at all.
+	const showVisibilityControls = $derived(staffView && allowClientVisibility)
+
+	// ── New-comment composer ──────────────────────────────────────────────
+	let newBody = $state('')
+	// untrack: staffView is fixed per mount; capture it once without reactive tracking.
+	let newVisibility = $state<CommentVisibility>(untrack(() => (staffView ? 'internal' : 'client')))
+	let posting = $state(false)
+	let postError = $state<string | null>(null)
+
+	// ── Reply composer (one open at a time, keyed by top-level id) ─────────
+	let replyingTo = $state<string | null>(null)
+	let replyBody = $state('')
+	let replyBusy = $state(false)
+	let replyError = $state<string | null>(null)
+
+	// ── Inline edit ───────────────────────────────────────────────────────
+	let editingId = $state<string | null>(null)
+	let editBody = $state('')
+	let editBusy = $state(false)
+	let editError = $state<string | null>(null)
+
+	// ── Misc per-row state ────────────────────────────────────────────────
+	let confirmDeleteId = $state<string | null>(null)
+	let deletingId = $state<string | null>(null)
+	let expanded = $state<Set<string>>(new Set())
+	let repliesLoading = $state<Set<string>>(new Set())
+	let loadingMore = $state(false)
+
+	function canModify(c: Comment): boolean {
+		return !c.deleted_at && (c.author_id === currentUserId || isAdmin)
+	}
+
+	function isDeleted(c: Comment): boolean {
+		return !!c.deleted_at || c.body === '[deleted]'
+	}
+
+	// ── Body rendering: escape → @mention highlight → newlines ────────────
+	// Mention rule mirrors the server's parseMentions regex exactly, so what
+	// the UI highlights == what the server notifies. Email addresses
+	// (`foo@bar.com`) are not mentions because `@` follows a word char.
+	function escapeHtml(s: string): string {
+		return s
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;')
+			.replace(/'/g, '&#039;')
+	}
+
+	function renderBody(body: string): string {
+		const re = /(^|[^\w@])@([a-zA-Z0-9_.-]+)/g
+		let out = ''
+		let last = 0
+		let m: RegExpExecArray | null
+		while ((m = re.exec(body)) !== null) {
+			const handle = m[2].replace(/[.\-_]+$/, '')
+			if (!handle) continue
+			out += escapeHtml(body.slice(last, m.index))
+			out += escapeHtml(m[1])
+			out += `<span class="text-primary font-medium">@${escapeHtml(handle)}</span>`
+			out += escapeHtml(m[2].slice(handle.length))
+			last = m.index + m[0].length
+		}
+		out += escapeHtml(body.slice(last))
+		return out.replace(/\n/g, '<br>')
+	}
+
+	function findTop(id: string): Comment | undefined {
+		return items.find((c) => c.id === id)
+	}
+
+	// ── Post a new top-level comment ──────────────────────────────────────
+	async function submitNew() {
+		const body = newBody.trim()
+		if (!body || posting) return
+		posting = true
+		postError = null
+		try {
+			const created = await callbacks.submitComment({
+				entityType,
+				entityId,
+				body,
+				parentId: null,
+				visibility: staffView ? (allowClientVisibility ? newVisibility : 'internal') : 'client'
+			})
+			created.replies = created.replies ?? []
+			items = [created, ...items]
+			newBody = ''
+		} catch (e) {
+			postError = e instanceof Error ? e.message : 'Failed to post comment.'
+		} finally {
+			posting = false
+		}
+	}
+
+	// ── Reply (always anchored to the TOP-LEVEL comment) ──────────────────
+	function openReply(topId: string) {
+		replyingTo = replyingTo === topId ? null : topId
+		replyBody = ''
+		replyError = null
+	}
+
+	async function submitReply(topId: string) {
+		const body = replyBody.trim()
+		if (!body || replyBusy) return
+		const parent = findTop(topId)
+		if (!parent) return
+		replyBusy = true
+		replyError = null
+		try {
+			const created = await callbacks.submitComment({
+				entityType,
+				entityId,
+				body,
+				parentId: topId,
+				// Replies inherit the parent's visibility (server clamps too).
+				visibility: parent.visibility
+			})
+			created.replies = created.replies ?? []
+			parent.replies = [...parent.replies, created]
+			parent.reply_count = (parent.reply_count ?? 0) + 1
+			expanded = new Set(expanded).add(topId)
+			replyBody = ''
+			replyingTo = null
+		} catch (e) {
+			replyError = e instanceof Error ? e.message : 'Failed to post reply.'
+		} finally {
+			replyBusy = false
+		}
+	}
+
+	// ── Expand / collapse a thread's replies ──────────────────────────────
+	async function toggleReplies(c: Comment) {
+		if (expanded.has(c.id)) {
+			const next = new Set(expanded)
+			next.delete(c.id)
+			expanded = next
+			return
+		}
+		expanded = new Set(expanded).add(c.id)
+		if (c.replies.length === 0 && c.reply_count > 0) {
+			repliesLoading = new Set(repliesLoading).add(c.id)
+			try {
+				c.replies = await callbacks.loadReplies(c.id)
+			} catch {
+				/* leave thread collapsed-empty; user can retry by toggling */
+			} finally {
+				const next = new Set(repliesLoading)
+				next.delete(c.id)
+				repliesLoading = next
+			}
+		}
+	}
+
+	// ── Inline edit ───────────────────────────────────────────────────────
+	function startEdit(c: Comment) {
+		editingId = c.id
+		editBody = c.body
+		editError = null
+	}
+
+	function cancelEdit() {
+		editingId = null
+		editBody = ''
+		editError = null
+	}
+
+	function applyEdited(updated: Comment) {
+		const top = items.find((c) => c.id === updated.id)
+		if (top) {
+			top.body = updated.body
+			top.edited_at = updated.edited_at
+			return
+		}
+		for (const c of items) {
+			const r = c.replies.find((x) => x.id === updated.id)
+			if (r) {
+				r.body = updated.body
+				r.edited_at = updated.edited_at
+				return
+			}
+		}
+	}
+
+	async function saveEdit(c: Comment) {
+		const body = editBody.trim()
+		if (!body || editBusy) return
+		if (body === c.body) {
+			cancelEdit()
+			return
+		}
+		editBusy = true
+		editError = null
+		try {
+			const updated = await callbacks.editComment(c.id, body)
+			applyEdited(updated)
+			cancelEdit()
+		} catch (e) {
+			editError = e instanceof Error ? e.message : 'Failed to save edit.'
+		} finally {
+			editBusy = false
+		}
+	}
+
+	// ── Soft-delete (row kept so replies stay anchored) ───────────────────
+	function applyDeleted(id: string) {
+		const top = items.find((c) => c.id === id)
+		if (top) {
+			top.deleted_at = new Date().toISOString()
+			top.body = '[deleted]'
+			return
+		}
+		for (const c of items) {
+			const r = c.replies.find((x) => x.id === id)
+			if (r) {
+				r.deleted_at = new Date().toISOString()
+				r.body = '[deleted]'
+				return
+			}
+		}
+	}
+
+	async function confirmDelete(c: Comment) {
+		if (deletingId) return
+		deletingId = c.id
+		try {
+			await callbacks.deleteComment(c.id)
+			applyDeleted(c.id)
+			confirmDeleteId = null
+		} catch {
+			/* keep the confirm open so the user can retry */
+		} finally {
+			deletingId = null
+		}
+	}
+
+	async function loadMore() {
+		if (!callbacks.loadMore || loadingMore) return
+		loadingMore = true
+		try {
+			const res = await callbacks.loadMore(items.length)
+			const seen = new Set(items.map((c) => c.id))
+			const fresh = res.comments
+				.filter((c) => !seen.has(c.id))
+				.map((c) => ({ ...c, replies: [...(c.replies ?? [])] }))
+			items = [...items, ...fresh]
+			total = res.total
+		} catch {
+			/* swallow — button stays for retry */
+		} finally {
+			loadingMore = false
+		}
+	}
+
+	const hasMore = $derived(
+		!!callbacks.loadMore && staffView && total > items.length
+	)
+</script>
+
+<div class="flex flex-col gap-4 {className}">
+	{#if loading}
+		<!-- Skeleton loading state -->
+		<div class="flex flex-col gap-4" aria-busy="true" aria-label="Loading comments">
+			{#each [0, 1, 2] as i (i)}
+				<div class="flex gap-3">
+					<div class="skeleton h-9 w-9 shrink-0 rounded-full"></div>
+					<div class="flex-1 space-y-2">
+						<div class="skeleton h-3 w-32"></div>
+						<div class="skeleton h-3 w-full"></div>
+						<div class="skeleton h-3 w-2/3"></div>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<!-- Thread -->
+		{#if visibleItems.length === 0}
+			<div class="flex flex-col items-center gap-2 py-8 text-center">
+				<svg class="w-8 h-8 text-base-content/20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+				</svg>
+				<p class="text-[0.8125rem] text-base-content/40">{emptyText}</p>
+			</div>
+		{:else}
+			<ul class="flex flex-col gap-5">
+				{#each visibleItems as c (c.id)}
+					<li in:fade={{ duration: 150 }}>
+						{@render commentRow(c, false)}
+
+						<!-- Replies -->
+						{#if c.reply_count > 0 || c.replies.length > 0}
+							<div class="border-base-300 mt-2 ml-11 border-l pl-4">
+								<button
+									type="button"
+									class="link link-hover text-base-content/60 mb-2 text-xs"
+									onclick={() => toggleReplies(c)}
+								>
+									{#if repliesLoading.has(c.id)}
+										<span class="loading loading-spinner loading-xs align-middle"></span>
+										Loading replies…
+									{:else if expanded.has(c.id)}
+										Hide {c.reply_count}
+										{c.reply_count === 1 ? 'reply' : 'replies'}
+									{:else}
+										Show {c.reply_count}
+										{c.reply_count === 1 ? 'reply' : 'replies'}
+									{/if}
+								</button>
+
+								{#if expanded.has(c.id)}
+									<ul class="flex flex-col gap-4" transition:slide={{ duration: 150 }}>
+										{#each c.replies as r (r.id)}
+											<li in:fade={{ duration: 150 }}>
+												{@render commentRow(r, true)}
+											</li>
+										{/each}
+									</ul>
+								{/if}
+							</div>
+						{/if}
+
+						<!-- Inline reply composer -->
+						{#if replyingTo === c.id}
+							<div
+								class="mt-3 ml-11"
+								transition:slide={{ duration: 150 }}
+							>
+								<textarea
+									class="textarea textarea-bordered w-full text-sm"
+									rows="2"
+									aria-label="Write a reply"
+									placeholder="Write a reply…"
+									bind:value={replyBody}
+									disabled={replyBusy}
+								></textarea>
+								{#if replyError}
+									<p class="text-error mt-1 text-xs">{replyError}</p>
+								{/if}
+								<div class="mt-2 flex items-center gap-2">
+									<button
+										type="button"
+										class="btn btn-primary btn-xs"
+										disabled={replyBusy || !replyBody.trim()}
+										onclick={() => submitReply(c.id)}
+									>
+										{#if replyBusy}
+											<span class="loading loading-spinner loading-xs"></span>
+										{/if}
+										Reply
+									</button>
+									<button
+										type="button"
+										class="btn btn-ghost btn-xs"
+										disabled={replyBusy}
+										onclick={() => (replyingTo = null)}
+									>
+										Cancel
+									</button>
+								</div>
+							</div>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+
+			{#if hasMore}
+				<button
+					type="button"
+					class="btn btn-ghost btn-sm self-center"
+					disabled={loadingMore}
+					onclick={loadMore}
+				>
+					{#if loadingMore}
+						<span class="loading loading-spinner loading-xs"></span>
+					{/if}
+					Load older comments
+				</button>
+			{/if}
+		{/if}
+
+		<!-- New comment composer -->
+		<div class="border-base-300 mt-2 border-t pt-4">
+			<textarea
+				class="textarea textarea-bordered w-full"
+				rows="3"
+				aria-label="Write a comment"
+				{placeholder}
+				bind:value={newBody}
+				disabled={posting}
+			></textarea>
+			{#if postError}
+				<p class="text-error mt-1 text-xs">{postError}</p>
+			{/if}
+			<div class="mt-2 flex flex-wrap items-center justify-between gap-2">
+				{#if showVisibilityControls}
+					<div class="join" role="group" aria-label="Comment visibility">
+						<button
+							type="button"
+							class="btn btn-xs join-item {newVisibility === 'internal'
+								? 'btn-active btn-neutral'
+								: 'btn-ghost'}"
+							aria-pressed={newVisibility === 'internal'}
+							onclick={() => (newVisibility = 'internal')}
+						>
+							{@render lockIcon()}
+							Internal
+						</button>
+						<button
+							type="button"
+							class="btn btn-xs join-item {newVisibility === 'client'
+								? 'btn-active btn-primary'
+								: 'btn-ghost'}"
+							aria-pressed={newVisibility === 'client'}
+							onclick={() => (newVisibility = 'client')}
+						>
+							{@render eyeIcon()}
+							Client-visible
+						</button>
+					</div>
+				{:else}
+					<span class="text-base-content/50 inline-flex items-center gap-1 text-xs">
+						{@render eyeIcon()}
+						Visible to your team
+					</span>
+				{/if}
+				<button
+					type="button"
+					class="btn btn-primary btn-sm"
+					disabled={posting || !newBody.trim()}
+					onclick={submitNew}
+				>
+					{#if posting}
+						<span class="loading loading-spinner loading-xs"></span>
+					{/if}
+					Comment
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<!-- ── Snippets ──────────────────────────────────────────────────────── -->
+
+{#snippet lockIcon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="h-3.5 w-3.5"
+		aria-hidden="true"
+	>
+		<rect x="3" y="11" width="18" height="11" rx="2" />
+		<path d="M7 11V7a5 5 0 0 1 10 0v4" />
+	</svg>
+{/snippet}
+
+{#snippet eyeIcon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="h-3.5 w-3.5"
+		aria-hidden="true"
+	>
+		<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
+		<circle cx="12" cy="12" r="3" />
+	</svg>
+{/snippet}
+
+{#snippet replyIcon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="h-3.5 w-3.5"
+		aria-hidden="true"
+	>
+		<polyline points="9 17 4 12 9 7" />
+		<path d="M20 18v-2a4 4 0 0 0-4-4H4" />
+	</svg>
+{/snippet}
+
+{#snippet editIcon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="h-3.5 w-3.5"
+		aria-hidden="true"
+	>
+		<path d="M12 20h9" />
+		<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+	</svg>
+{/snippet}
+
+{#snippet trashIcon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="h-3.5 w-3.5"
+		aria-hidden="true"
+	>
+		<polyline points="3 6 5 6 21 6" />
+		<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+	</svg>
+{/snippet}
+
+{#snippet commentRow(c: Comment, isReply: boolean)}
+	<div class="flex gap-3">
+		<UserAvatar
+			name={c.author_name}
+			avatarUrl={c.author_avatar_url}
+			size={isReply ? 'xs' : 'sm'}
+			class="mt-0.5"
+		/>
+		<div class="min-w-0 flex-1">
+			<div class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+				<span class="font-semibold">{c.author_name ?? 'Unknown'}</span>
+				<span
+					class="text-base-content/50 text-xs"
+					title={formatFullDate(c.created_at)}
+				>
+					{formatRelativeTime(c.created_at)}
+				</span>
+				{#if c.edited_at}
+					<span
+						class="text-base-content/40 text-xs"
+						title={formatFullDate(c.edited_at)}
+					>
+						· edited
+					</span>
+				{/if}
+				{#if showVisibilityControls}
+					{#if c.visibility === 'internal'}
+						<span
+							class="badge badge-ghost badge-xs gap-1"
+							title="Internal — staff only"
+						>
+							{@render lockIcon()}
+							Internal
+						</span>
+					{:else}
+						<span
+							class="badge badge-primary badge-xs gap-1"
+							title="Client-visible — shown in the portal"
+						>
+							{@render eyeIcon()}
+							Client
+						</span>
+					{/if}
+				{/if}
+			</div>
+
+			{#if editingId === c.id}
+				<div class="mt-1.5">
+					<textarea
+						class="textarea textarea-bordered w-full text-sm"
+						rows="2"
+						aria-label="Edit comment"
+						bind:value={editBody}
+						disabled={editBusy}
+					></textarea>
+					{#if editError}
+						<p class="text-error mt-1 text-xs">{editError}</p>
+					{/if}
+					<div class="mt-2 flex items-center gap-2">
+						<button
+							type="button"
+							class="btn btn-primary btn-xs"
+							disabled={editBusy || !editBody.trim()}
+							onclick={() => saveEdit(c)}
+						>
+							{#if editBusy}
+								<span class="loading loading-spinner loading-xs"></span>
+							{/if}
+							Save
+						</button>
+						<button
+							type="button"
+							class="btn btn-ghost btn-xs"
+							disabled={editBusy}
+							onclick={cancelEdit}
+						>
+							Cancel
+						</button>
+					</div>
+				</div>
+			{:else if isDeleted(c)}
+				<p class="text-base-content/40 mt-0.5 text-sm italic">[deleted]</p>
+			{:else}
+				<!-- Body is escaped in renderBody() before interpolation. -->
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+				<div class="mt-0.5 text-sm break-words whitespace-pre-wrap">
+					{@html renderBody(c.body)}
+				</div>
+			{/if}
+
+			<!-- Action row -->
+			{#if editingId !== c.id && !isDeleted(c)}
+				<div class="mt-1.5 flex items-center gap-3">
+					<button
+						type="button"
+						class="text-base-content/50 hover:text-base-content inline-flex items-center gap-1 text-xs"
+						onclick={() => openReply(isReply ? (c.parent_id ?? c.id) : c.id)}
+					>
+						{@render replyIcon()}
+						Reply
+					</button>
+					{#if canModify(c)}
+						<button
+							type="button"
+							class="text-base-content/50 hover:text-base-content inline-flex items-center gap-1 text-xs"
+							onclick={() => startEdit(c)}
+						>
+							{@render editIcon()}
+							Edit
+						</button>
+						{#if confirmDeleteId === c.id}
+							<span class="inline-flex items-center gap-2 text-xs">
+								<span class="text-base-content/60">Delete?</span>
+								<button
+									type="button"
+									class="text-error hover:underline"
+									disabled={deletingId === c.id}
+									onclick={() => confirmDelete(c)}
+								>
+									{#if deletingId === c.id}
+										<span class="loading loading-spinner loading-xs"></span>
+									{/if}
+									Yes
+								</button>
+								<button
+									type="button"
+									class="text-base-content/60 hover:underline"
+									disabled={deletingId === c.id}
+									onclick={() => (confirmDeleteId = null)}
+								>
+									No
+								</button>
+							</span>
+						{:else}
+							<button
+								type="button"
+								class="text-base-content/50 hover:text-error inline-flex items-center gap-1 text-xs"
+								onclick={() => (confirmDeleteId = c.id)}
+							>
+								{@render trashIcon()}
+								Delete
+							</button>
+						{/if}
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/snippet}