From 60ec877d3cf81b7fe2326edfea414e7fc427ddf8 Mon Sep 17 00:00:00 2001
From: Hazel K <acomputerdog@gmail.com>
Date: Fri, 4 Oct 2024 12:22:09 -0400
Subject: [PATCH 1/5] on user profiles, move pinned notes down with the other
 notes

---
 locales/en-US.yml                         |  1 +
 locales/index.d.ts                        |  4 ++++
 locales/ja-JP.yml                         |  1 +
 packages/frontend/src/pages/user/home.vue | 24 +++++++++++++++++------
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 8163ca525b..22a3e5ef13 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -126,6 +126,7 @@ inChannelQuote: "Channel-only Quote"
 renoteToChannel: "Renote to channel"
 renoteToOtherChannel: "Renote to other channel"
 pinnedNote: "Pinned note"
+pinnedOnly: "Pinned"
 pinned: "Pin to profile"
 you: "You"
 clickToShow: "Click to show"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index fcd64071af..d247be7091 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -520,6 +520,10 @@ export interface Locale extends ILocale {
      * ピン留めされたノート
      */
     "pinnedNote": string;
+    /**
+     * Pinned
+     */
+    "pinnedOnly": string;
     /**
      * ピン留め
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 7e39515c5c..2fc021011e 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -126,6 +126,7 @@ inChannelQuote: "チャンネル内引用"
 renoteToChannel: "チャンネルにリノート"
 renoteToOtherChannel: "他のチャンネルにリノート"
 pinnedNote: "ピン留めされたノート"
+pinnedOnly: "Pinned"
 pinned: "ピン留め"
 you: "あなた"
 clickToShow: "クリックして表示"
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index e82ec0cb97..4716c980c9 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -125,10 +125,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 
 			<div class="contents _gaps">
-				<div v-if="user.pinnedNotes.length > 0" class="_gaps">
-					<MkNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
-				</div>
-				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
+				<MkInfo v-if="user.pinnedNotes.length === 0 && $i?.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
 				<template v-if="narrow">
 					<MkLazy>
 						<XFiles :key="user.id" :user="user"/>
@@ -147,14 +144,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div> -->
 				<MkStickyContainer>
 					<template #header>
+						<!-- You can't use v-if on these, as MkTab first *deletes* and replaces all children with native HTML elements. -->
+						<!-- Instead, we add a "no notes" placeholder and default to null (all notes) if there's nothing pinned. -->
+						<!-- It also converts all comments into text! -->
 						<MkTab v-model="noteview" :class="$style.tab">
+							<option value="pinned">{{ i18n.ts.pinnedOnly }}</option>
 							<option :value="null">{{ i18n.ts.notes }}</option>
 							<option value="all">{{ i18n.ts.all }}</option>
 							<option value="files">{{ i18n.ts.withFiles }}</option>
 						</MkTab>
 					</template>
 					<MkLazy>
-						<MkNotes :class="$style.tl" :noGap="true" :pagination="AllPagination"/>
+						<div v-if="noteview === '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>
+							<MkDateSeparatedList v-else v-slot="{ item: note }" :items="user.pinnedNotes" :noGap="true" :ad="true" class="_panel">
+								<MkNote :key="note.id" class="note" :note="note" :pinned="true"/>
+							</MkDateSeparatedList>
+						</div>
+						<MkNotes v-else :class="$style.tl" :noGap="true" :pagination="AllPagination"/>
 					</MkLazy>
 				</MkStickyContainer>
 			</div>
@@ -194,6 +204,8 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
 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') :
@@ -241,7 +253,7 @@ const memoDraft = ref(props.user.memo);
 const isEditingMemo = ref(false);
 const moderationNote = ref(props.user.moderationNote);
 const editModerationNote = ref(false);
-const noteview = ref<string | null>(null);
+const noteview = ref<string | null>(props.user.pinnedNotes.length > 0 ? 'pinned' : null);
 
 const listenbrainzdata = ref(false);
 if (props.user.listenbrainz) {

From 3003affe6aad3f6abe7cca48725b302acff3f0ba Mon Sep 17 00:00:00 2001
From: Hazel K <acomputerdog@gmail.com>
Date: Fri, 4 Oct 2024 12:22:24 -0400
Subject: [PATCH 2/5] fix extra gap above user notes

---
 packages/frontend/src/pages/user/home.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 4716c980c9..f75346aaf4 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -807,7 +807,7 @@ onUnmounted(() => {
 }
 
 .tab {
-	margin: calc(var(--margin) / 2) 0;
+	margin-bottom: calc(var(--margin) / 2);
 	padding: calc(var(--margin) / 2) 0;
 	background: color-mix(in srgb, var(--bg) 65%, transparent);
 	backdrop-filter: var(--blur, blur(15px));

From 35114df6d4c6dd8b03b8ece0833a6a5f6165f191 Mon Sep 17 00:00:00 2001
From: Hazel K <acomputerdog@gmail.com>
Date: Sat, 5 Oct 2024 19:57:16 -0400
Subject: [PATCH 3/5] always default to latest notes instead of pins

---
 packages/frontend/src/pages/user/home.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index f75346aaf4..f205d9872d 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -253,7 +253,7 @@ const memoDraft = ref(props.user.memo);
 const isEditingMemo = ref(false);
 const moderationNote = ref(props.user.moderationNote);
 const editModerationNote = ref(false);
-const noteview = ref<string | null>(props.user.pinnedNotes.length > 0 ? 'pinned' : null);
+const noteview = ref<string | null>(null);
 
 const listenbrainzdata = ref(false);
 if (props.user.listenbrainz) {

From c783ccf8cbb6a27cba4437fc1df878b57afbb97f Mon Sep 17 00:00:00 2001
From: Hazel K <acomputerdog@gmail.com>
Date: Mon, 7 Oct 2024 14:07:41 -0400
Subject: [PATCH 4/5] sort pinned notes by date

---
 packages/frontend/src/pages/user/home.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index f205d9872d..bb3a47813b 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -156,11 +156,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</template>
 					<MkLazy>
 						<div v-if="noteview === 'pinned'" class="_gaps">
-							<div v-if="user.pinnedNotes.length < 1" class="_fullinfo">
+							<div v-if="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="user.pinnedNotes" :noGap="true" :ad="true" class="_panel">
+							<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>
@@ -204,8 +204,8 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
 import { useRouter } from '@/router/supplier.js';
 import { getStaticImageUrl } from '@/scripts/media-proxy.js';
-import { infoImageUrl } from "@/instance.js";
-import MkDateSeparatedList from "@/components/MkDateSeparatedList.vue";
+import { infoImageUrl } from '@/instance.js';
+import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 
 const MkNote = defineAsyncComponent(() =>
 	(defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNote.vue') :
@@ -255,6 +255,9 @@ 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() {

From 5f435f7250edd4047a11fb504ac5b320e3503050 Mon Sep 17 00:00:00 2001
From: Hazel K <acomputerdog@gmail.com>
Date: Mon, 7 Oct 2024 16:26:30 -0400
Subject: [PATCH 5/5] restore sorting of pinned notes

---
 packages/frontend/src/pages/user/home.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index bb3a47813b..2ec47889d6 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/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>