Phase 8: Polish & UX — dark mode, toasts, keyboard shortcuts, responsive, accessibility
- 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
+124
-4
@@ -3,12 +3,19 @@
|
||||
import type { Snippet } from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { connectSocket, disconnectSocket } from '$lib/stores/socket.js';
|
||||
import { initTheme, toggleTheme, getTheme } from '$lib/stores/theme.js';
|
||||
import NotificationBell from '$lib/components/NotificationBell.svelte';
|
||||
import SearchBar from '$lib/components/SearchBar.svelte';
|
||||
import Toast from '$lib/components/Toast.svelte';
|
||||
import KeyboardShortcuts from '$lib/components/KeyboardShortcuts.svelte';
|
||||
|
||||
let { children, data }: { children: Snippet; data: { user: any; tenant: any } } = $props();
|
||||
let { children, data }: { children: Snippet; data: { user: any; tenant: any; theme?: string } } = $props();
|
||||
|
||||
let mobileMenuOpen = $state(false);
|
||||
const theme = $derived(getTheme());
|
||||
|
||||
onMount(() => {
|
||||
initTheme(data.theme);
|
||||
if (data.user) {
|
||||
connectSocket();
|
||||
return () => disconnectSocket();
|
||||
@@ -16,7 +23,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<div class="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<nav class="bg-[var(--color-primary)] shadow-sm">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-14 items-center justify-between">
|
||||
@@ -31,10 +38,29 @@
|
||||
</a>
|
||||
|
||||
{#if data.user}
|
||||
<SearchBar />
|
||||
<div class="hidden sm:block">
|
||||
<SearchBar />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Desktop nav -->
|
||||
<div class="hidden sm:flex items-center gap-3">
|
||||
<button
|
||||
onclick={toggleTheme}
|
||||
class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"
|
||||
aria-label="Toggle dark mode"
|
||||
title="Toggle dark mode"
|
||||
>
|
||||
{#if theme === 'dark'}
|
||||
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
{#if data.user}
|
||||
{#if data.user.tenantRole === 'ADMIN' || data.user.globalRole === 'SITE_ADMIN'}
|
||||
<a
|
||||
@@ -70,9 +96,103 @@
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Mobile hamburger -->
|
||||
<div class="flex items-center gap-2 sm:hidden">
|
||||
<button
|
||||
onclick={toggleTheme}
|
||||
class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"
|
||||
aria-label="Toggle dark mode"
|
||||
>
|
||||
{#if theme === 'dark'}
|
||||
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
{#if data.user}
|
||||
<NotificationBell />
|
||||
{/if}
|
||||
<button
|
||||
onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
|
||||
class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
{#if mobileMenuOpen}
|
||||
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
{:else}
|
||||
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||
{/if}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile dropdown -->
|
||||
{#if mobileMenuOpen}
|
||||
<div class="sm:hidden border-t border-white/20 px-4 py-3 space-y-2">
|
||||
{#if data.user}
|
||||
<div class="w-full">
|
||||
<SearchBar />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-white/80 text-sm py-1">{data.user.name}</span>
|
||||
{#if data.user.tenantRole === 'ADMIN' || data.user.globalRole === 'SITE_ADMIN'}
|
||||
<a
|
||||
href="/admin"
|
||||
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition text-center"
|
||||
onclick={() => (mobileMenuOpen = false)}
|
||||
>
|
||||
Admin
|
||||
</a>
|
||||
{/if}
|
||||
<a
|
||||
href="/boards"
|
||||
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition text-center"
|
||||
onclick={() => (mobileMenuOpen = false)}
|
||||
>
|
||||
Boards
|
||||
</a>
|
||||
<button
|
||||
onclick={async () => {
|
||||
await fetch('/api/auth/logout', { method: 'POST' });
|
||||
window.location.href = '/';
|
||||
}}
|
||||
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col gap-1">
|
||||
<a
|
||||
href="/auth/login"
|
||||
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition text-center"
|
||||
onclick={() => (mobileMenuOpen = false)}
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
<a
|
||||
href="/auth/register"
|
||||
class="rounded bg-white px-3 py-1.5 text-sm text-[var(--color-primary)] font-medium hover:bg-white/90 transition text-center"
|
||||
onclick={() => (mobileMenuOpen = false)}
|
||||
>
|
||||
Register
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
<Toast />
|
||||
<KeyboardShortcuts />
|
||||
|
||||
Reference in New Issue
Block a user