@knotpad/app 0.1.4 → 0.1.6

package/components/settings/backup-restore-settings.tsx

@@ -0,0 +1,327 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ConfirmDangerAction } from "@/components/settings/confirm-danger-action";
+
+type BackupRestoreSettingsProps = {
+  isCloudWorkspace: boolean;
+  isOwner: boolean;
+  initialSettings: {
+    scheduleEnabled: boolean;
+    scheduleCadence: "DAILY" | "WEEKLY" | "MONTHLY";
+    destinationPath: string | null;
+    includeMarkdownZip: boolean;
+    lastBackupAt: string | null;
+    lastBackupStatus: string;
+    lastBackupError: string | null;
+  } | null;
+};
+
+export function BackupRestoreSettings({
+  isCloudWorkspace,
+  isOwner,
+  initialSettings,
+}: BackupRestoreSettingsProps) {
+  const router = useRouter();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [restoring, setRestoring] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [scheduleEnabled, setScheduleEnabled] = useState(
+    initialSettings?.scheduleEnabled ?? false
+  );
+  const [scheduleCadence, setScheduleCadence] = useState<
+    "DAILY" | "WEEKLY" | "MONTHLY"
+  >(initialSettings?.scheduleCadence ?? "WEEKLY");
+  const [destinationPath, setDestinationPath] = useState(
+    initialSettings?.destinationPath ?? ""
+  );
+  const [includeMarkdownZip, setIncludeMarkdownZip] = useState(
+    initialSettings?.includeMarkdownZip ?? false
+  );
+  const [settingsMessage, setSettingsMessage] = useState<string | null>(null);
+  const [restoreMessage, setRestoreMessage] = useState<{
+    type: "ok" | "err";
+    text: string;
+  } | null>(null);
+  const [pendingRestoreFile, setPendingRestoreFile] = useState<File | null>(null);
+
+  function clearRestoreSelection() {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }
+
+  async function download(url: string) {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+
+  async function pickFolder() {
+    const selected = await window.electronAPI?.selectBackupFolder?.();
+    if (selected) {
+      setDestinationPath(selected);
+    }
+  }
+
+  async function saveSettings() {
+    setSaving(true);
+    setSettingsMessage(null);
+
+    try {
+      const res = await fetch("/api/backup/settings", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          scheduleEnabled,
+          scheduleCadence,
+          destinationPath,
+          includeMarkdownZip,
+        }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        setSettingsMessage(data.error ?? "Failed to save backup settings.");
+        return;
+      }
+
+      setSettingsMessage("Backup settings saved.");
+      router.refresh();
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleFileRestore(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setRestoreMessage(null);
+    setPendingRestoreFile(file);
+    clearRestoreSelection();
+  }
+
+  async function confirmRestore() {
+    if (!pendingRestoreFile) return;
+
+    setRestoring(true);
+    setRestoreMessage(null);
+    const file = pendingRestoreFile;
+    setPendingRestoreFile(null);
+
+    try {
+      const text = await file.text();
+      let parsed: unknown;
+
+      try {
+        parsed = JSON.parse(text);
+      } catch {
+        setRestoreMessage({ type: "err", text: "Invalid file: could not parse JSON." });
+        return;
+      }
+
+      const res = await fetch("/api/restore", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ type: "file-replace", data: parsed }),
+      });
+      const data = await res.json();
+
+      if (!res.ok) {
+        setRestoreMessage({ type: "err", text: data.error ?? "File restore failed." });
+        return;
+      }
+
+      setRestoreMessage({
+        type: "ok",
+        text: `Restored ${data.notesRestored} note${data.notesRestored !== 1 ? "s" : ""} and ${data.tasksRestored} task${data.tasksRestored !== 1 ? "s" : ""}.`,
+      });
+      router.refresh();
+    } finally {
+      setRestoring(false);
+      clearRestoreSelection();
+    }
+  }
+
+  return (
+    <div className="space-y-8">
+      <section className="space-y-3">
+        <h3 className="text-sm font-semibold text-zinc-300">Backup</h3>
+        <p className="text-xs text-zinc-500">
+          Export creates a portable backup of the current workspace state. Restore
+          replaces current local data with the uploaded backup.
+        </p>
+
+        {!isCloudWorkspace && (
+          <div className="space-y-3 rounded-lg border border-zinc-800 p-4">
+            <label className="flex items-center gap-2 text-sm text-zinc-300">
+              <input
+                type="checkbox"
+                checked={scheduleEnabled}
+                onChange={(e) => setScheduleEnabled(e.target.checked)}
+              />
+              Enable scheduled backup
+            </label>
+
+            <select
+              value={scheduleCadence}
+              onChange={(e) =>
+                setScheduleCadence(e.target.value as "DAILY" | "WEEKLY" | "MONTHLY")
+              }
+              className="rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm text-zinc-300"
+            >
+              <option value="DAILY">Daily</option>
+              <option value="WEEKLY">Weekly</option>
+              <option value="MONTHLY">Monthly</option>
+            </select>
+
+            <div className="flex gap-2">
+              <input
+                value={destinationPath}
+                readOnly
+                placeholder="Choose a backup folder"
+                className="flex-1 rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm text-zinc-300"
+              />
+              <button
+                type="button"
+                onClick={pickFolder}
+                className="rounded-md bg-zinc-800 px-3 py-2 text-xs text-zinc-300 transition-colors hover:bg-zinc-700"
+              >
+                Choose folder
+              </button>
+            </div>
+
+            <label className="flex items-center gap-2 text-sm text-zinc-300">
+              <input
+                type="checkbox"
+                checked={includeMarkdownZip}
+                onChange={(e) => setIncludeMarkdownZip(e.target.checked)}
+              />
+              Include notes as Markdown ZIP
+            </label>
+
+            <p className="text-xs text-zinc-500">
+              Automatic backups run while Knotpad is open. If a backup is missed, it
+              runs the next time the app starts.
+            </p>
+
+            <div className="space-y-1 text-xs text-zinc-500">
+              <p>
+                Last backup status: {initialSettings?.lastBackupStatus ?? "idle"}
+              </p>
+              <p>
+                Last successful backup:{" "}
+                {initialSettings?.lastBackupAt
+                  ? new Date(initialSettings.lastBackupAt).toLocaleString()
+                  : "Never"}
+              </p>
+              {initialSettings?.lastBackupError && (
+                <p>Last backup error: {initialSettings.lastBackupError}</p>
+              )}
+            </div>
+
+            <button
+              type="button"
+              onClick={saveSettings}
+              disabled={saving}
+              className="rounded-md bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700 disabled:opacity-50"
+            >
+              {saving ? "Saving..." : "Save backup settings"}
+            </button>
+
+            {settingsMessage && <p className="text-xs text-zinc-500">{settingsMessage}</p>}
+          </div>
+        )}
+
+        <div className="flex flex-wrap gap-2">
+          <button
+            type="button"
+            onClick={() => void download("/api/backup/download/db")}
+            className="rounded-md bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700"
+          >
+            Download DB backup
+          </button>
+          <button
+            type="button"
+            onClick={() => void download("/api/backup/download/notes")}
+            className="rounded-md bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700"
+          >
+            Download notes ZIP
+          </button>
+          <button
+            type="button"
+            onClick={async () => {
+              await download("/api/backup/download/db");
+              await download("/api/backup/download/notes");
+            }}
+            className="rounded-md bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700"
+          >
+            Download both
+          </button>
+        </div>
+      </section>
+
+      <section className="space-y-3 rounded-xl border border-red-900/40 bg-red-950/10 p-4">
+        <p className="text-sm font-medium text-red-200">Danger zone</p>
+        <h3 className="text-sm font-semibold text-zinc-300">Restore</h3>
+
+        <p className="text-xs text-zinc-500">
+          Restore from a Knotpad JSON backup file. Markdown ZIP exports are for download
+          only and cannot be restored.
+        </p>
+
+        {isOwner && (
+          <>
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={restoring}
+              className="rounded-md bg-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-700 disabled:opacity-50"
+            >
+              Restore from file...
+            </button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".json"
+              className="hidden"
+              onChange={handleFileRestore}
+            />
+          </>
+        )}
+
+        {restoreMessage && (
+          <p
+            className={`text-xs ${
+              restoreMessage.type === "ok" ? "text-emerald-400" : "text-red-400"
+            }`}
+          >
+            {restoreMessage.text}
+          </p>
+        )}
+
+        {isCloudWorkspace && (
+          <p className="text-xs text-amber-400">
+            Restoring a paid workspace replaces current local data and overwrites the
+            synced cloud state.
+          </p>
+        )}
+      </section>
+      <ConfirmDangerAction
+        open={pendingRestoreFile !== null}
+        title="Restore backup"
+        body={`${
+          isCloudWorkspace
+            ? "Restoring this backup replaces current workspace data and syncs the restored state to cloud."
+            : "Restoring this backup replaces current workspace data."
+        }\n\nThis action cannot be undone.`}
+        busy={restoring}
+        onConfirm={confirmRestore}
+        onClose={() => {
+          setPendingRestoreFile(null);
+          clearRestoreSelection();
+        }}
+      />
+    </div>
+  );
+}