feat: enhance context menu styles and add press-and-hold for destructive actions

2026-02-12 00:03:32 +03:00
parent c78dcda55e
commit 9a00e341af
2 changed files with 90 additions and 10 deletions
--- a/frontend/src/components/context_menu.rs
+++ b/frontend/src/components/context_menu.rs
@@ -19,22 +19,31 @@ pub fn TorrentContextMenu(
                {children()}
            </ContextMenuTrigger>
            
-            <ContextMenuContent>
-                <ContextMenuAction on:click=move |_| menu_action("start")>
+            <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>

-                <ContextMenuAction on:click=move |_| menu_action("stop")>
+                <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 on:click=move |_| menu_action("recheck")>
+                <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>
@@ -44,7 +53,7 @@ pub fn TorrentContextMenu(
                <div class="-mx-1 my-1 h-px bg-border" />

                <ContextMenuAction 
-                    class="text-destructive hover:bg-destructive hover:text-destructive-foreground"
+                    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">
@@ -53,15 +62,16 @@ pub fn TorrentContextMenu(
                    "Remove"
                </ContextMenuAction>

-                <ContextMenuAction 
-                    class="text-destructive hover:bg-destructive hover:text-destructive-foreground"
-                    on:click=move |_| menu_action("delete_with_data")
+                <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"
-                </ContextMenuAction>
+                    <span class="ml-auto text-[10px] opacity-50">"Hold"</span>
+                </ContextMenuHoldAction>
            </ContextMenuContent>
        </ContextMenu>
    }
--- a/frontend/src/components/ui/context_menu.rs
+++ b/frontend/src/components/ui/context_menu.rs
@@ -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 = web_sys::window().unwrap().performance().unwrap().now();
+            let duration = hold_duration as f64;
+            
+            leptos::task::spawn_local(async move {
+                while is_holding.get_untracked() {
+                    let now = web_sys::window().unwrap().performance().unwrap().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=on_mousedown
+            on:touchend=on_mouseup
+        >
+            // 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>
+    }
+}
+
 #[derive(Clone)]
 struct ContextMenuContext {
    target_id: String,
@@ -160,7 +230,7 @@ pub fn ContextMenuContent(
 ) -> impl IntoView {
    let ctx = expect_context::<ContextMenuContext>();

-    let base_classes = "z-50 p-1 rounded-md border bg-card shadow-md w-[200px] fixed transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
+    let base_classes = "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";

    let class = tw_merge!(base_classes, class);