remove notes-container.vue and revert refactor

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>

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;

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>