giles
b0920a1121
Component names now reflect filesystem location using / as path separator and : as namespace separator for shared components: ~sx-header → ~layouts/header ~layout-app-body → ~shared:layout/app-body ~blog-admin-dashboard → ~admin/dashboard 209 files, 4,941 replacements across all services. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
77 lines
4.3 KiB
Plaintext
77 lines
4.3 KiB
Plaintext
;; Offline data layer demo — exercises Phase 7d offline mutation queue.
|
|
;;
|
|
;; Shows connectivity status, note list, and offline mutation queue.
|
|
;; When offline, mutations are queued locally. On reconnect, they sync.
|
|
;;
|
|
;; Open browser console and look for:
|
|
;; "sx:offline queued" — mutation added to queue while offline
|
|
;; "sx:offline syncing" — reconnected, replaying queued mutations
|
|
;; "sx:offline synced" — individual mutation confirmed by server
|
|
|
|
(defcomp ~offline-demo/content (&key notes server-time)
|
|
(div :class "space-y-8"
|
|
(div :class "border-b border-stone-200 pb-6"
|
|
(h1 :class "text-2xl font-bold text-stone-900" "Offline Data Layer")
|
|
(p :class "mt-2 text-stone-600"
|
|
"This page tests Phase 7d offline capabilities. Mutations made while "
|
|
"offline are queued locally and replayed when connectivity returns."))
|
|
|
|
;; Connectivity indicator
|
|
(div :class "rounded-lg border border-stone-200 bg-white p-6 space-y-3"
|
|
(h2 :class "text-lg font-semibold text-stone-800" "Status")
|
|
(dl :class "grid grid-cols-2 gap-2 text-sm"
|
|
(dt :class "font-medium text-stone-600" "Server time")
|
|
(dd :class "font-mono text-stone-900" server-time)
|
|
(dt :class "font-medium text-stone-600" "Notes count")
|
|
(dd :class "text-stone-900" (str (len notes)))
|
|
(dt :class "font-medium text-stone-600" "Connectivity")
|
|
(dd :class "text-stone-900"
|
|
(span :id "offline-status" :class "inline-flex items-center gap-1.5"
|
|
(span :class "w-2 h-2 rounded-full bg-green-500")
|
|
"Online"))))
|
|
|
|
;; Note list
|
|
(div :class "space-y-3"
|
|
(h2 :class "text-lg font-semibold text-stone-800" "Notes")
|
|
(div :id "offline-notes" :class "space-y-2"
|
|
(map (fn (note)
|
|
(div :class "flex items-center justify-between rounded border border-stone-100 bg-white p-3"
|
|
(div :class "flex items-center gap-3"
|
|
(span :class "flex-none rounded-full bg-blue-100 text-blue-700 w-6 h-6 flex items-center justify-center text-xs font-bold"
|
|
(str (get note "id")))
|
|
(span :class "text-stone-900" (get note "text")))
|
|
(span :class "text-xs text-stone-400 font-mono"
|
|
(get note "created"))))
|
|
notes)))
|
|
|
|
;; Architecture
|
|
(div :class "space-y-4"
|
|
(h2 :class "text-lg font-semibold text-stone-800" "How it works")
|
|
(div :class "space-y-2"
|
|
(map-indexed
|
|
(fn (i step)
|
|
(div :class "flex items-start gap-3 rounded border border-stone-100 bg-white p-3"
|
|
(span :class "flex-none rounded-full bg-stone-100 text-stone-700 w-6 h-6 flex items-center justify-center text-xs font-bold"
|
|
(str (+ i 1)))
|
|
(div
|
|
(div :class "font-medium text-stone-900" (get step "label"))
|
|
(div :class "text-sm text-stone-500" (get step "detail")))))
|
|
(list
|
|
(dict :label "Online mutation" :detail "Routes through submit-mutation (Phase 7c) — optimistic predict, server confirm/revert")
|
|
(dict :label "Offline detection" :detail "Browser 'offline' event sets _is-online to false. offline-aware-mutation routes to queue")
|
|
(dict :label "Queue mutation" :detail "Mutation stored in _offline-queue with 'pending' status. Optimistic update applied locally")
|
|
(dict :label "Reconnect" :detail "Browser 'online' event triggers offline-sync — replays queue in order via execute-action")
|
|
(dict :label "Sync result" :detail "Each mutation marked 'synced' or 'failed'. Failed mutations stay for manual retry")))))
|
|
|
|
;; How to test
|
|
(div :class "rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm space-y-2"
|
|
(p :class "font-semibold text-amber-800" "How to test offline behavior")
|
|
(ol :class "list-decimal list-inside text-amber-700 space-y-1"
|
|
(li "Open the browser console and Network tab")
|
|
(li "Navigate to this page via client-side routing")
|
|
(li "In DevTools, set Network to \"Offline\" mode")
|
|
(li "The connectivity indicator should change to red/Offline")
|
|
(li "Watch console for " (code :class "bg-amber-100 px-1 rounded" "sx:offline queued"))
|
|
(li "Re-enable network — watch for " (code :class "bg-amber-100 px-1 rounded" "sx:offline syncing"))
|
|
(li "Queued mutations replay and confirm or fail")))))
|