Compare commits
9 Commits
release-20
...
57abbb3335
| Author | SHA1 | Date | |
|---|---|---|---|
|
57abbb3335 | ||
|
|
315a2421c4 | ||
|
|
c135c96d27 | ||
|
|
315a2f9a53 | ||
|
|
9d160a7ef5 | ||
|
|
a24e4101e8 | ||
|
|
7539307e18 | ||
|
|
907ae66a7f | ||
|
|
f35b119c0d |
433
Cargo.lock
generated
433
Cargo.lock
generated
@@ -1256,30 +1256,14 @@ dependencies = [
|
||||
"console_error_panic_hook",
|
||||
"console_log",
|
||||
"futures",
|
||||
"gloo-console",
|
||||
"gloo-net",
|
||||
"gloo-timers",
|
||||
"js-sys",
|
||||
"leptos",
|
||||
"leptos-shadcn-alert",
|
||||
"leptos-shadcn-avatar",
|
||||
"leptos-shadcn-badge",
|
||||
"leptos-shadcn-button",
|
||||
"leptos-shadcn-card",
|
||||
"leptos-shadcn-context-menu",
|
||||
"leptos-shadcn-dialog",
|
||||
"leptos-shadcn-dropdown-menu",
|
||||
"leptos-shadcn-input",
|
||||
"leptos-shadcn-label",
|
||||
"leptos-shadcn-progress",
|
||||
"leptos-shadcn-scroll-area",
|
||||
"leptos-shadcn-separator",
|
||||
"leptos-shadcn-sheet",
|
||||
"leptos-shadcn-skeleton",
|
||||
"leptos-shadcn-tabs",
|
||||
"leptos-shadcn-toast",
|
||||
"leptos-shadcn-tooltip",
|
||||
"leptos-use",
|
||||
"leptos_router",
|
||||
"leptos_ui",
|
||||
"log",
|
||||
"rmp-serde",
|
||||
"serde",
|
||||
@@ -1287,8 +1271,10 @@ dependencies = [
|
||||
"serde_json",
|
||||
"shared",
|
||||
"struct-patch",
|
||||
"strum",
|
||||
"tailwind_fuse",
|
||||
"thiserror 2.0.18",
|
||||
"tw_merge",
|
||||
"uuid",
|
||||
"wasm-bindgen",
|
||||
"wasm-bindgen-futures",
|
||||
@@ -1440,6 +1426,19 @@ dependencies = [
|
||||
"wasm-bindgen",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-console"
|
||||
version = "0.3.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "2a17868f56b4a24f677b17c8cb69958385102fa879418052d60b50bc1727e261"
|
||||
dependencies = [
|
||||
"gloo-utils",
|
||||
"js-sys",
|
||||
"serde",
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-net"
|
||||
version = "0.6.0"
|
||||
@@ -2156,334 +2155,6 @@ dependencies = [
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-node-ref"
|
||||
version = "0.2.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "4f57b1ebc451fe9e7b6c7eba680fa8bc7313b410cc6c0f18481cb55a60ff3ac6"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"send_wrapper",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-alert"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "884551df61ade405bdb61b0d5a92a3a88b3a7af7a2d283b8d3e942ae0d71309c"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-avatar"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8cb3c5b1f5ba02f7282b55fde1513cdfecef3b25bf5fa44e1eb29fcaf8b927c5"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-badge"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "24578fb0bc21eb21be4e686e6719c7e183acb8fd071a4f81fb27fe452751c88a"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-button"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "7d6d1a7b813b726be7920f7238c127a14129ba4a45fa879312cad3ed2f8a1745"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-card"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "5b5cda16742d1e20284e5f6805eab88b6e54c1378d1548a8e15a5eedda1ea3eb"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-context-menu"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "e0f440e9a7517dfe6ba758080ddba1dfe42e4697008f60adfc112c5da02dca8d"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-dialog"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a3fdbb636393b150c2db1e37d44a6832e9dde177ce2e81281932fefad8bde98e"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-dropdown-menu"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f50189623a176386a30443d281483c5aa6cc34dc45fa11c3e53bd187ffccde21"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-input"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "b0939cdad5a878d920decda39a4b42ecf4eba15736a92bbd73b1b408807899b8"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"regex",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-label"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "5e7cad4b5fae11df9bf3b1d4265a56509a9bb7d3a8580e7487f398b733eadf0c"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-progress"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a34ca41b8ebfd7f29126e4f8656987834f3613717016f11f3983da85a90669f6"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-scroll-area"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "ef3d7bdcae4919ad495529ec2a5974036fb0b959580df310f36b2fd33f90860c"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-separator"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f5dfda49f059fd4d1549d663e6743e37a5c6c84d1ac2d6daec32caa3156bc268"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-sheet"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "ba85819a0c94a7705ed92989442c64cc75d9ed3a4540e711e87c56b206431611"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-signal-management"
|
||||
version = "0.1.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a5097c5171eb0be12bbf8fd736f4e669012657112865506a825480f2b013f6de"
|
||||
dependencies = [
|
||||
"chrono",
|
||||
"js-sys",
|
||||
"leptos",
|
||||
"serde",
|
||||
"serde_json",
|
||||
"thiserror 1.0.69",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-skeleton"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "6c14b6bd0f2fe191e3e114a34cee889fc983546ad488e76e76511e3d75ea3f86"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-tabs"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "39f817c834e70a8359933b7b274564313be64105370611af96f05508541b661b"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-toast"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3315f7ed844e3286704cc7b57db7209cad592c11eee770f5dc48ebdc92d66cfb"
|
||||
dependencies = [
|
||||
"gloo-timers",
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"uuid",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-shadcn-tooltip"
|
||||
version = "0.8.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3e41d37932d700444e1d3a21f10f198c3c9e76dde3fd78d58da4b5a099939fd7"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-node-ref",
|
||||
"leptos-shadcn-signal-management",
|
||||
"leptos-struct-component",
|
||||
"leptos-style",
|
||||
"tailwind_fuse",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-struct-component"
|
||||
version = "0.2.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c32085b37b67e61e69e0949d94e36c40e4fde83867681cbb884f9cd40a43881e"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"leptos-struct-component-macro",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-struct-component-macro"
|
||||
version = "0.2.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a40efd792acc28a115605b84ecb39e89397a278950bc8f2aad1bdcc7af2033af"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn 2.0.114",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-style"
|
||||
version = "0.2.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c65408961a0bd8e70f317de8973d532a0cb9ffbac910c488d97f9c5a2e4411e2"
|
||||
dependencies = [
|
||||
"indexmap",
|
||||
"leptos",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-use"
|
||||
version = "0.16.3"
|
||||
@@ -2689,6 +2360,17 @@ dependencies = [
|
||||
"tachys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos_ui"
|
||||
version = "0.3.20"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c7c30ca85b1aac5637bc59a9201a6aeb648452679bf0ef0e451a8f30acf153f7"
|
||||
dependencies = [
|
||||
"leptos",
|
||||
"paste",
|
||||
"tw_merge",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "libc"
|
||||
version = "0.2.180"
|
||||
@@ -3981,6 +3663,7 @@ dependencies = [
|
||||
"inventory",
|
||||
"js-sys",
|
||||
"pin-project-lite",
|
||||
"rmp-serde",
|
||||
"rustc_version",
|
||||
"rustversion",
|
||||
"send_wrapper",
|
||||
@@ -4066,6 +3749,7 @@ dependencies = [
|
||||
"bcrypt",
|
||||
"bytes",
|
||||
"cookie",
|
||||
"http 1.4.0",
|
||||
"jsonwebtoken",
|
||||
"leptos",
|
||||
"leptos_axum",
|
||||
@@ -4447,6 +4131,28 @@ dependencies = [
|
||||
"syn 2.0.114",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "strum"
|
||||
version = "0.26.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8fec0f0aef304996cf250b31b5a10dee7980c85da9d759361292b8bca5a18f06"
|
||||
dependencies = [
|
||||
"strum_macros",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "strum_macros"
|
||||
version = "0.26.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "4c6bee85a5a24955dc440386795aa378cd9cf82acd5f764469152d2270e581be"
|
||||
dependencies = [
|
||||
"heck",
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"rustversion",
|
||||
"syn 2.0.114",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "subtle"
|
||||
version = "2.6.1"
|
||||
@@ -4557,19 +4263,6 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "7ca71fb01735fbc6fa13e9390d7a3037dde97053c0b65c0c72c0159cd009d26b"
|
||||
dependencies = [
|
||||
"nom",
|
||||
"tailwind_fuse_macro",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tailwind_fuse_macro"
|
||||
version = "0.3.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "efa51b9ff80b5533001f8452d254a688bc7bb39c6bb77f9e0a19c1664d035888"
|
||||
dependencies = [
|
||||
"darling",
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn 2.0.114",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
@@ -4994,6 +4687,28 @@ dependencies = [
|
||||
"utf-8",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tw_merge"
|
||||
version = "0.1.17"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "25e4ae38c226104e3c821c60b311bca321f45dcf46e48b683a0db2fac9e2c6e2"
|
||||
dependencies = [
|
||||
"nom",
|
||||
"tw_merge_variants",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tw_merge_variants"
|
||||
version = "0.1.7"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "03de956478d5562138828bb736cc066949bda33dbb99c55ef77b2bb5438868e4"
|
||||
dependencies = [
|
||||
"darling",
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn 2.0.114",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "typed-builder"
|
||||
version = "0.21.2"
|
||||
|
||||
@@ -52,18 +52,22 @@ async fn auth_middleware(
|
||||
request: Request<Body>,
|
||||
next: Next,
|
||||
) -> Result<Response, StatusCode> {
|
||||
// Skip auth for public paths
|
||||
// Skip auth for public server functions
|
||||
let path = request.uri().path();
|
||||
if path.starts_with("/api/server_fns/Login") // Login server fn
|
||||
if path.starts_with("/api/server_fns/Login")
|
||||
|| path.starts_with("/api/server_fns/login")
|
||||
|| path.starts_with("/api/server_fns/GetSetupStatus")
|
||||
|| path.starts_with("/api/server_fns/get_setup_status")
|
||||
|| path.starts_with("/api/server_fns/Setup")
|
||||
|| path.starts_with("/api/server_fns/setup")
|
||||
|| path.starts_with("/swagger-ui")
|
||||
|| path.starts_with("/api-docs")
|
||||
|| !path.starts_with("/api/") // Allow static files (frontend)
|
||||
|| !path.starts_with("/api/")
|
||||
{
|
||||
return Ok(next.run(request).await);
|
||||
}
|
||||
|
||||
|
||||
// Check token
|
||||
if let Some(token) = jar.get("auth_token") {
|
||||
use jsonwebtoken::{decode, Validation, DecodingKey};
|
||||
@@ -221,6 +225,18 @@ async fn main() {
|
||||
tracing::info!("Socket: {}", args.socket);
|
||||
tracing::info!("Port: {}", args.port);
|
||||
|
||||
// Force linking of server functions from shared crate for registration on Mac
|
||||
{
|
||||
use shared::server_fns::auth::*;
|
||||
let _ = get_setup_status;
|
||||
let _ = setup;
|
||||
let _ = login;
|
||||
let _ = logout;
|
||||
let _ = get_user;
|
||||
tracing::info!("Server functions linked successfully.");
|
||||
}
|
||||
|
||||
|
||||
// ... rest of the main function ...
|
||||
// Startup Health Check
|
||||
let socket_path = std::path::Path::new(&args.socket);
|
||||
|
||||
@@ -7,7 +7,7 @@ edition = "2021"
|
||||
crate-type = ["cdylib", "rlib"]
|
||||
|
||||
[dependencies]
|
||||
leptos = { version = "0.8.15", features = ["csr", "msgpack"] }
|
||||
leptos = { version = "0.8.15", features = ["csr", "msgpack", "nightly"] }
|
||||
leptos_router = { version = "0.8.11" }
|
||||
|
||||
console_error_panic_hook = "0.1"
|
||||
@@ -35,22 +35,11 @@ thiserror = "2.0"
|
||||
rmp-serde = "1.3"
|
||||
struct-patch = "0.5"
|
||||
|
||||
# ShadCN UI Components (Individual)
|
||||
leptos-shadcn-button = "0.8"
|
||||
leptos-shadcn-input = "0.8"
|
||||
leptos-shadcn-card = "0.8"
|
||||
leptos-shadcn-badge = "0.8"
|
||||
leptos-shadcn-context-menu = "0.8"
|
||||
leptos-shadcn-separator = "0.8"
|
||||
leptos-shadcn-progress = "0.8"
|
||||
leptos-shadcn-avatar = "0.8"
|
||||
leptos-shadcn-sheet = "0.8"
|
||||
leptos-shadcn-tabs = "0.8"
|
||||
leptos-shadcn-scroll-area = "0.8"
|
||||
leptos-shadcn-dialog = "0.8"
|
||||
leptos-shadcn-label = "0.8"
|
||||
leptos-shadcn-alert = "0.8"
|
||||
leptos-shadcn-toast = "0.8"
|
||||
leptos-shadcn-dropdown-menu = "0.8"
|
||||
leptos-shadcn-tooltip = "0.8"
|
||||
leptos-shadcn-skeleton = "0.8"
|
||||
# Rust/UI Components
|
||||
leptos_ui = "0.3"
|
||||
tw_merge = "0.1"
|
||||
strum = { version = "0.26", features = ["derive"] }
|
||||
icons = { version = "0.18.0", features = ["leptos"] }
|
||||
|
||||
[package.metadata.leptos]
|
||||
tailwind-input-file = "input.css"
|
||||
|
||||
12
frontend/package-lock.json
generated
12
frontend/package-lock.json
generated
@@ -13,7 +13,8 @@
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
@@ -3737,6 +3738,15 @@
|
||||
"node": ">=8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tw-animate-css": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
|
||||
"integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/Wombosvideo"
|
||||
}
|
||||
},
|
||||
"node_modules/universalify": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "tailwind.config.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@tailwindcss/cli": "^4.1.18",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"description": "",
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
"autoprefixer": "^10.4.23",
|
||||
@@ -17,11 +17,13 @@
|
||||
"postcss-preset-env": "^10.1.3",
|
||||
"tailwindcss": "^4.1.18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/cli": "^4.1.18",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
}
|
||||
"keywords": [],
|
||||
"license": "ISC",
|
||||
"main": "tailwind.config.js",
|
||||
"name": "frontend",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"type": "module",
|
||||
"version": "1.0.0"
|
||||
}
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
use crate::components::layout::protected::Protected;
|
||||
use crate::components::torrent::table::TorrentTable;
|
||||
use crate::components::torrent::detail::TorrentDetail;
|
||||
use crate::components::auth::login::Login;
|
||||
use crate::components::auth::setup::Setup;
|
||||
use leptos::prelude::*;
|
||||
use leptos::task::spawn_local;
|
||||
use leptos_router::components::{Router, Routes, Route};
|
||||
use leptos_router::hooks::use_navigate;
|
||||
use leptos_shadcn_skeleton::Skeleton;
|
||||
use leptos_shadcn_toast::SonnerProvider;
|
||||
use crate::components::ui::toast::Toaster;
|
||||
|
||||
#[component]
|
||||
pub fn App() -> impl IntoView {
|
||||
crate::components::ui::toast::provide_toaster();
|
||||
view! {
|
||||
<SonnerProvider>
|
||||
<Toaster />
|
||||
<InnerApp />
|
||||
</SonnerProvider>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,36 +129,33 @@ fn InnerApp() -> impl IntoView {
|
||||
<div class="flex h-screen bg-background">
|
||||
// Sidebar skeleton
|
||||
<div class="w-56 border-r border-border p-4 space-y-4">
|
||||
<Skeleton class="h-8 w-3/4" />
|
||||
<div class="h-8 w-3/4 animate-pulse rounded-md bg-muted" />
|
||||
<div class="space-y-2">
|
||||
<Skeleton class="h-6 w-full" />
|
||||
<Skeleton class="h-6 w-full" />
|
||||
<Skeleton class="h-6 w-4/5" />
|
||||
<Skeleton class="h-6 w-full" />
|
||||
<Skeleton class="h-6 w-3/5" />
|
||||
<Skeleton class="h-6 w-full" />
|
||||
<div class="h-6 w-full animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-6 w-full animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-6 w-4/5 animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-6 w-full animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-6 w-3/5 animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-6 w-full animate-pulse rounded-md bg-muted" />
|
||||
</div>
|
||||
</div>
|
||||
// Main content skeleton
|
||||
<div class="flex-1 flex flex-col">
|
||||
// Header skeleton
|
||||
<div class="border-b border-border p-4 flex items-center gap-4">
|
||||
<Skeleton class="h-8 w-48" />
|
||||
<Skeleton class="h-8 w-64" />
|
||||
<div class="ml-auto"><Skeleton class="h-8 w-24" /></div>
|
||||
<div class="h-8 w-48 animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-8 w-64 animate-pulse rounded-md bg-muted" />
|
||||
<div class="ml-auto"><div class="h-8 w-24 animate-pulse rounded-md bg-muted" /></div>
|
||||
</div>
|
||||
// Table skeleton rows
|
||||
<div class="flex-1 p-4 space-y-3">
|
||||
<Skeleton class="h-10 w-full" />
|
||||
<Skeleton class="h-10 w-full" />
|
||||
<Skeleton class="h-10 w-full" />
|
||||
<Skeleton class="h-10 w-full" />
|
||||
<Skeleton class="h-10 w-full" />
|
||||
<Skeleton class="h-10 w-3/4" />
|
||||
<div class="h-10 w-full animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-10 w-full animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-10 w-full animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-10 w-full animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-10 w-full animate-pulse rounded-md bg-muted" />
|
||||
<div class="h-10 w-3/4 animate-pulse rounded-md bg-muted" />
|
||||
</div>
|
||||
// Status bar skeleton
|
||||
<div class="border-t border-border p-3">
|
||||
<Skeleton class="h-5 w-96" />
|
||||
<div class="h-5 w-96 animate-pulse rounded-md bg-muted" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,7 +166,6 @@ fn InnerApp() -> impl IntoView {
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<TorrentTable />
|
||||
</div>
|
||||
<TorrentDetail />
|
||||
</div>
|
||||
</Protected>
|
||||
</Show>
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos::task::spawn_local;
|
||||
use leptos_shadcn_card::{Card, CardHeader, CardContent};
|
||||
use leptos_shadcn_input::Input;
|
||||
use leptos_shadcn_button::Button;
|
||||
use leptos_shadcn_label::Label;
|
||||
use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
|
||||
use crate::components::ui::card::{Card, CardHeader, CardContent};
|
||||
use crate::components::ui::input::{Input, InputType};
|
||||
|
||||
#[component]
|
||||
pub fn Login() -> impl IntoView {
|
||||
let username = signal(String::new());
|
||||
let password = signal(String::new());
|
||||
let username = RwSignal::new(String::new());
|
||||
let password = RwSignal::new(String::new());
|
||||
let error = signal(Option::<String>::None);
|
||||
let loading = signal(false);
|
||||
|
||||
@@ -18,8 +15,8 @@ pub fn Login() -> impl IntoView {
|
||||
loading.1.set(true);
|
||||
error.1.set(None);
|
||||
|
||||
let user = username.0.get();
|
||||
let pass = password.0.get();
|
||||
let user = username.get();
|
||||
let pass = password.get();
|
||||
|
||||
spawn_local(async move {
|
||||
match shared::server_fns::auth::login(user, pass).await {
|
||||
@@ -52,44 +49,40 @@ pub fn Login() -> impl IntoView {
|
||||
<CardContent class="pt-4">
|
||||
<form on:submit=handle_login class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label>"Kullanıcı Adı"</Label>
|
||||
<label class="text-sm font-medium leading-none">"Kullanıcı Adı"</label>
|
||||
<Input
|
||||
input_type="text"
|
||||
r#type=InputType::Text
|
||||
placeholder="Kullanıcı adınız"
|
||||
value=MaybeProp::derive(move || Some(username.0.get()))
|
||||
on_change=Callback::new(move |val: String| username.1.set(val))
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
bind_value=username
|
||||
disabled=loading.0.get()
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label>"Şifre"</Label>
|
||||
<label class="text-sm font-medium leading-none">"Şifre"</label>
|
||||
<Input
|
||||
input_type="password"
|
||||
r#type=InputType::Password
|
||||
placeholder="******"
|
||||
value=MaybeProp::derive(move || Some(password.0.get()))
|
||||
on_change=Callback::new(move |val: String| password.1.set(val))
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
bind_value=password
|
||||
disabled=loading.0.get()
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Show when=move || error.0.get().is_some()>
|
||||
<Alert variant=AlertVariant::Destructive>
|
||||
<AlertDescription>
|
||||
<div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{move || error.0.get().unwrap_or_default()}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="pt-2">
|
||||
<Button
|
||||
class="w-full"
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
<button
|
||||
class="inline-flex items-center justify-center w-full h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
|
||||
disabled=move || loading.0.get()
|
||||
>
|
||||
<Show when=move || loading.0.get() fallback=|| "Giriş Yap">
|
||||
<span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
|
||||
"Giriş Yapılıyor..."
|
||||
</Show>
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
|
||||
@@ -1,24 +1,21 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos::task::spawn_local;
|
||||
use leptos_shadcn_card::{Card, CardHeader, CardContent};
|
||||
use leptos_shadcn_input::Input;
|
||||
use leptos_shadcn_button::Button;
|
||||
use leptos_shadcn_label::Label;
|
||||
use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
|
||||
use crate::components::ui::card::{Card, CardHeader, CardContent};
|
||||
use crate::components::ui::input::{Input, InputType};
|
||||
|
||||
#[component]
|
||||
pub fn Setup() -> impl IntoView {
|
||||
let username = signal(String::new());
|
||||
let password = signal(String::new());
|
||||
let confirm_password = signal(String::new());
|
||||
let username = RwSignal::new(String::new());
|
||||
let password = RwSignal::new(String::new());
|
||||
let confirm_password = RwSignal::new(String::new());
|
||||
let error = signal(Option::<String>::None);
|
||||
let loading = signal(false);
|
||||
|
||||
let handle_setup = move |ev: web_sys::SubmitEvent| {
|
||||
ev.prevent_default();
|
||||
|
||||
let pass = password.0.get();
|
||||
let confirm = confirm_password.0.get();
|
||||
let pass = password.get();
|
||||
let confirm = confirm_password.get();
|
||||
|
||||
if pass != confirm {
|
||||
error.1.set(Some("Şifreler eşleşmiyor".to_string()));
|
||||
@@ -33,7 +30,7 @@ pub fn Setup() -> impl IntoView {
|
||||
loading.1.set(true);
|
||||
error.1.set(None);
|
||||
|
||||
let user = username.0.get();
|
||||
let user = username.get();
|
||||
|
||||
spawn_local(async move {
|
||||
match shared::server_fns::auth::setup(user, pass).await {
|
||||
@@ -67,54 +64,49 @@ pub fn Setup() -> impl IntoView {
|
||||
<CardContent class="pt-4">
|
||||
<form on:submit=handle_setup class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label>"Yönetici Kullanıcı Adı"</Label>
|
||||
<label class="text-sm font-medium leading-none">"Yönetici Kullanıcı Adı"</label>
|
||||
<Input
|
||||
input_type="text"
|
||||
r#type=InputType::Text
|
||||
placeholder="admin"
|
||||
value=MaybeProp::derive(move || Some(username.0.get()))
|
||||
on_change=Callback::new(move |val: String| username.1.set(val))
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
bind_value=username
|
||||
disabled=loading.0.get()
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label>"Şifre"</Label>
|
||||
<label class="text-sm font-medium leading-none">"Şifre"</label>
|
||||
<Input
|
||||
input_type="password"
|
||||
r#type=InputType::Password
|
||||
placeholder="******"
|
||||
value=MaybeProp::derive(move || Some(password.0.get()))
|
||||
on_change=Callback::new(move |val: String| password.1.set(val))
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
bind_value=password
|
||||
disabled=loading.0.get()
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label>"Şifre Onay"</Label>
|
||||
<label class="text-sm font-medium leading-none">"Şifre Onay"</label>
|
||||
<Input
|
||||
input_type="password"
|
||||
r#type=InputType::Password
|
||||
placeholder="******"
|
||||
value=MaybeProp::derive(move || Some(confirm_password.0.get()))
|
||||
on_change=Callback::new(move |val: String| confirm_password.1.set(val))
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
bind_value=confirm_password
|
||||
disabled=loading.0.get()
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Show when=move || error.0.get().is_some() fallback=|| ()>
|
||||
<Alert variant=AlertVariant::Destructive>
|
||||
<AlertDescription>
|
||||
<div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
<span>{move || error.0.get().unwrap_or_default()}</span>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="pt-2">
|
||||
<Button
|
||||
class="w-full"
|
||||
disabled=Signal::derive(move || loading.0.get())
|
||||
<button
|
||||
class="inline-flex items-center justify-center w-full h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
|
||||
disabled=move || loading.0.get()
|
||||
>
|
||||
<Show when=move || loading.0.get() fallback=|| "Kurulumu Tamamla">
|
||||
<span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
|
||||
"Kuruluyor..."
|
||||
</Show>
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
|
||||
@@ -1,12 +1,5 @@
|
||||
use leptos::prelude::*;
|
||||
use web_sys::MouseEvent;
|
||||
use wasm_bindgen::prelude::*;
|
||||
use wasm_bindgen::JsCast;
|
||||
|
||||
// ── Kendi reaktif Context Menu implementasyonumuz ──
|
||||
// leptos-shadcn-context-menu v0.8.1'de ContextMenuContent'te
|
||||
// `if open.get()` statik kontrolü reaktif değil. Aşağıda
|
||||
// `Show` bileşeni ile düzgün reaktif versiyon yer alıyor.
|
||||
use crate::components::ui::context_menu::*;
|
||||
|
||||
#[component]
|
||||
pub fn TorrentContextMenu(
|
||||
@@ -15,144 +8,61 @@ pub fn TorrentContextMenu(
|
||||
on_action: Callback<(String, String)>,
|
||||
) -> impl IntoView {
|
||||
let hash = StoredValue::new(torrent_hash);
|
||||
let on_action = StoredValue::new(on_action);
|
||||
|
||||
let open = RwSignal::new(false);
|
||||
let position = RwSignal::new((0i32, 0i32));
|
||||
|
||||
// Sağ tıklama handler
|
||||
let on_contextmenu = move |e: MouseEvent| {
|
||||
e.prevent_default();
|
||||
e.stop_propagation();
|
||||
position.set((e.client_x(), e.client_y()));
|
||||
open.set(true);
|
||||
};
|
||||
|
||||
// Menü dışına tıklandığında kapanma
|
||||
Effect::new(move |_| {
|
||||
if open.get() {
|
||||
let cb = Closure::wrap(Box::new(move |_: MouseEvent| {
|
||||
open.set(false);
|
||||
}) as Box<dyn Fn(MouseEvent)>);
|
||||
|
||||
let window = web_sys::window().unwrap();
|
||||
let document = window.document().unwrap();
|
||||
let _ = document.add_event_listener_with_callback(
|
||||
"click",
|
||||
cb.as_ref().unchecked_ref(),
|
||||
);
|
||||
|
||||
// Cleanup: tek sefer dinleyici — click yakalandığında otomatik kapanıp listener kalıyor
|
||||
// ama open=false olduğunda effect tekrar çalışmaz, böylece sorun yok.
|
||||
cb.forget();
|
||||
}
|
||||
});
|
||||
|
||||
let menu_action = move |action: &'static str| {
|
||||
open.set(false);
|
||||
on_action.get_value().run((action.to_string(), hash.get_value()));
|
||||
on_action.run((action.to_string(), hash.get_value()));
|
||||
};
|
||||
|
||||
view! {
|
||||
<div
|
||||
class="w-full"
|
||||
on:contextmenu=on_contextmenu
|
||||
>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger>
|
||||
{children()}
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
|
||||
<Show when=move || open.get()>
|
||||
{
|
||||
let (x, y) = position.get();
|
||||
// Menü yaklaşık boyutları
|
||||
let menu_width = 200;
|
||||
let menu_height = 220;
|
||||
let window = web_sys::window().unwrap();
|
||||
let vw = window.inner_width().unwrap().as_f64().unwrap() as i32;
|
||||
let vh = window.inner_height().unwrap().as_f64().unwrap() as i32;
|
||||
// Sağa taşarsa sola aç, alta taşarsa yukarı aç
|
||||
let final_x = if x + menu_width > vw { x - menu_width } else { x };
|
||||
let final_y = if y + menu_height > vh { y - menu_height } else { y };
|
||||
let final_x = final_x.max(0);
|
||||
let final_y = final_y.max(0);
|
||||
view! {
|
||||
<div
|
||||
class="fixed inset-0 z-[99]"
|
||||
on:click=move |e: MouseEvent| {
|
||||
e.stop_propagation();
|
||||
open.set(false);
|
||||
}
|
||||
on:contextmenu=move |e: MouseEvent| {
|
||||
e.prevent_default();
|
||||
e.stop_propagation();
|
||||
open.set(false);
|
||||
}
|
||||
/>
|
||||
<div
|
||||
class="fixed z-[100] min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
|
||||
style=format!("left: {}px; top: {}px;", final_x, final_y)
|
||||
on:click=move |e: MouseEvent| e.stop_propagation()
|
||||
>
|
||||
// Start
|
||||
<div
|
||||
class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
on:click=move |_| menu_action("start")
|
||||
>
|
||||
<ContextMenuContent>
|
||||
<ContextMenuAction on:click=move |_| menu_action("start")>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
|
||||
</svg>
|
||||
"Start"
|
||||
</div>
|
||||
</ContextMenuAction>
|
||||
|
||||
// Stop
|
||||
<div
|
||||
class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
on:click=move |_| menu_action("stop")
|
||||
>
|
||||
<ContextMenuAction on:click=move |_| menu_action("stop")>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
|
||||
</svg>
|
||||
"Stop"
|
||||
</div>
|
||||
</ContextMenuAction>
|
||||
|
||||
// Recheck
|
||||
<div
|
||||
class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
on:click=move |_| menu_action("recheck")
|
||||
>
|
||||
<ContextMenuAction on:click=move |_| menu_action("recheck")>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||
</svg>
|
||||
"Recheck"
|
||||
</div>
|
||||
</ContextMenuAction>
|
||||
|
||||
// Separator
|
||||
<div class="-mx-1 my-1 h-px bg-border" />
|
||||
|
||||
// Remove
|
||||
<div
|
||||
class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors text-destructive hover:bg-destructive hover:text-destructive-foreground"
|
||||
<ContextMenuAction
|
||||
class="text-destructive hover:bg-destructive hover:text-destructive-foreground"
|
||||
on:click=move |_| menu_action("delete")
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.164h-2.34c-1.18 0-2.09.984-2.09 2.164v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
"Remove"
|
||||
</div>
|
||||
</ContextMenuAction>
|
||||
|
||||
// Remove with Data
|
||||
<div
|
||||
class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors text-destructive hover:bg-destructive hover:text-destructive-foreground"
|
||||
<ContextMenuAction
|
||||
class="text-destructive hover:bg-destructive hover:text-destructive-foreground"
|
||||
on:click=move |_| menu_action("delete_with_data")
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25-2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
|
||||
</svg>
|
||||
"Remove with Data"
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</Show>
|
||||
</ContextMenuAction>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
}
|
||||
}
|
||||
1
frontend/src/components/hooks/mod.rs
Normal file
1
frontend/src/components/hooks/mod.rs
Normal file
@@ -0,0 +1 @@
|
||||
pub mod use_random;
|
||||
31
frontend/src/components/hooks/use_random.rs
Normal file
31
frontend/src/components/hooks/use_random.rs
Normal file
@@ -0,0 +1,31 @@
|
||||
use std::collections::hash_map::DefaultHasher;
|
||||
use std::hash::{Hash, Hasher};
|
||||
use std::sync::atomic::{AtomicUsize, Ordering};
|
||||
|
||||
const PREFIX: &str = "rust_ui"; // Must NOT contain "/" or "-"
|
||||
|
||||
pub fn use_random_id() -> String {
|
||||
format!("_{PREFIX}_{}", generate_hash())
|
||||
}
|
||||
|
||||
pub fn use_random_id_for(element: &str) -> String {
|
||||
format!("{}_{PREFIX}_{}", element, generate_hash())
|
||||
}
|
||||
|
||||
pub fn use_random_transition_name() -> String {
|
||||
let random_id = use_random_id();
|
||||
format!("view-transition-name: {random_id}")
|
||||
}
|
||||
|
||||
/* ========================================================== */
|
||||
/* ✨ FUNCTIONS ✨ */
|
||||
/* ========================================================== */
|
||||
|
||||
static COUNTER: AtomicUsize = AtomicUsize::new(1);
|
||||
|
||||
fn generate_hash() -> u64 {
|
||||
let mut hasher = DefaultHasher::new();
|
||||
let counter = COUNTER.fetch_add(1, Ordering::SeqCst);
|
||||
counter.hash(&mut hasher);
|
||||
hasher.finish()
|
||||
}
|
||||
@@ -1,8 +1,5 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos::task::spawn_local;
|
||||
use leptos_shadcn_button::{Button, ButtonVariant, ButtonSize};
|
||||
use leptos_shadcn_avatar::{Avatar, AvatarFallback};
|
||||
use leptos_shadcn_separator::Separator;
|
||||
|
||||
use leptos_use::storage::use_local_storage;
|
||||
use ::codee::string::FromToStringCodec;
|
||||
@@ -84,7 +81,6 @@ pub fn Sidebar() -> impl IntoView {
|
||||
let theme = current_theme.get().to_lowercase();
|
||||
if let Some(doc) = document().document_element() {
|
||||
let _ = doc.set_attribute("data-theme", &theme);
|
||||
// Also set class for Shadcn dark mode support
|
||||
if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" || theme == "sunset" || theme == "cyberpunk" || theme == "nord" || theme == "business" || theme == "night" || theme == "black" || theme == "luxury" || theme == "coffee" || theme == "forest" || theme == "halloween" || theme == "synthwave" {
|
||||
let _ = doc.class_list().add_1("dark");
|
||||
} else {
|
||||
@@ -93,8 +89,6 @@ pub fn Sidebar() -> impl IntoView {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
let toggle_theme = move |_| {
|
||||
let new_theme = if current_theme.get() == "dark" { "light" } else { "dark" };
|
||||
set_current_theme.set(new_theme.to_string());
|
||||
@@ -110,110 +104,70 @@ pub fn Sidebar() -> impl IntoView {
|
||||
<div class="space-y-1">
|
||||
<h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold text-muted-foreground">"Filters"</h4>
|
||||
|
||||
<Button
|
||||
variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::All) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
|
||||
size=ButtonSize::Sm
|
||||
class="w-full justify-start gap-2"
|
||||
on_click=Callback::new(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-4 h-4">
|
||||
<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="ml-auto text-xs font-mono opacity-70">{total_count}</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::Downloading) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
|
||||
size=ButtonSize::Sm
|
||||
class="w-full justify-start gap-2"
|
||||
on_click=Callback::new(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-4 h-4">
|
||||
<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="ml-auto text-xs font-mono opacity-70">{downloading_count}</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::Seeding) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
|
||||
size=ButtonSize::Sm
|
||||
class="w-full justify-start gap-2"
|
||||
on_click=Callback::new(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-4 h-4">
|
||||
<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="ml-auto text-xs font-mono opacity-70">{seeding_count}</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::Completed) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
|
||||
size=ButtonSize::Sm
|
||||
class="w-full justify-start gap-2"
|
||||
on_click=Callback::new(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-4 h-4">
|
||||
<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="ml-auto text-xs font-mono opacity-70">{completed_count}</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::Paused) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
|
||||
size=ButtonSize::Sm
|
||||
class="w-full justify-start gap-2"
|
||||
on_click=Callback::new(move |()| set_filter(crate::store::FilterStatus::Paused))
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
|
||||
</svg>
|
||||
"Paused"
|
||||
<span class="ml-auto text-xs font-mono opacity-70">{paused_count}</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::Inactive) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
|
||||
size=ButtonSize::Sm
|
||||
class="w-full justify-start gap-2"
|
||||
on_click=Callback::new(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-4 h-4">
|
||||
<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="ml-auto text-xs font-mono opacity-70">{inactive_count}</span>
|
||||
</Button>
|
||||
<SidebarButton
|
||||
active=Signal::derive(move || is_active(crate::store::FilterStatus::All))
|
||||
on_click=move |_| set_filter(crate::store::FilterStatus::All)
|
||||
icon="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
||||
label="All"
|
||||
count=Signal::derive(total_count)
|
||||
/>
|
||||
<SidebarButton
|
||||
active=Signal::derive(move || is_active(crate::store::FilterStatus::Downloading))
|
||||
on_click=move |_| set_filter(crate::store::FilterStatus::Downloading)
|
||||
icon="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"
|
||||
label="Downloading"
|
||||
count=Signal::derive(downloading_count)
|
||||
/>
|
||||
<SidebarButton
|
||||
active=Signal::derive(move || is_active(crate::store::FilterStatus::Seeding))
|
||||
on_click=move |_| set_filter(crate::store::FilterStatus::Seeding)
|
||||
icon="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"
|
||||
label="Seeding"
|
||||
count=Signal::derive(seeding_count)
|
||||
/>
|
||||
<SidebarButton
|
||||
active=Signal::derive(move || is_active(crate::store::FilterStatus::Completed))
|
||||
on_click=move |_| set_filter(crate::store::FilterStatus::Completed)
|
||||
icon="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
label="Completed"
|
||||
count=Signal::derive(completed_count)
|
||||
/>
|
||||
<SidebarButton
|
||||
active=Signal::derive(move || is_active(crate::store::FilterStatus::Paused))
|
||||
on_click=move |_| set_filter(crate::store::FilterStatus::Paused)
|
||||
icon="M15.75 5.25v13.5m-7.5-13.5v13.5"
|
||||
label="Paused"
|
||||
count=Signal::derive(paused_count)
|
||||
/>
|
||||
<SidebarButton
|
||||
active=Signal::derive(move || is_active(crate::store::FilterStatus::Inactive))
|
||||
on_click=move |_| set_filter(crate::store::FilterStatus::Inactive)
|
||||
icon="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"
|
||||
label="Inactive"
|
||||
count=Signal::derive(inactive_count)
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
// Separator
|
||||
<div class="border-t border-border" />
|
||||
|
||||
<div class="p-4 bg-card" style="padding-bottom: calc(1rem + env(safe-area-inset-bottom));">
|
||||
<div class="flex items-center gap-3">
|
||||
<Avatar class="h-8 w-8">
|
||||
<AvatarFallback class="bg-primary text-primary-foreground text-xs font-medium">
|
||||
// Avatar
|
||||
<div class="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium shrink-0">
|
||||
{first_letter}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div class="font-medium text-sm truncate text-foreground">{username}</div>
|
||||
<div class="text-[10px] text-muted-foreground truncate">"Online"</div>
|
||||
</div>
|
||||
|
||||
// --- THEME BUTTON ---
|
||||
<Button
|
||||
variant=ButtonVariant::Ghost
|
||||
size=ButtonSize::Icon
|
||||
class="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||
on_click=Callback::new(toggle_theme)
|
||||
// Theme toggle button
|
||||
<button
|
||||
class="inline-flex items-center justify-center size-8 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground hover:text-foreground transition-colors"
|
||||
on:click=toggle_theme
|
||||
>
|
||||
// Sun icon for dark mode (to switch to light), Moon for light (to switch to dark)
|
||||
// Actually show current state or action? Usually action.
|
||||
// If dark, show Sun. If light, show Moon.
|
||||
<Show when=move || current_theme.get() == "dark" fallback=|| view! {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||
@@ -223,26 +177,51 @@ pub fn Sidebar() -> impl IntoView {
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
</Show>
|
||||
</Button>
|
||||
<Button
|
||||
variant=ButtonVariant::Ghost
|
||||
size=ButtonSize::Icon
|
||||
class="text-destructive h-8 w-8"
|
||||
on_click=Callback::new(move |()| {
|
||||
</button>
|
||||
// Logout button
|
||||
<button
|
||||
class="inline-flex items-center justify-center size-8 rounded-md hover:bg-accent text-destructive transition-colors"
|
||||
on:click=move |_| {
|
||||
spawn_local(async move {
|
||||
if shared::server_fns::auth::logout().await.is_ok() {
|
||||
let window = web_sys::window().expect("window should exist");
|
||||
let _ = window.location().set_href("/login");
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
|
||||
</svg>
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn SidebarButton(
|
||||
active: Signal<bool>,
|
||||
on_click: impl Fn(web_sys::MouseEvent) + 'static,
|
||||
#[prop(into)] icon: String,
|
||||
#[prop(into)] label: &'static str,
|
||||
count: Signal<usize>,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<button
|
||||
class=move || if active.get() {
|
||||
"inline-flex items-center justify-start gap-2 w-full h-8 rounded-md px-3 text-sm font-medium bg-secondary text-secondary-foreground transition-colors"
|
||||
} else {
|
||||
"inline-flex items-center justify-start gap-2 w-full h-8 rounded-md px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
}
|
||||
on:click=on_click
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d=icon.clone() />
|
||||
</svg>
|
||||
{label}
|
||||
<span class="ml-auto text-xs font-mono opacity-70">{count}</span>
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos_shadcn_input::Input;
|
||||
use leptos_shadcn_button::{Button, ButtonVariant, ButtonSize};
|
||||
use crate::components::torrent::add_torrent::AddTorrentDialog;
|
||||
|
||||
#[component]
|
||||
@@ -9,30 +7,36 @@ pub fn Toolbar() -> impl IntoView {
|
||||
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
|
||||
let is_mobile_menu_open = use_context::<RwSignal<bool>>().expect("mobile menu state not provided");
|
||||
|
||||
let search_value = RwSignal::new(String::new());
|
||||
|
||||
// Sync search_value to store
|
||||
Effect::new(move |_| {
|
||||
let val = search_value.get();
|
||||
store.search_query.set(val);
|
||||
});
|
||||
|
||||
view! {
|
||||
<div class="flex min-h-14 h-auto items-center border-b border-border bg-background px-4" style="padding-top: env(safe-area-inset-top);">
|
||||
// Sol kısım: Menü butonu + Add Torrent
|
||||
<div class="flex items-center gap-3">
|
||||
// Mobile Menu Trigger
|
||||
<Button
|
||||
variant=ButtonVariant::Ghost
|
||||
size=ButtonSize::Icon
|
||||
class="lg:hidden"
|
||||
on_click=Callback::new(move |()| is_mobile_menu_open.update(|v| *v = !*v))
|
||||
<button
|
||||
class="inline-flex items-center justify-center size-9 rounded-md hover:bg-accent hover:text-accent-foreground lg:hidden"
|
||||
on:click=move |_| is_mobile_menu_open.update(|v| *v = !*v)
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</Button>
|
||||
</button>
|
||||
|
||||
<Button
|
||||
class="gap-2 shadow"
|
||||
on_click=Callback::new(move |()| show_add_modal.1.set(true))
|
||||
<button
|
||||
class="inline-flex items-center justify-center gap-2 h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all active:scale-[0.98]"
|
||||
on:click=move |_| show_add_modal.1.set(true)
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 md:w-5 md:h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
<span class="hidden sm:inline">"Add Torrent"</span>
|
||||
<span class="sm:hidden">"Add"</span>
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
// Sağ kısım: Search kutusu
|
||||
@@ -42,12 +46,11 @@ pub fn Toolbar() -> impl IntoView {
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
||||
</svg>
|
||||
<Input
|
||||
input_type="search"
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search..."
|
||||
value=MaybeProp::derive(move || Some(store.search_query.get()))
|
||||
on_change=Callback::new(move |val: String| store.search_query.set(val))
|
||||
class="pl-8 h-9"
|
||||
class="file:text-foreground placeholder:text-muted-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2 md:text-sm pl-8"
|
||||
bind:value=search_value
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,3 +2,5 @@ pub mod context_menu;
|
||||
pub mod layout;
|
||||
pub mod torrent;
|
||||
pub mod auth;
|
||||
// pub mod toast; (Removed)
|
||||
pub mod ui;
|
||||
|
||||
111
frontend/src/components/toast.rs
Normal file
111
frontend/src/components/toast.rs
Normal file
@@ -0,0 +1,111 @@
|
||||
use leptos::prelude::*;
|
||||
use std::collections::HashMap;
|
||||
use uuid::Uuid;
|
||||
use shared::NotificationLevel;
|
||||
|
||||
#[derive(Clone, Debug, PartialEq)]
|
||||
pub struct Toast {
|
||||
pub id: String,
|
||||
pub message: String,
|
||||
pub level: NotificationLevel,
|
||||
pub visible: RwSignal<bool>,
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy)]
|
||||
pub struct ToastContext {
|
||||
pub toasts: RwSignal<HashMap<String, Toast>>,
|
||||
}
|
||||
|
||||
impl ToastContext {
|
||||
pub fn add(&self, message: impl Into<String>, level: NotificationLevel) {
|
||||
let id = Uuid::new_v4().to_string();
|
||||
let message = message.into();
|
||||
let toast = Toast {
|
||||
id: id.clone(),
|
||||
message,
|
||||
level,
|
||||
visible: RwSignal::new(true),
|
||||
};
|
||||
|
||||
self.toasts.update(|m| {
|
||||
m.insert(id.clone(), toast);
|
||||
});
|
||||
|
||||
// Auto remove after 5 seconds
|
||||
let toasts = self.toasts;
|
||||
let id_clone = id.clone();
|
||||
leptos::task::spawn_local(async move {
|
||||
gloo_timers::future::TimeoutFuture::new(5000).await;
|
||||
toasts.update(|m| {
|
||||
if let Some(t) = m.get(&id_clone) {
|
||||
t.visible.set(false);
|
||||
}
|
||||
});
|
||||
// Wait for animation
|
||||
gloo_timers::future::TimeoutFuture::new(300).await;
|
||||
toasts.update(|m| {
|
||||
m.remove(&id_clone);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
pub fn provide_toast_context() {
|
||||
let toasts = RwSignal::new(HashMap::new());
|
||||
provide_context(ToastContext { toasts });
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Toaster() -> impl IntoView {
|
||||
let context = expect_context::<ToastContext>();
|
||||
|
||||
view! {
|
||||
<div class="fixed top-4 right-4 z-[100] flex flex-col gap-2 w-full max-w-sm pointer-events-none">
|
||||
{move || {
|
||||
context.toasts.get().into_values().map(|toast| {
|
||||
view! { <ToastItem toast=toast /> }
|
||||
}).collect::<Vec<_>>()
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn ToastItem(toast: Toast) -> impl IntoView {
|
||||
let (visible, set_visible) = (toast.visible, toast.visible.write_only());
|
||||
|
||||
let base_classes = "pointer-events-auto relative w-full rounded-lg border p-4 shadow-lg transition-all duration-300 ease-in-out";
|
||||
let color_classes = match toast.level {
|
||||
NotificationLevel::Success => "bg-green-50 text-green-900 border-green-200 dark:bg-green-900 dark:text-green-100 dark:border-green-800",
|
||||
NotificationLevel::Error => "bg-red-50 text-red-900 border-red-200 dark:bg-red-900 dark:text-red-100 dark:border-red-800",
|
||||
NotificationLevel::Warning => "bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-800",
|
||||
NotificationLevel::Info => "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:border-blue-800",
|
||||
};
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=move || format!("{} {} {}",
|
||||
base_classes,
|
||||
color_classes,
|
||||
if visible.get() { "opacity-100 translate-x-0" } else { "opacity-0 translate-x-full" }
|
||||
)
|
||||
role="alert"
|
||||
>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium">{toast.message.clone()}</p>
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex shrink-0 opacity-50 hover:opacity-100 focus:opacity-100 focus:outline-none"
|
||||
on:click=move |_| set_visible.set(false)
|
||||
>
|
||||
<span class="sr-only">"Kapat"</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
|
||||
<line x1="18" x2="6" y1="6" y2="18"></line>
|
||||
<line x1="6" x2="18" y1="6" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,6 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos::task::spawn_local;
|
||||
use leptos_shadcn_input::Input;
|
||||
use leptos_shadcn_button::{Button, ButtonVariant};
|
||||
use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
|
||||
use crate::components::ui::input::{Input, InputType};
|
||||
use crate::store::TorrentStore;
|
||||
use crate::api;
|
||||
|
||||
@@ -12,13 +10,13 @@ pub fn AddTorrentDialog(
|
||||
) -> impl IntoView {
|
||||
let _store = use_context::<TorrentStore>().expect("TorrentStore not provided");
|
||||
|
||||
let uri = signal(String::new());
|
||||
let uri = RwSignal::new(String::new());
|
||||
let is_loading = signal(false);
|
||||
let error_msg = signal(Option::<String>::None);
|
||||
|
||||
let handle_submit = move |ev: web_sys::SubmitEvent| {
|
||||
ev.prevent_default();
|
||||
let uri_val = uri.0.get();
|
||||
let uri_val = uri.get();
|
||||
|
||||
if uri_val.is_empty() {
|
||||
error_msg.1.set(Some("Please enter a Magnet URI or URL".to_string()));
|
||||
@@ -69,29 +67,31 @@ pub fn AddTorrentDialog(
|
||||
|
||||
<form on:submit=handle_submit class="space-y-4">
|
||||
<Input
|
||||
input_type="text"
|
||||
r#type=InputType::Text
|
||||
placeholder="magnet:?xt=urn:btih:..."
|
||||
value=MaybeProp::derive(move || Some(uri.0.get()))
|
||||
on_change=Callback::new(move |val: String| uri.1.set(val))
|
||||
disabled=Signal::derive(move || is_loading.0.get())
|
||||
bind_value=uri
|
||||
disabled=is_loading.0.get()
|
||||
/>
|
||||
|
||||
{move || error_msg.0.get().map(|msg| view! {
|
||||
<Alert variant=AlertVariant::Destructive>
|
||||
<AlertDescription>{msg}</AlertDescription>
|
||||
</Alert>
|
||||
<div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{msg}
|
||||
</div>
|
||||
})}
|
||||
|
||||
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
|
||||
<Button
|
||||
variant=ButtonVariant::Ghost
|
||||
on_click=Callback::new(move |()| {
|
||||
on_close.run(());
|
||||
})
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center h-9 px-4 py-2 rounded-md text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
on:click=move |_| on_close.run(())
|
||||
>
|
||||
"Cancel"
|
||||
</Button>
|
||||
<Button disabled=Signal::derive(move || is_loading.0.get())>
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex items-center justify-center h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
|
||||
disabled=move || is_loading.0.get()
|
||||
>
|
||||
{move || if is_loading.0.get() {
|
||||
leptos::either::Either::Left(view! {
|
||||
<span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
|
||||
@@ -100,7 +100,7 @@ pub fn AddTorrentDialog(
|
||||
} else {
|
||||
leptos::either::Either::Right(view! { "Add" })
|
||||
}}
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -1,156 +0,0 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos_shadcn_tabs::{Tabs, TabsList, TabsTrigger, TabsContent};
|
||||
|
||||
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))
|
||||
}
|
||||
|
||||
fn format_date(timestamp: i64) -> String {
|
||||
if timestamp <= 0 { return "N/A".to_string(); }
|
||||
let dt = chrono::DateTime::from_timestamp(timestamp, 0);
|
||||
match dt { Some(dt) => dt.format("%d/%m/%Y %H:%M").to_string(), None => "N/A".to_string() }
|
||||
}
|
||||
|
||||
fn format_duration(seconds: i64) -> String {
|
||||
if seconds <= 0 { return "∞".to_string(); }
|
||||
let days = seconds / 86400;
|
||||
let hours = (seconds % 86400) / 3600;
|
||||
let minutes = (seconds % 3600) / 60;
|
||||
let secs = seconds % 60;
|
||||
if days > 0 { format!("{}d {}h", days, hours) }
|
||||
else if hours > 0 { format!("{}h {}m", hours, minutes) }
|
||||
else if minutes > 0 { format!("{}m {}s", minutes, secs) }
|
||||
else { format!("{}s", secs) }
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn TorrentDetail() -> impl IntoView {
|
||||
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
|
||||
|
||||
let torrent = Memo::new(move |_| {
|
||||
let hash = store.selected_torrent.get()?;
|
||||
store.torrents.with(|map| map.get(&hash).cloned())
|
||||
});
|
||||
|
||||
let close = move |_| {
|
||||
store.selected_torrent.set(None);
|
||||
};
|
||||
|
||||
view! {
|
||||
<Show when=move || torrent.get().is_some()>
|
||||
{move || {
|
||||
let t = torrent.get().unwrap();
|
||||
let name = t.name.clone();
|
||||
let status_color = match t.status {
|
||||
shared::TorrentStatus::Seeding => "text-green-500",
|
||||
shared::TorrentStatus::Downloading => "text-blue-500",
|
||||
shared::TorrentStatus::Paused => "text-yellow-500",
|
||||
shared::TorrentStatus::Error => "text-red-500",
|
||||
_ => "text-muted-foreground",
|
||||
};
|
||||
let status_text = format!("{:?}", t.status);
|
||||
|
||||
view! {
|
||||
<div class="border-t border-border bg-card flex flex-col" style="height: 280px; min-height: 200px;">
|
||||
// Header
|
||||
<div class="flex items-center justify-between px-4 py-2 border-b border-border bg-muted/30">
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
<h3 class="text-sm font-semibold truncate">{name}</h3>
|
||||
<span class={format!("text-xs font-medium {}", status_color)}>{status_text}</span>
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-md text-sm font-medium hover:bg-accent hover:text-accent-foreground h-7 w-7 text-muted-foreground shrink-0"
|
||||
on:click=close
|
||||
title="Close"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
// Tabs
|
||||
<Tabs default_value="general" class="flex-1 flex flex-col overflow-hidden">
|
||||
<div class="px-4 pt-2">
|
||||
<TabsList class="w-full">
|
||||
<TabsTrigger value="general">"General"</TabsTrigger>
|
||||
<TabsTrigger value="transfer">"Transfer"</TabsTrigger>
|
||||
<TabsTrigger value="files">"Files"</TabsTrigger>
|
||||
<TabsTrigger value="peers">"Peers"</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
|
||||
<TabsContent value="general" class="flex-1 overflow-y-auto px-4 pb-3">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-2 text-sm">
|
||||
<DetailItem label="Size" value=format_bytes(t.size) />
|
||||
<DetailItem label="Downloaded" value=format_bytes(t.completed) />
|
||||
<DetailItem label="Progress" value=format!("{:.1}%", t.percent_complete) />
|
||||
<DetailItem label="Added" value=format_date(t.added_date) />
|
||||
<DetailItem label="Hash" value={
|
||||
let hash = store.selected_torrent.get().unwrap_or_default();
|
||||
format!("{}…", &hash[..std::cmp::min(16, hash.len())])
|
||||
} />
|
||||
<DetailItem label="Label" value=t.label.clone().unwrap_or_else(|| "—".to_string()) />
|
||||
<DetailItem label="Error" value={
|
||||
if t.error_message.is_empty() { "None".to_string() } else { t.error_message.clone() }
|
||||
} />
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="transfer" class="flex-1 overflow-y-auto px-4 pb-3">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-2 text-sm">
|
||||
<DetailItem label="Download Speed" value=format_speed(t.down_rate) />
|
||||
<DetailItem label="Upload Speed" value=format_speed(t.up_rate) />
|
||||
<DetailItem label="ETA" value=format_duration(t.eta) />
|
||||
<DetailItem label="Downloaded" value=format_bytes(t.completed) />
|
||||
<DetailItem label="Total Size" value=format_bytes(t.size) />
|
||||
<DetailItem label="Remaining" value=format_bytes(t.size - t.completed) />
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="files" class="flex-1 overflow-y-auto px-4 pb-3">
|
||||
<div class="text-sm text-muted-foreground flex items-center gap-2 py-4">
|
||||
<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="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
|
||||
</svg>
|
||||
"File list will be available when file API is connected."
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="peers" class="flex-1 overflow-y-auto px-4 pb-3">
|
||||
<div class="text-sm text-muted-foreground flex items-center gap-2 py-4">
|
||||
<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 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
|
||||
</svg>
|
||||
"Peer list will be available when peer API is connected."
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
}
|
||||
}}
|
||||
</Show>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn DetailItem(
|
||||
#[prop(into)] label: String,
|
||||
#[prop(into)] value: String,
|
||||
) -> impl IntoView {
|
||||
let title = value.clone();
|
||||
view! {
|
||||
<div class="flex flex-col gap-0.5 py-1">
|
||||
<span class="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">{label}</span>
|
||||
<span class="text-foreground font-mono text-xs truncate" title=title>{value}</span>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,2 @@
|
||||
pub mod table;
|
||||
pub mod add_torrent;
|
||||
pub mod detail;
|
||||
|
||||
@@ -4,7 +4,7 @@ use crate::store::{get_action_messages, show_toast};
|
||||
use crate::api;
|
||||
use shared::NotificationLevel;
|
||||
use crate::components::context_menu::TorrentContextMenu;
|
||||
use leptos_shadcn_card::{Card, CardHeader, CardTitle, CardContent};
|
||||
use crate::components::ui::card::{Card, CardHeader, CardTitle, CardContent};
|
||||
|
||||
fn format_bytes(bytes: i64) -> String {
|
||||
const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
|
||||
|
||||
29
frontend/src/components/ui/button.rs
Normal file
29
frontend/src/components/ui/button.rs
Normal file
@@ -0,0 +1,29 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos_ui::variants;
|
||||
|
||||
variants! {
|
||||
Button {
|
||||
base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive w-fit hover:cursor-pointer active:scale-[0.98] active:opacity-100 touch-manipulation [-webkit-tap-highlight-color:transparent] select-none [-webkit-touch-callout:none]",
|
||||
variants: {
|
||||
variant: {
|
||||
Default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
Destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
Outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/5",
|
||||
Secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
Ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
Link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
Default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
Sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
Lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
Icon: "size-9",
|
||||
}
|
||||
},
|
||||
component: {
|
||||
element: button,
|
||||
support_href: true,
|
||||
support_aria_current: true
|
||||
}
|
||||
}
|
||||
}
|
||||
15
frontend/src/components/ui/card.rs
Normal file
15
frontend/src/components/ui/card.rs
Normal file
@@ -0,0 +1,15 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos_ui::clx;
|
||||
|
||||
mod components {
|
||||
use super::*;
|
||||
|
||||
clx! {Card, div, "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-6 shadow-sm"}
|
||||
clx! {CardHeader, div, "@container/card-header flex flex-col items-start gap-1.5 px-6 [.border-b]:pb-6"}
|
||||
clx! {CardTitle, h2, "leading-none font-semibold"}
|
||||
clx! {CardContent, div, "px-6"}
|
||||
clx! {CardDescription, p, "text-muted-foreground text-sm"}
|
||||
clx! {CardFooter, footer, "flex items-center px-6 [.border-t]:pt-6", "gap-2"}
|
||||
}
|
||||
|
||||
pub use components::*;
|
||||
366
frontend/src/components/ui/context_menu.rs
Normal file
366
frontend/src/components/ui/context_menu.rs
Normal file
@@ -0,0 +1,366 @@
|
||||
use icons::ChevronRight;
|
||||
use leptos::context::Provider;
|
||||
use leptos::prelude::*;
|
||||
use leptos_ui::clx;
|
||||
use tw_merge::*;
|
||||
use wasm_bindgen::JsCast;
|
||||
|
||||
use crate::components::hooks::use_random::use_random_id_for;
|
||||
|
||||
/// Programmatically close any open context menu.
|
||||
pub fn close_context_menu() {
|
||||
let Some(document) = window().document() else {
|
||||
return;
|
||||
};
|
||||
let Some(menu) = document.query_selector("[data-target='target__context'][data-state='open']").ok().flatten()
|
||||
else {
|
||||
return;
|
||||
};
|
||||
let _ = menu.set_attribute("data-state", "closed");
|
||||
if let Some(el) = menu.dyn_ref::<web_sys::HtmlElement>() {
|
||||
let _ = el.style().set_property("pointer-events", "none");
|
||||
}
|
||||
}
|
||||
|
||||
mod components {
|
||||
use super::*;
|
||||
clx! {ContextMenuLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
|
||||
clx! {ContextMenuGroup, ul, "group"}
|
||||
clx! {ContextMenuItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
|
||||
clx! {ContextMenuSubContent, ul, "context__menu_sub_content", "rounded-md border bg-card shadow-lg p-1 absolute z-[100] min-w-[160px] opacity-0 invisible translate-x-[-8px] transition-all duration-200 ease-out pointer-events-none"}
|
||||
clx! {ContextMenuLink, a, "w-full inline-flex gap-2 items-center"}
|
||||
}
|
||||
|
||||
pub use components::*;
|
||||
|
||||
#[component]
|
||||
pub fn ContextMenuAction(
|
||||
children: Children,
|
||||
#[prop(optional, into)] class: String,
|
||||
#[prop(optional, into)] aria_selected: Option<Signal<bool>>,
|
||||
#[prop(optional, into)] href: Option<String>,
|
||||
) -> impl IntoView {
|
||||
let _ctx = expect_context::<ContextMenuContext>();
|
||||
|
||||
let class = tw_merge!(
|
||||
"inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4",
|
||||
class
|
||||
);
|
||||
|
||||
let aria_selected_attr = move || aria_selected.map(|s| s.get()).unwrap_or(false).to_string();
|
||||
|
||||
if let Some(href) = href {
|
||||
view! {
|
||||
<a
|
||||
data-name="ContextMenuAction"
|
||||
class=class
|
||||
href=href
|
||||
aria-selected=aria_selected_attr
|
||||
data-context-close="true"
|
||||
>
|
||||
{children()}
|
||||
</a>
|
||||
}
|
||||
.into_any()
|
||||
} else {
|
||||
view! {
|
||||
<button
|
||||
type="button"
|
||||
data-name="ContextMenuAction"
|
||||
class=class
|
||||
data-context-close="true"
|
||||
aria-selected=aria_selected_attr
|
||||
>
|
||||
{children()}
|
||||
</button>
|
||||
}
|
||||
.into_any()
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Clone)]
|
||||
struct ContextMenuContext {
|
||||
target_id: String,
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn ContextMenu(children: Children) -> impl IntoView {
|
||||
let context_target_id = use_random_id_for("context");
|
||||
|
||||
let ctx = ContextMenuContext { target_id: context_target_id.clone() };
|
||||
|
||||
view! {
|
||||
<Provider value=ctx>
|
||||
<style>
|
||||
"
|
||||
/* Submenu Styles */
|
||||
.context__menu_sub_content {
|
||||
position: absolute;
|
||||
inset-inline-start: calc(100% + 8px);
|
||||
inset-block-start: -4px;
|
||||
z-index: 100;
|
||||
min-inline-size: 160px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateX(-8px);
|
||||
transition: all 0.2s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.context__menu_sub_trigger:hover .context__menu_sub_content {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
"
|
||||
</style>
|
||||
|
||||
<div data-name="ContextMenu" class="contents">
|
||||
{children()}
|
||||
</div>
|
||||
</Provider>
|
||||
}
|
||||
}
|
||||
|
||||
/// Wrapper that triggers the context menu on right-click.
|
||||
/// The `on_open` callback is triggered when the context menu opens (right-click).
|
||||
#[component]
|
||||
pub fn ContextMenuTrigger(
|
||||
children: Children,
|
||||
#[prop(optional, into)] class: String,
|
||||
#[prop(optional)] on_open: Option<Callback<()>>,
|
||||
) -> impl IntoView {
|
||||
let ctx = expect_context::<ContextMenuContext>();
|
||||
let trigger_class = tw_merge!("contents", class);
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=trigger_class
|
||||
data-name="ContextMenuTrigger"
|
||||
data-context-trigger=ctx.target_id
|
||||
on:contextmenu=move |_| {
|
||||
if let Some(cb) = on_open {
|
||||
cb.run(());
|
||||
}
|
||||
}
|
||||
>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
/// Content of the context menu that appears on right-click.
|
||||
/// The `on_close` callback is triggered when the menu closes (click outside, ESC key, or action click).
|
||||
#[component]
|
||||
pub fn ContextMenuContent(
|
||||
children: Children,
|
||||
#[prop(optional, into)] class: String,
|
||||
#[prop(optional)] on_close: Option<Callback<()>>,
|
||||
) -> impl IntoView {
|
||||
let ctx = expect_context::<ContextMenuContext>();
|
||||
|
||||
let base_classes = "z-50 p-1 rounded-md border bg-card shadow-md w-[200px] fixed transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
|
||||
|
||||
let class = tw_merge!(base_classes, class);
|
||||
|
||||
let target_id_for_script = ctx.target_id.clone();
|
||||
|
||||
view! {
|
||||
<script src="/hooks/lock_scroll.js"></script>
|
||||
|
||||
<div
|
||||
data-name="ContextMenuContent"
|
||||
class=class
|
||||
// Listen for custom 'contextmenuclose' event dispatched by JS when menu closes
|
||||
on:contextmenuclose=move |_: web_sys::CustomEvent| {
|
||||
if let Some(cb) = on_close {
|
||||
cb.run(());
|
||||
}
|
||||
}
|
||||
id=ctx.target_id
|
||||
data-target="target__context"
|
||||
data-state="closed"
|
||||
style="pointer-events: none;"
|
||||
>
|
||||
{children()}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
{format!(
|
||||
r#"
|
||||
(function() {{
|
||||
const setupContextMenu = () => {{
|
||||
const menu = document.querySelector('#{}');
|
||||
const trigger = document.querySelector('[data-context-trigger="{}"]');
|
||||
|
||||
if (!menu || !trigger) {{
|
||||
setTimeout(setupContextMenu, 50);
|
||||
return;
|
||||
}}
|
||||
|
||||
if (menu.hasAttribute('data-initialized')) {{
|
||||
return;
|
||||
}}
|
||||
menu.setAttribute('data-initialized', 'true');
|
||||
|
||||
let isOpen = false;
|
||||
|
||||
const updatePosition = (x, y) => {{
|
||||
const menuRect = menu.getBoundingClientRect();
|
||||
const viewportHeight = window.innerHeight;
|
||||
const viewportWidth = window.innerWidth;
|
||||
|
||||
// Calculate position, ensuring menu stays within viewport
|
||||
let left = x;
|
||||
let top = y;
|
||||
|
||||
// Adjust if menu would go off right edge
|
||||
if (x + menuRect.width > viewportWidth) {{
|
||||
left = x - menuRect.width;
|
||||
}}
|
||||
|
||||
// Adjust if menu would go off bottom edge
|
||||
if (y + menuRect.height > viewportHeight) {{
|
||||
top = y - menuRect.height;
|
||||
}}
|
||||
|
||||
menu.style.left = `${{left}}px`;
|
||||
menu.style.top = `${{top}}px`;
|
||||
menu.style.transformOrigin = 'top left';
|
||||
}};
|
||||
|
||||
const openMenu = (x, y) => {{
|
||||
isOpen = true;
|
||||
|
||||
// Close any other open context menus
|
||||
const allMenus = document.querySelectorAll('[data-target="target__context"]');
|
||||
allMenus.forEach(m => {{
|
||||
if (m !== menu && m.getAttribute('data-state') === 'open') {{
|
||||
m.setAttribute('data-state', 'closed');
|
||||
m.style.pointerEvents = 'none';
|
||||
}}
|
||||
}});
|
||||
|
||||
menu.setAttribute('data-state', 'open');
|
||||
menu.style.visibility = 'hidden';
|
||||
menu.style.pointerEvents = 'auto';
|
||||
|
||||
// Force reflow
|
||||
menu.offsetHeight;
|
||||
|
||||
updatePosition(x, y);
|
||||
menu.style.visibility = 'visible';
|
||||
|
||||
// Lock scroll
|
||||
if (window.ScrollLock) {{
|
||||
window.ScrollLock.lock();
|
||||
}}
|
||||
|
||||
setTimeout(() => {{
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
document.addEventListener('contextmenu', handleContextOutside);
|
||||
}}, 0);
|
||||
}};
|
||||
|
||||
const closeMenu = () => {{
|
||||
isOpen = false;
|
||||
menu.setAttribute('data-state', 'closed');
|
||||
menu.style.pointerEvents = 'none';
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
document.removeEventListener('contextmenu', handleContextOutside);
|
||||
|
||||
// Dispatch custom event for Leptos to listen to
|
||||
menu.dispatchEvent(new CustomEvent('contextmenuclose', {{ bubbles: false }}));
|
||||
|
||||
if (window.ScrollLock) {{
|
||||
window.ScrollLock.unlock(200);
|
||||
}}
|
||||
}};
|
||||
|
||||
const handleClickOutside = (e) => {{
|
||||
if (!menu.contains(e.target)) {{
|
||||
closeMenu();
|
||||
}}
|
||||
}};
|
||||
|
||||
const handleContextOutside = (e) => {{
|
||||
if (!trigger.contains(e.target)) {{
|
||||
closeMenu();
|
||||
}}
|
||||
}};
|
||||
|
||||
// Right-click on trigger
|
||||
trigger.addEventListener('contextmenu', (e) => {{
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (isOpen) {{
|
||||
closeMenu();
|
||||
}}
|
||||
openMenu(e.clientX, e.clientY);
|
||||
}});
|
||||
|
||||
// Close when action is clicked
|
||||
const actions = menu.querySelectorAll('[data-context-close]');
|
||||
actions.forEach(action => {{
|
||||
action.addEventListener('click', () => {{
|
||||
closeMenu();
|
||||
}});
|
||||
}});
|
||||
|
||||
// Handle ESC key
|
||||
document.addEventListener('keydown', (e) => {{
|
||||
if (e.key === 'Escape' && isOpen) {{
|
||||
e.preventDefault();
|
||||
closeMenu();
|
||||
}}
|
||||
}});
|
||||
}};
|
||||
|
||||
if (document.readyState === 'loading') {{
|
||||
document.addEventListener('DOMContentLoaded', setupContextMenu);
|
||||
}} else {{
|
||||
setupContextMenu();
|
||||
}}
|
||||
}})();
|
||||
"#,
|
||||
target_id_for_script,
|
||||
target_id_for_script,
|
||||
)}
|
||||
</script>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn ContextMenuSub(children: Children) -> impl IntoView {
|
||||
clx! {ContextMenuSubRoot, li, "context__menu_sub_trigger", " relative inline-flex relative gap-2 items-center py-1.5 px-2 w-full text-sm no-underline rounded-sm transition-colors duration-200 cursor-pointer text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground"}
|
||||
|
||||
view! { <ContextMenuSubRoot>{children()}</ContextMenuSubRoot> }
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn ContextMenuSubTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
|
||||
let class = tw_merge!("flex items-center justify-between w-full", class);
|
||||
|
||||
view! {
|
||||
<span data-name="ContextMenuSubTrigger" class=class>
|
||||
<span class="flex gap-2 items-center">{children()}</span>
|
||||
<ChevronRight class="opacity-70 size-4" />
|
||||
</span>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn ContextMenuSubItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
|
||||
let class = tw_merge!(
|
||||
"inline-flex gap-2 items-center w-full rounded-sm px-3 py-2 text-sm transition-all duration-150 ease text-popover-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer hover:translate-x-[2px]",
|
||||
class
|
||||
);
|
||||
|
||||
view! {
|
||||
<li data-name="ContextMenuSubItem" class=class data-context-close="true">
|
||||
{children()}
|
||||
</li>
|
||||
}
|
||||
}
|
||||
99
frontend/src/components/ui/input.rs
Normal file
99
frontend/src/components/ui/input.rs
Normal file
@@ -0,0 +1,99 @@
|
||||
use leptos::html;
|
||||
use leptos::prelude::*;
|
||||
use strum::AsRefStr;
|
||||
use tw_merge::tw_merge;
|
||||
|
||||
#[derive(Default, Clone, Copy, PartialEq, Eq, AsRefStr)]
|
||||
#[strum(serialize_all = "lowercase")]
|
||||
#[allow(dead_code)]
|
||||
pub enum InputType {
|
||||
#[default]
|
||||
Text,
|
||||
Email,
|
||||
Password,
|
||||
Number,
|
||||
Tel,
|
||||
Url,
|
||||
Search,
|
||||
Date,
|
||||
Time,
|
||||
#[strum(serialize = "datetime-local")]
|
||||
DatetimeLocal,
|
||||
Month,
|
||||
Week,
|
||||
Color,
|
||||
File,
|
||||
Hidden,
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Input(
|
||||
#[prop(into, optional)] class: String,
|
||||
#[prop(default = InputType::default())] r#type: InputType,
|
||||
#[prop(into, optional)] placeholder: Option<String>,
|
||||
#[prop(into, optional)] name: Option<String>,
|
||||
#[prop(into, optional)] id: Option<String>,
|
||||
#[prop(into, optional)] title: Option<String>,
|
||||
#[prop(optional)] disabled: bool,
|
||||
#[prop(optional)] readonly: bool,
|
||||
#[prop(optional)] required: bool,
|
||||
#[prop(optional)] autofocus: bool,
|
||||
#[prop(into, optional)] min: Option<String>,
|
||||
#[prop(into, optional)] max: Option<String>,
|
||||
#[prop(into, optional)] step: Option<String>,
|
||||
#[prop(into, optional)] bind_value: Option<RwSignal<String>>,
|
||||
#[prop(optional)] node_ref: NodeRef<html::Input>,
|
||||
) -> impl IntoView {
|
||||
let merged_class = tw_merge!(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50",
|
||||
"focus-visible:ring-2",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
"read-only:bg-muted",
|
||||
class
|
||||
);
|
||||
|
||||
let type_str = r#type.as_ref();
|
||||
|
||||
match bind_value {
|
||||
Some(signal) => view! {
|
||||
<input
|
||||
data-name="Input"
|
||||
type=type_str
|
||||
class=merged_class
|
||||
placeholder=placeholder
|
||||
name=name
|
||||
id=id
|
||||
title=title
|
||||
disabled=disabled
|
||||
readonly=readonly
|
||||
required=required
|
||||
autofocus=autofocus
|
||||
min=min
|
||||
max=max
|
||||
step=step
|
||||
bind:value=signal
|
||||
node_ref=node_ref
|
||||
/>
|
||||
}.into_any(),
|
||||
None => view! {
|
||||
<input
|
||||
data-name="Input"
|
||||
type=type_str
|
||||
class=merged_class
|
||||
placeholder=placeholder
|
||||
name=name
|
||||
id=id
|
||||
title=title
|
||||
disabled=disabled
|
||||
readonly=readonly
|
||||
required=required
|
||||
autofocus=autofocus
|
||||
min=min
|
||||
max=max
|
||||
step=step
|
||||
node_ref=node_ref
|
||||
/>
|
||||
}.into_any(),
|
||||
}
|
||||
}
|
||||
5
frontend/src/components/ui/mod.rs
Normal file
5
frontend/src/components/ui/mod.rs
Normal file
@@ -0,0 +1,5 @@
|
||||
pub mod button;
|
||||
pub mod card;
|
||||
pub mod input;
|
||||
pub mod toast;
|
||||
pub mod context_menu;
|
||||
247
frontend/src/components/ui/toast.rs
Normal file
247
frontend/src/components/ui/toast.rs
Normal file
@@ -0,0 +1,247 @@
|
||||
use leptos::prelude::*;
|
||||
use tw_merge::*;
|
||||
|
||||
#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
|
||||
#[allow(dead_code)]
|
||||
pub enum ToastType {
|
||||
#[default]
|
||||
Default,
|
||||
Success,
|
||||
Error,
|
||||
Warning,
|
||||
Info,
|
||||
Loading,
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
|
||||
#[allow(dead_code)]
|
||||
pub enum SonnerPosition {
|
||||
TopLeft,
|
||||
TopCenter,
|
||||
TopRight,
|
||||
#[default]
|
||||
BottomRight,
|
||||
BottomCenter,
|
||||
BottomLeft,
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
|
||||
pub enum SonnerDirection {
|
||||
TopDown,
|
||||
#[default]
|
||||
BottomUp,
|
||||
}
|
||||
|
||||
#[derive(Clone, Debug, PartialEq)]
|
||||
pub struct ToastData {
|
||||
pub id: u64,
|
||||
pub title: String,
|
||||
pub description: Option<String>,
|
||||
pub variant: ToastType,
|
||||
pub duration: u64, // ms
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy)]
|
||||
pub struct ToasterStore {
|
||||
pub toasts: RwSignal<Vec<ToastData>>,
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn SonnerTrigger(
|
||||
#[prop(into, optional)] class: String,
|
||||
#[prop(optional, default = ToastType::default())] variant: ToastType,
|
||||
#[prop(into)] title: String,
|
||||
description: Option<String>,
|
||||
#[prop(into, optional)] position: String,
|
||||
on_dismiss: Option<Callback<()>>,
|
||||
) -> impl IntoView {
|
||||
let variant_classes = match variant {
|
||||
ToastType::Default => "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
ToastType::Success => "bg-green-500 text-white hover:bg-green-600",
|
||||
ToastType::Error => "bg-red-500 text-white shadow-xs hover:bg-red-600",
|
||||
ToastType::Warning => "bg-yellow-500 text-white hover:bg-yellow-600",
|
||||
ToastType::Info => "bg-blue-500 text-white shadow-xs hover:bg-blue-600",
|
||||
ToastType::Loading => "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
};
|
||||
|
||||
let animation_direction = if position.contains("Top") {
|
||||
"slide-in-from-top-5"
|
||||
} else {
|
||||
"slide-in-from-bottom-5"
|
||||
};
|
||||
|
||||
let merged_class = tw_merge!(
|
||||
"inline-flex flex-col items-start justify-center gap-1 min-w-[300px] rounded-md text-sm font-medium shadow-lg p-4 cursor-pointer pointer-events-auto border border-border/50 transition-all",
|
||||
"animate-in fade-in duration-300 ease-out hover:scale-[1.02] active:scale-[0.98]",
|
||||
animation_direction,
|
||||
variant_classes,
|
||||
class
|
||||
);
|
||||
|
||||
// Only set position attribute if not empty
|
||||
let position_attr = if position.is_empty() { None } else { Some(position) };
|
||||
|
||||
// Clone title for data attribute usage, original moved into view
|
||||
let title_clone = title.clone();
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=merged_class
|
||||
data-name="SonnerTrigger"
|
||||
data-variant=variant.to_string()
|
||||
data-toast-title=title_clone
|
||||
data-toast-position=position_attr
|
||||
on:click=move |_| {
|
||||
if let Some(cb) = on_dismiss {
|
||||
cb.run(());
|
||||
}
|
||||
}
|
||||
>
|
||||
<div class="font-semibold">{title}</div>
|
||||
{move || description.as_ref().map(|d| view! { <div class="text-xs opacity-90">{d.clone()}</div> })}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn SonnerContainer(
|
||||
children: Children,
|
||||
#[prop(into, optional)] class: String,
|
||||
#[prop(optional, default = SonnerPosition::default())] position: SonnerPosition,
|
||||
) -> impl IntoView {
|
||||
let merged_class = tw_merge!("toast__container fixed z-[9999] flex flex-col gap-2 p-4 outline-none pointer-events-none", class);
|
||||
|
||||
view! {
|
||||
<div class=merged_class data-position=position.to_string()>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn SonnerList(
|
||||
children: Children,
|
||||
#[prop(into, optional)] class: String,
|
||||
#[prop(optional, default = SonnerPosition::default())] position: SonnerPosition,
|
||||
#[prop(optional, default = SonnerDirection::default())] direction: SonnerDirection,
|
||||
#[prop(into, default = "false".to_string())] expanded: String,
|
||||
#[prop(into, optional)] style: String,
|
||||
) -> impl IntoView {
|
||||
let merged_class = tw_merge!(
|
||||
"contents",
|
||||
class
|
||||
);
|
||||
|
||||
view! {
|
||||
<div
|
||||
class=merged_class
|
||||
data-name="SonnerList"
|
||||
data-sonner-toaster="true"
|
||||
data-sonner-theme="light"
|
||||
data-position=position.to_string()
|
||||
data-expanded=expanded
|
||||
data-direction=direction.to_string()
|
||||
style=style
|
||||
>
|
||||
{children()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
// Thread local storage for global access without Context
|
||||
thread_local! {
|
||||
static TOASTS: std::cell::RefCell<Option<RwSignal<Vec<ToastData>>>> = std::cell::RefCell::new(None);
|
||||
}
|
||||
|
||||
pub fn provide_toaster() {
|
||||
let toasts = RwSignal::new(Vec::<ToastData>::new());
|
||||
|
||||
// Set global thread_local
|
||||
TOASTS.with(|t| *t.borrow_mut() = Some(toasts));
|
||||
|
||||
// Also provide context for components
|
||||
provide_context(ToasterStore { toasts });
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosition) -> impl IntoView {
|
||||
// Global store'u al
|
||||
let store = use_context::<ToasterStore>().expect("Toaster context not found. Call provide_toaster() in App root.");
|
||||
let toasts = store.toasts;
|
||||
|
||||
// Auto-derive direction from position
|
||||
let direction = match position {
|
||||
SonnerPosition::TopLeft | SonnerPosition::TopCenter | SonnerPosition::TopRight => SonnerDirection::TopDown,
|
||||
_ => SonnerDirection::BottomUp,
|
||||
};
|
||||
|
||||
let container_class = match position {
|
||||
SonnerPosition::TopLeft => "left-0 top-0 items-start",
|
||||
SonnerPosition::TopRight => "right-0 top-0 items-end",
|
||||
SonnerPosition::TopCenter => "left-1/2 -translate-x-1/2 top-0 items-center",
|
||||
SonnerPosition::BottomCenter => "left-1/2 -translate-x-1/2 bottom-0 items-center",
|
||||
SonnerPosition::BottomLeft => "left-0 bottom-0 items-start",
|
||||
SonnerPosition::BottomRight => "right-0 bottom-0 items-end",
|
||||
};
|
||||
|
||||
view! {
|
||||
<SonnerContainer class=container_class position=position>
|
||||
<SonnerList position=position direction=direction>
|
||||
<For
|
||||
each=move || toasts.get()
|
||||
key=|toast| toast.id
|
||||
children=move |toast| {
|
||||
let id = toast.id;
|
||||
view! {
|
||||
<SonnerTrigger
|
||||
variant=toast.variant
|
||||
title=toast.title
|
||||
description=toast.description
|
||||
position=position.to_string()
|
||||
on_dismiss=Some(Callback::new(move |_| {
|
||||
toasts.update(|vec| vec.retain(|t| t.id != id));
|
||||
}))
|
||||
/>
|
||||
}
|
||||
}
|
||||
/>
|
||||
</SonnerList>
|
||||
</SonnerContainer>
|
||||
}
|
||||
}
|
||||
|
||||
// Global Helper Functions
|
||||
pub fn toast(title: impl Into<String>, variant: ToastType) {
|
||||
let signal_opt = TOASTS.with(|t| *t.borrow());
|
||||
|
||||
if let Some(toasts) = signal_opt {
|
||||
let id = js_sys::Math::random().to_bits();
|
||||
let new_toast = ToastData {
|
||||
id,
|
||||
title: title.into(),
|
||||
description: None,
|
||||
variant,
|
||||
duration: 4000,
|
||||
};
|
||||
|
||||
toasts.update(|t| t.push(new_toast.clone()));
|
||||
|
||||
// Auto remove after duration
|
||||
let duration = new_toast.duration;
|
||||
leptos::task::spawn_local(async move {
|
||||
gloo_timers::future::TimeoutFuture::new(duration as u32).await;
|
||||
toasts.update(|vec| vec.retain(|t| t.id != id));
|
||||
});
|
||||
} else {
|
||||
gloo_console::warn!("ToasterStore not found (global static). Make sure provide_toaster() is called.");
|
||||
}
|
||||
}
|
||||
|
||||
#[allow(dead_code)]
|
||||
pub fn toast_success(title: impl Into<String>) { toast(title, ToastType::Success); }
|
||||
#[allow(dead_code)]
|
||||
pub fn toast_error(title: impl Into<String>) { toast(title, ToastType::Error); }
|
||||
#[allow(dead_code)]
|
||||
pub fn toast_warning(title: impl Into<String>) { toast(title, ToastType::Warning); }
|
||||
#[allow(dead_code)]
|
||||
pub fn toast_info(title: impl Into<String>) { toast(title, ToastType::Info); }
|
||||
@@ -7,16 +7,21 @@ use std::collections::HashMap;
|
||||
use struct_patch::traits::Patch;
|
||||
use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};
|
||||
|
||||
use crate::components::ui::toast::{ToastType, toast};
|
||||
|
||||
pub fn show_toast(level: NotificationLevel, message: impl Into<String>) {
|
||||
let msg = message.into();
|
||||
gloo_console::log!("TOAST CALL:", &msg, format!("{:?}", level));
|
||||
log::info!("Displaying toast: [{:?}] {}", level, msg);
|
||||
match level {
|
||||
NotificationLevel::Info => { leptos_shadcn_toast::toast::info(&msg).show(); },
|
||||
NotificationLevel::Success => { leptos_shadcn_toast::toast::success(&msg).show(); },
|
||||
NotificationLevel::Warning => { leptos_shadcn_toast::toast::warning(&msg).show(); },
|
||||
NotificationLevel::Error => { leptos_shadcn_toast::toast::error(&msg).show(); },
|
||||
}
|
||||
|
||||
let variant = match level {
|
||||
NotificationLevel::Success => ToastType::Success,
|
||||
NotificationLevel::Error => ToastType::Error,
|
||||
NotificationLevel::Warning => ToastType::Warning,
|
||||
NotificationLevel::Info => ToastType::Info,
|
||||
};
|
||||
|
||||
toast(msg, variant);
|
||||
}
|
||||
|
||||
|
||||
|
||||
2
frontend/ui_config.toml
Normal file
2
frontend/ui_config.toml
Normal file
@@ -0,0 +1,2 @@
|
||||
base_color = "neutral"
|
||||
base_path_components = "src/components"
|
||||
@@ -20,7 +20,7 @@ pub struct SetupStatus {
|
||||
pub completed: bool,
|
||||
}
|
||||
|
||||
#[server(GetSetupStatus, "/api/server_fns/GetSetupStatus", input = MsgPack, output = MsgPack)]
|
||||
#[server(GetSetupStatus, "/api/server_fns", input = MsgPack, output = MsgPack)]
|
||||
pub async fn get_setup_status() -> Result<SetupStatus, ServerFnError> {
|
||||
use crate::DbContext;
|
||||
|
||||
@@ -33,7 +33,7 @@ pub async fn get_setup_status() -> Result<SetupStatus, ServerFnError> {
|
||||
})
|
||||
}
|
||||
|
||||
#[server(Setup, "/api/server_fns/Setup", input = MsgPack, output = MsgPack)]
|
||||
#[server(Setup, "/api/server_fns", input = MsgPack, output = MsgPack)]
|
||||
pub async fn setup(username: String, password: String) -> Result<(), ServerFnError> {
|
||||
use crate::DbContext;
|
||||
|
||||
@@ -55,7 +55,7 @@ pub async fn setup(username: String, password: String) -> Result<(), ServerFnErr
|
||||
Ok(())
|
||||
}
|
||||
|
||||
#[server(Login, "/api/server_fns/Login", input = MsgPack, output = MsgPack)]
|
||||
#[server(Login, "/api/server_fns", input = MsgPack, output = MsgPack)]
|
||||
pub async fn login(username: String, password: String) -> Result<UserResponse, ServerFnError> {
|
||||
use crate::DbContext;
|
||||
use leptos_axum::ResponseOptions;
|
||||
@@ -111,7 +111,7 @@ pub async fn login(username: String, password: String) -> Result<UserResponse, S
|
||||
}
|
||||
}
|
||||
|
||||
#[server(Logout, "/api/server_fns/Logout", input = MsgPack, output = MsgPack)]
|
||||
#[server(Logout, "/api/server_fns", input = MsgPack, output = MsgPack)]
|
||||
pub async fn logout() -> Result<(), ServerFnError> {
|
||||
use leptos_axum::ResponseOptions;
|
||||
use cookie::{Cookie, SameSite};
|
||||
@@ -132,7 +132,7 @@ pub async fn logout() -> Result<(), ServerFnError> {
|
||||
Ok(())
|
||||
}
|
||||
|
||||
#[server(GetUser, "/api/server_fns/GetUser", input = MsgPack, output = MsgPack)]
|
||||
#[server(GetUser, "/api/server_fns", input = MsgPack, output = MsgPack)]
|
||||
pub async fn get_user() -> Result<Option<UserResponse>, ServerFnError> {
|
||||
use axum::http::HeaderMap;
|
||||
use leptos_axum::extract;
|
||||
|
||||
BIN
vibetorrent.db-shm
Normal file
BIN
vibetorrent.db-shm
Normal file
Binary file not shown.
BIN
vibetorrent.db-wal
Normal file
BIN
vibetorrent.db-wal
Normal file
Binary file not shown.
Reference in New Issue
Block a user