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

@@ -67,30 +67,38 @@ export default {
 			}))
 		}
 	},
+	watch: {
+		'config.theme.colors': {
+			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')
+						required: required('Primary color is required'),
+						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')
+						required: required('Sidebar color is required'),
+						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')
+						color: color('Must be in 3 or 6 digit hex format')
 					},
 				},
 				logo: {
 					url: {
-						url: url('must be a valid url')
+						url: url('Must be a valid URL')
 					}
 				},
 				streamOfflineImage: {
-					url: url('must be a valid url')
+					url: url('Must be a valid URL')
 				}
 			},
 		}
@@ -111,6 +119,16 @@ export default {
 		}
 	},
 	methods: {
+		_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
@@ -127,13 +145,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()
 			} catch (error) {
 				console.error(error.apiError || error)
 				this.error = error.apiError?.code || error.message || error.toString()