Compare commits
1 Commits
release-20
...
release-20
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8eb34905fc |
3
Cargo.lock
generated
3
Cargo.lock
generated
@@ -320,11 +320,9 @@ dependencies = [
|
|||||||
"dotenvy",
|
"dotenvy",
|
||||||
"futures",
|
"futures",
|
||||||
"governor",
|
"governor",
|
||||||
"icons",
|
|
||||||
"jsonwebtoken",
|
"jsonwebtoken",
|
||||||
"leptos",
|
"leptos",
|
||||||
"leptos_axum",
|
"leptos_axum",
|
||||||
"leptos_ui",
|
|
||||||
"mime_guess",
|
"mime_guess",
|
||||||
"openssl",
|
"openssl",
|
||||||
"quick-xml",
|
"quick-xml",
|
||||||
@@ -345,7 +343,6 @@ dependencies = [
|
|||||||
"tower_governor",
|
"tower_governor",
|
||||||
"tracing",
|
"tracing",
|
||||||
"tracing-subscriber",
|
"tracing-subscriber",
|
||||||
"tw_merge",
|
|
||||||
"utoipa",
|
"utoipa",
|
||||||
"utoipa-swagger-ui",
|
"utoipa-swagger-ui",
|
||||||
"web-push",
|
"web-push",
|
||||||
|
|||||||
@@ -2,9 +2,6 @@
|
|||||||
members = ["backend", "frontend", "shared"]
|
members = ["backend", "frontend", "shared"]
|
||||||
resolver = "2"
|
resolver = "2"
|
||||||
|
|
||||||
[[workspace.metadata.leptos]]
|
|
||||||
tailwind-input-file = "frontend/input.css"
|
|
||||||
|
|
||||||
[profile.release]
|
[profile.release]
|
||||||
# En küçük binary boyutu
|
# En küçük binary boyutu
|
||||||
opt-level = "z"
|
opt-level = "z"
|
||||||
|
|||||||
@@ -46,7 +46,4 @@ governor = "0.10.4"
|
|||||||
# Leptos
|
# Leptos
|
||||||
leptos = { version = "0.8.15", features = ["nightly"] }
|
leptos = { version = "0.8.15", features = ["nightly"] }
|
||||||
leptos_axum = { version = "0.8.7" }
|
leptos_axum = { version = "0.8.7" }
|
||||||
jsonwebtoken = "9"
|
jsonwebtoken = "9"
|
||||||
tw_merge = { version = "0.1.17", features = ["variant"] }
|
|
||||||
icons = { version = "0.18.0", features = ["leptos"] }
|
|
||||||
leptos_ui = "0.3.20"
|
|
||||||
@@ -1,4 +1,3 @@
|
|||||||
mod components;
|
|
||||||
mod diff;
|
mod diff;
|
||||||
mod handlers;
|
mod handlers;
|
||||||
#[cfg(feature = "push-notifications")]
|
#[cfg(feature = "push-notifications")]
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
|
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
|
||||||
|
|
||||||
<!-- Trunk Assets -->
|
<!-- Trunk Assets -->
|
||||||
<link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" data-preload="false" />
|
<script data-trunk rel="rust" src="Cargo.toml" data-wasm-opt="0" data-preload="false"></script>
|
||||||
<link data-trunk rel="css" href="public/tailwind.css" />
|
<link data-trunk rel="css" href="public/tailwind.css" />
|
||||||
<link data-trunk rel="copy-file" href="manifest.json" />
|
<link data-trunk rel="copy-file" href="manifest.json" />
|
||||||
<link data-trunk rel="copy-file" href="icon-192.png" />
|
<link data-trunk rel="copy-file" href="icon-192.png" />
|
||||||
|
|||||||
@@ -1,69 +1,72 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@import "tw-animate-css";
|
@import "tw-animate-css";
|
||||||
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--radius: 0.625rem;
|
--background: 0 0% 100%;
|
||||||
--background: oklch(1 0 0);
|
--foreground: 240 10% 3.9%;
|
||||||
--foreground: oklch(0.145 0 0);
|
--card: 0 0% 100%;
|
||||||
--card: oklch(1 0 0);
|
--card-foreground: 240 10% 3.9%;
|
||||||
--card-foreground: oklch(0.145 0 0);
|
--popover: 0 0% 100%;
|
||||||
--popover: oklch(1 0 0);
|
--popover-foreground: 240 10% 3.9%;
|
||||||
--popover-foreground: oklch(0.145 0 0);
|
--primary: 240 5.9% 10%;
|
||||||
--primary: oklch(0.205 0 0);
|
--primary-foreground: 0 0% 98%;
|
||||||
--primary-foreground: oklch(0.985 0 0);
|
--secondary: 240 4.8% 95.9%;
|
||||||
--secondary: oklch(0.97 0 0);
|
--secondary-foreground: 240 5.9% 10%;
|
||||||
--secondary-foreground: oklch(0.205 0 0);
|
--muted: 240 4.8% 95.9%;
|
||||||
--muted: oklch(0.97 0 0);
|
--muted-foreground: 240 3.8% 46.1%;
|
||||||
--muted-foreground: oklch(0.556 0 0);
|
--accent: 240 4.8% 95.9%;
|
||||||
--accent: oklch(0.97 0 0);
|
--accent-foreground: 240 5.9% 10%;
|
||||||
--accent-foreground: oklch(0.205 0 0);
|
--destructive: 0 84.2% 60.2%;
|
||||||
--destructive: oklch(0.577 0.245 27.325);
|
--destructive-foreground: 0 0% 98%;
|
||||||
--border: oklch(0.922 0 0);
|
--border: 240 5.9% 90%;
|
||||||
--input: oklch(0.922 0 0);
|
--input: 240 5.9% 90%;
|
||||||
--ring: oklch(0.708 0 0);
|
--ring: 240 5.9% 10%;
|
||||||
|
--radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: oklch(0.145 0 0);
|
--background: 240 10% 3.9%;
|
||||||
--foreground: oklch(0.985 0 0);
|
--foreground: 0 0% 98%;
|
||||||
--card: oklch(0.205 0 0);
|
--card: 240 10% 3.9%;
|
||||||
--card-foreground: oklch(0.985 0 0);
|
--card-foreground: 0 0% 98%;
|
||||||
--popover: oklch(0.205 0 0);
|
--popover: 240 10% 3.9%;
|
||||||
--popover-foreground: oklch(0.985 0 0);
|
--popover-foreground: 0 0% 98%;
|
||||||
--primary: oklch(0.922 0 0);
|
--primary: 0 0% 98%;
|
||||||
--primary-foreground: oklch(0.205 0 0);
|
--primary-foreground: 240 5.9% 10%;
|
||||||
--secondary: oklch(0.269 0 0);
|
--secondary: 240 3.7% 15.9%;
|
||||||
--secondary-foreground: oklch(0.985 0 0);
|
--secondary-foreground: 0 0% 98%;
|
||||||
--muted: oklch(0.269 0 0);
|
--muted: 240 3.7% 15.9%;
|
||||||
--muted-foreground: oklch(0.708 0 0);
|
--muted-foreground: 240 5% 64.9%;
|
||||||
--accent: oklch(0.269 0 0);
|
--accent: 240 3.7% 15.9%;
|
||||||
--accent-foreground: oklch(0.985 0 0);
|
--accent-foreground: 0 0% 98%;
|
||||||
--destructive: oklch(0.704 0.191 22.216);
|
--destructive: 0 62.8% 30.6%;
|
||||||
--border: oklch(1 0 0 / 10%);
|
--destructive-foreground: 0 0% 98%;
|
||||||
--input: oklch(1 0 0 / 15%);
|
--border: 240 3.7% 15.9%;
|
||||||
--ring: oklch(0.556 0 0);
|
--input: 240 3.7% 15.9%;
|
||||||
|
--ring: 240 4.9% 83.9%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--color-background: var(--background);
|
--color-background: hsl(var(--background));
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: hsl(var(--foreground));
|
||||||
--color-card: var(--card);
|
--color-card: hsl(var(--card));
|
||||||
--color-card-foreground: var(--card-foreground);
|
--color-card-foreground: hsl(var(--card-foreground));
|
||||||
--color-popover: var(--popover);
|
--color-popover: hsl(var(--popover));
|
||||||
--color-popover-foreground: var(--popover-foreground);
|
--color-popover-foreground: hsl(var(--popover-foreground));
|
||||||
--color-primary: var(--primary);
|
--color-primary: hsl(var(--primary));
|
||||||
--color-primary-foreground: var(--primary-foreground);
|
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||||
--color-secondary: var(--secondary);
|
--color-secondary: hsl(var(--secondary));
|
||||||
--color-secondary-foreground: var(--secondary-foreground);
|
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||||
--color-muted: var(--muted);
|
--color-muted: hsl(var(--muted));
|
||||||
--color-muted-foreground: var(--muted-foreground);
|
--color-muted-foreground: hsl(var(--muted-foreground));
|
||||||
--color-accent: var(--accent);
|
--color-accent: hsl(var(--accent));
|
||||||
--color-accent-foreground: var(--accent-foreground);
|
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||||
--color-destructive: var(--destructive);
|
--color-destructive: hsl(var(--destructive));
|
||||||
--color-destructive-foreground: var(--destructive-foreground);
|
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||||||
--color-border: var(--border);
|
--color-border: hsl(var(--border));
|
||||||
--color-input: var(--input);
|
--color-input: hsl(var(--input));
|
||||||
--color-ring: var(--ring);
|
--color-ring: hsl(var(--ring));
|
||||||
--radius-sm: calc(var(--radius) - 4px);
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
--radius-md: calc(var(--radius) - 2px);
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
--radius-lg: var(--radius);
|
--radius-lg: var(--radius);
|
||||||
@@ -80,10 +83,10 @@
|
|||||||
|
|
||||||
button:not(:disabled),
|
button:not(:disabled),
|
||||||
[role="button"]:not(:disabled) {
|
[role="button"]:not(:disabled) {
|
||||||
@apply cursor-pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog {
|
dialog {
|
||||||
@apply m-auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,34 +1,24 @@
|
|||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
use leptos::task::spawn_local;
|
use leptos::task::spawn_local;
|
||||||
use crate::components::ui::card::{Card, CardHeader, CardContent};
|
use crate::components::ui::card::{Card, CardHeader, CardContent};
|
||||||
use crate::components::ui::auto_form::{AutoForm, AutoFormField};
|
use crate::components::ui::input::{Input, InputType};
|
||||||
|
|
||||||
|
use crate::components::ui::button::Button;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Login() -> impl IntoView {
|
pub fn Login() -> impl IntoView {
|
||||||
|
let username = RwSignal::new(String::new());
|
||||||
|
let password = RwSignal::new(String::new());
|
||||||
let error = signal(Option::<String>::None);
|
let error = signal(Option::<String>::None);
|
||||||
let loading = signal(false);
|
let loading = signal(false);
|
||||||
|
|
||||||
let fields = vec![
|
let handle_login = move |ev: web_sys::SubmitEvent| {
|
||||||
AutoFormField::Text {
|
ev.prevent_default();
|
||||||
name: "username".to_string(),
|
|
||||||
label: "Kullanıcı Adı".to_string(),
|
|
||||||
placeholder: Some("Kullanıcı adınız".to_string()),
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
AutoFormField::Password {
|
|
||||||
name: "password".to_string(),
|
|
||||||
label: "Şifre".to_string(),
|
|
||||||
placeholder: Some("******".to_string()),
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
let on_submit = move |data: std::collections::HashMap<String, String>| {
|
|
||||||
loading.1.set(true);
|
loading.1.set(true);
|
||||||
error.1.set(None);
|
error.1.set(None);
|
||||||
|
|
||||||
let user = data.get("username").cloned().unwrap_or_default();
|
let user = username.get();
|
||||||
let pass = data.get("password").cloned().unwrap_or_default();
|
let pass = password.get();
|
||||||
|
|
||||||
spawn_local(async move {
|
spawn_local(async move {
|
||||||
match shared::server_fns::auth::login(user, pass).await {
|
match shared::server_fns::auth::login(user, pass).await {
|
||||||
@@ -59,20 +49,47 @@ pub fn Login() -> impl IntoView {
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|
||||||
<CardContent class="pt-4">
|
<CardContent class="pt-4">
|
||||||
<AutoForm
|
<form on:submit=handle_login class="space-y-4">
|
||||||
fields=fields
|
<div class="space-y-2">
|
||||||
submit_label="Giriş Yap"
|
<label class="text-sm font-medium leading-none">"Kullanıcı Adı"</label>
|
||||||
on_submit=on_submit
|
<Input
|
||||||
loading=loading.0.into()
|
r#type=InputType::Text
|
||||||
/>
|
placeholder="Kullanıcı adınız"
|
||||||
|
bind_value=username
|
||||||
<Show when=move || error.0.get().is_some()>
|
disabled=loading.0.get()
|
||||||
<div class="mt-4 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
/>
|
||||||
{move || error.0.get().unwrap_or_default()}
|
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
<div class="space-y-2">
|
||||||
|
<label class="text-sm font-medium leading-none">"Şifre"</label>
|
||||||
|
<Input
|
||||||
|
r#type=InputType::Password
|
||||||
|
placeholder="******"
|
||||||
|
bind_value=password
|
||||||
|
disabled=loading.0.get()
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Show when=move || error.0.get().is_some()>
|
||||||
|
<div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
||||||
|
{move || error.0.get().unwrap_or_default()}
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<div class="pt-2">
|
||||||
|
<Button
|
||||||
|
class="w-full"
|
||||||
|
attr:r#type="submit"
|
||||||
|
attr:disabled=move || loading.0.get()
|
||||||
|
>
|
||||||
|
<Show when=move || loading.0.get() fallback=|| view! { "Giriş Yap" }.into_any()>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,38 +1,23 @@
|
|||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
use leptos::task::spawn_local;
|
use leptos::task::spawn_local;
|
||||||
use crate::components::ui::card::{Card, CardHeader, CardContent};
|
use crate::components::ui::card::{Card, CardHeader, CardContent};
|
||||||
use crate::components::ui::auto_form::{AutoForm, AutoFormField};
|
use crate::components::ui::input::{Input, InputType};
|
||||||
|
|
||||||
|
use crate::components::ui::button::Button;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Setup() -> impl IntoView {
|
pub fn Setup() -> impl IntoView {
|
||||||
|
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 error = signal(Option::<String>::None);
|
||||||
let loading = signal(false);
|
let loading = signal(false);
|
||||||
|
|
||||||
let fields = vec![
|
let handle_setup = move |ev: web_sys::SubmitEvent| {
|
||||||
AutoFormField::Text {
|
ev.prevent_default();
|
||||||
name: "username".to_string(),
|
|
||||||
label: "Yönetici Kullanıcı Adı".to_string(),
|
let pass = password.get();
|
||||||
placeholder: Some("admin".to_string()),
|
let confirm = confirm_password.get();
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
AutoFormField::Password {
|
|
||||||
name: "password".to_string(),
|
|
||||||
label: "Şifre".to_string(),
|
|
||||||
placeholder: Some("******".to_string()),
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
AutoFormField::Password {
|
|
||||||
name: "confirm_password".to_string(),
|
|
||||||
label: "Şifre Onay".to_string(),
|
|
||||||
placeholder: Some("******".to_string()),
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
let on_submit = move |data: std::collections::HashMap<String, String>| {
|
|
||||||
let user = data.get("username").cloned().unwrap_or_default();
|
|
||||||
let pass = data.get("password").cloned().unwrap_or_default();
|
|
||||||
let confirm = data.get("confirm_password").cloned().unwrap_or_default();
|
|
||||||
|
|
||||||
if pass != confirm {
|
if pass != confirm {
|
||||||
error.1.set(Some("Şifreler eşleşmiyor".to_string()));
|
error.1.set(Some("Şifreler eşleşmiyor".to_string()));
|
||||||
@@ -47,6 +32,8 @@ pub fn Setup() -> impl IntoView {
|
|||||||
loading.1.set(true);
|
loading.1.set(true);
|
||||||
error.1.set(None);
|
error.1.set(None);
|
||||||
|
|
||||||
|
let user = username.get();
|
||||||
|
|
||||||
spawn_local(async move {
|
spawn_local(async move {
|
||||||
match shared::server_fns::auth::setup(user, pass).await {
|
match shared::server_fns::auth::setup(user, pass).await {
|
||||||
Ok(_) => {
|
Ok(_) => {
|
||||||
@@ -77,18 +64,54 @@ pub fn Setup() -> impl IntoView {
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|
||||||
<CardContent class="pt-4">
|
<CardContent class="pt-4">
|
||||||
<AutoForm
|
<form on:submit=handle_setup class="space-y-4">
|
||||||
fields=fields
|
<div class="space-y-2">
|
||||||
submit_label="Kurulumu Tamamla"
|
<label class="text-sm font-medium leading-none">"Yönetici Kullanıcı Adı"</label>
|
||||||
on_submit=on_submit
|
<Input
|
||||||
loading=loading.0.into()
|
r#type=InputType::Text
|
||||||
/>
|
placeholder="admin"
|
||||||
|
bind_value=username
|
||||||
<Show when=move || error.0.get().is_some() fallback=|| ()>
|
disabled=loading.0.get()
|
||||||
<div class="mt-4 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
|
/>
|
||||||
<span>{move || error.0.get().unwrap_or_default()}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
<div class="space-y-2">
|
||||||
|
<label class="text-sm font-medium leading-none">"Şifre"</label>
|
||||||
|
<Input
|
||||||
|
r#type=InputType::Password
|
||||||
|
placeholder="******"
|
||||||
|
bind_value=password
|
||||||
|
disabled=loading.0.get()
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<label class="text-sm font-medium leading-none">"Şifre Onay"</label>
|
||||||
|
<Input
|
||||||
|
r#type=InputType::Password
|
||||||
|
placeholder="******"
|
||||||
|
bind_value=confirm_password
|
||||||
|
disabled=loading.0.get()
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Show when=move || error.0.get().is_some() fallback=|| ()>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<div class="pt-2">
|
||||||
|
<Button
|
||||||
|
class="w-full"
|
||||||
|
attr:r#type="submit"
|
||||||
|
attr:disabled=move || loading.0.get()
|
||||||
|
>
|
||||||
|
<Show when=move || loading.0.get() fallback=|| view! { "Kurulumu Tamamla" }.into_any()>
|
||||||
|
<span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
|
||||||
|
"Kuruluyor..."
|
||||||
|
</Show>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,8 +2,6 @@ use leptos::prelude::*;
|
|||||||
use crate::components::ui::context_menu::{
|
use crate::components::ui::context_menu::{
|
||||||
ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger,
|
ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger,
|
||||||
};
|
};
|
||||||
use crate::components::ui::button_action::ButtonAction;
|
|
||||||
use crate::components::ui::button::ButtonVariant;
|
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn TorrentContextMenu(
|
pub fn TorrentContextMenu(
|
||||||
@@ -11,54 +9,37 @@ pub fn TorrentContextMenu(
|
|||||||
torrent_hash: String,
|
torrent_hash: String,
|
||||||
on_action: Callback<(String, String)>,
|
on_action: Callback<(String, String)>,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
|
let hash = torrent_hash.clone();
|
||||||
|
let on_action_stored = StoredValue::new(on_action);
|
||||||
|
|
||||||
|
// Define helper to avoid move issues
|
||||||
|
let run_action = move |action: &str| {
|
||||||
|
on_action_stored.get_value().run((action.to_string(), hash.clone()));
|
||||||
|
};
|
||||||
|
|
||||||
let hash_c1 = torrent_hash.clone();
|
let hash_c1 = torrent_hash.clone();
|
||||||
let hash_c2 = torrent_hash.clone();
|
let hash_c2 = torrent_hash.clone();
|
||||||
let hash_c3 = torrent_hash.clone();
|
let hash_c3 = torrent_hash.clone();
|
||||||
let hash_c4 = torrent_hash.clone();
|
let hash_c4 = torrent_hash.clone();
|
||||||
|
|
||||||
let on_action_stored = StoredValue::new(on_action);
|
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<ContextMenu>
|
<ContextMenu>
|
||||||
<ContextMenuTrigger>
|
<ContextMenuTrigger>
|
||||||
{children()}
|
{children()}
|
||||||
</ContextMenuTrigger>
|
</ContextMenuTrigger>
|
||||||
<ContextMenuContent class="w-56 p-1.5">
|
<ContextMenuContent class="w-48">
|
||||||
<ContextMenuItem on:click={let h = hash_c1; move |_| on_action_stored.get_value().run(("start".to_string(), h.clone()))}>
|
<ContextMenuItem on:click={let h = hash_c1; move |_| on_action_stored.get_value().run(("start".to_string(), h.clone()))}>
|
||||||
"Başlat"
|
"Başlat"
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
<ContextMenuItem on:click={let h = hash_c2; move |_| on_action_stored.get_value().run(("stop".to_string(), h.clone()))}>
|
<ContextMenuItem on:click={let h = hash_c2; move |_| on_action_stored.get_value().run(("stop".to_string(), h.clone()))}>
|
||||||
"Durdur"
|
"Durdur"
|
||||||
</ContextMenuItem>
|
</ContextMenuItem>
|
||||||
|
<ContextMenuItem class="text-destructive" on:click={let h = hash_c3; move |_| on_action_stored.get_value().run(("delete".to_string(), h.clone()))}>
|
||||||
<div class="my-1.5 h-px bg-border/50" />
|
"Sil"
|
||||||
|
</ContextMenuItem>
|
||||||
// --- Modern Hold-to-Action Buttons ---
|
<ContextMenuItem class="text-destructive font-bold" on:click={let h = hash_c4; move |_| on_action_stored.get_value().run(("delete_with_data".to_string(), h.clone()))}>
|
||||||
<div class="space-y-1">
|
"Verilerle Birlikte Sil"
|
||||||
<ButtonAction
|
</ContextMenuItem>
|
||||||
variant=ButtonVariant::Ghost
|
|
||||||
class="w-full justify-start h-8 px-2 text-xs text-destructive hover:bg-destructive/10 hover:text-destructive transition-none"
|
|
||||||
hold_duration=800
|
|
||||||
on_action={let h = hash_c3; move || {
|
|
||||||
on_action_stored.get_value().run(("delete".to_string(), h.clone()));
|
|
||||||
crate::components::ui::context_menu::close_context_menu();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
"Sil (Basılı Tut)"
|
|
||||||
</ButtonAction>
|
|
||||||
|
|
||||||
<ButtonAction
|
|
||||||
variant=ButtonVariant::Destructive
|
|
||||||
class="w-full justify-start h-8 px-2 text-xs font-bold"
|
|
||||||
hold_duration=1200
|
|
||||||
on_action={let h = hash_c4; move || {
|
|
||||||
on_action_stored.get_value().run(("delete_with_data".to_string(), h.clone()));
|
|
||||||
crate::components::ui::context_menu::close_context_menu();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
"Verilerle Sil (Basılı Tut)"
|
|
||||||
</ButtonAction>
|
|
||||||
</div>
|
|
||||||
</ContextMenuContent>
|
</ContextMenuContent>
|
||||||
</ContextMenu>
|
</ContextMenu>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,12 +6,24 @@ pub fn Footer() -> impl IntoView {
|
|||||||
let year = chrono::Local::now().format("%Y").to_string();
|
let year = chrono::Local::now().format("%Y").to_string();
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<footer class="mt-auto pb-6 px-4">
|
<footer class="mt-auto px-4 py-6 md:px-8">
|
||||||
<Separator class="mb-4 opacity-30" />
|
<Separator class="mb-6 opacity-50" />
|
||||||
<div class="flex items-center justify-center gap-2 text-[10px] uppercase tracking-widest text-muted-foreground/60 font-medium">
|
<div class="flex flex-col items-center justify-between gap-4 md:flex-row">
|
||||||
<span>{format!("© {} VibeTorrent", year)}</span>
|
<p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
|
||||||
<span class="size-1 rounded-full bg-muted-foreground/30" />
|
{format!("© {} VibeTorrent. Tüm hakları saklıdır.", year)}
|
||||||
<span>"v3.0.0-beta"</span>
|
</p>
|
||||||
|
<div class="flex items-center gap-4 text-sm font-medium text-muted-foreground">
|
||||||
|
<a
|
||||||
|
href="https://git.karatatar.com/admin/vibetorrent"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
class="underline underline-offset-4 hover:text-foreground transition-colors"
|
||||||
|
>
|
||||||
|
"Gitea"
|
||||||
|
</a>
|
||||||
|
<span class="size-1 rounded-full bg-muted-foreground/30" />
|
||||||
|
<span class="text-[10px] tracking-widest uppercase opacity-70">"v3.0.0-beta"</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -155,7 +155,7 @@ pub fn Sidebar() -> impl IntoView {
|
|||||||
<span class="text-[9px] text-muted-foreground">"Web Push"</span>
|
<span class="text-[9px] text-muted-foreground">"Web Push"</span>
|
||||||
</div>
|
</div>
|
||||||
<Switch
|
<Switch
|
||||||
checked=Signal::from(store.push_enabled)
|
checked=Signal::from(store.push_enabled)
|
||||||
on_checked_change=Callback::new(on_push_toggle)
|
on_checked_change=Callback::new(on_push_toggle)
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -544,14 +544,14 @@ pub fn TorrentTable() -> impl IntoView {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center justify-between px-2 py-1.5 text-[10px] md:text-[11px] text-muted-foreground bg-muted/20 border rounded-md">
|
<div class="hidden md:flex items-center justify-between px-2 py-1 text-[11px] text-muted-foreground bg-muted/20 border rounded-md">
|
||||||
<div class="flex gap-3 md:gap-4">
|
<div class="flex gap-4">
|
||||||
<span>{move || format!("Toplam: {} torrent", filtered_hashes.get().len())}</span>
|
<span>{move || format!("Toplam: {} torrent", filtered_hashes.get().len())}</span>
|
||||||
<Show when=move || has_selection.get()>
|
<Show when=move || has_selection.get()>
|
||||||
<span class="text-primary font-bold">{move || format!("{} seçili", selected_count.get())}</span>
|
<span class="text-primary font-medium">{move || format!("{} torrent seçili", selected_count.get())}</span>
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
<div class="opacity-50">"VibeTorrent v3"</div>
|
<div>"VibeTorrent v3"</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}.into_any()
|
}.into_any()
|
||||||
|
|||||||
@@ -1,93 +0,0 @@
|
|||||||
use leptos::prelude::*;
|
|
||||||
use tailwind_fuse::tw_merge;
|
|
||||||
use crate::components::ui::button::Button;
|
|
||||||
use crate::components::ui::input::{Input, InputType};
|
|
||||||
|
|
||||||
#[derive(Clone, Debug)]
|
|
||||||
pub enum AutoFormField {
|
|
||||||
Text {
|
|
||||||
name: String,
|
|
||||||
label: String,
|
|
||||||
placeholder: Option<String>,
|
|
||||||
required: bool,
|
|
||||||
},
|
|
||||||
Password {
|
|
||||||
name: String,
|
|
||||||
label: String,
|
|
||||||
placeholder: Option<String>,
|
|
||||||
required: bool,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
pub fn AutoForm(
|
|
||||||
#[prop(into)] fields: Vec<AutoFormField>,
|
|
||||||
#[prop(into)] submit_label: String,
|
|
||||||
#[prop(into)] on_submit: Callback<std::collections::HashMap<String, String>>,
|
|
||||||
#[prop(optional)] loading: Signal<bool>,
|
|
||||||
#[prop(optional, into)] class: String,
|
|
||||||
) -> impl IntoView {
|
|
||||||
let field_values = fields.iter().map(|f| {
|
|
||||||
let name = match f {
|
|
||||||
AutoFormField::Text { name, .. } => name,
|
|
||||||
AutoFormField::Password { name, .. } => name,
|
|
||||||
};
|
|
||||||
(name.clone(), RwSignal::new(String::new()))
|
|
||||||
}).collect::<std::collections::HashMap<String, RwSignal<String>>>();
|
|
||||||
|
|
||||||
let handle_submit = {
|
|
||||||
let field_values = field_values.clone();
|
|
||||||
move |ev: web_sys::SubmitEvent| {
|
|
||||||
ev.prevent_default();
|
|
||||||
let mut data = std::collections::HashMap::new();
|
|
||||||
for (name, signal) in &field_values {
|
|
||||||
data.insert(name.clone(), signal.get());
|
|
||||||
}
|
|
||||||
on_submit.run(data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<form on:submit=handle_submit class=tw_merge!("space-y-4", class)>
|
|
||||||
{fields.into_iter().map(|field| {
|
|
||||||
let (name, label, placeholder, r#type, required) = match field {
|
|
||||||
AutoFormField::Text { name, label, placeholder, required } => (name, label, placeholder, InputType::Text, required),
|
|
||||||
AutoFormField::Password { name, label, placeholder, required } => (name, label, placeholder, InputType::Password, required),
|
|
||||||
};
|
|
||||||
|
|
||||||
let signal = field_values.get(&name).cloned().unwrap();
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
|
||||||
{label}
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
r#type=r#type
|
|
||||||
placeholder=placeholder.unwrap_or_default()
|
|
||||||
bind_value=signal
|
|
||||||
required=required
|
|
||||||
disabled=loading.get()
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}).collect_view()}
|
|
||||||
|
|
||||||
<div class="pt-2">
|
|
||||||
<Button
|
|
||||||
class="w-full"
|
|
||||||
attr:r#type="submit"
|
|
||||||
attr:disabled=move || loading.get()
|
|
||||||
>
|
|
||||||
<Show when=move || loading.get() fallback=move || {
|
|
||||||
let label = submit_label.clone();
|
|
||||||
view! { <span>{label}</span> }.into_any()
|
|
||||||
}>
|
|
||||||
<span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
|
|
||||||
"İşleniyor..."
|
|
||||||
</Show>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
use leptos::prelude::*;
|
|
||||||
use tailwind_fuse::tw_merge;
|
|
||||||
use crate::components::ui::button::{Button, ButtonVariant};
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
pub fn ButtonAction(
|
|
||||||
children: Children,
|
|
||||||
#[prop(into)] on_action: Callback<()>,
|
|
||||||
#[prop(optional, into)] class: String,
|
|
||||||
#[prop(default = 1000)] hold_duration: u64,
|
|
||||||
#[prop(default = ButtonVariant::Default)] variant: ButtonVariant,
|
|
||||||
) -> impl IntoView {
|
|
||||||
let is_holding = RwSignal::new(false);
|
|
||||||
let generation = StoredValue::new(0u64);
|
|
||||||
|
|
||||||
let on_down = move |_| {
|
|
||||||
generation.update_value(|g| *g += 1);
|
|
||||||
is_holding.set(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
let on_up = move |_| is_holding.set(false);
|
|
||||||
|
|
||||||
Effect::new(move |_| {
|
|
||||||
if is_holding.get() {
|
|
||||||
let current_gen = generation.get_value();
|
|
||||||
leptos::task::spawn_local(async move {
|
|
||||||
gloo_timers::future::TimeoutFuture::new(hold_duration as u32).await;
|
|
||||||
// Double validation: Is user still holding AND is it the SAME hold attempt?
|
|
||||||
if is_holding.get_untracked() && generation.get_value() == current_gen {
|
|
||||||
on_action.run(());
|
|
||||||
is_holding.set(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let merged_class = move || tw_merge!(
|
|
||||||
"relative overflow-hidden transition-all active:scale-[0.98]",
|
|
||||||
class.clone()
|
|
||||||
);
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<style>
|
|
||||||
"@keyframes button-hold-progress {
|
|
||||||
from { width: 0%; }
|
|
||||||
to { width: 100%; }
|
|
||||||
}
|
|
||||||
.animate-button-hold {
|
|
||||||
animation: button-hold-progress var(--button-hold-duration) linear forwards;
|
|
||||||
}"
|
|
||||||
</style>
|
|
||||||
<Button
|
|
||||||
variant=variant
|
|
||||||
class=merged_class()
|
|
||||||
attr:style=format!("--button-hold-duration: {}ms", hold_duration)
|
|
||||||
on:mousedown=on_down
|
|
||||||
on:mouseup=on_up
|
|
||||||
on:mouseleave=on_up
|
|
||||||
on:touchstart=move |_| is_holding.set(true)
|
|
||||||
on:touchend=move |_| is_holding.set(false)
|
|
||||||
>
|
|
||||||
// Progress Overlay
|
|
||||||
<Show when=move || is_holding.get()>
|
|
||||||
<div class="absolute inset-0 bg-white/20 dark:bg-black/20 pointer-events-none animate-button-hold" />
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
<span class="relative z-10 flex items-center justify-center gap-2">
|
|
||||||
{children()}
|
|
||||||
</span>
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -78,6 +78,76 @@ pub fn ContextMenuAction(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn ContextMenuHoldAction(
|
||||||
|
children: Children,
|
||||||
|
#[prop(into)] on_hold_complete: Callback<()>,
|
||||||
|
#[prop(optional, into)] class: String,
|
||||||
|
#[prop(default = 1000)] hold_duration: u64,
|
||||||
|
) -> impl IntoView {
|
||||||
|
let is_holding = RwSignal::new(false);
|
||||||
|
let progress = RwSignal::new(0.0);
|
||||||
|
|
||||||
|
let on_mousedown = move |_| {
|
||||||
|
is_holding.set(true);
|
||||||
|
progress.set(0.0);
|
||||||
|
};
|
||||||
|
|
||||||
|
let on_mouseup = move |_| {
|
||||||
|
is_holding.set(false);
|
||||||
|
progress.set(0.0);
|
||||||
|
};
|
||||||
|
|
||||||
|
Effect::new(move |_| {
|
||||||
|
if is_holding.get() {
|
||||||
|
let start_time = js_sys::Date::now();
|
||||||
|
let duration = hold_duration as f64;
|
||||||
|
|
||||||
|
leptos::task::spawn_local(async move {
|
||||||
|
while is_holding.get_untracked() {
|
||||||
|
let now = js_sys::Date::now();
|
||||||
|
let elapsed = now - start_time;
|
||||||
|
let p = (elapsed / duration).min(1.0);
|
||||||
|
progress.set(p * 100.0);
|
||||||
|
|
||||||
|
if p >= 1.0 {
|
||||||
|
on_hold_complete.run(());
|
||||||
|
is_holding.set(false);
|
||||||
|
close_context_menu();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
gloo_timers::future::TimeoutFuture::new(16).await; // ~60fps
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let class = tw_merge!(
|
||||||
|
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors overflow-hidden",
|
||||||
|
class
|
||||||
|
);
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div
|
||||||
|
class=class
|
||||||
|
on:mousedown=on_mousedown
|
||||||
|
on:mouseup=on_mouseup
|
||||||
|
on:mouseleave=on_mouseup
|
||||||
|
on:touchstart=move |_| on_mousedown(web_sys::MouseEvent::new("mousedown").unwrap())
|
||||||
|
on:touchend=move |_| on_mouseup(web_sys::MouseEvent::new("mouseup").unwrap())
|
||||||
|
>
|
||||||
|
// Progress background
|
||||||
|
<div
|
||||||
|
class="absolute inset-y-0 left-0 bg-destructive/20 transition-all duration-75 ease-linear pointer-events-none"
|
||||||
|
style=move || format!("width: {}%;", progress.get())
|
||||||
|
/>
|
||||||
|
<span class="relative z-10 flex items-center gap-2 w-full">
|
||||||
|
{children()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
}.into_any()
|
||||||
|
}
|
||||||
|
|
||||||
#[derive(Clone)]
|
#[derive(Clone)]
|
||||||
struct ContextMenuContext {
|
struct ContextMenuContext {
|
||||||
target_id: String,
|
target_id: String,
|
||||||
@@ -327,7 +397,7 @@ pub fn ContextMenuContent(
|
|||||||
target_id_for_script,
|
target_id_for_script,
|
||||||
)}
|
)}
|
||||||
</script>
|
</script>
|
||||||
}
|
}.into_any()
|
||||||
}
|
}
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
|
|||||||
@@ -1,9 +1,7 @@
|
|||||||
pub mod accordion;
|
pub mod accordion;
|
||||||
pub mod alert_dialog;
|
pub mod alert_dialog;
|
||||||
pub mod auto_form;
|
|
||||||
pub mod badge;
|
pub mod badge;
|
||||||
pub mod button;
|
pub mod button;
|
||||||
pub mod button_action;
|
|
||||||
pub mod card;
|
pub mod card;
|
||||||
pub mod checkbox;
|
pub mod checkbox;
|
||||||
pub mod context_menu;
|
pub mod context_menu;
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
use leptos::prelude::*;
|
|
||||||
use tailwind_fuse::tw_merge;
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
pub fn Progress(
|
|
||||||
#[prop(into)] value: Signal<f64>,
|
|
||||||
#[prop(optional, into)] class: String,
|
|
||||||
) -> impl IntoView {
|
|
||||||
let progress_style = move || format!("transform: translateX(-{}%);", 100.0 - value.get().clamp(0.0, 100.0));
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<div
|
|
||||||
data-name="Progress"
|
|
||||||
class=tw_merge!(
|
|
||||||
"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
|
|
||||||
class
|
|
||||||
)
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
data-name="ProgressIndicator"
|
|
||||||
class="h-full w-full flex-1 bg-primary transition-all duration-500 ease-in-out"
|
|
||||||
style=progress_style
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,35 +1,20 @@
|
|||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
use tw_merge::*;
|
use tailwind_fuse::tw_merge;
|
||||||
|
|
||||||
|
#[derive(Clone, Copy, PartialEq, Eq, Default, Debug)]
|
||||||
|
pub enum SeparatorOrientation { #[default] Horizontal, Vertical }
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Separator(
|
pub fn Separator(
|
||||||
#[prop(into, optional)] orientation: Signal<SeparatorOrientation>,
|
#[prop(into, optional)] orientation: Signal<SeparatorOrientation>,
|
||||||
#[prop(into, optional)] class: String,
|
#[prop(into, optional)] class: String,
|
||||||
// children: Children,
|
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
let merged_class = Memo::new(move |_| {
|
let class_signal = move || {
|
||||||
let orientation = orientation.get();
|
let orient_class = match orientation.get() {
|
||||||
let separator = SeparatorClass { orientation };
|
SeparatorOrientation::Horizontal => "h-[1px] w-full",
|
||||||
separator.with_class(class.clone())
|
SeparatorOrientation::Vertical => "h-full w-[1px]",
|
||||||
});
|
};
|
||||||
|
tw_merge!("shrink-0 bg-border", orient_class, class.clone())
|
||||||
view! { <div class=merged_class role="separator" /> }
|
};
|
||||||
|
view! { <div class=class_signal role="none" /> }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========================================================== */
|
|
||||||
/* 🧬 STRUCT 🧬 */
|
|
||||||
/* ========================================================== */
|
|
||||||
|
|
||||||
#[derive(TwClass, Default)]
|
|
||||||
#[tw(class = "shrink-0 bg-border")]
|
|
||||||
pub struct SeparatorClass {
|
|
||||||
orientation: SeparatorOrientation,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(TwVariant)]
|
|
||||||
pub enum SeparatorOrientation {
|
|
||||||
#[tw(default, class = "w-full h-[1px]")]
|
|
||||||
Default,
|
|
||||||
#[tw(class = "h-full w-[1px]")]
|
|
||||||
Vertical,
|
|
||||||
}
|
|
||||||
@@ -1,232 +1,79 @@
|
|||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
use leptos_router::hooks::use_location;
|
use tw_merge::tw_merge;
|
||||||
use leptos_ui::{clx, variants, void};
|
|
||||||
|
|
||||||
mod components {
|
#[derive(Clone, Copy, PartialEq, Eq, Default)]
|
||||||
use super::*;
|
#[allow(dead_code)]
|
||||||
clx! {SidenavWrapper, div, "group/sidenav-wrapper has-data-[variant=Inset]:bg-sidenav flex h-full w-full"}
|
pub enum SidenavState { #[default] Expanded, Collapsed }
|
||||||
// clx! {SidenavInset, div, "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=Inset]:m-2 md:peer-data-[variant=Inset]:ml-0 md:peer-data-[variant=Inset]:rounded-xl md:peer-data-[variant=Inset]:shadow-sm md:peer-data-[variant=Inset]:peer-data-[state=Collapsed]:ml-2"}
|
|
||||||
clx! {SidenavInset, div, "bg-background relative flex w-full flex-1 flex-col data-[variant=Inset]:rounded-lg data-[variant=Inset]:border data-[variant=Inset]:border-sidenav-border data-[variant=Inset]:shadow-sm data-[variant=Inset]:m-2"}
|
|
||||||
// * data-[], not group-data-[]
|
|
||||||
clx! {SidenavInner, div, "flex flex-col w-full h-full bg-sidenav data-[variant=Floating]:rounded-lg data-[variant=Floating]:border data-[variant=Floating]:border-sidenav-border data-[variant=Floating]:shadow-sm"}
|
|
||||||
clx! {SidenavHeader, div, "flex flex-col gap-2 p-2"}
|
|
||||||
clx! {SidenavMenu, ul, "flex flex-col gap-1 w-full min-w-0"}
|
|
||||||
clx! {SidenavMenuSub, ul, "border-sidenav-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=Icon]:hidden"}
|
|
||||||
clx! {SidenavMenuItem, li, "relative group/menu-item"}
|
|
||||||
clx! {SidenavContent, div, "scrollbar__on_hover", "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=Icon]:overflow-hidden"}
|
|
||||||
clx! {SidenavGroup, div, "flex relative flex-col p-2 w-full min-w-0"}
|
|
||||||
clx! {SidenavGroupContent, div, "w-full text-sm"}
|
|
||||||
clx! {SidenavGroupLabel, div, "text-sidenav-foreground/70 ring-sidenav-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=Icon]:-mt-8 group-data-[collapsible=Icon]:opacity-0"}
|
|
||||||
clx! {SidenavFooter, footer, "flex flex-col gap-2 p-2"}
|
|
||||||
// Button "More"
|
|
||||||
clx! {DropdownMenuTriggerEllipsis, button, "text-sidenav-foreground ring-sidenav-ring hover:bg-sidenav-accent hover:text-sidenav-accent-foreground peer-hover/menu-button:text-sidenav-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=Icon]:hidden peer-data-[active=true]/menu-button:text-sidenav-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0"}
|
|
||||||
|
|
||||||
void! {SidenavInput, input,
|
#[derive(Clone)]
|
||||||
"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",
|
pub struct SidenavContext {
|
||||||
"focus-visible:border-ring focus-visible:ring-ring/50",
|
pub state: RwSignal<SidenavState>,
|
||||||
"focus-visible:ring-2", // TODO. Port tw_merge to Tailwind V4.
|
|
||||||
// "focus-visible:ring-[3px]", // TODO. Port tw_merge to Tailwind V4.
|
|
||||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
||||||
"read-only:bg-muted",
|
|
||||||
// Specific to Sidenav
|
|
||||||
"w-full h-8 shadow-none bg-background"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pub use components::*;
|
#[component]
|
||||||
|
pub fn SidenavWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
|
||||||
/* ========================================================== */
|
let state = RwSignal::new(SidenavState::Expanded);
|
||||||
/* ✨ FUNCTIONS ✨ */
|
provide_context(SidenavContext { state });
|
||||||
/* ========================================================== */
|
let class = tw_merge!("flex min-h-screen w-full bg-background", class);
|
||||||
|
view! { <div class=class>{children()}</div> }
|
||||||
|
}
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn SidenavLink(
|
pub fn Sidenav(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
|
||||||
children: Children,
|
let ctx = expect_context::<SidenavContext>();
|
||||||
#[prop(into)] href: String,
|
let class_signal = move || {
|
||||||
#[prop(optional, into)] class: String,
|
let width_class = match ctx.state.get() {
|
||||||
) -> impl IntoView {
|
SidenavState::Expanded => "w-[var(--sidenav-width)]",
|
||||||
let merged_class = tw_merge!(
|
SidenavState::Collapsed => "w-[var(--sidenav-width-icon)]",
|
||||||
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-hidden ring-sidenav-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidenav-accent active:text-sidenav-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidenav=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidenav-accent aria-[current=page]:font-semibold aria-[current=page]:text-sidenav-accent-foreground data-[state=open]:hover:bg-sidenav-accent data-[state=open]:hover:text-sidenav-accent-foreground group-data-[collapsible=Icon]:size-8! group-data-[collapsible=Icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidenav-accent hover:text-sidenav-accent-foreground h-8 text-sm",
|
};
|
||||||
class
|
tw_merge!(
|
||||||
);
|
"hidden md:flex flex-col border-r bg-card transition-all duration-300",
|
||||||
|
width_class,
|
||||||
let location = use_location();
|
class.clone()
|
||||||
|
)
|
||||||
// Check if the link is active based on current path
|
|
||||||
let href_clone = href.clone();
|
|
||||||
let is_active = move || {
|
|
||||||
let path = location.pathname.get();
|
|
||||||
path == href_clone || path.starts_with(&format!("{}/", href_clone))
|
|
||||||
};
|
};
|
||||||
|
view! { <aside class=class_signal>{children()}</aside> }
|
||||||
let aria_current = move || if is_active() { "page" } else { "false" };
|
|
||||||
|
|
||||||
view! {
|
|
||||||
<a data-name="SidenavLink" class=merged_class href=href aria-current=aria_current>
|
|
||||||
{children()}
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
variants! {
|
|
||||||
SidenavMenuButton {
|
|
||||||
base: "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidenav-ring transition-[width,height,padding] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground focus-visible:ring-2 active:bg-sidenav-accent active:text-sidenav-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidenav=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidenav-accent aria-[current=page]:font-medium aria-[current=page]:text-sidenav-accent-foreground data-[state=open]:hover:bg-sidenav-accent data-[state=open]:hover:text-sidenav-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=Icon]:size-8! group-data-[collapsible=Icon]:p-0! [&>svg]:stroke-2 aria-[current=page]:[&>svg]:stroke-[2.7]",
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
Default: "hover:bg-sidenav-accent hover:text-sidenav-accent-foreground", // Already in base
|
|
||||||
Outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidenav-border))] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidenav-accent))]",
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
Default: "h-8 text-sm",
|
|
||||||
Sm: "h-7 text-xs",
|
|
||||||
Lg: "h-12",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
component: {
|
|
||||||
element: button,
|
|
||||||
support_href: true,
|
|
||||||
support_aria_current: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========================================================== */
|
|
||||||
/* ✨ FUNCTIONS ✨ */
|
|
||||||
/* ========================================================== */
|
|
||||||
|
|
||||||
#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, strum::IntoStaticStr)]
|
|
||||||
pub enum SidenavVariant {
|
|
||||||
#[default]
|
|
||||||
Sidenav,
|
|
||||||
Floating,
|
|
||||||
Inset,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
|
|
||||||
pub enum SidenavSide {
|
|
||||||
#[default]
|
|
||||||
Left,
|
|
||||||
Right,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[derive(Default, Clone, Copy, PartialEq, Eq, strum::Display)]
|
|
||||||
pub enum SidenavCollapsible {
|
|
||||||
#[default]
|
|
||||||
Offcanvas,
|
|
||||||
None,
|
|
||||||
Icon,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn Sidenav(
|
pub fn SidenavInset(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
|
||||||
#[prop(into, optional)] class: String,
|
let class = tw_merge!("flex flex-col flex-1 min-w-0", class);
|
||||||
#[prop(default = SidenavVariant::default())] variant: SidenavVariant,
|
view! { <main class=class>{children()}</main> }
|
||||||
#[prop(default = SidenavState::default())] data_state: SidenavState,
|
}
|
||||||
#[prop(default = SidenavSide::default())] data_side: SidenavSide,
|
|
||||||
#[prop(default = SidenavCollapsible::default())] data_collapsible: SidenavCollapsible,
|
#[component] pub fn SidenavHeader(children: Children) -> impl IntoView { view! { <div class="flex flex-col">{children()}</div> } }
|
||||||
|
#[component] pub fn SidenavContent(children: Children) -> impl IntoView { view! { <div class="flex-1 overflow-auto">{children()}</div> } }
|
||||||
|
#[component] pub fn SidenavFooter(children: Children) -> impl IntoView { view! { <div class="mt-auto">{children()}</div> } }
|
||||||
|
#[component] pub fn SidenavGroup(children: Children) -> impl IntoView { view! { <div class="px-2 py-2">{children()}</div> } }
|
||||||
|
#[component] pub fn SidenavGroupLabel(children: Children) -> impl IntoView { view! { <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{children()}</div> } }
|
||||||
|
#[component] pub fn SidenavGroupContent(children: Children) -> impl IntoView { view! { <div class="space-y-1">{children()}</div> } }
|
||||||
|
#[component] pub fn SidenavMenu(children: Children) -> impl IntoView { view! { <nav class="grid gap-1">{children()}</nav> } }
|
||||||
|
#[component] pub fn SidenavMenuItem(children: Children) -> impl IntoView { view! { <div>{children()}</div> } }
|
||||||
|
|
||||||
|
#[derive(Clone, Copy, PartialEq, Eq, Default)]
|
||||||
|
pub enum SidenavMenuButtonVariant { #[default] Default, Outline }
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn SidenavMenuButton(
|
||||||
children: Children,
|
children: Children,
|
||||||
|
#[prop(into, optional)] variant: Signal<SidenavMenuButtonVariant>,
|
||||||
|
#[prop(into, optional)] class: Signal<String>,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
view! {
|
let class_signal = move || {
|
||||||
{if data_collapsible == SidenavCollapsible::None {
|
let variant_class = if variant.get() == SidenavMenuButtonVariant::Outline {
|
||||||
view! {
|
"border border-input bg-background shadow-xs"
|
||||||
<aside
|
} else {
|
||||||
data-name="Sidenav"
|
""
|
||||||
class=tw_merge!(
|
};
|
||||||
"flex flex-col h-full bg-sidenav text-sidenav-foreground w-(--sidenav-width)", class.clone()
|
tw_merge!(
|
||||||
)
|
"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
|
||||||
>
|
variant_class,
|
||||||
{children()}
|
class.get()
|
||||||
</aside>
|
)
|
||||||
}
|
};
|
||||||
.into_any()
|
view! { <button class=class_signal>{children()}</button> }
|
||||||
} else {
|
|
||||||
view! {
|
|
||||||
<aside
|
|
||||||
data-name="Sidenav"
|
|
||||||
data-sidenav=data_state.to_string()
|
|
||||||
data-side=data_side.to_string()
|
|
||||||
class="hidden md:block group peer text-sidenav-foreground data-[state=Collapsed]:hidden"
|
|
||||||
>
|
|
||||||
// * SidenavGap: This is what handles the sidenav gap on desktop
|
|
||||||
<div
|
|
||||||
data-name="SidenavGap"
|
|
||||||
class=tw_merge!(
|
|
||||||
"relative w-(--sidenav-width) bg-transparent transition-[width] duration-200 ease-linear",
|
|
||||||
"group-data-[collapsible=Offcanvas]:w-0",
|
|
||||||
"group-data-[side=Right]:rotate-180",
|
|
||||||
match variant {
|
|
||||||
SidenavVariant::Sidenav => "group-data-[collapsible=Icon]:w-(--sidenav-width-icon)",
|
|
||||||
SidenavVariant::Floating | SidenavVariant::Inset =>
|
|
||||||
"group-data-[collapsible=Icon]:w-[calc(var(--sidenav-width-icon)+(--spacing(4)))]",
|
|
||||||
}
|
|
||||||
)
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
data-name="SidenavContainer"
|
|
||||||
class=tw_merge!(
|
|
||||||
"fixed inset-y-0 z-10 hidden h-svh w-(--sidenav-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
||||||
class,
|
|
||||||
match data_side {
|
|
||||||
SidenavSide::Left => "left-0 group-data-[collapsible=Offcanvas]:left-[calc(var(--sidenav-width)*-1)]",
|
|
||||||
SidenavSide::Right => "right-0 group-data-[collapsible=Offcanvas]:right-[calc(var(--sidenav-width)*-1)]"
|
|
||||||
},
|
|
||||||
match variant {
|
|
||||||
SidenavVariant::Sidenav => "group-data-[collapsible=Icon]:w-(--sidenav-width-icon) group-data-[side=Left]:border-r group-data-[side=Right]:border-l",
|
|
||||||
SidenavVariant::Floating | SidenavVariant::Inset =>
|
|
||||||
"p-2 group-data-[collapsible=Icon]:w-[calc(var(--sidenav-width-icon)+(--spacing(4))+2px)]",
|
|
||||||
},
|
|
||||||
)
|
|
||||||
>
|
|
||||||
// * Act as a Sidenav for the onclick trigger to work with nested Sidenavs.
|
|
||||||
<SidenavInner attr:data-sidenav="Sidenav" attr:data-variant=variant.to_string()>
|
|
||||||
{children()}
|
|
||||||
<SidenavToggleRail />
|
|
||||||
</SidenavInner>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
}
|
|
||||||
.into_any()
|
|
||||||
}}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========================================================== */
|
#[component] pub fn SidenavLink(children: Children, #[prop(into)] href: String) -> impl IntoView {
|
||||||
/* ✨ FUNCTIONS ✨ */
|
view! { <a href=href class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-accent">{children()}</a> }
|
||||||
/* ========================================================== */
|
|
||||||
|
|
||||||
#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
|
|
||||||
pub enum SidenavState {
|
|
||||||
#[default]
|
|
||||||
Expanded,
|
|
||||||
Collapsed,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const ONCLICK_TRIGGER: &str = "document.querySelector('[data-name=\"Sidenav\"]').setAttribute('data-state', document.querySelector('[data-name=\"Sidenav\"]').getAttribute('data-state') === 'Collapsed' ? 'Expanded' : 'Collapsed')";
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
pub fn SidenavTrigger(children: Children) -> impl IntoView {
|
|
||||||
view! {
|
|
||||||
// TODO. Use Button.
|
|
||||||
|
|
||||||
<button
|
|
||||||
onclick=ONCLICK_TRIGGER
|
|
||||||
data-name="SidenavTrigger"
|
|
||||||
class="inline-flex gap-2 justify-center items-center -ml-1 text-sm font-medium whitespace-nowrap rounded-md transition-all outline-none disabled:opacity-50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 aria-invalid:ring-destructive/20 aria-invalid:border-destructive size-7 dark:aria-invalid:ring-destructive/40 dark:hover:bg-accent/50 hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
|
|
||||||
>
|
|
||||||
{children()}
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[component]
|
|
||||||
fn SidenavToggleRail() -> impl IntoView {
|
|
||||||
view! {
|
|
||||||
<button
|
|
||||||
data-name="SidenavToggleRail"
|
|
||||||
aria-label="Toggle Sidenav"
|
|
||||||
tabindex="-1"
|
|
||||||
onclick=ONCLICK_TRIGGER
|
|
||||||
class="hidden absolute inset-y-0 z-20 w-4 transition-all ease-linear -translate-x-1/2 sm:flex group-data-[side=Left]:-right-4 group-data-[side=Right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] in-data-[side=Left]:cursor-w-resize in-data-[side=Right]:cursor-e-resize [[data-side=Left][data-state=Collapsed]_&]:cursor-e-resize [[data-side=Right][data-state=Collapsed]_&]:cursor-w-resize group-data-[collapsible=Offcanvas]:translate-x-0 group-data-[collapsible=Offcanvas]:after:left-full [[data-side=Left][data-collapsible=Offcanvas]_&]:-right-2 [[data-side=Right][data-collapsible=Offcanvas]_&]:-left-0eft-2 hover:after:bg-sidenav-border hover:group-data-[collapsible=Offcanvas]:bg-sidenav"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -153,8 +153,7 @@ pub fn provide_torrent_store() {
|
|||||||
|
|
||||||
pub async fn is_push_subscribed() -> Result<bool, String> {
|
pub async fn is_push_subscribed() -> Result<bool, String> {
|
||||||
let window = web_sys::window().ok_or("no window")?;
|
let window = web_sys::window().ok_or("no window")?;
|
||||||
let navigator = window.navigator();
|
let sw_container = window.navigator().service_worker();
|
||||||
let sw_container = navigator.service_worker();
|
|
||||||
|
|
||||||
let registration = wasm_bindgen_futures::JsFuture::from(sw_container.ready().map_err(|e| format!("{:?}", e))?)
|
let registration = wasm_bindgen_futures::JsFuture::from(sw_container.ready().map_err(|e| format!("{:?}", e))?)
|
||||||
.await
|
.await
|
||||||
@@ -172,8 +171,7 @@ pub async fn is_push_subscribed() -> Result<bool, String> {
|
|||||||
|
|
||||||
pub async fn subscribe_to_push_notifications() {
|
pub async fn subscribe_to_push_notifications() {
|
||||||
let window = web_sys::window().expect("no window");
|
let window = web_sys::window().expect("no window");
|
||||||
let navigator = window.navigator();
|
let sw_container = window.navigator().service_worker();
|
||||||
let sw_container = navigator.service_worker();
|
|
||||||
|
|
||||||
let registration = match wasm_bindgen_futures::JsFuture::from(sw_container.ready().expect("sw not ready")).await {
|
let registration = match wasm_bindgen_futures::JsFuture::from(sw_container.ready().expect("sw not ready")).await {
|
||||||
Ok(reg) => reg.dyn_into::<web_sys::ServiceWorkerRegistration>().expect("not a reg"),
|
Ok(reg) => reg.dyn_into::<web_sys::ServiceWorkerRegistration>().expect("not a reg"),
|
||||||
@@ -181,8 +179,7 @@ pub async fn subscribe_to_push_notifications() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 1. Get Public Key from Backend
|
// 1. Get Public Key from Backend
|
||||||
let public_key_res: Result<String, _> = shared::server_fns::push::get_public_key().await;
|
let public_key = match shared::server_fns::push::get_public_key().await {
|
||||||
let public_key = match public_key_res {
|
|
||||||
Ok(key) => key,
|
Ok(key) => key,
|
||||||
Err(e) => { log::error!("Failed to get public key: {:?}", e); return; }
|
Err(e) => { log::error!("Failed to get public key: {:?}", e); return; }
|
||||||
};
|
};
|
||||||
|
|||||||
1001
package-lock.json
generated
1001
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"dependencies": {
|
|
||||||
"@tailwindcss/cli": "^4.1.18",
|
|
||||||
"tailwindcss": "^4.1.18",
|
|
||||||
"tw-animate-css": "^1.4.0"
|
|
||||||
},
|
|
||||||
"type": "module"
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
base_color = "neutral"
|
|
||||||
base_path_components = "backend/src/components"
|
|
||||||
Reference in New Issue
Block a user