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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-29 11:49:23 +05:30
parent 952a0e9b49
commit 2f88e883b2
4 changed files with 176 additions and 10 deletions
@@ -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>
+  );
+}