fix: make torrent status bar visible on mobile

frontend/src/components/context_menu.rs

@@ -2,6 +2,8 @@ use leptos::prelude::*;
 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(
@@ -9,37 +11,54 @@ pub fn TorrentContextMenu(
     torrent_hash: String,
     on_action: Callback<(String, String)>,
 ) -> 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_c2 = torrent_hash.clone();
     let hash_c3 = torrent_hash.clone();
     let hash_c4 = torrent_hash.clone();
+    
+    let on_action_stored = StoredValue::new(on_action);
 
     view! {
         <ContextMenu>
             <ContextMenuTrigger>
                 {children()}
             </ContextMenuTrigger>
-            <ContextMenuContent class="w-48">
+            <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>
-                <ContextMenuItem class="text-destructive" on:click={let h = hash_c3; move |_| on_action_stored.get_value().run(("delete".to_string(), h.clone()))}>
+                
-                    "Sil"
+                <div class="my-1.5 h-px bg-border/50" />
-                </ContextMenuItem>
+                
-                <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()))}>
+                // --- Modern Hold-to-Action Buttons ---
-                    "Verilerle Birlikte Sil"
+                <div class="space-y-1">
-                </ContextMenuItem>
+                    <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>
+
+                    <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>
     }

frontend/src/components/layout/footer.rs

@@ -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">
+        <footer class="mt-auto pb-6 px-4">
-            <Separator class="mb-6 opacity-50" />
+            <Separator class="mb-4 opacity-30" />
-            <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
+            <div class="flex items-center justify-center gap-2 text-[10px] uppercase tracking-widest text-muted-foreground/60 font-medium">
-                <p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
+                <span>{format!("© {} VibeTorrent", year)}</span>
-                    {format!("© {} VibeTorrent. Tüm hakları saklıdır.", year)}
+                <span class="size-1 rounded-full bg-muted-foreground/30" />
-                </p>
+                <span>"v3.0.0-beta"</span>
-                <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>
         </footer>
     }

frontend/src/components/layout/sidebar.rs

@@ -155,7 +155,7 @@ pub fn Sidebar() -> impl IntoView {
                         <span class="text-[9px] text-muted-foreground">"Web Push"</span>
                     </div>
                     <Switch 
-                        checked=Signal::from(store.push_enabled)
+                        checked=Signal::from(store.push_enabled) 
                         on_checked_change=Callback::new(on_push_toggle)
                     />
                 </div>

frontend/src/components/torrent/table.rs

@@ -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 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-4">
+                <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()

frontend/src/components/ui/button_action.rs

@@ -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>
+    }
+}

frontend/src/components/ui/context_menu.rs

@@ -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]

frontend/src/components/ui/mod.rs

@@ -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;

frontend/src/components/ui/separator.rs

@@ -1,20 +1,35 @@
 use leptos::prelude::*;
-use tailwind_fuse::tw_merge;
+use tw_merge::*;
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, Debug)]
-pub enum SeparatorOrientation { #[default] Horizontal, Vertical }
 
 #[component]
 pub fn Separator(
     #[prop(into, optional)] orientation: Signal<SeparatorOrientation>,
     #[prop(into, optional)] class: String,
+    // children: Children,
 ) -> impl IntoView {
-    let class_signal = move || {
+    let merged_class = Memo::new(move |_| {
-        let orient_class = match orientation.get() {
+        let orientation = orientation.get();
-            SeparatorOrientation::Horizontal => "h-[1px] w-full",
+        let separator = SeparatorClass { orientation };
-            SeparatorOrientation::Vertical => "h-full w-[1px]",
+        separator.with_class(class.clone())
-        };
+    });
-        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,
+}

frontend/src/components/ui/sidenav.rs

@@ -1,79 +1,232 @@
 use leptos::prelude::*;
-use tw_merge::tw_merge;
+use leptos_router::hooks::use_location;
+use leptos_ui::{clx, variants, void};
 
-#[derive(Clone, Copy, PartialEq, Eq, Default)]
+mod components {
-#[allow(dead_code)]
+    use super::*;
-pub enum SidenavState { #[default] Expanded, Collapsed }
+    clx! {SidenavWrapper, div, "group/sidenav-wrapper has-data-[variant=Inset]:bg-sidenav flex h-full w-full"}
+    // 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"}
 
-#[derive(Clone)]
+    void! {SidenavInput, input,
-pub struct SidenavContext {
+        "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 state: RwSignal<SidenavState>,
+        "focus-visible:border-ring focus-visible:ring-ring/50",
+        "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"
+    }
 }
 
-#[component]
+pub use components::*;
-pub fn SidenavWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+
-    let state = RwSignal::new(SidenavState::Expanded);
+/* ========================================================== */
-    provide_context(SidenavContext { state });
+/*                     ✨ FUNCTIONS ✨                        */
-    let class = tw_merge!("flex min-h-screen w-full bg-background", class);
+/* ========================================================== */
-    view! { <div class=class>{children()}</div> }
-}
 
 #[component]
-pub fn Sidenav(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+pub fn SidenavLink(
-    let ctx = expect_context::<SidenavContext>();
-    let class_signal = move || {
-        let width_class = match ctx.state.get() {
-            SidenavState::Expanded => "w-[var(--sidenav-width)]",
-            SidenavState::Collapsed => "w-[var(--sidenav-width-icon)]",
-        };
-        tw_merge!(
-            "hidden md:flex flex-col border-r bg-card transition-all duration-300",
-            width_class,
-            class.clone()
-        )
-    };
-    view! { <aside class=class_signal>{children()}</aside> }
-}
-
-#[component]
-pub fn SidenavInset(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("flex flex-col flex-1 min-w-0", class);
-    view! { <main class=class>{children()}</main> }
-}
-
-#[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,
-    #[prop(into, optional)] variant: Signal<SidenavMenuButtonVariant>,
+    #[prop(into)] href: String,
-    #[prop(into, optional)] class: Signal<String>,
+    #[prop(optional, into)] class: String,
 ) -> impl IntoView {
-    let class_signal = move || {
+    let merged_class = tw_merge!(
-        let variant_class = if variant.get() == SidenavMenuButtonVariant::Outline { 
+        "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",
-            "border border-input bg-background shadow-xs" 
+        class
-        } else { 
+    );
-            "" 
+
-        };
+    let location = use_location();
-        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",
+    // Check if the link is active based on current path
-            variant_class,
+    let href_clone = href.clone();
-            class.get()
+    let is_active = move || {
-        )
+        let path = location.pathname.get();
+        path == href_clone || path.starts_with(&format!("{}/", href_clone))
     };
-    view! { <button class=class_signal>{children()}</button> }
+
+    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>
+    }
 }
 
-#[component] pub fn SidenavLink(children: Children, #[prop(into)] href: String) -> impl IntoView {
+variants! {
-    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> }
+    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]
+pub fn Sidenav(
+    #[prop(into, optional)] class: String,
+    #[prop(default = SidenavVariant::default())] variant: SidenavVariant,
+    #[prop(default = SidenavState::default())] data_state: SidenavState,
+    #[prop(default = SidenavSide::default())] data_side: SidenavSide,
+    #[prop(default = SidenavCollapsible::default())] data_collapsible: SidenavCollapsible,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        {if data_collapsible == SidenavCollapsible::None {
+            view! {
+                <aside
+                    data-name="Sidenav"
+                    class=tw_merge!(
+                        "flex flex-col h-full bg-sidenav text-sidenav-foreground w-(--sidenav-width)", class.clone()
+                    )
+                >
+                    {children()}
+                </aside>
+            }
+                .into_any()
+        } 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()
+        }}
+    }
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+#[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"
+        />
+    }
+}

frontend/src/store.rs

@@ -153,7 +153,8 @@ pub fn provide_torrent_store() {
 
 pub async fn is_push_subscribed() -> Result<bool, String> {
     let window = web_sys::window().ok_or("no window")?;
-    let sw_container = window.navigator().service_worker();
+    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
@@ -171,7 +172,8 @@ pub async fn is_push_subscribed() -> Result<bool, String> {
 
 pub async fn subscribe_to_push_notifications() {
     let window = web_sys::window().expect("no window");
-    let sw_container = window.navigator().service_worker();
+    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"),
@@ -179,7 +181,8 @@ pub async fn subscribe_to_push_notifications() {
     };
 
     // 1. Get Public Key from Backend
-    let public_key = match shared::server_fns::push::get_public_key().await {
+    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; }
     };