Enhance text note functionality: add API for creating and managing written notes, implement draft saving, and improve UI for note capture modes

frontend/index.html

@@ -19,6 +19,11 @@
 
     <main>
       <section class="capture" aria-labelledby="capture-title">
+        <div class="capture-modes" role="tablist" aria-label="Note type">
+          <button id="voice-mode" class="capture-mode active" type="button" role="tab" aria-selected="true" aria-controls="voice-panel">Voice</button>
+          <button id="write-mode" class="capture-mode" type="button" role="tab" aria-selected="false" aria-controls="write-panel">Write</button>
+        </div>
+        <div id="voice-panel" role="tabpanel" aria-labelledby="voice-mode">
         <div class="recorder-row">
           <button id="record-button" class="record-button" type="button" aria-label="Start recording">
             <span class="record-dot"></span>
@@ -35,10 +40,18 @@
         <div class="audio-upload-row">
           <label class="audio-upload-button" for="audio-file-input">↑ Upload audio</label>
           <input id="audio-file-input" type="file" accept="audio/*,.mp3,.m4a,.aac,.ogg,.opus,.flac,.wav" multiple />
-          <span>Files stay on this device until the server confirms storage.</span>
         </div>
         <div class="record-meter"><span id="record-meter-fill"></span></div>
         <div id="capture-message" class="capture-message" role="status"></div>
+        </div>
+        <div id="write-panel" class="write-panel" role="tabpanel" aria-labelledby="write-mode" hidden>
+          <label class="write-label" for="written-note">Write a note</label>
+          <textarea id="written-note" class="written-note" placeholder="What’s on your mind?" rows="7"></textarea>
+          <div class="write-actions">
+            <span id="draft-status" class="draft-status" role="status">Draft stays on this device until you save it.</span>
+            <button id="save-written-note" class="save-written-note" type="button" disabled>Save note</button>
+          </div>
+        </div>
       </section>
 
       <section class="queue-section" aria-labelledby="queue-title">
@@ -52,7 +65,7 @@
 
       <section class="archive-section" aria-labelledby="archive-title">
         <div class="section-heading archive-heading">
-          <div><span class="section-kicker">SERVER STORED</span><h2 id="archive-title">Awaiting transcription</h2></div>
+          <div><span class="section-kicker">SERVER STORED</span><h2 id="archive-title">Saved notes</h2></div>
         </div>
         <div id="archive-list" class="archive-list"></div>
         <p id="archive-empty" class="empty-state">Notes awaiting transcription will appear here.</p>