From 785c837a07e684b4f4acb65c36927041402fd970 Mon Sep 17 00:00:00 2001
From: fly_mc <me@flymc.cc>
Date: Wed, 13 Nov 2024 23:53:03 +0800
Subject: [PATCH] frontend: tweak instance ticker

---
 locales/en-US.yml                             |  1 +
 locales/zh-CN.yml                             |  1 +
 locales/zh-TW.yml                             |  1 +
 .../src/components/MkInstanceTicker.vue       | 62 ++++++++++------
 packages/frontend/src/components/MkNote.vue   |  1 -
 .../src/components/MkNoteDetailed.vue         | 39 ++++++++---
 .../frontend/src/components/MkNoteHeader.vue  | 70 ++++++++++++-------
 packages/frontend/src/pages/settings/pari.vue |  2 +
 packages/frontend/src/store.ts                |  4 ++
 9 files changed, 121 insertions(+), 60 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index cfa64b0b8..ec336c2d7 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -2838,3 +2838,4 @@ _selfXssPrevention:
   description3: "For more information, please check here: {link}"
 insertNewNotes: "Insert new notes at current position"
 insertNewNotesDescription: "Insert new notes at the current position while scrolling timeline."
+clickToShowInstanceTickerWindow: "Click instance ticker to show instance info"
diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
index f0501d5ae..ebdedd8a0 100644
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -2838,3 +2838,4 @@ _selfXssPrevention:
   description3: "详情请看这里。{link}"
 insertNewNotes: "在当前位置插入新帖文"
 insertNewNotesDescription: "將新收到的帖文插入到正在浏览的位置。"
+clickToShowInstanceTickerWindow: "点击Instance ticker显示实例信息窗口"
diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
index b7d2576bc..bac27c345 100644
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -2837,3 +2837,4 @@ _selfXssPrevention:
   description3: "細節請看這裡。{link}"
 insertNewNotes: "在當前位置插入新貼文"
 insertNewNotesDescription: "將剛剛收到的貼文插入到正在瀏覽的位置。"
+clickToShowInstanceTickerWindow: "點擊Instance ticker顯示實例資訊視窗"
diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index 5a2a36a91..7191358f8 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -1,10 +1,10 @@
 <!--
-SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-FileCopyrightText: syuilo and other misskey contributors
 SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root" :style="bg">
+<div :class="$style.root" :style="bg" @click.stop="defaultStore.state.clickToShowInstanceTickerWindow && showInstanceTickerWindow">
 	<img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/>
 	<div :class="$style.name">{{ instance.name }}</div>
 </div>
@@ -15,13 +15,16 @@ import { computed } from 'vue';
 import { instanceName } from '@@/js/config.js';
 import { instance as Instance } from '@/instance.js';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
+import { defaultStore } from '@/store.js';
+import * as os from '@/os.js';
 
 const props = defineProps<{
 	instance?: {
-		faviconUrl?: string | null
-		name?: string | null
-		themeColor?: string | null
+		faviconUrl?: string
+		name: string
+		themeColor?: string
 	}
+	host: string | null,
 }>();
 
 // if no instance data is given, this is for the local instance
@@ -30,26 +33,33 @@ const instance = props.instance ?? {
 	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
 };
 
-const faviconUrl = computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? '/favicon.ico');
+const faviconUrl = computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.faviconUrl, 'preview') ?? '/favicon.ico');
 
 const themeColor = instance.themeColor ?? '#777777';
 
 const bg = {
-	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
+	//background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
+	background: `${themeColor}`,
 };
+
+function showInstanceTickerWindow() {
+	if (props.host) {
+		os.pageWindow(`/instance-info/${props.host}`);
+	} else {
+		os.pageWindow('/about');
+	}
+}
 </script>
 
 <style lang="scss" module>
-$height: 2ex;
-
 .root {
 	display: flex;
 	align-items: center;
-	height: $height;
-	border-radius: 4px 0 0 4px;
+	height: 1.5ex;
+	border-radius: 1.0rem;
+	padding: 4px;
 	overflow: clip;
 	color: #fff;
-	margin: -.3em 0 0 0;
 	text-shadow: /* .866 ≈ sin(60deg) */
 		1px 0 1px #000,
 		.866px .5px 1px #000,
@@ -63,24 +73,34 @@ $height: 2ex;
 		0 -1px 1px #000,
 		.5px -.866px 1px #000,
 		.866px -.5px 1px #000;
-	mask-image: linear-gradient(90deg,
-		rgb(0,0,0),
-		rgb(0,0,0) calc(100% - 16px),
-		rgba(0,0,0,0) 100%
-	);
 }
 
 .icon {
-	height: $height;
+	height: 2ex;
 	flex-shrink: 0;
 }
 
 .name {
-	margin-left: 4px;
+	padding: 0.5ex;
+	margin: -0.5ex;
+	margin-left: calc(4px - 0.5ex);
 	line-height: 1;
-	font-size: 0.9em;
+	font-size: 0.8em;
 	font-weight: bold;
 	white-space: nowrap;
-	overflow: visible;
+	overflow: hidden;
+	overflow-wrap: anywhere;
+	max-width: 300px;
+	text-overflow: ellipsis;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+@container (max-width: 400px) {
+	.name {
+		max-width: 55px;
+	}
 }
 </style>
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 7b4a75109..a9f4ffba7 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -70,7 +70,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		    <MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
 		    <div :class="$style.main">
 			    <MkNoteHeader :note="appearNote" :mini="true" @click.stop/>
-			    <MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
 		    </div>
 	    </div>
 		<div :class="[{ [$style.noteClickToOpen]: defaultStore.state.noteClickToOpen }]" @click.stop="defaultStore.state.noteClickToOpen ? noteClickToOpen(appearNote.id) : undefined">
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index c7d4e4c74..8ad128e54 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -53,14 +53,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkUserName :nowrap="false" :user="appearNote.user"/>
 					</MkA>
 					<span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span>
-					<div :class="$style.noteHeaderInfo">
-						<span v-if="appearNote.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[appearNote.visibility]">
-							<i v-if="appearNote.visibility === 'home'" class="ti ti-home"></i>
-							<i v-else-if="appearNote.visibility === 'followers'" class="ti ti-lock"></i>
-							<i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
-						</span>
-						<span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
-					</div>
 				</div>
 				<div :class="$style.noteHeaderUsernameAndBadgeRoles">
 					<div :class="$style.noteHeaderUsername">
@@ -70,7 +62,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<img v-for="(role, i) in appearNote.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.noteHeaderBadgeRole" :src="role.iconUrl!"/>
 					</div>
 				</div>
-				<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
+			</div>
+			<div :class="$style.noteHeaderMetaInfo">
+				<div :class="$style.noteHeaderInfo">
+					<span v-if="appearNote.visibility !== 'public'" style="margin-right: 0.5em;" :title="i18n.ts._visibility[appearNote.visibility]">
+						<i v-if="appearNote.visibility === 'home'" class="ti ti-home"></i>
+						<i v-else-if="appearNote.visibility === 'followers'" class="ti ti-lock"></i>
+						<i v-else-if="appearNote.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
+					</span>
+					<span v-if="appearNote.localOnly" style="margin-right: 0.5em;" :title="i18n.ts._visibility['disableFederation']">
+						<i class="ti ti-rocket-off"></i>
+					</span>
+				</div>
+				<MkInstanceTicker v-if="showTicker" :style="{ cursor: defaultStore.state.clickToShowInstanceTickerWindow ? 'pointer' : 'default' }" :instance="appearNote.user.instance" :host="note.user.host"/>
 			</div>
 		</header>
 		<div :class="$style.noteContent">
@@ -823,7 +827,6 @@ onMounted(() => {
 }
 
 .noteHeaderName {
-	margin: 0 0 -.2em 0;
 	font-weight: bold;
 	line-height: 1.3;
 }
@@ -848,9 +851,23 @@ onMounted(() => {
 
 .noteHeaderUsername {
 	margin-bottom: 2px;
-	margin-right: 0.5em;
 	line-height: 1.3;
 	word-wrap: anywhere;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+.noteHeaderMetaInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-left: auto;
+  min-width: fit-content;
+  flex-shrink: 0;
 }
 
 .noteHeaderBadgeRoles {
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index a0fe23e5a..3556c75a8 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -20,17 +20,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		   	<div :class="$style.username"><MkAcct :user="note.user"/></div>
 	    </div>
-		<!--<div :class="$style.section">-->
+		<div :class="$style.section">
 			<div :class="$style.info">
 				<span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span>
 				<div v-if="mock">
 					<MkTime :time="note.createdAt" colored/>
 				</div>
 				<MkA v-else :to="notePage(note)" @mouseenter="setDetail(true)" @mouseleave="setDetail(false)" :style="{ textDecoration: 'none', userSelect: 'none' }">
-					<MkTime 
-                        :time="note.createdAt" 
-                        :mode="(defaultStore.state.showDetailTimeWhenHover && isDetail) ? 'detail' : undefined" 
-                        colored 
+					<MkTime
+                        :time="note.createdAt"
+                        :mode="(defaultStore.state.showDetailTimeWhenHover && isDetail) ? 'detail' : undefined"
+                        colored
                     />
 				</MkA>
 				<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
@@ -41,10 +41,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
 				<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
 			</div>
-	    <!--</div>-->
+			<div :class="$style.info"><MkInstanceTicker v-if="showTicker" :style="{ cursor: defaultStore.state.clickToShowInstanceTickerWindow ? 'pointer' : 'default' }" :instance="note.user.instance" :host="note.user.host"/></div>
+	  </div>
 	</header>
 </template>
-	
+
 <script lang="ts" setup>
 import { inject, ref } from 'vue';
 import * as Misskey from 'misskey-js';
@@ -52,16 +53,19 @@ import { i18n } from '@/i18n.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import { defaultStore } from '@/store.js';
+import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 
 const isDetail = ref(false);
 const setDetail = (value) => {
     isDetail.value = value;
 };
 
-defineProps<{
+const props = defineProps<{
 	note: Misskey.entities.Note;
 }>();
 
+const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && props.note.user.instance);
+
 const mock = inject<boolean>('mock', false);
 </script>
 
@@ -73,25 +77,29 @@ const mock = inject<boolean>('mock', false);
 }
 
 .section {
-		align-items: flex-start;
-		white-space: nowrap;
-		flex-direction: column;
-		overflow: hidden;
+	display: flex;
+	white-space: nowrap;
+	flex-direction: column;
 
-		&:last-child {
-			display: flex;
-			align-items: flex-end;
-			margin-left: auto;
-			margin-bottom: auto;
-			padding-left: 10px;
-			overflow: clip;
-		}
+	&:first-child {
+		flex: 1;
+		overflow: hidden;
+		min-width: 0;
+	}
+
+	&:last-child {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		margin-left: auto;
+		overflow: visible;
+	}
 }
 
 .name {
 	flex-shrink: 1;
 	display: block;
-	margin: .3em .5em 0 0;
+	margin: 0 .5em 0 0;
 	padding: 0;
 	overflow: hidden;
 	font-size: 1em;
@@ -117,10 +125,9 @@ const mock = inject<boolean>('mock', false);
 
 .username {
 	flex-shrink: 9999999;
-	margin: -.3em .5em .3em 0;
+	margin: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	font-size: 95%;
 	opacity: 0.8;
 
 	&::-webkit-scrollbar {
@@ -129,10 +136,19 @@ const mock = inject<boolean>('mock', false);
 }
 
 .info {
-	flex-shrink: 0;
-	margin-left: auto;
-	font-size: 0.9em;
-	text-decoration: none;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+
+	&:first-child {
+		margin-top: 0;
+		font-size: 0.9em;
+	}
+
+	&:not(:first-child) {
+		margin-top: 4px;
+		font-size: 0.9em;
+	}
 }
 
 .badgeRoles {
diff --git a/packages/frontend/src/pages/settings/pari.vue b/packages/frontend/src/pages/settings/pari.vue
index dca8ce80f..79f32f3fc 100644
--- a/packages/frontend/src/pages/settings/pari.vue
+++ b/packages/frontend/src/pages/settings/pari.vue
@@ -79,6 +79,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.insertNewNotes }}</template>
 					<template #caption>{{ i18n.ts.insertNewNotesDescription }}</template>
 				</MkSwitch>
+				<MkSwitch v-model="clickToShowInstanceTickerWindow">{{ i18n.ts.clickToShowInstanceTickerWindow }}</MkSwitch>
 				<MkSelect v-model="autoSpacingBehaviour">
 					<template #label>{{ i18n.ts.autoSpacing }}</template>
 					<option :value="null">{{ i18n.ts.disabled }}</option>
@@ -137,6 +138,7 @@ const disableReactionsViewer = computed(defaultStore.makeGetterSetter('disableRe
 const collapsedUnexpectedLangs = computed(defaultStore.makeGetterSetter('collapsedUnexpectedLangs'));
 const emojiAutoSpacing = computed(defaultStore.makeGetterSetter('emojiAutoSpacing'));
 const insertNewNotes = computed(defaultStore.makeGetterSetter('insertNewNotes'));
+const clickToShowInstanceTickerWindow = computed(defaultStore.makeGetterSetter('clickToShowInstanceTickerWindow'));
 
 definePageMetadata(() => ({
 	title: 'Pari Plus!',
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 586bb1fa4..57a0b63a7 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -563,6 +563,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	clickToShowInstanceTickerWindow: {
+		where: 'device',
+		default: false,
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期