cat/Kanban
Private
Public Access
1
0
Fork 0
Code Activity

Phase 8: Polish & UX — dark mode, toasts, keyboard shortcuts, responsive, accessibility

Browse Source 
- Add dark mode with theme toggle, localStorage/cookie persistence, anti-FOUC script
- Add toast notification system with auto-dismiss and color-coded types
- Add api() fetch wrapper with auto JSON, X-Socket-ID, and error toasts
- Add keyboard shortcuts (/ search, b boards, ? help, n new card, Esc close)
- Add error page with status code and navigation
- Add focus trap utility and apply to CardModal with full ARIA dialog support
- Add hamburger menu for mobile, responsive columns, fullscreen card modal on mobile
- Add aria-labels to icon-only buttons and DnD live region
- Migrate all ~30 fetch calls to api() wrapper with success toasts
- Add dark: Tailwind variants to all 20+ pages and components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Catherine Renelle
2026-02-26 01:09:17 -05:00
parent 6ed0349507
commit 7559102479
33 changed files with 850 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/CommentList.svelte
+17 -20
View File
@@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { renderMarkdown, initDOMPurify } from '$lib/utils/markdown.js';
import { formatDistanceToNow } from 'date-fns';
import { api } from '$lib/utils/api.js';
type Comment = {
id: string;
@@ -44,13 +45,11 @@
async function addComment() {
if (!newContent.trim()) return;
submitting = true;
const res = await fetch(basePath, {
const { ok, data } = await api(basePath, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content: newContent.trim() })
});
if (res.ok) {
const data = await res.json();
if (ok) {
localComments = [data.comment, ...localComments];
newContent = '';
}
@@ -59,21 +58,19 @@
async function updateComment(commentId: string) {
if (!editContent.trim()) return;
const res = await fetch(`${basePath}/${commentId}`, {
const { ok, data } = await api(`${basePath}/${commentId}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content: editContent.trim() })
});
if (res.ok) {
const data = await res.json();
if (ok) {
localComments = localComments.map((c) => (c.id === commentId ? data.comment : c));
editingId = null;
}
}
async function deleteComment(commentId: string) {
const res = await fetch(`${basePath}/${commentId}`, { method: 'DELETE' });
if (res.ok) {
const { ok } = await api(`${basePath}/${commentId}`, { method: 'DELETE' });
if (ok) {
localComments = localComments.filter((c) => c.id !== commentId);
}
}
@@ -85,7 +82,7 @@
</script>
<div>
<h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">Comments</h3>
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-2">Comments</h3>
<!-- Add comment -->
{#if canEdit}
@@ -94,7 +91,7 @@
bind:value={newContent}
rows="3"
placeholder="Write a comment... (Markdown supported)"
class="w-full rounded-lg border border-gray-300 p-3 text-sm resize-y focus:border-[var(--color-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
class="w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 p-3 text-sm resize-y focus:border-[var(--color-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
></textarea>
<div class="flex justify-end mt-1">
<button
@@ -117,8 +114,8 @@
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-0.5">
<span class="text-sm font-medium text-gray-800">{comment.user.name}</span>
<span class="text-xs text-gray-400">
<span class="text-sm font-medium text-gray-800 dark:text-gray-200">{comment.user.name}</span>
<span class="text-xs text-gray-400 dark:text-gray-500">
{formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
</span>
</div>
@@ -127,7 +124,7 @@
<textarea
bind:value={editContent}
rows="3"
class="w-full rounded border border-gray-300 p-2 text-sm resize-y focus:border-[var(--color-primary)] focus:outline-none"
class="w-full rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 p-2 text-sm resize-y focus:border-[var(--color-primary)] focus:outline-none"
></textarea>
<div class="flex gap-2 mt-1">
<button
@@ -138,14 +135,14 @@
</button>
<button
onclick={() => (editingId = null)}
class="text-xs text-gray-500 hover:text-gray-700"
class="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
>
Cancel
</button>
</div>
</div>
{:else}
<div class="prose text-sm text-gray-700">
<div class="prose text-sm text-gray-700 dark:text-gray-300">
{#if ready}
{@html renderMarkdown(comment.content)}
{:else}
@@ -156,7 +153,7 @@
{#if comment.userId === currentUserId}
<button
onclick={() => startEdit(comment)}
class="text-xs text-gray-400 hover:text-gray-600"
class="text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
>
Edit
</button>
@@ -164,7 +161,7 @@
{#if comment.userId === currentUserId || canEdit}
<button
onclick={() => deleteComment(comment.id)}
class="text-xs text-gray-400 hover:text-red-500"
class="text-xs text-gray-400 dark:text-gray-500 hover:text-red-500"
>
Delete
</button>
@@ -177,6 +174,6 @@
</div>
{#if localComments.length === 0}
<p class="text-xs text-gray-400 italic">No comments yet</p>
<p class="text-xs text-gray-400 dark:text-gray-500 italic">No comments yet</p>
{/if}
</div>