From 2487c8c88f3709fc8542db79c6bcc9b5f6d07b76 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sun, 17 Nov 2024 14:46:57 +0200
Subject: [PATCH] web/settings: add custom css editor

---
 web/src/ui/settings/SettingsView.css | 54 +++++++++++++++++++++++++++-
 web/src/ui/settings/SettingsView.tsx | 54 ++++++++++++++++++++++++++--
 2 files changed, 105 insertions(+), 3 deletions(-)

diff --git a/web/src/ui/settings/SettingsView.css b/web/src/ui/settings/SettingsView.css
index 1ba2bd6..fcf2126 100644
--- a/web/src/ui/settings/SettingsView.css
+++ b/web/src/ui/settings/SettingsView.css
@@ -3,7 +3,7 @@ div.settings-view {
 	display: flex;
 	flex-direction: column;
 
-	> h2 {
+	h2, h3 {
 		margin: 0;
 	}
 
@@ -14,4 +14,56 @@ div.settings-view {
 			display: flex;
 		}
 	}
+
+	> div.custom-css-input {
+		display: flex;
+		flex-direction: column;
+		gap: .5rem;
+		margin-right: 1rem;
+
+		> div.header {
+			display: flex;
+			gap: .5rem;
+		}
+
+		> textarea {
+			width: 100%;
+			box-sizing: border-box;
+			resize: vertical;
+			border: 1px solid var(--border-color);
+			outline: none;
+			height: 10rem;
+			min-height: 3rem;
+			font-family: var(--monospace-font-stack);
+		}
+
+		> div.buttons {
+			display: flex;
+			justify-content: right;
+			gap: .5rem;
+
+			> button {
+				padding: .5rem 1rem;
+
+				&.save {
+					background-color: var(--primary-color);
+					color: var(--inverted-text-color);
+					font-weight: bold;
+
+					&:hover, &:focus {
+						background-color: var(--primary-color-dark);
+					}
+				}
+
+				&.delete {
+					font-weight: bold;
+
+					&:hover, &:focus {
+						background-color: var(--error-color);
+						color: var(--inverted-text-color);
+					}
+				}
+			}
+		}
+	}
 }
diff --git a/web/src/ui/settings/SettingsView.tsx b/web/src/ui/settings/SettingsView.tsx
index 11db4ab..b38c980 100644
--- a/web/src/ui/settings/SettingsView.tsx
+++ b/web/src/ui/settings/SettingsView.tsx
@@ -13,9 +13,10 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-import { use, useCallback } from "react"
+import { use, useCallback, useState } from "react"
 import { RoomStateStore, usePreferences } from "@/api/statestore"
 import { Preference, PreferenceContext, PreferenceValueType, Preferences, preferences } from "@/api/types/preferences"
+import useEvent from "@/util/useEvent.ts"
 import ClientContext from "../ClientContext.ts"
 import JSONView from "../util/JSONView.tsx"
 import Toggle from "../util/Toggle.tsx"
@@ -85,12 +86,15 @@ interface PreferenceRowProps {
 const PreferenceRow = ({
 	name, pref, setPref, globalServer, globalLocal, roomServer, roomLocal,
 }: PreferenceRowProps) => {
+	const prefType = typeof pref.defaultValue
+	if (prefType !== "boolean" && !pref.allowedValues) {
+		return null
+	}
 	const makeContentCell = (
 		context: PreferenceContext,
 		val: PreferenceValueType | undefined,
 		inheritedVal: PreferenceValueType,
 	) => {
-		const prefType = typeof pref.defaultValue
 		if (prefType === "boolean") {
 			return <BooleanPreferenceCell
 				name={name}
@@ -127,6 +131,51 @@ interface SettingsViewProps {
 	room: RoomStateStore
 }
 
+const CustomCSSInput = ({ setPref, room }: { setPref: SetPrefFunc, room: RoomStateStore }) => {
+	const client = use(ClientContext)!
+	const [context, setContext] = useState(PreferenceContext.Account)
+	const [text, setText] = useState("")
+	const onChangeContext = useCallback((evt: React.ChangeEvent<HTMLSelectElement>) => {
+		const newContext = evt.target.value as PreferenceContext
+		setContext(newContext)
+		if (newContext === PreferenceContext.Account) {
+			setText(client.store.serverPreferenceCache.custom_css ?? "")
+		} else if (newContext === PreferenceContext.Device) {
+			setText(client.store.localPreferenceCache.custom_css ?? "")
+		} else if (newContext === PreferenceContext.RoomAccount) {
+			setText(room.serverPreferenceCache.custom_css ?? "")
+		} else if (newContext === PreferenceContext.RoomDevice) {
+			setText(room.localPreferenceCache.custom_css ?? "")
+		}
+	}, [client, room])
+	const onChangeText = useCallback((evt: React.ChangeEvent<HTMLTextAreaElement>) => {
+		setText(evt.target.value)
+	}, [])
+	const onSave = useEvent(() => {
+		setPref(context, "custom_css", text)
+	})
+	const onDelete = useEvent(() => {
+		setPref(context, "custom_css", undefined)
+		setText("")
+	})
+	return <div className="custom-css-input">
+		<div className="header">
+			<h3>Custom CSS</h3>
+			<select value={context} onChange={onChangeContext}>
+				<option value={PreferenceContext.Account}>Account</option>
+				<option value={PreferenceContext.Device}>Device</option>
+				<option value={PreferenceContext.RoomAccount}>Room (account)</option>
+				<option value={PreferenceContext.RoomDevice}>Room (device)</option>
+			</select>
+		</div>
+		<textarea value={text} onChange={onChangeText}/>
+		<div className="buttons">
+			<button className="delete" onClick={onDelete}>Delete</button>
+			<button className="save" onClick={onSave}>Save</button>
+		</div>
+	</div>
+}
+
 const SettingsView = ({ room }: SettingsViewProps) => {
 	const client = use(ClientContext)!
 	const setPref = useCallback((context: PreferenceContext, key: keyof Preferences, value: PreferenceValueType | undefined)=>  {
@@ -186,6 +235,7 @@ const SettingsView = ({ room }: SettingsViewProps) => {
 					/>)}
 			</tbody>
 		</table>
+		<CustomCSSInput setPref={setPref} room={room} />
 		<JSONView data={room.preferences} />
 	</>
 }