From 364b23e62af210d50c8f70a476fbb0fe5d318583 Mon Sep 17 00:00:00 2001
From: Amatsugu <khamraj@kaisei.app>
Date: Sun, 3 Aug 2025 12:12:13 -0400
Subject: [PATCH] context menu rendering wip

---
 AobaClient/assets/style/colors.scss       | 17 ++++----
 AobaClient/assets/style/main.scss         | 32 +++++++++++++++
 AobaClient/src/components/context_menu.rs | 47 +++++++++++++++++++++--
 AobaClient/src/components/media_grid.rs   | 29 +++++++++++---
 4 files changed, 109 insertions(+), 16 deletions(-)

diff --git a/AobaClient/assets/style/colors.scss b/AobaClient/assets/style/colors.scss
index 899ee02..35c1532 100644
--- a/AobaClient/assets/style/colors.scss
+++ b/AobaClient/assets/style/colors.scss
@@ -1,8 +1,9 @@
-$mainBGColor: #584577;
-$featureColor: #ce2d4f;
-$accentColor: #f0eaf8;
-
-$mainTextColor: #eee;
-$brightTextColor: #fff;
-$invertTextColor: #222;
-$invertBrightTextColor: #000;
+$mainBGColor: #584577;
+$featureColor: #ce2d4f;
+$focusColor: #ff3862;
+$accentColor: #f0eaf8;
+
+$mainTextColor: #eee;
+$brightTextColor: #fff;
+$invertTextColor: #222;
+$invertBrightTextColor: #000;
diff --git a/AobaClient/assets/style/main.scss b/AobaClient/assets/style/main.scss
index 9ffecc1..adf5d3c 100644
--- a/AobaClient/assets/style/main.scss
+++ b/AobaClient/assets/style/main.scss
@@ -157,3 +157,35 @@ form {
 	padding: 5px;
 	user-select: all;
 }
+
+.contextMenu {
+	backdrop-filter: blur(10px) brightness(0.5) grayscale(1);
+	position: absolute;
+
+	.itemList {
+		display: flex;
+		flex-direction: column;
+		max-width: 300px;
+	}
+
+	.contextItem {
+		border-left: 4px solid $featureColor;
+		$size: 30px;
+		display: grid;
+		grid-template-columns: $size 1fr auto;
+		height: $size;
+		transition: border 0.1s ease-out;
+
+		.label {
+			display: flex;
+			align-items: center;
+			padding: 5px 10px;
+		}
+
+		&:hover {
+			background-color: $accentColor;
+			color: $invertTextColor;
+			border-left: 10px solid $focusColor;
+		}
+	}
+}
diff --git a/AobaClient/src/components/context_menu.rs b/AobaClient/src/components/context_menu.rs
index d93b6bf..ad0fedd 100644
--- a/AobaClient/src/components/context_menu.rs
+++ b/AobaClient/src/components/context_menu.rs
@@ -6,15 +6,56 @@ use dioxus::prelude::*;
 pub struct ContextMenuProps {
 	pub top: f64,
 	pub left: f64,
-	pub items: Option<Vec<()>>,
+	pub items: Option<Vec<Element>>,
 }
 
 #[component]
 pub fn ContextMenu(props: ContextMenuProps) -> Element {
+	let menu_items = if let Some(items) = props.items {
+		rsx! {
+			ItemList { items }
+		}
+	} else {
+		rsx! {}
+	};
+
 	rsx! {
 		div {
-			style: "background:#000; position: absolute; left: {props.left}px; top: {props.top}px;",
-			"Contect Menu"
+			class: "contextMenu",
+			style: "left: {props.left}px; top: {props.top}px;",
+			{menu_items}
+		}
+	}
+}
+
+#[component]
+fn ItemList(items: Vec<Element>) -> Element {
+	rsx! {
+		div{
+			class: "itemList",
+			{items.iter().map(|e| rsx!{{e}}) }
+		}
+	}
+}
+
+#[derive(PartialEq, Clone, Props)]
+pub struct ContextMenuItemProps {
+	pub name: String,
+	pub sub_items: Option<Vec<Element>>,
+}
+
+#[component]
+pub fn ContextMenuItem(props: ContextMenuItemProps) -> Element {
+	rsx! {
+		div{
+			class: "contextItem",
+			div {
+				class: "icon"
+			},
+			div {
+				class: "label",
+				{props.name}
+			}
 		}
 	}
 }
diff --git a/AobaClient/src/components/media_grid.rs b/AobaClient/src/components/media_grid.rs
index 8b51d18..6b5f26e 100644
--- a/AobaClient/src/components/media_grid.rs
+++ b/AobaClient/src/components/media_grid.rs
@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 use tonic::IntoRequest;
 
 use crate::{
-	components::{ContextMenu, MediaItem},
+	components::{ContextMenu, ContextMenuItem, MediaItem},
 	rpc::{aoba::PageFilter, get_rpc_client},
 };
 
@@ -53,10 +53,29 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 		let pos = data.coordinates().client();
 		let left = pos.x;
 		let top = pos.y;
-		context_menu.set(rsx! { ContextMenu{
-			left: left,
-			top: top
-		}});
+		context_menu.set(rsx! {
+			ContextMenu{
+				left: left,
+				top: top,
+				items: vec![
+					rsx!{
+						ContextMenuItem{
+							name: "Details"
+						}
+					},
+					rsx!{
+						ContextMenuItem{
+							name: "Download"
+						}
+					},
+					rsx!{
+						ContextMenuItem{
+							name: "Delete"
+						}
+					},
+				]
+			}
+		});
 	};
 
 	match media_result.cloned() {