Add basic status bar

Cargo.toml

@@ -53,7 +53,7 @@ lib-package = "frontend"
 
 # The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
 site-root = "target/site"
-hash-files = true
+hash-files = false
 
 # The site-root relative folder where all compiled output (JS, WASM and CSS) is written
 # Defaults to pkg

app/Cargo.toml

@@ -29,6 +29,7 @@ simple_crypt = { version = "0.2.3", optional = true }
 bincode      = { version = "1.3.3", optional = true }
 base64       = { version = "0.22.1", optional = true }
 anyhow.workspace = true
+human_bytes = "0.4.3"
 
 
 [features]

app/src/components/mod.rs

@@ -0,0 +1,2 @@
+pub mod status_bar;
+pub mod torrents;

app/src/components/status_bar.rs

@@ -0,0 +1,26 @@
+use fnord_ui::components::{Text, View};
+use human_bytes::human_bytes;
+use leptos::prelude::*;
+
+use qbittorrent_rs_proto::transfer::ServerStateFull;
+
+#[component]
+pub fn StatusBar(server_state: Signal<ServerStateFull>) -> impl IntoView {
+    let dl_speed = move || human_bytes(server_state.get().dl_info_speed);
+    let up_speed = move || human_bytes(server_state.get().up_info_speed);
+    let dl_data = move || human_bytes(server_state.get().dl_info_data);
+    let up_data = move || human_bytes(server_state.get().up_info_data);
+
+    view! {
+        <View class="flex-row bg-background-highlight justify-between fixed bottom-0 left-0 right-0 h-10 text-sm">
+            <View class="gap-0">
+                <div>{move || dl_speed()}"/s"</div>
+                <div>{move || up_speed()}"/s"</div>
+            </View>
+            <View class="gap-0">
+                <div>"Downloaded: "{move || dl_data()}</div>
+                <div>"Uploaded: "{move || up_data()}</div>
+            </View>
+        </View>
+    }
+}

app/src/components/torrents.rs

@@ -0,0 +1,8 @@
+use leptos::prelude::*;
+
+#[component]
+pub fn TorrentList() -> impl IntoView {
+    view! {
+        <div></div>
+    }
+}

app/src/lib.rs

@@ -1,9 +1,12 @@
 pub mod auth;
 mod routes;
 
+mod components;
+
 use crate::error_template::{AppError, ErrorTemplate};
 
 use auth::{has_auth, Login};
+use components::status_bar::StatusBar;
 use leptos::{either::Either, prelude::*};
 use leptos_meta::*;
 use leptos_router::{components::*, StaticSegment};
@@ -115,12 +118,13 @@ fn Dashboard() -> impl IntoView {
     use qbittorrent_rs_sse::sse_sync_maindata;
     // Create sse signal
     let data = sse_sync_maindata("/sse");
+    let server_data = data.clone();
+    let server_state = Signal::derive(move || server_data().server_state);
 
     view! {
-        <div>Count: {move || { view! { <div>
-            <div>"DL: "{data().server_state.dl_info_speed.to_string()}</div>
-            <div>"UP: "{data().server_state.up_info_speed.to_string()}</div>
-            <div>"Status: "{data().server_state.connection_status.to_string()}</div>
-            </div> }}}</div>
+        <div>
+        <div>"Torrent list will go here"</div>
+        <StatusBar server_state=server_state />
+        </div>
     }
 }

fnord_ui/src/components/mod.rs

@@ -1,7 +1,11 @@
 mod button;
 mod input;
 mod navbar;
+mod typography;
+mod view;
 
 pub use button::*;
 pub use input::*;
 pub use navbar::*;
+pub use typography::*;
+pub use view::*;

fnord_ui/src/components/typography.rs

@@ -0,0 +1,81 @@
+use leptos::html;
+use leptos::prelude::*;
+use tailwind_fuse::*;
+
+#[component]
+pub fn H1(
+    #[prop(optional, into)] class: String,
+    #[prop(optional)] node_ref: NodeRef<html::H1>,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <h1
+            class=tw_merge!("font-bold scroll-m-20 mt-5 text-4xl tracking-tight lg:text-5xl", class)
+            node_ref=node_ref
+        >
+            {children()}
+        </h1>
+    }
+}
+
+#[component]
+pub fn H2(
+    #[prop(optional, into)] class: String,
+    #[prop(optional)] node_ref: NodeRef<html::H2>,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <h2
+            class=tw_merge!(
+                "font-bold mt-5 scroll-m-20 border-b pb-2 text-3xl tracking-tight transition-colors first:mt-0",
+                class
+            )
+
+            node_ref=node_ref
+        >
+            {children()}
+        </h2>
+    }
+}
+
+#[component]
+pub fn H3(
+    #[prop(optional, into)] class: String,
+    #[prop(optional)] node_ref: NodeRef<html::H3>,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <h3
+            class=tw_merge!("mt-8 scroll-m-20 text-2xl font-semibold tracking-tight", class)
+            node_ref=node_ref
+        >
+            {children()}
+        </h3>
+    }
+}
+
+#[component]
+pub fn Text(
+    #[prop(optional, into)] class: String,
+    #[prop(optional)] node_ref: NodeRef<html::P>,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <p class=tw_merge!("leading-7", class) node_ref=node_ref>
+            {children()}
+        </p>
+    }
+}
+
+#[component]
+pub fn TextSpan(
+    #[prop(optional, into)] class: String,
+    #[prop(optional)] node_ref: NodeRef<html::Span>,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <span class=tw_merge!("leading-7", class) node_ref=node_ref>
+            {children()}
+        </span>
+    }
+}

fnord_ui/src/components/view.rs

@@ -0,0 +1,16 @@
+use leptos::html;
+use leptos::prelude::*;
+use tailwind_fuse::*;
+
+#[component]
+pub fn View(
+    #[prop(optional, into)] class: String,
+    #[prop(optional)] node_ref: NodeRef<html::Div>,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <div class=tw_merge!("flex flex-col gap-6", class) node_ref=node_ref>
+            {children()}
+        </div>
+    }
+}

qbittorrent_rs/src/lib.rs

@@ -76,7 +76,6 @@ impl QbtClient {
     #[tracing::instrument]
     pub async fn sync_maindata(&self, sid: String, rid: u64) -> Result<MainData, QbtError> {
         let url = format!("{}{}{}?rid={}", self.base_url, SYNC_API, MAINDATA_API, rid);
-        tracing::info!(url = ?url);
         let client = reqwest::Client::builder().build()?;
 
         let response = client

qbittorrent_rs_sse/src/axum.rs

@@ -1,25 +1,11 @@
-use core::panic;
-
 use anyhow::anyhow;
-use axum::http::StatusCode;
 use axum::response::sse::{Event, KeepAlive, Sse};
-use axum::{
-    body::Body,
-    extract::{FromRef, Path, Request, State},
-    http::header::{self, CONTENT_TYPE},
-    middleware::{self, Next},
-    response::{IntoResponse, Response},
-    routing::{get, post},
-    Extension, Router, ServiceExt,
-};
 use futures::stream;
 use futures::stream::Stream;
-use futures::{TryStream, TryStreamExt};
+use futures::TryStreamExt;
 use leptos::prelude::*;
 use qbittorrent_rs::QbtClient;
-use qbittorrent_rs_proto::sync::{MainData, SyncMainDataFull};
-use qbittorrent_rs_proto::transfer::ServerStateFull;
-use serde::{Deserialize, Serialize};
+use qbittorrent_rs_proto::sync::MainData;
 use std::time::Duration;
 use tokio_stream::StreamExt as _;