Tweak UI and text

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

@@ -38,12 +38,17 @@
 </script>
 <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>
+        <div class="flex flex-row justify-between gap-2">
+            <span class="text-xl mb-2">Current Recording</span>
+            <span class=""><AnalysisStatus onclick={toggle_analysis_visibility} entry={entry} analysis_visible={analysis_visible}/></span>
+        </div>
     {/if}
     <div class="flex flex-col">
         <div class="flex flex-row justify-between">
             <span class="font-bold">ID: {entry.name}</span>
-            <span class=""><AnalysisStatus onclick={toggle_analysis_visibility} entry={entry} analysis_visible={analysis_visible}/></span>
+            {#if !current}
+                <span class=""><AnalysisStatus onclick={toggle_analysis_visibility} entry={entry} analysis_visible={analysis_visible}/></span>
+            {/if}
         </div>
         <span class="">{entry.qmdl_size_bytes} bytes</span>
     </div>
@@ -51,7 +56,7 @@
         <span class="">Start: {date_formatter.format(entry.start_time)}</span>
         <span class="">Last Message: {date_formatter.format(entry.last_message_time)}</span>
     </div>
-    <div class="flex flex-row justify-between mt-2">
+    <div class="flex flex-row justify-between lg:justify-end gap-2 mt-2">
         <DownloadLink url={entry.get_pcap_url()} text="pcap" full_button=true />
         <DownloadLink url={entry.get_qmdl_url()} text="qmdl" full_button=true />
         {#if current}

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

@@ -13,7 +13,7 @@
 <table class="hidden table-auto text-left lg:table">
     <thead>
         <tr class="bg-gray-100 drop-shadow">
-            <th class='p-2' scope="col">Name</th>
+            <th class='p-2' scope="col">ID</th>
             <th class='p-2' scope="col">Started</th>
             <th class='p-2' scope="col">Last Message</th>
             <th class='p-2' scope="col">Size (bytes)</th>

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

@@ -52,25 +52,28 @@
 <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!} />
         {#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 justify-between">
-                <span class="text-2xl font-bold mb-2 flex flex-row items-center gap-2">
+                <span class="text-2xl font-bold mb-2 flex flex-row items-center gap-2 text-red-600">
                     <svg class="w-8 h-8 text-red-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                         <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0V8Zm-1 7a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H12Z" clip-rule="evenodd"/>
                     </svg>
-                    WARNING: Not Recording
+                    WARNING: Not Running
                 </span>
-                <span>Rayhunter is not currently running!</span>
+                <span>Rayhunter is not currently running and will not detect abnormal behavior!</span>
                 <div class="flex flex-row justify-end mt-2">
                     <RecordingControls {recording} />
                 </div>
             </div>
         {/if}
+        <SystemStatsTable stats={system_stats!} />
+    </div>
+    <div class="flex flex-col gap-2">
+        <span class="text-xl">History</span>
+        <ManifestTable entries={entries} server_is_recording={recording} />
     </div>
-    <ManifestTable entries={entries} server_is_recording={recording} />
     <DeleteAllButton/>
 {:else}
     <p>Loading...</p>