first commit

frontend/src/components/watchlist/AddTickerForm.tsx

@@ -0,0 +1,33 @@
+import { FormEvent, useState } from 'react';
+import { useAddToWatchlist } from '../../hooks/useWatchlist';
+
+export function AddTickerForm() {
+  const [symbol, setSymbol] = useState('');
+  const addMutation = useAddToWatchlist();
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    const trimmed = symbol.trim().toUpperCase();
+    if (!trimmed) return;
+    addMutation.mutate(trimmed, { onSuccess: () => setSymbol('') });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-2">
+      <input
+        type="text"
+        value={symbol}
+        onChange={(e) => setSymbol(e.target.value)}
+        placeholder="Add symbol (e.g. AAPL)"
+        className="input-glass px-3 py-2 text-sm"
+      />
+      <button
+        type="submit"
+        disabled={addMutation.isPending || !symbol.trim()}
+        className="btn-gradient px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        <span>{addMutation.isPending ? 'Adding…' : 'Add'}</span>
+      </button>
+    </form>
+  );
+}