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/ActivityFeed.svelte
+11 -10
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { onBoardEvent, offBoardEvent } from '$lib/stores/socket.js';
import { api } from '$lib/utils/api.js';
type Props = {
boardId: string;
@@ -71,9 +72,9 @@
url.searchParams.set('limit', '20');
if (cursor) url.searchParams.set('cursor', cursor);
const res = await fetch(url.toString());
if (!res.ok) return;
return res.json();
const { ok, data } = await api(url.toString());
if (!ok) return;
return data;
}
async function loadMore() {
@@ -117,12 +118,12 @@
<div class="space-y-3">
{#if loading}
<div class="animate-pulse space-y-2">
<div class="h-3 bg-gray-200 rounded w-3/4"></div>
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
<div class="h-3 bg-gray-200 rounded w-2/3"></div>
<div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
<div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
<div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
</div>
{:else if activities.length === 0}
<p class="text-sm text-gray-400 text-center py-4">No activity yet</p>
<p class="text-sm text-gray-400 dark:text-gray-500 text-center py-4">No activity yet</p>
{:else}
{#each activities as activity (activity.id)}
<div class="flex gap-2 text-sm">
@@ -133,11 +134,11 @@
{activity.user.name[0].toUpperCase()}
</div>
<div class="min-w-0">
<p class="text-gray-700 leading-snug">
<p class="text-gray-700 dark:text-gray-300 leading-snug">
<span class="font-medium">{activity.user.name}</span>
{' '}{formatAction(activity)}
</p>
<p class="text-xs text-gray-400 mt-0.5">{timeAgo(activity.createdAt)}</p>
<p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{timeAgo(activity.createdAt)}</p>
</div>
</div>
{/each}
@@ -146,7 +147,7 @@
<button
onclick={loadMore}
disabled={loadingMore}
class="w-full text-center text-sm text-gray-500 hover:text-gray-700 py-2 transition"
class="w-full text-center text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 py-2 transition"
>
{loadingMore ? 'Loading...' : 'Load more'}
</button>