feature: Fix RPs layout for mobile devices (#525)

src/components/desktop/desktop.vue

@@ -56,7 +56,13 @@
 </template>
 
 <script lang="ts">
-import { animateTranslate, BaseIdModal, LocationProvider, useState } from '@empathyco/x-components'
+import {
+  animateTranslate,
+  BaseIdModal,
+  LocationProvider,
+  use$x,
+  useState,
+} from '@empathyco/x-components'
 import { MainScroll, Scroll } from '@empathyco/x-components/scroll'
 import { computed, defineAsyncComponent, defineComponent } from 'vue'
 import { useHasSearched } from '../../composables/use-has-searched.composable'
@@ -91,11 +97,13 @@ export default defineComponent({
     ),
   },
   setup() {
+    const x = use$x()
     const rightAsideAnimation = animateTranslate('right')
     const { hasSearched } = useHasSearched()
     const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts'])
-
-    const showNoResultsMessage = computed(() => !relatedPrompts.value?.length)
+    const showNoResultsMessage = computed(
+      () => !relatedPrompts.value?.length && !x.semanticQueries.length,
+    )
 
     return {
       hasSearched,

src/components/main.vue

@@ -4,10 +4,10 @@
     <LocationProvider location="results">
       <Results />
     </LocationProvider>
-    <LocationProvider v-if="showRelatedPrompts" location="related_prompts">
+    <LocationProvider v-if="showRelatedPrompts" :location="semanticsLocation">
       <CustomRelatedPrompts
         :related-prompt-list="relatedPrompts"
-        :class="x.noResults ? 'desktop:x-mt-24' : 'x-mt-24 desktop:x-mt-32'"
+        :class="x.noResults ? 'desktop:x-mt-24' : 'x-mt-48 desktop:x-mt-32'"
       />
     </LocationProvider>
     <LocationProvider v-if="!showRelatedPrompts" :location="semanticsLocation">

src/components/mobile/mobile.vue

@@ -24,7 +24,11 @@
           <LocationProvider location="results">
             <SpellcheckMessage class="x-mb-16" data-test="spellcheck-message" />
           </LocationProvider>
-          <NoResultsMessage class="x-mb-16" data-test="no-results-message" />
+          <NoResultsMessage
+            v-if="showNoResultsMessage"
+            class="x-mb-16"
+            data-test="no-results-message"
+          />
           <FallbackDisclaimerMessage class="x-mb-16" data-test="fallback-message" />
         </div>
 
@@ -84,9 +88,10 @@ import {
   CloseMainModal,
   LocationProvider,
   use$x,
+  useState,
 } from '@empathyco/x-components'
 import { MainScroll, Scroll } from '@empathyco/x-components/scroll'
-import { defineAsyncComponent, defineComponent } from 'vue'
+import { computed, defineAsyncComponent, defineComponent } from 'vue'
 import { useHasSearched } from '../../composables/use-has-searched.composable'
 import MainComponent from '../main.vue'
 import MyHistoryAside from '../my-history/my-history-aside.vue'
@@ -125,15 +130,21 @@ export default defineComponent({
     ),
   },
   setup() {
+    const x = use$x()
     const filtersAsideAnimation = animateTranslate('bottom')
     const rightAsideAnimation = animateTranslate('right')
     const { hasSearched } = useHasSearched()
+    const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts'])
+    const showNoResultsMessage = computed(
+      () => !relatedPrompts.value?.length && !x.semanticQueries.length,
+    )
 
     return {
+      showNoResultsMessage,
       filtersAsideAnimation,
       rightAsideAnimation,
       hasSearched,
-      x: use$x(),
+      x,
     }
   },
 })

src/components/related-prompts/custom-related-prompts.vue

@@ -1,18 +1,21 @@
 <template>
-  <div class="x-mb-32 x-flex x-flex-col">
+  <div class="x-mb-64 x-flex x-flex-col">
     <i18n-t
-      class="x-no-results-message x-text1 x-flex x-flex-wrap x-items-center x-justify-center x-break-words x-bg-neutral-10 x-p-24 x-text-center x-text-neutral-90 desktop:x-text1-lg"
+      class="x-no-results-message x-text1 x-flex x-flex-wrap x-gap-4 x-items-center x-justify-center x-break-words x-bg-neutral-10 x-p-24 x-text-center x-text-neutral-90 desktop:x-text1-lg"
       keypath="relatedPrompts.title"
-      tag="span"
+      tag="p"
       scope="global"
     >
       <template #query>
-        <span class="x-title3 x-w-auto">{{ x.query.search }}</span>
+        <span class="x-title3 x-w-auto">"{{ x.query.search }}"</span>
+      </template>
+      <template #message>
+        <span class="x-w-auto">{{ $t('relatedPrompts.message') }}</span>
       </template>
     </i18n-t>
 
     <div class="x-flex x-flex-col">
-      <RelatedPromptsTagList class="x-mt-24" />
+      <RelatedPromptsTagList :class="isDesktopOrGreater ? 'x-mt-24' : 'x-mt-16'" />
       <CustomQueryPreview
         v-if="selectedPrompt !== -1"
         :key="queriesPreviewInfo.length"
@@ -28,6 +31,7 @@ import type { PropType } from 'vue'
 import { use$x, useState } from '@empathyco/x-components'
 import { relatedPromptsXModule } from '@empathyco/x-components/related-prompts'
 import { computed, defineComponent } from 'vue'
+import { useDevice } from '../../composables/use-device.composable'
 import CustomQueryPreview from '../search/results/custom-query-preview.vue'
 import RelatedPromptsTagList from './related-prompts-tag-list.vue'
 
@@ -47,6 +51,7 @@ export default defineComponent({
   },
   setup() {
     const x = use$x()
+    const { isDesktopOrGreater } = useDevice()
     const { relatedPrompts, selectedPrompt, selectedQuery } = useState('relatedPrompts', [
       'relatedPrompts',
       'selectedPrompt',
@@ -63,6 +68,7 @@ export default defineComponent({
     })
 
     return {
+      isDesktopOrGreater,
       queriesPreviewInfo,
       selectedPrompt,
       x,

src/components/related-prompts/related-prompts-tag-list.vue

@@ -20,14 +20,14 @@
           { 'x-hidden': shouldHideButton(index) },
           isSelected(index)
             ? 'x-w-full x-rounded-b-none'
-            : 'x-h-[112px] x-w-[204px] desktop:x-w-[303px]',
+            : 'x-min-h-[112px] x-h-full x-w-[204px] desktop:x-w-[303px]',
         ]"
         data-test="related-prompt-item"
       >
         <!-- Suggestion -->
         <button
-          class="x-flex x-flex-row x-items-start x-justify-between x-gap-12 x-px-16 x-pt-8 x-text-start x-transition-all x-duration-500"
-          :class="isSelected(index) ? 'x-w-full' : 'x-w-[204px] x-grow desktop:x-w-[303px]'"
+          class="x-flex x-flex-row x-items-start x-justify-between x-gap-12 x-p-16 x-text-start x-transition-all x-duration-500"
+          :class="[isSelected(index) ? 'x-w-full' : 'x-w-[204px] x-grow desktop:x-w-[303px]']"
           @click="toggleSuggestion(index)"
         >
           <div class="x-flex x-min-h-[32px]">
@@ -42,10 +42,8 @@
               {{ suggestion.suggestionText }}
             </span>
           </div>
-          <div :class="{ 'x-mr-8 x-mt-8': !isSelected(index) }">
-            <CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
-            <PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
-          </div>
+          <CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
+          <PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
         </button>
       </div>
     </div>

src/i18n/messages.types.ts

@@ -130,5 +130,6 @@ export interface Messages {
   }
   relatedPrompts: {
     title: string
+    message: string
   }
 }

src/i18n/messages/de.messages.json

@@ -128,7 +128,8 @@
       "reject": "Nein, ich bleibe hier"
     },
     "relatedPrompts": {
-      "title": "Sind Sie an „{query}“ interessiert? Entdecken Sie diese Vorschläge:"
+      "title": "Sind Sie an {query} interessiert?",
+      "message": "Entdecken Sie diese Vorschläge:"
     }
   },
   "mobile": {

src/i18n/messages/en.messages.json

@@ -128,7 +128,8 @@
       "reject": "No, I'll stay here"
     },
     "relatedPrompts": {
-      "title": "Are you interested in \"{query}\"? Explore this suggestions:"
+      "title": "Are you interested in {query}?",
+      "message": "Explore this suggestions:"
     }
   },
   "mobile": {

src/i18n/messages/es.messages.json

@@ -128,7 +128,8 @@
       "reject": "No, me quedaré aquí"
     },
     "relatedPrompts": {
-      "title": "¿Estás interesado en \"{query}\"? Explora estas sugerencias:"
+      "title": "¿Estás interesado en {query}?",
+      "message": "Explora estas sugerencias:"
     }
   },
   "mobile": {

src/i18n/messages/fr.messages.json

@@ -128,7 +128,8 @@
       "reject": "Non, je reste ici"
     },
     "relatedPrompts": {
-      "title": "Êtes-vous intéressé par «{query}»? Explorez ces suggestions:"
+      "title": "Êtes-vous intéressé par {query}?",
+      "message": "Explorez ces suggestions:"
     }
   },
   "mobile": {

src/i18n/messages/it.messages.json

@@ -128,7 +128,8 @@
       "reject": "No, rimango qui"
     },
     "relatedPrompts": {
-      "title": "Ti interessa \"{query}\"? Esplora questi suggerimenti:"
+      "title": "Ti interessa {query}?",
+      "message": "Esplora questi suggerimenti:"
     }
   },
   "mobile": {

src/i18n/messages/pt.messages.json

@@ -128,7 +128,8 @@
       "reject": "Não, vou ficar aqui"
     },
     "relatedPrompts": {
-      "title": "Você está interessado em \"{query}\"? Explore estas sugestões:"
+      "title": "Você está interessado em {query}?",
+      "message": "Explore estas sugestões:"
     }
   },
   "mobile": {