Merge pull request '[PR]: Add an option to toggle opening post on click' (#10242) from Freeplay/calckey:note-click into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10242

locales/en-US.yml

@@ -598,6 +598,8 @@ scratchpadDescription: "The scratchpad provides an environment for AiScript expe
 output: "Output"
 script: "Script"
 disablePagesScript: "Disable AiScript on Pages"
+expandOnNoteClick: "Open post on click"
+expandOnNoteClickDesc: "If disabled, you can still open posts in the right-click menu or by clicking the timestamp."
 updateRemoteUser: "Update remote user information"
 deleteAllFiles: "Delete all files"
 deleteAllFilesConfirm: "Are you sure that you want to delete all files?"

packages/client/src/components/MkNote.vue

@@ -68,6 +68,7 @@
 			class="article"
 			@contextmenu.stop="onContextmenu"
 			@click="noteClick"
+			:style="{ cursor: expandOnNoteClick && !detailedView ? 'pointer' : '' }"
 		>
 			<div class="main">
 				<div class="header-container">
@@ -313,6 +314,7 @@ const muted = ref(getWordSoftMute(note, $i, defaultStore.state.mutedWords));
 const translation = ref(null);
 const translating = ref(false);
 const enableEmojiReactions = defaultStore.state.enableEmojiReactions;
+const expandOnNoteClick = defaultStore.state.expandOnNoteClick;
 
 const keymap = {
 	r: () => reply(true),
@@ -501,7 +503,7 @@ function scrollIntoView() {
 }
 
 function noteClick(e) {
-	if (document.getSelection().type === "Range" || props.detailedView) {
+	if (document.getSelection().type === "Range" || props.detailedView || !expandOnNoteClick) {
 		e.stopPropagation();
 	} else {
 		router.push(notePage(appearNote));
@@ -704,7 +706,6 @@ defineExpose({
 		position: relative;
 		overflow: clip;
 		padding: 4px 32px 10px;
-		cursor: pointer;
 
 		&:first-child,
 		&:nth-child(2) {

packages/client/src/components/MkNoteDetailed.vue

@@ -534,12 +534,8 @@ onUnmounted(() => {
 
 	> .reply {
 		border-top: solid 0.5px var(--divider);
-		cursor: pointer;
 		padding-top: 24px;
 		padding-bottom: 10px;
-		@media (pointer: coarse) {
-			cursor: default;
-		}
 	}
 
 	// Hover

packages/client/src/components/MkNoteSub.vue

@@ -14,7 +14,10 @@
 		@contextmenu.stop="onContextmenu"
 	>
 		<div v-if="conversation && depth > 1" class="line"></div>
-		<div class="main" @click="noteClick">
+		<div class="main" 
+			@click="noteClick"
+			:style="{ cursor: expandOnNoteClick ? 'pointer' : '' }"
+		>
 			<div class="avatar-container">
 				<MkAvatar class="avatar" :user="appearNote.user" />
 				<div
@@ -258,6 +261,7 @@ const replies: misskey.entities.Note[] =
 		)
 		.reverse() ?? [];
 const enableEmojiReactions = defaultStore.state.enableEmojiReactions;
+const expandOnNoteClick = defaultStore.state.expandOnNoteClick;
 
 useNoteCapture({
 	rootEl: el,
@@ -397,7 +401,7 @@ function blur() {
 }
 
 function noteClick(e) {
-	if (document.getSelection().type === "Range") {
+	if (document.getSelection().type === "Range" || !expandOnNoteClick) {
 		e.stopPropagation();
 	} else {
 		router.push(notePage(props.note));
@@ -422,7 +426,6 @@ function noteClick(e) {
 
 	> .main {
 		display: flex;
-		cursor: pointer;
 
 		> .avatar-container {
 			margin-right: 8px;

packages/client/src/pages/settings/general.vue

@@ -54,6 +54,10 @@
 			<FormSwitch v-model="disablePagesScript" class="_formBlock">{{
 				i18n.ts.disablePagesScript
 			}}</FormSwitch>
+			<FormSwitch v-model="expandOnNoteClick" class="_formBlock">{{ 
+				i18n.ts.expandOnNoteClick
+			}}<template #caption>{{ i18n.ts.expandOnNoteClickDesc }}</template>
+			</FormSwitch>
 			<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock"
 				>{{ i18n.ts.flagShowTimelineReplies
 				}}<template #caption
@@ -299,6 +303,9 @@ const nsfw = computed(defaultStore.makeGetterSetter("nsfw"));
 const disablePagesScript = computed(
 	defaultStore.makeGetterSetter("disablePagesScript")
 );
+const expandOnNoteClick = computed(
+	defaultStore.makeGetterSetter("expandOnNoteClick")
+);
 const showFixedPostForm = computed(
 	defaultStore.makeGetterSetter("showFixedPostForm")
 );
@@ -366,6 +373,7 @@ watch(
 		seperateRenoteQuote,
 		showAdminUpdates,
 		autoplayMfm,
+		expandOnNoteClick,
 	],
 	async () => {
 		await reloadAsk();

packages/client/src/store.ts

@@ -162,6 +162,10 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: true,
 		},
+		expandOnNoteClick: {
+			where: "device",
+			default: true,
+		},
 		nsfw: {
 			where: "device",
 			default: "respect" as "respect" | "force" | "ignore",