feat(pages): add selection count UI

Author: gustavotoyota

apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplaySelectionCount.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    v-if="page.selection.react.elems.length > 0"
+    class="selection-count"
+  >
+    {{ page.selection.react.elems.length }}
+    item{{ page.selection.react.elems.length > 1 ? 's' : '' }} selected
+  </div>
+</template>
+
+<script setup lang="ts">
+const page = computed(() => internals.pages.react.page);
+</script>
+
+<style scoped lang="scss">
+.selection-count {
+  position: absolute;
+
+  bottom: 12px;
+  right: 14px;
+
+  font-size: 12px;
+  color: lighten(#006dd2, 23%);
+
+  pointer-events: none;
+}
+</style>

apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayUI.vue

@@ -11,8 +11,8 @@
   <DisplayTopBtns />
 
   <DisplayMobileAltBtn />
-
   <DisplayUserAvatars />
+  <DisplaySelectionCount />
 </template>
 
 <script setup lang="ts">
@@ -21,6 +21,7 @@ import DisplayHorizontalPath from './DisplayHorizontalPath.vue';
 import DisplayLeftBtns from './DisplayLeftBtns.vue';
 import DisplayMobileAltBtn from './DisplayMobileAltBtn.vue';
 import DisplayRightBtns from './DisplayRightBtns.vue';
+import DisplaySelectionCount from './DisplaySelectionCount.vue';
 import DisplayTopBtns from './DisplayTopBtns.vue';
 import DisplayUserAvatars from './DisplayUserAvatars.vue';
 </script>