feat: create title for each meeting

src/App.css

@@ -663,9 +663,17 @@ body {
   color: rgba(255, 255, 255, 0.8);
 }
 
+.transcript-title {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  line-height: 1.3;
+  margin-bottom: 0.25rem;
+}
+
 .transcript-time {
-  font-weight: 500;
-  font-size: 0.875rem;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
 }
 
 .transcript-status {

src/App.tsx

@@ -27,6 +27,7 @@ interface StoredRecording {
   duration: number;
   transcript_segments: StoredTranscriptSegment[];
   summary: string | null;
+  title: string | null;
 }
 
 interface Recording {
@@ -35,6 +36,7 @@ interface Recording {
   duration: number;
   transcriptSegments: TranscriptSegment[];
   summary: string | null;
+  title: string | null;
   isGeneratingSummary: boolean;
   summaryProgress?: number;
 }
@@ -73,6 +75,7 @@ function App() {
     duration: stored.duration,
     transcriptSegments: stored.transcript_segments,
     summary: stored.summary,
+    title: stored.title,
     isGeneratingSummary: false,
     summaryProgress: undefined,
   });
@@ -84,6 +87,7 @@ function App() {
     duration: recording.duration,
     transcript_segments: recording.transcriptSegments,
     summary: recording.summary,
+    title: recording.title,
   });
 
   // Cleanup timers and listeners on unmount
@@ -242,6 +246,7 @@ function App() {
         duration: 0,
         transcriptSegments: [],
         summary: null,
+        title: null,
         isGeneratingSummary: false,
       };
       setActiveRecording(newRecording);
@@ -366,14 +371,15 @@ function App() {
 
     try {
       // Progress will be updated via events from the backend
-      const summaryResult = await invoke<string>("summarize", { transcript: fullTranscript });
+      const [summaryResult, titleResult] = await invoke<[string, string | null]>("summarize", { transcript: fullTranscript });
 
-      // Update the recording with the summary
+      // Update the recording with the summary and title
       const updatedRecording = recordings.find(r => r.id === recordingId);
       if (updatedRecording) {
         const recordingWithSummary = {
           ...updatedRecording,
           summary: summaryResult,
+          title: titleResult,
           isGeneratingSummary: false,
           summaryProgress: 100
         };
@@ -598,9 +604,14 @@ function App() {
                 className="transcript-content"
                 onClick={() => setSelectedRecordingId(recording.id)}
               >
-                <div className="transcript-time">
-                  {recording.timestamp.toLocaleTimeString()} - {formatDuration(recording.duration)}
+                <div className="transcript-title">
+                  {recording.title || `${recording.timestamp.toLocaleTimeString()} - ${formatDuration(recording.duration)}`}
                 </div>
+                {recording.title && (
+                  <div className="transcript-time">
+                    {recording.timestamp.toLocaleString()} • {formatDuration(recording.duration)}
+                  </div>
+                )}
                 <div className="transcript-status">
                   {recording.summary ? '✓ Summary' : recording.isGeneratingSummary ? '⏳ Summarizing...' : ''}
                 </div>
@@ -654,7 +665,7 @@ function App() {
           {displayedRecording && (
             <div className="transcript-details">
               <div className="transcript-header">
-                <h2>Transcript from {displayedRecording.timestamp.toLocaleString()}</h2>
+                <h2>{displayedRecording.title || `Transcript from ${displayedRecording.timestamp.toLocaleString()}`}</h2>
                 <div className="transcript-actions">
                   <button
                     className="secondary-button"