Feat(p-audio): Style changes

plugins/audio-recorder/view/AudioRecorderRemote/Recording/RecordingCard.tsx

@@ -58,7 +58,7 @@ export const RecordingCard = ({ recording }: { recording: Recording }) => {
   }
 
   return (
-    <Stack direction="column">
+    <Stack direction="column" py={2}>
       <Stack direction="row" justifyContent="space-between">
         <Stack direction="row" alignItems="center">
           <Button

plugins/audio-recorder/view/AudioRecorderRemote/Recording/RecordingSection.tsx

@@ -1,17 +1,26 @@
+import { Stack, Text } from "@chakra-ui/react";
+import { useMemo } from "react";
+
 import { usePluginAPI } from "../../pluginApi";
 import { RecordingCard } from "./RecordingCard";
 
 export const RecordingSection = () => {
   const pluginApi = usePluginAPI();
   const recordings = pluginApi.scene.useData((x) => x.pluginData.recordings);
 
+  const endedRecordings = useMemo(
+    () => recordings.filter((x) => x.status === "ended"),
+    [recordings],
+  );
+
   return (
     <>
-      {recordings
-        .filter((x) => x.status === "ended")
-        .map((recording) => (
+      {endedRecordings.length === 0 && <Text>Nothing here yet.</Text>}
+      <Stack direction="column" spacing={4}>
+        {endedRecordings.map((recording) => (
           <RecordingCard key={recording.mediaId} recording={recording} />
         ))}
+      </Stack>
     </>
   );
 };

plugins/audio-recorder/view/AudioRecorderRemote/index.tsx

@@ -28,7 +28,7 @@ const AudioRecorderRemoteInner = () => {
             <Heading>Streams</Heading>
             <StreamSection />
             <Heading as="h3" size="md">
-              Current Recordings
+              Recordings
             </Heading>
             <RecordingSection />
           </Stack>