Cleaned up search results formatting

app/controllers/dashboard.js

@@ -7,6 +7,7 @@ export default class DashboardController extends Controller {
   @service router;
   @service session;
   @service s3Upload;
+  @service search;
 
   @tracked isProfileOpen = false;
   @tracked selectedChannelId = null;
@@ -218,9 +219,13 @@ export default class DashboardController extends Controller {
   }
 
   @action
-  updateSearchText(event) {
+  async updateSearchText(event) {
     this.searchText = event.target.value;
     this.isSearchPopupVisible = this.searchText.length > 0;
+
+    if (this.searchText.length > 0) {
+      await this.search.search(this.searchText);
+    }
   }
 
   @action

app/services/search.js

@@ -0,0 +1,87 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { debounce } from '@ember/runloop';
+
+export default class SearchService extends Service {
+  @tracked userResults = [];
+  @tracked messageResults = [];
+
+  async search(term) {
+    debounce(this, this._performSearch, term, 300);
+  }
+
+  async _performSearch(term) {
+    try {
+      const [userResults, messageResults] = await Promise.all([
+        this.searchUsers(term),
+        this.searchMessages(term)
+      ]);
+
+      this.userResults = userResults.slice(0, 3);
+      this.messageResults = messageResults.slice(0, 2);
+    } catch (error) {
+      console.error('Search error:', error);
+    }
+  }
+
+  async searchUsers(term) {
+    await new Promise(resolve => setTimeout(resolve, 300));
+
+    const results = [
+      { 
+        id: '1', 
+        name: `${term.charAt(0).toUpperCase() + term.slice(1)} Anderson`, 
+        avatar: `${term.charAt(0).toUpperCase()}A` 
+      },
+      { 
+        id: '2', 
+        name: `Sarah ${term.charAt(0).toUpperCase() + term.slice(1)}son`, 
+        avatar: 'SL' 
+      },
+      { 
+        id: '3', 
+        name: `Mike ${term.charAt(0).toUpperCase() + term.slice(1)}`, 
+        avatar: 'MK' 
+      },
+      { 
+        id: '4', 
+        name: `${term.charAt(0).toUpperCase() + term.slice(1)} Parker`, 
+        avatar: `${term.charAt(0).toUpperCase()}P` 
+      }
+    ];
+
+    return results.filter(user => 
+      user.name.toLowerCase().includes(term.toLowerCase())
+    );
+  }
+
+  async searchMessages(term) {
+    await new Promise(resolve => setTimeout(resolve, 300));
+
+    const results = [
+      { 
+        id: '1', 
+        content: `Discussing the ${term} implementation with the team`,
+        user: { name: 'Sarah Lee', avatar: 'SL' },
+        timestamp: '2:30 PM'
+      },
+      { 
+        id: '2', 
+        content: `Updated the documentation for ${term} features`,
+        user: { name: 'Mike Kim', avatar: 'MK' },
+        timestamp: '1:45 PM'
+      },
+      { 
+        id: '3', 
+        content: `Question about ${term} in the new release`,
+        user: { name: 'Alex Chen', avatar: 'AC' },
+        timestamp: '11:20 AM'
+      }
+    ];
+
+    return results.filter(message => 
+      message.content.toLowerCase().includes(term.toLowerCase()) ||
+      message.user.name.toLowerCase().includes(term.toLowerCase())
+    );
+  }
+} 

app/templates/dashboard.hbs

@@ -43,8 +43,50 @@
               </svg>
             </button>
           </div>
-          <div class="p-4 h-[300px] overflow-y-auto">
-            <p class="text-gray-600">This is a search result...</p>
+          <div class="p-4 h-[420px] overflow-y-auto">
+            {{#if this.search.userResults.length}}
+              <div class="mb-4">
+                <h3 class="text-sm font-semibold text-gray-500 mb-2">Users</h3>
+                <div class="space-y-2">
+                  {{#each this.search.userResults as |user|}}
+                    <div class="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg cursor-pointer">
+                      <div class="w-8 h-8 bg-purple-200 rounded-full flex items-center justify-center text-purple-700 text-sm">
+                        {{user.avatar}}
+                      </div>
+                      <span class="text-gray-900">{{user.name}}</span>
+                    </div>
+                  {{/each}}
+                </div>
+              </div>
+
+              {{#if this.search.messageResults.length}}
+                <div class="border-b-4 border-gray-200 -mx-4"></div>
+              {{/if}}
+            {{/if}}
+
+            {{#if this.search.messageResults.length}}
+              <div class="mt-4">
+                <h3 class="text-sm font-semibold text-gray-500 mb-2">Messages</h3>
+                <div class="space-y-3">
+                  {{#each this.search.messageResults as |message|}}
+                    <div class="p-2 hover:bg-gray-100 rounded-lg cursor-pointer">
+                      <div class="flex items-center space-x-2 mb-1">
+                        <div class="w-6 h-6 bg-purple-200 rounded-full flex items-center justify-center text-purple-700 text-xs">
+                          {{message.user.avatar}}
+                        </div>
+                        <span class="text-sm font-medium text-gray-900">{{message.user.name}}</span>
+                        <span class="text-sm text-gray-500">{{message.timestamp}}</span>
+                      </div>
+                      <p class="text-sm text-gray-600 ml-8">{{message.content}}</p>
+                    </div>
+                  {{/each}}
+                </div>
+              </div>
+            {{/if}}
+
+            {{#unless (or this.search.userResults.length this.search.messageResults.length)}}
+              <p class="text-gray-500 text-center">No results found</p>
+            {{/unless}}
           </div>
         </div>
       {{/if}}