improve per-user view on mobile

packages/frontend/src/pages/user/recent-notes.vue

@@ -0,0 +1,86 @@
+<template>
+<MkStickyContainer>
+	<template #header>
+		<MkPageHeader :actions="headerActions" :displayBackButton="true"/>
+	</template>
+	<UserRecentNotes ref="userRecentNotes" :userId="userId" :withRenotes="withRenotes" :withReplies="withReplies" :onlyFiles="onlyFiles"/>
+</MkStickyContainer>
+</template>
+
+<script setup lang="ts">
+
+import { computed, ref, shallowRef } from 'vue';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { i18n } from '@/i18n.js';
+import { PageHeaderItem } from '@/types/page-header.js';
+import * as os from '@/os.js';
+import MkPageHeader from '@/components/global/MkPageHeader.vue';
+import UserRecentNotes from '@/components/UserRecentNotes.vue';
+import { acct } from '@/filters/user.js';
+
+defineProps<{
+	userId: string;
+}>();
+
+const userRecentNotes = shallowRef<InstanceType<typeof UserRecentNotes>>();
+const user = computed(() => userRecentNotes.value?.user);
+const withRenotes = ref(false);
+const withReplies = ref(true);
+const onlyFiles = ref(false);
+
+const headerActions = [
+	{
+		icon: 'ti ti-refresh',
+		text: i18n.ts.reload,
+		handler: () => userRecentNotes.value?.reload(),
+	} satisfies PageHeaderItem,
+	{
+		icon: 'ti ti-dots',
+		text: i18n.ts.options,
+		handler: (ev) => {
+			os.popupMenu([
+				{
+					type: 'switch',
+					text: i18n.ts.showRenotes,
+					ref: withRenotes,
+				}, {
+					type: 'switch',
+					text: i18n.ts.showRepliesToOthersInTimeline,
+					ref: withReplies,
+					disabled: onlyFiles,
+				},
+				{
+					type: 'divider',
+				},
+				{
+					type: 'switch',
+					text: i18n.ts.fileAttachedOnly,
+					ref: onlyFiles,
+					disabled: withReplies,
+				},
+			], ev.currentTarget ?? ev.target);
+		},
+	} satisfies PageHeaderItem,
+];
+
+// Based on user/index.vue
+definePageMetadata(() => ({
+	title: i18n.ts.user,
+	icon: 'ti ti-user',
+	...user.value ? {
+		title: user.value.name ? ` (@${user.value.username})` : `@${user.value.username}`,
+		subtitle: `@${acct(user.value)}`,
+		userName: user.value,
+		avatar: user.value,
+		path: `/@${user.value.username}`,
+		share: {
+			title: user.value.name,
+		},
+	} : {},
+}));
+
+</script>
+
+<style lang="scss" module>
+
+</style>