Merge remote-tracking branch 'refs/remotes/origin/timelineheader' into develop

# Conflicts: # CHANGELOG.md # packages/frontend/src/pages/timeline.vue # packages/frontend/src/store.ts
2024-06-22 00:25:52 +09:00 · 2024-06-22 00:25:52 +09:00 · 58ce5a5f79
parent be65fd66a3 2697917873
commit 58ce5a5f79
10 changed files with 324 additions and 109 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -5,13 +5,11 @@
 - Fix: 配信停止したインスタンス一覧が見れなくなる問題を修正

 ### Client
- Fix: `/about#federation` ページなどで各インスタンスのチャートが表示されなくなっていた問題を修正
- Fix: ユーザーページの追加情報のラベルを投稿者のサーバーの絵文字で表示する (#13968)
+- メインタイムラインのタブをカスタマイズできるように

 ### Server
 - チャート生成時にinstance.suspentionStateに置き換えられたinstance.isSuspendedが参照されてしまう問題を修正
- Feat: レートリミット制限に引っかかったときに`Retry-After`ヘッダーを返すように (#13949)
- Fix: アンテナ・クリップ・リスト・ウェブフックがロールポリシーの上限より一つ多く作れてしまうのを修正 (#14036)
+

 ## 2024.5.0

@ -317,6 +315,7 @@
 - Enhance: つながりの公開範囲をフォロー/フォロワーで個別に設定可能に #12072
 - Enhance: ローカリゼーションの更新
 - Enhance: 依存関係の更新
+- Fix: MFM `$[unixtime ]` に不正な値を入力した際に発生する各種エラーを修正

 ### Client
 - Feat: 今日誕生日のフォロー中のユーザーを一覧表示できるウィジェットを追加
@ -534,10 +533,6 @@
 ## 2023.10.1
 ### General
 - Enhance: ローカルタイムライン、ソーシャルタイムラインで返信を含むかどうか設定可能に
- Feat: 絵文字申請を追加
-	- これによって絵文字リクエストロールが追加されました。
-    - カスタム絵文字管理の画面に 申請されている絵文字 タブが追加されました。
-    - カスタム絵文字のリクエストボタンが実装されました。

 ### Client
 - Fix: 絵文字ピッカーで横に長いカスタム絵文字が見切れる問題を修正
@ -581,7 +576,6 @@
 - Enhance: 動画再生時のデフォルトボリュームを30%に
 - Fix: リアクションしたユーザ一覧のUIが稀に左上に残ってしまう不具合を修正

-
 ### Server
 - Enhance: drive/files/attached-notes がページネーションに対応しました
 - Enhance: タイムライン取得時のパフォーマンスを大幅に向上
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -2260,6 +2260,10 @@ export interface Locale extends ILocale {
     * アカウント設定
     */
    "accountSettings": string;
+    /**
+     * タイムラインのヘッダー
+     */
+    "timelineHeader": string;
    /**
     * プロモーション
     */
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -562,6 +562,7 @@ dayOverDayChanges: "前日比"
 appearance: "アピアランス"
 clientSettings: "クライアント設定"
 accountSettings: "アカウント設定"
+timelineHeader: "タイムラインのヘッダー"
 promotion: "プロモーション"
 promote: "プロモート"
 numberOfDays: "日数"
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@ -114,6 +114,11 @@ const menuDef = computed(() => [{
 		text: i18n.ts.navbar,
 		to: '/settings/navbar',
 		active: currentPage.value?.route.name === 'navbar',
+	}, {
+		icon: 'ti ti-layout-navbar',
+		text: i18n.ts.timelineHeader,
+		to: '/settings/timelineheader',
+		active: currentPage.value?.route.name === 'timelineHeader',
 	}, {
 		icon: 'ti ti-equal-double',
 		text: i18n.ts.statusbar,
--- a/packages/frontend/src/pages/settings/timelineHeader.vue
+++ b/packages/frontend/src/pages/settings/timelineHeader.vue
@ -0,0 +1,153 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+<template>
+<div class="_gaps_m">
+	<FormSlot>
+		<template #label>{{ i18n.ts.timelineHeader }}</template>
+		<MkContainer :showHeader="false">
+			<div style="overflow-x: auto;">
+				<Sortable
+					v-model="items"
+					itemKey="id"
+					:class="$style.container"
+					:animation="150"
+					:handle="'.' + $style.itemHandle"
+					@start="e => e.item.classList.add('active')"
+					@end="e => e.item.classList.remove('active')"
+				>
+					<template #item="{element,index}">
+						<div
+							:class="$style.item"
+						>
+							<button class="_button" :class="$style.itemHandle"><i class="ti ti-menu"></i></button>
+							<i class="ti-fw" :class="[$style.itemIcon, timelineHeaderItemDef[element.type]?.icon]"></i><span :class="$style.itemText">{{ timelineHeaderItemDef[element.type]?.title }}</span>
+							<button class="_button" :class="$style.itemRemove" @click="removeItem(index)"><i class="ti ti-x"></i></button>
+						</div>
+					</template>
+				</Sortable>
+			</div>
+		</MkContainer>
+	</FormSlot>
+	<div class="_buttons">
+		<MkButton @click="addItem"><i class="ti ti-plus"></i> {{ i18n.ts.addItem }}</MkButton>
+		<MkButton danger @click="reset"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
+		<MkButton primary class="save" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
+import MkRadios from '@/components/MkRadios.vue';
+import MkButton from '@/components/MkButton.vue';
+import FormSlot from '@/components/form/slot.vue';
+import MkContainer from '@/components/MkContainer.vue';
+import * as os from '@/os.js';
+import { navbarItemDef } from '@/navbar.js';
+import { defaultStore } from '@/store.js';
+import { unisonReload } from '@/scripts/unison-reload.js';
+import { i18n } from '@/i18n.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { timelineHeaderItemDef } from '@/timeline-header.js';
+
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+
+const items = ref(defaultStore.state.timelineHeader.map(x => ({
+	id: Math.random().toString(),
+	type: x,
+})));
+
+async function reloadAsk() {
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+}
+
+async function addItem() {
+	const menu = Object.keys(timelineHeaderItemDef).filter(k => !defaultStore.state.timelineHeader.includes(k));
+	const { canceled, result: item } = await os.select({
+		title: i18n.ts.addItem,
+		items: [...menu.map(k => ({
+			value: k, text: timelineHeaderItemDef[k].title,
+		}))],
+	});
+	if (canceled) return;
+	items.value = [...items.value, {
+		id: Math.random().toString(),
+		type: item,
+	}];
+}
+
+function removeItem(index: number) {
+	items.value.splice(index, 1);
+}
+
+async function save() {
+	defaultStore.set('timelineHeader', items.value.map(x => x.type));
+	await reloadAsk();
+}
+
+function reset() {
+	items.value = defaultStore.def.timelineHeader.default.map(x => ({
+		id: Math.random().toString(),
+		type: x,
+	}));
+}
+
+definePageMetadata(() => ({
+	title: i18n.ts.navbar,
+	icon: 'ti ti-list',
+}));
+</script>
+
+<style lang="scss" module>
+.item {
+	position: relative;
+	display: block;
+	line-height: 2.85rem;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	color: var(--navFg);
+	min-width: 200px;
+}
+
+.itemIcon {
+	position: relative;
+	width: 32px;
+	margin-right: 8px;
+}
+
+.itemText {
+	position: relative;
+	font-size: 0.9em;
+}
+
+.itemRemove {
+	position: absolute;
+	z-index: 10000;
+	width: 32px;
+	height: 32px;
+	color: #ff2a2a;
+	right: 8px;
+	opacity: 0.8;
+}
+
+.itemHandle {
+	cursor: move;
+	width: 32px;
+	height: 32px;
+	margin: 0 8px;
+	opacity: 0.5;
+}
+
+.container{
+	display: flex;
+}
+</style>
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@ -55,11 +55,11 @@ 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 { timelineHeaderItemDef } from '@/timeline-header.js';
+import { isLocalTimelineAvailable, isGlobalTimelineAvailable } from '@/scripts/get-timeline-available.js';

 provide('shouldOmitHeaderTitle', true);

-const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable && defaultStore.state.showLocalTimeline) || ($i != null && $i.policies.ltlAvailable && defaultStore.state.showLocalTimeline);
-const isGlobalTimelineAvailable = ($i == null && instance.policies.gtlAvailable && defaultStore.state.showGlobalTimeline) || ($i != null && $i.policies.gtlAvailable && defaultStore.state.showGlobalTimeline);
 const keymap = {
 	't': focus,
 };
@ -69,7 +69,7 @@ const rootEl = shallowRef<HTMLElement>();

 const queue = ref(0);
 const srcWhenNotSignin = ref<'local' | 'global'>(isLocalTimelineAvailable ? 'local' : 'global');
-const src = computed<'home' | 'local' | 'social' | 'global' | `list:${string}`| `channel:${string}`>({
+const src = computed<'home' | 'local' | 'social' | 'global' | `list:${string}`>({
 	get: () => ($i ? defaultStore.reactiveState.tl.value.src : srcWhenNotSignin.value),
 	set: (x) => saveSrc(x),
 });
@ -136,7 +136,6 @@ if (src.value.split(':')[0] === 'channel') {
 }
 watch(src, async () => {
 	queue.value = 0;
-
 	if (src.value.split(':')[0] === 'channel') {
 		const channelId = src.value.split(':')[1];
 		channelInfo.value = await misskeyApi('channels/show', { channelId });
@ -145,6 +144,11 @@ watch(src, async () => {
 	}
 });

+watch(withSensitive, () => {
+	// これだけはクライアント側で完結する処理なので手動でリロード
+	tlComponent.value?.reloadTimeline();
+});
+
 function queueUpdated(q: number): void {
 	queue.value = q;
 }
@ -161,7 +165,8 @@ async function chooseList(ev: MouseEvent): Promise<void> {
 		... lists.map(list => ({
 			type: 'link' as const,
 			text: list.name,
-			to: `/timeline/list/${list.id}` })),
+			to: `/timeline/list/${list.id}`,
+		})),
 		(lists.length === 0 ? undefined : { type: 'divider' }),
 		{
 			type: 'link' as const,
@ -297,83 +302,36 @@ const headerActions = computed(() => {
 	}
 	return tmp;
 });
+const headerTabs = computed(() => defaultStore.reactiveState.timelineHeader.value.map(tab => {
+	if ((tab === 'local' || tab === 'social') && !isLocalTimelineAvailable) {
+		return {};
+	} else if (tab === 'global' && !isGlobalTimelineAvailable) {
+		return {};
+	}

-const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserLists.value.map(l => ({
-	key: 'list:' + l.id,
-	title: l.name,
-	icon: 'ti ti-star',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}))), ...(defaultStore.reactiveState.pinnedChannels.value.map(l => ({
-	key: 'channel:' + l.id,
-	title: l.name,
-	icon: 'ti ti-star',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}))), ...(showHomeTimeline.value ? [{
-	key: 'home',
-	title: i18n.ts._timelines.home,
-	icon: 'ti ti-home',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}] : []), ...(isLocalTimelineAvailable ? [{
-	key: 'local',
-	title: i18n.ts._timelines.local,
-	icon: 'ti ti-planet',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}] : []), ...(isShowMediaTimeline.value ? [{
-	key: 'media',
-	title: i18n.ts._timelines.media,
-	icon: 'ti ti-photo',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}] : []), ...(showSocialTimeline.value ? [{
-	key: 'social',
-	title: i18n.ts._timelines.social,
-	icon: 'ti ti-universe',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}] : []), ...(remoteLocalTimelineEnable1.value ? [{
-	key: 'custom-timeline-1',
-	title: defaultStore.state.remoteLocalTimelineName1,
-	icon: 'ti ti-plus',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}] : []), ...(remoteLocalTimelineEnable2.value ? [{
-	key: 'custom-timeline-2',
-	title: defaultStore.state.remoteLocalTimelineName2,
-	icon: 'ti ti-plus',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}] : []), ...(remoteLocalTimelineEnable3.value ? [{
-	key: 'custom-timeline-3',
-	title: defaultStore.state.remoteLocalTimelineName3,
-	icon: 'ti ti-plus',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}] : []), ...(remoteLocalTimelineEnable4.value ? [{
-	key: 'custom-timeline-4',
-	title: defaultStore.state.remoteLocalTimelineName4,
-	icon: 'ti ti-plus',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}] : []), ...(remoteLocalTimelineEnable5.value ? [{
-	key: 'custom-timeline-5',
-	title: defaultStore.state.remoteLocalTimelineName5,
-	icon: 'ti ti-plus',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}] : []), ...(isGlobalTimelineAvailable ? [{
-	key: 'global',
-	title: i18n.ts._timelines.global,
-	icon: 'ti ti-whirl',
-	iconOnly: defaultStore.state.topBarNameShown ?? false,
-}] : []), {
-	icon: 'ti ti-list',
-	title: i18n.ts.lists,
-	iconOnly: true,
-	onClick: chooseList,
-}, {
-	icon: 'ti ti-antenna',
-	title: i18n.ts.antennas,
-	iconOnly: true,
-	onClick: chooseAntenna,
-}, {
-	icon: 'ti ti-device-tv',
-	title: i18n.ts.channel,
-	iconOnly: true,
-	onClick: chooseChannel,
-}] as Tab[]);
+	const tabDef = timelineHeaderItemDef[tab];
+	if (!tabDef) {
+		return {};
+	}
+
+	return {
+		...(!['channels', 'antennas', 'lists'].includes(tab) ? {
+			key: tab,
+		} : {}),
+		title: tabDef.title,
+		icon: tabDef.icon,
+		iconOnly: tabDef.iconOnly,
+		...(tab === 'lists' ? {
+			onClick: (ev) => chooseList(ev),
+		} : {}),
+		...(tab === 'antennas' ? {
+			onClick: (ev) => chooseAntenna(ev),
+		} : {}),
+		...(tab === 'channels' ? {
+			onClick: (ev) => chooseChannel(ev),
+		} : {}),
+	};
+}) as Tab[]);

 const headerTabsWhenNotLogin = computed(() => [
 	...(isLocalTimelineAvailable ? [{
@ -398,31 +356,31 @@ definePageMetadata(() => ({

 <style lang="scss" module>
 .new {
-  position: sticky;
-  top: calc(var(--stickyTop, 0px) + 16px);
-  z-index: 1000;
-  width: 100%;
-  margin: calc(-0.675em - 8px) 0;
+	position: sticky;
+	top: calc(var(--stickyTop, 0px) + 16px);
+	z-index: 1000;
+	width: 100%;
+	margin: calc(-0.675em - 8px) 0;

-  &:first-child {
-    margin-top: calc(-0.675em - 8px - var(--margin));
-  }
+	&:first-child {
+		margin-top: calc(-0.675em - 8px - var(--margin));
+	}
 }

 .newButton {
-  display: block;
-  margin: var(--margin) auto 0 auto;
-  padding: 8px 16px;
-  border-radius: 32px;
+	display: block;
+	margin: var(--margin) auto 0 auto;
+	padding: 8px 16px;
+	border-radius: 32px;
 }

 .postForm {
-  border-radius: var(--radius);
+	border-radius: var(--radius);
 }

 .tl {
-  background: var(--bg);
-  border-radius: var(--radius);
-  overflow: clip;
+	background: var(--bg);
+	border-radius: var(--radius);
+	overflow: clip;
 }
 </style>
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@ -112,6 +112,10 @@ const routes: RouteDef[] = [{
 		path: '/navbar',
 		name: 'navbar',
 		component: page(() => import('@/pages/settings/navbar.vue')),
+	}, {
+		path: '/timeline-header',
+		name: 'timelineHeader',
+		component: page(() => import('@/pages/settings/timelineHeader.vue')),
 	}, {
 		path: '/statusbar',
 		name: 'statusbar',
--- a/packages/frontend/src/scripts/get-timeline-available.ts
+++ b/packages/frontend/src/scripts/get-timeline-available.ts
@ -0,0 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { $i } from '@/account.js';
+import { instance } from '@/instance.js';
+export const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable);
+export const isGlobalTimelineAvailable = ($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable);
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@ -9,8 +9,7 @@ import { miLocalStorage } from './local-storage.js';
 import type { SoundType } from '@/scripts/sound.js';
 import { Storage } from '@/pizzax.js';
 import { hemisphere } from '@/scripts/intl-const.js';
-import { misskeyApi } from '@/scripts/misskey-api.js';
-
+import { isLocalTimelineAvailable, isGlobalTimelineAvailable } from '@/scripts/get-timeline-available.js';
 interface PostFormAction {
 	title: string,
 	handler: <T>(form: T, update: (key: unknown, value: unknown) => void) => void;
@ -53,7 +52,6 @@ export type SoundStore = {

 	volume: number;
 }
-import { instance } from '@/instance.js';
 export const postFormActions: PostFormAction[] = [];
 export const userActions: UserAction[] = [];
 export const noteActions: NoteAction[] = [];
@ -238,6 +236,22 @@ export const defaultStore = markRaw(new Storage('base', {
 			'cacheclear',
 		],
 	},
+	timelineHeader: {
+		where: 'deviceAccount',
+		default: [
+			'home',
+			...(isLocalTimelineAvailable ? [
+				'local',
+				'social',
+			] : []),
+			...(isGlobalTimelineAvailable ? [
+				'global',
+			] : []),
+			'lists',
+			'antennas',
+			'channels',
+		] as TimelineHeaderItem[],
+	},
 	visibility: {
 		where: 'deviceAccount',
 		default: 'public' as (typeof Misskey.noteVisibilities)[number],
@ -804,6 +818,7 @@ interface Watcher {
 */
 import lightTheme from '@/themes/l-light.json5';
 import darkTheme from '@/themes/d-green-lime.json5';
+import { TimelineHeaderItem } from '@/timeline-header.js';

 export class ColdDeviceStorage {
 	public static default = {
--- a/packages/frontend/src/timeline-header.ts
+++ b/packages/frontend/src/timeline-header.ts
@ -0,0 +1,73 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { reactive } from 'vue';
+import { i18n } from '@/i18n.js';
+import { userListsCache } from '@/cache.js';
+import { isLocalTimelineAvailable, isGlobalTimelineAvailable } from '@/scripts/get-timeline-available.js';
+
+export type TimelineHeaderItem =
+	'home' |
+	'local' |
+	'social' |
+	'global' |
+	'lists' |
+	'antennas' |
+	'channels' |
+	`list:${string}`
+
+type TimelineHeaderItemsDef = {
+	title: string;
+	icon: string;
+	iconOnly?: boolean; // わからん
+}
+
+const lists = await userListsCache.fetch();
+export const timelineHeaderItemDef = reactive<Partial<Record<TimelineHeaderItem, TimelineHeaderItemsDef>>>({
+	home: {
+		title: i18n.ts._timelines.home,
+		icon: 'ti ti-home',
+		iconOnly: true,
+	},
+	...(isLocalTimelineAvailable ? {
+		local: {
+			title: i18n.ts._timelines.local,
+			icon: 'ti ti-planet',
+			iconOnly: true,
+		},
+		social: {
+			title: i18n.ts._timelines.social,
+			icon: 'ti ti-universe',
+			iconOnly: true,
+		} } : {}),
+	...(isGlobalTimelineAvailable ? { global: {
+		title: i18n.ts._timelines.global,
+		icon: 'ti ti-whirl',
+		iconOnly: true,
+	} } : {}),
+	lists: {
+		icon: 'ti ti-list',
+		title: i18n.ts.lists,
+		iconOnly: true,
+	},
+	antennas: {
+		icon: 'ti ti-antenna',
+		title: i18n.ts.antennas,
+		iconOnly: true,
+	},
+	channels: {
+		icon: 'ti ti-device-tv',
+		title: i18n.ts.channel,
+		iconOnly: true,
+	},
+	...lists.reduce((acc, l) => {
+		acc['list:' + l.id] = {
+			title: i18n.ts.lists + ':' + l.name,
+			icon: 'ti ti-star',
+			iconOnly: true,
+		};
+		return acc;
+	}, {}),
+});