[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({
+			const created = await makeList();
-				title: this.$ts.enterListName,
+			if (created) {
-			});
-			if (canceled) return;
-			await os.api('users/lists/create', { name: name });
 				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,12 +172,38 @@ export default defineComponent({
 		}
 	},
 
+	watch: {
+		$route() {
+			this.drawerMenuShowing = false;
+		},
+	},
+
 	created() {
 		if (window.innerWidth < 1024) {
 			localStorage.setItem('ui', 'default');
 			location.reload();
 		}
+		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;
 			});
@@ -184,9 +222,7 @@ export default defineComponent({
 			});
 		},
 
-	methods: {
 		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,9 +95,28 @@ export default defineComponent({
 		};
 	},
 
-	async created() {
+	watch: {
-		this.channel = await os.api('channels/show', { channelId: this.channelId });
+		channelId() {
+			this.connection.dispose();
+			this.$refs.tl.reload();
+			this.setup();
+		},
+	},
 
+	created() {
+		this.setup();
+	},
+
+	mounted() {
+
+	},
+
+	beforeUnmount() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		async setup() {
 			const prepend = note => {
 				(this.$refs.tl as any).prepend(note);
 
@@ -124,17 +143,9 @@ export default defineComponent({
 					...this.baseQuery
 				})
 			};
+
+			this.channel = await os.api('channels/show', { channelId: this.channelId });
 		},
-
-	mounted() {
-
-	},
-
-	beforeUnmount() {
-		this.connection.dispose();
-	},
-
-	methods: {
 		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,