Refactor UserPresence view

web/src/components/UserPresenceStatusList.vue

@@ -1,13 +1,12 @@
 <template>
   <div v-if="!loading">
-    <v-divider />
+    <v-list three-line>
       <v-fade-transition group hide-on-leave appear>
-      <v-sheet
+        <v-list-item
           v-for="userPresence in userPresences"
           :key="userPresence.user.id"
+          link
         >
-        <v-list three-line>
-          <v-list-item>
           <v-list-item-avatar size="52px" style="overflow: visible">
             <v-badge
               :color="
@@ -43,41 +42,11 @@
               <span class="font-weight-medium"
                 >{{ userPresence.wifiDevices[0].apName }}
               </span>
-                <ApIcon :controller="userPresence.wifiDevices[0].controller" />
             </v-list-item-subtitle>
           </v-list-item-content>
-            <v-list-item-icon>
-              <span v-if="$vuetify.breakpoint.smAndUp" class="ml-1">
-                <v-badge
-                  color="green"
-                  bottom
-                  :content="
-                    userPresence.wifiDevices
-                      .filter(wifiDevice => wifiDevice.status === 'ONLINE')
-                      .length.toString()
-                  "
-                >
-                  <v-icon color="green">mdi-wifi</v-icon>
-                </v-badge>
-                <v-badge
-                  class="mx-4"
-                  color="grey"
-                  bottom
-                  :content="
-                    userPresence.wifiDevices
-                      .filter(wifiDevice => wifiDevice.status === 'OFFLINE')
-                      .length.toString()
-                  "
-                >
-                  <v-icon color="grey">mdi-wifi</v-icon>
-                </v-badge>
-              </span>
-            </v-list-item-icon>
         </v-list-item>
-        </v-list>
-        <v-divider />
-      </v-sheet>
       </v-fade-transition>
+    </v-list>
   </div>
   <v-list v-else>
     <v-divider />
@@ -97,11 +66,10 @@
 
 <script>
 import Avatar from './Avatar'
-import ApIcon from './ApIcon'
 
 export default {
   name: 'UserPresenceStatusList',
-  components: { Avatar, ApIcon },
+  components: { Avatar },
   props: {
     userPresences: {
       type: Array,