enhance(frontend): 타임라인의 옵션 메뉴에서 타임라인 탭을 편집할 수 있음 (#528)

enhance(frontend): 타임라인을 모두 비활성화하면 타임라인이 비활성화되었다는 안내 문구 표시

CHANGELOG_CHERRYPICK.md

@@ -47,6 +47,8 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 - Enhance: 로그인 알림 개선
   - 로그인 알림에서 로그인 한 장치의 `IP`를 표시하고 승인되지 않은 기기에 대한 대응 방법이 표시됩니다.
 - Enhance: 노트 상세 페이지의 노트 헤더에서도 `편집됨`과 `노트 삭제 예약` 아이콘을 표시함
+- Enhance: 타임라인의 옵션 메뉴에서 타임라인 탭을 편집할 수 있음 (kokonect-link/cherrypick#528)
+- Enhance: 타임라인을 모두 비활성화하면 타임라인이 비활성화되었다는 안내 문구 표시
 - Fix: (Friendly) 알림 영역에 `새 노트` 탭이 누락됨
 - Fix: 노트 삭제 예약 기한을 `기간 지정`으로 설정한 경우 노트가 즉시 삭제될 수 있음
 - Fix: 이벤트가 포함된 노트를 `삭제 후 편집` 또는 `내용 복사 후 편집`할 때, 이벤트를 편집하지 않으면 노트를 게시할 수 없음

packages/frontend/src/pages/timeline.vue

@@ -37,7 +37,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</transition>
 
 				<div :class="$style.tl">
+					<div v-if="!isAvailableBasicTimeline(src)" :class="$style.disabled">
+						<p :class="$style.disabledTitle">
+							<i class="ti ti-circle-minus"></i>
+							{{ i18n.ts._disabledTimeline.title }}
+						</p>
+						<p :class="$style.disabledDescription">{{ i18n.ts._disabledTimeline.description }}</p>
+					</div>
 					<MkTimeline
+						v-else
 						ref="tlComponent"
 						:key="src + withRenotes + withReplies + onlyFiles + onlyCats"
 						:src="src.split(':')[0]"
@@ -161,6 +169,15 @@ const withSensitive = computed<boolean>({
 
 const enableWidgetsArea = ref(defaultStore.state.enableWidgetsArea);
 const friendlyUiEnableNotificationsArea = ref(defaultStore.state.friendlyUiEnableNotificationsArea);
+
+const enableHomeTimeline = ref(defaultStore.state.enableHomeTimeline);
+const enableLocalTimeline = ref(defaultStore.state.enableLocalTimeline);
+const enableSocialTimeline = ref(defaultStore.state.enableSocialTimeline);
+const enableGlobalTimeline = ref(defaultStore.state.enableGlobalTimeline);
+const enableListTimeline = ref(defaultStore.state.enableListTimeline);
+const enableAntennaTimeline = ref(defaultStore.state.enableAntennaTimeline);
+const enableChannelTimeline = ref(defaultStore.state.enableChannelTimeline);
+
 const collapseRenotes = ref(defaultStore.state.collapseRenotes);
 const collapseReplies = ref(defaultStore.state.collapseReplies);
 const collapseLongNoteContent = ref(defaultStore.state.collapseLongNoteContent);
@@ -187,6 +204,41 @@ watch(friendlyUiEnableNotificationsArea, (x) => {
 	reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
 });
 
+watch(enableHomeTimeline, (x) => {
+	defaultStore.set('enableHomeTimeline', x);
+	reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
+});
+
+watch(enableLocalTimeline, (x) => {
+	defaultStore.set('enableLocalTimeline', x);
+	reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
+});
+
+watch(enableSocialTimeline, (x) => {
+	defaultStore.set('enableSocialTimeline', x);
+	reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
+});
+
+watch(enableGlobalTimeline, (x) => {
+	defaultStore.set('enableGlobalTimeline', x);
+	reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
+});
+
+watch(enableListTimeline, (x) => {
+	defaultStore.set('enableListTimeline', x);
+	reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
+});
+
+watch(enableAntennaTimeline, (x) => {
+	defaultStore.set('enableAntennaTimeline', x);
+	reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
+});
+
+watch(enableChannelTimeline, (x) => {
+	defaultStore.set('enableChannelTimeline', x);
+	reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
+});
+
 watch(collapseRenotes, (x) => {
 	defaultStore.set('collapseRenotes', x);
 	reloadTimeline();
@@ -297,7 +349,7 @@ async function chooseChannel(ev: MouseEvent): Promise<void> {
 function saveSrc(newSrc: TimelinePageSrc): void {
 	const out = deepMerge({ src: newSrc }, defaultStore.state.tl);
 
-	if (newSrc.startsWith('userList:')) {
+	if (defaultStore.state.enableListTimeline && newSrc.startsWith('userList:')) {
 		const id = newSrc.substring('userList:'.length);
 		out.userList = defaultStore.reactiveState.pinnedUserLists.value.find(l => l.id === id) ?? null;
 	}
@@ -393,6 +445,54 @@ const headerActions = computed(() => {
 
 				menuItems.push({ type: 'divider' });
 
+				menuItems.push({
+					type: 'parent',
+					icon: 'ti ti-align-left',
+					text: i18n.ts.timeline,
+					children: async () => {
+						const displayOfTimelineChildMenu = [] as MenuItem[];
+
+						displayOfTimelineChildMenu.push({
+							type: 'switch',
+							text: i18n.ts._timelines.home,
+							icon: 'ti ti-home',
+							ref: enableHomeTimeline,
+						}, {
+							type: 'switch',
+							text: i18n.ts._timelines.local,
+							icon: 'ti ti-planet',
+							ref: enableLocalTimeline,
+						}, {
+							type: 'switch',
+							text: i18n.ts._timelines.social,
+							icon: 'ti ti-universe',
+							ref: enableSocialTimeline,
+						}, {
+							type: 'switch',
+							text: i18n.ts._timelines.global,
+							icon: 'ti ti-world',
+							ref: enableGlobalTimeline,
+						}, { type: 'divider' }, {
+							type: 'switch',
+							text: i18n.ts.lists,
+							icon: 'ti ti-list',
+							ref: enableListTimeline,
+						}, {
+							type: 'switch',
+							text: i18n.ts.antennas,
+							icon: 'ti ti-antenna',
+							ref: enableAntennaTimeline,
+						}, {
+							type: 'switch',
+							text: i18n.ts.channel,
+							icon: 'ti ti-device-tv',
+							ref: enableChannelTimeline,
+						});
+
+						return displayOfTimelineChildMenu;
+					},
+				});
+
 				menuItems.push({
 					type: 'parent',
 					icon: 'ti ti-note',