core functionalities

ui/src/App.svelte

@@ -3,8 +3,10 @@
   import { pipe } from 'fp-ts/lib/function';
   import { downloads, rpcClient } from './lib/store';
   import { datetimeCompareFunc, isRPCResponse } from './lib/utils';
+  import { onDestroy } from 'svelte';
+  import Navbar from './lib/Navbar.svelte';
 
-  rpcClient.subscribe(($client) => {
+  const unsubscribe = rpcClient.subscribe(($client) => {
     setInterval(() => $client.running(), 750);
 
     $client.socket.onmessage = (ev: any) => {
@@ -32,14 +34,17 @@
       downloads.set(O.none);
     };
   });
+
+  onDestroy(unsubscribe);
 </script>
 
 <main>
+  <Navbar />
   <div class="flex flex-col gap-2 p-8">
     {#each pipe( $downloads, O.getOrElseW(() => []), ) as download}
-      <div class="flex gap-4 bg-neutral-100 p-4 rounded-lg shadow-lg">
+      <div class="flex gap-4 bg-neutral-100 p-4 rounded-lg shadow-lg border">
         <img src={download.info.thumbnail} class="h-48 rounded" alt="" />
-        <div>
+        <div class="break-all">
           <div>{download.id}</div>
           <div>{JSON.stringify(download.info)}</div>
           <div>{JSON.stringify(download.progress)}</div>

ui/src/lib/Navbar.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { rpcClient, serverApiEndpoint } from './store';
+</script>
+
+<nav
+  class="p-4 flex justify-between items-center bg-neutral-100 rounded-b-lg border shadow-lg"
+>
+  <div class="font-semibold">yt-dlp WebUI</div>
+
+  <div />
+
+  <div class="flex gap-2">
+    <div>
+      HDD: {#await $rpcClient.freeSpace()}
+        Loading...
+      {:then freeSpace}
+        {freeSpace.result}
+      {/await}
+    </div>
+
+    <div>RPC: {$serverApiEndpoint.split('//')[1]}</div>
+  </div>
+</nav>

ui/src/lib/store.ts

@@ -1,7 +1,7 @@
-import { derived, readable, writable } from 'svelte/store'
-import { RPCClient } from './RPCClient'
-import type { RPCResponse, RPCResult } from './types'
 import * as O from 'fp-ts/lib/Option'
+import { derived, writable } from 'svelte/store'
+import { RPCClient } from './RPCClient'
+import type { RPCResult } from './types'
 
 export const rpcHost = writable<string>(localStorage.getItem('rpcHost') ?? 'localhost')
 export const rpcPort = writable<number>(Number(localStorage.getItem('rpcPort')) || 3033)