From 4982463b57b4e4e00bffc22e89b6cec15ad65fbc Mon Sep 17 00:00:00 2001
From: Caleb <57644769+alliraine@users.noreply.github.com>
Date: Fri, 16 May 2025 16:33:45 -0400
Subject: [PATCH] Add seperate card for current recording and recording
 controls

---
 ...ntrolBar.svelte => DeleteAllButton.svelte} |  5 -----
 .../src/lib/components/ManifestCard.svelte    |  2 +-
 .../src/lib/components/ManifestTable.svelte   |  6 ------
 .../lib/components/SystemStatsTable.svelte    |  2 +-
 bin/web/src/routes/+page.svelte               | 21 ++++++++++++++++---
 5 files changed, 20 insertions(+), 16 deletions(-)
 rename bin/web/src/lib/components/{ControlBar.svelte => DeleteAllButton.svelte} (72%)

diff --git a/bin/web/src/lib/components/ControlBar.svelte b/bin/web/src/lib/components/DeleteAllButton.svelte
similarity index 72%
rename from bin/web/src/lib/components/ControlBar.svelte
rename to bin/web/src/lib/components/DeleteAllButton.svelte
index e6ce763..ac94bf4 100644
--- a/bin/web/src/lib/components/ControlBar.svelte
+++ b/bin/web/src/lib/components/DeleteAllButton.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
 	import { req } from "$lib/utils.svelte";
 	import DeleteButton from "./DeleteButton.svelte";
-	import RecordingControls from "./RecordingControls.svelte";
-	let { server_is_recording }: {
-        server_is_recording: boolean;
-    } = $props();
 
     function confirmDelete() {
         if (window.confirm(`Permanently delete ALL recordings?`)) {
@@ -14,7 +10,6 @@
 </script>
 
 <div class="flex flex-row justify-between gap-2">
-    <RecordingControls {server_is_recording} />
     <DeleteButton
         text="Delete ALL Recordings"
         prompt={`Are you sure you want to delete ALL recordings?`}
diff --git a/bin/web/src/lib/components/ManifestCard.svelte b/bin/web/src/lib/components/ManifestCard.svelte
index 34f273e..9a5831a 100644
--- a/bin/web/src/lib/components/ManifestCard.svelte
+++ b/bin/web/src/lib/components/ManifestCard.svelte
@@ -36,7 +36,7 @@
         analysis_visible = !analysis_visible;
     }
 </script>
-<div class="{status_row_color} {status_border_color} drop-shadow p-4 flex flex-col gap-2 border rounded-md">
+<div class="{status_row_color} {status_border_color} drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1">
     {#if current}
         <span class="text-2xl font-bold mb-2">Current Recording</span>
     {/if}
diff --git a/bin/web/src/lib/components/ManifestTable.svelte b/bin/web/src/lib/components/ManifestTable.svelte
index daf5bee..1cba349 100644
--- a/bin/web/src/lib/components/ManifestTable.svelte
+++ b/bin/web/src/lib/components/ManifestTable.svelte
@@ -25,9 +25,6 @@
         </tr>
     </thead>
     <tbody>
-        {#if current_entry !== undefined}
-            <TableRow entry={current_entry} current={true} i={0} />
-        {/if}
         {#each entries as entry, i}
             <TableRow {entry} current={false} {i} />
         {/each}
@@ -35,9 +32,6 @@
 </table>
 <!--For smaller screens we use cards-->
 <div class="lg:hidden flex flex-col gap-4">
-    {#if current_entry !== undefined}
-        <Card entry={current_entry} current={true} i={0} server_is_recording={server_is_recording}/>
-    {/if}
     {#each entries as entry, i}
         <Card {entry} current={false} {i} />
     {/each}
diff --git a/bin/web/src/lib/components/SystemStatsTable.svelte b/bin/web/src/lib/components/SystemStatsTable.svelte
index acd4a2a..40c2f43 100644
--- a/bin/web/src/lib/components/SystemStatsTable.svelte
+++ b/bin/web/src/lib/components/SystemStatsTable.svelte
@@ -6,7 +6,7 @@
 
 </script>
 
-<div>
+<div class="flex-1 drop-shadow p-4 flex flex-col gap-2 border rounded-md bg-gray-100 border-gray-100">
     <p class="text-xl mb-2">System Information</p>
     <table class="table-auto border">
         <tbody>
diff --git a/bin/web/src/routes/+page.svelte b/bin/web/src/routes/+page.svelte
index 656f656..dc637cb 100644
--- a/bin/web/src/routes/+page.svelte
+++ b/bin/web/src/routes/+page.svelte
@@ -2,10 +2,12 @@
     import { ManifestEntry } from "$lib/manifest.svelte";
     import { get_manifest, get_system_stats } from "$lib/utils.svelte";
     import ManifestTable from "$lib/components/ManifestTable.svelte";
+    import Card from "$lib/components/ManifestCard.svelte";
     import type { SystemStats } from "$lib/systemStats";
     import { AnalysisManager } from "$lib/analysisManager.svelte";
 	import SystemStatsTable from "$lib/components/SystemStatsTable.svelte";
-	import ControlBar from "$lib/components/ControlBar.svelte";
+	import DeleteAllButton from "$lib/components/DeleteAllButton.svelte";
+    import RecordingControls from "$lib/components//RecordingControls.svelte";
 
     let manager: AnalysisManager = new AnalysisManager();
     let loaded = $state(false);
@@ -49,9 +51,22 @@
 </div>
 <div class="m-4 xl:mx-8 flex flex-col gap-4">
 {#if loaded}
-    <SystemStatsTable stats={system_stats!} />
-    <ControlBar server_is_recording={recording} />
+    <div class="flex flex-col lg:flex-row gap-4">
+        <SystemStatsTable stats={system_stats!} />
+        {#if recording}
+            <Card entry={current_entry} current={true} i={0} server_is_recording={recording}/>
+        {:else}
+            <div class="bg-red-100 border-red-100 drop-shadow p-4 flex flex-col gap-2 border rounded-md flex-1">
+                <span class="text-2xl font-bold mb-2">WARNING: Not Recording</span>
+                <span>Rayhunter is not currently running!</span>
+                <div class="flex flex-row justify-between mt-2">
+                    <RecordingControls {recording} />
+                </div>
+            </div>
+        {/if}
+    </div>
     <ManifestTable entries={entries} current_entry={current_entry} server_is_recording={recording} />
+    <DeleteAllButton/>
 {:else}
     <p>Loading...</p>
 {/if}