Merge branch 'develop' into feature/2024.10

packages/backend/src/server/api/endpoints/notes/following.ts

@@ -103,6 +103,15 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 							sub.andWhere('latest.is_quote = false');
 						}
 
+						// Select the appropriate collection of users
+						if (ps.list === 'followers') {
+							addFollower(sub);
+						} else if (ps.list === 'following') {
+							addFollowee(sub);
+						} else {
+							addMutual(sub);
+						}
+
 						return sub;
 					},
 					'latest',
@@ -118,15 +127,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				.leftJoinAndSelect('note.channel', 'channel')
 			;
 
-			// Select the appropriate collection of users
-			if (ps.list === 'followers') {
-				addFollower(query);
-			} else if (ps.list === 'following') {
-				addFollowee(query);
-			} else {
-				addMutual(query);
-			}
-
 			// Limit to files, if requested
 			if (ps.filesOnly) {
 				query.andWhere('note."fileIds" != \'{}\'');

packages/frontend/src/components/SkFollowingFeedEntry.vue

@@ -54,6 +54,7 @@ defineEmits<{
 	overflow-wrap: break-word;
 	display: flex;
 	contain: content;
+	cursor: pointer;
 }
 
 .avatar {

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

@@ -23,7 +23,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="userSelected"/>
+							<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" :class="selectedUserId == note.userId && $style.selected" @select="userSelected"/>
 						</MkDateSeparatedList>
 					</template>
 				</MkPagination>
@@ -257,6 +257,21 @@ definePageMetadata(() => ({
 	margin-bottom: 12px;
 }
 
+@keyframes border {
+	from {border-left: 0px 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;
+	}
+}
+
 @media (min-width: 750px) {
 	.root {
 		grid-template-columns: min-content 4fr 6fr min-content;

packages/frontend/src/pages/user/home.vue

@@ -143,8 +143,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkLazy>
 						<XActivity :key="user.id" :user="user" :collapsed="true"/>
 					</MkLazy>
-					<MkLazy>
+					<MkLazy v-if="user.listenbrainz && listenbrainzdata">
-						<XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user" :collapsed="true"/>
+						<XListenBrainz :key="user.id" :user="user" :collapsed="true"/>
 					</MkLazy>
 				</template>
 				<!-- <div v-if="!disableNotes">
@@ -307,7 +307,7 @@ const pagination = {
 	endpoint: 'users/featured-notes' as const,
 	limit: 10,
 	params: computed(() => ({
-		userId: props.user.id,
+		userId: props.user.id
 	})),
 };
 
@@ -835,10 +835,6 @@ onUnmounted(() => {
 	color: var(--MI_THEME-success);
 }
 
-.pinnedNote:not(:last-child) {
-	border-bottom: solid 0.5px var(--MI_THEME-divider);
-}
-
 .infoBadges {
 	position: absolute;
 	top: 12px;

packages/frontend/src/pages/user/index.timeline.vue

@@ -7,22 +7,40 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header>
 		<MkTab v-model="tab" :class="$style.tab">
+			<option value="pinned">{{ i18n.ts.pinnedOnly }}</option>
 			<option value="featured">{{ i18n.ts.featured }}</option>
 			<option :value="null">{{ i18n.ts.notes }}</option>
 			<option value="all">{{ i18n.ts.all }}</option>
 			<option value="files">{{ i18n.ts.withFiles }}</option>
 		</MkTab>
 	</template>
-	<MkNotes :noGap="true" :pagination="pagination" :class="$style.tl"/>
+	<div v-if="tab === 'pinned'" class="_gaps">
+		<div v-if="user.pinnedNotes.length < 1" class="_fullinfo">
+			<img :src="infoImageUrl" class="_ghost" aria-hidden="true" :alt="i18n.ts.noNotes"/>
+			<div>{{ i18n.ts.noNotes }}</div>
+		</div>
+		<div v-else class="_panel">
+			<MkNote v-for="note of user.pinnedNotes" :key="note.id" class="note" :class="$style.pinnedNote" :note="note" :pinned="true"/>
+		</div>
+	</div>
+	<MkNotes v-else :noGap="true" :pagination="pagination" :class="$style.tl"/>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkNotes from '@/components/MkNotes.vue';
 import MkTab from '@/components/MkTab.vue';
 import { i18n } from '@/i18n.js';
+import { infoImageUrl } from '@/instance.js';
+import { defaultStore } from '@/store.js';
+
+const MkNote = defineAsyncComponent(() =>
+	defaultStore.state.noteDesign === 'sharkey'
+		? import('@/components/SkNote.vue')
+		: import('@/components/MkNote.vue'),
+);
 
 const props = defineProps<{
 	user: Misskey.entities.UserDetailed;