From a1b8587ab28b4de39bca24ae1ffdd77eb9a0c2f5 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Thu, 7 Jul 2022 14:17:47 +0200
Subject: enhance: show recipients of notes with specified visibility (#8949)

* enhance: reusable visibility component

* rename renote tooltip component

The tooltip that is used for renotes can be used in other cases as well.

* add tooltip for specified recipients

* add changelog entry

* Update visibility.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/client/src/components/note-detailed.vue  | 29 ++++---------
 packages/client/src/components/note-header.vue    | 16 +-------
 packages/client/src/components/note.vue           | 16 +-------
 packages/client/src/components/renote-button.vue  |  2 +-
 packages/client/src/components/renote.details.vue | 50 -----------------------
 packages/client/src/components/users-tooltip.vue  | 50 +++++++++++++++++++++++
 packages/client/src/components/visibility.vue     | 47 +++++++++++++++++++++
 7 files changed, 111 insertions(+), 99 deletions(-)
 delete mode 100644 packages/client/src/components/renote.details.vue
 create mode 100644 packages/client/src/components/users-tooltip.vue
 create mode 100644 packages/client/src/components/visibility.vue

(limited to 'packages/client/src/components')

diff --git a/packages/client/src/components/note-detailed.vue b/packages/client/src/components/note-detailed.vue
index ba47bfcd4a..c05ab7fec4 100644
--- a/packages/client/src/components/note-detailed.vue
+++ b/packages/client/src/components/note-detailed.vue
@@ -26,12 +26,7 @@
 				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
-			<span v-if="note.visibility !== 'public'" class="visibility">
-				<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
-				<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
-				<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
-			</span>
-			<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
+			<MkVisibility :note="note"/>
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
@@ -43,12 +38,9 @@
 						<MkUserName :user="appearNote.user"/>
 					</MkA>
 					<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
-					<span v-if="appearNote.visibility !== 'public'" class="visibility">
-						<i v-if="appearNote.visibility === 'home'" class="fas fa-home"></i>
-						<i v-else-if="appearNote.visibility === 'followers'" class="fas fa-unlock"></i>
-						<i v-else-if="appearNote.visibility === 'specified'" class="fas fa-envelope"></i>
-					</span>
-					<span v-if="appearNote.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
+					<div class="info">
+						<MkVisibility :note="appearNote"/>
+					</div>
 				</div>
 				<div class="username"><MkAcct :user="appearNote.user"/></div>
 				<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
@@ -134,6 +126,7 @@ import XPoll from './poll.vue';
 import XRenoteButton from './renote-button.vue';
 import MkUrlPreview from '@/components/url-preview.vue';
 import MkInstanceTicker from '@/components/instance-ticker.vue';
+import MkVisibility from '@/components/visibility.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
@@ -388,14 +381,6 @@ if (appearNote.replyId) {
 					margin-right: 4px;
 				}
 			}
-
-			> .visibility {
-				margin-left: 8px;
-			}
-
-			> .localOnly {
-				margin-left: 8px;
-			}
 		}
 	}
 
@@ -441,6 +426,10 @@ if (appearNote.replyId) {
 						border: solid 0.5px var(--divider);
 						border-radius: 4px;
 					}
+
+					> .info {
+						float: right;
+					}
 				}
 			}
 		}
diff --git a/packages/client/src/components/note-header.vue b/packages/client/src/components/note-header.vue
index 56a3a37e75..0b05498566 100644
--- a/packages/client/src/components/note-header.vue
+++ b/packages/client/src/components/note-header.vue
@@ -9,12 +9,7 @@
 		<MkA class="created-at" :to="notePage(note)">
 			<MkTime :time="note.createdAt"/>
 		</MkA>
-		<span v-if="note.visibility !== 'public'" class="visibility">
-			<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
-			<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
-			<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
-		</span>
-		<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
+		<MkVisibility :note="note"/>
 	</div>
 </header>
 </template>
@@ -22,6 +17,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
+import MkVisibility from '@/components/visibility.vue';
 import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';
 
@@ -74,14 +70,6 @@ defineProps<{
 		flex-shrink: 0;
 		margin-left: auto;
 		font-size: 0.9em;
-
-		> .visibility {
-			margin-left: 8px;
-		}
-
-		> .localOnly {
-			margin-left: 8px;
-		}
 	}
 }
 </style>
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue
index 98c5c9a67a..b494c70392 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -28,12 +28,7 @@
 				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
-			<span v-if="note.visibility !== 'public'" class="visibility">
-				<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
-				<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
-				<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
-			</span>
-			<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
+			<MkVisibility :note="note"/>
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
@@ -118,6 +113,7 @@ import XPoll from './poll.vue';
 import XRenoteButton from './renote-button.vue';
 import MkUrlPreview from '@/components/url-preview.vue';
 import MkInstanceTicker from '@/components/instance-ticker.vue';
+import MkVisibility from '@/components/visibility.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import { focusPrev, focusNext } from '@/scripts/focus';
 import { checkWordMute } from '@/scripts/check-word-mute';
@@ -406,14 +402,6 @@ function readPromo() {
 					margin-right: 4px;
 				}
 			}
-
-			> .visibility {
-				margin-left: 8px;
-			}
-
-			> .localOnly {
-				margin-left: 8px;
-			}
 		}
 	}
 
diff --git a/packages/client/src/components/renote-button.vue b/packages/client/src/components/renote-button.vue
index 8d9f08b4c2..3bcbe665bf 100644
--- a/packages/client/src/components/renote-button.vue
+++ b/packages/client/src/components/renote-button.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
-import XDetails from '@/components/renote.details.vue';
+import XDetails from '@/components/users-tooltip.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import * as os from '@/os';
 import { $i } from '@/account';
diff --git a/packages/client/src/components/renote.details.vue b/packages/client/src/components/renote.details.vue
deleted file mode 100644
index 2df19bcd3f..0000000000
--- a/packages/client/src/components/renote.details.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
-	<div class="beaffaef">
-		<div v-for="u in users" :key="u.id" class="user">
-			<MkAvatar class="avatar" :user="u"/>
-			<MkUserName class="name" :user="u" :nowrap="true"/>
-		</div>
-		<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
-	</div>
-</MkTooltip>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './ui/tooltip.vue';
-
-const props = defineProps<{
-	users: any[]; // TODO
-	count: number;
-	targetElement: HTMLElement;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.beaffaef {
-	font-size: 0.9em;
-	text-align: left;
-
-	> .user {
-		line-height: 24px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		&:not(:last-child) {
-			margin-bottom: 3px;
-		}
-
-		> .avatar {
-			width: 24px;
-			height: 24px;
-			margin-right: 3px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/users-tooltip.vue b/packages/client/src/components/users-tooltip.vue
new file mode 100644
index 0000000000..2df19bcd3f
--- /dev/null
+++ b/packages/client/src/components/users-tooltip.vue
@@ -0,0 +1,50 @@
+<template>
+<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
+	<div class="beaffaef">
+		<div v-for="u in users" :key="u.id" class="user">
+			<MkAvatar class="avatar" :user="u"/>
+			<MkUserName class="name" :user="u" :nowrap="true"/>
+		</div>
+		<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
+	</div>
+</MkTooltip>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkTooltip from './ui/tooltip.vue';
+
+const props = defineProps<{
+	users: any[]; // TODO
+	count: number;
+	targetElement: HTMLElement;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.beaffaef {
+	font-size: 0.9em;
+	text-align: left;
+
+	> .user {
+		line-height: 24px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		&:not(:last-child) {
+			margin-bottom: 3px;
+		}
+
+		> .avatar {
+			width: 24px;
+			height: 24px;
+			margin-right: 3px;
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/components/visibility.vue b/packages/client/src/components/visibility.vue
new file mode 100644
index 0000000000..b41c950331
--- /dev/null
+++ b/packages/client/src/components/visibility.vue
@@ -0,0 +1,47 @@
+<template>
+<span v-if="note.visibility !== 'public'" :class="$style.visibility">
+	<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
+	<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
+	<i v-else-if="note.visibility === 'specified'" ref="specified" class="fas fa-envelope"></i>
+</span>
+<span v-if="note.localOnly" :class="$style.localOnly"><i class="fas fa-biohazard"></i></span>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import XDetails from '@/components/users-tooltip.vue';
+import * as os from '@/os';
+import { useTooltip } from '@/scripts/use-tooltip';
+
+const props = defineProps<{
+	note: {
+		visibility: string;
+		localOnly?: boolean;
+		visibleUserIds?: string[];
+	},
+}>();
+
+const specified = $ref<HTMLElement>();
+
+if (props.note.visibility === 'specified') {
+	useTooltip($$(specified), async (showing) => {
+		const users = await os.api('users/show', {
+			userIds: props.note.visibleUserIds,
+			limit: 10,
+		});
+
+		os.popup(XDetails, {
+			showing,
+			users,
+			count: props.note.visibleUserIds.length,
+			targetElement: specified,
+		}, {}, 'closed');
+	});
+}
+</script>
+
+<style lang="scss" module>
+.visibility, .localOnly {
+	margin-left: 0.5em;
+}
+</style>
-- 
cgit v1.2.3-freya