refactor(client): align filename to component name

1 files changed, 69 insertions, 0 deletions

diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
new file mode 100644
index 0000000000..d9f196f887
--- /dev/null
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -0,0 +1,69 @@
+<template>
+<div class="hpaizdrt" :style="bg">
+	<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/>
+	<span class="name">{{ instance.name }}</span>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { instanceName } from '@/config';
+import { instance as Instance } from '@/instance';
+
+const props = defineProps<{
+	instance?: {
+		faviconUrl?: string
+		name: string
+		themeColor?: string
+	}
+}>();
+
+// if no instance data is given, this is for the local instance
+const instance = props.instance ?? {
+	faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico',
+	name: instanceName,
+	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
+};
+
+const themeColor = instance.themeColor ?? '#777777';
+
+const bg = {
+	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`
+};
+</script>
+
+<style lang="scss" scoped>
+.hpaizdrt {
+	$height: 1.1rem;
+
+	height: $height;
+	border-radius: 4px 0 0 4px;
+	overflow: hidden;
+	color: #fff;
+	text-shadow: /* .866 ≈ sin(60deg) */
+		1px 0 1px #000,
+		.866px .5px 1px #000,
+		.5px .866px 1px #000,
+		0 1px 1px #000,
+		-.5px .866px 1px #000,
+		-.866px .5px 1px #000,
+		-1px 0 1px #000,
+		-.866px -.5px 1px #000,
+		-.5px -.866px 1px #000,
+		0 -1px 1px #000,
+		.5px -.866px 1px #000,
+		.866px -.5px 1px #000;
+
+	> .icon {
+		height: 100%;
+	}
+
+	> .name {
+		margin-left: 4px;
+		line-height: $height;
+		font-size: 0.9em;
+		vertical-align: top;
+		font-weight: bold;
+	}
+}
+</style>