wip

packages/frontend/src/pages/chat/home.history.vue

@@ -0,0 +1,204 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<MkButton primary gradate :class="$style.start" @click="start"><i class="ti ti-plus"></i> {{ i18n.ts.startChat }}</MkButton>
+
+	<div v-if="history.length > 0" class="_gaps_s">
+		<MkA
+			v-for="item in history"
+			:key="item.id"
+			:class="[$style.message, { [$style.isMe]: item.isMe, [$style.isRead]: item.message.isRead }]"
+			class="_panel"
+			:to="item.message.toRoomId ? `/chat/room/${item.message.toRoomId}` : `/chat/user/${item.other!.id}`"
+		>
+			<MkAvatar v-if="item.other" :class="$style.messageAvatar" :user="item.other" indicator :preview="false"/>
+			<div :class="$style.messageBody">
+				<header v-if="item.message.toRoom" :class="$style.messageHeader">
+					<span :class="$style.messageHeaderName">{{ item.message.toRoom.name }}</span>
+					<MkTime :time="item.message.createdAt" :class="$style.messageHeaderTime"/>
+				</header>
+				<header v-else :class="$style.messageHeader">
+					<MkUserName :class="$style.messageHeaderName" :user="item.other!"/>
+					<MkAcct :class="$style.messageHeaderUsername" :user="item.other!"/>
+					<MkTime :time="item.message.createdAt" :class="$style.messageHeaderTime"/>
+				</header>
+				<div :class="$style.messageBodyText"><span v-if="item.isMe" :class="$style.youSaid">{{ i18n.ts.you }}:</span>{{ item.message.text }}</div>
+			</div>
+		</MkA>
+	</div>
+	<div v-if="!fetching && history.length == 0" class="_fullinfo">
+		<div>{{ i18n.ts._chat.noHistory }}</div>
+	</div>
+	<MkLoading v-if="fetching"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { ensureSignin } from '@/i.js';
+import { useRouter } from '@/router.js';
+import * as os from '@/os.js';
+import { updateCurrentAccountPartial } from '@/accounts.js';
+
+const $i = ensureSignin();
+
+const router = useRouter();
+
+const fetching = ref(true);
+const history = ref<{
+	id: string;
+	message: Misskey.entities.ChatMessage;
+	other: Misskey.entities.ChatMessage['fromUser'] | Misskey.entities.ChatMessage['toUser'] | null;
+	isMe: boolean;
+}[]>([]);
+
+function start(ev: MouseEvent) {
+	os.popupMenu([{
+		text: i18n.ts._chat.individualChat,
+		caption: i18n.ts._chat.individualChat_description,
+		icon: 'ti ti-user',
+		action: () => { startUser(); },
+	}, { type: 'divider' }, {
+		type: 'parent',
+		text: i18n.ts._chat.roomChat,
+		caption: i18n.ts._chat.roomChat_description,
+		icon: 'ti ti-users-group',
+		children: [{
+			text: i18n.ts._chat.createRoom,
+			icon: 'ti ti-plus',
+			action: () => { createRoom(); },
+		}],
+	}], ev.currentTarget ?? ev.target);
+}
+
+async function startUser() {
+	os.selectUser().then(user => {
+		router.push(`/chat/user/${user.id}`);
+	});
+}
+
+async function createRoom() {
+	const { canceled, result } = await os.inputText({
+		title: i18n.ts.name,
+		minLength: 1,
+	});
+	if (canceled) return;
+
+	const room = await misskeyApi('chat/rooms/create', {
+		name: result,
+	});
+
+	router.push(`/chat/room/${room.id}`);
+}
+
+async function fetchHistory() {
+	fetching.value = true;
+
+	const [userMessages, roomMessages] = await Promise.all([
+		misskeyApi('chat/history', { room: false }),
+		misskeyApi('chat/history', { room: true }),
+	]);
+
+	history.value = [...userMessages, ...roomMessages]
+		.toSorted((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+		.map(m => ({
+			id: m.id,
+			message: m,
+			other: m.room == null ? (m.fromUserId === $i.id ? m.toUser : m.fromUser) : null,
+			isMe: m.fromUserId === $i.id,
+		}));
+
+	fetching.value = false;
+
+	updateCurrentAccountPartial({ hasUnreadChatMessages: false });
+}
+
+onMounted(() => {
+	fetchHistory();
+});
+</script>
+
+<style lang="scss" module>
+.start {
+	margin: 0 auto;
+}
+
+.message {
+	position: relative;
+	display: flex;
+	padding: 16px 24px;
+
+	&.isRead,
+	&.isMe {
+		opacity: 0.8;
+	}
+
+	&:not(.isMe):not(.isRead) {
+		&::before {
+			content: '';
+			position: absolute;
+			top: 8px;
+			right: 8px;
+			width: 8px;
+			height: 8px;
+			border-radius: 100%;
+			background-color: var(--MI_THEME-accent);
+		}
+	}
+}
+
+.messageAvatar {
+	width: 50px;
+	height: 50px;
+	margin: 0 16px 0 0;
+}
+
+.messageBody {
+	flex: 1;
+	min-width: 0;
+}
+
+.messageHeader {
+	display: flex;
+	align-items: center;
+	margin-bottom: 2px;
+	white-space: nowrap;
+	overflow: clip;
+}
+
+.messageHeaderName {
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 1em;
+	font-weight: bold;
+}
+
+.messageHeaderUsername {
+	margin: 0 8px;
+}
+
+.messageHeaderTime {
+	margin-left: auto;
+}
+
+.messageBodyText {
+	overflow: hidden;
+	overflow-wrap: break-word;
+	font-size: 1.1em;
+}
+
+.youSaid {
+	font-weight: bold;
+	margin-right: 0.5em;
+}
+</style>

packages/frontend/src/pages/chat/home.invitations.vue

@@ -0,0 +1,96 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<div v-if="invitations.length > 0" class="_gaps_s">
+		<MkFolder v-for="invitation in invitations" :key="invitation.id" :defaultOpen="true">
+			<template #icon><i class="ti ti-users-group"></i></template>
+			<template #label>{{ invitation.room.name }}</template>
+			<template #suffix><MkTime :time="invitation.createdAt"/></template>
+			<template #footer>
+				<div class="_buttons">
+					<MkButton primary @click="join(invitation)"><i class="ti ti-plus"></i> {{ i18n.ts._chat.join }}</MkButton>
+					<MkButton danger @click="ignore(invitation)"><i class="ti ti-x"></i> {{ i18n.ts._chat.ignore }}</MkButton>
+				</div>
+			</template>
+
+			<div :class="$style.invitationBody">
+				<MkAvatar :user="invitation.room.owner" :class="$style.invitationBodyAvatar" link/>
+				<div>
+					<MkUserName :user="invitation.room.owner"/>
+				</div>
+			</div>
+		</MkFolder>
+	</div>
+	<div v-if="!fetching && invitations.length == 0" class="_fullinfo">
+		<div>{{ i18n.ts._chat.noInvitations }}</div>
+	</div>
+	<MkLoading v-if="fetching"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { ensureSignin } from '@/i.js';
+import { useRouter } from '@/router.js';
+import * as os from '@/os.js';
+import MkFolder from '@/components/MkFolder.vue';
+
+const $i = ensureSignin();
+
+const router = useRouter();
+
+const fetching = ref(true);
+const invitations = ref<Misskey.entities.ChatRoomInvitation[]>([]);
+
+async function fetchInvitations() {
+	fetching.value = true;
+
+	const res = await misskeyApi('chat/rooms/invitations/inbox', {
+	});
+
+	invitations.value = res;
+
+	fetching.value = false;
+}
+
+async function join(invitation: Misskey.entities.ChatRoomInvitation) {
+	await misskeyApi('chat/rooms/join', {
+		roomId: invitation.room.id,
+	});
+
+	router.push(`/chat/room/${invitation.room.id}`);
+}
+
+async function ignore(invitation: Misskey.entities.ChatRoomInvitation) {
+	await misskeyApi('chat/rooms/invitations/ignore', {
+		roomId: invitation.room.id,
+	});
+
+	invitations.value = invitations.value.filter(i => i.id !== invitation.id);
+}
+
+onMounted(() => {
+	fetchInvitations();
+});
+</script>
+
+<style lang="scss" module>
+.invitationBody {
+	display: flex;
+	align-items: center;
+}
+
+.invitationBodyAvatar {
+	margin-right: 12px;
+	width: 50px;
+	height: 50px;
+}
+</style>

packages/frontend/src/pages/chat/home.ownedRooms.vue

@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<div v-if="rooms.length > 0" class="_gaps_s">
+		<MkA v-for="room in rooms" :key="room.id" :to="`/chat/room/${room.id}`" class="_panel" :class="$style.room">
+			<div>{{ room.name }}</div>
+		</MkA>
+	</div>
+	<div v-if="!fetching && rooms.length == 0" class="_fullinfo">
+		<div>{{ i18n.ts._chat.noRooms }}</div>
+	</div>
+	<MkLoading v-if="fetching"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { ensureSignin } from '@/i.js';
+import { useRouter } from '@/router.js';
+import * as os from '@/os.js';
+
+const $i = ensureSignin();
+
+const router = useRouter();
+
+const fetching = ref(true);
+const rooms = ref<Misskey.entities.ChatRoom[]>([]);
+
+async function fetchRooms() {
+	fetching.value = true;
+
+	const res = await misskeyApi('chat/rooms/owned', {
+	});
+
+	rooms.value = res;
+
+	fetching.value = false;
+}
+
+onMounted(() => {
+	fetchRooms();
+});
+</script>
+
+<style lang="scss" module>
+.room {
+	padding: 16px;
+}
+</style>

packages/frontend/src/pages/chat/home.vue

@@ -4,139 +4,47 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader :actions="headerActions" :tabs="headerTabs">
+<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
 	<MkSpacer :contentMax="700">
-		<div class="_gaps">
-			<MkButton primary gradate :class="$style.start" @click="start"><i class="ti ti-plus"></i> {{ i18n.ts.startChat }}</MkButton>
-
-			<div v-if="history.length > 0" :class="$style.history">
-				<MkA
-					v-for="item in history"
-					:key="item.id"
-					:class="[$style.message, { [$style.isMe]: item.isMe, [$style.isRead]: item.message.isRead }]"
-					class="_panel"
-					:to="item.message.toRoomId ? `/chat/room/${item.message.toRoomId}` : `/chat/user/${item.other!.id}`"
-				>
-					<MkAvatar v-if="item.other" :class="$style.messageAvatar" :user="item.other" indicator :preview="false"/>
-					<div :class="$style.messageBody">
-						<header v-if="item.message.room" :class="$style.messageHeader">
-							<span :class="$style.messageHeaderName">{{ item.message.room.name }}</span>
-							<MkTime :time="item.message.createdAt" :class="$style.messageHeaderTime"/>
-						</header>
-						<header v-else :class="$style.messageHeader">
-							<MkUserName :class="$style.messageHeaderName" :user="item.other!"/>
-							<MkAcct :class="$style.messageHeaderUsername" :user="item.other!"/>
-							<MkTime :time="item.message.createdAt" :class="$style.messageHeaderTime"/>
-						</header>
-						<div :class="$style.messageBodyText"><span v-if="item.isMe" :class="$style.iSaid">{{ i18n.ts.you }}:</span>{{ item.message.text }}</div>
-					</div>
-				</MkA>
-			</div>
-			<div v-if="!fetching && history.length == 0" class="_fullinfo">
-				<div>{{ i18n.ts.noHistory }}</div>
-			</div>
-			<MkLoading v-if="fetching"/>
-		</div>
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
+			<XHistory v-if="tab === 'home'"/>
+			<XInvitations v-else-if="tab === 'invitations'"/>
+			<XOwnedRooms v-else-if="tab === 'ownedRooms'"/>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </PageWithHeader>
 </template>
 
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import MkButton from '@/components/MkButton.vue';
+import XHistory from './home.history.vue';
+import XInvitations from './home.invitations.vue';
+import XOwnedRooms from './home.ownedRooms.vue';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
-import { ensureSignin } from '@/i.js';
-import { useRouter } from '@/router.js';
-import * as os from '@/os.js';
-import { updateCurrentAccountPartial } from '@/accounts.js';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 
-const $i = ensureSignin();
-
-const router = useRouter();
-
-const fetching = ref(true);
-const history = ref<{
-	id: string;
-	message: Misskey.entities.ChatMessage;
-	other: Misskey.entities.ChatMessage['fromUser'] | Misskey.entities.ChatMessage['toUser'] | null;
-	isMe: boolean;
-}[]>([]);
-
-function start(ev: MouseEvent) {
-	os.popupMenu([{
-		text: i18n.ts._chat.individualChat,
-		caption: i18n.ts._chat.individualChat_description,
-		icon: 'ti ti-user',
-		action: () => { startUser(); },
-	}, { type: 'divider' }, {
-		text: i18n.ts._chat.roomChat,
-		caption: i18n.ts._chat.roomChat_description,
-		icon: 'ti ti-users',
-		action: () => { startRoom(); },
-	}], ev.currentTarget ?? ev.target);
-}
-
-async function startUser() {
-	os.selectUser().then(user => {
-		router.push(`/chat/user/${user.id}`);
-	});
-}
-
-async function startRoom() {
-	/*
-	const rooms1 = await os.api('users/rooms/owned');
-	const rooms2 = await os.api('users/rooms/joined');
-	if (rooms1.length === 0 && rooms2.length === 0) {
-		os.alert({
-			type: 'warning',
-			title: i18n.ts.youHaveNoGroups,
-			text: i18n.ts.joinOrCreateGroup,
-		});
-		return;
-	}
-	const { canceled, result: room } = await os.select({
-		title: i18n.ts.room,
-		items: rooms1.concat(rooms2).map(room => ({
-			value: room, text: room.name,
-		})),
-	});
-	if (canceled) return;
-	router.push(`/chat/room/${room.id}`);
-	*/
-}
-
-async function fetchHistory() {
-	fetching.value = true;
-
-	const [userMessages, roomMessages] = await Promise.all([
-		misskeyApi('chat/history', { room: false }),
-		misskeyApi('chat/history', { room: true }),
-	]);
-
-	history.value = [...userMessages, ...roomMessages]
-		.toSorted((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-		.map(m => ({
-			id: m.id,
-			message: m,
-			other: m.room == null ? (m.fromUserId === $i.id ? m.toUser : m.fromUser) : null,
-			isMe: m.fromUserId === $i.id,
-		}));
-
-	fetching.value = false;
-
-	updateCurrentAccountPartial({ hasUnreadChatMessages: false });
-}
-
-onMounted(() => {
-	fetchHistory();
-});
+const tab = ref('home');
 
 const headerActions = computed(() => []);
 
-const headerTabs = computed(() => []);
+const headerTabs = computed(() => [{
+	key: 'home',
+	title: i18n.ts._chat.history,
+	icon: 'ti ti-home',
+}, {
+	key: 'invitations',
+	title: i18n.ts._chat.invitations,
+	icon: 'ti ti-ticket',
+}, {
+	key: 'joiningRooms',
+	title: i18n.ts._chat.joiningRooms,
+	icon: 'ti ti-users-group',
+}, {
+	key: 'ownedRooms',
+	title: i18n.ts._chat.yourRooms,
+	icon: 'ti ti-settings',
+}]);
 
 definePage(() => ({
 	title: i18n.ts.chat,
@@ -145,78 +53,4 @@ definePage(() => ({
 </script>
 
 <style lang="scss" module>
-.start {
-	margin: 0 auto;
-}
-
-.message {
-	position: relative;
-	display: flex;
-	padding: 16px 24px;
-
-	&.isRead,
-	&.isMe {
-		opacity: 0.8;
-	}
-
-	&:not(.isMe):not(.isRead) {
-		&::before {
-			content: '';
-			position: absolute;
-			top: 8px;
-			right: 8px;
-			width: 8px;
-			height: 8px;
-			border-radius: 100%;
-			background-color: var(--MI_THEME-accent);
-		}
-	}
-}
-
-.messageAvatar {
-	width: 50px;
-	height: 50px;
-	margin: 0 16px 0 0;
-}
-
-.messageBody {
-	flex: 1;
-	min-width: 0;
-}
-
-.messageHeader {
-	display: flex;
-	align-items: center;
-	margin-bottom: 2px;
-	white-space: nowrap;
-	overflow: clip;
-}
-
-.messageHeaderName {
-	margin: 0;
-	padding: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-size: 1em;
-	font-weight: bold;
-}
-
-.messageHeaderUsername {
-	margin: 0 8px;
-}
-
-.messageHeaderTime {
-	margin-left: auto;
-}
-
-.messageBodyText {
-	overflow: hidden;
-	overflow-wrap: break-word;
-	font-size: 1.1em;
-}
-
-.iSaid {
-	font-weight: bold;
-	margin-right: 0.5em;
-}
 </style>

packages/frontend/src/pages/chat/room.form.vue

@@ -168,18 +168,32 @@ function send() {
 	if (!canSend.value) return;
 
 	sending.value = true;
-	misskeyApi('chat/messages/create', {
-		toUserId: props.user ? props.user.id : undefined,
-		toRoomId: props.room ? props.room.id : undefined,
-		text: text.value ? text.value : undefined,
-		fileId: file.value ? file.value.id : undefined,
-	}).then(message => {
-		clear();
-	}).catch(err => {
-		console.error(err);
-	}).then(() => {
-		sending.value = false;
-	});
+
+	if (props.user) {
+		misskeyApi('chat/messages/create-to-user', {
+			toUserId: props.user.id,
+			text: text.value ? text.value : undefined,
+			fileId: file.value ? file.value.id : undefined,
+		}).then(message => {
+			clear();
+		}).catch(err => {
+			console.error(err);
+		}).then(() => {
+			sending.value = false;
+		});
+	} else if (props.room) {
+		misskeyApi('chat/messages/create-to-room', {
+			toRoomId: props.room.id,
+			text: text.value ? text.value : undefined,
+			fileId: file.value ? file.value.id : undefined,
+		}).then(message => {
+			clear();
+		}).catch(err => {
+			console.error(err);
+		}).then(() => {
+			sending.value = false;
+		});
+	}
 }
 
 function clear() {

packages/frontend/src/pages/chat/room.vue

@@ -4,20 +4,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader reversed>
+<PageWithHeader reversed :actions="headerActions">
 	<MkSpacer :contentMax="700">
 		<div v-if="initializing">
 			<MkLoading/>
 		</div>
 		<div v-else-if="messages.length === 0">
 			<div class="_gaps" style="text-align: center;">
-				<div>{{ i18n.ts.noMessagesYet }}</div>
+				<div>{{ i18n.ts._chat.noMessagesYet }}</div>
 				<template v-if="user">
 					<div v-if="user.chatScope === 'followers'">{{ i18n.ts._chat.thisUserAllowsChatOnlyFromFollowers }}</div>
 					<div v-else-if="user.chatScope === 'following'">{{ i18n.ts._chat.thisUserAllowsChatOnlyFromFollowing }}</div>
 					<div v-else-if="user.chatScope === 'mutual'">{{ i18n.ts._chat.thisUserAllowsChatOnlyFromMutualFollowing }}</div>
 					<div v-else>{{ i18n.ts._chat.thisUserNotAllowedChatAnyone }}</div>
 				</template>
+				<template v-else-if="room">
+					<div>{{ i18n.ts._chat.inviteUserToChat }}</div>
+				</template>
 			</div>
 		</div>
 		<div v-else class="_gaps">
@@ -33,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:moveClass="prefer.s.animation ? $style.transition_x_move : ''"
 				tag="div" class="_gaps"
 			>
-				<XMessage v-for="message in messages.toReversed()" :key="message.id" :message="message" :user="message.fromUserId === $i.id ? $i : user" :isRoom="room != null"/>
+				<XMessage v-for="message in messages.toReversed()" :key="message.id" :message="message" :user="room != null ? message.fromUser : (message.fromUserId === $i.id ? $i : user)" :isRoom="room != null"/>
 			</TransitionGroup>
 		</div>
 	</MkSpacer>
@@ -61,6 +64,7 @@ import * as Misskey from 'misskey-js';
 import { isTailVisible } from '@@/js/scroll.js';
 import XMessage from './room.message.vue';
 import XForm from './room.form.vue';
+import type { MenuItem } from '@/types/menu.js';
 import * as os from '@/os.js';
 import { useStream } from '@/stream.js';
 import * as sound from '@/utility/sound.js';
@@ -84,7 +88,7 @@ const messages = ref<Misskey.entities.ChatMessage[]>([]);
 const canFetchMore = ref(false);
 const user = ref<Misskey.entities.UserDetailed | null>(null);
 const room = ref<Misskey.entities.ChatRoom | null>(null);
-const connection = ref<Misskey.ChannelConnection<Misskey.Channels['chat']> | null>(null);
+const connection = ref<Misskey.ChannelConnection<Misskey.Channels['chatUser'] | Misskey.Channels['chatRoom']> | null>(null);
 const showIndicator = ref(false);
 
 async function initialize() {
@@ -95,7 +99,7 @@ async function initialize() {
 	if (props.userId) {
 		const [u, m] = await Promise.all([
 			misskeyApi('users/show', { userId: props.userId }),
-			misskeyApi('chat/messages/timeline', { userId: props.userId, limit: LIMIT }),
+			misskeyApi('chat/messages/user-timeline', { userId: props.userId, limit: LIMIT }),
 		]);
 
 		user.value = u;
@@ -113,7 +117,7 @@ async function initialize() {
 	} else {
 		const [r, m] = await Promise.all([
 			misskeyApi('chat/rooms/show', { roomId: props.roomId }),
-			misskeyApi('chat/messages/timeline', { roomId: props.roomId, limit: LIMIT }),
+			misskeyApi('chat/messages/room-timeline', { roomId: props.roomId, limit: LIMIT }),
 		]);
 
 		room.value = r;
@@ -124,7 +128,7 @@ async function initialize() {
 		}
 
 		connection.value = useStream().useChannel('chatRoom', {
-			otherId: user.value.id,
+			roomId: room.value.id,
 		});
 		connection.value.on('message', onMessage);
 		connection.value.on('deleted', onDeleted);
@@ -145,21 +149,25 @@ onDeactivated(() => {
 	isActivated = false;
 });
 
-function fetchMore() {
+async function fetchMore() {
 	const LIMIT = 30;
 
 	moreFetching.value = true;
 
-	misskeyApi('chat/messages/timeline', {
+	const newMessages = props.userId ? await misskeyApi('chat/messages/user-timeline', {
 		userId: user.value.id,
 		limit: LIMIT,
 		untilId: messages.value[messages.value.length - 1].id,
-	}).then(newMessages => {
-		messages.value.push(...newMessages);
-
-		canFetchMore.value = newMessages.length === LIMIT;
-		moreFetching.value = false;
+	}) : await misskeyApi('chat/messages/room-timeline', {
+		roomId: room.value.id,
+		limit: LIMIT,
+		untilId: messages.value[messages.value.length - 1].id,
 	});
+
+	messages.value.push(...newMessages);
+
+	canFetchMore.value = newMessages.length === LIMIT;
+	moreFetching.value = false;
 }
 
 function onMessage(message: Misskey.entities.ChatMessage) {
@@ -208,6 +216,37 @@ onBeforeUnmount(() => {
 	window.document.removeEventListener('visibilitychange', onVisibilitychange);
 });
 
+async function inviteUser() {
+	const invitee = await os.selectUser({ includeSelf: false, localOnly: true });
+	os.apiWithDialog('chat/rooms/invitations/create', {
+		roomId: room.value?.id,
+		userId: invitee.id,
+	});
+}
+
+function showMenu(ev: MouseEvent) {
+	const menuItems: MenuItem[] = [];
+
+	if (room.value) {
+		if (room.value.ownerId === $i.id) {
+			menuItems.push({
+				text: i18n.ts._chat.inviteUser,
+				icon: 'ti ti-user-plus',
+				action: () => {
+					inviteUser();
+				},
+			});
+		}
+	}
+
+	os.popupMenu(menuItems, ev.currentTarget ?? ev.target);
+}
+
+const headerActions = computed(() => [{
+	icon: 'ti ti-dots',
+	handler: showMenu,
+}]);
+
 definePage(computed(() => !initializing.value ? user.value ? {
 	userName: user,
 	avatar: user,