Feat(frontend):お気に入りタグリストを追加

CHANGELOG_YOJO.md

@@ -33,6 +33,7 @@
   - リモートユーザー高度な検索画面で照会しますか？のダイアログが出ない問題
   - ユーザー検索画面で照会しますか？のダイアログが2つ出る問題 
 - Fix: 更新情報を確認のCherryPickの項目へのリンクを修正 
+- Feat: お気に入りのタグリストを作成できるように
 
 ### Server
 - Fix: ユーザーnull(System)の場合forceがfalseでも新規追加されるのを修正

locales/index.d.ts

@@ -5575,6 +5575,14 @@ export interface Locale extends ILocale {
      * プロフィールを翻訳する
      */
     "translateProfile": string;
+    /**
+     * タグ名を入力
+     */
+    "enterTagName": string;
+    /**
+     * タグに使用できない文字が含まれています
+     */
+    "invalidTagName": string;
     "_official_tag": {
         /**
          * 公式タグ

locales/ja-JP.yml

@@ -1388,6 +1388,8 @@ additionalPermissionsForFlash: "Playへの追加許可"
 thisFlashRequiresTheFollowingPermissions: "このPlayは以下の権限を要求しています"
 doYouWantToAllowThisPlayToAccessYourAccount: "このPlayによるアカウントへのアクセスを許可しますか？"
 translateProfile: "プロフィールを翻訳する"
+enterTagName: "タグ名を入力"
+invalidTagName: "タグに使用できない文字が含まれています"
 
 _official_tag:
   title: "公式タグ"

packages/frontend/src/navbar.ts

@@ -93,6 +93,12 @@ export const navbarItemDef = reactive({
 		show: computed(() => $i != null),
 		to: '/my/antennas',
 	},
+	tags: {
+		title: i18n.ts.tags,
+		icon: 'ti ti-hash',
+		show: computed(() => $i != null),
+		to: '/my/tags',
+	},
 	favorites: {
 		title: i18n.ts.favorites,
 		icon: 'ti ti-star',

packages/frontend/src/pages/my-tags/index.vue

@@ -0,0 +1,150 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project, yojo-art team
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :contentMax="700" :class="$style.main">
+		<div class="_gaps_s">
+			<div v-for="tag in tags" :key="tag" class="_panel" :class="$style.list">
+				<div :class="$style.tagItem">
+					<MkA :class="$style.tagItemBody" :to="`/tags/${tag}`">
+						<p :title="tag">{{ tag }}</p>
+					</MkA>
+					<button class="_button" :class="$style.remove" @click="removeTag(tag, $event)"><i class="ti ti-x"></i></button>
+				</div>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { i18n } from '@/i18n.js';
+
+const tags = ref<string[]>([]);
+
+tags.value = await misskeyApi('i/registry/get', {
+	scope: ['client', 'base'],
+	key: 'hashTag',
+}) as string[];
+
+async function removeTag(item, ev) {
+	os.popupMenu([{
+		text: i18n.ts.remove,
+		icon: 'ti ti-x',
+		danger: true,
+		action: async () => {
+			tags.value = tags.value.filter(x => item !== x);
+			await misskeyApi('i/registry/set', {
+				scope: ['client', 'base'],
+				key: 'hashTag',
+				value: tags.value,
+			});
+		},
+	}], ev.currentTarget ?? ev.target);
+}
+
+//watch(() => props.listId, fetchList, { immediate: true });
+
+const headerActions = computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts.create,
+	handler: addTag,
+}]);
+const invalidChars = [' ', '　', '#', ':', '\'', '"', '!'];
+
+function addTag () {
+	os.inputText({
+		title: i18n.ts.enterTagName,
+	}).then(({ canceled, result: temp }) => {
+		if (canceled) return;
+		const input = temp as string;
+		if (input === '' || invalidChars.includes(input) || tags.value.includes(input)) {
+			os.alert(
+				{
+					type: 'error',
+					title: i18n.ts.invalidTagName,
+				},
+			);
+			return;
+		}
+		tags.value.push(input);
+		const promise = misskeyApi('i/registry/set', {
+			scope: ['client', 'base'],
+			key: 'hashTag',
+			value: tags.value,
+		});
+		os.promiseDialog(promise, null, null);
+	});
+}
+
+const headerTabs = computed(() => []);
+
+definePageMetadata(() => ({
+	title: i18n.ts.tags,
+	icon: 'ti ti-hash',
+}));
+</script>
+
+<style lang="scss" module>
+.main {
+	min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
+}
+
+.list {
+	display: block;
+	padding: 4px;
+	border: solid 1px var(--divider);
+	border-radius: 6px;
+	margin-bottom: 8px;
+
+	&:hover {
+		border: solid 1px var(--accent);
+		text-decoration: none;
+	}
+}
+
+.tagItem {
+	display: flex;
+}
+
+.tagItemBody {
+	flex: 1;
+	min-width: 0;
+	margin-right: 8px;
+
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+.remove {
+	width: 38px;
+	height: 38px;
+	align-self: center;
+}
+
+.menu {
+	width: 32px;
+	height: 32px;
+	align-self: center;
+}
+
+.more {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.footer {
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	border-top: solid 0.5px var(--divider);
+}
+</style>

packages/frontend/src/pages/settings/preferences-backups.vue

@@ -127,6 +127,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'enableListTimeline',
 	'enableAntennaTimeline',
 	'enableMediaTimeline',
+	'enableTagTimeline',
 	'useEnterToSend',
 	'postFormVisibilityHotkey',
 	'showRenoteConfirmPopup',

packages/frontend/src/pages/settings/timeline.vue

@@ -20,6 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<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="enableTagTimeline"><i class="ti ti-hash"></i> {{ i18n.ts.tags }}</MkSwitch>
 		</div>
 	</FormSection>
 
@@ -59,6 +60,7 @@ const enableGlobalTimeline = computed(defaultStore.makeGetterSetter('enableGloba
 const enableListTimeline = computed(defaultStore.makeGetterSetter('enableListTimeline'));
 const enableAntennaTimeline = computed(defaultStore.makeGetterSetter('enableAntennaTimeline'));
 const enableMediaTimeline = computed(defaultStore.makeGetterSetter('enableMediaTimeline'));
+const enableTagTimeline = computed(defaultStore.makeGetterSetter('enableTagTimeline'));
 
 const headerActions = computed(() => []);
 

packages/frontend/src/pages/timeline.vue

@@ -230,6 +230,47 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
+async function chooseHashTag(ev: MouseEvent): Promise<void> {
+	let tags: string[];
+	try {
+		tags = await misskeyApi('i/registry/get', {
+			scope: ['client', 'base'],
+			key: 'hashTag',
+		});
+	} catch (err) {
+		if (err.code === 'NO_SUCH_KEY') {
+			tags = [];
+			await misskeyApi('i/registry/set', {
+				scope: ['client', 'base'],
+				key: 'hashTag',
+				value: [],
+			});
+			tags = await misskeyApi('i/registry/get', {
+				scope: ['client', 'base'],
+				key: 'hashTag',
+			});
+		} else {
+			throw err;
+		}
+	}
+
+	const items: MenuItem[] = [
+		...tags.map(tag => ({
+			type: 'link' as const,
+			text: tag,
+			to: `/tags/${encodeURIComponent(tag)}`,
+		})),
+		(tags.length === 0 ? undefined : { type: 'divider' }),
+		{
+			type: 'link' as const,
+			icon: 'ti ti-plus',
+			text: i18n.ts.createNew,
+			to: '/my/tags',
+		},
+	];
+	os.popupMenu(items, ev.currentTarget ?? ev.target);
+}
+
 async function chooseChannel(ev: MouseEvent): Promise<void> {
 	const channels = await favoritedChannelsCache.fetch();
 	const items: MenuItem[] = [
@@ -380,6 +421,11 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList
 	title: i18n.ts.antennas,
 	iconOnly: true,
 	onClick: chooseAntenna,
+}] : []), ...(defaultStore.state.enableTagTimeline ? [{
+	icon: 'ti ti-hash',
+	title: i18n.ts.tags,
+	iconOnly: true,
+	onClick: chooseHashTag,
 }] : [])] as Tab[]);
 
 const headerTabsWhenNotLogin = computed(() => [...availableBasicTimelines().map(tl => ({

packages/frontend/src/router/definition.ts

@@ -252,7 +252,7 @@ const routes: RouteDef[] = [{
 		origin: 'origin',
 	},
 }, {
-	// Legacy Compatibility	
+	// Legacy Compatibility
 	path: '/authorize-follow',
 	redirect: '/lookup',
 	loginRequired: true,
@@ -552,6 +552,10 @@ const routes: RouteDef[] = [{
 	path: '/my/clips',
 	component: page(() => import('@/pages/my-clips/index.vue')),
 	loginRequired: true,
+}, {
+	path: '/my/tags',
+	component: page(() => import('@/pages/my-tags/index.vue')),
+	loginRequired: true,
 }, {
 	path: '/my/antennas/create',
 	component: page(() => import('@/pages/my-antennas/create.vue')),

packages/frontend/src/store.ts

@@ -632,6 +632,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	enableTagTimeline: {
+		where: 'device',
+		default: true,
+	},
 
 	// - Settings/Sounds & Vibrations
 	vibrate: {