admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 194 Wiki Activity

feat: install and integrate official rust-ui context menu via ui-cli
Some checks failed
Build MIPS Binary / build (push) Failing after 1m31s
Details

Browse Source
This commit is contained in:
spinline
2026-02-11 23:45:07 +03:00
parent 315a2421c4
commit 57abbb3335
8 changed files with 463 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/Cargo.toml
View File

@@ -39,6 +39,7 @@ struct-patch = "0.5"
leptos_ui = "0.3" leptos_ui = "0.3"
tw_merge = "0.1" tw_merge = "0.1"
strum = { version = "0.26", features = ["derive"] } strum = { version = "0.26", features = ["derive"] }
icons = { version = "0.18.0", features = ["leptos"] }
[package.metadata.leptos] [package.metadata.leptos]
tailwind-input-file = "input.css" tailwind-input-file = "input.css"

12
frontend/package-lock.json generated
View File

@@ -13,7 +13,8 @@
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"tailwind-merge": "^3.4.0", "tailwind-merge": "^3.4.0",
"tailwindcss-animate": "^1.0.7" "tailwindcss-animate": "^1.0.7",
"tw-animate-css": "^1.4.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.18", "@tailwindcss/postcss": "^4.1.18",
@@ -3737,6 +3738,15 @@
"node": ">=8.0" "node": ">=8.0"
} }
}, },
"node_modules/tw-animate-css": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
"integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/Wombosvideo"
}
},
"node_modules/universalify": { "node_modules/universalify": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",

5
frontend/package.json
View File

@@ -5,7 +5,8 @@
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"tailwind-merge": "^3.4.0", "tailwind-merge": "^3.4.0",
"tailwindcss-animate": "^1.0.7" "tailwindcss-animate": "^1.0.7",
"tw-animate-css": "^1.4.0"
}, },
"description": "", "description": "",
"devDependencies": { "devDependencies": {
@@ -25,4 +26,4 @@
}, },
"type": "module", "type": "module",
"version": "1.0.0" "version": "1.0.0"
} }

186
frontend/src/components/context_menu.rs
View File

@@ -1,12 +1,5 @@
use leptos::prelude::*; use leptos::prelude::*;
use web_sys::MouseEvent; use crate::components::ui::context_menu::*;
use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
// ── Kendi reaktif Context Menu implementasyonumuz ──
// leptos-shadcn-context-menu v0.8.1'de ContextMenuContent'te
// `if open.get()` statik kontrolü reaktif değil. Aşağıda
// `Show` bileşeni ile düzgün reaktif versiyon yer alıyor.
#[component] #[component]
pub fn TorrentContextMenu( pub fn TorrentContextMenu(
@@ -15,144 +8,61 @@ pub fn TorrentContextMenu(
on_action: Callback<(String, String)>, on_action: Callback<(String, String)>,
) -> impl IntoView { ) -> impl IntoView {
let hash = StoredValue::new(torrent_hash); let hash = StoredValue::new(torrent_hash);
let on_action = StoredValue::new(on_action);
let open = RwSignal::new(false);
let position = RwSignal::new((0i32, 0i32));
// Sağ tıklama handler
let on_contextmenu = move |e: MouseEvent| {
e.prevent_default();
e.stop_propagation();
position.set((e.client_x(), e.client_y()));
open.set(true);
};
// Menü dışına tıklandığında kapanma
Effect::new(move |_| {
if open.get() {
let cb = Closure::wrap(Box::new(move |_: MouseEvent| {
open.set(false);
}) as Box<dyn Fn(MouseEvent)>);
let window = web_sys::window().unwrap();
let document = window.document().unwrap();
let _ = document.add_event_listener_with_callback(
"click",
cb.as_ref().unchecked_ref(),
);
// Cleanup: tek sefer dinleyici — click yakalandığında otomatik kapanıp listener kalıyor
// ama open=false olduğunda effect tekrar çalışmaz, böylece sorun yok.
cb.forget();
}
});
let menu_action = move |action: &'static str| { let menu_action = move |action: &'static str| {
open.set(false); on_action.run((action.to_string(), hash.get_value()));
on_action.get_value().run((action.to_string(), hash.get_value()));
}; };
view! { view! {
<div <ContextMenu>
class="w-full" <ContextMenuTrigger>
on:contextmenu=on_contextmenu {children()}
> </ContextMenuTrigger>
{children()}
</div> <ContextMenuContent>
<ContextMenuAction 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>
<Show when=move || open.get()> <ContextMenuAction 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">
let (x, y) = position.get(); <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
// Menü yaklaşık boyutları </svg>
let menu_width = 200; "Stop"
let menu_height = 220; </ContextMenuAction>
let window = web_sys::window().unwrap();
let vw = window.inner_width().unwrap().as_f64().unwrap() as i32;
let vh = window.inner_height().unwrap().as_f64().unwrap() as i32;
// Sağa taşarsa sola aç, alta taşarsa yukarı aç
let final_x = if x + menu_width > vw { x - menu_width } else { x };
let final_y = if y + menu_height > vh { y - menu_height } else { y };
let final_x = final_x.max(0);
let final_y = final_y.max(0);
view! {
<div
class="fixed inset-0 z-[99]"
on:click=move |e: MouseEvent| {
e.stop_propagation();
open.set(false);
}
on:contextmenu=move |e: MouseEvent| {
e.prevent_default();
e.stop_propagation();
open.set(false);
}
/>
<div
class="fixed z-[100] min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
style=format!("left: {}px; top: {}px;", final_x, final_y)
on:click=move |e: MouseEvent| e.stop_propagation()
>
// Start
<div
class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
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"
</div>
// Stop <ContextMenuAction on:click=move |_| menu_action("recheck")>
<div <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">
class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground" <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" />
on:click=move |_| menu_action("stop") </svg>
> "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"> </ContextMenuAction>
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
</svg>
"Stop"
</div>
// Recheck <div class="-mx-1 my-1 h-px bg-border" />
<div
class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
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"
</div>
// Separator <ContextMenuAction
<div class="-mx-1 my-1 h-px bg-border" /> class="text-destructive hover:bg-destructive hover:text-destructive-foreground"
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>
// Remove <ContextMenuAction
<div class="text-destructive hover:bg-destructive hover:text-destructive-foreground"
class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors text-destructive hover:bg-destructive hover:text-destructive-foreground" on:click=move |_| menu_action("delete_with_data")
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">
<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" />
<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>
</svg> "Remove with Data"
"Remove" </ContextMenuAction>
</div> </ContextMenuContent>
</ContextMenu>
// Remove with Data
<div
class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors text-destructive hover:bg-destructive hover:text-destructive-foreground"
on:click=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"
</div>
</div>
}
}
</Show>
} }
} }

1
frontend/src/components/hooks/mod.rs Normal file
View File

@@ -0,0 +1 @@
pub mod use_random;

31
frontend/src/components/hooks/use_random.rs Normal file
View File

@@ -0,0 +1,31 @@
use std::collections::hash_map::DefaultHasher;
use std::hash::{Hash, Hasher};
use std::sync::atomic::{AtomicUsize, Ordering};
const PREFIX: &str = "rust_ui"; // Must NOT contain "/" or "-"
pub fn use_random_id() -> String {
format!("_{PREFIX}_{}", generate_hash())
}
pub fn use_random_id_for(element: &str) -> String {
format!("{}_{PREFIX}_{}", element, generate_hash())
}
pub fn use_random_transition_name() -> String {
let random_id = use_random_id();
format!("view-transition-name: {random_id}")
}
/* ========================================================== */
/* ✨ FUNCTIONS ✨ */
/* ========================================================== */
static COUNTER: AtomicUsize = AtomicUsize::new(1);
fn generate_hash() -> u64 {
let mut hasher = DefaultHasher::new();
let counter = COUNTER.fetch_add(1, Ordering::SeqCst);
counter.hash(&mut hasher);
hasher.finish()
}

366
frontend/src/components/ui/context_menu.rs Normal file
View File

@@ -0,0 +1,366 @@
use icons::ChevronRight;
use leptos::context::Provider;
use leptos::prelude::*;
use leptos_ui::clx;
use tw_merge::*;
use wasm_bindgen::JsCast;
use crate::components::hooks::use_random::use_random_id_for;
/// Programmatically close any open context menu.
pub fn close_context_menu() {
let Some(document) = window().document() else {
return;
};
let Some(menu) = document.query_selector("[data-target='target__context'][data-state='open']").ok().flatten()
else {
return;
};
let _ = menu.set_attribute("data-state", "closed");
if let Some(el) = menu.dyn_ref::<web_sys::HtmlElement>() {
let _ = el.style().set_property("pointer-events", "none");
}
}
mod components {
use super::*;
clx! {ContextMenuLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
clx! {ContextMenuGroup, ul, "group"}
clx! {ContextMenuItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
clx! {ContextMenuSubContent, ul, "context__menu_sub_content", "rounded-md border bg-card shadow-lg p-1 absolute z-[100] min-w-[160px] opacity-0 invisible translate-x-[-8px] transition-all duration-200 ease-out pointer-events-none"}
clx! {ContextMenuLink, a, "w-full inline-flex gap-2 items-center"}
}
pub use components::*;
#[component]
pub fn ContextMenuAction(
children: Children,
#[prop(optional, into)] class: String,
#[prop(optional, into)] aria_selected: Option<Signal<bool>>,
#[prop(optional, into)] href: Option<String>,
) -> impl IntoView {
let _ctx = expect_context::<ContextMenuContext>();
let class = tw_merge!(
"inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4",
class
);
let aria_selected_attr = move || aria_selected.map(|s| s.get()).unwrap_or(false).to_string();
if let Some(href) = href {
view! {
<a
data-name="ContextMenuAction"
class=class
href=href
aria-selected=aria_selected_attr
data-context-close="true"
>
{children()}
</a>
}
.into_any()
} else {
view! {
<button
type="button"
data-name="ContextMenuAction"
class=class
data-context-close="true"
aria-selected=aria_selected_attr
>
{children()}
</button>
}
.into_any()
}
}
#[derive(Clone)]
struct ContextMenuContext {
target_id: String,
}
#[component]
pub fn ContextMenu(children: Children) -> impl IntoView {
let context_target_id = use_random_id_for("context");
let ctx = ContextMenuContext { target_id: context_target_id.clone() };
view! {
<Provider value=ctx>
<style>
"
/* Submenu Styles */
.context__menu_sub_content {
position: absolute;
inset-inline-start: calc(100% + 8px);
inset-block-start: -4px;
z-index: 100;
min-inline-size: 160px;
opacity: 0;
visibility: hidden;
transform: translateX(-8px);
transition: all 0.2s ease-out;
pointer-events: none;
}
.context__menu_sub_trigger:hover .context__menu_sub_content {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
"
</style>
<div data-name="ContextMenu" class="contents">
{children()}
</div>
</Provider>
}
}
/// Wrapper that triggers the context menu on right-click.
/// The `on_open` callback is triggered when the context menu opens (right-click).
#[component]
pub fn ContextMenuTrigger(
children: Children,
#[prop(optional, into)] class: String,
#[prop(optional)] on_open: Option<Callback<()>>,
) -> impl IntoView {
let ctx = expect_context::<ContextMenuContext>();
let trigger_class = tw_merge!("contents", class);
view! {
<div
class=trigger_class
data-name="ContextMenuTrigger"
data-context-trigger=ctx.target_id
on:contextmenu=move |_| {
if let Some(cb) = on_open {
cb.run(());
}
}
>
{children()}
</div>
}
}
/// Content of the context menu that appears on right-click.
/// The `on_close` callback is triggered when the menu closes (click outside, ESC key, or action click).
#[component]
pub fn ContextMenuContent(
children: Children,
#[prop(optional, into)] class: String,
#[prop(optional)] on_close: Option<Callback<()>>,
) -> 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 class = tw_merge!(base_classes, class);
let target_id_for_script = ctx.target_id.clone();
view! {
<script src="/hooks/lock_scroll.js"></script>
<div
data-name="ContextMenuContent"
class=class
// Listen for custom 'contextmenuclose' event dispatched by JS when menu closes
on:contextmenuclose=move |_: web_sys::CustomEvent| {
if let Some(cb) = on_close {
cb.run(());
}
}
id=ctx.target_id
data-target="target__context"
data-state="closed"
style="pointer-events: none;"
>
{children()}
</div>
<script>
{format!(
r#"
(function() {{
const setupContextMenu = () => {{
const menu = document.querySelector('#{}');
const trigger = document.querySelector('[data-context-trigger="{}"]');
if (!menu || !trigger) {{
setTimeout(setupContextMenu, 50);
return;
}}
if (menu.hasAttribute('data-initialized')) {{
return;
}}
menu.setAttribute('data-initialized', 'true');
let isOpen = false;
const updatePosition = (x, y) => {{
const menuRect = menu.getBoundingClientRect();
const viewportHeight = window.innerHeight;
const viewportWidth = window.innerWidth;
// Calculate position, ensuring menu stays within viewport
let left = x;
let top = y;
// Adjust if menu would go off right edge
if (x + menuRect.width > viewportWidth) {{
left = x - menuRect.width;
}}
// Adjust if menu would go off bottom edge
if (y + menuRect.height > viewportHeight) {{
top = y - menuRect.height;
}}
menu.style.left = `${{left}}px`;
menu.style.top = `${{top}}px`;
menu.style.transformOrigin = 'top left';
}};
const openMenu = (x, y) => {{
isOpen = true;
// Close any other open context menus
const allMenus = document.querySelectorAll('[data-target="target__context"]');
allMenus.forEach(m => {{
if (m !== menu && m.getAttribute('data-state') === 'open') {{
m.setAttribute('data-state', 'closed');
m.style.pointerEvents = 'none';
}}
}});
menu.setAttribute('data-state', 'open');
menu.style.visibility = 'hidden';
menu.style.pointerEvents = 'auto';
// Force reflow
menu.offsetHeight;
updatePosition(x, y);
menu.style.visibility = 'visible';
// Lock scroll
if (window.ScrollLock) {{
window.ScrollLock.lock();
}}
setTimeout(() => {{
document.addEventListener('click', handleClickOutside);
document.addEventListener('contextmenu', handleContextOutside);
}}, 0);
}};
const closeMenu = () => {{
isOpen = false;
menu.setAttribute('data-state', 'closed');
menu.style.pointerEvents = 'none';
document.removeEventListener('click', handleClickOutside);
document.removeEventListener('contextmenu', handleContextOutside);
// Dispatch custom event for Leptos to listen to
menu.dispatchEvent(new CustomEvent('contextmenuclose', {{ bubbles: false }}));
if (window.ScrollLock) {{
window.ScrollLock.unlock(200);
}}
}};
const handleClickOutside = (e) => {{
if (!menu.contains(e.target)) {{
closeMenu();
}}
}};
const handleContextOutside = (e) => {{
if (!trigger.contains(e.target)) {{
closeMenu();
}}
}};
// Right-click on trigger
trigger.addEventListener('contextmenu', (e) => {{
e.preventDefault();
e.stopPropagation();
if (isOpen) {{
closeMenu();
}}
openMenu(e.clientX, e.clientY);
}});
// Close when action is clicked
const actions = menu.querySelectorAll('[data-context-close]');
actions.forEach(action => {{
action.addEventListener('click', () => {{
closeMenu();
}});
}});
// Handle ESC key
document.addEventListener('keydown', (e) => {{
if (e.key === 'Escape' && isOpen) {{
e.preventDefault();
closeMenu();
}}
}});
}};
if (document.readyState === 'loading') {{
document.addEventListener('DOMContentLoaded', setupContextMenu);
}} else {{
setupContextMenu();
}}
}})();
"#,
target_id_for_script,
target_id_for_script,
)}
</script>
}
}
#[component]
pub fn ContextMenuSub(children: Children) -> impl IntoView {
clx! {ContextMenuSubRoot, li, "context__menu_sub_trigger", " relative inline-flex relative gap-2 items-center py-1.5 px-2 w-full text-sm no-underline rounded-sm transition-colors duration-200 cursor-pointer text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground"}
view! { <ContextMenuSubRoot>{children()}</ContextMenuSubRoot> }
}
#[component]
pub fn ContextMenuSubTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("flex items-center justify-between w-full", class);
view! {
<span data-name="ContextMenuSubTrigger" class=class>
<span class="flex gap-2 items-center">{children()}</span>
<ChevronRight class="opacity-70 size-4" />
</span>
}
}
#[component]
pub fn ContextMenuSubItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!(
"inline-flex gap-2 items-center w-full rounded-sm px-3 py-2 text-sm transition-all duration-150 ease text-popover-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer hover:translate-x-[2px]",
class
);
view! {
<li data-name="ContextMenuSubItem" class=class data-context-close="true">
{children()}
</li>
}
}

1
frontend/src/components/ui/mod.rs
View File

@@ -2,3 +2,4 @@ pub mod button;
pub mod card; pub mod card;
pub mod input; pub mod input;
pub mod toast; pub mod toast;
pub mod context_menu;