frontend timeline fixes & improvements (#13727)
* fix: withRepliesがオフのときにwithFilesのとぐるをいじれない問題 * fix: type errors in tl-column * fix: deck uiでタイムラインを切り替えた際にTLの設定項目が更新されない * refactor: タイムラインの各種知識を一つのファイルに統合 fix: ウィジェットのタイムライン選択欄に表示できないタイムラインが表示される * docs(changelog): timeline improvements * fix: missing license header * chore: timeline > basic timeline * use BasicTimelineType in deck-store * Update CHANGELOG.md --------- Co-authored-by: Sayamame-beans <61457993+Sayamame-beans@users.noreply.github.com>
This commit is contained in:
anatawa12
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<MkSpacer :contentMax="800">
|
||||
<MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin">
|
||||
<div :key="src" ref="rootEl">
|
||||
<MkInfo v-if="['home', 'local', 'social', 'global'].includes(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()">
|
||||
<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);"/>
|
||||
@@ -45,7 +45,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';
|
||||
@@ -53,17 +52,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 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' | `list:${string}`>({
|
||||
get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin.value),
|
||||
set: (x) => saveSrc(x),
|
||||
@@ -74,7 +71,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: () => {
|
||||
@@ -229,7 +230,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);
|
||||
@@ -245,7 +246,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,
|
||||
@@ -258,7 +259,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);
|
||||
},
|
||||
},
|
||||
@@ -280,32 +281,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',
|
||||
}))), ...availableBasicTimelines().map(tl => ({
|
||||
key: tl,
|
||||
title: i18n.ts._timelines[tl],
|
||||
icon: basicTimelineIconClass(tl),
|
||||
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',
|
||||
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,
|
||||
onClick: chooseList,
|
||||
}, {
|
||||
})), {
|
||||
icon: 'ti ti-antenna',
|
||||
title: i18n.ts.antennas,
|
||||
iconOnly: true,
|
||||
@@ -317,24 +298,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' : 'ti ti-home',
|
||||
icon: isBasicTimeline(src.value) ? basicTimelineIconClass(src.value) : 'ti ti-home',
|
||||
}));
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user