display online status

src/client/components/avatars.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<div v-for="user in us" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
-		<MkAvatar :user="user" style="width:32px;height:32px;"/>
+		<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/>
 	</div>
 </div>
 </template>

src/client/components/global/avatar.vue

@@ -1,9 +1,11 @@
 <template>
 <span class="eiwwqkts _noSelect" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
 	<img class="inner" :src="url" decoding="async"/>
+	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </span>
 <MkA class="eiwwqkts _noSelect" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
 	<img class="inner" :src="url" decoding="async"/>
+	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </MkA>
 </template>
 
@@ -12,8 +14,12 @@ import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash';
 import { acct, userPage } from '@client/filters/user';
+import MkUserOnlineIndicator from '@client/components/user-online-indicator.vue';
 
 export default defineComponent({
+	components: {
+		MkUserOnlineIndicator
+	},
 	props: {
 		user: {
 			type: Object,
@@ -30,6 +36,10 @@ export default defineComponent({
 		disablePreview: {
 			required: false,
 			default: false
+		},
+		showIndicator: {
+			required: false,
+			default: false
 		}
 	},
 	emits: ['click'],
@@ -93,7 +103,7 @@ export default defineComponent({
 		}
 	}
 
-	.inner {
+	> .inner {
 		position: absolute;
 		bottom: 0;
 		left: 0;
@@ -106,5 +116,14 @@ export default defineComponent({
 		width: 100%;
 		height: 100%;
 	}
+
+	> .indicator {
+		position: absolute;
+		z-index: 1;
+		bottom: 0;
+		left: 0;
+		width: 20%;
+		height: 20%;
+	}
 }
 </style>

src/client/components/note-detailed.vue

@@ -35,7 +35,7 @@
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
 		<header class="header">
-			<MkAvatar class="avatar" :user="appearNote.user"/>
+			<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
 			<div class="body">
 				<div class="top">
 					<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.user.id">

src/client/components/user-info.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="_panel vjnjpkug">
 	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
-	<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+	<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 	<div class="title">
 		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 		<p class="username"><MkAcct :user="user"/></p>

src/client/components/user-online-indicator.vue

@@ -0,0 +1,50 @@
+<template>
+<div class="fzgwjkgc" :class="user.onlineStatus" v-tooltip="text"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+	},
+
+	computed: {
+		text(): string {
+			switch (this.user.onlineStatus) {
+				case 'online': return this.$ts.online;
+				case 'active': return this.$ts.active;
+				case 'offline': return this.$ts.offline;
+				case 'unknown': return this.$ts.unknown;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.fzgwjkgc {
+	box-shadow: 0 0 0 3px var(--panel);
+	border-radius: 100%;
+
+	&.online {
+		background: #58d4c9;
+	}
+
+	&.active {
+		background: #e4bc48;
+	}
+
+	&.offline {
+		background: #ea5353;
+	}
+
+	&.unknown {
+		background: #888;
+	}
+}
+</style>

src/client/components/user-preview.vue

@@ -3,7 +3,7 @@
 	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
 		<div v-if="fetched" class="info">
 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
-			<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 			<div class="title">
 				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 				<p class="username"><MkAcct :user="user"/></p>

src/client/components/user-select-dialog.vue

@@ -17,7 +17,7 @@
 	<div class="tbhwbxda _section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }">
 		<div class="users" v-if="users.length > 0">
 			<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-				<MkAvatar :user="user" class="avatar"/>
+				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 				<div class="body">
 					<MkUserName :user="user" class="name"/>
 					<MkAcct :user="user" class="acct"/>
@@ -31,7 +31,7 @@
 	<div class="tbhwbxda _section recent" v-if="username == '' && host == ''">
 		<div class="users">
 			<div class="user" v-for="user in recentUsers" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-				<MkAvatar :user="user" class="avatar"/>
+				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 				<div class="body">
 					<MkUserName :user="user" class="name"/>
 					<MkAcct :user="user" class="acct"/>

src/client/components/users-dialog.vue

@@ -7,7 +7,7 @@
 
 	<div class="users">
 		<MkA v-for="item in items" class="user" :key="item.id" :to="userPage(extract ? extract(item) : item)">
-			<MkAvatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
+			<MkAvatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true" :show-indicator="true"/>
 			<div class="body">
 				<MkUserName :user="extract ? extract(item) : item" class="name"/>
 				<MkAcct :user="extract ? extract(item) : item" class="acct"/>

src/client/pages/clip.vue

@@ -5,7 +5,7 @@
 			<Mfm :text="clip.description" :is-note="false" :i="$i"/>
 		</div>
 		<div class="user">
-			<MkAvatar :user="clip.user" class="avatar"/> <MkUserName :user="clip.user" :nowrap="false"/>
+			<MkAvatar :user="clip.user" class="avatar" :show-indicator="true"/> <MkUserName :user="clip.user" :nowrap="false"/>
 		</div>
 	</div>
 

src/client/pages/follow-requests.vue

@@ -9,7 +9,7 @@
 		</template>
 		<template #default="{items}">
 			<div class="user _panel" v-for="req in items" :key="req.id">
-				<MkAvatar class="avatar" :user="req.follower"/>
+				<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
 				<div class="body">
 					<div class="name">
 						<MkA class="name" :to="userPage(req.follower)" v-user-preview="req.follower.id"><MkUserName :user="req.follower"/></MkA>

src/client/pages/instance/abuses.vue

@@ -36,7 +36,7 @@
 			<MkPagination :pagination="pagination" #default="{items}" ref="reports" style="margin-top: var(--margin);">
 				<div class="bcekxzvu _card _gap" v-for="report in items" :key="report.id">
 					<div class="_content target">
-						<MkAvatar class="avatar" :user="report.targetUser"/>
+						<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
 						<div class="info">
 							<MkUserName class="name" :user="report.targetUser"/>
 							<div class="acct">@{{ acct(report.targetUser) }}</div>

src/client/pages/instance/user-dialog.vue

@@ -8,7 +8,7 @@
 	<div class="vrcsvlkm" v-if="user && info">
 		<div class="_section">
 			<div class="banner" :style="bannerStyle">
-				<MkAvatar class="avatar" :user="user"/>
+				<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
 			</div>
 		</div>
 		<div class="_section">

src/client/pages/instance/users.vue

@@ -54,7 +54,7 @@
 
 			<MkPagination :pagination="pagination" #default="{items}" class="users" ref="users">
 				<button class="user _panel _button _gap" v-for="user in items" :key="user.id" @click="show(user)">
-					<MkAvatar class="avatar" :user="user" :disable-link="true"/>
+					<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
 					<div class="body">
 						<header>
 							<MkUserName class="name" :user="user"/>

src/client/pages/messaging/index.vue

@@ -12,7 +12,7 @@
 			v-anim="i"
 		>
 			<div>
-				<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
+				<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
 				<header v-if="message.groupId">
 					<span class="name">{{ message.group.name }}</span>
 					<MkTime :time="message.createdAt" class="time"/>

src/client/pages/messaging/messaging-room.message.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="thvuemwp" :class="{ isMe }" v-size="{ max: [400, 500] }">
-	<MkAvatar class="avatar" :user="message.user"/>
+	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
 	<div class="content">
 		<div class="balloon" :class="{ noText: message.text == null }" >
 			<button class="delete-button" v-if="isMe" :title="$ts.delete" @click="del">

src/client/pages/my-groups/group.vue

@@ -17,7 +17,7 @@
 			<div class="_content">
 				<div class="users">
 					<div class="user _panel" v-for="user in users" :key="user.id">
-						<MkAvatar :user="user" class="avatar"/>
+						<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 						<div class="body">
 							<MkUserName :user="user" class="name"/>
 							<MkAcct :user="user" class="acct"/>

src/client/pages/my-lists/list.vue

@@ -16,7 +16,7 @@
 			<div class="_content">
 				<div class="users">
 					<div class="user _panel" v-for="user in users" :key="user.id">
-						<MkAvatar :user="user" class="avatar"/>
+						<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 						<div class="body">
 							<MkUserName :user="user" class="name"/>
 							<MkAcct :user="user" class="acct"/>

src/client/pages/note.vue

@@ -18,7 +18,7 @@
 						<b>{{ item.name }}</b>
 						<div v-if="item.description" class="description">{{ item.description }}</div>
 						<div class="user">
-							<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/>
+							<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
 						</div>
 					</MkA>
 				</div>

src/client/pages/reversi/index.vue

@@ -11,7 +11,7 @@
 			<template #header>{{ $ts.invitations }}</template>
 			<div class="nfcacttm">
 				<button class="invitation _panel _button" v-for="invitation in invitations" tabindex="-1" @click="accept(invitation)">
-					<MkAvatar class="avatar" :user="invitation.parent"/>
+					<MkAvatar class="avatar" :user="invitation.parent" :show-indicator="true"/>
 					<span class="name"><b><MkUserName :user="invitation.parent"/></b></span>
 					<span class="username">@{{ invitation.parent.username }}</span>
 					<MkTime :time="invitation.createdAt" class="time"/>

src/client/pages/user/index.vue

@@ -8,7 +8,7 @@
 		</div>
 		<div class="contents">
 			<div class="side _forceContainerFull_">
-				<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+				<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 				<div class="name">
 					<MkUserName :user="user" :nowrap="false" class="name"/>
 					<MkAcct :user="user" :detail="true" class="acct"/>
@@ -121,7 +121,7 @@
 						<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 					</div>
 				</div>
-				<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+				<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 				<div class="title">
 					<MkUserName :user="user" :nowrap="false" class="name"/>
 					<div class="bottom">

src/client/ui/_common_/header.vue

@@ -7,7 +7,7 @@
 		<div class="titleContainer">
 			<div class="title">
 				<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
-				<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
+				<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
 				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 				<span v-else-if="info.title" class="text">{{ info.title }}</span>
 			</div>

src/client/ui/visitor/header.vue

@@ -9,7 +9,7 @@
 			<div class="page active link" v-if="info">
 				<div class="title">
 					<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
-					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
+					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
 					<span v-if="info.title" class="text">{{ info.title }}</span>
 					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 				</div>
@@ -28,7 +28,7 @@
 		</button>
 		<div class="title" v-if="info">
 			<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
-			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
+			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
 			<span v-if="info.title" class="text">{{ info.title }}</span>
 			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
 		</div>