fix(glyphs): adjust formatting and add loader

components/tailored/messaging/enhancers/Enhancers.vue

@@ -36,11 +36,10 @@ export default Vue.extend({
       set(data: string) {
         this.$store.commit('ui/toggleEnhancers', {
           show: true,
-          floating: this.$device.isMobile ? true : false,
           route: data,
         })
-      }
-    }
+      },
+    },
   },
   watch: {
     route() {
@@ -116,7 +115,13 @@ export default Vue.extend({
       const glyphToggleElm = document.getElementById('glyph-toggle')
       const emojiToggleElm = document.getElementById('emoji-toggle')
       // @ts-ignore
-      if (!event || !(glyphToggleElm?.contains(event.target) || emojiToggleElm?.contains(event.target))) {
+      if (
+        !event ||
+        !(
+          glyphToggleElm?.contains(event.target) ||
+          emojiToggleElm?.contains(event.target)
+        )
+      ) {
         this.$store.commit('ui/toggleEnhancers', {
           show: !this.ui.enhancers.show,
           floating: this.$device.isMobile ? true : false,
@@ -130,7 +135,7 @@ export default Vue.extend({
         })
       }
     },
-     /**
+    /**
      * @method calculatePositionOnScreen
      * @description This returns a "x cordinate" to have the Enhancer window to load on the right or left screen
      * @example calculatePositionOnScreen(ui.enhancers.position[0])
@@ -151,7 +156,7 @@ export default Vue.extend({
      */
     convertRem(value: string): number {
       const fontSize = parseFloat(
-        getComputedStyle(document.documentElement).fontSize // Get the font size on the html tag, eg 16 (px), 2 (px), etc
+        getComputedStyle(document.documentElement).fontSize, // Get the font size on the html tag, eg 16 (px), 2 (px), etc
       )
       const remNumber = Number(value.replace('rem', ''))
       return remNumber * fontSize

components/tailored/messaging/enhancers/glyphs/Glyphs.html

@@ -18,12 +18,13 @@
 
       <div v-for="(pack, i) in filteredGlyphs">
         <v-responsive max-height="100%">
+          <UiLoadersLoadingInline :count="3" v-if="!pack.isActive" />
           <v-lazy
             v-model="pack.isActive"
             :options="{
               threshold: .5 
             }"
-            min-height="50"
+            min-height="30"
             transition="fade-transition"
           >
             <TailoredMessagingEnhancersGlyphsPack :key="pack.id" :pack="pack">

components/tailored/messaging/enhancers/glyphs/item/Item.html

@@ -1,2 +1,6 @@
-<div class="glyph-item" :style="getStyle()" @mouseover="mouseOver" @mouseleave="mouseLeave">
-</div>
+<div
+  class="glyph-item"
+  :style="getStyle()"
+  @mouseover="mouseOver"
+  @mouseleave="mouseLeave"
+></div>

components/tailored/messaging/enhancers/glyphs/item/Item.vue

@@ -8,12 +8,12 @@ export default Vue.extend({
   props: {
     width: {
       type: Number,
-      default: 28,
+      default: 64,
       required: false,
     },
     height: {
       type: Number,
-      default: 28,
+      default: 64,
       required: false,
     },
     src: {

components/tailored/messaging/enhancers/glyphs/item/info/Info.html

@@ -1,15 +1,11 @@
 <div class="glyph-info" v-if="ui.hoveredGlyphInfo">
   <TailoredMessagingEnhancersGlyphsItem
     :src="ui.hoveredGlyphInfo.glyphSrc"
-    :width="32"
-    :height="32"
+    :width="48"
+    :height="48"
   ></TailoredMessagingEnhancersGlyphsItem>
   <div class="glyph-pack-info">
-      <div>
-        {{ui.hoveredGlyphInfo.pack.name}}  
-      </div>
-      <div>
-        {{ui.hoveredGlyphInfo.pack.artists}}  
-      </div>
+    <div>{{ui.hoveredGlyphInfo.pack.name}}</div>
+    <div>{{ui.hoveredGlyphInfo.pack.artists}}</div>
   </div>
-</div>
+</div>

components/tailored/messaging/enhancers/glyphs/item/info/Info.less

@@ -1,15 +1,16 @@
 .glyph-info {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 3rem;
-    display: flex;
-    align-items: center;
-    background: @dark-gradient;
-    font-size: 0.75rem;
-    padding: @light-spacing;
-    .glyph-pack-info {
-        margin-left: @normal-spacing;
-    }
-}
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4.5rem;
+  display: flex;
+  align-items: center;
+  background: @dark-gradient;
+  font-size: 1rem;
+  padding: @light-spacing;
+  pointer-events: none;
+  .glyph-pack-info {
+    margin-left: @normal-spacing;
+  }
+}

components/tailored/messaging/enhancers/glyphs/mostUsed/MostUsed.html

@@ -1,10 +1,11 @@
 <div class="pack-group">
-  <div class="pack-title">
+  <div class="pack-title" @click="togglePack">
     <image-icon size="1x" />
     <span>Most Used</span>
-    <chevron-down-icon size="1x" />
+    <chevron-down-icon size="1x" v-if="isOpen" />
+    <chevron-up-icon size="1x" v-if="!isOpen" />
   </div>
-  <div class="glyph-list-box">
+  <div class="glyph-list-box" v-if="isOpen">
     <TailoredMessagingEnhancersGlyphsItem
       v-for="pack in $mock.glyphs"
       :key="pack.id"

components/tailored/messaging/enhancers/glyphs/mostUsed/MostUsed.less

@@ -0,0 +1,3 @@
+.pack-group {
+  min-height: 30px;
+}

components/tailored/messaging/enhancers/glyphs/mostUsed/MostUsed.vue

@@ -2,15 +2,27 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import { ChevronDownIcon, ImageIcon } from 'satellite-lucide-icons'
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ImageIcon,
+} from 'satellite-lucide-icons'
 
 export default Vue.extend({
   components: {
     ChevronDownIcon,
+    ChevronUpIcon,
     ImageIcon,
   },
   data() {
-    return {}
+    return {
+      isOpen: true,
+    }
+  },
+  methods: {
+    togglePack() {
+      this.isOpen = !this.isOpen
+    },
   },
 })
 </script>

components/tailored/messaging/enhancers/glyphs/nav/Nav.html

@@ -3,12 +3,12 @@
     <div class="timer" @click="() => {$emit('navSelected', '')}">
       <clock-icon class="control-icon" size="1x" />
     </div>
-    <div v-for="user in $mock.unreads" :data-tooltip="user.name">
-      <UiCircle type="random" :size="28" :seed="user.address" />
-    </div>
   </div>
   <div class="pack-list">
-    <div v-for="pack in $mock.glyphs" @click="() => {$emit('navSelected', pack.name)}">
+    <div
+      v-for="pack in $mock.glyphs"
+      @click="() => {$emit('navSelected', pack.name)}"
+    >
       <TailoredMessagingEnhancersGlyphsItem
         :key="pack.id"
         :src="pack.stickerURLs[0]"

components/tailored/messaging/enhancers/glyphs/nav/Nav.less

@@ -1,31 +1,36 @@
 #glyphs-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .account-list {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    .account-list {
-        display: flex;
-        align-items: center;
-        .timer {
-            cursor: pointer;
-            margin-right: @light-spacing;
-            background: @semitransparent-dark-gradient;
-            padding: @xlight-spacing @light-spacing;
-            border-radius: @corner-rounding;
-        }
+    .timer {
+      cursor: pointer;
+      margin-right: @light-spacing;
+      background: @semitransparent-dark-gradient;
+      padding: @xlight-spacing @light-spacing;
+      border-radius: @corner-rounding;
     }
-    .pack-list {
-        border-left: @mini-light-border;
-        border-right: @mini-light-border;
-        padding: 0 @light-spacing;
-        display: flex;
-        align-items: center;
-        flex-grow: 1;
-    }
-    .glyph-item, .circle {
-        margin-right: @light-spacing;
-    }
-    .market-place {
-        cursor: pointer;
-        padding: 0 @light-spacing;
+  }
+  .pack-list {
+    border-left: @mini-light-border;
+    border-right: @mini-light-border;
+    padding: 0 @light-spacing;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    overflow-x: auto;
+    &::-webkit-scrollbar {
+      display: none;
     }
-}
+  }
+  .glyph-item,
+  .circle {
+    margin-right: @light-spacing;
+  }
+  .market-place {
+    cursor: pointer;
+    padding: 0 @light-spacing;
+  }
+}

components/tailored/messaging/enhancers/glyphs/pack/Pack.html

@@ -1,10 +1,11 @@
 <div class="pack-group">
-  <div class="pack-title">
+  <div class="pack-title" @click="togglePack">
     <image-icon size="1x" />
     <span>{{ pack.name }}</span>
-    <chevron-down-icon size="1x" />
+    <chevron-down-icon size="1x" v-if="isOpen" />
+    <chevron-up-icon size="1x" v-if="!isOpen" />
   </div>
-  <div class="glyph-list-box">
+  <div class="glyph-list-box" v-if="isOpen">
     <TailoredMessagingEnhancersGlyphsItem
       v-for="glyph in pack.stickerURLs"
       :key="glyph"

components/tailored/messaging/enhancers/glyphs/pack/Pack.less

@@ -1,15 +1,18 @@
 .pack-group {
   margin-top: @light-spacing;
   .pack-title {
-      cursor: pointer;
-      padding-left: @light-spacing;
-      span {
-          margin: 0 @light-spacing;
-      }
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding-left: @light-spacing;
+    span {
+      margin: 0 @light-spacing;
+    }
   }
   .glyph-list-box {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+    gap: 1rem;
     margin-top: @light-spacing;
     .glyph-item {
       margin: 0 @light-spacing @light-spacing 0;

components/tailored/messaging/enhancers/glyphs/pack/Pack.vue

@@ -2,12 +2,17 @@
 <script lang="ts">
 // eslint-disable-next-line import/named
 import Vue, { PropType } from 'vue'
-import { ChevronDownIcon, ImageIcon } from 'satellite-lucide-icons'
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ImageIcon,
+} from 'satellite-lucide-icons'
 import { Glyph } from '~/types/ui/glyph'
 
 export default Vue.extend({
   components: {
     ChevronDownIcon,
+    ChevronUpIcon,
     ImageIcon,
   },
   props: {
@@ -21,6 +26,11 @@ export default Vue.extend({
       isOpen: true,
     }
   },
+  methods: {
+    togglePack() {
+      this.isOpen = !this.isOpen
+    },
+  },
 })
 </script>
 <style lang="less" src="./Pack.less"></style>