UI patches (#905)

- Show 0 clients when NT server props are undefined
- Add Prettier 

---------

Co-authored-by: Matthew Morley <matthew.morley.ca@gmail.com>

photon-client/src/components/app/photon-sidebar.vue

@@ -4,8 +4,12 @@ import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 
 const compact = computed<boolean>({
-  get: () => { return useStateStore().sidebarFolded; },
-  set: (val) => { useStateStore().setSidebarFolded(val); }
+  get: () => {
+    return useStateStore().sidebarFolded;
+  },
+  set: (val) => {
+    useStateStore().setSidebarFolded(val);
+  }
 });
 
 // Vuetify2 doesn't yet support the useDisplay API so this is required to access the prop when using the Composition API
@@ -13,39 +17,17 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
 </script>
 
 <template>
-  <v-navigation-drawer
-    dark
-    app
-    permanent
-    :mini-variant="compact || !mdAndUp"
-    color="primary"
-  >
+  <v-navigation-drawer dark app permanent :mini-variant="compact || !mdAndUp" color="primary">
     <v-list>
       <!-- List item for the heading; note that there are some tricks in setting padding and image width make things look right -->
-      <v-list-item
-        :class="(compact || !mdAndUp) ? 'pr-0 pl-0' : ''"
-        style="display: flex; justify-content: center"
-      >
+      <v-list-item :class="compact || !mdAndUp ? 'pr-0 pl-0' : ''" style="display: flex; justify-content: center">
         <v-list-item-icon class="mr-0">
-          <img
-            v-if="!(compact || !mdAndUp)"
-            class="logo"
-            src="@/assets/images/logoLarge.svg"
-            alt="large logo"
-          >
-          <img
-            v-else
-            class="logo"
-            src="@/assets/images/logoSmall.svg"
-            alt="small logo"
-          >
+          <img v-if="!(compact || !mdAndUp)" class="logo" src="@/assets/images/logoLarge.svg" alt="large logo" />
+          <img v-else class="logo" src="@/assets/images/logoSmall.svg" alt="small logo" />
         </v-list-item-icon>
       </v-list-item>
 
-      <v-list-item
-        link
-        to="/dashboard"
-      >
+      <v-list-item link to="/dashboard">
         <v-list-item-icon>
           <v-icon>mdi-view-dashboard</v-icon>
         </v-list-item-icon>
@@ -53,11 +35,7 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
           <v-list-item-title>Dashboard</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
-      <v-list-item
-        ref="camerasTabOpener"
-        link
-        to="/cameras"
-      >
+      <v-list-item ref="camerasTabOpener" link to="/cameras">
         <v-list-item-icon>
           <v-icon>mdi-camera</v-icon>
         </v-list-item-icon>
@@ -65,10 +43,7 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
           <v-list-item-title>Cameras</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
-      <v-list-item
-        link
-        to="/settings"
-      >
+      <v-list-item link to="/settings">
         <v-list-item-icon>
           <v-icon>mdi-cog</v-icon>
         </v-list-item-icon>
@@ -76,10 +51,7 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
           <v-list-item-title>Settings</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
-      <v-list-item
-        link
-        to="/docs"
-      >
+      <v-list-item link to="/docs">
         <v-list-item-icon>
           <v-icon>mdi-bookshelf</v-icon>
         </v-list-item-icon>
@@ -87,46 +59,27 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
           <v-list-item-title>Documentation</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
-      <v-list-item
-        v-if="mdAndUp"
-        link
-        @click="() => compact = !compact"
-      >
+      <v-list-item v-if="mdAndUp" link @click="() => (compact = !compact)">
         <v-list-item-icon>
-          <v-icon v-if="compact || !mdAndUp">
-            mdi-chevron-right
-          </v-icon>
-          <v-icon v-else>
-            mdi-chevron-left
-          </v-icon>
+          <v-icon v-if="compact || !mdAndUp"> mdi-chevron-right </v-icon>
+          <v-icon v-else> mdi-chevron-left </v-icon>
         </v-list-item-icon>
         <v-list-item-content>
           <v-list-item-title>Compact Mode</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
 
-      <div style="position: absolute; bottom: 0; left: 0;">
+      <div style="position: absolute; bottom: 0; left: 0">
         <v-list-item>
           <v-list-item-icon>
-            <v-icon v-if="useSettingsStore().network.runNTServer">
-              mdi-server
-            </v-icon>
-            <v-icon v-else-if="useStateStore().ntConnectionStatus.connected">
-              mdi-robot
-            </v-icon>
-            <v-icon
-              v-else
-              style="border-radius: 100%"
-            >
-              mdi-robot-off
-            </v-icon>
+            <v-icon v-if="useSettingsStore().network.runNTServer"> mdi-server </v-icon>
+            <v-icon v-else-if="useStateStore().ntConnectionStatus.connected"> mdi-robot </v-icon>
+            <v-icon v-else style="border-radius: 100%"> mdi-robot-off </v-icon>
           </v-list-item-icon>
           <v-list-item-content>
-            <v-list-item-title
-              v-if="useSettingsStore().network.runNTServer"
-              class="text-wrap"
-            >
-              NetworkTables server running for <span class="accent--text">{{ useStateStore().ntConnectionStatus.clients }}</span> clients
+            <v-list-item-title v-if="useSettingsStore().network.runNTServer" class="text-wrap">
+              NetworkTables server running for
+              <span class="accent--text">{{ useStateStore().ntConnectionStatus.clients || 0 }}</span> clients
             </v-list-item-title>
             <v-list-item-title
               v-else-if="useStateStore().ntConnectionStatus.connected && useStateStore().backendConnected"
@@ -134,17 +87,11 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
               style="flex-direction: column; display: flex"
             >
               NetworkTables Server Connected!
-              <span
-                class="accent--text"
-              >
+              <span class="accent--text">
                 {{ useStateStore().ntConnectionStatus.address }}
               </span>
             </v-list-item-title>
-            <v-list-item-title
-              v-else
-              class="text-wrap"
-              style="flex-direction: column; display: flex"
-            >
+            <v-list-item-title v-else class="text-wrap" style="flex-direction: column; display: flex">
               Not connected to NetworkTables Server!
             </v-list-item-title>
           </v-list-item-content>
@@ -152,15 +99,8 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
 
         <v-list-item>
           <v-list-item-icon>
-            <v-icon v-if="useStateStore().backendConnected">
-              mdi-server-network
-            </v-icon>
-            <v-icon
-              v-else
-              style="border-radius: 100%;"
-            >
-              mdi-server-network-off
-            </v-icon>
+            <v-icon v-if="useStateStore().backendConnected"> mdi-server-network </v-icon>
+            <v-icon v-else style="border-radius: 100%"> mdi-server-network-off </v-icon>
           </v-list-item-icon>
           <v-list-item-content>
             <v-list-item-title class="text-wrap">