context menu rendering wip

AobaClient/assets/style/colors.scss

@@ -1,5 +1,6 @@
 $mainBGColor: #584577;
 $featureColor: #ce2d4f;
+$focusColor: #ff3862;
 $accentColor: #f0eaf8;
 
 $mainTextColor: #eee;

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

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;",
+			class: "contextMenu",
-			"Contect Menu"
+			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}
+			}
 		}
 	}
 }

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{
+		context_menu.set(rsx! {
-			left: left,
+			ContextMenu{
-			top: top
+				left: left,
-		}});
+				top: top,
+				items: vec![
+					rsx!{
+						ContextMenuItem{
+							name: "Details"
+						}
+					},
+					rsx!{
+						ContextMenuItem{
+							name: "Download"
+						}
+					},
+					rsx!{
+						ContextMenuItem{
+							name: "Delete"
+						}
+					},
+				]
+			}
+		});
 	};
 
 	match media_result.cloned() {