@knotpad/app 0.1.0

package/components/billing/billing-dashboard.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { CheckCircle, Zap, Users, RefreshCw, Gift } from "lucide-react";
+import { CardForm } from "./card-form";
+import { ClaimAccountForm } from "./claim-account-form";
+
+type Props = {
+  isPro: boolean;
+  isOwner: boolean;
+  memberCount: number;
+  seatCount: number;
+  stripeId: string | null;
+  planType: "FREE" | "PERSONAL_PRO" | "TEAM_PRO";
+  licenseType: "STANDARD" | "COMPLIMENTARY";
+  workspaceType: "PERSONAL" | "TEAM";
+  workspaceId: string;
+  isGuest: boolean;
+};
+
+const PRO_FEATURES = [
+  "Cloud sync & backup",
+  "Access from any device",
+  "Offline-ready in the desktop app",
+  "Cloud MCP token for AI agents",
+  "PDPA compliant by design",
+];
+
+const FREE_FEATURES = [
+  "Full note & task engine",
+  "Kanban, list, calendar, graph views",
+  "Unlimited AI agent usage (local MCP)",
+  "Local database — your data, your machine",
+];
+
+export function BillingDashboard({
+  isPro,
+  isOwner,
+  memberCount,
+  seatCount,
+  stripeId,
+  planType,
+  licenseType,
+  workspaceType,
+  workspaceId,
+  isGuest,
+}: Props) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const justUpgraded = searchParams.get("upgraded") === "1";
+
+  const isComplimentary = licenseType === "COMPLIMENTARY";
+  const isTeam = workspaceType === "TEAM";
+
+  // For team: min 2 seats, start at whichever is higher: current members or 2
+  const minSeats = isTeam ? 2 : 1;
+  const [seats, setSeats] = useState(Math.max(memberCount, minSeats));
+  const [showCardForm, setShowCardForm] = useState(false);
+  const [portalLoading, setPortalLoading] = useState(false);
+
+  useEffect(() => {
+    if (justUpgraded) {
+      router.replace("/settings/billing");
+    }
+  }, [justUpgraded, router]);
+
+  async function handleManage() {
+    setPortalLoading(true);
+    const res = await fetch("/api/billing/portal", { method: "POST" });
+    if (res.ok) {
+      const { url } = await res.json();
+      if (url) window.location.href = url;
+    }
+    setPortalLoading(false);
+  }
+
+  const monthlyTotal = seats * 5;
+
+  return (
+    <div className="space-y-6 max-w-lg">
+
+        {/* ── Complimentary ─────────────────────────────────────────── */}
+        {isComplimentary && (
+          <div className="rounded-xl border border-emerald-700/40 bg-emerald-950/10 p-5 space-y-4">
+            <div className="flex items-start justify-between">
+              <div>
+                <div className="flex items-center gap-2">
+                  <Gift size={16} className="text-emerald-400" />
+                  <span className="text-sm font-semibold text-emerald-300">Complimentary</span>
+                </div>
+                <p className="text-xs text-zinc-500 mt-1">
+                  {isTeam ? "Team Pro" : "Personal Pro"} access — no payment needed.
+                </p>
+              </div>
+              <span className="text-xs text-emerald-400 font-medium bg-emerald-950/40 border border-emerald-800/40 px-2 py-0.5 rounded-full">
+                Active
+              </span>
+            </div>
+            <ul className="space-y-2">
+              {PRO_FEATURES.map((f) => (
+                <li key={f} className="flex items-start gap-2 text-sm text-zinc-400">
+                  <CheckCircle size={13} className="text-emerald-400 mt-0.5 shrink-0" /> {f}
+                </li>
+              ))}
+            </ul>
+            <p className="text-xs text-zinc-600">
+              This workspace has been granted complimentary access. Enjoy!
+            </p>
+          </div>
+        )}
+
+        {/* ── Active paid subscription ───────────────────────────────── */}
+        {!isComplimentary && isPro && (
+          <div className="rounded-xl border border-blue-700/40 bg-blue-950/10 p-5 space-y-4">
+            <div className="flex items-start justify-between">
+              <div>
+                <div className="flex items-center gap-2">
+                  <Zap size={16} className="text-blue-400" />
+                  <span className="text-sm font-semibold text-blue-300">
+                    {planType === "TEAM_PRO" ? "Team Pro" : "Personal Pro"}
+                  </span>
+                </div>
+                <p className="text-xs text-zinc-500 mt-1">
+                  Cloud sync & backup, {isTeam ? "team seats" : "personal cloud"} active.
+                </p>
+              </div>
+              <span className="text-xs text-blue-400 font-medium bg-blue-950/40 border border-blue-800/40 px-2 py-0.5 rounded-full">
+                Active
+              </span>
+            </div>
+            <ul className="space-y-2">
+              {PRO_FEATURES.map((f) => (
+                <li key={f} className="flex items-start gap-2 text-sm text-zinc-400">
+                  <CheckCircle size={13} className="text-emerald-400 mt-0.5 shrink-0" /> {f}
+                </li>
+              ))}
+            </ul>
+
+            {/* Seat summary for team plans */}
+            {isTeam && (
+              <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4 space-y-1">
+                <div className="flex justify-between text-sm">
+                  <span className="text-zinc-400">Active seats</span>
+                  <span className="text-zinc-300 font-medium">{seatCount}</span>
+                </div>
+                <div className="flex justify-between text-sm">
+                  <span className="text-zinc-400">Rate</span>
+                  <span className="text-zinc-300">$5 / seat / mo</span>
+                </div>
+                <div className="border-t border-zinc-800 mt-2 pt-2 flex justify-between text-sm font-semibold">
+                  <span className="text-zinc-300">Total</span>
+                  <span className="text-zinc-100">${seatCount * 5} / mo</span>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ── Free plan ─────────────────────────────────────────────── */}
+        {!isComplimentary && !isPro && (
+          <div className="rounded-xl border border-zinc-800 bg-zinc-900/30 p-5 space-y-4">
+            <div>
+              <span className="text-sm font-semibold text-zinc-300">Knotpad Free</span>
+              <p className="text-xs text-zinc-500 mt-1">Full local features, no cloud sync.</p>
+            </div>
+            <ul className="space-y-2">
+              {FREE_FEATURES.map((f) => (
+                <li key={f} className="flex items-center gap-2 text-sm text-zinc-500">
+                  <CheckCircle size={13} className="text-zinc-600 shrink-0" /> {f}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {/* ── Upgrade section (free + owner only) ───────────────────── */}
+        {!isComplimentary && !isPro && isOwner && (
+          <div className="rounded-xl border border-zinc-700 bg-zinc-900/60 p-5 space-y-4">
+            <h3 className="text-sm font-semibold text-zinc-200">
+              Upgrade to {isTeam ? "Team Pro" : "Personal Pro"}
+            </h3>
+
+            {isTeam ? (
+              /* Team: seat calculator */
+              <div className="space-y-3">
+                <div className="flex items-center gap-3">
+                  <div className="flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2">
+                    <Users size={14} className="text-zinc-500" />
+                    <input
+                      type="number"
+                      min={minSeats}
+                      max={50}
+                      value={seats}
+                      onChange={(e) => setSeats(Math.max(minSeats, parseInt(e.target.value) || minSeats))}
+                      className="w-10 bg-transparent text-sm text-zinc-300 outline-none"
+                    />
+                    <span className="text-xs text-zinc-600">seats</span>
+                  </div>
+                  <span className="text-zinc-600 text-sm">×</span>
+                  <span className="text-sm text-zinc-400">$5</span>
+                  <span className="text-zinc-600 text-sm">=</span>
+                  <span className="text-sm font-semibold text-zinc-200">${monthlyTotal}<span className="text-xs font-normal text-zinc-600"> / mo</span></span>
+                </div>
+                <p className="text-xs text-zinc-600">
+                  Minimum 2 seats (${minSeats * 5}/mo). Members join free — you pay for all seats.
+                </p>
+              </div>
+            ) : (
+              /* Personal: flat $5 */
+              <div className="space-y-1">
+                <p className="text-2xl font-semibold text-zinc-100">$5<span className="text-base font-normal text-zinc-500"> / mo</span></p>
+                <p className="text-xs text-zinc-600">1 user · personal workspace cloud sync · cancel anytime.</p>
+              </div>
+            )}
+
+            {isGuest ? (
+              /* Guests must create a real account before paying (Pro is cloud).
+                 After claiming, router.refresh() flips isGuest=false and the
+                 normal card flow renders. */
+              <ClaimAccountForm onClaimed={() => setShowCardForm(true)} />
+            ) : showCardForm ? (
+              <CardForm
+                plan={isTeam ? "team" : "personal"}
+                seats={seats}
+                workspaceId={workspaceId}
+                onSuccess={() => {
+                  router.refresh();
+                }}
+              />
+            ) : (
+              <button
+                onClick={() => setShowCardForm(true)}
+                className="flex items-center gap-2 rounded-md bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-500 transition-colors"
+              >
+                Add card & activate →
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* ── Manage subscription (paid + owner) ────────────────────── */}
+        {!isComplimentary && isPro && isOwner && stripeId && (
+          <div className="space-y-2">
+            <h3 className="text-sm font-semibold text-zinc-300">Manage subscription</h3>
+            <p className="text-xs text-zinc-600">
+              Change seats, update payment method, download invoices, or cancel via Stripe.
+            </p>
+            <button
+              onClick={handleManage}
+              disabled={portalLoading}
+              className="flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 disabled:opacity-50 transition-colors"
+            >
+              {portalLoading && <RefreshCw size={13} className="animate-spin" />}
+              Open billing portal ↗
+            </button>
+          </div>
+        )}
+
+        {!isOwner && (
+          <p className="text-xs text-zinc-600">Only the workspace owner can manage billing.</p>
+        )}
+    </div>
+  );
+}

package/components/billing/card-form.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { loadStripe } from "@stripe/stripe-js";
+import {
+  Elements,
+  PaymentElement,
+  useStripe,
+  useElements,
+} from "@stripe/react-stripe-js";
+import { RefreshCw, Lock } from "lucide-react";
+
+const stripePromise = loadStripe(
+  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY ?? ""
+);
+
+// Dark appearance matching the app's zinc-950 palette
+const STRIPE_APPEARANCE = {
+  theme: "night" as const,
+  variables: {
+    colorPrimary: "#3b82f6",
+    colorBackground: "#18181b",
+    colorText: "#f4f4f5",
+    colorTextSecondary: "#a1a1aa",
+    colorDanger: "#ef4444",
+    colorDangerText: "#fca5a5",
+    fontFamily: "inherit",
+    borderRadius: "6px",
+    spacingUnit: "4px",
+  },
+  rules: {
+    ".Input": {
+      border: "1px solid #3f3f46",
+      backgroundColor: "#18181b",
+      color: "#f4f4f5",
+      boxShadow: "none",
+    },
+    ".Input:focus": {
+      border: "1px solid #52525b",
+      boxShadow: "none",
+      outline: "none",
+    },
+    ".Label": {
+      color: "#a1a1aa",
+      fontSize: "12px",
+      fontWeight: "500",
+    },
+    ".Error": { color: "#fca5a5" },
+  },
+};
+
+// ── Inner form (must be inside <Elements>) ────────────────────────────────────
+
+function CheckoutForm({
+  plan,
+  seats,
+  workspaceId,
+  onSuccess,
+}: {
+  plan: "personal" | "team";
+  seats: number;
+  workspaceId: string;
+  onSuccess: () => void;
+}) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!stripe || !elements) return;
+
+    setLoading(true);
+    setError("");
+
+    // 1. Confirm the SetupIntent — saves the card on Stripe's side
+    const { error: stripeError, setupIntent } = await stripe.confirmSetup({
+      elements,
+      confirmParams: {
+        return_url: `${window.location.origin}/settings/billing?upgraded=1`,
+      },
+      redirect: "if_required", // no redirect for regular cards
+    });
+
+    if (stripeError) {
+      setError(stripeError.message ?? "Card confirmation failed");
+      setLoading(false);
+      return;
+    }
+
+    const paymentMethodId =
+      typeof setupIntent?.payment_method === "string"
+        ? setupIntent.payment_method
+        : setupIntent?.payment_method?.id;
+
+    if (!paymentMethodId) {
+      setError("Could not retrieve payment method. Please try again.");
+      setLoading(false);
+      return;
+    }
+
+    // 2. Create the subscription with the saved card
+    const res = await fetch("/api/billing/subscribe", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ paymentMethodId, plan, seats, workspaceId }),
+    });
+
+    if (!res.ok) {
+      const data = await res.json();
+      setError(data.error ?? "Subscription failed. Please try again.");
+      setLoading(false);
+      return;
+    }
+
+    onSuccess();
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <PaymentElement
+        options={{
+          layout: "tabs",
+          wallets: { applePay: "auto", googlePay: "auto" },
+        }}
+      />
+
+      {error && (
+        <p className="text-sm text-red-400">{error}</p>
+      )}
+
+      <button
+        type="submit"
+        disabled={!stripe || loading}
+        className="flex w-full items-center justify-center gap-2 rounded-md bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-50 transition-colors"
+      >
+        {loading ? (
+          <RefreshCw size={13} className="animate-spin" />
+        ) : (
+          <Lock size={13} />
+        )}
+        {loading ? "Activating…" : `Activate ${plan === "team" ? "Team" : "Personal"} Pro`}
+      </button>
+
+      <p className="text-center text-xs text-zinc-600 flex items-center justify-center gap-1">
+        <Lock size={10} /> Secured by Stripe. We never see your card number.
+      </p>
+
+      <p className="text-center text-[11px] text-zinc-700">
+        Knotpad is a product of Nexstrive Services · Registration: 202303272747 (TR0292898-P)
+      </p>
+    </form>
+  );
+}
+
+// ── Public wrapper — fetches clientSecret then mounts Elements ────────────────
+
+export function CardForm({
+  plan,
+  seats,
+  workspaceId,
+  onSuccess,
+}: {
+  plan: "personal" | "team";
+  seats: number;
+  workspaceId: string;
+  onSuccess: () => void;
+}) {
+  const [clientSecret, setClientSecret] = useState<string | null>(null);
+  const [fetchError, setFetchError] = useState("");
+
+  useEffect(() => {
+    fetch("/api/billing/setup-intent", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ workspaceId }),
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.clientSecret) setClientSecret(data.clientSecret);
+        else setFetchError("Could not initialise payment form.");
+      })
+      .catch(() => setFetchError("Network error. Please refresh and try again."));
+  }, [workspaceId]);
+
+  if (fetchError) return <p className="text-sm text-red-400">{fetchError}</p>;
+
+  if (!clientSecret) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-zinc-500 py-4">
+        <RefreshCw size={13} className="animate-spin" /> Loading payment form…
+      </div>
+    );
+  }
+
+  return (
+    <Elements
+      stripe={stripePromise}
+      options={{ clientSecret, appearance: STRIPE_APPEARANCE }}
+    >
+      <CheckoutForm
+        plan={plan}
+        seats={seats}
+        workspaceId={workspaceId}
+        onSuccess={onSuccess}
+      />
+    </Elements>
+  );
+}

package/components/billing/claim-account-form.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { PasswordInput } from "@/components/auth/password-input";
+
+// Shown to a GUEST (local, no-account user) before they can pay. Converts the
+// guest into a real account via /api/account/claim — which keeps their existing
+// notes/workspace — then signs them in so the normal card flow can proceed.
+export function ClaimAccountForm({ onClaimed }: { onClaimed: () => void }) {
+  const router = useRouter();
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    const form = e.currentTarget;
+    const name = (form.elements.namedItem("name") as HTMLInputElement).value;
+    const email = (form.elements.namedItem("email") as HTMLInputElement).value;
+    const password = (form.elements.namedItem("password") as HTMLInputElement).value;
+
+    try {
+      const res = await fetch("/api/account/claim", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, email, password }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error ?? "Couldn't create your account");
+        setLoading(false);
+        return;
+      }
+
+      // Re-establish the session under the new real credentials.
+      const result = await signIn("credentials", { email, password, redirect: false });
+      if (result?.error) {
+        setError("Account created but sign-in failed. Please sign in manually.");
+        setLoading(false);
+        return;
+      }
+
+      router.refresh();
+      onClaimed();
+    } catch {
+      setError("Something went wrong. Please try again.");
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <div>
+        <p className="text-sm font-medium text-zinc-200">Create your account</p>
+        <p className="text-xs text-zinc-500 mt-0.5">
+          Pro keeps your notes in the cloud, so you'll need an account. Your current
+          notes come with you.
+        </p>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-3">
+        <input
+          name="name"
+          type="text"
+          required
+          autoComplete="name"
+          placeholder="Your name"
+          className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:border-zinc-500 focus:outline-none"
+        />
+        <input
+          name="email"
+          type="email"
+          required
+          autoComplete="email"
+          placeholder="you@example.com"
+          className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:border-zinc-500 focus:outline-none"
+        />
+        <PasswordInput
+          name="password"
+          required
+          minLength={8}
+          autoComplete="new-password"
+          placeholder="Password (min 8 characters)"
+        />
+        {error && <p className="text-sm text-red-400">{error}</p>}
+        <button
+          type="submit"
+          disabled={loading}
+          className="flex items-center gap-2 rounded-md bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-50 transition-colors"
+        >
+          {loading ? "Creating account…" : "Create account & continue →"}
+        </button>
+      </form>
+    </div>
+  );
+}

package/components/branding/app-logo.test.tsx

@@ -0,0 +1,20 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AppLogo } from "@/components/branding/app-logo";
+
+describe("AppLogo", () => {
+  it("renders the full Knotpad logo by default", () => {
+    render(<AppLogo />);
+
+    const image = screen.getByAltText("Knotpad");
+    expect(image).toHaveAttribute("src", "/knotpad_logo_full.svg");
+  });
+
+  it("renders the icon variant when requested", () => {
+    render(<AppLogo variant="icon" />);
+
+    const image = screen.getByAltText("Knotpad icon");
+    expect(image).toHaveAttribute("src", "/icon_dark.svg");
+  });
+});

package/components/branding/app-logo.tsx

@@ -0,0 +1,25 @@
+type AppLogoProps = {
+  variant?: "full" | "icon";
+  className?: string;
+  alt?: string;
+};
+
+export function AppLogo({
+  variant = "full",
+  className,
+  alt,
+}: AppLogoProps) {
+  const src = variant === "icon" ? "/icon_dark.svg" : "/knotpad_logo_full.svg";
+  const fallbackAlt = variant === "icon" ? "Knotpad icon" : "Knotpad";
+
+  return (
+    // The logo assets are static SVG brand files that should render as-authored.
+    // `img` keeps their intrinsic SVG behavior without extra optimization layers.
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      alt={alt ?? fallbackAlt}
+      className={className}
+    />
+  );
+}