added: client: show instance info in ticker

CHANGELOG.md

@@ -9,6 +9,7 @@ For older Misskey versions, see [CHANGELOG-OLD.md](./CHANGELOG-OLD.md).
 
 ## Unreleased
 ### Added
+- Client: Show instance info in ticker
 - Client: Readded group pages
 - Client: add re-collapsing to quoted notes
 

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

@@ -1,18 +1,21 @@
 <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>
 
 <script lang="ts" setup>
-import { instanceName } from '@/config';
+import { instanceName, version, software } from '@/config';
 
 const props = defineProps<{
 	instance?: {
 		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: software,
+	softwareVersion: version,
 };
 
 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>

packages/client/src/config.ts

@@ -10,6 +10,7 @@ export const lang = localStorage.getItem('lang');
 export const langs = _LANGS_;
 export const locale = JSON.parse(localStorage.getItem('locale'));
 export const version = _VERSION_;
-export const instanceName = siteName === 'Misskey' ? host : siteName;
+export const software = _SOFTWARE_;
+export const instanceName = siteName === 'FoundKey' ? host : siteName;
 export const ui = localStorage.getItem('ui');
 export const debug = localStorage.getItem('debug') === 'true';

packages/client/vite.config.ts

@@ -33,6 +33,7 @@ export default defineConfig(({ command, mode }) => {
 
 		define: {
 			_VERSION_: JSON.stringify(meta.version),
+			_SOFTWARE_: JSON.stringify(meta.name),
 			_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]) => [k, v._lang_])),
 			_ENV_: JSON.stringify(process.env.NODE_ENV),
 			_DEV_: process.env.NODE_ENV !== 'production',