Oier Bravo Urtasun
e7a961a66d
Fase 2b closes the critical-path product differentiator. Two sessions on the
same list see each other's changes in real time, mutations survive network
drops and sync when reconnected, and a dedicated full-screen shopping view
optimises the in-store experience.
2b.1 Realtime
- `$lib/stores/realtimeSync.ts` wraps `postgres_changes` with an `applyItemEvent`
reducer (INSERT/UPDATE/DELETE → next items[]) and a `subscribeToList` helper
that awaits the SUBSCRIBED handshake before returning
- `/lists/[id]` subscribes in onMount, unsubscribes in onDestroy. Uses a
`pendingTempIds` set to deduplicate own-mutation echoes against optimistic
rows (matches by name+created_by+sort_order)
- Client-generated UUIDs for new inserts make the path idempotent: if the
server response is lost and we retry, the second POST hits PK-conflict
which the queue treats as success
- CHECKED section div now carries role="listitem" so Playwright locators
follow the item across sections
2b.2 Offline queue
- `$lib/sync/queue.ts` — SyncQueue class backed by IndexedDB (idb), FIFO flush,
MAX_ATTEMPTS=5 retry budget, PK-conflict-as-success short-circuit
- `$lib/sync/index.ts` — app-wide singleton, window.online listener flushes
automatically, hydrateSyncState() at page load restores pendingOpsCount
- `$lib/stores/syncStatus.ts` — derived store (offline | syncing | synced)
tracking navigator.onLine + queue depth
- SyncBanner component renders the offline/syncing indicator in the detail
and session views
- handleAdd enqueues on failure instead of reverting, so an offline mutation
keeps its optimistic row and syncs on reconnect
2b.3 Modo Compra
- `/lists/[id]/session/+page.svelte` — full-screen overlay (fixed inset-0
z-50) that covers the sidebar while keeping the normal auth routing.
56×56 toggles, flip animation shuffling items between TO BUY / CHECKED,
Finish Shopping confirmation modal → completeList → goto('/lists')
- Link from `/lists/[id]` header (data-testid=start-session) with the
new `list_start_session` message
Testing infra
- apps/web gets its own Vitest config (jsdom + fake-indexeddb/auto) and a
new `pnpm test:unit` script. `just test-all` now chains pgTAP → integration
→ unit → e2e so a single command is the gate.
- packages/test-utils/tests/sync-queue.test.ts (placeholder scaffold) removed —
replaced by `apps/web/src/lib/sync/queue.test.ts` co-located with the module
Totals: 103 tests green
16 pgTAP
59 Vitest integration (in packages/test-utils)
6 Vitest unit (in apps/web — the SyncQueue)
22 Playwright E2E (5 auth + 4 lists + 6 items + 2 realtime + 2 offline + 3 session)
2 skipped (realtime-presence — upstream bug, unchanged)
Documented in plan/fase-2b and CLAUDE.md.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
52 lines
1.5 KiB
JSON
52 lines
1.5 KiB
JSON
{
|
|
"name": "@colectivo/web",
|
|
"private": true,
|
|
"version": "0.0.1",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite dev",
|
|
"build": "vite build",
|
|
"preview": "vite preview",
|
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
"lint": "prettier --check . && eslint .",
|
|
"format": "prettier --write .",
|
|
"test:unit": "vitest run",
|
|
"test:e2e": "playwright test",
|
|
"test:e2e:headed": "playwright test --headed"
|
|
},
|
|
"dependencies": {
|
|
"@colectivo/types": "workspace:*",
|
|
"@inlang/paraglide-sveltekit": "^0.16.1",
|
|
"@supabase/supabase-js": "^2.46.2",
|
|
"cropperjs": "^1.6.2",
|
|
"idb": "^8.0.1",
|
|
"lucide-svelte": "^1.0.1",
|
|
"svelte-dnd-action": "^0.9.51"
|
|
},
|
|
"devDependencies": {
|
|
"@playwright/test": "^1.50.0",
|
|
"@sveltejs/adapter-node": "^5.2.11",
|
|
"@sveltejs/kit": "^2.15.1",
|
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
"@vite-pwa/sveltekit": "^0.6.6",
|
|
"@vitest/ui": "^4.1.4",
|
|
"autoprefixer": "^10.4.20",
|
|
"eslint": "^9.18.0",
|
|
"eslint-plugin-svelte": "^2.46.1",
|
|
"fake-indexeddb": "^6.2.5",
|
|
"jsdom": "^29.0.2",
|
|
"postcss": "^8.5.1",
|
|
"prettier": "^3.4.2",
|
|
"prettier-plugin-svelte": "^3.3.2",
|
|
"prettier-plugin-tailwindcss": "^0.6.9",
|
|
"svelte": "^5.17.3",
|
|
"svelte-check": "^4.1.1",
|
|
"tailwindcss": "^3.4.17",
|
|
"typescript": "^5.7.3",
|
|
"vite": "^6.0.7",
|
|
"vitest": "^2.1.8",
|
|
"workbox-window": "^7.3.0"
|
|
}
|
|
}
|