Minimal wrist feed icons (#96)

* Wrist feed minimal emoji icons
* Minimal feed toggle

html/src/app.js

@@ -5485,6 +5485,7 @@ CefSharp.BindObjectAsync(
     $app.data.hideLoginsFromFeed = VRCXStorage.GetBool('VRCX_hideLoginsFromFeed');
     $app.data.hideDevicesFromFeed = VRCXStorage.GetBool('VRCX_hideDevicesFromFeed');
     $app.data.vipNotifications = VRCXStorage.GetBool('VRCX_VIPNotifications');
+    $app.data.minimalFeed = VRCXStorage.GetBool('VRCX_minimalFeed');
     var saveOpenVROption = function () {
         VRCXStorage.SetBool('openVR', this.openVR);
         VRCXStorage.SetBool('openVRAlways', this.openVRAlways);
@@ -5492,6 +5493,7 @@ CefSharp.BindObjectAsync(
         VRCXStorage.SetBool('VRCX_hideLoginsFromFeed', this.hideLoginsFromFeed);
         VRCXStorage.SetBool('VRCX_hideDevicesFromFeed', this.hideDevicesFromFeed);
         VRCXStorage.SetBool('VRCX_VIPNotifications', this.vipNotifications);
+        VRCXStorage.SetBool('VRCX_minimalFeed', this.minimalFeed);
     };
     $app.watch.openVR = saveOpenVROption;
     $app.watch.openVRAlways = saveOpenVROption;
@@ -5499,6 +5501,7 @@ CefSharp.BindObjectAsync(
     $app.watch.hideLoginsFromFeed = saveOpenVROption;
     $app.watch.hideDevicesFromFeed = saveOpenVROption;
     $app.watch.vipNotifications = saveOpenVROption;
+    $app.watch.minimalFeed = saveOpenVROption;
     $app.data.isDarkMode = VRCXStorage.GetBool('isDarkMode');
     $appDarkStyle.disabled = $app.data.isDarkMode === false;
     $app.watch.isDarkMode = function () {

html/src/index.pug

@@ -509,6 +509,9 @@ html
                     div(style="font-size:12px;margin-top:5px")
                         span(style="display:inline-block;min-width:150px") Overlay notifications
                         el-switch(v-model="vipNotifications")
+                    div(style="font-size:12px;margin-top:5px")
+                        span(style="display:inline-block;min-width:150px") Minimal feed icons
+                        el-switch(v-model="minimalFeed")
                 div(style="margin-top:30px")
                     span(style="font-weight:bold") Window
                     div(style="font-size:12px;margin-top:5px")

html/src/vr.pug

@@ -15,6 +15,44 @@ html
         .x-app#x-app(style="display:none" :class="{ 'x-app-type': appType === '1' }")
             .x-container(style="flex:1")
                 .x-friend-list(ref="list" style="color:#aaa")
+                    template(v-if="VRCXStorage.GetBool('VRCX_minimalFeed')")
+                        template(v-for="feed in feeds")
+                            .x-friend-item(v-if="feed.type === 'GPS'" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
+                                .detail
+                                    span.extra
+                                        span.time {{ feed.created_at | formatDate('HH:MI') }}
+                                        | #[span.name(v-text="feed.displayName")] #[location(:location="feed.location[0]")]
+                            div(v-else-if="feed.type === 'Offline'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
+                                .detail
+                                    span.extra
+                                        span.time {{ feed.created_at | formatDate('HH:MI') }}
+                                        | #[span.name(v-text="feed.displayName")] ❌
+                            div(v-else-if="feed.type === 'Online'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
+                                .detail
+                                    span.extra
+                                        span.time {{ feed.created_at | formatDate('HH:MI') }}
+                                        | #[span.name(v-text="feed.displayName")] ✔️
+                            div(v-else-if="feed.type === 'Status'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
+                                .detail
+                                    span.extra
+                                        span.time {{ feed.created_at | formatDate('HH:MI') }}
+                                        | #[span.name(v-text="feed.displayName")] #[i.x-user-status(:class="userStatusClass(feed.status[0])")] {{feed.status[0].statusDescription}}
+                            div(v-else-if="feed.type === 'OnPlayerJoined'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
+                                .detail
+                                    span.extra
+                                        span.time {{ feed.created_at | formatDate('HH:MI') }}
+                                        | ▶️ #[span.name(v-text="feed.data")]
+                            div(v-else-if="feed.type === 'OnPlayerLeft'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
+                                .detail
+                                    span.extra
+                                        span.time {{ feed.created_at | formatDate('HH:MI') }}
+                                        | ◀️ #[span.name(v-text="feed.data")]
+                            div(v-else-if="feed.type === 'Location'" class="x-friend-item" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
+                                .detail
+                                    span.extra
+                                        span.time {{ feed.created_at | formatDate('HH:MI') }}
+                                        location(:location="feed.data")
+                    template(v-else)
                         template(v-for="feed in feeds")
                             .x-friend-item(v-if="feed.type === 'GPS'" :class="{ friend: feed.isFriend, favorite: feed.isFavorite }")
                                 .detail

html/src/vr.scss

@@ -184,11 +184,10 @@ button {
     position: relative;
     flex: none;
     padding: 10px;
-    overflow: hidden auto;
+    overflow: hidden;
 }
 
 .x-friend-list {
-    padding: 0 10px;
     overflow: hidden auto;
 }