feat: add AccountsList with Add Account form; proxy POST /accounts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/app/accounts/AccountsList.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { AccountsList } from './AccountsList';
+
+const mockAccounts = [
+  { id: 'acc_1', jid: '111@s.whatsapp.net', displayName: 'Account One', status: 'ACTIVE', platform: 'whatsapp' },
+  { id: 'acc_2', jid: '222@s.whatsapp.net', displayName: null, status: 'DISCONNECTED', platform: 'whatsapp' },
+];
+
+let fetchSpy: jest.SpyInstance;
+
+beforeEach(() => {
+  fetchSpy = jest.spyOn(global, 'fetch');
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('AccountsList', () => {
+  it('renders an AccountCard for each initial account', () => {
+    render(<AccountsList initialAccounts={mockAccounts} />);
+    expect(screen.getByText('Account One')).toBeInTheDocument();
+    expect(screen.getByText('222@s.whatsapp.net')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no accounts', () => {
+    render(<AccountsList initialAccounts={[]} />);
+    expect(screen.getByText(/no accounts yet/i)).toBeInTheDocument();
+  });
+
+  it('renders Add Account button', () => {
+    render(<AccountsList initialAccounts={[]} />);
+    expect(screen.getByRole('button', { name: /add account/i })).toBeInTheDocument();
+  });
+
+  it('renders display name input', () => {
+    render(<AccountsList initialAccounts={[]} />);
+    expect(screen.getByPlaceholderText(/display name/i)).toBeInTheDocument();
+  });
+
+  it('calls POST /api/accounts when Add Account is clicked', async () => {
+    fetchSpy.mockResolvedValue(
+      new Response(
+        JSON.stringify({ id: 'acc_new', jid: 'pending_x@placeholder', displayName: null, status: 'ACTIVE', platform: 'whatsapp' }),
+        { status: 201, headers: { 'Content-Type': 'application/json' } },
+      ),
+    );
+    render(<AccountsList initialAccounts={[]} />);
+    fireEvent.click(screen.getByRole('button', { name: /add account/i }));
+    await waitFor(() =>
+      expect(fetchSpy).toHaveBeenCalledWith('/api/accounts', expect.objectContaining({ method: 'POST' })),
+    );
+  });
+
+  it('adds new account to list after successful POST', async () => {
+    const newAccount = { id: 'acc_new', jid: 'pending_x@placeholder', displayName: 'New Device', status: 'ACTIVE', platform: 'whatsapp' };
+    fetchSpy.mockResolvedValue(
+      new Response(JSON.stringify(newAccount), {
+        status: 201,
+        headers: { 'Content-Type': 'application/json' },
+      }),
+    );
+    render(<AccountsList initialAccounts={[]} />);
+    const input = screen.getByPlaceholderText(/display name/i);
+    fireEvent.change(input, { target: { value: 'New Device' } });
+    fireEvent.click(screen.getByRole('button', { name: /add account/i }));
+    await waitFor(() => expect(screen.getByText('New Device')).toBeInTheDocument());
+  });
+
+  it('sends displayName in POST body when entered', async () => {
+    fetchSpy.mockResolvedValue(
+      new Response(
+        JSON.stringify({ id: 'acc_new', jid: 'pending_x@placeholder', displayName: 'Test Name', status: 'ACTIVE', platform: 'whatsapp' }),
+        { status: 201, headers: { 'Content-Type': 'application/json' } },
+      ),
+    );
+    render(<AccountsList initialAccounts={[]} />);
+    const input = screen.getByPlaceholderText(/display name/i);
+    fireEvent.change(input, { target: { value: 'Test Name' } });
+    fireEvent.click(screen.getByRole('button', { name: /add account/i }));
+    await waitFor(() =>
+      expect(fetchSpy).toHaveBeenCalledWith(
+        '/api/accounts',
+        expect.objectContaining({
+          body: JSON.stringify({ displayName: 'Test Name' }),
+        }),
+      ),
+    );
+  });
+
+  it('clears the input after successful account creation', async () => {
+    fetchSpy.mockResolvedValue(
+      new Response(
+        JSON.stringify({ id: 'acc_new', jid: 'pending_x@placeholder', displayName: null, status: 'ACTIVE', platform: 'whatsapp' }),
+        { status: 201, headers: { 'Content-Type': 'application/json' } },
+      ),
+    );
+    render(<AccountsList initialAccounts={[]} />);
+    const input = screen.getByPlaceholderText(/display name/i) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'My Device' } });
+    fireEvent.click(screen.getByRole('button', { name: /add account/i }));
+    await waitFor(() => expect(input.value).toBe(''));
+  });
+});

apps/web/app/accounts/AccountsList.tsx

@@ -0,0 +1,60 @@
+'use client';
+import { useState } from 'react';
+import { AccountCard } from './AccountCard';
+
+interface Account {
+  id: string;
+  jid: string;
+  displayName: string | null;
+  status: string;
+  platform: string;
+}
+
+export function AccountsList({ initialAccounts }: { initialAccounts: Account[] }) {
+  const [accounts, setAccounts] = useState<Account[]>(initialAccounts);
+  const [displayName, setDisplayName] = useState('');
+
+  async function handleAdd() {
+    try {
+      const res = await fetch('/api/accounts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ displayName: displayName || undefined }),
+      });
+      if (!res.ok) return;
+      const account: Account = await res.json();
+      setAccounts((prev) => [...prev, account]);
+      setDisplayName('');
+    } catch {}
+  }
+
+  return (
+    <div>
+      <div className="flex gap-2 mb-6">
+        <input
+          type="text"
+          value={displayName}
+          onChange={(e) => setDisplayName(e.target.value)}
+          placeholder="Display name (optional)"
+          className="flex-1 border rounded px-3 py-2 text-sm"
+        />
+        <button
+          onClick={handleAdd}
+          className="bg-blue-600 text-white rounded px-4 py-2 text-sm hover:bg-blue-700"
+        >
+          Add Account
+        </button>
+      </div>
+
+      {accounts.length === 0 ? (
+        <p className="text-gray-500">No accounts yet. Add one above to get started.</p>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {accounts.map((a) => (
+            <AccountCard key={a.id} account={a} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/app/accounts/page.tsx

@@ -1,4 +1,4 @@
-import { AccountCard } from './AccountCard';
+import { AccountsList } from './AccountsList';
 
 interface Account {
   id: string;
@@ -19,15 +19,7 @@ export default async function AccountsPage() {
   return (
     <div className="max-w-2xl">
       <h1 className="text-xl font-semibold mb-6">Accounts</h1>
-      {accounts.length === 0 ? (
-        <p className="text-gray-500">No accounts found.</p>
-      ) : (
-        <div className="flex flex-col gap-3">
-          {accounts.map((a) => (
-            <AccountCard key={a.id} account={a} />
-          ))}
-        </div>
-      )}
+      <AccountsList initialAccounts={accounts} />
     </div>
   );
 }

apps/web/app/api/accounts/route.ts

@@ -4,3 +4,13 @@ export async function GET() {
   const res = await fetch(`${API_URL}/accounts`, { cache: 'no-store' });
   return Response.json(await res.json(), { status: res.status });
 }
+
+export async function POST(req: Request) {
+  const body = await req.json();
+  const res = await fetch(`${API_URL}/accounts`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  return Response.json(await res.json(), { status: res.status });
+}