Add seperate card for current recording and recording controls

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?`}

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}

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}

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>

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}
+    <div class="flex flex-col lg:flex-row gap-4">
         <SystemStatsTable stats={system_stats!} />
-    <ControlBar server_is_recording={recording} />
+        {#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}