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

@@ -1,7 +1,8 @@
 <template>
-<div class="hpaizdrt" :style="bg">
+<div class="hpaizdrt" :style="bg" v-tooltip="instance.softwareName + ' ' + instance.softwareVersion">
 	<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/>
 	<span class="name">{{ instance.name }}</span>
+	<span v-if="instance.softwareName" class="software">{{ instance.softwareName }}</span>
 </div>
 </template>
 
@@ -13,6 +14,8 @@ const props = defineProps<{
 		faviconUrl?: string;
 		name: string;
 		themeColor?: string;
+		softwareName?: string;
+		softwareVersion?: string;
 	};
 }>();
 
@@ -21,6 +24,8 @@ const instance = props.instance ?? {
 	faviconUrl: '/favicon.ico',
 	name: instanceName,
 	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
+	softwareName: 'misskey',
+	softwareVersion: '',
 };
 
 const themeColor = instance.themeColor ?? '#777777';
@@ -33,6 +38,7 @@ const bg = {
 <style lang="scss" scoped>
 .hpaizdrt {
 	$height: 1.1rem;
+	position: relative;
 
 	height: $height;
 	border-radius: 4px 0 0 4px;
@@ -59,11 +65,24 @@ const bg = {
 	}
 
 	> .name {
-		margin-left: 4px;
+		margin-left: .3em;
 		line-height: $height;
 		font-size: 0.9em;
 		vertical-align: top;
 		font-weight: bold;
 	}
+
+	> .software {
+		float: right;
+		margin-right: .3em;
+		line-height: $height;
+		font-size: 0.9em;
+		vertical-align: top;
+
+		color: var(--fg);
+		text-shadow: none;
+
+		text-transform: capitalize;
+	}
 }
 </style>