more ui fixes

Author: lucasheriques

src/renderer/features/recordings/components/RecordingDetail.tsx

@@ -5,6 +5,7 @@ import {
   Flex,
   Heading,
   IconButton,
+  Kbd,
   ScrollArea,
   Separator,
   Text,
@@ -53,28 +54,34 @@ export function RecordingDetail({
         style={{ borderBottom: "1px solid var(--gray-6)" }}
       >
         <Heading size="5">{title}</Heading>
-        <Flex gap="2">
-          <IconButton
-            size="2"
-            variant="ghost"
-            color="red"
-            onClick={() => {
-              if (confirm("Delete this recording?")) {
-                onDelete(recording.id);
-                setSelectedRecording(null);
-              }
-            }}
-          >
-            <Trash />
-          </IconButton>
-          <IconButton
-            size="2"
-            variant="ghost"
-            color="gray"
-            onClick={() => setSelectedRecording(null)}
-          >
-            <X />
-          </IconButton>
+        <Flex gap="2" align="center">
+          <Flex align="center" gap="2">
+            <Kbd size="1">Del</Kbd>
+            <IconButton
+              size="2"
+              variant="ghost"
+              color="red"
+              onClick={() => {
+                if (confirm("Delete this recording?")) {
+                  onDelete(recording.id);
+                  setSelectedRecording(null);
+                }
+              }}
+            >
+              <Trash />
+            </IconButton>
+          </Flex>
+          <Flex align="center" gap="2">
+            <Kbd size="1">ESC</Kbd>
+            <IconButton
+              size="2"
+              variant="ghost"
+              color="gray"
+              onClick={() => setSelectedRecording(null)}
+            >
+              <X />
+            </IconButton>
+          </Flex>
         </Flex>
       </Flex>
 

src/renderer/features/recordings/components/RecordingsList.tsx

@@ -104,12 +104,10 @@ export function RecordingsList({ recordings, onDelete }: RecordingsListProps) {
 
   // Auto-select first recording if none selected
   useEffect(() => {
-    if (recordings.length > 0 && !selectedRecordingId) {
-      setSelectedRecording(recordings[0].id);
-    } else if (recordings.length === 0) {
+    if (recordings.length === 0) {
       setSelectedRecording(null);
     }
-  }, [recordings, selectedRecordingId, setSelectedRecording]);
+  }, [recordings.length, setSelectedRecording]);
 
   if (recordings.length === 0) {
     return (

src/renderer/features/recordings/components/RecordingsView.tsx

@@ -156,7 +156,7 @@ export function RecordingsView() {
                 Select a recording to view details
               </Text>
               <Text size="1" color="gray">
-                Or press <kbd>R</kbd> to start a new recording
+                Use <kbd>↑</kbd> <kbd>↓</kbd> to navigate
               </Text>
             </Flex>
           )}