1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<!--
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header>
<MkPageHeader :actions="headerActions" :displayBackButton="true"/>
</template>
<SkUserRecentNotes ref="userRecentNotes" :class="$style.notes" :userId="userId" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles"/>
</MkStickyContainer>
</template>
<script setup lang="ts">
import { computed, shallowRef } from 'vue';
import type { PageHeaderItem } from '@/types/page-header.js';
import { i18n } from '@/i18n.js';
import MkPageHeader from '@/components/global/MkPageHeader.vue';
import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
import { acct } from '@/filters/user.js';
import { createModel, createHeaderItem } from '@/utility/following-feed-utils.js';
import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
import { definePage } from '@/page';
defineProps<{
userId: string;
}>();
const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>();
const user = computed(() => userRecentNotes.value?.user);
const {
withNonPublic,
withQuotes,
withBots,
withReplies,
onlyFiles,
} = createModel();
const headerActions: PageHeaderItem[] = [
{
icon: 'ti ti-refresh',
text: i18n.ts.reload,
handler: () => userRecentNotes.value?.reload(),
},
createHeaderItem(),
];
// Based on user/index.vue
definePage(() => ({
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>
@container (min-width: 451px) {
.notes {
padding: 12px;
}
}
@container (min-width: 750px) {
.notes {
padding: 24px;
}
}
</style>
|
