From 8c940c9f98c83d8f10737f2f58db2cfe75a54b1b Mon Sep 17 00:00:00 2001
From: Michael Salim <salim_michaelmi@yahoo.com>
Date: Thu, 30 Jan 2025 15:23:44 +0000
Subject: [PATCH] Feat(p-audio): Style changes

---
 .../Recording/RecordingCard.tsx                   |  2 +-
 .../Recording/RecordingSection.tsx                | 15 ++++++++++++---
 .../view/AudioRecorderRemote/index.tsx            |  2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/plugins/audio-recorder/view/AudioRecorderRemote/Recording/RecordingCard.tsx b/plugins/audio-recorder/view/AudioRecorderRemote/Recording/RecordingCard.tsx
index 907388a..8340400 100644
--- a/plugins/audio-recorder/view/AudioRecorderRemote/Recording/RecordingCard.tsx
+++ b/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
diff --git a/plugins/audio-recorder/view/AudioRecorderRemote/Recording/RecordingSection.tsx b/plugins/audio-recorder/view/AudioRecorderRemote/Recording/RecordingSection.tsx
index 14518f0..49d359c 100644
--- a/plugins/audio-recorder/view/AudioRecorderRemote/Recording/RecordingSection.tsx
+++ b/plugins/audio-recorder/view/AudioRecorderRemote/Recording/RecordingSection.tsx
@@ -1,3 +1,6 @@
+import { Stack, Text } from "@chakra-ui/react";
+import { useMemo } from "react";
+
 import { usePluginAPI } from "../../pluginApi";
 import { RecordingCard } from "./RecordingCard";
 
@@ -5,13 +8,19 @@ 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>
     </>
   );
 };
diff --git a/plugins/audio-recorder/view/AudioRecorderRemote/index.tsx b/plugins/audio-recorder/view/AudioRecorderRemote/index.tsx
index bef2152..59ab6c0 100644
--- a/plugins/audio-recorder/view/AudioRecorderRemote/index.tsx
+++ b/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>