wip: refactor(client): migrate components to composition api

packages/client/src/components/instance-ticker.vue

@@ -1,41 +1,22 @@
 <template>
 <div class="hpaizdrt" :style="bg">
-	<img v-if="info.faviconUrl" class="icon" :src="info.faviconUrl"/>
+	<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/>
-	<span class="name">{{ info.name }}</span>
+	<span class="name">{{ instance.name }}</span>
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
-import { instanceName } from '@/config';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	instance: any; // TODO
-		instance: {
+}>();
-			type: Object,
-			required: false
-		},
-	},
 
-	data() {
+const themeColor = props.instance.themeColor || '#777777';
-		return {
-			info: this.instance || {
-				faviconUrl: '/favicon.ico',
-				name: instanceName,
-				themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
-			}
-		}
-	},
 
-	computed: {
+const bg = {
-		bg(): any {
+	background: `linear-gradient(90deg, ${themeColor}, ${themeColor + '00'})`
-			const themeColor = this.info.themeColor || '#777777';
+};
-			return {
-				background: `linear-gradient(90deg, ${themeColor}, ${themeColor + '00'})`
-			};
-		}
-	}
-});
 </script>
 
 <style lang="scss" scoped>