feat: implement stacked toast accumulation with hover expansion effect

frontend/index.html

@@ -25,6 +25,8 @@
     <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-512.png" />
+    <link data-trunk rel="copy-file" href="public/lock_scroll.js" />
+    <script src="/lock_scroll.js"></script>
     <link data-trunk rel="copy-file" href="sw.js" />
     <script>
         (function () {

frontend/src/components/layout/toolbar.rs

@@ -1,20 +1,12 @@
 use leptos::prelude::*;
 use crate::components::torrent::add_torrent::AddTorrentDialog;
+use crate::components::ui::button::{Button};
 
 #[component]
 pub fn Toolbar() -> impl IntoView {
     let show_add_modal = signal(false);
-    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
     let is_mobile_menu_open = use_context::<RwSignal<bool>>().expect("mobile menu state not provided");
 
-    let search_value = RwSignal::new(String::new());
-    
-    // Sync search_value to store
-    Effect::new(move |_| {
-        let val = search_value.get();
-        store.search_query.set(val);
-    });
-
     view! {
         <div class="flex min-h-14 h-auto items-center border-b border-border bg-background px-4" style="padding-top: env(safe-area-inset-top);">
             // Sol kısım: Menü butonu + Add Torrent
@@ -27,33 +19,20 @@ pub fn Toolbar() -> impl IntoView {
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                 </button>
                 
-                <button
-                    class="inline-flex items-center justify-center gap-2 h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all active:scale-[0.98]"
+                <Button
                     on:click=move |_| show_add_modal.1.set(true)
+                    class="gap-2"
                 >
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 md:w-5 md:h-5">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                     </svg>
                     <span class="hidden sm:inline">"Add Torrent"</span>
                     <span class="sm:hidden">"Add"</span>
-                </button>
+                </Button>
             </div>
 
-            // Sağ kısım: Search kutusu
+            // Sağ kısım boşaltıldı (arama kutusu kaldırıldı)
             <div class="flex flex-1 items-center justify-end gap-2">
-                <div class="hidden md:flex items-center gap-2 w-full max-w-xs">
-                    <div class="relative flex-1">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
-                        </svg>
-                        <input
-                            type="search"
-                            placeholder="Search..."
-                            class="file:text-foreground placeholder:text-muted-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2 md:text-sm pl-8"
-                            bind:value=search_value
-                        />
-                    </div>
-                </div>
             </div>
 
             <Show when=move || show_add_modal.0.get()>
@@ -61,4 +40,4 @@ pub fn Toolbar() -> impl IntoView {
             </Show>
         </div>
     }
-}
+}

frontend/src/components/torrent/table.rs

@@ -220,11 +220,9 @@ pub fn TorrentTable() -> impl IntoView {
                 <div class="flex items-center gap-2">
                     <Show when=move || has_selection.get()>
                         <DropdownMenu>
-                            <DropdownMenuTrigger>
-                                <Button variant=ButtonVariant::Secondary size=ButtonSize::Sm class="gap-2">
-                                    <Ellipsis class="size-4" />
-                                    {move || format!("Toplu İşlem ({})", selected_count.get())}
-                                </Button>
+                            <DropdownMenuTrigger class="gap-2 bg-secondary text-secondary-foreground border-none hover:bg-secondary/80">
+                                <Ellipsis class="size-4" />
+                                {move || format!("Toplu İşlem ({})", selected_count.get())}
                             </DropdownMenuTrigger>
                             <DropdownMenuContent class="w-48">
                                 <DropdownMenuLabel>"Seçili Torrentler"</DropdownMenuLabel>
@@ -239,10 +237,10 @@ pub fn TorrentTable() -> impl IntoView {
                                     <div class="my-1 h-px bg-border" />
                                     
                                     <AlertDialog>
-                                        <AlertDialogTrigger class="w-full">
-                                            <DropdownMenuItem class="text-destructive focus:bg-destructive/10">
-                                                <Trash2 class="mr-2 size-4" /> "Toplu Sil"
-                                            </DropdownMenuItem>
+                                        <AlertDialogTrigger class="w-full text-left">
+                                            <div class="inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm transition-colors text-destructive hover:bg-destructive/10 focus:bg-destructive/10">
+                                                <Trash2 class="size-4" /> "Toplu Sil"
+                                            </div>
                                         </AlertDialogTrigger>
                                         <AlertDialogContent>
                                             <AlertDialogHeader>
@@ -612,4 +610,4 @@ fn TorrentCard(
             }
         </Show>
     }.into_any()
-}
+}

frontend/src/components/ui/context_menu.rs

@@ -237,8 +237,6 @@ pub fn ContextMenuContent(
     let target_id_for_script = ctx.target_id.clone();
 
     view! {
-        <script src="/lock_scroll.js"></script>
-
         <div
             data-name="ContextMenuContent"
             class=class

frontend/src/components/ui/dropdown_menu.rs

@@ -280,8 +280,6 @@ pub fn DropdownMenuContent(
     };
 
     view! {
-        <script src="/hooks/lock_scroll.js"></script>
-
         <div
             data-name="DropdownMenuContent"
             class=class

frontend/src/components/ui/mod.rs

@@ -14,4 +14,4 @@ pub mod separator;
 pub mod svg_icon;
 pub mod table;
 pub mod theme_toggle;
-pub mod toast;
+pub mod toast;

frontend/src/components/ui/multi_select.rs

@@ -180,8 +180,6 @@ pub fn MultiSelectContent(children: Children, #[prop(optional, into)] class: Str
     let (on_scroll, can_scroll_up_signal, can_scroll_down_signal) = use_can_scroll_vertical();
 
     view! {
-        <script src="/lock_scroll.js"></script>
-
         <div
             data-name="MultiSelectContent"
             class=class

frontend/src/components/ui/select.rs

@@ -172,8 +172,6 @@ pub fn SelectContent(
     let (on_scroll, can_scroll_up_signal, can_scroll_down_signal) = use_can_scroll_vertical();
 
     view! {
-        <script src="/lock_scroll.js"></script>
-
         <div
             data-name="SelectContent"
             class=merged_class

frontend/src/components/ui/toast.rs

@@ -45,50 +45,66 @@ pub fn SonnerTrigger(
     index: usize,
     total: usize,
     position: SonnerPosition,
+    is_expanded: Signal<bool>,
     #[prop(optional)] on_dismiss: Option<Callback<()>>,
 ) -> impl IntoView {
     let variant_classes = match toast.variant {
         ToastType::Default => "bg-background text-foreground border-border",
-        ToastType::Success => "bg-background text-foreground border-border [&_.icon]:text-success",
+        ToastType::Success => "bg-background text-foreground border-border [&_.icon]:text-green-500",
         ToastType::Error => "bg-background text-foreground border-border [&_.icon]:text-destructive",
-        ToastType::Warning => "bg-background text-foreground border-border [&_.icon]:text-warning",
-        ToastType::Info => "bg-background text-foreground border-border [&_.icon]:text-info",
+        ToastType::Warning => "bg-background text-foreground border-border [&_.icon]:text-yellow-500",
+        ToastType::Info => "bg-background text-foreground border-border [&_.icon]:text-blue-500",
         ToastType::Loading => "bg-background text-foreground border-border",
     };
 
-    // Sonner Stacking Logic
-    // We calculate inverse index: 0 is the newest (top), 1 is older, etc.
-    let inverse_index = index; 
-    let offset = inverse_index as f64 * 16.0;
-    let scale = 1.0 - (inverse_index as f64 * 0.05);
-    let opacity = if inverse_index > 2 { 0.0 } else { 1.0 - (inverse_index as f64 * 0.2) };
-    
-    let is_bottom = !position.to_string().contains("Top");
-    let y_direction = if is_bottom { -1.0 } else { 1.0 };
-    let translate_y = offset * y_direction;
+    let bar_color = match toast.variant {
+        ToastType::Success => "bg-green-500",
+        ToastType::Error => "bg-destructive",
+        ToastType::Warning => "bg-yellow-500",
+        ToastType::Info => "bg-blue-500",
+        _ => "bg-primary",
+    };
 
-    let style = format!(
-        "z-index: {}; transform: translateY({}px) scale({}); opacity: {};",
-        total - index,
-        translate_y,
-        scale,
-        opacity
-    );
+    // Stacking & Expansion Logic
+    let style = move || {
+        let is_bottom = position.to_string().contains("Bottom");
+        let y_direction = if is_bottom { -1.0 } else { 1.0 };
+        
+        let (translate_y, scale, opacity) = if is_expanded.get() {
+            // Expanded state: Full list layout
+            let y = index as f64 * 70.0; // height + gap
+            (y * y_direction, 1.0, 1.0)
+        } else {
+            // Stacked state: Sonner look
+            let y = index as f64 * 10.0; 
+            let s = 1.0 - (index as f64 * 0.05);
+            let o = if index > 2 { 0.0 } else { 1.0 - (index as f64 * 0.2) };
+            (y * y_direction, s, o)
+        };
+
+        format!(
+            "z-index: {}; transform: translateY({}px) scale({}); opacity: {};",
+            total - index,
+            translate_y,
+            scale,
+            opacity
+        )
+    };
 
     let icon = match toast.variant {
-        ToastType::Success => Some(view! { <span class="icon text-success">"✓"</span> }.into_any()),
-        ToastType::Error => Some(view! { <span class="icon text-destructive">"✕"</span> }.into_any()),
-        ToastType::Warning => Some(view! { <span class="icon text-warning">"⚠"</span> }.into_any()),
-        ToastType::Info => Some(view! { <span class="icon text-info">"ℹ"</span> }.into_any()),
+        ToastType::Success => Some(view! { <span class="icon font-bold">"✓"</span> }.into_any()),
+        ToastType::Error => Some(view! { <span class="icon font-bold">"✕"</span> }.into_any()),
+        ToastType::Warning => Some(view! { <span class="icon font-bold">"⚠"</span> }.into_any()),
+        ToastType::Info => Some(view! { <span class="icon font-bold">"ℹ"</span> }.into_any()),
         _ => None,
     };
 
     view! {
         <div
             class=tw_merge!(
-                "absolute transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto",
-                "flex items-center gap-3 min-w-[350px] p-4 rounded-lg border shadow-lg bg-card",
-                if is_bottom { "bottom-0" } else { "top-0" },
+                "absolute transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto overflow-hidden",
+                "flex items-center gap-3 w-full max-w-[calc(100vw-2rem)] sm:max-w-[380px] p-4 rounded-lg border shadow-lg bg-card",
+                if position.to_string().contains("Bottom") { "bottom-0" } else { "top-0" },
                 variant_classes
             )
             style=style
@@ -99,15 +115,23 @@ pub fn SonnerTrigger(
             }
         >
             {icon}
-            <div class="flex flex-col gap-1">
-                <div class="text-sm font-semibold">{toast.title}</div>
-                {move || toast.description.as_ref().map(|d| view! { <div class="text-xs opacity-70">{d.clone()}</div> })}
+            <div class="flex flex-col gap-0.5 overflow-hidden flex-1">
+                <div class="text-sm font-semibold truncate leading-tight">{toast.title}</div>
+                {move || toast.description.as_ref().map(|d| view! { <div class="text-xs opacity-70 truncate">{d.clone()}</div> })}
             </div>
+
+            // Progress Bar
+            <div 
+                class=tw_merge!("absolute bottom-0 left-0 h-1 w-full opacity-20", bar_color)
+                style=format!(
+                    "animation: sonner-progress {}ms linear forwards; transform-origin: left;",
+                    toast.duration
+                )
+            />
         </div>
     }.into_any()
 }
 
-// Thread local storage for global access
 thread_local! {
     static TOASTS: std::cell::RefCell<Option<RwSignal<Vec<ToastData>>>> = std::cell::RefCell::new(None);
 }
@@ -134,16 +158,21 @@ pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosi
     };
 
     view! {
+        <style>
+            "@keyframes sonner-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }"
+        </style>
         <div 
-            class=tw_merge!("fixed z-[100] flex flex-col pointer-events-none min-h-[200px] w-[400px]", container_class)
+            class=tw_merge!(
+                "fixed z-[100] flex flex-col pointer-events-none min-h-[100px] w-full sm:w-[400px]",
+                container_class,
+                "pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)] px-4 sm:px-0"
+            )
             on:mouseenter=move |_| is_hovered.set(true)
             on:mouseleave=move |_| is_hovered.set(false)
         >
             <For
                 each=move || {
                     let list = toasts.get();
-                    // Reverse the list so newest is at the end (for stacking)
-                    // or newest is at the beginning (for display logic)
                     list.into_iter().rev().enumerate().collect::<Vec<_>>()
                 }
                 key=|(_, toast)| toast.id
@@ -151,30 +180,17 @@ pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosi
                     let id = toast.id;
                     let total = toasts.with(|t| t.len());
                     
-                    // If hovered, expand the stack
-                    let expanded_style = move || {
-                        if is_hovered.get() {
-                            let offset = index as f64 * 70.0;
-                            let is_bottom = !position.to_string().contains("Top");
-                            let y_dir = if is_bottom { -1.0 } else { 1.0 };
-                            format!("transform: translateY({}px) scale(1); opacity: 1;", offset * y_dir)
-                        } else {
-                            "".to_string()
-                        }
-                    };
-
                     view! {
-                        <div style=expanded_style>
-                            <SonnerTrigger
-                                toast=toast
-                                index=index
-                                total=total
-                                position=position
-                                on_dismiss=Callback::new(move |_| {
-                                    toasts.update(|vec| vec.retain(|t| t.id != id));
-                                })
-                            />
-                        </div>
+                        <SonnerTrigger
+                            toast=toast
+                            index=index
+                            total=total
+                            position=position
+                            is_expanded=is_hovered.into()
+                            on_dismiss=Callback::new(move |_| {
+                                toasts.update(|vec| vec.retain(|t| t.id != id));
+                            })
+                        />
                     }
                 }
             />
@@ -182,7 +198,6 @@ pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosi
     }.into_any()
 }
 
-// Global Helper Functions
 pub fn toast(title: impl Into<String>, variant: ToastType) {
     let signal_opt = TOASTS.with(|t| *t.borrow());
     
@@ -218,4 +233,4 @@ pub fn toast_error(title: impl Into<String>) { toast(title, ToastType::Error); }
 #[allow(dead_code)]
 pub fn toast_warning(title: impl Into<String>) { toast(title, ToastType::Warning); }
 #[allow(dead_code)]
-pub fn toast_info(title: impl Into<String>) { toast(title, ToastType::Info); }
+pub fn toast_info(title: impl Into<String>) { toast(title, ToastType::Info); }