Refactor custom-css to use Composition API (#8571)

* refactor(client): refactor custom-css to use Composition API

* Apply review suggestion from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

1 files changed, 22 insertions, 34 deletions

diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue
index 556ee30c1d..20db077ceb 100644
--- a/packages/client/src/pages/settings/custom-css.vue
+++ b/packages/client/src/pages/settings/custom-css.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ $ts.customCssWarn }}</FormInfo>
+	<FormInfo warn class="_formBlock">{{ i18n.ts.customCssWarn }}</FormInfo>
 
 	<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
 		<template #label>CSS</template>
@@ -8,50 +8,38 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { defineExpose, ref, watch } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormInfo from '@/components/ui/info.vue';
 import * as os from '@/os';
 import { unisonReload } from '@/scripts/unison-reload';
 import * as symbols from '@/symbols';
-import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		FormTextarea,
-		FormInfo,
-	},
+const localCustomCss = ref(localStorage.getItem('customCss') ?? '');
 
-	emits: ['info'],
+async function apply() {
+	localStorage.setItem('customCss', localCustomCss.value);
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.customCss,
-				icon: 'fas fa-code',
-				bg: 'var(--bg)',
-			},
-			localCustomCss: localStorage.getItem('customCss')
-		}
-	},
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
 
-	mounted() {
-		this.$watch('localCustomCss', this.apply);
-	},
+	unisonReload();
+}
 
-	methods: {
-		async apply() {
-			localStorage.setItem('customCss', this.localCustomCss);
-
-			const { canceled } = await os.confirm({
-				type: 'info',
-				text: this.$ts.reloadToApplySetting,
-			});
-			if (canceled) return;
+watch(localCustomCss, async () => {
+	await apply();
+});
 
-			unisonReload();
-		}
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.ts.customCss,
+		icon: 'fas fa-code',
+		bg: 'var(--bg)',
 	}
 });
 </script>