Review changes

app/javascript/dashboard/i18n/locale/en/search.json

@@ -11,7 +11,9 @@
             "CONVERSATIONS": "CONVERSATIONS",
             "MESSAGES": "MESSAGES"
         },
-        "EMPTY_STATE": "No results found for this query",
+        "EMPTY_STATE": "No %{item} found for query '%{query}'",
-        "PLACEHOLDER_KEYBINDING": "/ to focus"
+        "PLACEHOLDER_KEYBINDING": "/ to focus",
+        "INPUT_PLACEHOLDER": "Search message content, contact name, email or phone or conversations",
+        "BOT_LABEL": "Bot"
     }
 }

app/javascript/dashboard/routes/dashboard/search/components/ReadMore.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="read-more">
+    <div ref="content" :class="{ content: applyReadMore }">
+      <slot />
+      <woot-button
+        size="tiny"
+        variant="smooth"
+        color-scheme="primary"
+        class="read-more-button"
+      >
+        Read more
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    applyReadMore: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  max-height: 100px;
+  overflow: hidden;
+  position: relative;
+}
+
+.content::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 100%);
+  z-index: 4;
+}
+
+.read-more-button {
+  max-width: max-content;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: 5;
+}
+</style>

app/javascript/dashboard/routes/dashboard/search/components/SearchHeader.vue

@@ -8,7 +8,7 @@
       <input
         ref="searchInput"
         type="search"
-        placeholder="Search message content, contact name, email or phone or conversations"
+        :placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
         :value="searchQuery"
         @input="debounceSearch"
       />
@@ -43,7 +43,10 @@ export default {
       }, 500);
     },
     focusSearch(e) {
-      if (e.key === '/') this.$refs.searchInput.focus();
+      if (e.key === '/') {
+        e.preventDefault();
+        this.$refs.searchInput.focus();
+      }
     },
   },
 };

app/javascript/dashboard/routes/dashboard/search/components/SearchResultContactsList.vue

@@ -2,6 +2,7 @@
   <search-result-section
     :title="$t('SEARCH.SECTION.CONTACTS')"
     :empty="!contacts.length"
+    :query="query"
   >
     <ul class="search-list">
       <li v-for="contact in contacts" :key="contact.id">
@@ -24,6 +25,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    query: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/search/components/SearchResultConversationsList.vue

@@ -2,6 +2,7 @@
   <search-result-section
     :title="$t('SEARCH.SECTION.CONVERSATIONS')"
     :empty="!conversations.length"
+    :query="query"
   >
     <ul class="search-list">
       <li v-for="conversation in conversations" :key="conversation.id">
@@ -24,6 +25,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    query: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessageItem.vue

@@ -39,12 +39,12 @@ export default {
     getThumbnail() {
       return this.message.sender && this.message.sender.thumbnail
         ? this.message.sender.thumbnail
-        : '';
+        : this.$t('SEARCH.BOT_LABEL');
     },
     getName() {
       return this.message && this.message.sender && this.message.sender.name
         ? this.message.sender.name
-        : '';
+        : this.$t('SEARCH.BOT_LABEL');
     },
   },
 };

app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessagesList.vue

@@ -2,6 +2,7 @@
   <search-result-section
     :title="$t('SEARCH.SECTION.MESSAGES')"
     :empty="!messages.length"
+    :query="query"
   >
     <ul class="search-list">
       <li v-for="message in messages" :key="message.id">
@@ -24,6 +25,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    query: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/search/components/SearchResultSection.vue

@@ -5,9 +5,9 @@
     </div>
     <slot />
     <div v-if="empty" class="empty">
-      <fluent-icon icon="info" size="32px" class="icon" />
+      <fluent-icon icon="info" size="24px" class="icon" />
       <p class="empty-state__text">
-        {{ $t('SEARCH.EMPTY_STATE') }}
+        {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
       </p>
     </div>
   </section>
@@ -24,6 +24,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    query: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    titleCase() {
+      return this.title.toLowerCase();
+    },
   },
 };
 </script>
@@ -43,13 +52,13 @@ export default {
   z-index: 50;
   border-bottom-width: 1px;
   border-top-width: 1px;
-  border-color: #dbdbdb;
+  border-color: var(--s-100);
   border-style: solid;
   border-left: 0;
   border-right: 0;
   p {
     font-size: var(--font-size-small);
-    color: var(--b-600);
+    color: var(--s-500);
     margin: 0;
   }
 }

app/javascript/dashboard/routes/dashboard/search/components/SearchView.vue

@@ -11,14 +11,17 @@
           <search-result-contacts-list
             v-if="filterContacts"
             :contacts="contacts"
+            :query="query"
           />
           <search-result-messages-list
             v-if="filterMessages"
             :messages="messages"
+            :query="query"
           />
           <search-result-conversations-list
             v-if="filterConversations"
             :conversations="conversations"
+            :query="query"
           />
         </div>
       </div>
@@ -122,6 +125,7 @@ export default {
   },
   methods: {
     search(q) {
+      this.query = q;
       this.$store.dispatch('conversationSearch/fullSearch', { q });
     },
   },