availsync 0.1.0

package/frontend/components/ui/Tabs.tsx

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function TabList({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={twMerge('flex gap-2 border-b border-border', className)}>{children}</div>;
+}
+
+export function TabButton({ active, children }: { active?: boolean; children: ReactNode }) {
+  return (
+    <span
+      className={twMerge(
+        'px-3 py-2 text-body font-medium',
+        active ? 'border-b-2 border-accent text-text-primary' : 'text-text-secondary',
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/frontend/components/ui/Textarea.tsx

@@ -0,0 +1,14 @@
+import { type TextareaHTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function Textarea({ className, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return (
+    <textarea
+      className={twMerge(
+        'min-h-28 w-full rounded border border-border bg-surface px-3 py-2 text-body text-text-primary outline-none transition focus:border-border-focus',
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/frontend/components/ui/Toast.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import { CheckCircle, XCircle, Info, X } from 'lucide-react';
+
+type ToastVariant = 'success' | 'error' | 'info';
+
+interface Toast {
+  id: number;
+  message: string;
+  variant: ToastVariant;
+}
+
+interface ToastContextType {
+  toast: (message: string, variant?: ToastVariant) => void;
+}
+
+const ToastContext = createContext<ToastContextType>({ toast: () => {} });
+
+export function useToast() {
+  return useContext(ToastContext);
+}
+
+const icons = {
+  success: CheckCircle,
+  error: XCircle,
+  info: Info,
+};
+
+const colors = {
+  success: 'text-success',
+  error: 'text-error',
+  info: 'text-accent',
+};
+
+let nextId = 0;
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const toast = useCallback((message: string, variant: ToastVariant = 'info') => {
+    const id = nextId++;
+    setToasts((prev) => [...prev, { id, message, variant }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 4000);
+  }, []);
+
+  const dismiss = useCallback((id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+        {toasts.map((t) => {
+          const Icon = icons[t.variant];
+          return (
+            <div
+              key={t.id}
+              className="flex items-center gap-2.5 rounded-lg bg-surface border border-border px-4 py-2.5 shadow-lg animate-in slide-in-from-bottom-2"
+            >
+              <Icon className={`h-4 w-4 flex-shrink-0 ${colors[t.variant]}`} />
+              <span className="text-body text-text-primary">{t.message}</span>
+              <button
+                onClick={() => dismiss(t.id)}
+                className="ml-2 text-text-tertiary hover:text-text-secondary"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </ToastContext.Provider>
+  );
+}

package/frontend/components/waitlist/WaitlistDialog.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { FormEvent } from 'react';
+import { X } from 'lucide-react';
+import { joinPaidPlanWaitlist, type WaitlistLead } from '@/lib/api';
+
+type WaitlistDialogProps = {
+  open: boolean;
+  plan: 'individual' | 'team';
+  source: WaitlistLead['source'];
+  defaultEmail?: string;
+  onClose: () => void;
+};
+
+export function WaitlistDialog({
+  open,
+  plan,
+  source,
+  defaultEmail = '',
+  onClose,
+}: WaitlistDialogProps) {
+  const planLabel = plan === 'team' ? 'Team plan (single workspace user for now)' : 'Individual plan';
+  const [email, setEmail] = useState(defaultEmail);
+  const [message, setMessage] = useState('');
+  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      setEmail(defaultEmail);
+      setMessage('');
+      setStatus('idle');
+      setError('');
+    }
+  }, [defaultEmail, open]);
+
+  if (!open) return null;
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    setStatus('submitting');
+    setError('');
+    try {
+      await joinPaidPlanWaitlist({
+        email,
+        plan,
+        source,
+        message,
+        context: {
+          path: typeof window === 'undefined' ? undefined : window.location.pathname,
+          app_url: typeof window === 'undefined' ? undefined : window.location.origin,
+        },
+      });
+      setStatus('success');
+    } catch (err) {
+      setError((err as Error).message);
+      setStatus('error');
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+      <div className="w-full max-w-md rounded border border-border bg-surface shadow-xl">
+        <div className="flex items-start justify-between gap-4 border-b border-border px-4 py-3">
+          <div>
+            <h2 className="text-heading font-semibold text-text-primary">Join the {planLabel} waitlist</h2>
+            <p className="mt-1 text-body text-text-tertiary">
+              Leave your email and I will reach out before paid plans open.
+            </p>
+          </div>
+          <button onClick={onClose} className="text-text-tertiary transition hover:text-text-secondary">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {status === 'success' ? (
+          <div className="p-4">
+            <div className="rounded border border-success/30 bg-success/10 p-3 text-body text-success">
+              You are on the waitlist. I will contact you directly when the plan opens.
+            </div>
+            <button
+              onClick={onClose}
+              className="mt-4 w-full rounded bg-accent px-4 py-2 text-body font-medium text-white transition hover:bg-accent-hover"
+            >
+              Done
+            </button>
+          </div>
+        ) : (
+          <form onSubmit={submit} className="space-y-4 p-4">
+            <label className="block">
+              <span className="mb-1 block text-label uppercase text-text-tertiary">Email</span>
+              <input
+                required
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                className="w-full rounded border border-border bg-bg px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+                placeholder="you@company.com"
+              />
+            </label>
+            <label className="block">
+              <span className="mb-1 block text-label uppercase text-text-tertiary">What do you need?</span>
+              <textarea
+                value={message}
+                onChange={(event) => setMessage(event.target.value)}
+                className="min-h-24 w-full rounded border border-border bg-bg px-3 py-2 text-body text-text-primary outline-none focus:border-border-focus"
+                placeholder="Optional: agents, repos, team size, or use case"
+              />
+            </label>
+            {error && (
+              <div className="rounded border border-error/30 bg-error/10 p-3 text-body text-error">
+                {error}
+              </div>
+            )}
+            <button
+              type="submit"
+              disabled={status === 'submitting'}
+              className="w-full rounded bg-accent px-4 py-2 text-body font-medium text-white transition hover:bg-accent-hover disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {status === 'submitting' ? 'Joining...' : 'Join waitlist'}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}