enhance(frontend): スマホでのMkModalWindowの表示を最適化

Resolve #16158

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Feat: 画像にウォーターマークを付与できるようになりました
 - Enhance: ノートのリアクション一覧で、押せるリアクションを優先して表示できるようにするオプションを追加
 - Enhance: 全てのチャットメッセージを既読にできるように(設定→その他)
+- Enhance: ミュートした絵文字をデバイス間で同期できるように
 - Fix: ドライブファイルの選択が不安定な問題を修正
 - Fix: コントロールパネルのファイル欄などのデザインが崩れている問題を修正
 - Fix: ユーザーの検索結果を追加で読み込むことができない問題を修正

packages/frontend/src/components/MkModalWindow.vue

@@ -4,8 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
-	<div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }">
+<MkModal ref="modal" v-slot="{ type }" :preferType="deviceKind === 'smartphone' ? 'drawer' : 'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
+	<div ref="rootEl" :class="[$style.root, type === 'drawer' ? $style.asDrawer : null]" :style="{ width: type === 'drawer' ? '' : `${width}px`, height: type === 'drawer' ? '' : `min(${height}px, 100%)` }">
 		<div :class="$style.header">
 			<button v-if="withCloseButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="emit('close')"><i class="ti ti-x"></i></button>
 			<span :class="$style.title">
@@ -30,6 +30,7 @@ import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
+import { deviceKind } from '@/utility/device-kind.js';
 
 const props = withDefaults(defineProps<{
 	withOkButton?: boolean;
@@ -85,6 +86,11 @@ defineExpose({
 	@media (max-width: 500px) {
 		--root-margin: 16px;
 	}
+
+	&.asDrawer {
+		height: calc(100dvh - 30px);
+		border-radius: 0;
+	}
 }
 
 .header {

packages/frontend/src/pages/settings/mute-block.emoji-mute.vue

@@ -4,33 +4,45 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.emojis">
-	<div v-for="emoji in emojis" :key="`emojiMute-${emoji}`" :class="$style.emoji" @click="onEmojiClick($event, emoji)">
-		<MkCustomEmoji
-			v-if="emoji.startsWith(':')"
-			:name="customEmojiName(emoji)"
-			:host="customEmojiHost(emoji)"
-			:normal="true"
-			:menu="false"
-			:menuReaction="false"
-			:ignoreMuted="true"
-		/>
-		<MkEmoji
-			v-else
-			:emoji="emoji"
-			:menu="false"
-			:menuReaction="false"
-			:ignoreMuted="true"
-		></MkEmoji>
+<div class="_gaps_m">
+	<div :class="$style.emojis">
+		<div v-for="emoji in emojis" :key="`emojiMute-${emoji}`" :class="$style.emoji" @click="onEmojiClick($event, emoji)">
+			<MkCustomEmoji
+				v-if="emoji.startsWith(':')"
+				:name="customEmojiName(emoji)"
+				:host="customEmojiHost(emoji)"
+				:normal="true"
+				:menu="false"
+				:menuReaction="false"
+				:ignoreMuted="true"
+			/>
+			<MkEmoji
+				v-else
+				:emoji="emoji"
+				:menu="false"
+				:menuReaction="false"
+				:ignoreMuted="true"
+			></MkEmoji>
+		</div>
 	</div>
-</div>
 
-<MkButton primary inline @click="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+	<MkButton primary inline @click="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+
+	<hr>
+
+	<SearchMarker :keywords="['sync', 'devices']">
+		<MkSwitch :modelValue="syncEnabled" @update:modelValue="changeSyncEnabled">
+			<template #label><i class="ti ti-cloud-cog"></i> <SearchLabel>{{ i18n.ts.syncBetweenDevices }}</SearchLabel></template>
+		</MkSwitch>
+	</SearchMarker>
+</div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import type { MenuItem } from '@/types/menu';
 import MkButton from '@/components/MkButton.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
@@ -79,7 +91,23 @@ function unmute(emoji: string) {
 		unmuteEmoji(emoji);
 	});
 }
+
+const syncEnabled = ref(prefer.isSyncEnabled('mutingEmojis'));
+
+function changeSyncEnabled(value: boolean) {
+	if (value) {
+		prefer.enableSync('mutingEmojis').then((res) => {
+			if (res == null) return;
+			if (res.enabled) syncEnabled.value = true;
+		});
+	} else {
+		prefer.disableSync('mutingEmojis');
+		syncEnabled.value = false;
+	}
+}
+
 </script>
+
 <style module>
 .emojis {
 	display: flex;

packages/frontend/src/pages/settings/mute-block.vue

@@ -57,9 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #icon><i class="ti ti-mood-off"></i></template>
 					<template #label>{{ i18n.ts.emojiMute }}</template>
 
-					<div class="_gaps_m">
-						<XEmojiMute/>
-					</div>
+					<XEmojiMute/>
 				</mkfolder>
 			</SearchMarker>
 

packages/misskey-js/src/autogen/apiClientJSDoc.ts

@@ -1710,6 +1710,17 @@ declare module '../api.js' {
       credential?: string | null,
     ): Promise<SwitchCaseResponseType<E, P>>;
 
+    /**
+     * No description provided.
+     * 
+     * **Credential required**: *Yes* / **Permission**: *write:chat*
+     */
+    request<E extends 'chat/read-all', P extends Endpoints[E]['req']>(
+      endpoint: E,
+      params: P,
+      credential?: string | null,
+    ): Promise<SwitchCaseResponseType<E, P>>;
+
     /**
      * No description provided.
      * 

packages/misskey-js/src/autogen/endpoint.ts

@@ -795,6 +795,7 @@ export type Endpoints = {
 	'chat/messages/show': { req: ChatMessagesShowRequest; res: ChatMessagesShowResponse };
 	'chat/messages/unreact': { req: ChatMessagesUnreactRequest; res: EmptyResponse };
 	'chat/messages/user-timeline': { req: ChatMessagesUserTimelineRequest; res: ChatMessagesUserTimelineResponse };
+	'chat/read-all': { req: EmptyRequest; res: EmptyResponse };
 	'chat/rooms/create': { req: ChatRoomsCreateRequest; res: ChatRoomsCreateResponse };
 	'chat/rooms/delete': { req: ChatRoomsDeleteRequest; res: EmptyResponse };
 	'chat/rooms/invitations/create': { req: ChatRoomsInvitationsCreateRequest; res: ChatRoomsInvitationsCreateResponse };

packages/misskey-js/src/autogen/types.ts

@@ -1502,6 +1502,15 @@ export type paths = {
      */
     post: operations['chat___messages___user-timeline'];
   };
+  '/chat/read-all': {
+    /**
+     * chat/read-all
+     * @description No description provided.
+     *
+     * **Credential required**: *Yes* / **Permission**: *write:chat*
+     */
+    post: operations['chat___read-all'];
+  };
   '/chat/rooms/create': {
     /**
      * chat/rooms/create
@@ -15094,6 +15103,50 @@ export type operations = {
       };
     };
   };
+  /**
+   * chat/read-all
+   * @description No description provided.
+   *
+   * **Credential required**: *Yes* / **Permission**: *write:chat*
+   */
+  'chat___read-all': {
+    responses: {
+      /** @description OK (without any results) */
+      204: {
+        content: never;
+      };
+      /** @description Client error */
+      400: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Authentication error */
+      401: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Forbidden error */
+      403: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description I'm Ai */
+      418: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+      /** @description Internal server error */
+      500: {
+        content: {
+          'application/json': components['schemas']['Error'];
+        };
+      };
+    };
+  };
   /**
    * chat/rooms/create
    * @description No description provided.