refactor(web): unify Memos instance setup into a single connection dialog

Collapse the 3-step onboarding wizard and the separate connection dialog
into one dialog with a merged "Connect" action that tests the instance then
saves only on success. Add token reveal/paste, a dynamic link to the
instance's token settings, and an inline success state.

Also correct the token-privacy copy: stats and connection-testing run
client-side with the real credentials, so the token does reach the browser.
Reword to "stored privately with your account and only used to reach your
own instance."

Author: boojack

src/features/dashboard/components/connect-onboarding.test.tsx

@@ -2,38 +2,27 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-vi.mock("@/shared/settings/memos-settings-client", () => ({
-  saveMemosSettings: vi.fn(),
-  getMemosSettings: vi.fn(),
-  deleteMemosSettings: vi.fn(),
-  MemosSettingsRequestError: class MemosSettingsRequestError extends Error {},
-}));
-
 import { ConnectPrompt } from "./connect-prompt";
 
-const notConnected = { instanceUrl: null, hasAccessToken: false };
-
 describe("ConnectPrompt", () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
   it("shows the setup notice over blurred sample stats", () => {
-    render(<ConnectPrompt settings={notConnected} onComplete={vi.fn()} />);
+    render(<ConnectPrompt onSetUp={vi.fn()} />);
 
     expect(screen.getByText("Set up your Memos instance")).toBeInTheDocument();
     // Sample stat tiles render behind the blur.
     expect(screen.getByText("Total memos")).toBeInTheDocument();
   });
 
-  it("opens the guide from the notice and returns via Maybe later", async () => {
+  it("opens the connection dialog from the notice", async () => {
+    const onSetUp = vi.fn();
     const user = userEvent.setup();
-    render(<ConnectPrompt settings={notConnected} onComplete={vi.fn()} />);
+    render(<ConnectPrompt onSetUp={onSetUp} />);
 
     await user.click(screen.getByRole("button", { name: "Set up instance" }));
-    expect(screen.getByText("Welcome to your dashboard")).toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Maybe later" }));
-    expect(screen.getByText("Set up your Memos instance")).toBeInTheDocument();
+    expect(onSetUp).toHaveBeenCalledTimes(1);
   });
 });

src/features/dashboard/components/connect-onboarding.tsx

@@ -1,36 +1,27 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import type { SafeMemosSettings } from "@/shared/settings/memos-settings";
+import { useMemo } from "react";
 import { buildSampleStats } from "../lib/sample-stats";
 import { ActivityHeatmap } from "./activity-heatmap";
-import { ConnectOnboarding } from "./connect-onboarding";
 import { StatTiles } from "./stat-tiles";
 
 const primaryButtonClassName =
   "inline-flex h-9 items-center rounded-md bg-teal-600 px-4 text-sm font-medium text-white transition hover:bg-teal-700 dark:bg-teal-500 dark:text-stone-950 dark:hover:bg-teal-400";
 
 type ConnectPromptProps = {
-  /** Connection settings from the dashboard's useMemosConnection hook; null until loaded. */
-  settings: SafeMemosSettings | null;
-  /** Called when the user finishes the guide and enters the live dashboard. */
-  onComplete: () => void;
+  /** Opens the connection dialog (owned by the dashboard's useMemosConnection hook). */
+  onSetUp: () => void;
 };
 
 /**
  * Shown on the dashboard when no Memos instance is connected. Connecting is
  * recommended, not required, so the stats views render with blurred sample data
  * behind a setup notice rather than blocking the dashboard. The notice opens the
- * step-by-step guide, which can be dismissed ("Maybe later").
+ * connection dialog, which can be dismissed without connecting.
  */
-export function ConnectPrompt({ settings, onComplete }: ConnectPromptProps) {
-  const [showGuide, setShowGuide] = useState(false);
+export function ConnectPrompt({ onSetUp }: ConnectPromptProps) {
   const sample = useMemo(() => buildSampleStats(), []);
 
-  if (showGuide) {
-    return <ConnectOnboarding settings={settings} onComplete={onComplete} onCancel={() => setShowGuide(false)} />;
-  }
-
   return (
     <div className="relative">
       <div aria-hidden="true" className="pointer-events-none select-none space-y-6 blur-[3px] saturate-50">
@@ -46,7 +37,7 @@ export function ConnectPrompt({ settings, onComplete }: ConnectPromptProps) {
           <p className="mt-2 text-sm text-stone-500 dark:text-stone-400">
             Connect your self-hosted instance to replace this sample with your real activity heatmap and stats.
           </p>
-          <button type="button" className={`${primaryButtonClassName} mt-5`} onClick={() => setShowGuide(true)}>
+          <button type="button" className={`${primaryButtonClassName} mt-5`} onClick={onSetUp}>
             Set up instance
           </button>
           <p className="mt-3 text-xs text-stone-400 dark:text-stone-500">Recommended — you can keep exploring without it.</p>

src/features/dashboard/components/connect-prompt.test.tsx

@@ -151,7 +151,7 @@ function DashboardContent() {
     return (
       <DashboardShell>
         <DashboardHeader user={user ?? null} secondary="Not connected" onManageConnection={connection.open} />
-        <ConnectPrompt settings={connection.settings} onComplete={handleSettingsChanged} />
+        <ConnectPrompt onSetUp={connection.open} />
         {connection.dialog}
       </DashboardShell>
     );

src/features/dashboard/components/connect-prompt.tsx

@@ -24,12 +24,14 @@ describe("MemosConnectionForm — token security + actions", () => {
     expect(screen.getByText(/A token is already saved\. Enter it again \(or a new one\) to save changes\./)).toBeInTheDocument();
   });
 
-  it("offers test, save, and disconnect actions when connected", () => {
+  it("offers a single connect action plus disconnect when connected", () => {
     render(<MemosConnectionForm settings={connected} onSettingsChange={vi.fn()} />);
 
-    expect(screen.getByRole("button", { name: "Test connection" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Connect" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Disconnect" })).toBeInTheDocument();
+    // The separate "Test connection" / "Save" buttons are merged into Connect.
+    expect(screen.queryByRole("button", { name: "Test connection" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Save" })).not.toBeInTheDocument();
   });
 
   it("hides disconnect until an instance is connected", () => {
@@ -39,8 +41,8 @@ describe("MemosConnectionForm — token security + actions", () => {
 });
 
 describe("MemosConnectionDialog", () => {
-  it("states that the token is stored server-side, not in the browser", () => {
+  it("states that the token is stored privately with the user's account", () => {
     render(<MemosConnectionDialog open onOpenChange={vi.fn()} settings={notConnected} onSettingsChange={vi.fn()} />);
-    expect(screen.getByText(/stored server-side and never sent to the browser/)).toBeInTheDocument();
+    expect(screen.getByText(/stored privately with your account/)).toBeInTheDocument();
   });
 });