feat: タイムラインを編集できるように

2023-06-22 20:29:05 +09:00 · 2023-06-22 20:29:05 +09:00 · 101adfc46d
parent 41948632c4
commit 101adfc46d
6 changed files with 165 additions and 46 deletions
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@ -32,6 +32,7 @@
 - 노트의 시간을 일자로 표시하는 기능
 - 고양이 타임라인 추가
 - 미디어 타임라인 개선
+- 타임라인 편집 기능 추가

 ### Client
 - 리노트 전 확인 팝업을 띄움
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@ -111,6 +111,11 @@ const menuDef = computed(() => [{
 		text: i18n.ts.navbar,
 		to: '/settings/navbar',
 		active: currentPage?.route.name === 'navbar',
+	}, {
+		icon: 'ti ti-align-left',
+		text: i18n.ts.timeline,
+		to: '/settings/timeline',
+		active: currentPage?.route.name === 'timeline',
 	}, {
 		icon: 'ti ti-equal-double',
 		text: i18n.ts.statusbar,
--- a/packages/frontend/src/pages/settings/timeline.vue
+++ b/packages/frontend/src/pages/settings/timeline.vue
@ -0,0 +1,70 @@
+<template>
+<div class="_gaps_m">
+	<FormSection first>
+		<template #label>{{ i18n.ts.timeline }}</template>
+		<div class="_gaps_m">
+			<MkSwitch v-model="enableHomeTimeline"><i class="ti ti-home"></i> {{ i18n.ts._timelines.home }}</MkSwitch>
+			<MkSwitch v-model="enableLocalTimeline"><i class="ti ti-planet"></i> {{ i18n.ts._timelines.local }}</MkSwitch>
+			<MkSwitch v-model="enableMediaTimeline"><i class="ti ti-photo"></i> {{ i18n.ts._timelines.media }}</MkSwitch>
+			<MkSwitch v-model="enableSocialTimeline"><i class="ti ti-rocket"></i> {{ i18n.ts._timelines.social }}</MkSwitch>
+			<MkSwitch v-model="enableCatTimeline"><i class="ti ti-cat"></i> {{ i18n.ts._timelines.cat }}</MkSwitch>
+			<MkSwitch v-model="enableGlobalTimeline"><i class="ti ti-world"></i> {{ i18n.ts._timelines.global }}</MkSwitch>
+		</div>
+	</FormSection>
+
+	<FormSection>
+		<div class="_gaps_m">
+			<MkSwitch v-model="enableListTimeline"><i class="ti ti-list"></i> {{ i18n.ts.lists }}</MkSwitch>
+			<MkSwitch v-model="enableAntennaTimeline"><i class="ti ti-antenna"></i> {{ i18n.ts.antennas }}</MkSwitch>
+			<MkSwitch v-model="enableChannelTimeline"><i class="ti ti-device-tv"></i> {{ i18n.ts.channel }}</MkSwitch>
+		</div>
+	</FormSection>
+
+	<MkButton primary class="save" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkButton from '@/components/MkButton.vue';
+import FormSection from '@/components/form/section.vue';
+import { defaultStore } from '@/store';
+import * as os from '@/os';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+async function reloadAsk() {
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+}
+
+function save() {
+	reloadAsk();
+}
+
+const enableHomeTimeline = computed(defaultStore.makeGetterSetter('enableHomeTimeline'));
+const enableLocalTimeline = computed(defaultStore.makeGetterSetter('enableLocalTimeline'));
+const enableMediaTimeline = computed(defaultStore.makeGetterSetter('enableMediaTimeline'));
+const enableSocialTimeline = computed(defaultStore.makeGetterSetter('enableSocialTimeline'));
+const enableCatTimeline = computed(defaultStore.makeGetterSetter('enableCatTimeline'));
+const enableGlobalTimeline = computed(defaultStore.makeGetterSetter('enableGlobalTimeline'));
+const enableListTimeline = computed(defaultStore.makeGetterSetter('enableListTimeline'));
+const enableAntennaTimeline = computed(defaultStore.makeGetterSetter('enableAntennaTimeline'));
+const enableChannelTimeline = computed(defaultStore.makeGetterSetter('enableChannelTimeline'));
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.timeline,
+	icon: 'ti ti-bulb-filled',
+});
+</script>
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@ -183,52 +183,53 @@ const headerActions = $computed(() => [{

 const friendlyEnableNotification = computed(defaultStore.makeGetterSetter('friendlyEnableNotification'));

-const headerTabs = $computed(() => [{
-	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,
-}, ...(isMediaTimelineAvailable ? [{
-	key: 'media',
-	title: i18n.ts._timelines.media,
-	icon: 'ti ti-photo',
-	iconOnly: true,
-}] : []), {
-	key: 'social',
-	title: i18n.ts._timelines.social,
-	icon: 'ti ti-rocket',
-	iconOnly: true,
-}, ...(isCatTimelineAvailable ? [{
-	key: 'cat',
-	title: i18n.ts._timelines.cat,
-	icon: 'ti ti-cat',
-	iconOnly: true,
-}] : [])] : []), ...(isGlobalTimelineAvailable ? [{
-	key: 'global',
-	title: i18n.ts._timelines.global,
-	icon: 'ti ti-world',
-	iconOnly: true,
-}] : []), {
-	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 headerTabs = $computed(() => [
+	...(defaultStore.state.enableHomeTimeline ? [{
+		key: 'home',
+		title: i18n.ts._timelines.home,
+		icon: 'ti ti-home',
+		iconOnly: true,
+	}] : []), ...(isLocalTimelineAvailable && defaultStore.state.enableLocalTimeline ? [{
+		key: 'local',
+		title: i18n.ts._timelines.local,
+		icon: 'ti ti-planet',
+		iconOnly: true,
+	}, ...(isMediaTimelineAvailable && defaultStore.state.enableMediaTimeline ? [{
+		key: 'media',
+		title: i18n.ts._timelines.media,
+		icon: 'ti ti-photo',
+		iconOnly: true,
+	}] : []), ...(defaultStore.state.enableSocialTimeline ? [{
+		key: 'social',
+		title: i18n.ts._timelines.social,
+		icon: 'ti ti-rocket',
+		iconOnly: true,
+	}] : []), ...(isCatTimelineAvailable && defaultStore.state.enableCatTimeline ? [{
+		key: 'cat',
+		title: i18n.ts._timelines.cat,
+		icon: 'ti ti-cat',
+		iconOnly: true,
+	}] : [])] : []), ...(isGlobalTimelineAvailable && defaultStore.state.enableGlobalTimeline ? [{
+		key: 'global',
+		title: i18n.ts._timelines.global,
+		icon: 'ti ti-world',
+		iconOnly: true,
+	}] : []), ...(defaultStore.state.enableListTimeline ? [{
+		icon: 'ti ti-list',
+		title: i18n.ts.lists,
+		iconOnly: true,
+		onClick: chooseList,
+	}] : []), ...(defaultStore.state.enableAntennaTimeline ? [{
+		icon: 'ti ti-antenna',
+		title: i18n.ts.antennas,
+		iconOnly: true,
+		onClick: chooseAntenna,
+	}] : []), ...(defaultStore.state.enableChannelTimeline ? [{
+		icon: 'ti ti-device-tv',
+		title: i18n.ts.channel,
+		iconOnly: true,
+		onClick: chooseChannel,
+	}] : [])] as Tab[]);

 const headerTabsWhenNotLogin = $computed(() => [
 	...(isLocalTimelineAvailable ? [{
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@ -105,6 +105,10 @@ export const routes = [{
 		path: '/navbar',
 		name: 'navbar',
 		component: page(() => import('./pages/settings/navbar.vue')),
+	}, {
+		path: '/timeline',
+		name: 'timeline',
+		component: page(() => import('./pages/settings/timeline.vue')),
 	}, {
 		path: '/statusbar',
 		name: 'statusbar',
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@ -392,6 +392,44 @@ export const defaultStore = markRaw(new Storage('base', {
 		default: false,
 	},

+	// - Settings/Timeline
+	enableHomeTimeline: {
+		where: 'device',
+		default: true,
+	},
+	enableLocalTimeline: {
+		where: 'device',
+		default: true,
+	},
+	enableMediaTimeline: {
+		where: 'device',
+		default: true,
+	},
+	enableSocialTimeline: {
+		where: 'device',
+		default: true,
+	},
+	enableCatTimeline: {
+		where: 'device',
+		default: true,
+	},
+	enableGlobalTimeline: {
+		where: 'device',
+		default: true,
+	},
+	enableListTimeline: {
+		where: 'device',
+		default: true,
+	},
+	enableAntennaTimeline: {
+		where: 'device',
+		default: true,
+	},
+	enableChannelTimeline: {
+		where: 'device',
+		default: true,
+	},
+
 	// - Settings/CherryPick
 	nicknameEnabled: {
 		where: 'account',