feat: persist transcripts permanently

src/App.css

@@ -604,7 +604,7 @@ body {
   min-height: 0;
 }
 
-.recordings-list {
+.transcripts-list {
   width: 300px;
   background-color: var(--surface-color);
   border-radius: 0.5rem;
@@ -612,24 +612,27 @@ body {
   overflow-y: auto;
 }
 
-.recordings-list h3 {
+.transcripts-list h3 {
   margin-bottom: 1rem;
   font-size: 1.125rem;
 }
 
-.no-recordings {
+.no-transcripts {
   color: var(--text-secondary);
   font-style: italic;
 }
 
-.recordings-items {
+.transcript-items {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.recording-item {
+.transcript-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 0.75rem;
   border-radius: 0.375rem;
   cursor: pointer;
@@ -638,34 +641,67 @@ body {
   border: 1px solid var(--border-color);
 }
 
-.recording-item:hover {
+.transcript-content {
+  flex: 1;
+  padding-right: 0.5rem;
+}
+
+.transcript-item:hover {
   background-color: var(--surface-color);
 }
 
-.recording-item.selected {
+.transcript-item.selected {
   background-color: var(--primary-color);
   color: white;
 }
 
-.recording-item.selected .recording-time {
+.transcript-item.selected .transcript-time {
   color: white;
 }
 
-.recording-item.selected .recording-status {
+.transcript-item.selected .transcript-status {
   color: rgba(255, 255, 255, 0.8);
 }
 
-.recording-time {
+.transcript-time {
   font-weight: 500;
   font-size: 0.875rem;
 }
 
-.recording-status {
+.transcript-status {
   font-size: 0.75rem;
   color: var(--text-secondary);
   margin-top: 0.25rem;
 }
 
+.transcript-item .delete-button {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  opacity: 0.7;
+}
+
+.transcript-item .delete-button:hover {
+  background-color: var(--danger-color);
+  border-color: var(--danger-color);
+  color: white;
+  opacity: 1;
+}
+
+.transcript-item.selected .delete-button {
+  border-color: rgba(255, 255, 255, 0.5);
+  color: white;
+}
+
+.transcript-item.selected .delete-button:hover {
+  background-color: var(--danger-color);
+  border-color: var(--danger-color);
+}
+
 .main-content {
   flex: 1;
   display: flex;
@@ -674,14 +710,14 @@ body {
   min-width: 0;
 }
 
-.recording-details {
+.transcript-details {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-.recording-header {
+.transcript-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -689,12 +725,12 @@ body {
   gap: 1rem;
 }
 
-.recording-header h2 {
+.transcript-header h2 {
   font-size: 1.25rem;
   margin: 0;
 }
 
-.recording-actions {
+.transcript-actions {
   display: flex;
   gap: 0.75rem;
   flex-wrap: wrap;