From 0259b101b525f523be29edfafbdb0ebaf60f5068 Mon Sep 17 00:00:00 2001
From: Markus Unterwaditzer <markus-tarpit+git@unterwaditzer.net>
Date: Fri, 15 May 2026 22:13:47 +0200
Subject: [PATCH] compact UI a bit

---
 .../src/lib/components/ManifestCard.svelte    |  6 --
 .../lib/components/SystemStatsTable.svelte    | 70 ++++++++++++++-----
 daemon/web/src/routes/+page.svelte            | 56 +--------------
 3 files changed, 52 insertions(+), 80 deletions(-)

diff --git a/daemon/web/src/lib/components/ManifestCard.svelte b/daemon/web/src/lib/components/ManifestCard.svelte
index 1b8b55b..1b5d084 100644
--- a/daemon/web/src/lib/components/ManifestCard.svelte
+++ b/daemon/web/src/lib/components/ManifestCard.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { ManifestEntry } from '$lib/manifest.svelte';
-    import { gpsModeLabel } from '$lib/utils.svelte';
     import { AnalysisManager } from '$lib/analysisManager.svelte';
     import DownloadLink from '$lib/components/DownloadLink.svelte';
     import DeleteButton from '$lib/components/DeleteButton.svelte';
@@ -87,11 +86,6 @@
             {entry.stop_reason}
         </div>
     {/if}
-    {#if entry.gps_mode !== undefined}
-        <div class="text-sm text-gray-500">
-            GPS: {gpsModeLabel(entry.gps_mode)}
-        </div>
-    {/if}
     <div class="flex flex-row justify-between lg:justify-end gap-1 mt-2 overflow-x-auto">
         <DownloadLink url={entry.get_pcap_url()} text="pcap" full_button />
         <DownloadLink url={entry.get_qmdl_url()} text="qmdl" full_button />
diff --git a/daemon/web/src/lib/components/SystemStatsTable.svelte b/daemon/web/src/lib/components/SystemStatsTable.svelte
index 9a634a2..5a1eca3 100644
--- a/daemon/web/src/lib/components/SystemStatsTable.svelte
+++ b/daemon/web/src/lib/components/SystemStatsTable.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
     import { type SystemStats } from '$lib/systemStats';
+    import { gpsModeLabel, GpsMode, type GpsData } from '$lib/utils.svelte';
     let {
         stats,
+        gps_data = null,
+        gps_mode = GpsMode.Disabled,
     }: {
         stats: SystemStats;
+        gps_data?: GpsData | null;
+        gps_mode?: GpsMode;
     } = $props();
 
-    const table_cell_classes = 'border border-gray-200 p-1 lg:p-2';
-
     let battery_level = $derived(stats.battery_status ? stats.battery_status.level : 0);
     let bar_color = $derived.by(() => {
         if (stats.battery_status === undefined) {
@@ -33,34 +36,39 @@
         }
         return text;
     });
+
+    const gps_date_formatter = new Intl.DateTimeFormat(undefined, {
+        timeStyle: 'long',
+        dateStyle: 'short',
+    });
 </script>
 
 <div
     class="flex-1 drop-shadow-sm 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 border-gray-200">
+    <table class="text-sm w-full">
         <tbody>
-            <tr class="border border-gray-200">
-                <th class={table_cell_classes}> Rayhunter Version </th>
-                <td class={table_cell_classes}>{stats.runtime_metadata.rayhunter_version}</td>
+            <tr class="border-b border-gray-200">
+                <td class="py-1 pr-4 text-gray-500 font-medium">Rayhunter Version</td>
+                <td class="py-1">{stats.runtime_metadata.rayhunter_version}</td>
             </tr>
-            <tr class="border border-gray-200">
-                <th class={table_cell_classes}> Storage </th>
-                <td class={table_cell_classes}>
+            <tr class="border-b border-gray-200">
+                <td class="py-1 pr-4 text-gray-500 font-medium">Storage</td>
+                <td class="py-1">
                     {stats.disk_stats.used_percent} used ({stats.disk_stats.used_size} used / {stats
                         .disk_stats.available_size} available)
                 </td>
             </tr>
             <tr class="border-b border-gray-200">
-                <th class={table_cell_classes}> Memory (RAM) </th>
-                <td class={table_cell_classes}>
+                <td class="py-1 pr-4 text-gray-500 font-medium">Memory (RAM)</td>
+                <td class="py-1">
                     Free: {stats.memory_stats.free}, Used: {stats.memory_stats.used}
                 </td>
             </tr>
-            <tr class="border-b border-gray-200">
-                <th class={table_cell_classes}> Battery </th>
-                <td class={table_cell_classes}>
+            <tr class={gps_mode !== GpsMode.Disabled ? 'border-b border-gray-200' : ''}>
+                <td class="py-1 pr-4 text-gray-500 font-medium">Battery</td>
+                <td class="py-1">
                     <svg
                         width="80"
                         height="30"
@@ -70,7 +78,6 @@
                         class="battery-icon"
                     >
                         <title>{title_text}</title>
-                        <!-- Battery body -->
                         <rect
                             class="fill-none stroke-neutral-800 stroke-2"
                             width="70"
@@ -78,7 +85,6 @@
                             rx="3"
                             ry="3"
                         />
-                        <!-- Battery terminal -->
                         <rect
                             class="fill-neutral-800"
                             x="70"
@@ -88,7 +94,6 @@
                             rx="2"
                             ry="2"
                         />
-                        <!-- Battery charge bar -->
                         <rect
                             class={bar_color}
                             x="2"
@@ -99,14 +104,12 @@
                             style="width: {battery_level * 0.66}px;"
                         />
                         {#if stats.battery_status && stats.battery_status.is_plugged_in}
-                            <!-- Lightning bolt icon -->
                             <path
                                 class="fill-yellow-300 stroke-neutral-800 stroke-1"
                                 d="M38 3 L28 17 L34 17 L30 27 L40 13 L34 13 Z"
                             />
                         {/if}
                         {#if !stats.battery_status}
-                            <!-- Question mark icon -->
                             <text
                                 class="fill-neutral-500 text-[20px] font-bold [text-anchor:middle] [dominant-baseline:central]"
                                 x="35"
@@ -116,6 +119,35 @@
                     </svg>
                 </td>
             </tr>
+            {#if gps_mode !== GpsMode.Disabled}
+                <tr class="border-b border-gray-200">
+                    <td class="py-1 pr-4 text-gray-500 font-medium">GPS Mode</td>
+                    <td class="py-1">{gpsModeLabel(gps_mode)}</td>
+                </tr>
+                {#if gps_data}
+                    <tr class="border-b border-gray-200">
+                        <td class="py-1 pr-4 text-gray-500 font-medium">Latitude</td>
+                        <td class="py-1 font-mono">{gps_data.latitude.toFixed(6)}</td>
+                    </tr>
+                    <tr class="border-b border-gray-200">
+                        <td class="py-1 pr-4 text-gray-500 font-medium">Longitude</td>
+                        <td class="py-1 font-mono">{gps_data.longitude.toFixed(6)}</td>
+                    </tr>
+                    <tr>
+                        <td class="py-1 pr-4 text-gray-500 font-medium">GPS Timestamp</td>
+                        <td class="py-1 font-mono">
+                            {gps_data.timestamp > 0
+                                ? gps_date_formatter.format(new Date(gps_data.timestamp * 1000))
+                                : 'Fixed'}
+                        </td>
+                    </tr>
+                {:else}
+                    <tr>
+                        <td class="py-1 pr-4 text-gray-500 font-medium">GPS Data</td>
+                        <td class="py-1 text-gray-400">Awaiting GPS data...</td>
+                    </tr>
+                {/if}
+            {/if}
         </tbody>
     </table>
 </div>
diff --git a/daemon/web/src/routes/+page.svelte b/daemon/web/src/routes/+page.svelte
index d377507..52bcbed 100644
--- a/daemon/web/src/routes/+page.svelte
+++ b/daemon/web/src/routes/+page.svelte
@@ -293,62 +293,8 @@
                     </div>
                 </div>
             {/if}
-            <SystemStatsTable stats={system_stats!} />
+            <SystemStatsTable stats={system_stats!} {gps_data} {gps_mode} />
         </div>
-        {#if gps_mode !== GpsMode.Disabled}
-            <div
-                class="bg-white border border-gray-200 drop-shadow rounded-md p-4 flex flex-col gap-2"
-            >
-                <span class="text-lg font-semibold flex flex-row items-center gap-2">
-                    <svg
-                        class="w-5 h-5 text-rayhunter-blue"
-                        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="M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z"
-                            clip-rule="evenodd"
-                        />
-                    </svg>
-                    GPS Status
-                </span>
-                {#if gps_data}
-                    {@const gps_date_formatter = new Intl.DateTimeFormat(undefined, {
-                        timeStyle: 'long',
-                        dateStyle: 'short',
-                    })}
-                    <table class="w-full text-sm">
-                        <tbody>
-                            <tr class="border-b border-gray-100">
-                                <td class="py-1 pr-4 text-gray-500 font-medium">Latitude</td>
-                                <td class="py-1 font-mono">{gps_data.latitude.toFixed(6)}</td>
-                            </tr>
-                            <tr class="border-b border-gray-100">
-                                <td class="py-1 pr-4 text-gray-500 font-medium">Longitude</td>
-                                <td class="py-1 font-mono">{gps_data.longitude.toFixed(6)}</td>
-                            </tr>
-                            <tr>
-                                <td class="py-1 pr-4 text-gray-500 font-medium">GPS Timestamp</td>
-                                <td class="py-1 font-mono">
-                                    {gps_data.timestamp > 0
-                                        ? gps_date_formatter.format(
-                                              new Date(gps_data.timestamp * 1000)
-                                          )
-                                        : 'Fixed'}
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                {:else}
-                    <span class="text-gray-400 text-sm">Awaiting GPS data...</span>
-                {/if}
-            </div>
-        {/if}
         <div class="flex flex-col gap-2">
             <div class="flex flex-row gap-2">
                 <div class="text-xl flex-1">History</div>