Merge pull request #142 from n1lsqn/feat/directRenote

Feat: ダイレクトにリノートをできるようにする

DIFFERENCE.md

@@ -22,3 +22,4 @@
 `設定 -> クライアント設定 -> プロフィールからアクティビティとファイルを隠す`からご利用いただけます
 - Feat: フォロー通知にフォローボタンを出す [#112](https://github.com/n1lsqn/misskey/pull/122)
 - Feat: canUseHighlightをcanUseExploreに変更、canUseExploreが付与されていない場合、`/explore`を閲覧不可にする [6f56d53c52995a882c1e6bda623f26334c44ab43](https://github.com/n1lsqn/misskey/pull/138/commits/6f56d53c52995a882c1e6bda623f26334c44ab43)
+- Feat: ダイレクトにリノートをできるようにする [#142](https://github.com/n1lsqn/misskey/pull/142)

locales/index.d.ts

@@ -4244,6 +4244,14 @@ export interface Locale extends ILocale {
      * リアクションやリノートをしたことがあるノートをたたんで表示します。
      */
     "collapseRenotesDescription": string;
+    /**
+     * ダイレクトリノート
+     */
+    "directRenote": string;
+    /**
+     * メニューを表示せず、そのままリノートすることができます。引用はミートボールメニューに格納されています
+     */
+    "directRenoteDescription": string;
     /**
      * サーバー内部エラー
      */

locales/ja-JP.yml

@@ -1057,6 +1057,8 @@ thisPostMayBeAnnoyingCancel: "やめる"
 thisPostMayBeAnnoyingIgnore: "このまま投稿"
 collapseRenotes: "リノートのスマート省略"
 collapseRenotesDescription: "リアクションやリノートをしたことがあるノートをたたんで表示します。"
+directRenote: "ダイレクトリノート"
+directRenoteDescription: "メニューを表示せず、そのままリノートすることができます。引用はミートボールメニューに格納されています"
 internalServerError: "サーバー内部エラー"
 internalServerErrorDescription: "サーバー内部で予期しないエラーが発生しました。"
 copyErrorInfo: "エラー情報をコピー"

packages/frontend/src/components/MkNote.vue

@@ -203,6 +203,7 @@ import MkInstanceTickerMini from '@/components/MkInstanceTickerMini.vue';
 import { type Keymap } from '@/scripts/hotkey.js';
 import { focusPrev, focusNext } from '@/scripts/focus.js';
 import { getAppearNote } from '@/scripts/get-appear-note.js';
+import { directRenote } from '@/scripts/direct-renote';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -418,10 +419,14 @@ function renote(viaKeyboard = false) {
 	pleaseLogin(undefined, pleaseLoginContext.value);
 	showMovedDialog();
 
-	const { menu } = getRenoteMenu({ note: note.value, renoteButton, mock: props.mock });
-	os.popupMenu(menu, renoteButton.value, {
-		viaKeyboard,
-	});
+	if (defaultStore.state.directRenote) {
+		directRenote({ note: note.value, renoteButton, mock: props.mock });
+	} else {
+		const { menu } = getRenoteMenu({ note: note.value, renoteButton, mock: props.mock });
+		os.popupMenu(menu, renoteButton.value, {
+			viaKeyboard,
+		});
+	}
 }
 
 function reply(): void {

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

@@ -54,6 +54,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.collapseRenotes }}</template>
 					<template #caption>{{ i18n.ts.collapseRenotesDescription }}</template>
 				</MkSwitch>
+				<MkSwitch v-model="directRenote">
+					<template #label>
+						{{ i18n.ts.directRenote }}
+						<span class="_beta">
+							{{ "originFeature" }}
+						</span>
+					</template>
+					<template #caption>{{ i18n.ts.directRenoteDescription }}</template>
+				</MkSwitch>
 				<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
 				<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
 				<MkSwitch v-model="advancedMfm">{{ i18n.ts.enableAdvancedMfm }}</MkSwitch>
@@ -487,6 +496,7 @@ const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showC
 const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
 const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction'));
 const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
+const directRenote = computed(defaultStore.makeGetterSetter('directRenote'));
 const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
 const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
 const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
@@ -584,6 +594,7 @@ watch(useSystemFont, () => {
 });
 
 watch([
+	directRenote,
 	hemisphere,
 	lang,
 	fontSize,

packages/frontend/src/scripts/direct-quote.ts

@@ -0,0 +1,14 @@
+import * as Misskey from 'misskey-js';
+import { ShallowRef } from 'vue';
+import { getAppearNote } from './get-appear-note.js';
+import * as os from '@/os.js';
+
+export function directQuote(props: {
+	note: Misskey.entities.Note;
+	mock?: boolean;
+}) {
+	const appearNote = getAppearNote(props.note);
+	return os.post({
+		renote: appearNote,
+	});
+}

packages/frontend/src/scripts/direct-renote.ts

@@ -0,0 +1,43 @@
+import * as Misskey from 'misskey-js';
+import { ShallowRef } from 'vue';
+import { getAppearNote } from './get-appear-note.js';
+import { misskeyApi } from './misskey-api.js';
+import { smallerVisibility } from './get-note-menu.js';
+import { defaultStore } from '@/store.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+
+export function directRenote(props: {
+	note: Misskey.entities.Note;
+	renoteButton: ShallowRef<HTMLElement | undefined>;
+	mock?: boolean;
+}) {
+	const appearNote = getAppearNote(props.note);
+
+	const configuredVisibility = defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility;
+	const localOnly = defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly;
+
+	let visibility = appearNote.visibility;
+	visibility = smallerVisibility(visibility, configuredVisibility);
+
+	const el = props.renoteButton.value;
+	if (el) {
+		const rect = el.getBoundingClientRect();
+		const x = rect.left + (el.offsetWidth / 2);
+		const y = rect.top + (el.offsetHeight / 2);
+		const { dispose } = os.popup(MkRippleEffect, { x, y }, {
+			end: () => dispose(),
+		});
+	}
+
+	if (!props.mock) {
+		misskeyApi('notes/create', {
+			localOnly,
+			visibility,
+			renoteId: appearNote.id,
+		}).then(() => {
+			os.toast(i18n.ts.renoted);
+		});
+	}
+}

packages/frontend/src/scripts/get-note-menu.ts

@@ -5,7 +5,9 @@
 
 import { defineAsyncComponent, Ref, ShallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
+import { action } from '@storybook/addon-actions';
 import { claimAchievement } from './achievements.js';
+import { directQuote } from './direct-quote.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
@@ -294,7 +296,13 @@ export function getNoteMenu(props: {
 				icon: 'ti ti-info-circle',
 				text: i18n.ts.details,
 				action: openDetail,
-			}, {
+			}, (defaultStore.state.directRenote) ? {
+				icon: 'ti ti-quote',
+				text: i18n.ts.quote,
+				action: () => {
+					directQuote({ note: appearNote });
+				},
+			} : undefined, {
 				icon: 'ti ti-copy',
 				text: i18n.ts.copyContent,
 				action: copyContent,
@@ -484,7 +492,7 @@ export function getNoteMenu(props: {
 
 type Visibility = (typeof Misskey.noteVisibilities)[number];
 
-function smallerVisibility(a: Visibility, b: Visibility): Visibility {
+export function smallerVisibility(a: Visibility, b: Visibility): Visibility {
 	if (a === 'specified' || b === 'specified') return 'specified';
 	if (a === 'followers' || b === 'followers') return 'followers';
 	if (a === 'home' || b === 'home') return 'home';

packages/frontend/src/store.ts

@@ -602,6 +602,11 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: { type: 'syuilo/bubble2', volume: 1 } as SoundStore,
 	},
+
+	directRenote: {
+		where: 'device',
+		default: false,
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期
@@ -633,6 +638,7 @@ interface Watcher {
  */
 import lightTheme from '@/themes/l-light.json5';
 import darkTheme from '@/themes/d-green-lime.json5';
+import { directRenote } from './scripts/direct-renote.js';
 
 export class ColdDeviceStorage {
 	public static default = {