From bf86e44b0024040b8122fc4a222bf04f9b510c0b Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Mon, 20 May 2024 08:18:15 +0200
Subject: [PATCH] feat(web): allow customizing accent color

---
 web/src/config.rs      |  3 +++
 web/src/lib.rs         |  1 +
 web/src/page/config.rs | 32 +++++++++++++++++++++++++++++++-
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/web/src/config.rs b/web/src/config.rs
index 9153d381..c14ff591 100644
--- a/web/src/config.rs
+++ b/web/src/config.rs
@@ -10,6 +10,9 @@ pub struct Config {
 
 	#[serde_inline_default(true)]
 	pub loop_videos: bool,
+
+	#[serde_inline_default("#BF616A".to_string())]
+	pub accent_color: String,
 }
 
 #[serde_inline_default::serde_inline_default]
diff --git a/web/src/lib.rs b/web/src/lib.rs
index b869bab5..8ce2d30a 100644
--- a/web/src/lib.rs
+++ b/web/src/lib.rs
@@ -15,6 +15,7 @@ pub const URL_PREFIX: &str = "/web";
 pub const URL_SENSITIVE: &str = "https://cdn.alemi.dev/social/nsfw.png";
 pub const DEFAULT_AVATAR_URL: &str = "https://cdn.alemi.dev/social/gradient.png";
 pub const NAME: &str = "μ";
+pub const DEFAULT_COLOR: &str = "#BF616A";
 
 use std::sync::Arc;
 use uriproxy::UriClass;
diff --git a/web/src/page/config.rs b/web/src/page/config.rs
index c7f92ba5..4a06fa2d 100644
--- a/web/src/page/config.rs
+++ b/web/src/page/config.rs
@@ -1,9 +1,15 @@
 use leptos::*;
-use crate::prelude::*;
+use crate::{prelude::*, DEFAULT_COLOR};
 
 #[component]
 pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
 	let config = use_context::<Signal<crate::Config>>().expect("missing config context");
+	let (color, set_color) = leptos_use::use_css_var("--accent");
+	let (_color_rgb, set_color_rgb) = leptos_use::use_css_var("--accent-rgb");
+
+	let previous_color = config.get().accent_color;
+	set_color_rgb.set(parse_hex(&previous_color));
+	set_color.set(previous_color);
 
 	macro_rules! get_cfg {
 		(filter $field:ident) => {
@@ -51,6 +57,22 @@ pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
 					/> collapse content warnings
 				</span>
 			</p>
+			<p>
+				accent color
+				<input type="text" class="ma-1"
+					style="width: 8ch;"
+					placeholder=DEFAULT_COLOR
+					value=color
+					on:input=move|ev| {
+						let mut val = event_target_value(&ev);
+						if val.is_empty() { val = DEFAULT_COLOR.to_string() };
+						let mut mock = config.get();
+						mock.accent_color = val.clone();
+						setter.set(mock);
+						set_color_rgb.set(parse_hex(&val));
+						set_color.set(val);
+				} />
+			</p>
 			<hr />
 			<p><code title="unchecked elements won't show in timelines">filters</code></p>
 			<ul>
@@ -65,3 +87,11 @@ pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
 		</div>
 	}
 }
+
+fn parse_hex(hex: &str) -> String {
+	if hex.len() < 7 { return "0, 0, 0".into(); }
+	let r = i64::from_str_radix(&hex[1..3], 16).unwrap_or_default();
+	let g = i64::from_str_radix(&hex[3..5], 16).unwrap_or_default();
+	let b = i64::from_str_radix(&hex[5..7], 16).unwrap_or_default();
+	format!("{r}, {g}, {b}")
+}