Merge branch 'develop' into hazelnoot/625-protect-system-accounts
This commit is contained in:
Hazel K
commit
126a2fcf15
28 changed files with 1035 additions and 4 deletions
|
|
@ -104,6 +104,7 @@ const props = withDefaults(defineProps<{
|
|||
const emit = defineEmits<{
|
||||
(ev: 'queue', count: number): void;
|
||||
(ev: 'status', error: boolean): void;
|
||||
(ev: 'init'): void;
|
||||
}>();
|
||||
|
||||
const rootEl = shallowRef<HTMLElement>();
|
||||
|
|
@ -232,6 +233,8 @@ async function init(): Promise<void> {
|
|||
offset.value = res.length;
|
||||
error.value = false;
|
||||
fetching.value = false;
|
||||
|
||||
emit('init');
|
||||
}, err => {
|
||||
error.value = true;
|
||||
fetching.value = false;
|
||||
|
|
|
|||
123
packages/frontend/src/components/SkFollowingFeedEntry.vue
Normal file
123
packages/frontend/src/components/SkFollowingFeedEntry.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div :class="$style.root" @click="$emit('select', note.user)">
|
||||
<div :class="$style.avatar">
|
||||
<MkAvatar :class="$style.icon" :user="note.user" indictor/>
|
||||
</div>
|
||||
<div :class="$style.contents">
|
||||
<header :class="$style.header">
|
||||
<MkA v-user-preview="note.user.id" :class="$style.headerName" :to="userPage(note.user)">
|
||||
<MkUserName :user="note.user"/>
|
||||
</MkA>
|
||||
<MkA :to="notePage(note)">
|
||||
<MkTime :time="note.createdAt" :class="$style.headerTime" colored/>
|
||||
</MkA>
|
||||
</header>
|
||||
<div>
|
||||
<div v-if="isMuted" :class="[$style.text, $style.muted]">({{ i18n.ts.postFiltered }})</div>
|
||||
<Mfm v-else :class="$style.text" :text="getNoteSummary(note)" :isBlock="true" :plain="true" :nowrap="false" :isNote="true" nyaize="respect" :author="note.user"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { getNoteSummary } from '@/scripts/get-note-summary.js';
|
||||
import { userPage } from '@/filters/user.js';
|
||||
import { notePage } from '@/filters/note.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
|
||||
withDefaults(defineProps<{
|
||||
note: Misskey.entities.Note,
|
||||
isMuted: boolean
|
||||
}>(), {
|
||||
isMuted: false,
|
||||
});
|
||||
|
||||
defineEmits<{
|
||||
(event: 'select', user: Misskey.entities.UserLite): void
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 16px;
|
||||
font-size: 0.9em;
|
||||
overflow-wrap: break-word;
|
||||
display: flex;
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.contents {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.headerName {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.headerTime {
|
||||
margin-left: auto;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: clip;
|
||||
line-height: 1.25em;
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.muted {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@container (max-width: 600px) {
|
||||
.root {
|
||||
padding: 16px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 500px) {
|
||||
.root {
|
||||
padding: 12px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
packages/frontend/src/components/SkUserRecentNotes.vue
Normal file
108
packages/frontend/src/components/SkUserRecentNotes.vue
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<MkPullToRefresh :refresher="() => reload()">
|
||||
<div v-if="user" :class="$style.userInfo">
|
||||
<MkUserInfo :class="$style.userInfo" class="user" :user="user"/>
|
||||
<MkNotes :noGap="true" :pagination="pagination"/>
|
||||
</div>
|
||||
<div v-else-if="loadError" :class="$style.panel">{{ loadError }}</div>
|
||||
<MkLoading v-else-if="userId"/>
|
||||
</MkPullToRefresh>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, Ref, watch } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MkLoading from '@/components/global/MkLoading.vue';
|
||||
import MkNotes from '@/components/MkNotes.vue';
|
||||
import MkUserInfo from '@/components/MkUserInfo.vue';
|
||||
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
|
||||
import { Paging } from '@/components/MkPagination.vue';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
userId: string;
|
||||
withRenotes?: boolean;
|
||||
withReplies?: boolean;
|
||||
onlyFiles?: boolean;
|
||||
}>(), {
|
||||
withRenotes: false,
|
||||
withReplies: true,
|
||||
onlyFiles: false,
|
||||
});
|
||||
|
||||
const loadError: Ref<string | null> = ref(null);
|
||||
const user: Ref<Misskey.entities.UserDetailed | null> = ref(null);
|
||||
|
||||
const pagination: Paging<'users/notes'> = {
|
||||
endpoint: 'users/notes' as const,
|
||||
limit: 10,
|
||||
params: computed(() => ({
|
||||
userId: props.userId,
|
||||
withRenotes: props.withRenotes,
|
||||
withReplies: props.withReplies,
|
||||
withFiles: props.onlyFiles,
|
||||
})),
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
reload,
|
||||
user,
|
||||
});
|
||||
|
||||
async function reload(): Promise<void> {
|
||||
loadError.value = null;
|
||||
user.value = null;
|
||||
|
||||
await Promise
|
||||
.all([
|
||||
// We need a User entity, but the pagination returns only UserLite.
|
||||
// An additional request is needed to "upgrade" the object.
|
||||
misskeyApi('users/show', { userId: props.userId }),
|
||||
|
||||
// Wait for 1 second to match the animation effects in MkHorizontalSwipe, MkPullToRefresh, and MkPagination.
|
||||
// Otherwise, the page appears to load "backwards".
|
||||
new Promise(resolve => setTimeout(resolve, 1000)),
|
||||
])
|
||||
.then(([u]) => user.value = u)
|
||||
.catch(error => {
|
||||
console.error('Error fetching user info', error);
|
||||
|
||||
loadError.value =
|
||||
typeof(error) === 'string'
|
||||
? String(error)
|
||||
: JSON.stringify(error);
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.userId, async () => {
|
||||
await reload();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await reload();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
||||
.panel {
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@container (min-width: 451px) {
|
||||
.userInfo {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -68,6 +68,11 @@ export const navbarItemDef = reactive({
|
|||
lookup();
|
||||
},
|
||||
},
|
||||
following: {
|
||||
title: i18n.ts.following,
|
||||
icon: 'ph-user-check ph-bold ph-lg',
|
||||
to: '/following-feed',
|
||||
},
|
||||
lists: {
|
||||
title: i18n.ts.lists,
|
||||
icon: 'ti ti-list',
|
||||
|
|
|
|||
299
packages/frontend/src/pages/following-feed.vue
Normal file
299
packages/frontend/src/pages/following-feed.vue
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<MkPageHeader v-model:tab="currentTab" :class="$style.header" :tabs="headerTabs" :actions="headerActions" :displayBackButton="true" @update:tab="onChangeTab"/>
|
||||
|
||||
<div ref="noteScroll" :class="$style.notes">
|
||||
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
|
||||
<MkPullToRefresh :refresher="() => reloadLatestNotes()">
|
||||
<MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
|
||||
<template #empty>
|
||||
<div class="_fullinfo">
|
||||
<img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/>
|
||||
<div>{{ i18n.ts.noNotes }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #default="{ items: notes }">
|
||||
<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
|
||||
<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" @select="userSelected"/>
|
||||
</MkDateSeparatedList>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</MkPullToRefresh>
|
||||
</MkHorizontalSwipe>
|
||||
</div>
|
||||
|
||||
<div v-if="isWideViewport" ref="userScroll" :class="$style.user">
|
||||
<MkHorizontalSwipe v-if="selectedUserId" v-model:tab="currentTab" :tabs="headerTabs">
|
||||
<SkUserRecentNotes ref="userRecentNotes" :userId="selectedUserId" :withRenotes="withUserRenotes" :withReplies="withUserReplies" :onlyFiles="withOnlyFiles"/>
|
||||
</MkHorizontalSwipe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export type FollowingFeedTab = typeof followingTab | typeof mutualsTab;
|
||||
export const followingTab = 'following' as const;
|
||||
export const mutualsTab = 'mutuals' as const;
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, Ref, ref, shallowRef } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
|
||||
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
|
||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||
import { infoImageUrl } from '@/instance.js';
|
||||
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
|
||||
import { Tab } from '@/components/global/MkPageHeader.tabs.vue';
|
||||
import { PageHeaderItem } from '@/types/page-header.js';
|
||||
import SkFollowingFeedEntry from '@/components/SkFollowingFeedEntry.vue';
|
||||
import { useRouter } from '@/router/supplier.js';
|
||||
import * as os from '@/os.js';
|
||||
import MkPageHeader from '@/components/global/MkPageHeader.vue';
|
||||
import { $i } from '@/account.js';
|
||||
import { checkWordMute } from '@/scripts/check-word-mute.js';
|
||||
import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
|
||||
import { useScrollPositionManager } from '@/nirax.js';
|
||||
import { getScrollContainer } from '@/scripts/scroll.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
initialTab?: FollowingFeedTab,
|
||||
}>(), {
|
||||
initialTab: followingTab,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// Vue complains, but we *want* to lose reactivity here.
|
||||
// Otherwise, the user would be unable to change the tab.
|
||||
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
|
||||
const currentTab: Ref<FollowingFeedTab> = ref(props.initialTab);
|
||||
const mutualsOnly: Ref<boolean> = computed(() => currentTab.value === mutualsTab);
|
||||
const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>();
|
||||
const userScroll = shallowRef<HTMLElement>();
|
||||
const noteScroll = shallowRef<HTMLElement>();
|
||||
|
||||
// We have to disable the per-user feed on small displays, and it must be done through JS instead of CSS.
|
||||
// Otherwise, the second column will waste resources in the background.
|
||||
const wideViewportQuery = window.matchMedia('(min-width: 750px)');
|
||||
const isWideViewport: Ref<boolean> = ref(wideViewportQuery.matches);
|
||||
wideViewportQuery.addEventListener('change', () => isWideViewport.value = wideViewportQuery.matches);
|
||||
|
||||
const selectedUserId: Ref<string | null> = ref(null);
|
||||
|
||||
function userSelected(user: Misskey.entities.UserLite): void {
|
||||
if (isWideViewport.value) {
|
||||
selectedUserId.value = user.id;
|
||||
} else {
|
||||
router.push(`/following-feed/${user.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadLatestNotes() {
|
||||
await latestNotesPaging.value?.reload();
|
||||
}
|
||||
|
||||
async function reloadUserNotes() {
|
||||
await userRecentNotes.value?.reload();
|
||||
}
|
||||
|
||||
async function reload() {
|
||||
await Promise.all([
|
||||
reloadLatestNotes(),
|
||||
reloadUserNotes(),
|
||||
]);
|
||||
}
|
||||
|
||||
async function onListReady(): Promise<void> {
|
||||
if (!selectedUserId.value && latestNotesPaging.value?.items.size) {
|
||||
// This just gets the first user ID
|
||||
const selectedNote: Misskey.entities.Note = latestNotesPaging.value.items.values().next().value;
|
||||
selectedUserId.value = selectedNote.userId;
|
||||
}
|
||||
}
|
||||
|
||||
async function onChangeTab(): Promise<void> {
|
||||
selectedUserId.value = null;
|
||||
}
|
||||
|
||||
function isSoftMuted(note: Misskey.entities.Note): boolean {
|
||||
return isMuted(note, $i?.mutedWords);
|
||||
}
|
||||
|
||||
function isHardMuted(note: Misskey.entities.Note): boolean {
|
||||
return isMuted(note, $i?.hardMutedWords);
|
||||
}
|
||||
|
||||
// Match the typing used by Misskey
|
||||
type Mutes = (string | string[])[] | null | undefined;
|
||||
|
||||
// Adapted from MkNote.ts
|
||||
function isMuted(note: Misskey.entities.Note, mutes: Mutes): boolean {
|
||||
return checkMute(note, mutes)
|
||||
|| checkMute(note.reply, mutes)
|
||||
|| checkMute(note.renote, mutes);
|
||||
}
|
||||
|
||||
// Adapted from check-word-mute.ts
|
||||
function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes): boolean {
|
||||
if (!note) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!mutes || mutes.length < 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return checkWordMute(note, $i, mutes);
|
||||
}
|
||||
|
||||
const latestNotesPaging = shallowRef<InstanceType<typeof MkPagination>>();
|
||||
|
||||
const latestNotesPagination: Paging<'notes/following'> = {
|
||||
endpoint: 'notes/following' as const,
|
||||
limit: 20,
|
||||
params: computed(() => ({
|
||||
mutualsOnly: mutualsOnly.value,
|
||||
})),
|
||||
};
|
||||
|
||||
const withUserRenotes = ref(false);
|
||||
const withUserReplies = ref(true);
|
||||
const withOnlyFiles = ref(false);
|
||||
|
||||
const headerActions = computed(() => {
|
||||
const actions: PageHeaderItem[] = [
|
||||
{
|
||||
icon: 'ti ti-refresh',
|
||||
text: i18n.ts.reload,
|
||||
handler: () => reload(),
|
||||
},
|
||||
];
|
||||
|
||||
if (isWideViewport.value) {
|
||||
actions.push({
|
||||
icon: 'ti ti-dots',
|
||||
text: i18n.ts.options,
|
||||
handler: (ev) => {
|
||||
os.popupMenu([
|
||||
{
|
||||
type: 'switch',
|
||||
text: i18n.ts.showRenotes,
|
||||
ref: withUserRenotes,
|
||||
}, {
|
||||
type: 'switch',
|
||||
text: i18n.ts.showRepliesToOthersInTimeline,
|
||||
ref: withUserReplies,
|
||||
disabled: withOnlyFiles,
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
text: i18n.ts.fileAttachedOnly,
|
||||
ref: withOnlyFiles,
|
||||
disabled: withUserReplies,
|
||||
},
|
||||
], ev.currentTarget ?? ev.target);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return actions;
|
||||
});
|
||||
|
||||
const headerTabs = computed(() => [
|
||||
{
|
||||
key: followingTab,
|
||||
icon: 'ph-user-check ph-bold ph-lg',
|
||||
title: i18n.ts.following,
|
||||
} satisfies Tab,
|
||||
{
|
||||
key: mutualsTab,
|
||||
icon: 'ph-user-switch ph-bold ph-lg',
|
||||
title: i18n.ts.mutuals,
|
||||
} satisfies Tab,
|
||||
]);
|
||||
|
||||
useScrollPositionManager(() => getScrollContainer(userScroll.value ?? null), router);
|
||||
useScrollPositionManager(() => getScrollContainer(noteScroll.value ?? null), router);
|
||||
definePageMetadata(() => ({
|
||||
title: i18n.ts.following,
|
||||
icon: 'ph-user-check ph-bold ph-lg',
|
||||
}));
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
//This inspection complains about duplicate "height" properties, but this is needed because "dvh" units are not supported in all browsers.
|
||||
//The earlier "vh" provide a "close enough" approximation for older browsers.
|
||||
//noinspection CssOverwrittenProperties
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-rows: min-content 1fr;
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"lm notes rm";
|
||||
gap: 12px;
|
||||
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
|
||||
// The universal layout inserts a "spacer" thing that causes a stray scroll bar.
|
||||
// We have to create fake "space" for it to "roll up" and back into the viewport, which removes the scrollbar.
|
||||
margin-bottom: calc(-1 * var(--minBottomSpacing));
|
||||
|
||||
// Some "just in case" backup properties.
|
||||
// These should not be needed, but help to maintain the layout if the above trick ever stops working.
|
||||
overflow: hidden;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.notes {
|
||||
grid-area: notes;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.user {
|
||||
grid-area: user;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.root {
|
||||
grid-template-columns: min-content 4fr 6fr min-content;
|
||||
grid-template-rows: min-content 1fr;
|
||||
grid-template-areas:
|
||||
"header header header header"
|
||||
"lm notes user rm";
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--panel);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -55,9 +55,12 @@ import { MenuItem } from '@/types/menu.js';
|
|||
import { miLocalStorage } from '@/local-storage.js';
|
||||
import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js';
|
||||
import type { BasicTimelineType } from '@/timelines.js';
|
||||
import { useRouter } from '@/router/supplier.js';
|
||||
|
||||
provide('shouldOmitHeaderTitle', true);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>();
|
||||
const rootEl = shallowRef<HTMLElement>();
|
||||
|
||||
|
|
@ -309,6 +312,11 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList
|
|||
icon: basicTimelineIconClass(tl),
|
||||
iconOnly: true,
|
||||
})), {
|
||||
icon: 'ph-user-check ph-bold ph-lg',
|
||||
title: i18n.ts.following,
|
||||
iconOnly: true,
|
||||
onClick: () => router.push('/following-feed'),
|
||||
}, {
|
||||
icon: 'ti ti-list',
|
||||
title: i18n.ts.lists,
|
||||
iconOnly: true,
|
||||
|
|
|
|||
91
packages/frontend/src/pages/user/recent-notes.vue
Normal file
91
packages/frontend/src/pages/user/recent-notes.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<!--
|
||||
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" :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 SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
|
||||
import { acct } from '@/filters/user.js';
|
||||
|
||||
defineProps<{
|
||||
userId: string;
|
||||
}>();
|
||||
|
||||
const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>();
|
||||
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>
|
||||
|
|
@ -227,6 +227,13 @@ const routes: RouteDef[] = [{
|
|||
path: '/explore',
|
||||
component: page(() => import('@/pages/explore.vue')),
|
||||
hash: 'initialTab',
|
||||
}, {
|
||||
path: '/following-feed',
|
||||
component: page(() => import('@/pages/following-feed.vue')),
|
||||
hash: 'initialTab',
|
||||
}, {
|
||||
path: '/following-feed/:userId',
|
||||
component: page(() => import('@/pages/user/recent-notes.vue')),
|
||||
}, {
|
||||
path: '/search',
|
||||
component: page(() => import('@/pages/search.vue')),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue