Compare commits
10 Commits
release-20
...
release-20
| Author | SHA1 | Date | |
|---|---|---|---|
|
322e0ab4a3 | ||
|
|
89f0a5423d | ||
|
|
80f9e5cda2 | ||
|
|
a12265573c | ||
|
|
e45ec46793 | ||
|
|
0e075d6092 | ||
|
|
dbbc722f50 | ||
|
|
dd3b3f3504 | ||
|
|
bb9e06c9ed | ||
|
|
a834d185e3 |
@@ -1,5 +1,9 @@
|
||||
use leptos::prelude::*;
|
||||
use crate::components::ui::context_menu::*;
|
||||
use crate::components::ui::context_menu::{
|
||||
ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger,
|
||||
};
|
||||
use crate::components::ui::button_action::ButtonAction;
|
||||
use crate::components::ui::button::ButtonVariant;
|
||||
|
||||
#[component]
|
||||
pub fn TorrentContextMenu(
|
||||
@@ -7,72 +11,55 @@ pub fn TorrentContextMenu(
|
||||
torrent_hash: String,
|
||||
on_action: Callback<(String, String)>,
|
||||
) -> impl IntoView {
|
||||
let hash = StoredValue::new(torrent_hash);
|
||||
let hash_c1 = torrent_hash.clone();
|
||||
let hash_c2 = torrent_hash.clone();
|
||||
let hash_c3 = torrent_hash.clone();
|
||||
let hash_c4 = torrent_hash.clone();
|
||||
|
||||
let menu_action = move |action: &'static str| {
|
||||
on_action.run((action.to_string(), hash.get_value()));
|
||||
};
|
||||
let on_action_stored = StoredValue::new(on_action);
|
||||
|
||||
view! {
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger>
|
||||
{children()}
|
||||
</ContextMenuTrigger>
|
||||
|
||||
<ContextMenuContent class="w-56">
|
||||
<ContextMenuAction
|
||||
class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
|
||||
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"
|
||||
</ContextMenuAction>
|
||||
<ContextMenuContent class="w-56 p-1.5">
|
||||
<ContextMenuItem on:click={let h = hash_c1; move |_| on_action_stored.get_value().run(("start".to_string(), h.clone()))}>
|
||||
"Başlat"
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem on:click={let h = hash_c2; move |_| on_action_stored.get_value().run(("stop".to_string(), h.clone()))}>
|
||||
"Durdur"
|
||||
</ContextMenuItem>
|
||||
|
||||
<div class="my-1.5 h-px bg-border/50" />
|
||||
|
||||
// --- Modern Hold-to-Action Buttons ---
|
||||
<div class="space-y-1">
|
||||
<ButtonAction
|
||||
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>
|
||||
|
||||
<ContextMenuAction
|
||||
class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
|
||||
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"
|
||||
</ContextMenuAction>
|
||||
|
||||
<ContextMenuAction
|
||||
class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
|
||||
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"
|
||||
</ContextMenuAction>
|
||||
|
||||
<div class="-mx-1 my-1 h-px bg-border" />
|
||||
|
||||
<ContextMenuAction
|
||||
class="px-2 py-1.5 text-destructive hover:bg-destructive/10 hover:text-destructive rounded-sm"
|
||||
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"
|
||||
</ContextMenuAction>
|
||||
|
||||
<ContextMenuHoldAction
|
||||
class="text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
on_hold_complete=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"
|
||||
<span class="ml-auto text-[10px] opacity-50">"Hold"</span>
|
||||
</ContextMenuHoldAction>
|
||||
<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>
|
||||
</ContextMenu>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,24 +6,12 @@ pub fn Footer() -> impl IntoView {
|
||||
let year = chrono::Local::now().format("%Y").to_string();
|
||||
|
||||
view! {
|
||||
<footer class="mt-auto px-4 py-6 md:px-8">
|
||||
<Separator class="mb-6 opacity-50" />
|
||||
<div class="flex flex-col items-center justify-between gap-4 md:flex-row">
|
||||
<p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
|
||||
{format!("© {} VibeTorrent. Tüm hakları saklıdır.", year)}
|
||||
</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>
|
||||
<footer class="mt-auto pb-6 px-4">
|
||||
<Separator class="mb-4 opacity-30" />
|
||||
<div class="flex items-center justify-center gap-2 text-[10px] uppercase tracking-widest text-muted-foreground/60 font-medium">
|
||||
<span>{format!("© {} VibeTorrent", year)}</span>
|
||||
<span class="size-1 rounded-full bg-muted-foreground/30" />
|
||||
<span>"v3.0.0-beta"</span>
|
||||
</div>
|
||||
</footer>
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ use leptos::task::spawn_local;
|
||||
use crate::components::ui::sidenav::*;
|
||||
use crate::components::ui::button::{Button, ButtonVariant, ButtonSize};
|
||||
use crate::components::ui::theme_toggle::ThemeToggle;
|
||||
use crate::components::ui::switch::Switch;
|
||||
|
||||
#[component]
|
||||
pub fn Sidebar() -> impl IntoView {
|
||||
@@ -65,6 +66,19 @@ pub fn Sidebar() -> impl IntoView {
|
||||
username().chars().next().unwrap_or('?').to_uppercase().to_string()
|
||||
};
|
||||
|
||||
let on_push_toggle = move |checked: bool| {
|
||||
spawn_local(async move {
|
||||
if checked {
|
||||
crate::store::subscribe_to_push_notifications().await;
|
||||
} else {
|
||||
crate::store::unsubscribe_from_push_notifications().await;
|
||||
}
|
||||
if let Ok(enabled) = crate::store::is_push_subscribed().await {
|
||||
store.push_enabled.set(enabled);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
view! {
|
||||
<SidenavHeader>
|
||||
<div class="flex items-center gap-2 px-2 py-4">
|
||||
@@ -133,35 +147,49 @@ pub fn Sidebar() -> impl IntoView {
|
||||
</SidenavContent>
|
||||
|
||||
<SidenavFooter>
|
||||
<div class="flex items-center gap-3 p-2 rounded-lg border bg-muted/30 shadow-xs overflow-hidden">
|
||||
<div class="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium shrink-0 border border-primary-foreground/10">
|
||||
{first_letter}
|
||||
<div class="flex flex-col gap-4 p-4">
|
||||
// Push Notification Toggle
|
||||
<div class="flex items-center justify-between px-2 py-1 bg-muted/20 rounded-md border border-border/50">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider text-foreground/70">"Bildirimler"</span>
|
||||
<span class="text-[9px] text-muted-foreground">"Web Push"</span>
|
||||
</div>
|
||||
<Switch
|
||||
checked=Signal::from(store.push_enabled)
|
||||
on_checked_change=Callback::new(on_push_toggle)
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div class="font-medium text-[11px] truncate text-foreground leading-tight">{username}</div>
|
||||
<div class="text-[9px] text-muted-foreground truncate opacity-70">"Yönetici"</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<ThemeToggle />
|
||||
|
||||
<div class="flex items-center gap-3 p-2 rounded-lg border bg-muted/30 shadow-xs overflow-hidden">
|
||||
<div class="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium shrink-0 border border-primary-foreground/10">
|
||||
{first_letter}
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div class="font-medium text-[11px] truncate text-foreground leading-tight">{username}</div>
|
||||
<div class="text-[9px] text-muted-foreground truncate opacity-70">"Yönetici"</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant=ButtonVariant::Ghost
|
||||
size=ButtonSize::Icon
|
||||
class="size-7 text-destructive hover:bg-destructive/10"
|
||||
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="size-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>
|
||||
<div class="flex items-center gap-1">
|
||||
<ThemeToggle />
|
||||
|
||||
<Button
|
||||
variant=ButtonVariant::Ghost
|
||||
size=ButtonSize::Icon
|
||||
class="size-7 text-destructive hover:bg-destructive/10"
|
||||
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="size-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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SidenavFooter>
|
||||
|
||||
@@ -544,14 +544,14 @@ pub fn TorrentTable() -> impl IntoView {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-4">
|
||||
<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="flex gap-3 md:gap-4">
|
||||
<span>{move || format!("Toplam: {} torrent", filtered_hashes.get().len())}</span>
|
||||
<Show when=move || has_selection.get()>
|
||||
<span class="text-primary font-medium">{move || format!("{} torrent seçili", selected_count.get())}</span>
|
||||
<span class="text-primary font-bold">{move || format!("{} seçili", selected_count.get())}</span>
|
||||
</Show>
|
||||
</div>
|
||||
<div>"VibeTorrent v3"</div>
|
||||
<div class="opacity-50">"VibeTorrent v3"</div>
|
||||
</div>
|
||||
</div>
|
||||
}.into_any()
|
||||
|
||||
72
frontend/src/components/ui/button_action.rs
Normal file
72
frontend/src/components/ui/button_action.rs
Normal file
@@ -0,0 +1,72 @@
|
||||
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,76 +78,6 @@ 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)]
|
||||
struct ContextMenuContext {
|
||||
target_id: String,
|
||||
@@ -397,7 +327,7 @@ pub fn ContextMenuContent(
|
||||
target_id_for_script,
|
||||
)}
|
||||
</script>
|
||||
}.into_any()
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
|
||||
@@ -2,6 +2,7 @@ pub mod accordion;
|
||||
pub mod alert_dialog;
|
||||
pub mod badge;
|
||||
pub mod button;
|
||||
pub mod button_action;
|
||||
pub mod card;
|
||||
pub mod checkbox;
|
||||
pub mod context_menu;
|
||||
@@ -17,6 +18,7 @@ pub mod sheet;
|
||||
pub mod sidenav;
|
||||
pub mod skeleton;
|
||||
pub mod svg_icon;
|
||||
pub mod switch;
|
||||
pub mod table;
|
||||
pub mod theme_toggle;
|
||||
pub mod toast;
|
||||
42
frontend/src/components/ui/switch.rs
Normal file
42
frontend/src/components/ui/switch.rs
Normal file
@@ -0,0 +1,42 @@
|
||||
use leptos::prelude::*;
|
||||
use tailwind_fuse::tw_merge;
|
||||
|
||||
#[component]
|
||||
pub fn Switch(
|
||||
#[prop(into)] checked: Signal<bool>,
|
||||
#[prop(into, optional)] on_checked_change: Option<Callback<bool>>,
|
||||
#[prop(into, optional)] class: String,
|
||||
#[prop(into, optional)] disabled: Signal<bool>,
|
||||
) -> impl IntoView {
|
||||
let checked_val = move || checked.get();
|
||||
let disabled_val = move || disabled.get();
|
||||
|
||||
let track_class = move || tw_merge!(
|
||||
"inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
|
||||
if checked_val() { "bg-primary" } else { "bg-input" },
|
||||
class.clone()
|
||||
);
|
||||
|
||||
let thumb_class = move || tw_merge!(
|
||||
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
|
||||
if checked_val() { "translate-x-4" } else { "translate-x-0" }
|
||||
);
|
||||
|
||||
view! {
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked=move || checked_val().to_string()
|
||||
disabled=disabled_val
|
||||
class=track_class
|
||||
on:click=move |e| {
|
||||
e.prevent_default();
|
||||
if let Some(cb) = on_checked_change {
|
||||
cb.run(!checked_val());
|
||||
}
|
||||
}
|
||||
>
|
||||
<span class=thumb_class />
|
||||
</button>
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,9 @@ use leptos::task::spawn_local;
|
||||
use shared::{AppEvent, GlobalStats, NotificationLevel, Torrent};
|
||||
use std::collections::HashMap;
|
||||
use struct_patch::traits::Patch;
|
||||
use base64::{Engine as _, engine::general_purpose::URL_SAFE_NO_PAD as BASE64_URL};
|
||||
use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};
|
||||
use wasm_bindgen::JsCast;
|
||||
|
||||
use crate::components::ui::toast::{ToastType, toast};
|
||||
|
||||
@@ -24,8 +26,6 @@ pub fn show_toast(level: NotificationLevel, message: impl Into<String>) {
|
||||
toast(msg, variant);
|
||||
}
|
||||
|
||||
|
||||
|
||||
pub fn toast_success(message: impl Into<String>) { show_toast(NotificationLevel::Success, message); }
|
||||
pub fn toast_error(message: impl Into<String>) { show_toast(NotificationLevel::Error, message); }
|
||||
|
||||
@@ -54,6 +54,7 @@ pub struct TorrentStore {
|
||||
pub global_stats: RwSignal<GlobalStats>,
|
||||
pub user: RwSignal<Option<String>>,
|
||||
pub selected_torrent: RwSignal<Option<String>>,
|
||||
pub push_enabled: RwSignal<bool>,
|
||||
}
|
||||
|
||||
pub fn provide_torrent_store() {
|
||||
@@ -63,12 +64,20 @@ pub fn provide_torrent_store() {
|
||||
let global_stats = RwSignal::new(GlobalStats::default());
|
||||
let user = RwSignal::new(Option::<String>::None);
|
||||
let selected_torrent = RwSignal::new(Option::<String>::None);
|
||||
let push_enabled = RwSignal::new(false);
|
||||
|
||||
let show_browser_notification = crate::utils::notification::use_app_notification();
|
||||
|
||||
let store = TorrentStore { torrents, filter, search_query, global_stats, user, selected_torrent };
|
||||
let store = TorrentStore { torrents, filter, search_query, global_stats, user, selected_torrent, push_enabled };
|
||||
provide_context(store);
|
||||
|
||||
// Initial check for push status
|
||||
spawn_local(async move {
|
||||
if let Ok(enabled) = is_push_subscribed().await {
|
||||
push_enabled.set(enabled);
|
||||
}
|
||||
});
|
||||
|
||||
let global_stats_for_sse = global_stats;
|
||||
let torrents_for_sse = torrents;
|
||||
let show_browser_notification = show_browser_notification.clone();
|
||||
@@ -79,17 +88,12 @@ pub fn provide_torrent_store() {
|
||||
let mut disconnect_notified = false;
|
||||
|
||||
loop {
|
||||
|
||||
log::debug!("SSE: Creating EventSource...");
|
||||
let es_result = EventSource::new("/api/events");
|
||||
match es_result {
|
||||
Ok(mut es) => {
|
||||
log::debug!("SSE: EventSource created, subscribing...");
|
||||
if let Ok(mut stream) = es.subscribe("message") {
|
||||
log::debug!("SSE: Subscribed to message channel");
|
||||
let mut got_first_message = false;
|
||||
while let Some(Ok((_, msg))) = stream.next().await {
|
||||
log::debug!("SSE: Received message");
|
||||
if !got_first_message {
|
||||
got_first_message = true;
|
||||
backoff_ms = 1000;
|
||||
@@ -101,47 +105,30 @@ pub fn provide_torrent_store() {
|
||||
}
|
||||
|
||||
if let Some(data_str) = msg.data().as_string() {
|
||||
// Decode Base64
|
||||
match BASE64.decode(&data_str) {
|
||||
Ok(bytes) => {
|
||||
// Deserialize MessagePack
|
||||
match rmp_serde::from_slice::<AppEvent>(&bytes) {
|
||||
Ok(event) => {
|
||||
match event {
|
||||
AppEvent::FullList(list, _) => {
|
||||
log::info!("SSE: Received FullList with {} torrents", list.len());
|
||||
torrents_for_sse.update(|map| {
|
||||
let new_hashes: std::collections::HashSet<String> = list.iter().map(|t| t.hash.clone()).collect();
|
||||
map.retain(|hash, _| new_hashes.contains(hash));
|
||||
for new_torrent in list {
|
||||
map.insert(new_torrent.hash.clone(), new_torrent);
|
||||
}
|
||||
});
|
||||
log::debug!("SSE: torrents map now has {} entries", torrents_for_sse.with(|m| m.len()));
|
||||
}
|
||||
AppEvent::Update(patch) => {
|
||||
let hash_opt = patch.hash.clone();
|
||||
if let Some(hash) = hash_opt {
|
||||
torrents_for_sse.update(|map| {
|
||||
if let Some(t) = map.get_mut(&hash) {
|
||||
t.apply(patch);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
AppEvent::Stats(stats) => { global_stats_for_sse.set(stats); }
|
||||
AppEvent::Notification(n) => {
|
||||
show_toast(n.level.clone(), n.message.clone());
|
||||
if n.message.contains("tamamlandı") || n.level == shared::NotificationLevel::Error {
|
||||
show_browser_notification("VibeTorrent", &n.message);
|
||||
}
|
||||
}
|
||||
if let Ok(bytes) = BASE64.decode(&data_str) {
|
||||
if let Ok(event) = rmp_serde::from_slice::<AppEvent>(&bytes) {
|
||||
match event {
|
||||
AppEvent::FullList(list, _) => {
|
||||
torrents_for_sse.update(|map| {
|
||||
let new_hashes: std::collections::HashSet<String> = list.iter().map(|t| t.hash.clone()).collect();
|
||||
map.retain(|hash, _| new_hashes.contains(hash));
|
||||
for new_torrent in list { map.insert(new_torrent.hash.clone(), new_torrent); }
|
||||
});
|
||||
}
|
||||
AppEvent::Update(patch) => {
|
||||
if let Some(hash) = patch.hash.clone() {
|
||||
torrents_for_sse.update(|map| { if let Some(t) = map.get_mut(&hash) { t.apply(patch); } });
|
||||
}
|
||||
}
|
||||
AppEvent::Stats(stats) => { global_stats_for_sse.set(stats); }
|
||||
AppEvent::Notification(n) => {
|
||||
show_toast(n.level.clone(), n.message.clone());
|
||||
if n.message.contains("tamamlandı") || n.level == shared::NotificationLevel::Error {
|
||||
show_browser_notification("VibeTorrent", &n.message);
|
||||
}
|
||||
}
|
||||
Err(e) => log::error!("SSE: Failed to deserialize MessagePack: {}", e),
|
||||
}
|
||||
}
|
||||
Err(e) => log::error!("SSE: Failed to decode Base64: {}", e),
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -158,13 +145,106 @@ pub fn provide_torrent_store() {
|
||||
}
|
||||
}
|
||||
}
|
||||
log::debug!("SSE: Reconnecting in {}ms...", backoff_ms);
|
||||
gloo_timers::future::TimeoutFuture::new(backoff_ms).await;
|
||||
backoff_ms = std::cmp::min(backoff_ms * 2, 30000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
pub async fn subscribe_to_push_notifications() {
|
||||
// ...
|
||||
pub async fn is_push_subscribed() -> Result<bool, String> {
|
||||
let window = web_sys::window().ok_or("no window")?;
|
||||
let navigator = window.navigator();
|
||||
let sw_container = navigator.service_worker();
|
||||
|
||||
let registration = wasm_bindgen_futures::JsFuture::from(sw_container.ready().map_err(|e| format!("{:?}", e))?)
|
||||
.await
|
||||
.map_err(|e| format!("{:?}", e))?
|
||||
.dyn_into::<web_sys::ServiceWorkerRegistration>()
|
||||
.map_err(|_| "not a registration")?;
|
||||
|
||||
let push_manager = registration.push_manager().map_err(|e| format!("{:?}", e))?;
|
||||
let subscription = wasm_bindgen_futures::JsFuture::from(push_manager.get_subscription().map_err(|e| format!("{:?}", e))?)
|
||||
.await
|
||||
.map_err(|e| format!("{:?}", e))?;
|
||||
|
||||
Ok(!subscription.is_null())
|
||||
}
|
||||
|
||||
pub async fn subscribe_to_push_notifications() {
|
||||
let window = web_sys::window().expect("no window");
|
||||
let navigator = window.navigator();
|
||||
let sw_container = navigator.service_worker();
|
||||
|
||||
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"),
|
||||
Err(e) => { log::error!("SW Ready Error: {:?}", e); return; }
|
||||
};
|
||||
|
||||
// 1. Get Public Key from Backend
|
||||
let public_key_res: Result<String, _> = shared::server_fns::push::get_public_key().await;
|
||||
let public_key = match public_key_res {
|
||||
Ok(key) => key,
|
||||
Err(e) => { log::error!("Failed to get public key: {:?}", e); return; }
|
||||
};
|
||||
|
||||
// 2. Convert base64 key to Uint8Array
|
||||
let decoded_key = BASE64_URL.decode(public_key.trim()).expect("invalid public key");
|
||||
let key_array = js_sys::Uint8Array::from(&decoded_key[..]);
|
||||
|
||||
// 3. Prepare Options
|
||||
let mut options = web_sys::PushSubscriptionOptionsInit::new();
|
||||
options.set_user_visible_only(true);
|
||||
options.set_application_server_key(&key_array.into());
|
||||
|
||||
// 4. Subscribe
|
||||
let push_manager = registration.push_manager().expect("no push manager");
|
||||
match wasm_bindgen_futures::JsFuture::from(push_manager.subscribe_with_options(&options).expect("subscribe failed")).await {
|
||||
Ok(subscription) => {
|
||||
let sub_js = subscription.clone();
|
||||
|
||||
// Use JS to extract JSON string representation
|
||||
let json_str = js_sys::JSON::stringify(&sub_js).expect("stringify failed").as_string().expect("not a string");
|
||||
let sub_obj: serde_json::Value = serde_json::from_str(&json_str).expect("serde from str failed");
|
||||
|
||||
let endpoint = sub_obj["endpoint"].as_str().expect("no endpoint").to_string();
|
||||
let p256dh = sub_obj["keys"]["p256dh"].as_str().expect("no p256dh").to_string();
|
||||
let auth = sub_obj["keys"]["auth"].as_str().expect("no auth").to_string();
|
||||
|
||||
// 5. Save to Backend
|
||||
match shared::server_fns::push::subscribe_push(endpoint, p256dh, auth).await {
|
||||
Ok(_) => {
|
||||
log::info!("Push subscription saved successfully");
|
||||
toast_success("Bildirimler aktif edildi");
|
||||
}
|
||||
Err(e) => log::error!("Failed to save subscription: {:?}", e),
|
||||
}
|
||||
}
|
||||
Err(e) => log::error!("Subscription Error: {:?}", e),
|
||||
}
|
||||
}
|
||||
|
||||
pub async fn unsubscribe_from_push_notifications() {
|
||||
let window = web_sys::window().expect("no window");
|
||||
let sw_container = window.navigator().service_worker();
|
||||
|
||||
let registration = wasm_bindgen_futures::JsFuture::from(sw_container.ready().expect("sw not ready")).await
|
||||
.unwrap().dyn_into::<web_sys::ServiceWorkerRegistration>().unwrap();
|
||||
|
||||
let push_manager = registration.push_manager().unwrap();
|
||||
if let Ok(sub_future) = push_manager.get_subscription() {
|
||||
if let Ok(subscription) = wasm_bindgen_futures::JsFuture::from(sub_future).await {
|
||||
if !subscription.is_null() {
|
||||
let sub = subscription.dyn_into::<web_sys::PushSubscription>().unwrap();
|
||||
let endpoint = sub.endpoint();
|
||||
|
||||
// 1. Unsubscribe in Browser
|
||||
let _ = wasm_bindgen_futures::JsFuture::from(sub.unsubscribe().unwrap()).await;
|
||||
|
||||
// 2. Remove from Backend
|
||||
let _ = shared::server_fns::push::unsubscribe_push(endpoint).await;
|
||||
log::info!("Push subscription removed");
|
||||
show_toast(NotificationLevel::Info, "Bildirimler kapatıldı");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,3 +20,13 @@ pub async fn subscribe_push(
|
||||
.await
|
||||
.map_err(|e| ServerFnError::new(format!("Failed to save subscription: {}", e)))
|
||||
}
|
||||
|
||||
#[server(UnsubscribePush, "/api/server_fns")]
|
||||
pub async fn unsubscribe_push(endpoint: String) -> Result<(), ServerFnError> {
|
||||
let db_ctx = expect_context::<crate::DbContext>();
|
||||
db_ctx
|
||||
.db
|
||||
.remove_push_subscription(&endpoint)
|
||||
.await
|
||||
.map_err(|e| ServerFnError::new(format!("Failed to remove subscription: {}", e)))
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user