fix: enable real-time theme preview and refactor (#1175)

Author: MohammedAnasNathani

app/eventyay/webapp/src/components/ColorPicker.vue

@@ -2,7 +2,7 @@
 .c-color-picker
 	.color(:style="{'--color': modelValue}")
 	bunt-input(v-bind="$attrs", :modelValue="modelValue", @update:modelValue="$emit('update:modelValue', $event)")
-	input.color-picker(type="color", :value="modelValue", @change="$emit('update:modelValue', $event.target.value)")
+	input.color-picker(type="color", :value="modelValue", @input="$emit('update:modelValue', $event.target.value)")
 </template>
 <script>
 export default {

app/eventyay/webapp/src/views/admin/config/theme.vue

@@ -44,10 +44,7 @@ export default {
 	setup:() => ({v$:useVuelidate()}),
 	data() {
 		return {
-			// We do not use the global config object since we cannot rely on it being up to date (theme is only updated
-			// during application load).
 			config: null,
-
 			saving: false,
 			error: null
 		}
@@ -67,40 +64,30 @@ export default {
 			}))
 		}
 	},
+	watch: {
+		'config.theme': {
+			deep: true,
+			handler() {
+				this._applyThemePreview()
+			}
+		}
+	},
 	validations: {
 		config: {
 			theme: {
 				colors: {
-					primary: {
-						required: required('primary color is required'),
-						color: color('color must be in 3 or 6 digit hex format')
-					},
-					sidebar: {
-						required: required('sidebar color is required'),
-						color: color('color must be in 3 or 6 digit hex format')
-					},
-					bbb_background: {
-						required: required('BBB background color is required'),
-						color: color('color must be in 3 or 6 digit hex format')
-					},
-				},
-				logo: {
-					url: {
-						url: url('must be a valid url')
-					}
+					primary: { required, color },
+					sidebar: { required, color },
+					bbb_background: { required, color },
 				},
-				streamOfflineImage: {
-					url: url('must be a valid url')
-				}
+				logo: { url },
+				streamOfflineImage: { url }
 			},
 		}
 	},
 	async created() {
-		// TODO: Force reloading if world.updated is received from the server
 		try {
 			this.config = await api.call('world.config.get')
-
-			// Enforce some defaults
 			this.config.theme = {logo: {}, colors: {}, streamOfflineImage: null, textOverwrites: {}, ...this.config.theme}
 			this.config.theme.colors = {...DEFAULT_COLORS, ...this.config.theme.colors}
 			this.config.theme.logo = {...DEFAULT_LOGO, ...this.config.theme.logo}
@@ -111,13 +98,23 @@ export default {
 		}
 	},
 	methods: {
+		// New helper method to apply theme changes (as suggested by Sourcery)
+		_applyThemePreview() {
+			if (!this.config) return
+			const themePayload = {
+				colors: {...DEFAULT_COLORS, ...this.config.theme.colors},
+				logo: {...DEFAULT_LOGO, ...this.config.theme.logo},
+				streamOfflineImage: this.config.theme.streamOfflineImage ?? null,
+				identicons: {...DEFAULT_IDENTICONS, ...this.config.theme.identicons}
+			}
+			applyThemeConfig(themePayload)
+		},
 		async save() {
 			this.v$.$touch()
 			if (this.v$.$invalid) return
 			if (!this.config) return
 
 			this.error = null
-			// Cleanup empty strings in text overwrites
 			for (const key of Object.keys(this.config.theme.textOverwrites)) {
 				if (!this.config.theme.textOverwrites[key]) {
 					delete this.config.theme.textOverwrites[key]
@@ -127,13 +124,7 @@ export default {
 			this.saving = true
 			try {
 				await api.call('world.config.patch', {theme: this.config.theme})
-				const themePayload = {
-					colors: {...DEFAULT_COLORS, ...this.config.theme.colors},
-					logo: {...DEFAULT_LOGO, ...this.config.theme.logo},
-					streamOfflineImage: this.config.theme.streamOfflineImage ?? null,
-					identicons: {...DEFAULT_IDENTICONS, ...this.config.theme.identicons}
-				}
-				applyThemeConfig(themePayload)
+				this._applyThemePreview() // Re-use the helper method
 			} catch (error) {
 				console.error(error.apiError || error)
 				this.error = error.apiError?.code || error.message || error.toString()