From ace847891bcebf22c08d832a2fe5d23c468603ca Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Mon, 18 Nov 2024 00:34:26 +0200
Subject: [PATCH] web/settings: fix css editor initial state

---
 web/src/ui/settings/SettingsView.tsx | 30 ++++++++++++++++------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/web/src/ui/settings/SettingsView.tsx b/web/src/ui/settings/SettingsView.tsx
index 05ef120..814919a 100644
--- a/web/src/ui/settings/SettingsView.tsx
+++ b/web/src/ui/settings/SettingsView.tsx
@@ -134,20 +134,24 @@ interface SettingsViewProps {
 const CustomCSSInput = ({ setPref, room }: { setPref: SetPrefFunc, room: RoomStateStore }) => {
 	const client = use(ClientContext)!
 	const [context, setContext] = useState(PreferenceContext.Account)
-	const [text, setText] = useState("")
+	const getContextText = useCallback((context: PreferenceContext) => {
+		if (context === PreferenceContext.Account) {
+			return client.store.serverPreferenceCache.custom_css
+		} else if (context === PreferenceContext.Device) {
+			return client.store.localPreferenceCache.custom_css
+		} else if (context === PreferenceContext.RoomAccount) {
+			return room.serverPreferenceCache.custom_css
+		} else if (context === PreferenceContext.RoomDevice) {
+			return room.localPreferenceCache.custom_css
+		}
+	}, [client, room])
+	const origText = getContextText(context)
+	const [text, setText] = useState(origText ?? "")
 	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])
+		setText(getContextText(newContext) ?? "")
+	}, [getContextText])
 	const onChangeText = useCallback((evt: React.ChangeEvent<HTMLTextAreaElement>) => {
 		setText(evt.target.value)
 	}, [])
@@ -170,8 +174,8 @@ const CustomCSSInput = ({ setPref, room }: { setPref: SetPrefFunc, room: RoomSta
 		</div>
 		<textarea value={text} onChange={onChangeText}/>
 		<div className="buttons">
-			<button className="delete" onClick={onDelete}>Delete</button>
-			<button className="save primary-color-button" onClick={onSave}>Save</button>
+			{origText !== undefined && <button className="delete" onClick={onDelete}>Delete</button>}
+			<button className="save primary-color-button" onClick={onSave} disabled={origText === text}>Save</button>
 		</div>
 	</div>
 }