better start/stop buttons

bin/web/src/lib/components/ManifestTable.svelte

@@ -8,9 +8,9 @@
     let { entries, current_entry }: Props = $props();
 </script>
 
-<table>
-    <thead>
-        <tr>
+<table class="table-auto border">
+    <thead class="p-2">
+        <tr class="bg-gray-300 p-2 m-2">
             <th scope="col">Name</th>
             <th scope="col">Date Started</th>
             <th scope="col">Date of Last Message</th>
@@ -29,13 +29,3 @@
         {/each}
     </tbody>
 </table>
-
-<style>
-    table {
-        @apply table-auto border;
-    }
-
-    th {
-        @apply bg-gray-300 p-2;
-    }
-</style>

bin/web/src/lib/components/ManifestTableRow.svelte

@@ -7,29 +7,17 @@
         current: boolean;
     } = $props();
 
-    let row_class = current ? "current" : "";
+    // bg-gray-100
+    // bg-green-300
+    let row_color = current ? "bg-green-300" : "even:bg-gray-100";
 </script>
 
-<tr>
-    <th scope='row'>{entry.name}</th>
-    <td>{entry.start_time}</td>
-    <td>{entry.last_message_time}</td>
-    <td>{entry.qmdl_size_bytes}</td>
-    <td><DownloadLink url={entry.getPcapUrl()} text="pcap" /></td>
-    <td><DownloadLink url={entry.getQmdlUrl()} text="qmdl" /></td>
-    <td><AnalysisStatus analysis_status={entry.analysis_status} entry={entry} /></td>
+<tr class="{row_color} border-b">
+    <th class="font-bold p-2 border-b bg-blue-100" scope='row'>{entry.name}</th>
+    <td class="p-2">{entry.start_time}</td>
+    <td class="p-2">{entry.last_message_time}</td>
+    <td class="p-2">{entry.qmdl_size_bytes}</td>
+    <td class="p-2"><DownloadLink url={entry.getPcapUrl()} text="pcap" /></td>
+    <td class="p-2"><DownloadLink url={entry.getQmdlUrl()} text="qmdl" /></td>
+    <td class="p-2"><AnalysisStatus analysis_status={entry.analysis_status} entry={entry} /></td>
 </tr>
-
-<style>
-    th {
-        @apply font-bold p-2 border-b bg-blue-100;
-    }
-
-    td {
-        @apply p-2 border-b;
-    }
-
-    tr {
-        @apply even:bg-gray-100;
-    }
-</style>

bin/web/src/lib/components/RecordingControls.svelte

@@ -1,23 +1,35 @@
 <script lang="ts">
     import { req } from "$lib/utils.svelte";
-    let { currently_recording }: {
-        currently_recording: boolean;
+    let { server_is_recording: currently_recording }: {
+        server_is_recording: boolean;
     } = $props();
 
+    let client_set_recording = $state(currently_recording);
+    let waiting_for_server = $derived(client_set_recording !== currently_recording);
+
     async function start_recording() {
         await req('POST', '/api/start-recording');
+        client_set_recording = true;
     }
 
     async function stop_recording() {
         await req('POST', '/api/stop-recording');
+        client_set_recording = false;
     }
+
+    const stop_recording_classes = "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full";
+    const start_recording_classes = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full";
 </script>
 
 <div>
-    {#if currently_recording}
-        <button onclick={stop_recording}>Stop Recording</button>
+    {#if waiting_for_server}
+        <button class={currently_recording ? stop_recording_classes : start_recording_classes}>
+            {currently_recording ? "Stopping..." : "Starting..."}
+        </button>
+    {:else if currently_recording}
+        <button class={stop_recording_classes} onclick={stop_recording}>Stop Recording</button>
     {:else}
-        <button onclick={start_recording}>Start Recording</button>
+        <button class={start_recording_classes} onclick={start_recording}>Start Recording</button>
     {/if}
 </div>
 

bin/web/src/routes/+page.svelte

@@ -33,7 +33,7 @@
 
 <div class="p-8">
 {#if loaded}
-    <RecordingControls currently_recording={recording} />
+    <RecordingControls server_is_recording={recording} />
     <ManifestTable entries={entries} current_entry={current_entry} />
 {:else}
     <p>Loading...</p>