Add reading progress bar, better empty states, and Edge TTS

UI Improvements:
- Reading progress bar at top of reader (tracks scroll position)
- Better empty state with illustration and helpful tips
- Edge TTS as default - fast streaming with Microsoft neural voices

TTS Options:
- Edge TTS (recommended): Fast, natural sounding, streams immediately
- Kokoro: High quality but slower (generates full audio first)
- Browser: Built-in fallback

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/SettingsPanel.tsx

@@ -191,11 +191,12 @@ export function SettingsPanel({
             <h3 className="text-sm font-medium text-[var(--muted)] uppercase tracking-wide mb-4">
               Text-to-Speech Engine
             </h3>
-            <div className="flex gap-2">
+            <div className="grid grid-cols-3 gap-2">
               {[
-                { value: "browser", label: "Browser" },
-                { value: "kokoro", label: "Kokoro" },
-              ].map(({ value, label }) => (
+                { value: "edge", label: "Edge", desc: "Fast, natural" },
+                { value: "kokoro", label: "Kokoro", desc: "High quality" },
+                { value: "browser", label: "Browser", desc: "Built-in" },
+              ].map(({ value, label, desc }) => (
                 <button
                   key={value}
                   onClick={() =>
@@ -204,13 +205,14 @@ export function SettingsPanel({
                       engine: value as TTSSettings["engine"],
                     })
                   }
-                  className={`flex-1 p-3 rounded-lg border transition-colors ${
+                  className={`p-3 rounded-lg border transition-colors text-left ${
                     ttsSettings.engine === value
                       ? "border-[var(--accent)] bg-[var(--accent)]/10"
                       : "border-[var(--border)] hover:border-[var(--muted)]"
                   }`}
                 >
-                  {label}
+                  <div className="font-medium">{label}</div>
+                  <div className="text-xs text-[var(--muted)]">{desc}</div>
                 </button>
               ))}
             </div>
@@ -267,6 +269,30 @@ export function SettingsPanel({
             </section>
           )}
 
+          {/* Edge TTS URL */}
+          {ttsSettings.engine === "edge" && (
+            <section className="mb-8">
+              <h3 className="text-sm font-medium text-[var(--muted)] uppercase tracking-wide mb-4">
+                Edge TTS URL
+              </h3>
+              <input
+                type="text"
+                value={ttsSettings.edgeUrl}
+                onChange={(e) =>
+                  onTTSSettingsChange({
+                    ...ttsSettings,
+                    edgeUrl: e.target.value,
+                  })
+                }
+                placeholder="http://localhost:5050"
+                className="w-full p-3 rounded-lg border border-[var(--border)] bg-[var(--background)] text-[var(--foreground)]"
+              />
+              <p className="text-xs text-[var(--muted)] mt-2">
+                Uses Microsoft neural voices. Fast and natural sounding.
+              </p>
+            </section>
+          )}
+
           {/* Kokoro URL */}
           {ttsSettings.engine === "kokoro" && (
             <section className="mb-8">
@@ -286,7 +312,7 @@ export function SettingsPanel({
                 className="w-full p-3 rounded-lg border border-[var(--border)] bg-[var(--background)] text-[var(--foreground)]"
               />
               <p className="text-xs text-[var(--muted)] mt-2">
-                URL of your Kokoro-FastAPI server
+                High quality but slower. Generates full audio before playing.
               </p>
             </section>
           )}