@knotpad/app 0.1.0 → 0.1.2

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

@@ -1,327 +0,0 @@
-"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>
-  );
-}