diff --git a/src/components/TasksList.css b/src/components/TasksList.css
index c89c820..a9528fc 100644
--- a/src/components/TasksList.css
+++ b/src/components/TasksList.css
@@ -12,17 +12,59 @@
width: 100%;
margin: 0;
padding: 0;
+ gap: 0.5rem;
}
.task-node {
position: relative;
display: flex;
flex-direction: column;
- gap: 0.6rem;
+ gap: 0;
+ transition: transform 200ms ease, opacity 180ms ease;
+ /* Create local stacking context to prevent shelf overlap with siblings */
+ z-index: 1;
+}
+
+/* Ensure expanded node is above siblings during animation */
+.task-node.is-expanded {
+ z-index: 2;
+}
+
+.task-node.is-dragged .task-item {
+ opacity: 0.35;
+}
+
+.task-node.is-drop-target.drop-inside .task-item {
+ outline: 2px solid var(--accent, #1a9bb2);
+ outline-offset: 2px;
+ background: color-mix(in srgb, var(--accent-soft, #e6f5f7) 70%, #fff);
+ transform: scale(1.005);
+}
+
+.task-node.is-drop-target.drop-above::before,
+.task-node.is-drop-target.drop-below::after {
+ content: "";
+ position: absolute;
+ left: 12px;
+ right: 12px;
+ height: 2px;
+ background: var(--accent, #1a9bb2);
+ border-radius: 999px;
+ z-index: 10;
+}
+
+.task-node.is-drop-target.drop-above::before {
+ top: -6px;
+}
+
+.task-node.is-drop-target.drop-below::after {
+ bottom: -6px;
}
.task-node__card {
position: relative;
+ /* Ensure card content is above shelf */
+ z-index: 2;
}
.task-node__card .task-item {
@@ -50,14 +92,14 @@
position: absolute;
left: 1.75%;
width: 96.5%;
- height: 40px;
+ height: 100%;
background: var(--surface, #fff);
border: 1px solid var(--border-subtle, #d8e2ec);
border-radius: var(--radius-lg, 16px);
box-shadow: var(--card-shadow, 0 24px 60px -38px rgba(15, 23, 42, 0.52));
transform-origin: top center;
transition:
- transform 360ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+ transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
opacity 200ms ease,
border-color 160ms ease;
@@ -89,33 +131,49 @@
.task-node.is-expanded .shelf-card {
opacity: 0;
- transform: translateY(0) scale(1);
+ /* Slide slightly up to "hide" behind the main card as it opens */
+ transform: translateY(2px) scale(0.98);
+ transition: transform 200ms ease, opacity 150ms ease;
}
-.node-children {
- display: grid;
- grid-template-rows: 0fr;
- transition: grid-template-rows 360ms ease;
+.node-children-wrapper {
+ position: relative;
margin-left: 22px;
padding-left: 14px;
- position: relative;
+ /* Animate the margin/spacing if needed, but keeping it static is safer for layout stability */
+ margin-top: 0;
+ transition: margin-top 360ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.task-node.is-expanded > .node-children-wrapper {
+ margin-top: 16px;
+}
+
+.node-children-animator {
+ /* Grid trick for height animation */
+ display: grid;
+ grid-template-rows: 0fr;
+ transition: grid-template-rows 360ms cubic-bezier(0.4, 0, 0.2, 1);
+ /* Overflow hidden is required for the grid animation to clip content */
+ overflow: hidden;
}
.spine-line {
position: absolute;
left: 0;
- top: 0;
- bottom: 12px;
+ top: -12px; /* Connect to parent */
+ bottom: 10px; /* Don't go all the way down */
width: 2px;
background: var(--border-subtle, #d8e2ec);
+ border-radius: 2px;
opacity: 0;
transition: opacity 200ms ease;
}
.spine-tab {
position: absolute;
- left: -10px;
- top: -12px;
+ left: -11px;
+ top: -14px;
width: 24px;
height: 24px;
padding: 0;
@@ -129,7 +187,8 @@
opacity: 0;
transform: scale(0.8);
transition: all 260ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
- z-index: 3;
+ z-index: 5;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.spine-tab:hover {
@@ -139,31 +198,33 @@
}
.node-children-inner {
- overflow: hidden;
+ min-height: 0;
+ /* Removed overflow: hidden to prevent clipping of nested shadows/items */
opacity: 0;
- transform: translateY(-8px);
+ transform: translateY(-10px);
transition: opacity 200ms ease, transform 200ms ease;
display: flex;
flex-direction: column;
gap: 0.8rem;
pointer-events: none;
+ padding-top: 0.25rem;
+ padding-bottom: 0.5rem; /* Ensure shadows aren't clipped by parent */
}
-.task-node.is-expanded > .node-children {
+.task-node.is-expanded .node-children-animator {
grid-template-rows: 1fr;
- margin-top: 12px;
}
-.task-node.is-expanded > .node-children .spine-line {
+.task-node.is-expanded .spine-line {
opacity: 1;
}
-.task-node.is-expanded > .node-children .spine-tab {
+.task-node.is-expanded .spine-tab {
opacity: 1;
transform: scale(1);
}
-.task-node.is-expanded > .node-children > .node-children-inner {
+.task-node.is-expanded .node-children-inner {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
@@ -173,3 +234,36 @@
opacity: 0.85;
transform: scale(0.98);
}
+
+.drag-overlay__card {
+ background: var(--surface, #fff);
+ border-radius: var(--radius-lg, 16px);
+ border: 1px solid var(--border-subtle, #d8e2ec);
+ box-shadow: var(--card-shadow, 0 24px 60px -38px rgba(15, 23, 42, 0.52));
+ padding: 0.75rem 1rem;
+ animation: float-lift 160ms ease both;
+ z-index: 100;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+@keyframes float-lift {
+ from {
+ opacity: 0.4;
+ transform: scale(0.98);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
diff --git a/src/components/TasksList.tsx b/src/components/TasksList.tsx
index d04395c..963c3f2 100644
--- a/src/components/TasksList.tsx
+++ b/src/components/TasksList.tsx
@@ -3,7 +3,8 @@ import { createStore } from "solid-js/store";
import { clientOnly } from "@solidjs/start";
import Minus from "lucide-solid/icons/minus";
import TaskItem from "./TaskItem";
-import { type TreeNode } from "~/stores/taskStore";
+import { DragProvider, useDrag, type DropPosition } from "./DragProvider";
+import { moveTask, tasks as tasksStore, type TreeNode } from "~/stores/taskStore";
import './TasksList.css';
export default clientOnly(async () => ({ default: TasksList }), { lazy: true });
@@ -23,17 +24,100 @@ type ExpansionState = {
function TasksList(props: TasksListProps) {
const [expandedMap, setExpandedMap] = createStore
>({});
+ const handleDrop = (draggedId: string, targetId: string, position: Exclude) => {
+ const tree = tasksStore();
+
+ const nodeIndex = new Map();
+ const parentIndex = new Map();
+
+ const indexTree = (nodes: TreeNode[], parentId: string | null) => {
+ nodes.forEach(node => {
+ nodeIndex.set(node.id, node);
+ parentIndex.set(node.id, parentId);
+ indexTree(node.children, node.id);
+ });
+ };
+
+ indexTree(tree, null);
+
+ const draggedNode = nodeIndex.get(draggedId);
+ const targetNode = nodeIndex.get(targetId);
+
+ if (!draggedNode || !targetNode || draggedId === targetId) return;
+
+ const isDescendant = (candidateId: string, ancestorId: string) => {
+ let current: string | null | undefined = candidateId;
+ while (current) {
+ const parent = parentIndex.get(current);
+ if (!parent) return false;
+ if (parent === ancestorId) return true;
+ current = parent;
+ }
+ return false;
+ };
+
+ if (isDescendant(targetId, draggedId)) return; // Prevent dropping into own subtree
+
+ const getSiblings = (parentId: string | null) => {
+ if (parentId === null) return tree;
+ const parentNode = nodeIndex.get(parentId);
+ return parentNode ? parentNode.children : [];
+ };
+
+ if (position === "inside") {
+ const siblings = targetNode.children.filter(child => child.id !== draggedId);
+ const last = siblings[siblings.length - 1];
+ moveTask(draggedId, targetId, last?.rank, undefined);
+ return;
+ }
+
+ const newParentId = parentIndex.get(targetId) ?? null;
+ const siblings = getSiblings(newParentId).filter(child => child.id !== draggedId);
+ const targetIndex = siblings.findIndex(child => child.id === targetId);
+ if (targetIndex === -1) return;
+
+ const insertIndex = position === "above" ? targetIndex : targetIndex + 1;
+ const prev = siblings[insertIndex - 1];
+ const next = siblings[insertIndex];
+
+ moveTask(draggedId, newParentId, prev?.rank, next?.rank);
+ };
+
+ const renderOverlay = (id: string | null) => {
+ if (!id) return null;
+
+ const findNode = (nodes: TreeNode[]): TreeNode | undefined => {
+ for (const node of nodes) {
+ if (node.id === id) return node;
+ const nested = findNode(node.children);
+ if (nested) return nested;
+ }
+ return undefined;
+ };
+
+ const node = findNode(tasksStore());
+ if (!node) return null;
+
+ return (
+
+ {node.text}
+
+ );
+ };
+
const expansion: ExpansionState = {
isExpanded: (id) => expandedMap[id] ?? !!props.defaultExpanded,
setExpanded: (id, value) => setExpandedMap(id, value),
};
return (
-
+
+
+
);
}
@@ -67,8 +151,11 @@ type TaskNodeProps = {
};
function TaskNode(props: TaskNodeProps) {
+ const drag = useDrag();
const isExpanded = () => props.expansion.isExpanded(props.node.id);
const hasChildren = () => props.node.children.length > 0;
+ const isDragged = () => drag.state.draggedId === props.node.id;
+ const isTarget = () => drag.state.targetId === props.node.id;
const expand = () => {
if (hasChildren()) {
@@ -84,7 +171,13 @@ function TaskNode(props: TaskNodeProps) {
classList={{
"is-expanded": isExpanded(),
"has-children": hasChildren(),
+ "is-dragged": isDragged(),
+ "is-drop-target": isTarget(),
+ "drop-above": isTarget() && drag.state.dropPosition === "above",
+ "drop-below": isTarget() && drag.state.dropPosition === "below",
+ "drop-inside": isTarget() && drag.state.dropPosition === "inside",
}}
+ data-task-id={props.node.id}
>
@@ -104,7 +197,7 @@ function TaskNode(props: TaskNodeProps) {
-
+
-
diff --git a/src/lib/crypto.ts b/src/lib/crypto.ts
index cf976ff..c0a3dbd 100644
--- a/src/lib/crypto.ts
+++ b/src/lib/crypto.ts
@@ -1,6 +1,10 @@
// Convert raw key string (from URL) to CryptoKey
export const importKey = async (rawKey: string): Promise
=> {
- const keyBuffer = Uint8Array.from(atob(rawKey), c => c.charCodeAt(0));
+ const binaryString = atob(rawKey);
+ const keyBuffer = new Uint8Array(binaryString.length);
+ for (let i = 0; i < binaryString.length; i++) {
+ keyBuffer[i] = binaryString.charCodeAt(i);
+ }
return window.crypto.subtle.importKey(
"raw", keyBuffer, "AES-GCM", true, ["encrypt", "decrypt"]
);
@@ -12,7 +16,9 @@ export const generateKey = async (): Promise => {
{ name: "AES-GCM", length: 256 }, true, ["encrypt", "decrypt"]
);
const exported = await window.crypto.subtle.exportKey("raw", key);
- return btoa(String.fromCharCode(...new Uint8Array(exported)));
+ const exportedBytes = new Uint8Array(exported);
+ const binaryString = Array.from(exportedBytes, (byte) => String.fromCharCode(byte)).join("");
+ return btoa(binaryString);
};
export const encryptData = async (key: CryptoKey, data: Uint8Array): Promise => {
@@ -35,4 +41,21 @@ export const decryptData = async (key: CryptoKey, data: Uint8Array): Promise => {
+ return generateKey();
+};
+
+export const hashVaultKeyToPath = async (vaultKeyBase64: string): Promise => {
+ const binaryString = atob(vaultKeyBase64);
+ const keyBuffer = new Uint8Array(binaryString.length);
+ for (let i = 0; i < binaryString.length; i++) {
+ keyBuffer[i] = binaryString.charCodeAt(i);
+ }
+ const hashBuffer = await window.crypto.subtle.digest("SHA-256", keyBuffer);
+ const hashArray = new Uint8Array(hashBuffer);
+ const hashBinaryString = Array.from(hashArray, (byte) => String.fromCharCode(byte)).join("");
+ return btoa(hashBinaryString);
};
diff --git a/src/lib/db.ts b/src/lib/db.ts
new file mode 100644
index 0000000..aa3d8e7
--- /dev/null
+++ b/src/lib/db.ts
@@ -0,0 +1,85 @@
+import initWasm from "@vlcn.io/crsqlite-wasm";
+import { isServer } from "solid-js/web";
+
+type DB = any;
+
+let db: DB | null = null;
+let initPromise: Promise | null = null;
+
+const isOpfsSupported = () => {
+ return !isServer && 'showOpenFilePicker' in window;
+};
+
+const initializeDb = async (): Promise => {
+ if (isServer) {
+ throw new Error("Database cannot be initialized on the server");
+ }
+
+ if (db) return db;
+ if (initPromise) return initPromise;
+
+ initPromise = (async () => {
+ try {
+ const sqlite = await initWasm();
+
+ if (isOpfsSupported()) {
+ console.log("Using OPFS for database storage");
+ db = sqlite.open("microstep.db");
+ } else {
+ console.log("OPFS not supported; falling back to IndexedDB storage");
+ db = sqlite.open("microstep.db");
+ }
+
+ return db as DB;
+ } catch (err) {
+ initPromise = null;
+ throw err;
+ }
+ })();
+
+ return initPromise;
+};
+
+export const getDb = async () => {
+ if (!db) {
+ await initializeDb();
+ }
+ return db;
+};
+
+export const initSchema = async () => {
+ const database = await getDb();
+
+ database.exec(`
+ CREATE TABLE IF NOT EXISTS tasks (
+ id TEXT NOT NULL PRIMARY KEY DEFAULT '',
+ parent_id TEXT,
+ text TEXT NOT NULL DEFAULT '',
+ completed INTEGER NOT NULL DEFAULT 0,
+ created_at INTEGER NOT NULL DEFAULT 0,
+ due_at INTEGER,
+ rank TEXT NOT NULL DEFAULT '',
+ site_id BLOB
+ );
+
+ SELECT crsql_as_crr('tasks');
+ `);
+
+ const tables = await database.execO(`
+ SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'crsql_%';
+ `);
+
+ if (tables.length === 0) {
+ console.log("Database initialized with empty tasks table");
+ } else {
+ console.log("Database schema already initialized");
+ }
+};
+
+export const closeDb = () => {
+ if (db) {
+ db.close();
+ db = null;
+ initPromise = null;
+ }
+};
diff --git a/src/lib/encryptedWsProvider.ts b/src/lib/encryptedWsProvider.ts
deleted file mode 100644
index dd43539..0000000
--- a/src/lib/encryptedWsProvider.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as Y from "yjs";
-import { encryptData, decryptData } from "~/lib/crypto"; // Assumes the crypto helpers from previous step
-
-export class EncryptedWsProvider {
- private ws: WebSocket | null = null;
- private doc: Y.Doc;
- private roomId: string;
- private key: CryptoKey;
- private url: string;
-
- // Status flags for UI
- public connected = false;
- public synced = false;
-
- constructor(
- serverUrl: string,
- roomId: string,
- key: CryptoKey,
- doc: Y.Doc
- ) {
- this.roomId = roomId;
- this.key = key;
- this.doc = doc;
-
- // Construct absolute WebSocket URL
- const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
- const host = window.location.host;
- this.url = `${protocol}//${host}${serverUrl}?room=${roomId}`;
-
- this.connect();
-
- // Listen to local changes (User types something)
- this.doc.on("update", this.handleLocalUpdate);
- }
-
- private connect() {
- this.ws = new WebSocket(this.url);
- this.ws.binaryType = "arraybuffer";
-
- this.ws.onopen = () => {
- console.log("[WS] Connected to Blind Relay");
- this.connected = true;
- // In a more complex app, you might want to track sync state
- // by waiting for a specific "end of history" message from server
- this.synced = true;
- };
-
- this.ws.onclose = () => {
- console.log("[WS] Disconnected. Reconnecting in 3s...");
- this.connected = false;
- this.synced = false;
- setTimeout(() => this.connect(), 3000);
- };
-
- this.ws.onerror = (err) => {
- console.error("[WS] Error:", err);
- };
-
- this.ws.onmessage = this.handleIncomingMessage;
- }
-
- /**
- * Handle messages coming FROM the Server (Blind Relay)
- */
- private handleIncomingMessage = async (event: MessageEvent) => {
- if (!event.data) return;
-
- try {
- // 1. The server sends raw encrypted bytes
- const encryptedBuffer = new Uint8Array(event.data);
-
- // 2. Decrypt using the Client-Side Key
- const update = await decryptData(this.key, encryptedBuffer);
-
- // 3. Apply to Y.js
- // The third argument 'this' is the "origin".
- // We check this in handleLocalUpdate to prevent infinite loops.
- Y.applyUpdate(this.doc, update, this);
-
- } catch (err) {
- console.error("[WS] Failed to decrypt incoming message:", err);
- // This usually happens if the Room ID matches but the Key is wrong.
- }
- };
-
- /**
- * Handle changes made LOCALLY (User typing, Drag & Drop)
- */
- private handleLocalUpdate = async (update: Uint8Array, origin: any) => {
- // STOP! If this update came from the WebSocket (origin === this),
- // do NOT send it back to the WebSocket.
- if (origin === this) return;
-
- if (this.ws && this.ws.readyState === WebSocket.OPEN) {
- // 1. Encrypt the update
- const encrypted = await encryptData(this.key, update);
-
- // 2. Send to Blind Relay
- this.ws.send(encrypted);
- }
- };
-
- /**
- * Cleanup
- */
- public destroy() {
- this.doc.off("update", this.handleLocalUpdate);
- this.ws?.close();
- }
-}
diff --git a/src/lib/query.ts b/src/lib/query.ts
new file mode 100644
index 0000000..1c6edc1
--- /dev/null
+++ b/src/lib/query.ts
@@ -0,0 +1,68 @@
+import { createEffect, createSignal, onCleanup } from "solid-js";
+import { getDb } from "./db";
+
+type QueryCallback = () => any;
+
+export const createReactiveQuery = (
+ queryFn: QueryCallback,
+ dependencies: any[] = []
+) => {
+ const [data, setData] = createSignal(null);
+ const [isLoading, setIsLoading] = createSignal(true);
+ const [error, setError] = createSignal(null);
+
+ let isMounted = true;
+
+ const executeQuery = async () => {
+ if (!isMounted) return;
+
+ try {
+ setIsLoading(true);
+ setError(null);
+ const result = await queryFn();
+
+ if (isMounted) {
+ setData(result);
+ }
+ } catch (err) {
+ if (isMounted) {
+ setError(err as Error);
+ }
+ } finally {
+ if (isMounted) {
+ setIsLoading(false);
+ }
+ }
+ };
+
+ createEffect(() => {
+ executeQuery();
+ });
+
+ onCleanup(() => {
+ isMounted = false;
+ });
+
+ return { data, isLoading, error, refetch: executeQuery };
+};
+
+export const createLiveQuery = (sql: string, params: any[] = []) => {
+ const [data, setData] = createSignal([]);
+ const [isLoading, setIsLoading] = createSignal(true);
+
+ const executeQuery = async () => {
+ try {
+ const db = await getDb();
+ const result = db.exec(sql, params);
+ setData(result);
+ } catch (err) {
+ console.error("Live query error:", err);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ executeQuery();
+
+ return { data, isLoading, refetch: executeQuery };
+};
diff --git a/src/lib/sync.ts b/src/lib/sync.ts
new file mode 100644
index 0000000..8ea1b38
--- /dev/null
+++ b/src/lib/sync.ts
@@ -0,0 +1,251 @@
+import { createStore, produce } from "solid-js/store";
+import { getDb } from "~/lib/db";
+import { importKey, encryptData, decryptData } from "~/lib/crypto";
+import { vaultState } from "~/stores/vaultStore";
+import { generateUploadUrl, listChangesets } from "~/actions/syncActions";
+
+type SyncStatus = "idle" | "syncing" | "error";
+
+const SYNC_IDB_NAME = "sync_store";
+const SYNC_IDB_VERSION = 1;
+
+let idb: IDBDatabase | null = null;
+
+const initSyncIndexedDB = (): Promise => {
+ return new Promise((resolve, reject) => {
+ const request = indexedDB.open(SYNC_IDB_NAME, SYNC_IDB_VERSION);
+
+ request.onerror = () => reject(request.error);
+ request.onsuccess = () => resolve(request.result);
+
+ request.onupgradeneeded = (event) => {
+ const db = (event.target as IDBOpenDBRequest).result;
+ if (!db.objectStoreNames.contains("sync")) {
+ db.createObjectStore("sync", { keyPath: "key" });
+ }
+ };
+ });
+};
+
+const setSyncIDBValue = async (key: string, value: any) => {
+ if (!idb) {
+ idb = await initSyncIndexedDB();
+ }
+
+ return new Promise((resolve, reject) => {
+ const transaction = idb!.transaction("sync", "readwrite");
+ const store = transaction.objectStore("sync");
+ const request = store.put({ key, value });
+
+ request.onsuccess = () => resolve();
+ request.onerror = () => reject(request.error);
+ });
+};
+
+const getSyncIDBValue = async (key: string): Promise => {
+ if (!idb) {
+ idb = await initSyncIndexedDB();
+ }
+
+ return new Promise((resolve, reject) => {
+ const transaction = idb!.transaction("sync", "readonly");
+ const store = transaction.objectStore("sync");
+ const request = store.get(key);
+
+ request.onsuccess = () => {
+ const result = request.result;
+ resolve(result ? result.value : null);
+ };
+ request.onerror = () => reject(request.error);
+ });
+};
+
+type SyncState = {
+ status: SyncStatus;
+ lastSyncTimestamp: number | null;
+ offlineQueue: Array<{ changeset: Uint8Array; timestamp: number }>;
+};
+
+const [syncState, setSyncState] = createStore({
+ status: "idle",
+ lastSyncTimestamp: null,
+ offlineQueue: [],
+});
+
+const hasCrsqlFunction = async (name: string): Promise => {
+ try {
+ const db = await getDb();
+ const result = await db.execO("SELECT name FROM pragma_function_list WHERE name = ?", [name]);
+ return Array.isArray(result) && result.length > 0;
+ } catch (err) {
+ console.warn(`Failed to check for ${name}:`, err);
+ return false;
+ }
+};
+
+const generateChangeset = async (): Promise => {
+ try {
+ const db = await getDb();
+ const hasChangeset = await hasCrsqlFunction("crsql_changeset");
+ if (!hasChangeset) {
+ return null;
+ }
+ const result = await db.execO("SELECT crsql_changeset() as changeset");
+ const changeset = Array.isArray(result) ? result[0]?.changeset : result?.changeset;
+ if (changeset) {
+ return new Uint8Array(changeset);
+ }
+
+ return null;
+ } catch (err) {
+ console.error("Failed to generate changeset:", err);
+ return null;
+ }
+};
+
+const uploadChangeset = async (
+ changeset: Uint8Array,
+ timestamp: number
+): Promise => {
+ if (!vaultState.vaultPath || !vaultState.deviceId || !vaultState.vaultKey) {
+ throw new Error("Vault not configured for sync");
+ }
+
+ const cryptoKey = await importKey(vaultState.vaultKey);
+ const encrypted = await encryptData(cryptoKey, changeset);
+
+ const { url } = await generateUploadUrl(
+ vaultState.vaultPath,
+ vaultState.deviceId,
+ timestamp
+ );
+
+ const response = await fetch(url, {
+ method: "PUT",
+ body: encrypted.slice(0),
+ });
+
+ if (!response.ok) {
+ throw new Error(`Upload failed: ${response.status}`);
+ }
+};
+
+const downloadAndApplyChangesets = async (): Promise => {
+ if (!vaultState.vaultPath || !vaultState.vaultKey) {
+ console.warn("Cannot sync: vault not configured");
+ return;
+ }
+
+ const lastSync = await getSyncIDBValue("lastSyncTimestamp");
+ const changesets = await listChangesets(
+ vaultState.vaultPath,
+ lastSync || undefined
+ );
+
+ if (changesets.length === 0) {
+ console.log("No new changesets to download");
+ return;
+ }
+
+ const cryptoKey = await importKey(vaultState.vaultKey);
+ const db = await getDb();
+ const hasApplyChangeset = await hasCrsqlFunction("crsql_apply_changeset");
+ if (!hasApplyChangeset) {
+ console.warn("Skipping changeset apply: crsql_apply_changeset not available");
+ return;
+ }
+
+ for (const changeset of changesets) {
+ try {
+ const response = await fetch(changeset.url);
+ if (!response.ok) {
+ console.error(`Failed to download ${changeset.key}: ${response.status}`);
+ continue;
+ }
+
+ const encrypted = await response.arrayBuffer();
+ const decrypted = await decryptData(cryptoKey, new Uint8Array(encrypted));
+
+ db.exec("SELECT crsql_apply_changeset(?)", [new Uint8Array(decrypted).buffer]);
+
+ const timestamp = changeset.lastModified.getTime();
+ await setSyncIDBValue("lastSyncTimestamp", timestamp);
+
+ if (timestamp > (syncState.lastSyncTimestamp || 0)) {
+ setSyncState("lastSyncTimestamp", timestamp);
+ }
+ } catch (err) {
+ console.error(`Failed to apply changeset ${changeset.key}:`, err);
+ }
+ }
+};
+
+export const syncNow = async (): Promise => {
+ if (syncState.status === "syncing") {
+ return;
+ }
+
+ setSyncState("status", "syncing");
+
+ try {
+ await downloadAndApplyChangesets();
+
+ const changeset = await generateChangeset();
+ if (changeset) {
+ const timestamp = Date.now();
+
+ try {
+ await uploadChangeset(changeset, timestamp);
+ await setSyncIDBValue("lastSyncTimestamp", timestamp);
+ setSyncState("lastSyncTimestamp", timestamp);
+ } catch (uploadErr) {
+ console.error("Upload failed, queuing for retry:", uploadErr);
+ setSyncState(
+ produce((draft) => {
+ draft.offlineQueue.push({ changeset, timestamp });
+ })
+ );
+ }
+ }
+
+ if (syncState.offlineQueue.length > 0) {
+ const queue = [...syncState.offlineQueue];
+
+ for (const item of queue) {
+ try {
+ await uploadChangeset(item.changeset, item.timestamp);
+ await setSyncIDBValue("lastSyncTimestamp", item.timestamp);
+
+ setSyncState(
+ produce((draft) => {
+ draft.offlineQueue = draft.offlineQueue.filter(
+ (q) => q.timestamp !== item.timestamp
+ );
+ })
+ );
+ } catch (err) {
+ console.error(`Retry failed for timestamp ${item.timestamp}:`, err);
+ }
+ }
+ }
+ } catch (err) {
+ console.error("Sync error:", err);
+ setSyncState("status", "error");
+ throw err;
+ } finally {
+ if (syncState.status !== "error") {
+ setSyncState("status", "idle");
+ }
+ }
+};
+
+export const syncStateStore = syncState;
+
+export const initializeSync = async () => {
+ const lastSync = await getSyncIDBValue("lastSyncTimestamp");
+ if (lastSync) {
+ setSyncState("lastSyncTimestamp", lastSync);
+ }
+
+ await syncNow();
+};
diff --git a/src/routes/pair.tsx b/src/routes/pair.tsx
new file mode 100644
index 0000000..242e22a
--- /dev/null
+++ b/src/routes/pair.tsx
@@ -0,0 +1,54 @@
+import { Component, createSignal, onMount } from "solid-js";
+import { A } from "@solidjs/router";
+import { QRDisplay, QRScanner } from "~/components/DevicePairing";
+import { initializeVaultStore } from "~/stores/vaultStore";
+
+type Tab = "display" | "scan";
+
+export default function PairPage() {
+ const [tab, setTab] = createSignal("display");
+
+ onMount(async () => {
+ await initializeVaultStore();
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+ {tab() === "display" ? : }
+
+
+
+
How to pair devices
+
+ - Add Device: Show this QR code on another device to pair it with your vault.
+ - Join Vault: Scan a QR code from an existing device to join its vault.
+ - All data is encrypted end-to-end. Your vault key never leaves your device.
+ - QR codes are sensitive. Only show them to trusted devices.
+
+
+
+
+
+
+
Sync & Devices
+
+
+
+ {vaultState.isPaired && (
+
+
+
Device ID
+
+ Your unique identifier for this device
+
+
+
{vaultState.deviceId}
+
+ )}
+
+
+
+
Sync Status
+
+ Last synced: {formatLastSync()}
+
+
+
+ {getSyncStatus()}
+
+
+
+ {vaultState.isPaired && (
+
+
+
Manual Sync
+
+ Force sync with vault now
+
+
+
+
+ )}
+
+
+
+
})
+ )}
+