restore animation and styling in following-feed

packages/frontend/src/components/SkFollowingRecentNotes.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<template #default="{ items: notes }">
 			<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
-				<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" @select="u => selectUser(u.id)"/>
+				<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" :class="props.selectedUserId == note.userId && $style.selected" @select="u => selectUser(u.id)"/>
 			</MkDateSeparatedList>
 		</template>
 	</MkPagination>
@@ -42,6 +42,7 @@ const props = defineProps<{
 	withReplies: boolean;
 	withBots: boolean;
 	onlyFiles: boolean;
+	selectedUserId?: string | null;
 }>();
 
 const emit = defineEmits<{
@@ -119,4 +120,25 @@ function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes)
 .panel {
 	background: var(--panel);
 }
+
+@keyframes border {
+	from {
+		border-left: 0 solid var(--accent);
+	}
+	to {
+		border-left: 6px solid var(--accent);
+	}
+}
+
+.selected {
+	animation: border 0.2s ease-out 0s 1 forwards;
+
+	&:first-child {
+		border-top-left-radius: 5px;
+	}
+
+	&:last-child {
+		border-bottom-left-radius: 5px;
+	}
+}
 </style>

packages/frontend/src/pages/following-feed.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div ref="noteScroll" :class="$style.notes">
 		<MkHorizontalSwipe v-model:tab="userList" :tabs="headerTabs">
-			<SkFollowingRecentNotes ref="followingRecentNotes" :userList="userList" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles" @userSelected="userSelected" @loaded="listReady"/>
+			<SkFollowingRecentNotes ref="followingRecentNotes" :selectedUserId="selectedUserId" :userList="userList" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles" @userSelected="userSelected" @loaded="listReady"/>
 		</MkHorizontalSwipe>
 	</div>