feat: support-search-in-chats

app/components/home.module.scss

@@ -62,6 +62,137 @@
     }
   }
 
+  .sidebar-search-bar {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+
+    .sidebar-search-bar-input {
+      position: relative;
+      width: 100%;
+      margin-bottom: 5px;
+
+      .search-icon {
+        position: absolute;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 16px;
+        height: 16px;
+      }
+
+      .clear-icon {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 16px;
+        height: 16px;
+      }
+
+      input {
+        text-align: left;
+        max-width: 100%;
+        width: inherit;
+        padding-left: 35px;
+        padding-right: 35px;
+      }
+    }
+
+    .search-item-total-count {
+      display: flex;
+      justify-content: space-between;
+      color: rgb(166, 166, 166);
+      font-size: 12px;
+      margin-bottom: 10px;
+      margin-top: 4px;
+      margin-left: 4px;
+      animation: slide-in ease 0.3s;
+    }
+
+    .search-result {
+
+      .search-result-item {
+        padding: 10px 14px;
+        background-color: var(--white);
+        border-radius: 10px;
+        margin-bottom: 10px;
+        box-shadow: var(--card-shadow);
+        transition: background-color 0.3s ease;
+        cursor: pointer;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        border: 2px solid transparent;
+        position: relative;
+
+        .search-item-title {
+          font-size: 14px;
+          font-weight: bolder;
+          display: block;
+          width: calc(100% - 15px);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          animation: slide-in ease 0.3s;
+        }
+
+        .search-item-text-container {
+          display: flex;
+          justify-content: space-between;
+          flex-direction: column;
+          color: rgb(166, 166, 166);
+          font-size: 12px;
+          margin-top: 8px;
+          animation: slide-in ease 0.3s;
+
+          gap: 8px;
+
+          .search-item-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            padding-left: 8px;
+          }
+        }
+
+        .search-item-info {
+          display: flex;
+          justify-content: space-between;
+          color: rgb(166, 166, 166);
+          font-size: 12px;
+          margin-top: 8px;
+          animation: slide-in ease 0.3s;
+        }
+
+        .search-item-count,
+        .search-item-date {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &:hover {
+          background-color: var(--hover-color);
+        }
+      }
+    }
+
+    .sidebar-bar-button {
+      flex-grow: 1;
+
+      &:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .sidebar-search-bar-isSearching {
+    flex: 1 1;
+    overflow: auto;
+    overflow-x: hidden;
+  }
   &:hover,
   &:active {
     .sidebar-drag {
@@ -252,6 +383,17 @@
     }
   }
 
+  .sidebar-search-bar {
+    flex-direction: column;
+
+    .sidebar-bar-button {
+      &:not(:last-child) {
+        margin-right: 0;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
   .chat-item {
     padding: 0;
     min-height: 50px;