Add cloud settings save/load via DynamoDB

- New GET/PUT /settings/{channel} routes on api.tts.bot
- tts-bot Lambda handles new routes, storing settings in tts.bot table
  under login="streamer_settings" keyed by channel
- PUT validates Twitch access token matches the channel
- settingsApiService.ts for frontend API calls
- SettingsPanel gets ↑ Save and ↓ Load buttons with status feedback

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

Author: johnebgood

react-app/src/components/settings/SettingsPanel.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { useSettingsStore, useVoiceStore, useAppearanceStore } from '../../store';
+import { useSettingsStore, useVoiceStore, useAppearanceStore, useAuthStore } from '../../store';
 import { VoiceSelect } from '../shared/VoiceSelect';
+import { loadSettingsFromApi, saveSettingsToApi } from '../../services/settingsApiService';
 
 interface SettingsPanelProps {
   channel: string;
@@ -11,9 +12,34 @@ type Tab = 'general' | 'voices' | 'translation' | 'filters' | 'appearance' | 'we
 
 export function SettingsPanel({ channel, onClose }: SettingsPanelProps) {
   const [tab, setTab] = useState<Tab>('general');
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'loading' | 'ok' | 'err'>('idle');
   const settings = useSettingsStore();
   const voice = useVoiceStore();
   const appearance = useAppearanceStore();
+  const { accessToken, twitchUsername } = useAuthStore();
+
+  const handleSave = async () => {
+    setSaveStatus('saving');
+    const payload = { ...settings, ...voice };
+    const ok = await saveSettingsToApi(twitchUsername || channel, payload as Record<string, unknown>, accessToken);
+    setSaveStatus(ok ? 'ok' : 'err');
+    setTimeout(() => setSaveStatus('idle'), 2000);
+  };
+
+  const handleLoad = async () => {
+    setSaveStatus('loading');
+    const data = await loadSettingsFromApi(twitchUsername || channel);
+    if (data) {
+      Object.entries(data).forEach(([k, v]) => {
+        if (k in settings) settings.setSetting(k as any, v as any);
+        else if (k in voice) voice.setVoice(k as any, v as any);
+      });
+      setSaveStatus('ok');
+    } else {
+      setSaveStatus('err');
+    }
+    setTimeout(() => setSaveStatus('idle'), 2000);
+  };
 
   const cb = (key: keyof typeof settings) => (
     <input
@@ -42,7 +68,27 @@ export function SettingsPanel({ channel, onClose }: SettingsPanelProps) {
     <div className="settings-panel bg-dark text-white p-3 overflow-y-auto h-100">
       <div className="d-flex justify-content-between align-items-center mb-3">
         <h5 className="mb-0">Settings</h5>
-        <button className="btn btn-sm btn-outline-secondary" onClick={onClose}>✕</button>
+        <div className="d-flex gap-1 align-items-center">
+          {saveStatus === 'ok' && <span className="text-success small">✓</span>}
+          {saveStatus === 'err' && <span className="text-danger small">✗</span>}
+          <button
+            className="btn btn-sm btn-outline-info"
+            onClick={handleLoad}
+            disabled={saveStatus === 'saving' || saveStatus === 'loading'}
+            title="Load settings from cloud"
+          >
+            {saveStatus === 'loading' ? '…' : '↓ Load'}
+          </button>
+          <button
+            className="btn btn-sm btn-outline-success"
+            onClick={handleSave}
+            disabled={saveStatus === 'saving' || saveStatus === 'loading'}
+            title="Save settings to cloud"
+          >
+            {saveStatus === 'saving' ? '…' : '↑ Save'}
+          </button>
+          <button className="btn btn-sm btn-outline-secondary" onClick={onClose}>✕</button>
+        </div>
       </div>
 
       <ul className="nav nav-pills nav-fill mb-3 flex-wrap gap-1">

react-app/src/services/settingsApiService.ts

@@ -0,0 +1,29 @@
+const API_BASE = 'https://api.tts.bot';
+
+export async function loadSettingsFromApi(channel: string): Promise<Record<string, unknown> | null> {
+  try {
+    const res = await fetch(`${API_BASE}/settings/${channel}`);
+    if (!res.ok) return null;
+    const data = await res.json();
+    return data?.settings ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export async function saveSettingsToApi(
+  channel: string,
+  settings: Record<string, unknown>,
+  accessToken: string
+): Promise<boolean> {
+  try {
+    const res = await fetch(`${API_BASE}/settings/${channel}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ access_token: accessToken, settings }),
+    });
+    return res.ok;
+  } catch {
+    return false;
+  }
+}