misc

AobaClient/src/components/basic/button.rs

@@ -19,10 +19,10 @@ pub fn Button(props: ButtonProps) -> Element {
 	rsx! {
 		button {
 			onclick: move |event| {
-				event.prevent_default();
+			    event.prevent_default();
-				if let Some(h) = props.onclick {
+			    if let Some(h) = props.onclick {
-					h.call(event);
+			        h.call(event);
-				}
+			    }
 			},
 			"{props.text}"
 		}

AobaClient/src/components/basic/input.rs

@@ -17,14 +17,18 @@ pub fn Input(props: InputProps) -> Element {
 	let ph = props.placeholder.unwrap_or(label.clone());
 	rsx! {
 		label {
-			"{label}",
+			"{label}"
 			input {
-				type : props.r#type.unwrap_or("text".into()),
+				r#type: props.r#type.unwrap_or("text".into()),
 				value: props.value,
-				oninput: move |e| if let Some(mut s) = props.value { s.set(e.value()); },
+				oninput: move |e| {
+				    if let Some(mut s) = props.value {
+				        s.set(e.value());
+				    }
+				},
 				name: props.name,
-				placeholder:ph,
+				placeholder: ph,
-				required: props.required
+				required: props.required,
 			}
 		}
 	}

AobaClient/src/components/media_grid.rs

@@ -49,7 +49,7 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 	match media_result.cloned() {
 		Some(value) => match value {
 			Ok(result) => rsx! {
-				div{
+				div {
 					class: "mediaGrid",
 					{result.items.iter().map(|itm| rsx!{
 						MediaItem { item: itm.clone() }
@@ -57,7 +57,7 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 				}
 			},
 			Err(msg) => rsx! {
-				div{
+				div {
 					class: "mediaGrid",
 					div {
 						"Failed to load results: {msg}"
@@ -69,18 +69,9 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 			div{
 				class: "mediaGrid",
 				div {
-					"No results could be loaded"
+					"Loading..."
 				}
 			}
 		},
 	}
 }
-
-pub fn Nested() -> Element {
-	rsx! {
-		div{
-			"test",
-			slot {  }
-		}
-	}
-}

AobaClient/src/components/media_item.rs

@@ -15,25 +15,13 @@ pub fn MediaItem(props: MediaItemProps) -> Element {
 
 	let src = format!("{HOST}/m/thumb/{id}");
 	rsx! {
-		a{
+		a { class: "mediaItem", href: "{HOST}/m/{id}", target: "_blank",
-			class: "mediaItem",
+			img { src }
-			href: "{HOST}/m/{id}",
+			span { class: "info",
-			target: "_blank",
+				span { class: "name", "{filename}" }
-			img{ src: src }
+				span { class: "details",
-			span {
+					span { "{mtype}" }
-				class: "info",
+					span { "{props.item.view_count}" }
-				span{
-					class: "name",
-					"{filename}"
-				},
-				span{
-					class: "details",
-					span{
-						"{mtype}"
-					},
-					span{
-						"{props.item.view_count}"
-					},
 				}
 			}
 		}

AobaClient/src/components/navbar.rs

@@ -32,7 +32,7 @@ pub fn MainNaviagation() -> Element {
 pub fn Branding() -> Element {
 	rsx! {
 		div { class: "branding",
-			img {src: NAV_ICON, alt: "Aoba"}
+			img { src: NAV_ICON, alt: "Aoba" }
 		}
 	}
 }
@@ -50,10 +50,7 @@ pub fn Utils() -> Element {
 
 	rsx! {
 		div { class: "utils",
-			div{
+			div { onclick: move |_| auth_context.logout(), "Logout" }
-				onclick: move |_| auth_context.logout(),
+		}
-				"Logout"
-			}
-	 }
 	}
 }

AobaClient/src/components/notif.rs

@@ -25,20 +25,15 @@ pub fn Notif(props: NotifProps) -> Element {
 	};
 	let m = props.message;
 	rsx! {
-		div{
+		div { class: "notif {type_class}",
-			class: "notif {type_class}",
+			div { class: "icon",
-			div{
-				class: "icon",
 				match t {
-					NotifType::Notice => icons::Error(),
+				    NotifType::Notice => icons::Error(),
-					NotifType::Error => icons::Error(),
+				    NotifType::Error => icons::Error(),
-					NotifType::Warning => icons::Warn(),
+				    NotifType::Warning => icons::Warn(),
 				}
 			}
-			div{
+			div { class: "message", "{m}" }
-				class: "message",
-				"{m}"
-			}
 		}
 	}
 }

AobaClient/src/components/search.rs

@@ -3,13 +3,12 @@ use dioxus::prelude::*;
 #[component]
 pub fn Search(query: Signal<String>) -> Element {
 	rsx! {
-		div{
+		div { class: "searchBar stickyTop",
-			class: "searchBar stickyTop",
 			input {
-				type: "search",
+				r#type: "search",
 				placeholder: "Search Files",
 				value: query,
-				oninput: move |event| query.set(event.value())
+				oninput: move |event| query.set(event.value()),
 			}
 		}
 	}

AobaClient/src/layouts/main_layout.rs

@@ -7,14 +7,13 @@ pub fn MainLayout() -> Element {
 	let auth_context = use_context::<AuthContext>();
 
 	if auth_context.jwt.cloned().is_none() {
-		return rsx! { Login {  } };
+		return rsx! {
+			Login {}
+		};
 	}
 
 	return rsx! {
 		Navbar {}
-		div{
+		div { id: "content", Outlet::<Route> {} }
-			id: "content",
-			Outlet::<Route> {}
-		}
 	};
 }

AobaClient/src/main.rs

@@ -40,6 +40,6 @@ fn App() -> Element {
 			rel: "stylesheet",
 			href: "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap",
 		}
-		Router::<Route> { }
+		Router::<Route> {}
 	}
 }

AobaClient/src/views/home.rs

@@ -6,9 +6,7 @@ pub fn Home() -> Element {
 	let query = use_signal(|| "".to_string());
 
 	rsx! {
-		Search {
+		Search { query }
-			query: query
-		},
 		MediaGrid { query: query.cloned() }
 	}
 }

AobaClient/src/views/login.rs

@@ -52,18 +52,26 @@ pub fn Login() -> Element {
 	};
 
 	rsx! {
-		div{
+		div { id: "centralModal",
-			id: "centralModal",
 			if let Some(err) = error.cloned() {
-				Notif{ type: NotifType::Error, message: err}
+				Notif { r#type: NotifType::Error, message: err }
 			}
-			form{
+			form {
-				Input { type : "text", name: "username", label: "Username", value: username, required: true },
+				Input {
-				Input { type : "password", name: "password", label: "Password", value: password, required: true },
+					r#type: "text",
-				button {
+					name: "username",
-					onclick: login,
+					label: "Username",
-					"Login!",
+					value: username,
+					required: true,
 				}
+				Input {
+					r#type: "password",
+					name: "password",
+					label: "Password",
+					value: password,
+					required: true,
+				}
+				button { onclick: login, "Login!" }
 			}
 		}
 	}

AobaClient/src/views/settings.rs

@@ -25,10 +25,7 @@ pub fn Settings() -> Element {
 	rsx! {
 		"this is settings"
 		div {
-			pre {
+			pre { class: "codeSelect", "{d}" }
-				class: "codeSelect",
-				"{d}"
-			}
 		}
 	}
 }