zevairouter 1.0.0

package/src/shared/components/CursorAuthModal.js

@@ -0,0 +1,212 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Modal, Button, Input } from "@/shared/components";
+
+/**
+ * Cursor Auth Modal
+ * Auto-detect and import token from Cursor IDE's local SQLite database
+ */
+export default function CursorAuthModal({ isOpen, onSuccess, onClose }) {
+  const [accessToken, setAccessToken] = useState("");
+  const [machineId, setMachineId] = useState("");
+  const [error, setError] = useState(null);
+  const [importing, setImporting] = useState(false);
+  const [autoDetecting, setAutoDetecting] = useState(false);
+  const [autoDetected, setAutoDetected] = useState(false);
+  const [windowsManual, setWindowsManual] = useState(false);
+
+  const runAutoDetect = async () => {
+    setAutoDetecting(true);
+    setError(null);
+    setAutoDetected(false);
+    setWindowsManual(false);
+
+    try {
+      const res = await fetch("/api/oauth/cursor/auto-import");
+      const data = await res.json();
+
+      if (data.found) {
+        setAccessToken(data.accessToken);
+        setMachineId(data.machineId);
+        setAutoDetected(true);
+      } else if (data.windowsManual) {
+        setWindowsManual(true);
+      } else {
+        setError(data.error || "Could not auto-detect tokens");
+      }
+    } catch (err) {
+      setError("Failed to auto-detect tokens");
+    } finally {
+      setAutoDetecting(false);
+    }
+  };
+
+  // Auto-detect tokens when modal opens
+  useEffect(() => {
+    if (!isOpen) return;
+    runAutoDetect();
+  }, [isOpen]);
+
+  const handleImportToken = async () => {
+    if (!accessToken.trim()) {
+      setError("Please enter an access token");
+      return;
+    }
+
+    if (!machineId.trim()) {
+      setError("Please enter a machine ID");
+      return;
+    }
+
+    setImporting(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/oauth/cursor/import", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          accessToken: accessToken.trim(),
+          machineId: machineId.trim(),
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || "Import failed");
+      }
+
+      onSuccess?.();
+      onClose();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} title="Connect Cursor IDE" onClose={onClose}>
+      <div className="flex flex-col gap-4">
+        {/* Auto-detecting state */}
+        {autoDetecting && (
+          <div className="text-center py-6">
+            <div className="size-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center">
+              <span className="material-symbols-outlined text-3xl text-primary animate-spin">
+                progress_activity
+              </span>
+            </div>
+            <h3 className="text-lg font-semibold mb-2">Auto-detecting tokens...</h3>
+            <p className="text-sm text-text-muted">
+              Reading from Cursor IDE database
+            </p>
+          </div>
+        )}
+
+        {/* Form (shown after auto-detect completes) */}
+        {!autoDetecting && (
+          <>
+            {/* Success message if auto-detected */}
+            {autoDetected && (
+              <div className="bg-green-50 dark:bg-green-900/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
+                <div className="flex gap-2">
+                  <span className="material-symbols-outlined text-green-600 dark:text-green-400">check_circle</span>
+                  <p className="text-sm text-green-800 dark:text-green-200">
+                    Tokens auto-detected from Cursor IDE successfully!
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Windows manual instructions */}
+            {windowsManual && (
+              <div className="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg border border-amber-200 dark:border-amber-800 flex flex-col gap-2">
+                <div className="flex gap-2 items-center">
+                  <span className="material-symbols-outlined text-amber-600 dark:text-amber-400">info</span>
+                  <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+                    Could not read Cursor database automatically.
+                  </p>
+                </div>
+                <p className="text-xs text-amber-700 dark:text-amber-300">
+                  Make sure Cursor IDE has been opened at least once, then click <strong>Retry</strong>. If the problem persists, paste your tokens manually below.
+                </p>
+                <Button onClick={runAutoDetect} variant="outline" fullWidth>
+                  Retry
+                </Button>
+              </div>
+            )}
+
+            {/* Info message if not auto-detected */}
+            {!autoDetected && !windowsManual && !error && (
+              <div className="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg border border-blue-200 dark:border-blue-800">
+                <div className="flex gap-2">
+                  <span className="material-symbols-outlined text-blue-600 dark:text-blue-400">info</span>
+                  <p className="text-sm text-blue-800 dark:text-blue-200">
+                    Cursor IDE not detected. Please paste your tokens manually.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Access Token Input */}
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Access Token <span className="text-red-500">*</span>
+              </label>
+              <textarea
+                value={accessToken}
+                onChange={(e) => setAccessToken(e.target.value)}
+                placeholder="Access token will be auto-filled..."
+                rows={3}
+                className="w-full px-3 py-2 text-sm font-mono border border-border rounded-lg bg-background focus:outline-none focus:border-primary resize-none"
+              />
+            </div>
+
+            {/* Machine ID Input */}
+            <div>
+              <label className="block text-sm font-medium mb-2">
+                Machine ID <span className="text-red-500">*</span>
+              </label>
+              <Input
+                value={machineId}
+                onChange={(e) => setMachineId(e.target.value)}
+                placeholder="Machine ID will be auto-filled..."
+                className="font-mono text-sm"
+              />
+            </div>
+
+            {/* Error Display */}
+            {error && (
+              <div className="bg-red-50 dark:bg-red-900/20 p-3 rounded-lg border border-red-200 dark:border-red-800">
+                <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+              </div>
+            )}
+
+            {/* Action Buttons */}
+            <div className="flex gap-2">
+              <Button
+                onClick={handleImportToken}
+                fullWidth
+                disabled={importing || !accessToken.trim() || !machineId.trim()}
+              >
+                {importing ? "Importing..." : "Import Token"}
+              </Button>
+              <Button onClick={onClose} variant="ghost" fullWidth>
+                Cancel
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+CursorAuthModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onSuccess: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};

package/src/shared/components/DonateModal.js

@@ -0,0 +1,136 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { createPortal } from "react-dom";
+import PropTypes from "prop-types";
+import { GITHUB_CONFIG } from "@/shared/constants/config";
+
+export default function DonateModal({ isOpen, onClose }) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const modalRef = useRef(null);
+
+  useEffect(() => {
+    if (!isOpen || data) return;
+    setLoading(true);
+    setError("");
+    fetch(GITHUB_CONFIG.donateUrl, { cache: "no-store" })
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((json) => setData(json))
+      .catch((err) => setError(err.message || "Failed to load"))
+      .finally(() => setLoading(false));
+  }, [isOpen, data]);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (modalRef.current && !modalRef.current.contains(e.target)) onClose();
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen, onClose]);
+
+  if (!isOpen || typeof document === "undefined") return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" onClick={onClose} />
+      <div
+        ref={modalRef}
+        className="relative w-full bg-surface border border-black/10 dark:border-white/10 rounded-xl shadow-2xl animate-in fade-in zoom-in-95 duration-200 max-w-3xl flex flex-col max-h-[85vh]"
+      >
+        <div className="flex items-center justify-between p-3 border-b border-black/5 dark:border-white/5">
+          <h2 className="text-lg font-semibold text-text-main flex items-center gap-2">
+            <span className="material-symbols-outlined text-pink-500">volunteer_activism</span>
+            {data?.title || "Support ZevaiRouter"}
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-text-muted hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+            aria-label="Close"
+          >
+            <span className="material-symbols-outlined text-[20px]">close</span>
+          </button>
+        </div>
+
+        <div className="p-6 overflow-y-auto flex-1">
+          {loading && (
+            <div className="flex items-center justify-center py-10 text-text-muted">
+              <span className="material-symbols-outlined animate-spin mr-2">progress_activity</span>
+              Loading...
+            </div>
+          )}
+          {error && (
+            <div className="text-red-500 py-4">Failed to load donate info: {error}</div>
+          )}
+          {!loading && !error && data && (
+            <>
+              {data.message && (
+                <p className="text-text-muted text-sm mb-6 text-center">{data.message}</p>
+              )}
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                {data.channels?.map((ch) => (
+                  <DonateChannelCard key={ch.id} channel={ch} />
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+function DonateChannelCard({ channel }) {
+  const { label, description, icon, color, url, qr } = channel;
+  const content = (
+    <>
+      <div
+        className="w-12 h-12 rounded-full flex items-center justify-center mb-3"
+        style={{ backgroundColor: `${color}20`, color }}
+      >
+        <span className="material-symbols-outlined text-[26px]">{icon}</span>
+      </div>
+      <div className="font-semibold text-text-main mb-1">{label}</div>
+      {description && (
+        <div className="text-xs text-text-muted mb-3 text-center">{description}</div>
+      )}
+      {qr && (
+        <img
+          src={qr}
+          alt={`${label} QR`}
+          className="w-full max-w-[180px] aspect-square object-contain rounded-lg bg-white p-1"
+        />
+      )}
+    </>
+  );
+
+  return (
+    <div className="flex flex-col items-center p-4 rounded-xl border border-black/10 dark:border-white/10 bg-surface/50 hover:border-pink-500/40 transition-colors">
+      {content}
+      {url && (
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mt-3 inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity"
+          style={{ backgroundColor: color }}
+        >
+          Open
+          <span className="material-symbols-outlined text-[16px]">open_in_new</span>
+        </a>
+      )}
+    </div>
+  );
+}
+
+DonateModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};

package/src/shared/components/Drawer.js

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect } from "react";
+import { cn } from "@/shared/utils/cn";
+
+export default function Drawer({
+  isOpen,
+  onClose,
+  title,
+  children,
+  width = "md",
+  className
+}) {
+  const widths = {
+    sm: "w-[400px]",
+    md: "w-[500px]",
+    lg: "w-[600px]",
+    xl: "w-[800px]",
+    full: "w-full",
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => { document.body.style.overflow = ""; };
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50">
+      {/* Overlay */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-[2px] fade-in cursor-pointer"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Drawer panel */}
+      <div className={cn(
+        "absolute right-0 top-0 h-full bg-surface flex flex-col",
+        "shadow-[var(--shadow-elev)]",
+        "slide-in-right",
+        "border-l border-border-subtle",
+        widths[width] || widths.md,
+        className
+      )}>
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border-subtle flex-shrink-0">
+          <div className="flex items-center gap-3">
+            {title && (
+              <h2 className="text-lg font-semibold text-text-main">{title}</h2>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 rounded-[10px] text-text-muted hover:bg-surface-2 hover:text-text-main transition-colors"
+          >
+            <span className="material-symbols-outlined text-[20px]">close</span>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}