[ChatUI] Fix show menu on button press

packages/client/src/pages/my-lists/index.vue

@@ -18,6 +18,7 @@ import { defineComponent } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkAvatars from '@/components/avatars.vue';
+import makeList from '@/scripts/new-list.ts';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 
@@ -48,13 +49,11 @@ export default defineComponent({
 
 	methods: {
 		async create() {
-			const { canceled, result: name } = await os.inputText({
-				title: this.$ts.enterListName,
-			});
-			if (canceled) return;
-			await os.api('users/lists/create', { name: name });
-			this.$refs.list.reload();
-			os.success();
+			const created = await makeList();
+			if (created) {
+				this.$refs.list.reload();
+				os.success();
+			}
 		},
 	}
 });

packages/client/src/scripts/new-list.ts

@@ -0,0 +1,11 @@
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+export default async function makeList() {
+  const { canceled, result: name } = await os.inputText({
+    title: i18n.locale.enterListName,
+  });
+  if (canceled) return false;
+  await os.api('users/lists/create', { name: name });
+  return true;
+}

packages/client/src/ui/chat/index.vue

@@ -1,7 +1,5 @@
 <template>
 <div class="mk-app" @contextmenu.self.prevent="onContextmenu">
-	<XSidebar ref="menu" class="menu" :default-hidden="true"/>
-
 	<div class="nav">
 		<header class="header">
 			<div class="left">
@@ -41,13 +39,13 @@
 			<div v-if="lists" class="container">
 				<div class="header">{{ $ts.lists }}<button class="_button add" @click="addList"><i class="fas fa-plus"></i></button></div>
 				<div class="body">
-					<MkA v-for="list in lists" :key="list.id" :to="`/my/list/${ list.id }`" class="item" :class="{ active: tl === `list:${ list.id }` }"><i class="fas fa-list-ul icon"></i>{{ list.name }}</MkA>
+					<MkA v-for="list in lists" :key="list.id" :to="`/timeline/list/${ list.id }`" class="item" :class="{ active: tl === `list:${ list.id }` }"><i class="fas fa-list-ul icon"></i>{{ list.name }}</MkA>
 				</div>
 			</div>
 			<div v-if="antennas" class="container">
 				<div class="header">{{ $ts.antennas }}<button class="_button add" @click="addAntenna"><i class="fas fa-plus"></i></button></div>
 				<div class="body">
-					<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/my/antenna/${ antenna.id }`" class="item" :class="{ active: tl === `antenna:${ antenna.id }` }"><i class="fas fa-satellite icon"></i>{{ antenna.name }}</MkA>
+					<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/timeline/antenna/${ antenna.id }`" class="item" :class="{ active: tl === `antenna:${ antenna.id }` }"><i class="fas fa-satellite icon"></i>{{ antenna.name }}</MkA>
 				</div>
 			</div>
 			<div class="container">
@@ -90,6 +88,18 @@
 		<XWidgets/>
 	</div>
 
+	<transition name="menu-back">
+		<div v-if="drawerMenuShowing"
+			class="menuDrawer-back _modalBg"
+			@click="hideMenu"
+			@touchstart.passive="hideMenu"
+		></div>
+	</transition>
+
+	<transition name="menu">
+		<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/>
+	</transition>
+
 	<XCommon/>
 </div>
 </template>
@@ -97,7 +107,7 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { instanceName, url } from '@/config';
-import XSidebar from '@/ui/_common_/sidebar.vue';
+import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
 import XWidgets from './widgets.vue';
 import XCommon from '../_common_/common.vue';
 import XSide from './side.vue';
@@ -106,6 +116,7 @@ import * as os from '@/os';
 import { router } from '@/router';
 import { menuDef } from '@/menu';
 import { search } from '@/scripts/search';
+import makeList from '@/scripts/new-list.ts';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { store } from './store';
 import * as symbols from '@/symbols';
@@ -114,7 +125,7 @@ import { openAccountMenu } from '@/account';
 export default defineComponent({
 	components: {
 		XCommon,
-		XSidebar,
+		XDrawerMenu,
 		XWidgets,
 		XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
 		XHeaderClock,
@@ -138,6 +149,7 @@ export default defineComponent({
 			currentChannel: null,
 			menuDef: menuDef,
 			sideViewOpening: false,
+			drawerMenuShowing: false,
 			instanceName,
 		};
 	},
@@ -160,33 +172,57 @@ export default defineComponent({
 		}
 	},
 
+	watch: {
+		$route() {
+			this.drawerMenuShowing = false;
+		},
+	},
+
 	created() {
 		if (window.innerWidth < 1024) {
 			localStorage.setItem('ui', 'default');
 			location.reload();
 		}
-
-		os.api('users/lists/list').then(lists => {
-			this.lists = lists;
-		});
-
-		os.api('antennas/list').then(antennas => {
-			this.antennas = antennas;
-		});
-
-		os.api('channels/followed', { limit: 20 }).then(channels => {
-			this.followedChannels = channels;
-		});
-
-		// TODO: pagination
-		os.api('channels/featured', { limit: 20 }).then(channels => {
-			this.featuredChannels = channels;
-		});
+		this.getSidebarContent();
 	},
 
 	methods: {
+		addChannel() {
+			this.$router.push('/channels/new');
+		},
+
+		addAntenna() {
+			this.$router.push('/my/antennas/create');
+		},
+
+		async addList() {
+			const success = await makeList();
+			if (success) {
+				os.success();
+				this.getSidebarContent();
+			}
+		},
+
+		getSidebarContent() {
+			os.api('users/lists/list').then(lists => {
+				this.lists = lists;
+			});
+
+			os.api('antennas/list').then(antennas => {
+				this.antennas = antennas;
+			});
+
+			os.api('channels/followed', { limit: 20 }).then(channels => {
+				this.followedChannels = channels;
+			});
+
+			// TODO: pagination
+			os.api('channels/featured', { limit: 20 }).then(channels => {
+				this.featuredChannels = channels;
+			});
+		},
+
 		changePage(page) {
-			console.log(page);
 			if (page == null) return;
 			if (page[symbols.PAGE_INFO]) {
 				this.pageInfo = page[symbols.PAGE_INFO];
@@ -195,7 +231,11 @@ export default defineComponent({
 		},
 
 		showMenu() {
-			this.$refs.menu.show();
+			this.drawerMenuShowing = true;
+		},
+
+		hideMenu() {
+			this.drawerMenuShowing = false;
 		},
 
 		post() {
@@ -257,6 +297,28 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.menu-enter-active,
+.menu-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menu-enter-from,
+.menu-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.menu-back-enter-active,
+.menu-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menu-back-enter-from,
+.menu-back-leave-active {
+	opacity: 0;
+}
+
 .mk-app {
 	$header-height: 54px; // TODO: どこかに集約したい
 	$ui-font-size: 1em; // TODO: どこかに集約したい
@@ -459,5 +521,23 @@ export default defineComponent({
 			}
 		}
 	}
+
+	> .menuDrawer-back {
+		z-index: 1001;
+	}
+
+	> .menuDrawer {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1005;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		width: 240px;
+		box-sizing: border-box;
+		overflow: auto;
+		overscroll-behavior: contain;
+		background: var(--bg);
+	}
 }
 </style>

packages/client/src/ui/chat/pages/channel.vue

@@ -95,35 +95,16 @@ export default defineComponent({
 		};
 	},
 
-	async created() {
-		this.channel = await os.api('channels/show', { channelId: this.channelId });
+	watch: {
+		channelId() {
+			this.connection.dispose();
+			this.$refs.tl.reload();
+			this.setup();
+		},
+	},
 
-		const prepend = note => {
-			(this.$refs.tl as any).prepend(note);
-
-			this.$emit('note');
-
-			sound.play(note.userId === this.$i.id ? 'noteMy' : 'note');
-		};
-
-		this.connection = markRaw(os.stream.useChannel('channel', {
-			channelId: this.channelId
-		}));
-		this.connection.on('note', prepend);
-		this.connection.on('typers', typers => {
-			this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers;
-		});
-
-		this.pagination = {
-			endpoint: 'channels/timeline',
-			reversed: true,
-			limit: 10,
-			params: init => ({
-				channelId: this.channelId,
-				untilDate: this.date?.getTime(),
-				...this.baseQuery
-			})
-		};
+	created() {
+		this.setup();
 	},
 
 	mounted() {
@@ -135,6 +116,36 @@ export default defineComponent({
 	},
 
 	methods: {
+		async setup() {
+			const prepend = note => {
+				(this.$refs.tl as any).prepend(note);
+
+				this.$emit('note');
+
+				sound.play(note.userId === this.$i.id ? 'noteMy' : 'note');
+			};
+
+			this.connection = markRaw(os.stream.useChannel('channel', {
+				channelId: this.channelId
+			}));
+			this.connection.on('note', prepend);
+			this.connection.on('typers', typers => {
+				this.typers = this.$i ? typers.filter(u => u.id !== this.$i.id) : typers;
+			});
+
+			this.pagination = {
+				endpoint: 'channels/timeline',
+				reversed: true,
+				limit: 10,
+				params: init => ({
+					channelId: this.channelId,
+					untilDate: this.date?.getTime(),
+					...this.baseQuery
+				})
+			};
+
+			this.channel = await os.api('channels/show', { channelId: this.channelId });
+		},
 		focus() {
 			this.$refs.body.focus();
 		},
@@ -165,12 +176,12 @@ export default defineComponent({
 		async toggleChannelFollow() {
 			if (this.channel.isFollowing) {
 				await os.apiWithDialog('channels/unfollow', {
-					channelId: this.channel.id
+					channelId: this.channelId
 				});
 				this.channel.isFollowing = false;
 			} else {
 				await os.apiWithDialog('channels/follow', {
-					channelId: this.channel.id
+					channelId: this.channelId
 				});
 				this.channel.isFollowing = true;
 			}

packages/client/src/ui/chat/post-form.vue

@@ -536,7 +536,7 @@ export default defineComponent({
 				fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
 				replyId: this.reply ? this.reply.id : undefined,
 				renoteId: this.renote ? this.renote.id : this.quoteId ? this.quoteId : undefined,
-				channelId: this.channel ? this.channel : undefined,
+				channelId: this.channel ? this.channel.id : undefined,
 				poll: this.poll,
 				cw: this.useCw ? this.cw || '' : undefined,
 				localOnly: this.localOnly,