From d728d66e3bc928eb743a656f4853727c90e8c44e Mon Sep 17 00:00:00 2001
From: Anthony Dumas <anthony@dumas.cc>
Date: Wed, 13 May 2026 00:23:29 +0200
Subject: [PATCH] add searchpage

---
 angular.json                          |  6 ++---
 src/app/app.html                      |  7 +++---
 src/app/app.routes.ts                 |  6 ++++-
 src/app/app.ts                        |  5 ++--
 src/app/search-box/search-box.html    |  8 ++++++
 src/app/search-box/search-box.scss    |  0
 src/app/search-box/search-box.spec.ts | 22 ++++++++++++++++
 src/app/search-box/search-box.ts      | 36 +++++++++++++++++++++++++++
 8 files changed, 79 insertions(+), 11 deletions(-)
 create mode 100644 src/app/search-box/search-box.html
 create mode 100644 src/app/search-box/search-box.scss
 create mode 100644 src/app/search-box/search-box.spec.ts
 create mode 100644 src/app/search-box/search-box.ts

diff --git a/angular.json b/angular.json
index c09b583..b65522f 100644
--- a/angular.json
+++ b/angular.json
@@ -15,7 +15,7 @@
       },
       "root": "",
       "sourceRoot": "src",
-      "prefix": "app",
+      "prefix": "sd",
       "architect": {
         "build": {
           "builder": "@angular/build:application",
@@ -29,9 +29,7 @@
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.scss"
-            ]
+            "styles": ["src/styles.scss"]
           },
           "configurations": {
             "production": {
diff --git a/src/app/app.html b/src/app/app.html
index ebdf5f6..ae148fe 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,8 +1,7 @@
 <main class="main">
+  <h1>Search Dispatcher</h1>
+  <p>Search with Intent</p>
   <div class="content">
-    <h1>Search Dispatcher</h1>
-    <p>Search with Intent</p>
+    <router-outlet />
   </div>
 </main>
-
-<router-outlet />
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..340e438 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,7 @@
 import { Routes } from '@angular/router';
+import { SearchBox } from './search-box/search-box';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', redirectTo: 'main', pathMatch: 'full' },
+  { path: 'main', component: SearchBox },
+];
diff --git a/src/app/app.ts b/src/app/app.ts
index 5ba06c8..ecd03f7 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,11 +1,12 @@
 import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { SearchBox } from './search-box/search-box';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, SearchBox],
   templateUrl: './app.html',
-  styleUrl: './app.scss'
+  styleUrl: './app.scss',
 })
 export class App {
   protected readonly title = signal('search-dispatcher');
diff --git a/src/app/search-box/search-box.html b/src/app/search-box/search-box.html
new file mode 100644
index 0000000..324ee36
--- /dev/null
+++ b/src/app/search-box/search-box.html
@@ -0,0 +1,8 @@
+<form (submit)="onSubmit($event)">
+  <label>
+    Search:
+    <input type="text" [formField]="searchForm.term" />
+  </label>
+
+  <button type="submit">Search</button>
+</form>
diff --git a/src/app/search-box/search-box.scss b/src/app/search-box/search-box.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/search-box/search-box.spec.ts b/src/app/search-box/search-box.spec.ts
new file mode 100644
index 0000000..d930b56
--- /dev/null
+++ b/src/app/search-box/search-box.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchBox } from './search-box';
+
+describe('SearchBox', () => {
+  let component: SearchBox;
+  let fixture: ComponentFixture<SearchBox>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SearchBox],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SearchBox);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/search-box/search-box.ts b/src/app/search-box/search-box.ts
new file mode 100644
index 0000000..6978f32
--- /dev/null
+++ b/src/app/search-box/search-box.ts
@@ -0,0 +1,36 @@
+import { Component, signal, ChangeDetectionStrategy, inject } from '@angular/core';
+import { form, FormField, required } from '@angular/forms/signals';
+import { Router } from '@angular/router';
+
+interface SearchObject {
+  term: string;
+  service: string;
+}
+
+@Component({
+  selector: 'sd-search-box',
+  imports: [FormField],
+  templateUrl: './search-box.html',
+  styleUrl: './search-box.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchBox {
+  private router = inject(Router);
+
+  searchModel = signal<SearchObject>({
+    term: '',
+    service: '',
+  });
+
+  searchForm = form(this.searchModel, (schemaPath) => {
+    required(schemaPath.term, { message: 'Term is required' });
+  });
+
+  onSubmit(event: Event) {
+    event.preventDefault();
+
+    const searchObject = this.searchModel();
+
+    window.location.href = `https://www.startpage.com/do/dsearch?q=${searchObject.term}`;
+  }
+}