From 5b64b9001d746882b541ceb719142a34f06ec7eb Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sun, 13 Oct 2024 21:07:15 -0400
Subject: [PATCH 1/5] fix weird spacing on notes/home.vue

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

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 279f301d78..f6d2aec36f 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -141,8 +141,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkLazy>
 						<XActivity :key="user.id" :user="user" :collapsed="true"/>
 					</MkLazy>
-					<MkLazy>
-						<XListenBrainz v-if="user.listenbrainz && listenbrainzdata" :key="user.id" :user="user" :collapsed="true"/>
+					<MkLazy v-if="user.listenbrainz && listenbrainzdata">
+						<XListenBrainz :key="user.id" :user="user" :collapsed="true"/>
 					</MkLazy>
 				</template>
 				<!-- <div v-if="!disableNotes">

From 9d3aa6bb411823f0a50ff0acdc19e913942b55db Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sun, 13 Oct 2024 21:07:50 -0400
Subject: [PATCH 2/5] add pinned section to "notes" tab on user profiles

---
 packages/frontend/src/components/SkTab.vue    |  84 ++++++++++++++
 packages/frontend/src/pages/user/home.vue     |  66 +----------
 .../src/pages/user/index.timeline.vue         |  52 +--------
 .../src/pages/user/notes-container.vue        | 109 ++++++++++++++++++
 4 files changed, 198 insertions(+), 113 deletions(-)
 create mode 100644 packages/frontend/src/components/SkTab.vue
 create mode 100644 packages/frontend/src/pages/user/notes-container.vue

diff --git a/packages/frontend/src/components/SkTab.vue b/packages/frontend/src/components/SkTab.vue
new file mode 100644
index 0000000000..d5266e9196
--- /dev/null
+++ b/packages/frontend/src/components/SkTab.vue
@@ -0,0 +1,84 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.tabstrip">
+	<button
+		v-for="tab of tabs"
+		:key="tab.key"
+		:disabled="modelValue === tab.key"
+		:class="{ [$style.button]: true, [$style.active]: modelValue === tab.key }"
+		class="_button"
+		click-anime
+		@click="emit('update:modelValue', tab.key)"
+	>
+		{{ tab.label ?? tab.key }}
+	</button>
+</div>
+</template>
+
+<script lang="ts">
+export interface Tab {
+	key: string;
+	label?: string;
+}
+</script>
+
+<script setup lang="ts">
+defineProps<{
+		modelValue: string;
+		tabs: Tab[];
+	}>();
+const emit = defineEmits<{
+		(ev: 'update:modelValue', v: string): void;
+	}>();
+</script>
+
+<style module lang="scss">
+.tabstrip {
+	display: flex;
+	font-size: 90%;
+
+	padding: calc(var(--margin) / 2) 0;
+	background: color-mix(in srgb, var(--bg) 65%, transparent);
+	backdrop-filter: var(--blur, blur(15px));
+	border-radius: var(--radius-sm);
+
+	> * {
+		flex: 1;
+	}
+}
+
+.button {
+	padding: 10px 8px;
+	margin-left: 0.4rem;
+	margin-right: 0.4rem;
+	border-radius: var(--radius-sm);
+
+	&:disabled {
+		cursor: default;
+	}
+
+	&.active {
+		color: var(--accent);
+		background: var(--accentedBg);
+	}
+
+	&:not(.active):hover {
+		color: var(--fgHighlighted);
+		background: var(--panelHighlight);
+	}
+
+	&:not(:first-child) {
+		margin-left: 8px;
+	}
+}
+
+@container (max-width: 500px) {
+	.tabstrip {
+		font-size: 80%;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index f6d2aec36f..4a7f626133 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -145,36 +145,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<XListenBrainz :key="user.id" :user="user" :collapsed="true"/>
 					</MkLazy>
 				</template>
-				<!-- <div v-if="!disableNotes">
-					<MkLazy>
-						<XTimeline :user="user"/>
-					</MkLazy>
-				</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>
-						<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>
-							<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>
-				</MkStickyContainer>
+				<notes-container :user="user" :includeFeatured="false" :includePinned="user.pinnedNotes.length > 0"/>
 			</div>
 		</div>
 		<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
@@ -190,8 +161,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import MkTab from '@/components/MkTab.vue';
-import MkNotes from '@/components/MkNotes.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import MkAccountMoved from '@/components/MkAccountMoved.vue';
 import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
@@ -212,6 +181,7 @@ 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 NotesContainer from '@/pages/user/notes-container.vue';
 import { infoImageUrl } from '@/instance.js';
 
 const MkNote = defineAsyncComponent(() =>
@@ -260,7 +230,6 @@ 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 listenbrainzdata = ref(false);
 if (props.user.listenbrainz) {
@@ -299,26 +268,6 @@ watch(moderationNote, async () => {
 	await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
 });
 
-const pagination = {
-	endpoint: 'users/featured-notes' as const,
-	limit: 10,
-	params: computed(() => ({
-		userId: props.user.id,
-	})),
-};
-
-const AllPagination = {
-	endpoint: 'users/notes' as const,
-	limit: 10,
-	params: computed(() => ({
-		userId: props.user.id,
-		withRenotes: noteview.value === 'all',
-		withReplies: noteview.value === 'all',
-		withChannelNotes: noteview.value === 'all',
-		withFiles: noteview.value === 'files',
-	})),
-};
-
 const style = computed(() => {
 	if (props.user.bannerUrl == null) return {};
 	if (defaultStore.state.disableShowingAnimatedImages) {
@@ -794,13 +743,6 @@ onUnmounted(() => {
 </style>
 
 <style lang="scss" module>
-.tl {
-	background-color: rgba(0, 0, 0, 0);
-	border-radius: var(--radius);
-	overflow: clip;
-	z-index: 0;
-}
-
 .tab {
 	margin-bottom: calc(var(--margin) / 2);
 	padding: calc(var(--margin) / 2) 0;
@@ -820,10 +762,6 @@ onUnmounted(() => {
 	color: var(--success);
 }
 
-.pinnedNote:not(:last-child) {
-	border-bottom: solid 0.5px var(--divider);
-}
-
 .infoBadges {
 	position: absolute;
 	top: 12px;
diff --git a/packages/frontend/src/pages/user/index.timeline.vue b/packages/frontend/src/pages/user/index.timeline.vue
index 8dbf90f344..e51f2af2e0 100644
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -4,60 +4,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkTab v-model="tab" :class="$style.tab">
-			<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"/>
-</MkStickyContainer>
+<notes-container :user="user"/>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } 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 NotesContainer from '@/pages/user/notes-container.vue';
 
-const props = defineProps<{
+defineProps<{
 	user: Misskey.entities.UserDetailed;
 }>();
-
-const tab = ref<string | null>('all');
-
-const pagination = computed(() => tab.value === 'featured' ? {
-	endpoint: 'users/featured-notes' as const,
-	limit: 10,
-	params: {
-		userId: props.user.id,
-	},
-} : {
-	endpoint: 'users/notes' as const,
-	limit: 10,
-	params: {
-		userId: props.user.id,
-		withRenotes: tab.value === 'all',
-		withReplies: tab.value === 'all',
-		withChannelNotes: tab.value === 'all',
-		withFiles: tab.value === 'files',
-	},
-});
 </script>
-
-<style lang="scss" module>
-.tab {
-	padding: calc(var(--margin) / 2) 0;
-	background: var(--bg);
-}
-
-.tl {
-	background: var(--bg);
-	border-radius: var(--radius);
-	overflow: clip;
-}
-</style>
diff --git a/packages/frontend/src/pages/user/notes-container.vue b/packages/frontend/src/pages/user/notes-container.vue
new file mode 100644
index 0000000000..da66f92020
--- /dev/null
+++ b/packages/frontend/src/pages/user/notes-container.vue
@@ -0,0 +1,109 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header>
+		<SkTab v-model="tab" :tabs="tabs"/>
+	</template>
+	<MkLazy>
+		<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 :class="$style.tl" :noGap="true" :pagination="pagination"/>
+	</MkLazy>
+</MkStickyContainer>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineAsyncComponent } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkNotes from '@/components/MkNotes.vue';
+import SkTab from '@/components/SkTab.vue';
+import { i18n } from '@/i18n.js';
+import { infoImageUrl } from '@/instance.js';
+import { Paging } from '@/components/MkPagination.vue';
+import { Tab } from '@/components/SkTab.vue';
+import { defaultStore } from '@/store.js';
+
+const MkNote = defineAsyncComponent(() => defaultStore.state.noteDesign === 'sharkey' ? import('@/components/SkNote.vue') : import('@/components/MkNote.vue'));
+
+const props = withDefaults(defineProps<{
+	user: Misskey.entities.UserDetailed;
+	includeFeatured: boolean;
+	includePinned: boolean;
+}>(), {
+	includeFeatured: true,
+	includePinned: true,
+});
+
+const tab = ref<string | null>('notes');
+
+const tabs = computed(() => {
+	const t: Tab[] = [
+		{ key: 'notes', label: i18n.ts.notes },
+		{ key: 'all', label: i18n.ts.all },
+		{ key: 'files', label: i18n.ts.withFiles },
+	];
+
+	if (props.includeFeatured) {
+		t.unshift({
+			key: 'featured',
+			label: i18n.ts.featured,
+		});
+	}
+
+	if (props.includePinned) {
+		t.unshift({
+			key: 'pinned',
+			label: i18n.ts.pinnedOnly,
+		});
+	}
+
+	return t;
+});
+
+const pagination = computed(() => {
+	if (tab.value === 'featured') {
+		return {
+			endpoint: 'users/featured-notes' as const,
+			limit: 10,
+			params: {
+				userId: props.user.id,
+			},
+		} satisfies Paging<'users/featured-notes'>;
+	} else {
+		return {
+			endpoint: 'users/notes' as const,
+			limit: 10,
+			params: {
+				userId: props.user.id,
+				withRenotes: tab.value === 'all',
+				withReplies: tab.value === 'all',
+				withChannelNotes: tab.value === 'all',
+				withFiles: tab.value === 'files',
+			},
+		} satisfies Paging<'users/notes'>;
+	}
+});
+</script>
+
+<style module lang="scss">
+.tl {
+	background: var(--bg);
+	border-radius: var(--radius);
+	overflow: clip;
+}
+
+.pinnedNote:not(:last-child) {
+	border-bottom: solid 0.5px var(--divider);
+}
+</style>

From f5652605ecf29e1fa58b76640cf53f11d8f0f418 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sat, 26 Oct 2024 11:00:45 -0400
Subject: [PATCH 3/5] remove notes-container.vue and revert refactor

---
 idea/Sharkey/SkPagination.vue                 | 88 +++++++++++++++++++
 .../src/components => idea/Sharkey}/SkTab.vue |  0
 .../user => idea/Sharkey}/notes-container.vue |  0
 packages/frontend/src/pages/user/home.vue     | 62 ++++++++++++-
 .../src/pages/user/index.timeline.vue         | 70 ++++++++++++++-
 5 files changed, 215 insertions(+), 5 deletions(-)
 create mode 100644 idea/Sharkey/SkPagination.vue
 rename {packages/frontend/src/components => idea/Sharkey}/SkTab.vue (100%)
 rename {packages/frontend/src/pages/user => idea/Sharkey}/notes-container.vue (100%)

diff --git a/idea/Sharkey/SkPagination.vue b/idea/Sharkey/SkPagination.vue
new file mode 100644
index 0000000000..8a3fd03c28
--- /dev/null
+++ b/idea/Sharkey/SkPagination.vue
@@ -0,0 +1,88 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<!--
+	Important note: this is a generic component.
+	Some operations require Vue helpers to satisfy typescript.
+	See this page for more information: https://vuejs.org/api/sfc-script-setup.html#generics
+-->
+
+<template>
+<MkPagination ref="mkPagination" :pagination="pagination" :disableAutoload="disableAutoLoad" :displayLimit="computedDisplayLimit">
+	<template #empty>
+		<slot name="empty">
+			<div class="_fullinfo">
+				<img :src="noContentImage ?? infoImageUrl" class="_ghost" :alt="noContentText" aria-hidden="true"/>
+				<div>{{ noContentText }}</div>
+			</div>
+		</slot>
+	</template>
+
+	<template #default="{ items }">
+		<slot :items="items as Response"></slot>
+	</template>
+</MkPagination>
+</template>
+
+<script lang="ts">
+export type { Paging } from '@/components/MkPagination.vue';
+</script>
+
+<script setup lang="ts" generic="Endpoint extends keyof Endpoints">
+import { computed, shallowRef } from 'vue';
+import type { Endpoints } from 'misskey-js';
+import type { SwitchCaseResponseType } from 'misskey-js/built/api.types.js';
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import { infoImageUrl } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import { MisskeyEntity } from '@/types/date-separated-list.js';
+
+type Response = SwitchCaseResponseType<Endpoint, Endpoints[Endpoint]['req']> & MisskeyEntity[];
+type Entity = Response[number];
+
+const mkPagination = shallowRef<InstanceType<typeof MkPagination>>();
+
+const props = withDefaults(defineProps<{
+	pagination: Paging<Endpoint>;
+	disableAutoLoad?: boolean;
+	displayLimit?: number | null;
+	noContentText?: string;
+	noContentImage?: string;
+}>(), {
+	disableAutoLoad: false,
+	displayLimit: undefined,
+	noContentText: i18n.ts.noNotes,
+	noContentImage: undefined,
+});
+
+// Value of displayLimit with default value applied.
+const computedDisplayLimit = computed(() => {
+	// undefined (default) means to use the value from paging.
+	if (props.displayLimit === undefined) {
+		return props.pagination.limit;
+	}
+
+	// number means to use that value.
+	// null means to use the default from MkPagination.
+	return props.displayLimit ?? undefined;
+});
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+defineExpose({
+	// Expose all the same properties...
+	...mkPagination.value!,
+
+	// But override these to have a narrower type.
+	items: mkPagination.value!.items as Map<string, Entity> | undefined,
+	queue: mkPagination.value!.queue as Map<string, Entity> | undefined,
+	prepend: (item: Entity) => mkPagination.value!.prepend(item),
+	append: (item: Entity) => mkPagination.value!.append(item),
+	updateItem: (id: Entity['id'], replacer: (old: Entity) => Entity) => {
+		return mkPagination.value!.updateItem(id, old => replacer(old as Entity));
+	},
+});
+/* eslint-enable @typescript-eslint/no-non-null-assertion */
+</script>
diff --git a/packages/frontend/src/components/SkTab.vue b/idea/Sharkey/SkTab.vue
similarity index 100%
rename from packages/frontend/src/components/SkTab.vue
rename to idea/Sharkey/SkTab.vue
diff --git a/packages/frontend/src/pages/user/notes-container.vue b/idea/Sharkey/notes-container.vue
similarity index 100%
rename from packages/frontend/src/pages/user/notes-container.vue
rename to idea/Sharkey/notes-container.vue
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 4a7f626133..398be8e9ab 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -145,7 +145,36 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<XListenBrainz :key="user.id" :user="user" :collapsed="true"/>
 					</MkLazy>
 				</template>
-				<notes-container :user="user" :includeFeatured="false" :includePinned="user.pinnedNotes.length > 0"/>
+				<!-- <div v-if="!disableNotes">
+					<MkLazy>
+						<XTimeline :user="user"/>
+					</MkLazy>
+				</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>
+						<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>
+							<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>
+				</MkStickyContainer>
 			</div>
 		</div>
 		<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
@@ -161,6 +190,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
+import MkTab from '@/components/MkTab.vue';
+import MkNotes from '@/components/MkNotes.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import MkAccountMoved from '@/components/MkAccountMoved.vue';
 import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
@@ -181,7 +212,6 @@ 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 NotesContainer from '@/pages/user/notes-container.vue';
 import { infoImageUrl } from '@/instance.js';
 
 const MkNote = defineAsyncComponent(() =>
@@ -230,6 +260,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 listenbrainzdata = ref(false);
 if (props.user.listenbrainz) {
@@ -268,6 +299,26 @@ watch(moderationNote, async () => {
 	await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
 });
 
+const pagination = {
+	endpoint: 'users/featured-notes' as const,
+	limit: 10,
+	params: computed(() => ({
+		userId: props.user.id
+	})),
+};
+
+const AllPagination = {
+	endpoint: 'users/notes' as const,
+	limit: 10,
+	params: computed(() => ({
+		userId: props.user.id,
+		withRenotes: noteview.value === 'all',
+		withReplies: noteview.value === 'all',
+		withChannelNotes: noteview.value === 'all',
+		withFiles: noteview.value === 'files',
+	})),
+};
+
 const style = computed(() => {
 	if (props.user.bannerUrl == null) return {};
 	if (defaultStore.state.disableShowingAnimatedImages) {
@@ -743,6 +794,13 @@ onUnmounted(() => {
 </style>
 
 <style lang="scss" module>
+.tl {
+	background-color: rgba(0, 0, 0, 0);
+	border-radius: var(--radius);
+	overflow: clip;
+	z-index: 0;
+}
+
 .tab {
 	margin-bottom: calc(var(--margin) / 2);
 	padding: calc(var(--margin) / 2) 0;
diff --git a/packages/frontend/src/pages/user/index.timeline.vue b/packages/frontend/src/pages/user/index.timeline.vue
index e51f2af2e0..85e297e153 100644
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -4,14 +4,78 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<notes-container :user="user"/>
+<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>
+	<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 :class="$style.tl" :noGap="true" :pagination="pagination"/>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
+import { ref, computed, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
-import NotesContainer from '@/pages/user/notes-container.vue';
+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';
 
-defineProps<{
+const MkNote = defineAsyncComponent(() =>
+	defaultStore.state.noteDesign === 'sharkey'
+		? import('@/components/SkNote.vue')
+		: import('@/components/MkNote.vue'),
+);
+
+const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
 }>();
+
+const tab = ref<string | null>('all');
+
+const pagination = computed(() => tab.value === 'featured' ? {
+	endpoint: 'users/featured-notes' as const,
+	limit: 10,
+	params: {
+		userId: props.user.id,
+	},
+} : {
+	endpoint: 'users/notes' as const,
+	limit: 10,
+	params: {
+		userId: props.user.id,
+		withRenotes: tab.value === 'all',
+		withReplies: tab.value === 'all',
+		withChannelNotes: tab.value === 'all',
+		withFiles: tab.value === 'files',
+	},
+});
 </script>
+
+<style lang="scss" module>
+.tab {
+	padding: calc(var(--margin) / 2) 0;
+	background: var(--bg);
+}
+
+.tl {
+	background: var(--bg);
+	border-radius: var(--radius);
+	overflow: clip;
+}
+</style>

From 1c181df0865d0695c081620b8af20b6e2af5be62 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sat, 2 Nov 2024 11:50:22 -0400
Subject: [PATCH 4/5] restore ordering of MkNotes attributes in
 index.timeline.vue

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

diff --git a/packages/frontend/src/pages/user/index.timeline.vue b/packages/frontend/src/pages/user/index.timeline.vue
index 85e297e153..28a5091059 100644
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<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="pagination"/>
+	<MkNotes v-else :noGap="true" :pagination="pagination" :class="$style.tl"/>
 </MkStickyContainer>
 </template>
 

From a15e5c52f4d89f18a52fb0b9a81e1cc5e5ba0616 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sat, 2 Nov 2024 17:38:12 -0400
Subject: [PATCH 5/5] remove `idea` section

---
 idea/Sharkey/SkPagination.vue    |  88 -------------------------
 idea/Sharkey/SkTab.vue           |  84 ------------------------
 idea/Sharkey/notes-container.vue | 109 -------------------------------
 3 files changed, 281 deletions(-)
 delete mode 100644 idea/Sharkey/SkPagination.vue
 delete mode 100644 idea/Sharkey/SkTab.vue
 delete mode 100644 idea/Sharkey/notes-container.vue

diff --git a/idea/Sharkey/SkPagination.vue b/idea/Sharkey/SkPagination.vue
deleted file mode 100644
index 8a3fd03c28..0000000000
--- a/idea/Sharkey/SkPagination.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<!--
-SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<!--
-	Important note: this is a generic component.
-	Some operations require Vue helpers to satisfy typescript.
-	See this page for more information: https://vuejs.org/api/sfc-script-setup.html#generics
--->
-
-<template>
-<MkPagination ref="mkPagination" :pagination="pagination" :disableAutoload="disableAutoLoad" :displayLimit="computedDisplayLimit">
-	<template #empty>
-		<slot name="empty">
-			<div class="_fullinfo">
-				<img :src="noContentImage ?? infoImageUrl" class="_ghost" :alt="noContentText" aria-hidden="true"/>
-				<div>{{ noContentText }}</div>
-			</div>
-		</slot>
-	</template>
-
-	<template #default="{ items }">
-		<slot :items="items as Response"></slot>
-	</template>
-</MkPagination>
-</template>
-
-<script lang="ts">
-export type { Paging } from '@/components/MkPagination.vue';
-</script>
-
-<script setup lang="ts" generic="Endpoint extends keyof Endpoints">
-import { computed, shallowRef } from 'vue';
-import type { Endpoints } from 'misskey-js';
-import type { SwitchCaseResponseType } from 'misskey-js/built/api.types.js';
-import type { ComponentExposed } from 'vue-component-type-helpers';
-import { infoImageUrl } from '@/instance.js';
-import { i18n } from '@/i18n.js';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import { MisskeyEntity } from '@/types/date-separated-list.js';
-
-type Response = SwitchCaseResponseType<Endpoint, Endpoints[Endpoint]['req']> & MisskeyEntity[];
-type Entity = Response[number];
-
-const mkPagination = shallowRef<InstanceType<typeof MkPagination>>();
-
-const props = withDefaults(defineProps<{
-	pagination: Paging<Endpoint>;
-	disableAutoLoad?: boolean;
-	displayLimit?: number | null;
-	noContentText?: string;
-	noContentImage?: string;
-}>(), {
-	disableAutoLoad: false,
-	displayLimit: undefined,
-	noContentText: i18n.ts.noNotes,
-	noContentImage: undefined,
-});
-
-// Value of displayLimit with default value applied.
-const computedDisplayLimit = computed(() => {
-	// undefined (default) means to use the value from paging.
-	if (props.displayLimit === undefined) {
-		return props.pagination.limit;
-	}
-
-	// number means to use that value.
-	// null means to use the default from MkPagination.
-	return props.displayLimit ?? undefined;
-});
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-defineExpose({
-	// Expose all the same properties...
-	...mkPagination.value!,
-
-	// But override these to have a narrower type.
-	items: mkPagination.value!.items as Map<string, Entity> | undefined,
-	queue: mkPagination.value!.queue as Map<string, Entity> | undefined,
-	prepend: (item: Entity) => mkPagination.value!.prepend(item),
-	append: (item: Entity) => mkPagination.value!.append(item),
-	updateItem: (id: Entity['id'], replacer: (old: Entity) => Entity) => {
-		return mkPagination.value!.updateItem(id, old => replacer(old as Entity));
-	},
-});
-/* eslint-enable @typescript-eslint/no-non-null-assertion */
-</script>
diff --git a/idea/Sharkey/SkTab.vue b/idea/Sharkey/SkTab.vue
deleted file mode 100644
index d5266e9196..0000000000
--- a/idea/Sharkey/SkTab.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<!--
-SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div :class="$style.tabstrip">
-	<button
-		v-for="tab of tabs"
-		:key="tab.key"
-		:disabled="modelValue === tab.key"
-		:class="{ [$style.button]: true, [$style.active]: modelValue === tab.key }"
-		class="_button"
-		click-anime
-		@click="emit('update:modelValue', tab.key)"
-	>
-		{{ tab.label ?? tab.key }}
-	</button>
-</div>
-</template>
-
-<script lang="ts">
-export interface Tab {
-	key: string;
-	label?: string;
-}
-</script>
-
-<script setup lang="ts">
-defineProps<{
-		modelValue: string;
-		tabs: Tab[];
-	}>();
-const emit = defineEmits<{
-		(ev: 'update:modelValue', v: string): void;
-	}>();
-</script>
-
-<style module lang="scss">
-.tabstrip {
-	display: flex;
-	font-size: 90%;
-
-	padding: calc(var(--margin) / 2) 0;
-	background: color-mix(in srgb, var(--bg) 65%, transparent);
-	backdrop-filter: var(--blur, blur(15px));
-	border-radius: var(--radius-sm);
-
-	> * {
-		flex: 1;
-	}
-}
-
-.button {
-	padding: 10px 8px;
-	margin-left: 0.4rem;
-	margin-right: 0.4rem;
-	border-radius: var(--radius-sm);
-
-	&:disabled {
-		cursor: default;
-	}
-
-	&.active {
-		color: var(--accent);
-		background: var(--accentedBg);
-	}
-
-	&:not(.active):hover {
-		color: var(--fgHighlighted);
-		background: var(--panelHighlight);
-	}
-
-	&:not(:first-child) {
-		margin-left: 8px;
-	}
-}
-
-@container (max-width: 500px) {
-	.tabstrip {
-		font-size: 80%;
-	}
-}
-</style>
diff --git a/idea/Sharkey/notes-container.vue b/idea/Sharkey/notes-container.vue
deleted file mode 100644
index da66f92020..0000000000
--- a/idea/Sharkey/notes-container.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<MkStickyContainer>
-	<template #header>
-		<SkTab v-model="tab" :tabs="tabs"/>
-	</template>
-	<MkLazy>
-		<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 :class="$style.tl" :noGap="true" :pagination="pagination"/>
-	</MkLazy>
-</MkStickyContainer>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, defineAsyncComponent } from 'vue';
-import * as Misskey from 'misskey-js';
-import MkNotes from '@/components/MkNotes.vue';
-import SkTab from '@/components/SkTab.vue';
-import { i18n } from '@/i18n.js';
-import { infoImageUrl } from '@/instance.js';
-import { Paging } from '@/components/MkPagination.vue';
-import { Tab } from '@/components/SkTab.vue';
-import { defaultStore } from '@/store.js';
-
-const MkNote = defineAsyncComponent(() => defaultStore.state.noteDesign === 'sharkey' ? import('@/components/SkNote.vue') : import('@/components/MkNote.vue'));
-
-const props = withDefaults(defineProps<{
-	user: Misskey.entities.UserDetailed;
-	includeFeatured: boolean;
-	includePinned: boolean;
-}>(), {
-	includeFeatured: true,
-	includePinned: true,
-});
-
-const tab = ref<string | null>('notes');
-
-const tabs = computed(() => {
-	const t: Tab[] = [
-		{ key: 'notes', label: i18n.ts.notes },
-		{ key: 'all', label: i18n.ts.all },
-		{ key: 'files', label: i18n.ts.withFiles },
-	];
-
-	if (props.includeFeatured) {
-		t.unshift({
-			key: 'featured',
-			label: i18n.ts.featured,
-		});
-	}
-
-	if (props.includePinned) {
-		t.unshift({
-			key: 'pinned',
-			label: i18n.ts.pinnedOnly,
-		});
-	}
-
-	return t;
-});
-
-const pagination = computed(() => {
-	if (tab.value === 'featured') {
-		return {
-			endpoint: 'users/featured-notes' as const,
-			limit: 10,
-			params: {
-				userId: props.user.id,
-			},
-		} satisfies Paging<'users/featured-notes'>;
-	} else {
-		return {
-			endpoint: 'users/notes' as const,
-			limit: 10,
-			params: {
-				userId: props.user.id,
-				withRenotes: tab.value === 'all',
-				withReplies: tab.value === 'all',
-				withChannelNotes: tab.value === 'all',
-				withFiles: tab.value === 'files',
-			},
-		} satisfies Paging<'users/notes'>;
-	}
-});
-</script>
-
-<style module lang="scss">
-.tl {
-	background: var(--bg);
-	border-radius: var(--radius);
-	overflow: clip;
-}
-
-.pinnedNote:not(:last-child) {
-	border-bottom: solid 0.5px var(--divider);
-}
-</style>