ユーザーピッカーに最近使用したユーザーを表示するように

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

@@ -14,10 +14,10 @@
 			<MkInput v-model:value="host" class="input" @update:value="search"><span>{{ $t('host') }}</span><template #prefix>@</template></MkInput>
 		</div>
 	</div>
-	<div class="tbhwbxda _section" :style="users.length > 0 ? 'padding: 0;' : ''">
+	<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" :disable-link="true"/>
+				<MkAvatar :user="user" class="avatar"/>
 				<div class="body">
 					<MkUserName :user="user" class="name"/>
 					<MkAcct :user="user" class="acct"/>
@@ -28,6 +28,17 @@
 			<span>{{ $t('noUsers') }}</span>
 		</div>
 	</div>
+	<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"/>
+				<div class="body">
+					<MkUserName :user="user" class="name"/>
+					<MkAcct :user="user" class="acct"/>
+				</div>
+			</div>
+		</div>
+	</div>
 </XModalWindow>
 </template>
 
@@ -53,18 +64,23 @@ export default defineComponent({
 		return {
 			username: '',
 			host: '',
+			recentUsers: [],
 			users: [],
 			selected: null,
 			faTimes, faCheck
 		};
 	},
 
-	mounted() {
+	async mounted() {
 		this.focus();
 
 		this.$nextTick(() => {
 			this.focus();
 		});
+
+		this.recentUsers = await os.api('users/show', {
+			userIds: this.$store.state.device.recentlyUsedUsers
+		});
 	},
 
 	methods: {
@@ -90,6 +106,12 @@ export default defineComponent({
 		ok() {
 			this.$emit('ok', this.selected);
 			this.$refs.dialog.close();
+
+			// 最近使ったユーザー更新
+			let recents = this.$store.state.device.recentlyUsedUsers;
+			recents = recents.filter(x => x !== this.selected.id);
+			recents.unshift(this.selected.id);
+			this.$store.commit('device/set', { key: 'recentlyUsedUsers', value: recents.splice(0, 16) });
 		},
 
 		cancel() {
@@ -107,6 +129,14 @@ export default defineComponent({
 	overflow: auto;
 	height: 100%;
 
+	&.result.hit {
+		padding: 0;
+	}
+
+	&.recent {
+		padding: 0;
+	}
+
 	> .inputs {
 		> .input {
 			display: inline-block;

src/client/store.ts

@@ -60,6 +60,7 @@ export const defaultDeviceSettings = {
 	serverDisconnectedBehavior: 'quiet',
 	accounts: [],
 	recentlyUsedEmojis: [],
+	recentlyUsedUsers: [],
 	themes: [],
 	darkTheme: '8050783a-7f63-445a-b270-36d0f6ba1677',
 	lightTheme: '4eea646f-7afa-4645-83e9-83af0333cd37',