enhance(client): make possible to leave a group

3 files changed, 72 insertions, 42 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94e4a4fc1e..dc6cc7d16a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - フォローエクスポートで使われていないアカウントを含めないオプションを追加
 - カスタム絵文字エクスポート機能
 - チャートのパフォーマンスの改善
+- グループから抜けられるように
 
 ### Bugfixes
 - クライアント: タッチ機能付きディスプレイを使っていてマウス操作をしている場合に一部機能が動作しない問題を修正
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index d2278df920..b76bff4a83 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -813,6 +813,8 @@ deleteAccountConfirm: "アカウントが削除されます。よろしいです
 incorrectPassword: "パスワードが間違っています。"
 voteConfirm: "「{choice}」に投票しますか？"
 hide: "隠す"
+leaveGroup: "グループから抜ける"
+leaveGroupConfirm: "「{name}」から抜けますか？"
 
 _emailUnavailable:
   used: "既に使用されています"
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index c5019a5e5b..db5ccde466 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -1,52 +1,45 @@
 <template>
-<div class="">
-	<div class="_section" style="padding: 0;">
-		<MkTab v-model="tab">
-			<option value="owned">{{ $ts.ownedGroups }}</option>
-			<option value="joined">{{ $ts.joinedGroups }}</option>
-			<option value="invites"><i class="fas fa-envelope-open-text"></i> {{ $ts.invites }}</option>
-		</MkTab>
-	</div>
+<MkSpacer :content-max="700">
+	<div v-if="tab === 'owned'" class="_content">
+		<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
 
-	<div class="_section">
-		<div v-if="tab === 'owned'" class="_content">
-			<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
+		<MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination">
+			<div v-for="group in items" :key="group.id" class="_card">
+				<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
+				<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
+			</div>
+		</MkPagination>
+	</div>
 
-			<MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination">
-				<div v-for="group in items" :key="group.id" class="_card">
-					<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
-					<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
+	<div v-else-if="tab === 'joined'" class="_content">
+		<MkPagination v-slot="{items}" ref="joined" :pagination="joinedPagination">
+			<div v-for="group in items" :key="group.id" class="_card">
+				<div class="_title">{{ group.name }}</div>
+				<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
+				<div class="_footer">
+					<MkButton danger @click="leave(group)">{{ $ts.leaveGroup }}</MkButton>
 				</div>
-			</MkPagination>
-		</div>
+			</div>
+		</MkPagination>
+	</div>
 
-		<div v-else-if="tab === 'joined'" class="_content">
-			<MkPagination v-slot="{items}" ref="joined" :pagination="joinedPagination">
-				<div v-for="group in items" :key="group.id" class="_card">
-					<div class="_title">{{ group.name }}</div>
-					<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
+	<div v-else-if="tab === 'invites'" class="_content">
+		<MkPagination v-slot="{items}" ref="invitations" :pagination="invitationPagination">
+			<div v-for="invitation in items" :key="invitation.id" class="_card">
+				<div class="_title">{{ invitation.group.name }}</div>
+				<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>
+				<div class="_footer">
+					<MkButton primary inline @click="acceptInvite(invitation)"><i class="fas fa-check"></i> {{ $ts.accept }}</MkButton>
+					<MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton>
 				</div>
-			</MkPagination>
-		</div>
-	
-		<div v-else-if="tab === 'invites'" class="_content">
-			<MkPagination v-slot="{items}" ref="invitations" :pagination="invitationPagination">
-				<div v-for="invitation in items" :key="invitation.id" class="_card">
-					<div class="_title">{{ invitation.group.name }}</div>
-					<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>
-					<div class="_footer">
-						<MkButton primary inline @click="acceptInvite(invitation)"><i class="fas fa-check"></i> {{ $ts.accept }}</MkButton>
-						<MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton>
-					</div>
-				</div>
-			</MkPagination>
-		</div>
+			</div>
+		</MkPagination>
 	</div>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkContainer from '@/components/ui/container.vue';
@@ -66,10 +59,32 @@ export default defineComponent({
 
 	data() {
 		return {
-			[symbols.PAGE_INFO]: {
+			[symbols.PAGE_INFO]: computed(() => ({
 				title: this.$ts.groups,
-				icon: 'fas fa-users'
-			},
+				icon: 'fas fa-users',
+				bg: 'var(--bg)',
+				actions: [{
+					icon: 'fas fa-plus',
+					text: this.$ts.createGroup,
+					handler: this.create,
+				}],
+				tabs: [{
+					active: this.tab === 'owned',
+					title: this.$ts.ownedGroups,
+					icon: 'fas fa-user-tie',
+					onClick: () => { this.tab = 'owned'; },
+				}, {
+					active: this.tab === 'joined',
+					title: this.$ts.joinedGroups,
+					icon: 'fas fa-id-badge',
+					onClick: () => { this.tab = 'joined'; },
+				}, {
+					active: this.tab === 'invites',
+					title: this.$ts.invites,
+					icon: 'fas fa-envelope-open-text',
+					onClick: () => { this.tab = 'invites'; },
+				},]
+			})),
 			tab: 'owned',
 			ownedPagination: {
 				endpoint: 'users/groups/owned',
@@ -111,6 +126,18 @@ export default defineComponent({
 			}).then(() => {
 				this.$refs.invitations.reload();
 			});
+		},
+		async leave(group) {
+			const { canceled } = await os.confirm({
+				type: 'warning',
+				text: this.$t('leaveGroupConfirm', { name: group.name }),
+			});
+			if (canceled) return;
+			os.apiWithDialog('users/groups/leave', {
+				groupId: group.id,
+			}).then(() => {
+				this.$refs.joined.reload();
+			});
 		}
 	}
 });