From 8cd63568684d94f726f466dbe43d32517dc7b5ed Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Tue, 10 Dec 2024 21:03:10 +0530
Subject: [PATCH] feat: Search page

---
 .../search/components/MessageContent.vue      | 17 ++--
 .../modules/search/components/ReadMore.vue    | 55 +++---------
 .../search/components/SearchHeader.vue        | 44 ++++------
 .../components/SearchResultContactItem.vue    | 27 +++---
 .../components/SearchResultContactsList.vue   |  2 +-
 .../SearchResultConversationItem.vue          | 88 ++++++++-----------
 .../SearchResultConversationsList.vue         |  2 +-
 .../components/SearchResultMessagesList.vue   |  2 +-
 .../search/components/SearchResultSection.vue | 37 ++------
 .../modules/search/components/SearchView.vue  | 54 ++++--------
 10 files changed, 117 insertions(+), 211 deletions(-)

diff --git a/app/javascript/dashboard/modules/search/components/MessageContent.vue b/app/javascript/dashboard/modules/search/components/MessageContent.vue
index 5fb146243..0fb5eb911 100644
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/app/javascript/dashboard/modules/search/components/MessageContent.vue
@@ -73,9 +73,9 @@ export default {
 <template>
   <blockquote
     ref="messageContainer"
-    class="message border-l-2 border-slate-100 dark:border-slate-700"
+    class="border-l-2 !py-0 !px-2 !mt-2 border-n-weak dark:border-n-strong"
   >
-    <p class="header">
+    <p class="mb-1 text-n-slate-11 dark:text-n-slate-11">
       <strong class="text-slate-700 dark:text-slate-100">
         {{ author }}
       </strong>
@@ -88,23 +88,16 @@ export default {
 </template>
 
 <style scoped lang="scss">
-.message {
-  @apply py-0 px-2 mt-2;
-}
 .message-content::v-deep p,
 .message-content::v-deep li::marker {
-  @apply text-slate-700 dark:text-slate-100 mb-1;
-}
-
-.header {
-  @apply text-slate-500 dark:text-slate-300 mb-1;
+  @apply text-n-slate-11 dark:text-n-slate-11 mb-1;
 }
 
 .message-content {
-  @apply break-words text-slate-600 dark:text-slate-200;
+  @apply break-words text-n-slate-12;
 }
 
 .message-content::v-deep .searchkey--highlight {
-  @apply text-woot-600 dark:text-woot-500 text-sm font-semibold;
+  @apply text-n-blue-text dark:text-n-blue-text text-sm font-semibold;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/ReadMore.vue b/app/javascript/dashboard/modules/search/components/ReadMore.vue
index e66a54933..5c3d7e92c 100644
--- a/app/javascript/dashboard/modules/search/components/ReadMore.vue
+++ b/app/javascript/dashboard/modules/search/components/ReadMore.vue
@@ -11,53 +11,26 @@ export default {
 </script>
 
 <template>
-  <div class="read-more">
+  <div>
     <div
       :class="{
-        'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark':
-          shrink,
+        'max-h-[100px] overflow-hidden relative': shrink,
       }"
     >
       <slot />
-      <woot-button
-        v-if="shrink"
-        size="tiny"
-        variant="smooth"
-        color-scheme="primary"
-        class="read-more-button"
-        @click.prevent="$emit('expand')"
+      <div
+        class="bg-n-slate-3 rounded-md dark:bg-n-solid-3 absolute left-0 right-0 z-20 mx-auto mt-0 max-w-max bottom-2 backdrop-blur[100px]"
       >
-        {{ $t('SEARCH.READ_MORE') }}
-      </woot-button>
+        <woot-button
+          v-if="shrink"
+          size="tiny"
+          variant="smooth"
+          color-scheme="primary"
+          @click.prevent="$emit('expand')"
+        >
+          {{ $t('SEARCH.READ_MORE') }}
+        </woot-button>
+      </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-@tailwind components;
-@layer components {
-  .shrink-gradient-light {
-    background: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1) 100%
-    );
-  }
-
-  .shrink-gradient-dark {
-    background: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgb(21, 23, 24) 100%
-    );
-  }
-}
-.shrink-container {
-  @apply max-h-[100px] overflow-hidden relative;
-}
-.shrink-container::after {
-}
-.read-more-button {
-  @apply max-w-max absolute bottom-2 left-0 right-0 mx-auto mt-0 z-20 shadow-sm;
-}
-</style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchHeader.vue b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
index f31f26b75..6683315cc 100644
--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -50,9 +50,23 @@ export default {
 </script>
 
 <template>
-  <div class="input-container" :class="{ 'is-focused': isInputFocused }">
-    <div class="icon-container">
-      <fluent-icon icon="search" class="icon" aria-hidden="true" />
+  <div
+    class="input-container transition-[border-bottom] duration-[0.2s] ease-[ease-in-out] relative flex items-center py-2 px-4 h-14 gap-2 rounded-sm border border-solid"
+    :class="{
+      'border-n-brand dark:border-n-brand': isInputFocused,
+      'border-n-weak dark:border-n-strong': !isInputFocused,
+    }"
+  >
+    <div class="flex items-center">
+      <fluent-icon
+        icon="search"
+        class="icon"
+        aria-hidden="true"
+        :class="{
+          'text-n-blue-text': isInputFocused,
+          'text-n-slate-10': !isInputFocused,
+        }"
+      />
     </div>
     <input
       ref="searchInput"
@@ -68,37 +82,15 @@ export default {
       :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
       :show-close="false"
       small
-      class="helper-label"
+      class="!m-0 whitespace-nowrap !bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong"
     />
   </div>
 </template>
 
 <style lang="scss" scoped>
 .input-container {
-  transition: border-bottom 0.2s ease-in-out;
-  @apply relative flex items-center py-2 px-4 h-14 gap-2 rounded-sm border border-solid border-slate-100 dark:border-slate-800;
-
   input[type='search'] {
     @apply w-full m-0 shadow-none border-transparent active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none;
   }
-
-  &.is-focused {
-    @apply border-woot-100 dark:border-woot-600;
-
-    .icon {
-      color: var(--w-400);
-      @apply text-woot-400 dark:text-woot-500;
-    }
-  }
-}
-.icon-container {
-  @apply flex items-center;
-  .icon {
-    @apply text-slate-400;
-  }
-}
-
-.helper-label {
-  @apply m-0 whitespace-nowrap;
 }
 </style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
index 9c38bca85..8d719d8a2 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
@@ -36,34 +36,31 @@ export default {
 </script>
 
 <template>
-  <router-link :to="navigateTo" class="contact-item">
+  <router-link
+    :to="navigateTo"
+    class="flex items-center p-2 rounded-md cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3"
+  >
     <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
     <div class="ml-2 rtl:mr-2 rtl:ml-0">
-      <h5 class="text-sm name text-slate-800 dark:text-slate-200">
+      <h5 class="text-sm name text-n-slate-12 dark:text-n-slate-12">
         {{ name }}
       </h5>
       <p
-        class="m-0 text-slate-600 dark:text-slate-200 gap-1 text-sm flex items-center"
+        class="flex items-center gap-1 m-0 text-sm text-slate-600 dark:text-slate-200"
       >
-        <span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
+        <span v-if="email" class="email text-n-slate-12 dark:text-n-slate-12">{{
           email
         }}</span>
-        <span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
+        <span
+          v-if="phone"
+          class="separator text-n-slate-10 dark:text-n-slate-10"
+        >
           •
         </span>
-        <span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
+        <span v-if="phone" class="phone text-n-slate-12 dark:text-n-slate-12">
           {{ phone }}
         </span>
       </p>
     </div>
   </router-link>
 </template>
-
-<style scoped lang="scss">
-.contact-item {
-  @apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;
-}
-.contact-details {
-  @apply ml-2 rtl:mr-2 rtl:ml-0;
-}
-</style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
index 872ef1b27..6294ca701 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
@@ -43,7 +43,7 @@ export default {
     :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul v-if="contacts.length" class="search-list">
+    <ul v-if="contacts.length" class="space-y-1.5">
       <li v-for="contact in contacts" :key="contact.id">
         <SearchResultContactItem
           :id="contact.id"
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index cd4ead3ad..0c5e23728 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -56,37 +56,62 @@ export default {
 </script>
 
 <template>
-  <router-link :to="navigateTo" class="conversation-item">
-    <div class="icon-wrap">
+  <router-link
+    :to="navigateTo"
+    class="flex p-2 rounded-md cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3"
+  >
+    <div
+      class="flex items-center justify-center flex-shrink-0 w-6 h-6 rounded bg-n-brand/10 dark:bg-n-brand/40 text-n-blue-text dark:text-n-blue-text"
+    >
       <fluent-icon icon="chat-multiple" :size="14" />
     </div>
-    <div class="conversation-details">
-      <div class="meta-wrap">
+    <div class="flex-grow min-w-0 ml-2">
+      <div class="flex items-center justify-between mb-1">
         <div class="flex">
           <woot-label
-            class="conversation-id"
+            class="!bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong m-0"
             :title="`#${id}`"
             :show-close="false"
             small
           />
-          <div class="inbox-name-wrap">
-            <InboxName :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
+          <div
+            class="flex items-center justify-center h-5 ml-1 rounded bg-n-slate-3 dark:bg-n-solid-3 w-fit rtl:ml-0 rtl:mr-1"
+          >
+            <InboxName
+              :inbox="inbox"
+              class="mr-2 rtl:mr-0 rtl:ml-2 bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-11 dark:text-n-slate-11"
+            />
           </div>
         </div>
         <div>
-          <span class="created-at">{{ createdAtTime }}</span>
+          <span
+            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
+          >
+            {{ createdAtTime }}
+          </span>
         </div>
       </div>
-      <div class="user-details">
-        <h5 v-if="name" class="text-sm name text-slate-800 dark:text-slate-100">
-          <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
+      <div class="flex gap-2">
+        <h5
+          v-if="name"
+          class="m-0 text-sm text-n-slate-12 dark:text-n-slate-12"
+        >
+          <span
+            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
+          >
+            {{ $t('SEARCH.FROM') }}:
+          </span>
           {{ name }}
         </h5>
         <h5
           v-if="email"
-          class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
+          class="m-0 overflow-hidden text-sm text-n-slate-12 dark:text-n-slate-12 whitespace-nowrap text-ellipsis"
         >
-          <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
+          <span
+            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
+          >
+            {{ $t('SEARCH.EMAIL') }}:
+          </span>
           {{ email }}
         </h5>
       </div>
@@ -94,40 +119,3 @@ export default {
     </div>
   </router-link>
 </template>
-
-<style scoped lang="scss">
-.conversation-item {
-  @apply cursor-pointer flex p-2 rounded hover:bg-slate-25 dark:hover:bg-slate-800;
-}
-
-.meta-wrap {
-  @apply flex items-center justify-between mb-1;
-}
-.icon-wrap {
-  @apply w-6 h-6 flex-shrink-0  bg-woot-75 dark:bg-woot-600/50 flex items-center justify-center rounded text-woot-600 dark:text-woot-500;
-}
-
-.inbox-name-wrap {
-  @apply bg-slate-25 dark:bg-slate-800 h-5 flex justify-center items-center rounded w-fit ml-1 rtl:ml-0 rtl:mr-1;
-}
-.conversation-details {
-  @apply ml-2 flex-grow min-w-0;
-}
-
-.name {
-  @apply flex-shrink-0;
-}
-.conversation-id,
-.name,
-.email {
-  @apply m-0;
-}
-.created-at,
-.pre-text {
-  @apply text-slate-600 dark:text-slate-100 text-xs font-normal;
-}
-
-.user-details {
-  @apply flex gap-2;
-}
-</style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
index c7f369e44..82ff0b51f 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
@@ -42,7 +42,7 @@ export default {
     :show-title="showTitle || isFetching"
     :is-fetching="isFetching"
   >
-    <ul v-if="conversations.length" class="search-list">
+    <ul v-if="conversations.length" class="space-y-1.5">
       <li v-for="conversation in conversations" :key="conversation.id">
         <SearchResultConversationItem
           :id="conversation.id"
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
index 92e813e99..eea73023c 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
@@ -51,7 +51,7 @@ export default {
     :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul v-if="messages.length" class="search-list">
+    <ul v-if="messages.length" class="space-y-1.5">
       <li v-for="message in messages" :key="message.id">
         <SearchResultConversationItem
           :id="message.conversation_id"
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
index 8a417db90..a8e66da9c 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultSection.vue
@@ -31,42 +31,23 @@ export default {
 </script>
 
 <template>
-  <section class="result-section">
-    <div v-if="showTitle" class="header">
-      <h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
+  <section class="mx-0 my-2">
+    <div v-if="showTitle" class="sticky top-0 p-2 z-50 mb-0.5 bg-n-background">
+      <h3 class="text-sm text-n-slate-12">{{ title }}</h3>
     </div>
     <woot-loading-state
       v-if="isFetching"
       :message="$t('SEARCH.SEARCHING_DATA')"
     />
     <slot v-else />
-    <div v-if="empty && !isFetching" class="empty">
-      <fluent-icon icon="info" size="16px" class="icon" />
-      <p class="empty-state__text">
+    <div
+      v-if="empty && !isFetching"
+      class="flex items-center justify-center px-4 py-6 m-2 rounded-md bg-n-slate-2 dark:bg-n-solid-3"
+    >
+      <fluent-icon icon="info" size="16px" class="text-n-slate-11" />
+      <p class="mx-2 my-0 text-center text-n-slate-11">
         {{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
       </p>
     </div>
   </section>
 </template>
-
-<style scoped lang="scss">
-.result-section {
-  @apply my-2 mx-0;
-}
-.search-list {
-  @apply m-0 py-4 px-0 list-none;
-}
-.header {
-  @apply sticky top-0 p-2 z-50 bg-white dark:bg-slate-900 mb-0.5;
-}
-
-.empty {
-  @apply flex items-center justify-center py-6 px-4 m-2 bg-slate-25 dark:bg-slate-800 rounded-md;
-  .icon {
-    @apply text-slate-500 dark:text-slate-300;
-  }
-  .empty-state__text {
-    @apply text-slate-500 dark:text-slate-300 text-center my-0 mx-2;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index 9c65e10cd..36443170a 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -201,8 +201,8 @@ export default {
 </script>
 
 <template>
-  <div class="search-page">
-    <div class="page-header">
+  <div class="flex flex-col w-full bg-n-background">
+    <div class="flex p-4">
       <woot-button
         icon="chevron-left"
         variant="smooth"
@@ -213,7 +213,9 @@ export default {
         {{ $t('GENERAL_SETTINGS.BACK') }}
       </woot-button>
     </div>
-    <section class="search-root">
+    <section
+      class="flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-n-background"
+    >
       <header>
         <SearchHeader @search="onSearch" />
         <SearchTabs
@@ -223,7 +225,7 @@ export default {
           @tab-change="tab => (selectedTab = tab)"
         />
       </header>
-      <div class="search-results">
+      <div class="flex-grow h-full px-2 py-0 overflow-y-auto">
         <div v-if="showResultsSection">
           <Policy :permissions="[...rolePermissions, contactPermissions]">
             <SearchResultContactsList
@@ -259,17 +261,23 @@ export default {
             />
           </Policy>
         </div>
-        <div v-else-if="showEmptySearchResults" class="empty">
-          <fluent-icon icon="info" size="16px" class="icon" />
-          <p class="empty-state__text">
+        <div
+          v-else-if="showEmptySearchResults"
+          class="flex flex-col items-center justify-center px-4 py-6 mt-8 rounded-md"
+        >
+          <fluent-icon icon="info" size="16px" class="text-n-slate-11" />
+          <p class="m-2 text-center text-n-slate-11">
             {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
           </p>
         </div>
-        <div v-else class="text-center empty">
+        <div
+          v-else
+          class="flex flex-col items-center justify-center px-4 py-6 mt-8 text-center rounded-md"
+        >
           <p class="text-center margin-bottom-0">
-            <fluent-icon icon="search" size="24px" class="icon" />
+            <fluent-icon icon="search" size="24px" class="text-n-slate-11" />
           </p>
-          <p class="empty-state__text">
+          <p class="m-2 text-center text-n-slate-11">
             {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
           </p>
         </div>
@@ -277,29 +285,3 @@ export default {
     </section>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.search-page {
-  @apply flex flex-col w-full bg-white dark:bg-slate-900;
-}
-.page-header {
-  @apply flex p-4;
-}
-.search-root {
-  @apply flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-white dark:bg-slate-900;
-
-  .search-results {
-    @apply flex-grow h-full overflow-y-auto py-0 px-2;
-  }
-}
-
-.empty {
-  @apply flex flex-col items-center justify-center py-6 px-4 rounded-md mt-8;
-  .icon {
-    @apply text-slate-500 dark:text-slate-400;
-  }
-  .empty-state__text {
-    @apply text-center text-slate-500 dark:text-slate-400 m-2;
-  }
-}
-</style>