Instance Ticker

src/client/components/instance-ticker.vue

@@ -0,0 +1,61 @@
+<template>
+<div class="hpaizdrt" :style="bg">
+	<img v-if="info.faviconUrl" class="icon" :src="info.faviconUrl"/>
+	<span class="name">{{ info.name }}</span>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { instanceName } from '@/config';
+
+export default defineComponent({
+	props: {
+		instance: {
+			type: Object,
+			required: false
+		},
+	},
+
+	data() {
+		return {
+			info: this.instance || {
+				faviconUrl: '/favicon.ico',
+				name: instanceName,
+				themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
+			}
+		}
+	},
+
+	computed: {
+		bg(): any {
+			return this.info.themeColor ? {
+				background: `linear-gradient(90deg, ${this.info.themeColor}, ${this.info.themeColor + '00'})`
+			} : null;
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.hpaizdrt {
+	$height: 1.1rem;
+
+	height: $height;
+	border-radius: 4px 0 0 4px;
+	overflow: hidden;
+	color: #fff;
+
+	> .icon {
+		height: 100%;
+	}
+
+	> .name {
+		margin-left: 4px;
+		line-height: $height;
+		font-size: 0.9em;
+		vertical-align: top;
+		font-weight: bold;
+	}
+}
+</style>

src/client/components/note.vue

@@ -40,6 +40,7 @@
 		<MkAvatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
 			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
+			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
 			<div class="body" ref="noteBody">
 				<p v-if="appearNote.cw != null" class="cw">
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
@@ -139,6 +140,7 @@ export default defineComponent({
 		XCwButton,
 		XPoll,
 		MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
+		MkInstanceTicker: defineAsyncComponent(() => import('@/components/instance-ticker.vue')),
 	},
 
 	inject: {
@@ -258,6 +260,12 @@ export default defineComponent({
 			} else {
 				return null;
 			}
+		},
+
+		showTicker() {
+			if (this.$store.state.device.instanceTicker === 'always') return true;
+			if (this.$store.state.device.instanceTicker === 'remote' && this.appearNote.user.instance) return true;
+			return false;
 		}
 	},
 

src/client/components/sidebar.vue

@@ -246,7 +246,7 @@ export default defineComponent({
 				icon: faQuestionCircle,
 			}, {
 				type: 'link',
-				text: this.$t('aboutX', { x: instanceName || host }),
+				text: this.$t('aboutX', { x: instanceName }),
 				to: '/about',
 				icon: faInfoCircle,
 			}, {