move front end files into repo

AobaClient/Cargo.toml

@@ -7,10 +7,24 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-dioxus = { version = "0.6.0", features = [] }
+dioxus = { version = "0.6.0", features = ["router"] }
+serde = "1.0.219"
+serde_repr = "0.1.20"
 
 [features]
 default = ["web"]
 web = ["dioxus/web"]
 desktop = ["dioxus/desktop"]
 mobile = ["dioxus/mobile"]
+
+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"

AobaClient/assets/main.css

@@ -1,46 +0,0 @@
-/* App-wide styling */
-body {
-    background-color: #0f1116;
-    color: #ffffff;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 20px;
-}
-
-#hero {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-#links {
-    width: 400px;
-    text-align: left;
-    font-size: x-large;
-    color: white;
-    display: flex;
-    flex-direction: column;
-}
-
-#links a {
-    color: white;
-    text-decoration: none;
-    margin-top: 20px;
-    margin: 10px 0px;
-    border: white 1px solid;
-    border-radius: 5px;
-    padding: 10px;
-}
-
-#links a:hover {
-    background-color: #1f1f1f;
-    cursor: pointer;
-}
-
-#header {
-    max-width: 1200px;
-}
-
-
-

AobaClient/assets/style/colors.scss

@@ -0,0 +1,8 @@
+$mainBGColor: #584577;
+$featureColor: #CE2D4F;
+$accentColor: #f0eaf8;
+
+$mainTextColor: #eee;
+$brightTextColor: #fff;
+$invertTextColor: #222;
+$invertBrightTextColor: #000;

AobaClient/assets/style/main.scss

@@ -0,0 +1,30 @@
+@import 'mixins';
+@import 'colors';
+
+:root {
+	background-color: $mainBGColor;
+	color: $mainTextColor;
+	box-sizing: border-box;
+	font-family: "Noto Sans", sans-serif;
+	font-optical-sizing: auto;
+	font-weight: 400;
+	font-style: normal;
+	font-variation-settings:
+		"wdth" 100;
+}
+
+body {
+	padding: 0;
+	margin: 0;
+}
+
+#main {
+	display: grid;
+	grid-template-columns: $navBarSize 1fr;
+	grid-template-areas: "Nav Content";
+}
+
+#content {
+	grid-area: Content;
+	margin-left: $navBarSize;
+}

AobaClient/assets/style/mixins.scss

@@ -0,0 +1,43 @@
+$navBarSize: 40px;
+
+@mixin mobile {
+	@media (max-width: 700px) {
+		@content;
+	}
+}
+
+@mixin max-screen($size) {
+	@media (max-width: #{$size}) {
+		@content;
+	}
+}
+
+@mixin max-container($size) {
+	@container (max-width: #{$size}) {
+		@content;
+	}
+}
+
+@mixin small-container {
+	@container (max-width: 500px) {
+		@content;
+	}
+}
+
+@mixin medium-container {
+	@container (max-width: 800px) {
+		@content;
+	}
+}
+
+@mixin large-container {
+	@container (max-width: 1000px) {
+		@content;
+	}
+}
+
+@mixin xlarge-container {
+	@container (max-width: 1200px) {
+		@content;
+	}
+}

AobaClient/assets/style/nav.scss

@@ -0,0 +1,34 @@
+@import 'mixins';
+@import 'colors';
+
+
+nav {
+	display: grid;
+	grid-template-areas: "Branding" "Nav" "Widgets" "Utils";
+	grid-template-rows: auto 1fr auto auto;
+	background-color: $featureColor;
+	height: 100dvh;
+	position: fixed;
+
+	>* {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.branding {
+		grid-area: Branding;
+	}
+
+	.mainNav {
+		grid-area: Nav;
+	}
+
+	.widgets {
+		grid-area: Widgets;
+	}
+
+	.utils {
+		grid-area: Utils;
+	}
+
+}

AobaClient/src/components/main_layout.rs

@@ -0,0 +1,11 @@
+use dioxus::prelude::*;
+
+use crate::{components::Navbar, Route};
+
+#[component]
+pub fn MainLayout() -> Element {
+	rsx! {
+		Navbar {}
+		Outlet::<Route> {}
+	}
+}

AobaClient/src/components/mod.rs

@@ -0,0 +1,4 @@
+mod main_layout;
+mod navbar;
+pub use main_layout::MainLayout;
+pub use navbar::Navbar;

AobaClient/src/components/navbar.rs

@@ -0,0 +1,49 @@
+use dioxus::prelude::*;
+
+use crate::Route;
+
+const NAV_CSS: Asset = asset!("/assets/style/nav.scss");
+
+#[component]
+pub fn Navbar() -> Element {
+	rsx! {
+		document::Link { rel: "stylesheet", href: NAV_CSS }
+		nav {
+			Branding {}
+			MainNaviagation {}
+			Widgets {}
+			Utils {}
+		}
+	}
+}
+
+#[component]
+pub fn MainNaviagation() -> Element {
+	rsx! {
+		div { class: "mainNav",
+			Link { class: "navItem", to: Route::Home {}, "Home" }
+			Link { class: "navItem", to: Route::Settings {}, "Settings" }
+		}
+	}
+}
+
+#[component]
+pub fn Branding() -> Element {
+	rsx! {
+		div { class: "branding" }
+	}
+}
+
+#[component]
+pub fn Widgets() -> Element {
+	rsx! {
+		div { class: "widgets" }
+	}
+}
+
+#[component]
+pub fn Utils() -> Element {
+	rsx! {
+		div { class: "utils" }
+	}
+}

AobaClient/src/main.rs

@@ -1,8 +1,13 @@
+pub mod components;
+pub mod models;
+pub mod route;
+pub mod views;
+
 use dioxus::prelude::*;
+use route::Route;
 
 const FAVICON: Asset = asset!("/assets/favicon.ico");
-const MAIN_CSS: Asset = asset!("/assets/main.css");
+const MAIN_CSS: Asset = asset!("/assets/style/main.scss");
-const HEADER_SVG: Asset = asset!("/assets/header.svg");
 
 fn main() {
 	dioxus::launch(App);
@@ -12,26 +17,13 @@ fn main() {
 fn App() -> Element {
 	rsx! {
 		document::Link { rel: "icon", href: FAVICON }
+		document::Link { rel: "preconnect", href: "https://fonts.googleapis.com" }
+		document::Link { rel: "preconnect", href: "https://fonts.gstatic.com" }
 		document::Link { rel: "stylesheet", href: MAIN_CSS }
-        Hero {}
+		document::Link {
-
+			rel: "stylesheet",
-    }
+			href: "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap",
-}
+		}
-
+		Router::<Route> {}
-#[component]
-pub fn Hero() -> Element {
-    rsx! {
-        div {
-            id: "hero",
-            img { src: HEADER_SVG, id: "header" }
-            div { id: "links",
-                a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" }
-                a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
-                a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
-                a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
-                a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
-                a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
-            }
-        }
 	}
 }

AobaClient/src/models/media.rs

@@ -0,0 +1,23 @@
+use serde::{Deserialize, Serialize};
+use serde_repr::{Deserialize_repr, Serialize_repr};
+
+#[derive(Serialize, Deserialize, Clone, PartialEq)]
+pub struct Media {
+	pub id: String,
+	pub media_id: String,
+	pub filename: String,
+	pub media_type: MediaType,
+	pub ext: String,
+	pub view_count: i32,
+	pub owner: String,
+}
+#[derive(Serialize_repr, Deserialize_repr, Clone, PartialEq)]
+#[repr(i32)]
+pub enum MediaType {
+	Image,
+	Audio,
+	Video,
+	Text,
+	Code,
+	Raw,
+}

AobaClient/src/models/mod.rs

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

AobaClient/src/route.rs

@@ -0,0 +1,12 @@
+use dioxus::prelude::*;
+use crate::views::{Home, Settings};
+use crate::components::MainLayout;
+
+#[derive(Debug, Clone, Routable, PartialEq)]
+pub enum Route {
+	#[layout(MainLayout)]
+	#[route("/")]
+	Home {},
+	#[route("/settings")]
+	Settings {},
+}

AobaClient/src/views/home.rs

@@ -0,0 +1,17 @@
+use crate::models::media::Media;
+use dioxus::prelude::*;
+
+#[component]
+pub fn Home() -> Element {
+	rsx! {
+		div { id: "content",
+			"This is home"
+		}
+	}
+}
+#[component]
+fn MediaDisplay(media: Media) -> Element {
+	rsx! {
+		div { "{media.id}" }
+	}
+}

AobaClient/src/views/mod.rs

@@ -0,0 +1,5 @@
+mod home;
+pub use home::Home;
+
+mod settings;
+pub use settings::Settings;

AobaClient/src/views/settings.rs

@@ -0,0 +1,6 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn Settings() -> Element {
+	rsx! { "this is settings" }
+}