@pylonsync/create-pylon 0.8.0 → 0.8.2

package/templates/saas/app/(marketing)/pricing/page.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { WRAP, Eyebrow, Divider } from "@/components/marketing";
+import { PricingTable } from "@/components/pricing-table";
+import { siteConfig } from "@/lib/site.config";
+import { TRIAL_DAYS } from "@/lib/plans";
+
+export const metadata: Metadata = {
+  title: `Pricing — ${siteConfig.brand.name}`,
+  description: `${siteConfig.brand.name} pricing: a free plan, and Pro with a ${TRIAL_DAYS}-day free trial.`,
+};
+
+// `/pricing`. Server-rendered so the copy is in the HTML; the monthly/annual
+// switch is the one client island. Plan data comes from lib/plans.ts.
+export default function PricingPage({ auth }: PageProps) {
+  const { pricing, faq } = siteConfig;
+  return (
+    <div className="bg-white text-zinc-900">
+      <section className={`${WRAP} pt-20 pb-16`}>
+        <Eyebrow>{pricing.eyebrow}</Eyebrow>
+        <h1 className="mt-4 max-w-xl text-balance text-4xl font-semibold leading-[1.1] tracking-[-0.02em] sm:text-5xl">
+          {pricing.headline}
+        </h1>
+        <p className="mt-5 max-w-md text-[15px] leading-relaxed text-zinc-500">{pricing.body}</p>
+        <div className="mt-12">
+          <PricingTable signedIn={Boolean(auth.user_id)} />
+        </div>
+      </section>
+      <Divider />
+      <section className={`${WRAP} py-16`}>
+        <h2 className="text-2xl font-semibold tracking-tight">Questions</h2>
+        <dl className="mt-8 grid gap-8 md:grid-cols-2">
+          {faq.items.map((f) => (
+            <div key={f.q}>
+              <dt className="text-sm font-semibold text-zinc-900">{f.q}</dt>
+              <dd className="mt-1.5 text-sm leading-relaxed text-zinc-500">{f.a}</dd>
+            </div>
+          ))}
+        </dl>
+      </section>
+    </div>
+  );
+}

package/templates/saas/app/dashboard/dashboard-client.tsx

@@ -7,13 +7,31 @@ import {
   deleteOrg,
   listInvites,
   listOrgMembers,
+  removeMember,
   renameOrg,
   revokeInvite,
+  updateMemberRole,
   useAuth,
   type OrgMember,
   type PendingInvite,
 } from "@pylonsync/client";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { SetupChecklist, type SetupState } from "@/components/setup-checklist";
+import {
+  FREE_PROJECT_LIMIT,
+  TRIAL_DAYS,
+  annualSavingsPercent,
+  formatPrice,
+  planById,
+} from "@/lib/plans";
 import {
   FolderKanban,
   Users2,
@@ -188,6 +206,7 @@ export function Overview({
   projects,
   memberCount,
   plan,
+  setup,
 }: {
   tenantId: string | null;
   orgName?: string;
@@ -195,6 +214,8 @@ export function Overview({
   projects: Project[];
   memberCount: number;
   plan: string;
+  /** Getting-started state; null once the checklist is dismissed. */
+  setup?: SetupState | null;
 }) {
   if (!tenantId) return <NoOrg />;
   const activeCount = projects.filter(
@@ -218,6 +239,8 @@ export function Overview({
         </p>
       </div>
 
+      {setup ? <SetupChecklist state={setup} /> : null}
+
       <div className="grid gap-4 sm:grid-cols-3">
         <StatCard
           icon={<FolderKanban className="size-4" />}
@@ -331,6 +354,9 @@ function ProjectsList({
 }) {
   const [name, setName] = useState("");
   const [desc, setDesc] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [limitHit, setLimitHit] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
   // Render the server-seeded `initial` rows on the server AND the client's
   // first paint, then swap to the live reactive query once mounted. Gating the
   // swap on a post-mount flag (rather than `loading`, which is already settled
@@ -351,19 +377,34 @@ function ProjectsList({
       return a.createdAt < b.createdAt ? 1 : -1;
     });
 
+  // Creates go through the `createProject` function: it enforces the free
+  // plan's cap on the server and answers LIMIT_REACHED at the cap, which
+  // opens the upgrade dialog. The new row arrives through sync.
   async function add(e: React.FormEvent) {
     e.preventDefault();
     const value = name.trim();
     if (!value) return;
     const description = desc.trim();
-    setName("");
-    setDesc("");
-    await db.insert("Project", {
-      orgId,
-      name: value,
-      status: "active",
-      ...(description ? { description } : {}),
-    });
+    setCreating(true);
+    setCreateError(null);
+    try {
+      await callFn("createProject", {
+        orgId,
+        name: value,
+        ...(description ? { description } : {}),
+      });
+      setName("");
+      setDesc("");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      if (/LIMIT_REACHED/.test(msg) || (err as { code?: string })?.code === "LIMIT_REACHED") {
+        setLimitHit(true);
+      } else {
+        setCreateError(msg.replace(/^[A-Z_]+:\s*/, ""));
+      }
+    } finally {
+      setCreating(false);
+    }
   }
 
   return (
@@ -387,16 +428,22 @@ function ProjectsList({
             aria-label="Project description"
             className={inputCls + " sm:flex-1"}
           />
-          <Button type="submit" size="sm" className="shrink-0">
-            <Plus className="size-4" /> New project
+          <Button type="submit" size="sm" className="shrink-0" disabled={creating}>
+            <Plus className="size-4" /> {creating ? "Creating…" : "New project"}
           </Button>
         </form>
-        <p className="mt-2 text-xs text-zinc-400">
-          Tenant-scoped + live — only this workspace&apos;s projects (enforced by
-          policy), and every change syncs across tabs instantly.
-        </p>
+        {createError ? (
+          <p className="mt-2 text-xs text-red-600">{createError}</p>
+        ) : (
+          <p className="mt-2 text-xs text-zinc-400">
+            Tenant-scoped + live — only this workspace&apos;s projects (enforced by
+            policy), and every change syncs across tabs instantly.
+          </p>
+        )}
       </div>
 
+      <UpgradeDialog open={limitHit} onClose={() => setLimitHit(false)} />
+
       {projects.length === 0 ? (
         <div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-zinc-300 py-14 text-center">
           <span className="flex size-11 items-center justify-center rounded-xl bg-zinc-50 text-zinc-400">
@@ -418,6 +465,44 @@ function ProjectsList({
   );
 }
 
+// Shown when `createProject` answers LIMIT_REACHED. One action: go to
+// Billing, where the trial starts.
+function UpgradeDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const pro = planById("pro")!;
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>You&apos;ve reached the free plan&apos;s limit</DialogTitle>
+          <DialogDescription>
+            Free workspaces can have {FREE_PROJECT_LIMIT} active projects. Archive one, or
+            upgrade to Pro for unlimited projects. Pro starts with a {TRIAL_DAYS}-day free
+            trial.
+          </DialogDescription>
+        </DialogHeader>
+        <ul className="space-y-1.5 text-sm text-zinc-700">
+          {pro.features.map((f) => (
+            <li key={f} className="flex gap-2">
+              <span className="text-zinc-900">✓</span> {f}
+            </li>
+          ))}
+        </ul>
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={onClose}>
+            Not now
+          </Button>
+          <a
+            href="/dashboard/billing?upgrade=pro&interval=annual"
+            className="inline-flex h-9 items-center rounded-lg bg-zinc-900 px-4 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
+          >
+            {pro.cta}
+          </a>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 function IconBtn({
   label,
   danger,
@@ -682,6 +767,31 @@ function MembersList({
     }
   }
 
+  async function changeRole(userId: string, next: string) {
+    setNote(null);
+    try {
+      await updateMemberRole(orgId, userId, next);
+    } catch {
+      setNote("Couldn't change that role.");
+    } finally {
+      void load();
+    }
+  }
+
+  async function remove(m: OrgMember) {
+    const label = m.name || m.email || "this member";
+    if (!window.confirm(`Remove ${label} from the workspace?`)) return;
+    setNote(null);
+    setMembers((prev) => prev?.filter((x) => x.user_id !== m.user_id) ?? null);
+    try {
+      await removeMember(orgId, m.user_id);
+    } catch {
+      setNote("Couldn't remove that member.");
+    } finally {
+      void load();
+    }
+  }
+
   return (
     <div className="space-y-6">
     <Card title="Members" action={members ? <Count n={members.length} /> : null}>
@@ -741,7 +851,28 @@ function MembersList({
                       </div>
                     )}
                   </div>
-                  <RoleBadge role={m.role} />
+                  {canManage && !isMe && m.role !== "owner" ? (
+                    <>
+                      <select
+                        value={m.role}
+                        onChange={(e) => void changeRole(m.user_id, e.target.value)}
+                        aria-label={`Role for ${label}`}
+                        className="h-8 rounded-md border border-zinc-300 bg-white px-2 text-[12px] text-zinc-700"
+                      >
+                        <option value="member">Member</option>
+                        <option value="admin">Admin</option>
+                      </select>
+                      <button
+                        type="button"
+                        onClick={() => void remove(m)}
+                        className="text-[13px] font-medium text-zinc-400 transition-colors hover:text-red-600"
+                      >
+                        Remove
+                      </button>
+                    </>
+                  ) : (
+                    <RoleBadge role={m.role} />
+                  )}
                 </li>
               );
             })}
@@ -817,17 +948,186 @@ function Count({ n }: { n: number }) {
 
 /* ============================ Settings ============================ */
 
+export interface AccountInfo {
+  id: string;
+  email: string;
+  displayName?: string | null;
+}
+
 export function Settings({
   org,
   role,
   memberCount,
+  me,
 }: {
   org: OrgInfo | null;
   role: string;
   memberCount: number;
+  me: AccountInfo | null;
 }) {
   if (!org) return <NoOrg />;
-  return <SettingsView org={org} role={role} memberCount={memberCount} />;
+  return (
+    <>
+      <SettingsView org={org} role={role} memberCount={memberCount} />
+      {me ? <AccountSettings me={me} /> : null}
+    </>
+  );
+}
+
+// The signed-in person's own account, below the workspace settings. Display
+// name saves through `updateProfile`; the password and delete-account paths
+// are the framework's own routes.
+function AccountSettings({ me }: { me: AccountInfo }) {
+  const [displayName, setDisplayName] = useState(me.displayName ?? "");
+  const [savedName, setSavedName] = useState(false);
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+  const [pwNote, setPwNote] = useState<string | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [confirm, setConfirm] = useState("");
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+
+  async function saveName(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy("name");
+    setSavedName(false);
+    try {
+      await callFn("updateProfile", { displayName });
+      setSavedName(true);
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function changePassword(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy("password");
+    setPwNote(null);
+    try {
+      const res = await fetch("/api/auth/password/change", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ currentPassword: current, newPassword: next }),
+      });
+      const data = (await res.json().catch(() => ({}))) as { error?: { message?: string } };
+      if (!res.ok) throw new Error(data.error?.message ?? "Couldn't change the password.");
+      setCurrent("");
+      setNext("");
+      setPwNote("Password updated.");
+    } catch (err) {
+      setPwNote(err instanceof Error ? err.message : "Couldn't change the password.");
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function deleteAccount() {
+    if (confirm.trim().toLowerCase() !== me.email.toLowerCase()) return;
+    setBusy("delete");
+    setDeleteError(null);
+    try {
+      const res = await fetch("/api/auth/account", { method: "DELETE", credentials: "include" });
+      if (!res.ok) {
+        const data = (await res.json().catch(() => ({}))) as { error?: { message?: string } };
+        throw new Error(data.error?.message ?? "Couldn't delete the account.");
+      }
+      window.location.assign("/");
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : "Couldn't delete the account.");
+      setBusy(null);
+    }
+  }
+
+  return (
+    <div className="mt-6 max-w-2xl space-y-6">
+      <Card title="Your account">
+        <form onSubmit={saveName} className="space-y-3">
+          <label className="block">
+            <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Display name</span>
+            <div className="flex items-center gap-2">
+              <input
+                value={displayName}
+                onChange={(e) => {
+                  setDisplayName(e.target.value);
+                  setSavedName(false);
+                }}
+                placeholder="How teammates see you"
+                aria-label="Display name"
+                className={inputCls}
+              />
+              <Button type="submit" size="sm" disabled={busy === "name" || !displayName.trim()}>
+                {busy === "name" ? "…" : "Save"}
+              </Button>
+            </div>
+          </label>
+          {savedName && <p className="text-xs text-green-600">Name updated.</p>}
+          <p className="text-[13px] text-zinc-500">
+            Signed in as <span className="font-medium text-zinc-700">{me.email}</span>
+          </p>
+        </form>
+      </Card>
+
+      <Card title="Password">
+        <form onSubmit={changePassword} className="space-y-3">
+          <input
+            type="password"
+            value={current}
+            onChange={(e) => setCurrent(e.target.value)}
+            placeholder="Current password"
+            autoComplete="current-password"
+            aria-label="Current password"
+            className={inputCls}
+          />
+          <input
+            type="password"
+            value={next}
+            onChange={(e) => setNext(e.target.value)}
+            placeholder="New password (10+ characters)"
+            autoComplete="new-password"
+            minLength={10}
+            aria-label="New password"
+            className={inputCls}
+          />
+          {pwNote && <p className="text-xs text-zinc-600">{pwNote}</p>}
+          <Button type="submit" size="sm" variant="outline" disabled={busy === "password" || !current || next.length < 10}>
+            {busy === "password" ? "…" : "Change password"}
+          </Button>
+          <p className="text-[12px] text-zinc-400">
+            Signed in with an email code or Google? Set a password from the{" "}
+            <a href="/forgot-password" className="underline underline-offset-2">reset link</a>.
+          </p>
+        </form>
+      </Card>
+
+      <Card title="Delete account">
+        <p className="text-sm text-zinc-600">
+          Removes your account and signs you out everywhere. Workspaces you own must be deleted
+          or handed to another owner first.
+        </p>
+        <label className="mt-3 block">
+          <span className="mb-1.5 block text-[13px] text-zinc-500">
+            Type <span className="font-medium text-zinc-700">{me.email}</span> to confirm
+          </span>
+          <input
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            aria-label="Confirm email"
+            className={inputCls}
+          />
+        </label>
+        {deleteError && <p className="mt-2 text-xs text-red-600">{deleteError}</p>}
+        <button
+          type="button"
+          onClick={() => void deleteAccount()}
+          disabled={busy === "delete" || confirm.trim().toLowerCase() !== me.email.toLowerCase()}
+          className="mt-3 inline-flex h-9 items-center rounded-lg bg-red-600 px-4 text-[13px] font-medium text-white transition-colors hover:bg-red-700 disabled:opacity-40"
+        >
+          {busy === "delete" ? "Deleting…" : "Delete my account"}
+        </button>
+      </Card>
+    </div>
+  );
 }
 
 function SettingsView({
@@ -1039,8 +1339,24 @@ function BillingView({
   const canManage = isManager(role);
   const [busy, setBusy] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [annual, setAnnual] = useState(true);
   const active = subscription && ACTIVE.includes(subscription.status);
   const planLabel = active ? subscription!.plan : "free";
+  const pro = planById("pro")!;
+  const savings = annualSavingsPercent(pro);
+
+  // `/dashboard/billing?upgrade=pro&interval=annual` (from /pricing or the
+  // upgrade dialog) starts checkout without another click.
+  useEffect(() => {
+    if (active || !canManage) return;
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("upgrade") !== "pro") return;
+    const wantsAnnual = params.get("interval") !== "monthly";
+    setAnnual(wantsAnnual);
+    window.history.replaceState(null, "", window.location.pathname);
+    void startCheckout(wantsAnnual);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   function origin() {
     return typeof window !== "undefined" ? window.location.origin : "";
@@ -1069,11 +1385,12 @@ function BillingView({
     }
   }
 
-  async function upgrade() {
+  async function startCheckout(yearly: boolean) {
     await run("upgrade", async () => {
       const res = await callFn<{ url: string }>("createCheckoutSession", {
         plan: "pro",
         referenceId: tenantId,
+        annual: yearly,
         successUrl: `${origin()}/dashboard/billing`,
         cancelUrl: `${origin()}/dashboard/billing`,
       });
@@ -1081,6 +1398,10 @@ function BillingView({
     });
   }
 
+  function upgrade() {
+    return startCheckout(annual);
+  }
+
   async function manage() {
     await run("manage", async () => {
       const res = await callFn<{ url: string }>("createBillingPortalSession", {
@@ -1127,7 +1448,13 @@ function BillingView({
             )}
             {!active && (
               <p className="mt-1 text-[13px] text-zinc-500">
-                The free plan. Upgrade to Pro for higher limits.
+                The free plan: up to {FREE_PROJECT_LIMIT} active projects. Pro is unlimited and
+                starts with a {TRIAL_DAYS}-day free trial.
+              </p>
+            )}
+            {active && subscription!.status === "trialing" && subscription!.currentPeriodEnd && (
+              <p className="mt-1 text-[13px] text-zinc-500">
+                Trial — first charge on {formatDate(subscription!.currentPeriodEnd)} unless cancelled.
               </p>
             )}
           </div>
@@ -1155,6 +1482,29 @@ function BillingView({
           )}
         </div>
 
+        {!active && canManage && (
+          <div className="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-zinc-100 pt-3 text-[13px]">
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => setAnnual(false)}
+                className={`rounded-md px-2 py-1 ${annual ? "text-zinc-500 hover:text-zinc-900" : "bg-zinc-100 font-medium text-zinc-900"}`}
+              >
+                Monthly {formatPrice(pro.monthly)}/mo
+              </button>
+              <button
+                type="button"
+                onClick={() => setAnnual(true)}
+                className={`rounded-md px-2 py-1 ${annual ? "bg-zinc-100 font-medium text-zinc-900" : "text-zinc-500 hover:text-zinc-900"}`}
+              >
+                Yearly {formatPrice(pro.annualPerMonth ?? pro.monthly)}/mo
+                {savings > 0 ? ` · save ${savings}%` : ""}
+              </button>
+            </div>
+            <span className="text-zinc-400">Card required; no charge for {TRIAL_DAYS} days.</span>
+          </div>
+        )}
+
         {active && canManage && (
           <div className="mt-4 border-t border-zinc-100 pt-3 text-[13px]">
             {subscription!.cancelAtPeriodEnd ? (

package/templates/saas/app/dashboard/page.tsx

@@ -7,6 +7,7 @@ import {
   type OrgMemberRow,
   type Subscription,
 } from "./dashboard-client";
+import type { SetupState } from "@/components/setup-checklist";
 
 export const metadata: Metadata = {
   title: "Dashboard — Acme",
@@ -18,7 +19,7 @@ export const metadata: Metadata = {
 // render via `serverData` + React 19 `use()` — resolved server-side and
 // replayed on hydration, so the dashboard paints with real data on the first
 // byte (no client fetch, no empty-state flash).
-export default function DashboardPage({ auth, serverData }: PageProps) {
+export default function DashboardPage({ auth, response, serverData }: PageProps) {
   // No active workspace (signup's auto-provision failed, or the user left/
   // deleted their last org). Every read below is tenant-scoped, so instead of
   // an empty shell, provision one client-side and reload into a ready dashboard.
@@ -27,7 +28,21 @@ export default function DashboardPage({ auth, serverData }: PageProps) {
     return <ProvisionWorkspace />;
   }
   const me = use(serverData.get<{ email?: string }>("User", auth.user_id!));
-  const org = use(serverData.get<{ name?: string }>("Org", auth.tenant_id));
+  const org = use(
+    serverData.get<{ name?: string; onboardedAt?: string | null; setupDismissedAt?: string | null }>(
+      "Org",
+      auth.tenant_id,
+    ),
+  );
+  // A workspace created outside the wizard (or one that abandoned it) gets
+  // sent through it once. Owners/admins only; a member who lands here just
+  // sees the dashboard.
+  const role = auth.roles?.[0] ?? "";
+  const manages = role === "owner" || role === "admin";
+  if (org && !org.onboardedAt && manages) {
+    response.redirect("/onboarding");
+    return null;
+  }
   const projects = use(serverData.list<Project>("Project"));
   const members = use(serverData.list<OrgMemberRow>("OrgMember"));
   // The OrgMember read policy returns this user's memberships across every org,
@@ -40,8 +55,21 @@ export default function DashboardPage({ auth, serverData }: PageProps) {
     ["active", "trialing", "past_due"].includes(s.status),
   );
   const plan = active ? active.plan : "free";
+  // Getting-started checklist, derived from real rows so it ticks itself off.
+  const invites = use(serverData.list<{ orgId: string; acceptedAt?: string | null }>("OrgInvite"));
+  const pendingInvites = invites.filter((i) => i.orgId === auth.tenant_id && !i.acceptedAt).length;
+  const setup: SetupState | null = org?.setupDismissedAt
+    ? null
+    : {
+        orgId: auth.tenant_id,
+        hasProject: projects.length > 0,
+        hasTeammate: memberCount > 1 || pendingInvites > 0,
+        hasBilling: plan !== "free",
+        canDismiss: manages,
+      };
   return (
     <Overview
+      setup={setup}
       tenantId={auth.tenant_id}
       orgName={org?.name}
       userEmail={me?.email}

package/templates/saas/app/dashboard/provision-workspace.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { createOrg, listOrgs } from "@pylonsync/client";
+import { listOrgs } from "@pylonsync/client";
 import { db } from "@pylonsync/react";
 
-// Org-less safety net. New signups get "My Workspace" auto-created in the signup
-// flow, so this only renders in edge cases: that creation failed, or a user left
-// or deleted their last workspace. Pick an existing org if one turned up,
-// otherwise create "My Workspace", make it active, and reload into the ready
-// dashboard. No multi-step onboarding — there's nothing for the user to decide.
+// Org-less safety net. A new account goes through /onboarding, so this only
+// renders when a user lost their active workspace (left or deleted their last
+// org, or the wizard was abandoned before step 1). Re-select an existing org
+// if one turned up; otherwise send them to the wizard to create one.
 export function ProvisionWorkspace() {
   const [error, setError] = useState<string | null>(null);
 
@@ -17,8 +16,11 @@ export function ProvisionWorkspace() {
     void (async () => {
       try {
         const orgs = await listOrgs();
-        const target = orgs[0] ?? (await createOrg("My Workspace"));
-        await db.sync.selectOrg(target.id);
+        if (orgs.length === 0) {
+          if (!cancelled) window.location.assign("/onboarding");
+          return;
+        }
+        await db.sync.selectOrg(orgs[0].id);
         if (!cancelled) window.location.reload();
       } catch (err) {
         if (!cancelled) {