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

@@ -18,7 +18,6 @@ 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';
 
@@ -49,11 +48,13 @@ export default defineComponent({
 
 	methods: {
 		async create() {
-			const created = await makeList();
+			const { canceled, result: name } = await os.inputText({
-			if (created) {
+				title: this.$ts.enterListName,
-				this.$refs.list.reload();
+			});
-				os.success();
+			if (canceled) return;
-			}
+			await os.api('users/lists/create', { name: name });
+			this.$refs.list.reload();
+			os.success();
 		},
 	}
 });

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

@@ -1,11 +0,0 @@
-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,5 +1,7 @@
 <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">
@@ -39,13 +41,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="`/timeline/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="`/my/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="`/timeline/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="`/my/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">
@@ -88,18 +90,6 @@
 		<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>
@@ -107,7 +97,7 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { instanceName, url } from '@/config';
-import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
+import XSidebar from '@/ui/_common_/sidebar.vue';
 import XWidgets from './widgets.vue';
 import XCommon from '../_common_/common.vue';
 import XSide from './side.vue';
@@ -116,7 +106,6 @@ 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';
@@ -125,7 +114,7 @@ import { openAccountMenu } from '@/account';
 export default defineComponent({
 	components: {
 		XCommon,
-		XDrawerMenu,
+		XSidebar,
 		XWidgets,
 		XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
 		XHeaderClock,
@@ -149,7 +138,6 @@ export default defineComponent({
 			currentChannel: null,
 			menuDef: menuDef,
 			sideViewOpening: false,
-			drawerMenuShowing: false,
 			instanceName,
 		};
 	},
@@ -172,57 +160,33 @@ export default defineComponent({
 		}
 	},
 
-	watch: {
-		$route() {
-			this.drawerMenuShowing = false;
-		},
-	},
-
 	created() {
 		if (window.innerWidth < 1024) {
 			localStorage.setItem('ui', 'default');
 			location.reload();
 		}
-		this.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;
+		});
 	},
 
 	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];
@@ -231,11 +195,7 @@ export default defineComponent({
 		},
 
 		showMenu() {
-			this.drawerMenuShowing = true;
+			this.$refs.menu.show();
-		},
-
-		hideMenu() {
-			this.drawerMenuShowing = false;
 		},
 
 		post() {
@@ -297,28 +257,6 @@ 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: どこかに集約したい
@@ -521,23 +459,5 @@ 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,16 +95,35 @@ export default defineComponent({
 		};
 	},
 
-	watch: {
+	async created() {
-		channelId() {
+		this.channel = await os.api('channels/show', { channelId: this.channelId });
-			this.connection.dispose();
-			this.$refs.tl.reload();
-			this.setup();
-		},
-	},
 
-	created() {
+		const prepend = note => {
-		this.setup();
+			(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
+			})
+		};
 	},
 
 	mounted() {
@@ -116,36 +135,6 @@ 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();
 		},
@@ -176,12 +165,12 @@ export default defineComponent({
 		async toggleChannelFollow() {
 			if (this.channel.isFollowing) {
 				await os.apiWithDialog('channels/unfollow', {
-					channelId: this.channelId
+					channelId: this.channel.id
 				});
 				this.channel.isFollowing = false;
 			} else {
 				await os.apiWithDialog('channels/follow', {
-					channelId: this.channelId
+					channelId: this.channel.id
 				});
 				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.id : undefined,
+				channelId: this.channel ? this.channel : undefined,
 				poll: this.poll,
 				cw: this.useCw ? this.cw || '' : undefined,
 				localOnly: this.localOnly,
@@ -741,7 +741,7 @@ export default defineComponent({
 						margin-left: 0 !important;
 					}
 				}
-
+				
 				> .local-only {
 					margin: 0 0 0 12px;
 					opacity: 0.7;