On user profiles, move pinned notes down with the other note tabs (resolves #555)

What does this PR do?

Moves the list of a user's pinned notes to a tab with the other note categories (Note, All, and With Files). This reduces the amount of scrolling that is needed when opening a profile with a large number of pinned notes. This resolves #555 (closed).

Contribution Guidelines By submitting this merge request, you agree to follow our Contribution Guidelines

• I agree to follow this project's Contribution Guidelines
• I have made sure to test this pull request

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

@@ -156,13 +156,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</template>
 					<MkLazy>
 						<div v-if="noteview === 'pinned'" class="_gaps">
-							<div v-if="pinnedNotes.length < 1" class="_fullinfo">
+							<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>
-							<MkDateSeparatedList v-else v-slot="{ item: note }" :items="pinnedNotes" :noGap="true" :ad="true" class="_panel">
-								<MkNote :key="note.id" class="note" :note="note" :pinned="true"/>
-							</MkDateSeparatedList>
+							<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 :class="$style.tl" :noGap="true" :pagination="AllPagination"/>
 					</MkLazy>
@@ -205,7 +205,6 @@ import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFf
 import { useRouter } from '@/router/supplier.js';
 import { getStaticImageUrl } from '@/scripts/media-proxy.js';
 import { infoImageUrl } from '@/instance.js';
-import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 
 const MkNote = defineAsyncComponent(() =>
 	(defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNote.vue') :
@@ -255,9 +254,6 @@ const moderationNote = ref(props.user.moderationNote);
 const editModerationNote = ref(false);
 const noteview = ref<string | null>(null);
 
-// Sort pinned notes by date to match the other columns and ensure that MkDateSeparatedList does not break.
-const pinnedNotes = computed(() => Array.from(user.value.pinnedNotes).sort((a, b) => b.id.localeCompare(a.id)));
-
 const listenbrainzdata = ref(false);
 if (props.user.listenbrainz) {
 	(async function() {
@@ -827,4 +823,8 @@ onUnmounted(() => {
 	margin-left: 4px;
 	color: var(--success);
 }
+
+.pinnedNote:not(:last-child) {
+	border-bottom: solid 0.5px var(--divider);
+}
 </style>