diff options
Diffstat (limited to 'packages/frontend/src/ui/deck')
| -rw-r--r-- | packages/frontend/src/ui/deck/direct-column.vue | 14 | ||||
| -rw-r--r-- | packages/frontend/src/ui/deck/mentions-column.vue | 16 |
2 files changed, 13 insertions, 17 deletions
diff --git a/packages/frontend/src/ui/deck/direct-column.vue b/packages/frontend/src/ui/deck/direct-column.vue index c8b174da09..c92ab49e31 100644 --- a/packages/frontend/src/ui/deck/direct-column.vue +++ b/packages/frontend/src/ui/deck/direct-column.vue @@ -7,35 +7,33 @@ SPDX-License-Identifier: AGPL-3.0-only <XColumn :column="column" :isStacked="isStacked" :refresher="() => reloadTimeline()"> <template #header><i class="ti ti-mail" style="margin-right: 8px;"></i>{{ column.name || i18n.ts._deck._columns.direct }}</template> - <MkNotesTimeline ref="tlComponent" :pagination="pagination"/> + <MkNotesTimeline :paginator="paginator"/> </XColumn> </template> <script lang="ts" setup> -import { ref, useTemplateRef } from 'vue'; +import { markRaw, ref } from 'vue'; import XColumn from './column.vue'; import type { Column } from '@/deck.js'; import MkNotesTimeline from '@/components/MkNotesTimeline.vue'; import { i18n } from '@/i18n.js'; +import { Paginator } from '@/utility/paginator.js'; defineProps<{ column: Column; isStacked: boolean; }>(); -const pagination = { - endpoint: 'notes/mentions' as const, +const paginator = markRaw(new Paginator('notes/mentions', { limit: 10, params: { visibility: 'specified', }, -}; - -const tlComponent = useTemplateRef('tlComponent'); +})); function reloadTimeline() { return new Promise<void>((res) => { - tlComponent.value?.reload().then(() => { + paginator.reload().then(() => { res(); }); }); diff --git a/packages/frontend/src/ui/deck/mentions-column.vue b/packages/frontend/src/ui/deck/mentions-column.vue index 640e933f23..1244f68ef5 100644 --- a/packages/frontend/src/ui/deck/mentions-column.vue +++ b/packages/frontend/src/ui/deck/mentions-column.vue @@ -7,34 +7,32 @@ SPDX-License-Identifier: AGPL-3.0-only <XColumn :column="column" :isStacked="isStacked" :refresher="() => reloadTimeline()"> <template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name || i18n.ts._deck._columns.mentions }}</template> - <MkNotesTimeline ref="tlComponent" :pagination="pagination"/> + <MkNotesTimeline :paginator="paginator"/> </XColumn> </template> <script lang="ts" setup> -import { ref, useTemplateRef } from 'vue'; +import { markRaw, ref } from 'vue'; import XColumn from './column.vue'; import type { Column } from '@/deck.js'; import { i18n } from '@/i18n.js'; import MkNotesTimeline from '@/components/MkNotesTimeline.vue'; +import { Paginator } from '@/utility/paginator.js'; defineProps<{ column: Column; isStacked: boolean; }>(); -const tlComponent = useTemplateRef('tlComponent'); +const paginator = markRaw(new Paginator('notes/mentions', { + limit: 10, +})); function reloadTimeline() { return new Promise<void>((res) => { - tlComponent.value?.reload().then(() => { + paginator.reload().then(() => { res(); }); }); } - -const pagination = { - endpoint: 'notes/mentions' as const, - limit: 10, -}; </script> |