enhance(frontend): '노트를 클릭하여 자세히 표시' 기능 개선

- 노트를 두 번 클릭해서 열 수 있음

CHANGELOG_CHERRYPICK.md

@@ -32,6 +32,8 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
 - Feat: 리노트 공개 범위를 지정할 수 있음 (kokonect-link/cherrypick#406)
   - 이 기능은 '리노트 공개 범위 옵션 표시' 기능이 꺼져있어야 합니다.
 - Enhance: 빌트인 테마를 설치하려고 할 때 오류 메시지 개선
+- Enhance: '노트를 클릭하여 자세히 표시' 기능 개선
+  - 노트를 두 번 클릭해서 열 수 있음
 - Fix: 장식 추가로 일부 태그를 추가할 수 없음
 - Fix: 알림 위젯 필터링이 작동하지 않을 수 있음 (kokonect-link/cherrypick#404)
 - Fix: 노트 자세히 보기에서 노트 작성 폼을 클릭하면 내용이 초기화될 수 있음  (kokonect-link/cherrypick#410)

locales/en-US.yml

@@ -1337,6 +1337,10 @@ _cherrypick:
   showRenoteConfirmPopupDescription: "This setting must have the \"General - Show renote and quote buttons separately\" setting turned on."
   expandOnNoteClick: "Open note on click"
   expandOnNoteClickDescription: "If disabled, you can still open 'Details' in the notes menu or by clicking the timestamp."
+  expandOnNoteClickBehavior: "When click to open a note"
+  _expandOnNoteClickBehavior:
+    click: "Click to open"
+    doubleClick: "Double-click to open"
   displayHeaderNavBarWhenScroll: "Show elements when scrolling (header, floating buttons, navigation bar)"
   _displayHeaderNavBarWhenScroll:
     all: "Display all"

locales/index.d.ts

@@ -1377,6 +1377,11 @@ export interface Locale {
         "showRenoteConfirmPopupDescription": string;
         "expandOnNoteClick": string;
         "expandOnNoteClickDescription": string;
+        "expandOnNoteClickBehavior": string;
+        "_expandOnNoteClickBehavior": {
+            "click": string;
+            "doubleClick": string;
+        };
         "displayHeaderNavBarWhenScroll": string;
         "_displayHeaderNavBarWhenScroll": {
             "all": string;

locales/ja-JP.yml

@@ -1374,6 +1374,10 @@ _cherrypick:
   showRenoteConfirmPopupDescription: "この設定は「全般 - リノートと引用ボタンを分けて表示する」設定がオンになっている必要があります。"
   expandOnNoteClick: "クリックでノートの詳細を開く"
   expandOnNoteClickDescription: "オフの場合、ノートメニューの[詳細]をクリックするか、日付をクリックして開けます。"
+  expandOnNoteClickBehavior: "ノートをクリックして開くとき"
+  _expandOnNoteClickBehavior:
+    click: "クリックして開く"
+    doubleClick: "ダブルクリックで開く"
   displayHeaderNavBarWhenScroll: "スクロール時の要素表示（ヘッダー、フローティングボタン、ナビゲーションバー）"
   _displayHeaderNavBarWhenScroll:
     all: "全て表示"

locales/ko-KR.yml

@@ -1347,6 +1347,10 @@ _cherrypick:
   showRenoteConfirmPopupDescription: "이 설정은 '일반 - 리노트와 인용 버튼을 분리해서 표시하기' 설정이 켜져 있어야 해요."
   expandOnNoteClick: "노트를 클릭하여 자세히 표시"
   expandOnNoteClickDescription: "비활성화한 경우에도 노트 메뉴에서 '자세히'를 클릭하거나 타임스탬프를 클릭하여 열 수 있어요."
+  expandOnNoteClickBehavior: "노트를 클릭해서 열 때"
+  _expandOnNoteClickBehavior:
+    click: "클릭해서 열기"
+    doubleClick: "두 번 클릭해서 열기"
   displayHeaderNavBarWhenScroll: "스크롤 시 요소 표시 (헤더, 플로팅 버튼, 탐색 모음)"
   _displayHeaderNavBarWhenScroll:
     all: "모두 표시"

packages/frontend/src/components/MkNote.vue

@@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkAvatar v-if="!defaultStore.state.hideAvatarsInNote" :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
 		<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
 	</div>
-	<article v-else :class="$style.article" :style="{ cursor: expandOnNoteClick ? 'pointer' : '', paddingTop: defaultStore.state.showSubNoteFooterButton && appearNote.reply && !renoteCollapsed ? '14px' : '' }" @click.stop="noteClick" @contextmenu.stop="onContextmenu">
+	<article v-else :class="$style.article" :style="{ cursor: expandOnNoteClick ? 'pointer' : '', paddingTop: defaultStore.state.showSubNoteFooterButton && appearNote.reply && !renoteCollapsed ? '14px' : '' }" @click.stop="noteClick" @dblclick.stop="noteDblClick" @contextmenu.stop="onContextmenu">
 		<div style="display: flex; padding-bottom: 10px;">
 			<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
 			<MkAvatar v-if="!defaultStore.state.hideAvatarsInNote" :class="[$style.avatar, { [$style.avatarReplyTo]: appearNote.reply, [$style.showEl]: !appearNote.reply && (showEl && ['hideHeaderOnly', 'hideHeaderFloatBtn', 'hide'].includes(<string>defaultStore.state.displayHeaderNavBarWhenScroll)) && mainRouter.currentRoute.value.name === 'index', [$style.showElTab]: !appearNote.reply && (showEl && ['hideHeaderOnly', 'hideHeaderFloatBtn', 'hide'].includes(<string>defaultStore.state.displayHeaderNavBarWhenScroll)) && mainRouter.currentRoute.value.name !== 'index' }]" :user="appearNote.user" :link="!mock" :preview="!mock"/>
@@ -395,7 +395,12 @@ if (!props.mock) {
 }
 
 function noteClick(ev: MouseEvent) {
-	if (!expandOnNoteClick || window.getSelection().toString() !== '') ev.stopPropagation();
+	if (!expandOnNoteClick || window.getSelection().toString() !== '' || defaultStore.state.expandOnNoteClickBehavior === 'doubleClick') ev.stopPropagation();
+	else router.push(notePage(appearNote.value));
+}
+
+function noteDblClick(ev: MouseEvent) {
+	if (!expandOnNoteClick || window.getSelection().toString() !== '' || defaultStore.state.expandOnNoteClickBehavior === 'click') ev.stopPropagation();
 	else router.push(notePage(appearNote.value));
 }
 

packages/frontend/src/components/MkNoteSimple.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root" :style="{ cursor: expandOnNoteClick && enableNoteClick ? 'pointer' : '' }" @click.stop="noteClick">
+<div :class="$style.root" :style="{ cursor: expandOnNoteClick && enableNoteClick ? 'pointer' : '' }" @click.stop="noteClick" @dblclick.stop="noteDblClick">
 	<div style="display: flex; padding-bottom: 10px;">
 		<MkAvatar v-if="!defaultStore.state.hideAvatarsInNote" :class="[$style.avatar, { [$style.showEl]: (showEl && ['hideHeaderOnly', 'hideHeaderFloatBtn', 'hide'].includes(<string>defaultStore.state.displayHeaderNavBarWhenScroll)) && mainRouter.currentRoute.value.name === 'index', [$style.showElTab]: (showEl && ['hideHeaderOnly', 'hideHeaderFloatBtn', 'hide'].includes(<string>defaultStore.state.displayHeaderNavBarWhenScroll)) && mainRouter.currentRoute.value.name !== 'index' }]" :user="note.user" link preview/>
 		<div :class="$style.main">
@@ -57,7 +57,12 @@ onMounted(() => {
 });
 
 function noteClick(ev: MouseEvent) {
-	if (!expandOnNoteClick || !props.enableNoteClick || window.getSelection().toString() !== '') ev.stopPropagation();
+	if (!expandOnNoteClick || window.getSelection().toString() !== '' || defaultStore.state.expandOnNoteClickBehavior === 'doubleClick') ev.stopPropagation();
+	else router.push(notePage(props.note));
+}
+
+function noteDblClick(ev: MouseEvent) {
+	if (!expandOnNoteClick || window.getSelection().toString() !== '' || defaultStore.state.expandOnNoteClickBehavior === 'click') ev.stopPropagation();
 	else router.push(notePage(props.note));
 }
 </script>

packages/frontend/src/components/MkNoteSub.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.main">
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
 		<MkAvatar v-if="!defaultStore.state.hideAvatarsInNote" :class="$style.avatar" :user="note.user" link preview/>
-		<div :class="$style.body" :style="{ cursor: expandOnNoteClick ? 'pointer' : '' }" @click.stop="noteClick">
+		<div :class="$style.body" :style="{ cursor: expandOnNoteClick ? 'pointer' : '' }" @click.stop="noteClick" @dblclick.stop="noteDblClick">
 			<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
 			<div>
 				<MkEvent v-if="note.event" :note="note"/>
@@ -88,7 +88,12 @@ if (props.detail) {
 }
 
 function noteClick(ev: MouseEvent) {
-	if (!expandOnNoteClick || window.getSelection().toString() !== '') ev.stopPropagation();
+	if (!expandOnNoteClick || window.getSelection().toString() !== '' || defaultStore.state.expandOnNoteClickBehavior === 'doubleClick') ev.stopPropagation();
+	else router.push(notePage(props.note));
+}
+
+function noteDblClick(ev: MouseEvent) {
+	if (!expandOnNoteClick || window.getSelection().toString() !== '' || defaultStore.state.expandOnNoteClickBehavior === 'click') ev.stopPropagation();
 	else router.push(notePage(props.note));
 }
 </script>

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

@@ -31,6 +31,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts._cherrypick.expandOnNoteClick }}</template>
 					<template #caption>{{ i18n.ts._cherrypick.expandOnNoteClickDescription }}</template>
 				</MkSwitch>
+				<MkSelect v-if="expandOnNoteClick" v-model="expandOnNoteClickBehavior">
+					<template #label>{{ i18n.ts._cherrypick.expandOnNoteClickBehavior }}</template>
+					<option value="click">{{ i18n.ts._nsfwOpenBehavior.click }}</option>
+					<option value="doubleClick">{{ i18n.ts._nsfwOpenBehavior.doubleClick }}</option>
+				</MkSelect>
 			</div>
 
 			<div>
@@ -86,6 +91,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
 import MkSwitch from '@/components/MkSwitch.vue';
+import MkSelect from '@/components/MkSelect.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import FormSection from '@/components/form/section.vue';
 import { defaultStore } from '@/store.js';
@@ -109,6 +115,7 @@ const useEnterToSend = computed(defaultStore.makeGetterSetter('useEnterToSend'))
 const postFormVisibilityHotkey = computed(defaultStore.makeGetterSetter('postFormVisibilityHotkey'));
 const showRenoteConfirmPopup = computed(defaultStore.makeGetterSetter('showRenoteConfirmPopup'));
 const expandOnNoteClick = computed(defaultStore.makeGetterSetter('expandOnNoteClick'));
+const expandOnNoteClickBehavior = computed(defaultStore.makeGetterSetter('expandOnNoteClickBehavior'));
 const displayHeaderNavBarWhenScroll = computed(defaultStore.makeGetterSetter('displayHeaderNavBarWhenScroll'));
 const reactableRemoteReactionEnabled = computed(defaultStore.makeGetterSetter('reactableRemoteReactionEnabled'));
 const showFollowingMessageInsteadOfButtonEnabled = computed(defaultStore.makeGetterSetter('showFollowingMessageInsteadOfButtonEnabled'));

packages/frontend/src/store.ts

@@ -654,6 +654,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	expandOnNoteClickBehavior: {
+		where: 'device',
+		default: 'click' as 'click' | 'doubleClick',
+	},
 	displayHeaderNavBarWhenScroll: {
 		where: 'device',
 		default: 'hideHeaderFloatBtn' as 'all' | 'hideHeaderOnly' | 'hideHeaderFloatBtn' | 'hideFloatBtnOnly' | 'hideFloatBtnNavBar' | 'hide',