From b07d037cb5b1531c38cb2d56ff612bdba5c58a3f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 26 Jul 2020 12:55:46 +0900
Subject: [PATCH] feat(client): Display instance icon

---
 src/client/widgets/federation.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index 585efb7781..e9a32b2782 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -5,8 +5,9 @@
 	<div class="wbrkwalb">
 		<mk-loading v-if="fetching"/>
 		<transition-group tag="div" name="chart" class="instances" v-else>
-			<div v-for="(instance, i) in instances" :key="instance.id">
-				<div class="instance">
+			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
+				<img :src="instance.iconUrl" alt=""/>
+				<div class="body">
 					<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
 					<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
 				</div>
@@ -75,13 +76,20 @@ export default define({
 			transition: transform 1s ease;
 		}
 
-		> div {
+		> .instance {
 			display: flex;
 			align-items: center;
 			padding: 14px 16px;
 			border-bottom: solid 1px var(--divider);
 
-			> .instance {
+			> img {
+				display: block;
+				width: 30px;
+				height: 30px;
+				object-fit: cover;
+			}
+
+			> .body {
 				flex: 1;
 				overflow: hidden;
 				font-size: 0.9em;