feat: Implement functional torrent tables and sidebar filters with real-time SSE updates

2026-01-31 16:47:13 +03:00
parent 27fd02b9c9
commit 97c5378a71
6 changed files with 277 additions and 81 deletions
--- a/frontend/public/tailwind.css
+++ b/frontend/public/tailwind.css
@@ -837,6 +837,9 @@
  .fixed {
    position: fixed;
  }
+  .static {
+    position: static;
+  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
@@ -846,6 +849,51 @@
  .z-\[200\] {
    z-index: 200;
  }
+  .filter {
+    @layer daisyui.l1.l2.l3 {
+      display: flex;
+      flex-wrap: wrap;
+      input[type="radio"] {
+        width: auto;
+      }
+      input {
+        overflow: hidden;
+        opacity: 100%;
+        scale: 1;
+        transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s;
+        &:not(:last-child) {
+          margin-inline-end: calc(0.25rem * 1);
+        }
+        &.filter-reset {
+          aspect-ratio: 1 / 1;
+          &::after {
+            --tw-content: "×";
+            content: var(--tw-content);
+          }
+        }
+      }
+      &:not(:has(input:checked:not(.filter-reset))) {
+        .filter-reset, input[type="reset"] {
+          scale: 0;
+          border-width: 0;
+          margin-inline: calc(0.25rem * 0);
+          width: calc(0.25rem * 0);
+          padding-inline: calc(0.25rem * 0);
+          opacity: 0%;
+        }
+      }
+      &:has(input:checked:not(.filter-reset)) {
+        input:not(:checked, .filter-reset, input[type="reset"]) {
+          scale: 0;
+          border-width: 0;
+          margin-inline: calc(0.25rem * 0);
+          width: calc(0.25rem * 0);
+          padding-inline: calc(0.25rem * 0);
+          opacity: 0%;
+        }
+      }
+    }
+  }
  .input-sm {
    @layer daisyui.l1.l2 {
      --size: calc(var(--size-field, 0.25rem) * 8);
@@ -1397,6 +1445,9 @@
      }
    }
  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1918,6 +1969,59 @@
  inherits: false;
  initial-value: 0 0 #0000;
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
@@ -1983,6 +2087,19 @@
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
--- a/frontend/src/app.rs
+++ b/frontend/src/app.rs
@@ -6,6 +6,8 @@ use crate::components::torrent::table::TorrentTable;

 #[component]
 pub fn App() -> impl IntoView {
+    crate::store::provide_torrent_store();
+
    view! {
        <div class="flex flex-col h-screen w-screen overflow-hidden bg-base-100 text-base-content text-sm select-none">
            // Toolbar at the top
--- a/frontend/src/components/layout/sidebar.rs
+++ b/frontend/src/components/layout/sidebar.rs
@@ -2,52 +2,70 @@ use leptos::*;

 #[component]
 pub fn Sidebar() -> impl IntoView {
+    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
+
+    let total_count = move || store.torrents.get().len();
+    let downloading_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Downloading).count();
+    let seeding_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Seeding).count();
+    let completed_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Seeding || t.status == shared::TorrentStatus::Paused).count();
+    let inactive_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Paused || t.status == shared::TorrentStatus::Error).count();
+
+    let set_filter = move |f: crate::store::FilterStatus| {
+        store.filter.set(f);
+    };
+
+    let filter_class = move |f: crate::store::FilterStatus| {
+        if store.filter.get() == f { "active" } else { "" }
+    };
+
    view! {
        <aside class="w-64 bg-base-200 h-full flex flex-col border-r border-base-300">
            <div class="p-4">
                <h2 class="text-xl font-bold px-4 mb-2 text-primary">"Filters"</h2>
                <ul class="menu w-full rounded-box gap-1">
                    <li>
-                        <a class="active">
+                        <a class={move || filter_class(crate::store::FilterStatus::All)} on:click=move |_| set_filter(crate::store::FilterStatus::All)>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                            </svg>
                            "All"
-                            <span class="badge badge-sm badge-ghost ml-auto">"12"</span>
+                            <span class="badge badge-sm badge-ghost ml-auto">{total_count}</span>
                        </a>
                    </li>
                    <li>
-                        <a>
+                        <a class={move || filter_class(crate::store::FilterStatus::Downloading)} on:click=move |_| set_filter(crate::store::FilterStatus::Downloading)>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                            </svg>
                            "Downloading"
-                            <span class="badge badge-sm badge-ghost ml-auto">"4"</span>
+                            <span class="badge badge-sm badge-ghost ml-auto">{downloading_count}</span>
                        </a>
                    </li>
                    <li>
-                        <a>
+                        <a class={move || filter_class(crate::store::FilterStatus::Seeding)} on:click=move |_| set_filter(crate::store::FilterStatus::Seeding)>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
                            </svg>
                            "Seeding"
-                            <span class="badge badge-sm badge-ghost ml-auto">"8"</span>
+                            <span class="badge badge-sm badge-ghost ml-auto">{seeding_count}</span>
                        </a>
                    </li>
                    <li>
-                        <a>
+                        <a class={move || filter_class(crate::store::FilterStatus::Completed)} on:click=move |_| set_filter(crate::store::FilterStatus::Completed)>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            "Completed"
+                             <span class="badge badge-sm badge-ghost ml-auto">{completed_count}</span>
                        </a>
                    </li>
                    <li>
-                        <a>
+                        <a class={move || filter_class(crate::store::FilterStatus::Inactive)} on:click=move |_| set_filter(crate::store::FilterStatus::Inactive)>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                            </svg>
                            "Inactive"
+                             <span class="badge badge-sm badge-ghost ml-auto">{inactive_count}</span>
                        </a>
                    </li>
                </ul>
--- a/frontend/src/components/torrent/table.rs
+++ b/frontend/src/components/torrent/table.rs
@@ -1,66 +1,41 @@
 use leptos::*;

-#[derive(Clone)]
-struct Torrent {
-    id: u32,
-    name: String,
-    size: String,
-    progress: f32,
-    status: String,
-    seeds: u32,
-    peers: u32,
-    down_speed: String,
-    up_speed: String,
+
+
+
+fn format_bytes(bytes: i64) -> String {
+    const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
+    if bytes < 1024 {
+        return format!("{} B", bytes);
+    }
+    let i = (bytes as f64).log2().div_euclid(10.0) as usize;
+    format!("{:.1} {}", (bytes as f64) / 1024_f64.powi(i as i32), UNITS[i])
+}
+
+fn format_speed(bytes_per_sec: i64) -> String {
+    if bytes_per_sec == 0 {
+        return "0 B/s".to_string();
+    }
+    format!("{}/s", format_bytes(bytes_per_sec))
 }

 #[component]
 pub fn TorrentTable() -> impl IntoView {
-    let torrents = vec![
-        Torrent {
-            id: 1,
-            name: "Ubuntu 22.04.3 LTS".to_string(),
-            size: "4.7 GB".to_string(),
-            progress: 100.0,
-            status: "Seeding".to_string(),
-            seeds: 452,
-            peers: 12,
-            down_speed: "0 KB/s".to_string(),
-            up_speed: "1.2 MB/s".to_string(),
-        },
-        Torrent {
-            id: 2,
-            name: "Debian 12.1.0 DVD".to_string(),
-            size: "3.9 GB".to_string(),
-            progress: 45.5,
-            status: "Downloading".to_string(),
-            seeds: 120,
-            peers: 45,
-            down_speed: "4.5 MB/s".to_string(),
-            up_speed: "50 KB/s".to_string(),
-        },
-        Torrent {
-            id: 3,
-            name: "Arch Linux 2023.09.01".to_string(),
-            size: "800 MB".to_string(),
-            progress: 12.0,
-            status: "Downloading".to_string(),
-            seeds: 85,
-            peers: 20,
-            down_speed: "2.1 MB/s".to_string(),
-            up_speed: "10 KB/s".to_string(),
-        },
-         Torrent {
-            id: 4,
-            name: "Fedora Workstation 39".to_string(),
-            size: "2.1 GB".to_string(),
-            progress: 0.0,
-            status: "Paused".to_string(),
-            seeds: 0,
-            peers: 0,
-            down_speed: "0 KB/s".to_string(),
-            up_speed: "0 KB/s".to_string(),
-        },
-    ];
+    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
+
+    let filtered_torrents = move || {
+        store.torrents.get().into_iter().filter(|t| {
+            let filter = store.filter.get();
+            match filter {
+                crate::store::FilterStatus::All => true,
+                crate::store::FilterStatus::Downloading => t.status == shared::TorrentStatus::Downloading,
+                crate::store::FilterStatus::Seeding => t.status == shared::TorrentStatus::Seeding,
+                crate::store::FilterStatus::Completed => t.status == shared::TorrentStatus::Seeding || t.status == shared::TorrentStatus::Paused, // Approximate
+                crate::store::FilterStatus::Inactive => t.status == shared::TorrentStatus::Paused || t.status == shared::TorrentStatus::Error,
+                 _ => true
+            }
+        }).collect::<Vec<_>>()
+    };

    view! {
        <div class="overflow-x-auto h-full bg-base-100">
@@ -76,19 +51,22 @@ pub fn TorrentTable() -> impl IntoView {
                        <th class="w-24">"Size"</th>
                        <th class="w-48">"Progress"</th>
                        <th class="w-24">"Status"</th>
-                        <th class="w-20">"Seeds"</th>
-                        <th class="w-20">"Peers"</th>
+                        // <th class="w-20">"Seeds"</th> // Not available in shared::Torrent
+                        // <th class="w-20">"Peers"</th> // Not available in shared::Torrent
                        <th class="w-24">"Down Speed"</th>
                        <th class="w-24">"Up Speed"</th>
+                        <th class="w-24">"ETA"</th>
                    </tr>
                </thead>
                <tbody>
-                    {torrents.into_iter().map(|t| {
-                        let progress_class = if t.progress == 100.0 { "progress-success" } else { "progress-primary" };
-                        let status_class = match t.status.as_str() {
-                            "Seeding" => "text-success",
-                            "Downloading" => "text-primary",
-                            "Paused" => "text-warning",
+                    {move || filtered_torrents().into_iter().map(|t| {
+                        let progress_class = if t.percent_complete >= 100.0 { "progress-success" } else { "progress-primary" };
+                        let status_str = format!("{:?}", t.status);
+                        let status_class = match t.status {
+                            shared::TorrentStatus::Seeding => "text-success",
+                            shared::TorrentStatus::Downloading => "text-primary",
+                            shared::TorrentStatus::Paused => "text-warning",
+                            shared::TorrentStatus::Error => "text-error",
                            _ => "text-base-content/50"
                        };

@@ -102,18 +80,19 @@ pub fn TorrentTable() -> impl IntoView {
                                <td class="font-medium truncate max-w-xs" title={t.name.clone()}>
                                    {t.name}
                                </td>
-                                <td class="opacity-80 font-mono text-[11px]">{t.size}</td>
+                                <td class="opacity-80 font-mono text-[11px]">{format_bytes(t.size)}</td>
                                <td>
                                    <div class="flex items-center gap-2">
-                                        <progress class={format!("progress w-24 {}", progress_class)} value={t.progress} max="100"></progress>
-                                        <span class="text-[10px] opacity-70">{format!("{:.1}%", t.progress)}</span>
+                                        <progress class={format!("progress w-24 {}", progress_class)} value={t.percent_complete} max="100"></progress>
+                                        <span class="text-[10px] opacity-70">{format!("{:.1}%", t.percent_complete)}</span>
                                    </div>
                                </td>
-                                <td class={format!("text-[11px] font-medium {}", status_class)}>{t.status}</td>
-                                <td class="text-right font-mono text-[11px] opacity-80">{t.seeds}</td>
-                                <td class="text-right font-mono text-[11px] opacity-80">{t.peers}</td>
-                                <td class="text-right font-mono text-[11px] opacity-80 text-success">{t.down_speed}</td>
-                                <td class="text-right font-mono text-[11px] opacity-80 text-primary">{t.up_speed}</td>
+                                <td class={format!("text-[11px] font-medium {}", status_class)}>{status_str}</td>
+                                // <td class="text-right font-mono text-[11px] opacity-80">-</td>
+                                // <td class="text-right font-mono text-[11px] opacity-80">-</td>
+                                <td class="text-right font-mono text-[11px] opacity-80 text-success">{format_speed(t.down_rate)}</td>
+                                <td class="text-right font-mono text-[11px] opacity-80 text-primary">{format_speed(t.up_rate)}</td>
+                                <td class="text-right font-mono text-[11px] opacity-80">{if t.eta > 0 { format!("{}s", t.eta) } else { "∞".to_string() }}</td> // Temporary ETA format
                            </tr>
                        }
                    }).collect::<Vec<_>>()}
--- a/frontend/src/lib.rs
+++ b/frontend/src/lib.rs
@@ -2,6 +2,7 @@ mod app;
 // mod models; // Removed
 mod components;
 pub mod utils;
+pub mod store;

 use leptos::*;
 use wasm_bindgen::prelude::*;
--- a/frontend/src/store.rs
+++ b/frontend/src/store.rs
@@ -0,0 +1,79 @@
+use leptos::*;
+use shared::{Torrent, AppEvent};
+use futures::StreamExt;
+use gloo_net::eventsource::futures::EventSource;
+
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum FilterStatus {
+    All,
+    Downloading,
+    Seeding,
+    Completed,
+    Inactive,
+    Active,
+    Error,
+}
+
+impl FilterStatus {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            FilterStatus::All => "All",
+            FilterStatus::Downloading => "Downloading",
+            FilterStatus::Seeding => "Seeding",
+            FilterStatus::Completed => "Completed",
+            FilterStatus::Inactive => "Inactive",
+            FilterStatus::Active => "Active",
+            FilterStatus::Error => "Error",
+        }
+    }
+}
+
+#[derive(Clone, Copy, Debug)]
+pub struct TorrentStore {
+    pub torrents: RwSignal<Vec<Torrent>>,
+    pub filter: RwSignal<FilterStatus>,
+}
+
+pub fn provide_torrent_store() {
+    let torrents = create_rw_signal(Vec::<Torrent>::new());
+    let filter = create_rw_signal(FilterStatus::All);
+
+    let store = TorrentStore { torrents, filter };
+    provide_context(store);
+
+    // Initialize SSE connection
+    create_effect(move |_| {
+        spawn_local(async move {
+            let mut es = EventSource::new("http://localhost:3000/api/events").unwrap();
+            let mut stream = es.subscribe("message").unwrap();
+
+            while let Some(Ok((_, msg))) = stream.next().await {
+                if let Some(data_str) = msg.data().as_string() {
+                     if let Ok(event) = serde_json::from_str::<AppEvent>(&data_str) {
+                        match event {
+                            AppEvent::FullList(list, _) => {
+                                torrents.set(list);
+                            }
+                            AppEvent::Update(update) => {
+                                torrents.update(|list| {
+                                    if let Some(t) = list.iter_mut().find(|t| t.hash == update.hash) {
+                                        if let Some(name) = update.name { t.name = name; }
+                                        if let Some(size) = update.size { t.size = size; }
+                                        if let Some(down_rate) = update.down_rate { t.down_rate = down_rate; }
+                                        if let Some(up_rate) = update.up_rate { t.up_rate = up_rate; }
+                                        if let Some(percent_complete) = update.percent_complete { t.percent_complete = percent_complete; }
+                                        if let Some(completed) = update.completed { t.completed = completed; }
+                                        if let Some(eta) = update.eta { t.eta = eta; }
+                                        if let Some(status) = update.status { t.status = status; }
+                                        if let Some(error_message) = update.error_message { t.error_message = error_message; }
+                                    }
+                                });
+                            }
+                        }
+                     }
+                }
+            }
+        });
+    });
+}