:art:

4 files changed, 41 insertions, 3 deletions

diff --git a/src/client/app/common/views/components/avatars.vue b/src/client/app/common/views/components/avatars.vue
new file mode 100644
index 0000000000..0dc1ece3bf
--- /dev/null
+++ b/src/client/app/common/views/components/avatars.vue
@@ -0,0 +1,27 @@
+<template>
+<div>
+	<mk-avatar v-for="user in us" :user="user" :key="user.id" style="width:32px;height:32px;"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		userIds: {
+			required: true
+		},
+	},
+	data() {
+		return {
+			us: []
+		};
+	},
+	async created() {
+		this.us = await this.$root.api('users/show', {
+			userIds: this.userIds
+		});
+	}
+});
+</script>
diff --git a/src/client/app/common/views/components/forkit.vue b/src/client/app/common/views/components/forkit.vue
index d652b846a4..328e3ca7b0 100644
--- a/src/client/app/common/views/components/forkit.vue
+++ b/src/client/app/common/views/components/forkit.vue
@@ -19,7 +19,6 @@ export default Vue.extend({
 });
 </script>
 
-
 <style lang="stylus" scoped>
 .a
 	display block
diff --git a/src/client/app/common/views/pages/user-groups.vue b/src/client/app/common/views/pages/user-groups.vue
index aba16df7b8..2fee46c3a1 100644
--- a/src/client/app/common/views/pages/user-groups.vue
+++ b/src/client/app/common/views/pages/user-groups.vue
@@ -9,6 +9,7 @@
 			<ui-hr/>
 			<ui-margin>
 				<router-link :to="`/i/groups/${group.id}`">{{ group.name }}</router-link>
+				<x-avatars :user-ids="group.userIds" style="margin-top:8px;"/>
 			</ui-margin>
 		</div>
 	</ui-container>
@@ -18,7 +19,8 @@
 		<div class="hwgkdrbl" v-for="(group, i) in joinedGroups" :key="group.id">
 			<ui-hr v-if="i != 0"/>
 			<ui-margin>
-				<router-link :to="`/i/groups/${group.id}`">{{ group.name }}</router-link>
+				<div>{{ group.name }}</div>
+				<x-avatars :user-ids="group.userIds" style="margin-top:8px;"/>
 			</ui-margin>
 		</div>
 	</ui-container>
@@ -29,6 +31,7 @@
 			<ui-hr v-if="i != 0"/>
 			<ui-margin>
 				<div class="name">{{ invite.group.name }}</div>
+				<x-avatars :user-ids="invite.group.userIds" style="margin-top:8px;"/>
 				<ui-horizon-group>
 					<ui-button @click="acceptInvite(invite)"><fa :icon="faCheck"/> {{ $t('accept-invite') }}</ui-button>
 					<ui-button @click="rejectInvite(invite)"><fa :icon="faBan"/> {{ $t('reject-invite') }}</ui-button>
@@ -41,11 +44,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
 import { faUsers, faPlus, faCheck, faBan, faEnvelopeOpenText } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../../i18n';
+import XAvatars from '../../views/components/avatars.vue';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/user-groups.vue'),
+	components: {
+		XAvatars
+	},
 	data() {
 		return {
 			ownedGroups: [],
diff --git a/src/client/app/common/views/pages/user-lists.vue b/src/client/app/common/views/pages/user-lists.vue
index 4c09eca6ce..29085935cb 100644
--- a/src/client/app/common/views/pages/user-lists.vue
+++ b/src/client/app/common/views/pages/user-lists.vue
@@ -8,6 +8,7 @@
 		<ui-hr/>
 		<ui-margin>
 			<router-link :to="`/i/lists/${list.id}`">{{ list.name }}</router-link>
+			<x-avatars :user-ids="list.userIds" style="margin-top:8px;"/>
 		</ui-margin>
 	</div>
 </ui-container>
@@ -17,9 +18,13 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import { faListUl, faPlus } from '@fortawesome/free-solid-svg-icons';
+import XAvatars from '../../views/components/avatars.vue';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/user-lists.vue'),
+	components: {
+		XAvatars
+	},
 	data() {
 		return {
 			fetching: true,