Hpo 134 implement design

angular.json

@@ -10,6 +10,7 @@
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:application",
+          "defaultConfiguration": "development",
           "options": {
             "aot": true,
             "outputPath": "dist/hpo-web",
@@ -39,13 +40,7 @@
                   "maximumWarning": "6kb"
                 }
               ],
-              "sourceMap": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.dev.ts"
-                }
-              ]
+              "sourceMap": true
             },
             "sqa": {
               "budgets": [

src/app/app.routes.ts

@@ -1,11 +1,13 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { NoPageFoundComponent } from './error/no-page-found.component';
+import { SearchResultsComponent } from './browser/pages/search-results/search-results.component';
 
 export const appRoutes: Routes = [
   { path: '', pathMatch: 'full', component: HomeComponent },
   { path: '', pathMatch: 'prefix', loadChildren: () => import('./static/static.routes').then(m => m.staticRoutes) },
   { path: 'app', pathMatch: 'prefix', redirectTo: '' },
+  { path: 'search', component: SearchResultsComponent },
   { path: 'browse', loadChildren: () => import('./browser/browser.routes').then(m => m.browserRoutes) },
   { path: '**', component: NoPageFoundComponent }
 ];

src/app/browser/browser.routes.ts

@@ -2,13 +2,21 @@ import { Routes } from '@angular/router';
 import { TermComponent } from './pages/term/term.component';
 import { DiseaseComponent } from './pages/disease/disease.component';
 import { GeneComponent } from './pages/gene/gene.component';
-import { SearchResultsComponent } from './pages/search-results/search-results.component';
 import { ProfileSearchComponent } from "./pages/profile-search/profile-search.component";
 
 export const browserRoutes: Routes = [
   { path: 'term/:id', component: TermComponent },
   { path: 'disease/:id', component: DiseaseComponent },
   { path: 'gene/:id', component: GeneComponent },
-  { path: 'search', component: SearchResultsComponent },
-  { path: 'profile-search', component: ProfileSearchComponent }
+  { path: 'profile-search', component: ProfileSearchComponent },
+  // Backwards compatibility: search moved to the top-level /search route.
+  // A plain string redirectTo drops query params, so this preserves q/navFilter.
+  {
+    path: 'search',
+    pathMatch: 'full',
+    redirectTo: ({ queryParams }) => {
+      const params = new URLSearchParams(queryParams as Record<string, string>).toString();
+      return params ? `/search?${params}` : '/search';
+    }
+  }
 ];

src/app/browser/pages/search-results/search-result-card/search-result-card.component.html

@@ -0,0 +1,27 @@
+<div class="flex items-start w-full">
+  <div class="flex flex-col justify-center shrink-0 w-8 pt-1">
+    <i class="pi pi-bolt text-lg text-[#16191d]"></i>
+  </div>
+
+  <p-card class="w-full !shadow-none pb-1" [pt]="{ body: { style: 'padding: 0' }, content: { style: 'padding: 0' } }">
+    <ng-template #content>
+      <div class="flex flex-col gap-1 px-2 w-full">
+        <a
+          [routerLink]="item.routerLink"
+          class="font-semibold text-base leading-6 text-[#0177b2] underline w-fit"
+        >
+          {{ item.title }}
+        </a>
+        <p class="text-base text-[#636363] my-0">{{ item.subtitle }}</p>
+        @if (item.description) {
+          <p
+            class="text-base text-[#222] leading-relaxed my-0"
+            [innerHTML]="{ name: item.description } | highlight: query"
+          ></p>
+        } @else {
+          <p class="text-base italic text-[#636363] leading-relaxed my-0">No description provided.</p>
+        }
+      </div>
+    </ng-template>
+  </p-card>
+</div>

src/app/browser/pages/search-results/search-result-card/search-result-card.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { Card } from 'primeng/card';
+import { HighlightPipe } from '../../../../shared/pipes/highlight.pipe';
+
+export interface SearchResultItem {
+  category: 'term' | 'disease' | 'gene';
+  id: string;
+  routerLink: string;
+  title: string;
+  subtitle: string;
+  matchingString: string;
+  description: string;
+}
+
+@Component({
+  selector: 'app-search-result-card',
+  standalone: true,
+  imports: [RouterLink, Card, HighlightPipe],
+  templateUrl: './search-result-card.component.html',
+})
+export class SearchResultCardComponent {
+  @Input({ required: true }) item: SearchResultItem;
+  @Input() query = '';
+}