+ {offline && connection === "ok" && (
+
+ {COPY.offlineOnDevice}
+
+ )}
{connection !== "ok" && (
{connection === "signed-out" ? COPY.signedOutBody : COPY.stoppedBody}
diff --git a/src/web/components/PendingChanges.tsx b/src/web/components/PendingChanges.tsx
new file mode 100644
index 0000000..0a198f1
--- /dev/null
+++ b/src/web/components/PendingChanges.tsx
@@ -0,0 +1,156 @@
+import { AlertTriangle, CloudOff, Download, RefreshCw, Trash2 } from "lucide-react";
+import { useState } from "react";
+import type { OutboxStore, PendingChange } from "../store.ts";
+import { message, relativeTime } from "../lib/format.ts";
+import { cn } from "../lib/utils.ts";
+import { Button } from "./ui/button.tsx";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.tsx";
+import { useAsk } from "./ui/ask.tsx";
+import { useToast } from "./ui/toast.tsx";
+
+/*
+ Writing kept on this device until it reaches the Roll.
+
+ A store that offers an outbox (GitRoll.com with "keep on this device") lets
+ people save while offline. Those saves are not in the Roll yet, and that is
+ the one thing this must never blur: the light says how many are only here,
+ which are being sent, and which need a person. Nothing is thrown away except
+ by the person, after they have had the chance to download it.
+*/
+
+const STATE_TEXT: Record = {
+ "saved-locally": "On this device",
+ syncing: "Sending…",
+ "needs-attention": "Needs attention",
+};
+
+export function PendingIndicator({ store, version }: { store: OutboxStore; version: string }) {
+ const [open, setOpen] = useState(false);
+ const [busy, setBusy] = useState(false);
+ const ask = useAsk();
+ const toast = useToast();
+ // version is the redraw key: pending() is read fresh on every render.
+ void version;
+ const items = store.pending();
+ const offline = store.offline();
+ if (!items.length && !offline) return null;
+
+ const attention = items.filter((i) => i.state === "needs-attention").length;
+ const sending = items.some((i) => i.state === "syncing");
+ const Icon = attention ? AlertTriangle : sending ? RefreshCw : CloudOff;
+ const text = attention
+ ? `${attention} need${attention === 1 ? "s" : ""} attention`
+ : items.length
+ ? `${items.length} on this device`
+ : "Offline";
+
+ const download = async (item: PendingChange) => {
+ try {
+ const { name, blob } = await store.exportPending(item.id);
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = name;
+ a.click();
+ setTimeout(() => URL.revokeObjectURL(url), 10_000);
+ } catch (err) {
+ toast.error(message(err));
+ }
+ };
+
+ const discard = async (item: PendingChange) => {
+ const yes = await ask.confirm({
+ title: "Throw this away?",
+ description: "It isn't in your Roll, so once it's gone from this device it's gone. Download it first if you might want it.",
+ confirmLabel: "Throw away",
+ destructive: true,
+ });
+ if (!yes) return;
+ try {
+ await store.discardPending(item.id);
+ } catch (err) {
+ toast.error(message(err));
+ }
+ };
+
+ const retry = async () => {
+ setBusy(true);
+ try {
+ await store.syncPending();
+ } catch (err) {
+ toast.error(message(err));
+ } finally {
+ setBusy(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
Kept on this device
+
+ {items.length
+ ? "These aren't in your Roll yet. Each one is sent once, when this browser can reach your Roll."
+ : "You're offline. What you save stays on this device until you're back online."}
+
+
+
+ {items.length > 0 && (
+
+ {items.map((item) => (
+ -
+
+ {item.kind === "edit" ? "Edit: " : ""}
+ {item.title || "Untitled"}
+
+
+ {STATE_TEXT[item.state]}
+ {item.attachments > 0 && ` · ${item.attachments === 1 ? "1 file" : `${item.attachments} files`} waiting`}
+ {" · "}
+ {relativeTime(new Date(item.createdAt).toISOString())}
+ {item.message && {item.message}}
+
+
+
+ {item.state !== "syncing" && (
+
+ )}
+
+
+ ))}
+
+ )}
+
+ {items.length > 0 && (
+
+ )}
+