diff options
Diffstat (limited to 'packages/frontend/src/pages/timeline.vue')
| -rw-r--r-- | packages/frontend/src/pages/timeline.vue | 79 |
1 files changed, 24 insertions, 55 deletions
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index a24911e717..d93ceadf56 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -8,8 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template> <MkSpacer :contentMax="800"> <MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin"> - <div :key="src" ref="rootEl" v-hotkey.global="keymap"> - <MkInfo v-if="['home', 'local', 'social', 'global'].includes(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()"> + <div :key="src" ref="rootEl"> + <MkInfo v-if="isBasicTimeline(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()"> {{ i18n.ts._timelineDescription[src] }} </MkInfo> <MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/> @@ -46,7 +46,6 @@ import * as os from '@/os.js'; import { misskeyApi } from '@/scripts/misskey-api.js'; import { defaultStore } from '@/store.js'; import { i18n } from '@/i18n.js'; -import { instance } from '@/instance.js'; import { $i } from '@/account.js'; import { definePageMetadata } from '@/scripts/page-metadata.js'; import { antennasCache, userListsCache, favoritedChannelsCache } from '@/cache.js'; @@ -54,21 +53,15 @@ import { deviceKind } from '@/scripts/device-kind.js'; import { deepMerge } from '@/scripts/merge.js'; import { MenuItem } from '@/types/menu.js'; import { miLocalStorage } from '@/local-storage.js'; +import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js'; provide('shouldOmitHeaderTitle', true); -const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable); -const isGlobalTimelineAvailable = ($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable); -const isBubbleTimelineAvailable = ($i == null && instance.policies.btlAvailable) || ($i != null && $i.policies.btlAvailable); -const keymap = { - 't': focus, -}; - const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>(); const rootEl = shallowRef<HTMLElement>(); const queue = ref(0); -const srcWhenNotSignin = ref<'local' | 'global'>(isLocalTimelineAvailable ? 'local' : 'global'); +const srcWhenNotSignin = ref<'local' | 'global'>(isAvailableBasicTimeline('local') ? 'local' : 'global'); const src = computed<'home' | 'local' | 'social' | 'global' | 'bubble' | `list:${string}`>({ get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin.value), set: (x) => saveSrc(x), @@ -79,7 +72,11 @@ const withRenotes = computed<boolean>({ }); // computed内での無限ループを防ぐためのフラグ -const localSocialTLFilterSwitchStore = ref<'withReplies' | 'onlyFiles' | false>('withReplies'); +const localSocialTLFilterSwitchStore = ref<'withReplies' | 'onlyFiles' | false>( + defaultStore.reactiveState.tl.value.filter.withReplies ? 'withReplies' : + defaultStore.reactiveState.tl.value.filter.onlyFiles ? 'onlyFiles' : + false, +); const withReplies = computed<boolean>({ get: () => { @@ -239,7 +236,7 @@ function focus(): void { } function closeTutorial(): void { - if (!['home', 'local', 'social', 'global'].includes(src.value)) return; + if (!isBasicTimeline(src.value)) return; const before = defaultStore.state.timelineTutorials; before[src.value] = true; defaultStore.set('timelineTutorials', before); @@ -255,7 +252,7 @@ const headerActions = computed(() => { type: 'switch', text: i18n.ts.showRenotes, ref: withRenotes, - }, src.value === 'local' || src.value === 'social' ? { + }, isBasicTimeline(src.value) && hasWithReplies(src.value) ? { type: 'switch', text: i18n.ts.showRepliesToOthersInTimeline, ref: withReplies, @@ -268,7 +265,7 @@ const headerActions = computed(() => { type: 'switch', text: i18n.ts.fileAttachedOnly, ref: onlyFiles, - disabled: src.value === 'local' || src.value === 'social' ? withReplies : false, + disabled: isBasicTimeline(src.value) && hasWithReplies(src.value) ? withReplies : false, }], ev.currentTarget ?? ev.target); }, }, @@ -290,32 +287,12 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList title: l.name, icon: 'ti ti-star', iconOnly: true, -}))), { - key: 'home', - title: i18n.ts._timelines.home, - icon: 'ti ti-home', - iconOnly: true, -}, ...(isLocalTimelineAvailable ? [{ - key: 'local', - title: i18n.ts._timelines.local, - icon: 'ti ti-planet', - iconOnly: true, -}, { - key: 'social', - title: i18n.ts._timelines.social, - icon: 'ti ti-universe', +}))), ...availableBasicTimelines().map(tl => ({ + key: tl, + title: i18n.ts._timelines[tl], + icon: basicTimelineIconClass(tl), iconOnly: true, -}] : []), ...(isBubbleTimelineAvailable ? [{ - key: 'bubble', - title: 'Bubble', - icon: 'ph-drop ph-bold ph-lg', - iconOnly: true, -}] : []), ...(isGlobalTimelineAvailable ? [{ - key: 'global', - title: i18n.ts._timelines.global, - icon: 'ti ti-whirl', - iconOnly: true, -}] : []), { +})), { icon: 'ti ti-list', title: i18n.ts.lists, iconOnly: true, @@ -332,24 +309,16 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList onClick: chooseChannel, }] as Tab[]); -const headerTabsWhenNotLogin = computed(() => [ - ...(isLocalTimelineAvailable ? [{ - key: 'local', - title: i18n.ts._timelines.local, - icon: 'ti ti-planet', - iconOnly: true, - }] : []), - ...(isGlobalTimelineAvailable ? [{ - key: 'global', - title: i18n.ts._timelines.global, - icon: 'ti ti-whirl', - iconOnly: true, - }] : []), -] as Tab[]); +const headerTabsWhenNotLogin = computed(() => [...availableBasicTimelines().map(tl => ({ + key: tl, + title: i18n.ts._timelines[tl], + icon: basicTimelineIconClass(tl), + iconOnly: true, +}))] as Tab[]); definePageMetadata(() => ({ title: i18n.ts.timeline, - icon: src.value === 'local' ? 'ti ti-planet' : src.value === 'social' ? 'ti ti-universe' : src.value === 'global' ? 'ti ti-whirl' : src.value === 'bubble' ? 'ph-drop ph-bold ph-lg' : 'ti ti-home', + icon: isBasicTimeline(src.value) ? basicTimelineIconClass(src.value) : 'ti ti-home', })); </script> |