From d17ac890f2b9d22986e2741e263a5239c0365214 Mon Sep 17 00:00:00 2001
From: adb-sh <git@adb.sh>
Date: Wed, 2 Nov 2022 03:25:47 +0100
Subject: [PATCH] Add sync, resources

---
 src/views/MePage.vue | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/views/MePage.vue b/src/views/MePage.vue
index d7db516..6ac01a7 100644
--- a/src/views/MePage.vue
+++ b/src/views/MePage.vue
@@ -41,13 +41,24 @@ onBeforeUnmount(() => {
           </div>
           <div class="card-body">
             <b>Host</b>
-            <div>
-              {{ session.host?.spotify.userId }}
+            <div class="my-2">
+              <img :src="session.host.images[0].url" :alt="session.host.displayName" :title="session.host.displayName" class="rounded-circle userThumbnail">
             </div>
             <b>Clients</b>
-            <div>
-              <div v-for="client in session.clients" :key="client">
-                {{ client.displayName }}
+            <div class="row">
+              <div
+                v-for="client in session.clients"
+                :key="client"
+                class="col-auto"
+              >
+                <img
+                  v-if="client.images[0]?.src"
+                  :src="client.images[0]?.src"
+                  :alt="client.displayName"
+                  :title="client.displayName"
+                  class="userThumbnail rounded-circle"
+                />
+                <i class="bi-person-circle userThumbnail" :title="client.displayName"/>
               </div>
             </div>
           </div>
@@ -70,7 +81,7 @@ onBeforeUnmount(() => {
       <template #error="{ error, update }">
         <div v-if="error.response.status === 404">
           <div class="alert alert-info">
-            You are not part of a session.
+            You are not part of any session.
           </div>
           <button
             @click="$api.createSession().then(() => update($api.getSession()))"
@@ -84,4 +95,9 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.userThumbnail {
+  height: 2rem;
+  font-size: 2rem;
+}
+</style>