Add frontend mock-up.

cnuahs · cnuahs · commit 98220169dca4 · 2024-11-08T15:19:10.000+11:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,12 +30,15 @@
     "@angular/compiler-cli": "^18.2.0",
     "@types/chrome": "^0.0.280",
     "@types/jasmine": "~5.1.0",
+    "autoprefixer": "^10.4.20",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "typescript": "~5.5.2"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/app/app.component.html b/src/app/app.component.html
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -1,3 +1,10 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+import { HomeComponent } from './home/home.component';
+import { SettingsComponent } from './settings/settings.component';
+
+export const routes: Routes = [
+    { path: '', title: 'Home', component: HomeComponent},
+    { path: 'settings', title: 'Settings', component: SettingsComponent },
+    { path: '', redirectTo: '/home', pathMatch: 'full' }
+];
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -0,0 +1,56 @@
+<div class="h-full flex flex-col">
+    <div class="w-full h-10 p-1 px-2 space-x-2 bg-cyan-500 flex flex-row">
+        <div>
+            <img src="icon128.png" class="h-full">
+        </div>
+        <div class="relative grow">
+            <input class="w-full h-full pr-4 pl-8 bg-cyan-600 font-sans text-lg placeholder:text-cyan-400 text-white rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow" placeholder="Search browsing history">
+            <div class="absolute left-0 top-0 rounded bg-transparent p-1.5 text-center text-cyan-400 transition-all shadow-sm hover:shadow focus:shadow-none active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">
+                <!-- https://cdn.jsdelivr.net/npm/heroicons@2.1.3/24/outline/magnifying-glass.svg -->
+                <svg viewBox="0 0 16 16" class="w-5 h-5 fill-current stroke-current stroke-0">
+                    <path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd" />
+                </svg>
+            </div>
+        </div>
+        <div>
+            <a routerLink="settings" routerLinkActive="active" ariaCurrentWhenActive="page">
+                <!-- https://cdn.jsdelivr.net/npm/heroicons@2.1.3/24/outline/cog-6-tooth.svg -->
+                <svg viewBox="0 0 24 24" class="h-full py-0.5 fill-none stroke-current text-white stroke-1">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                </svg>
+            </a>
+        </div>
+    </div>
+    <div class="w-full justify-items-center bg-slate-100 grow">
+        <app-results></app-results>
+    </div>   
+</div>
+<!-- <div class="flex m-2">
+    <div class="w-1/3 bg-blue-500 p-5 flex flex-col">
+        <div class="text-white flex-1">
+            Some text
+        </div>
+        <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
+    </div>
+    <div class="w-1/3 bg-amber-500 p-5 flex flex-col">
+        <div class="text-white flex-1">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh et dolor vestibulum commodo eu in
+            nulla. Etiam molestie diam at mollis mollis
+        </div>
+        <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
+    </div>
+    <div class="w-1/3 bg-green-500 p-5 flex flex-col">
+        <div class="text-white flex-1">
+            Sed eget tortor ullamcorper, mollis nibh ut, pretium augue.
+        </div>
+        <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
+    </div>
+    <div class="w-1/4 bg-cyan-500 p-5 flex flex-col">
+        <div class="text-white flex-1">
+            Short text
+        </div>
+        <button class="bg-white rounded-full mt-5 px-5 py-2">Action Button</button>
+    </div>
+
+</div> -->
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { RouterOutlet, RouterLink } from '@angular/router';
+import { ResultsComponent } from '../results/results.component';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink, ResultsComponent],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.css'
+})
+export class HomeComponent {
+
+}
diff --git a/src/app/results/results.component.css b/src/app/results/results.component.css
diff --git a/src/app/results/results.component.html b/src/app/results/results.component.html
@@ -0,0 +1,29 @@
+<div class="px-2 py-2 flex-col">
+    <div class="w-full text-lg text-slate-400 uppercase flex">
+        <span class="grow">Results</span>
+        <span>{{results.length}}</span>
+    </div>
+    <div class="w-full space-y-2 flex flex-col">
+        <!-- list each result card -->
+        <!-- @if (count == 0) {
+            <div class="w-full p-4 bg-white rounded-md">No results for current search text.</div>
+        } @else { -->
+            @for (item of results | slice:0:results.length; track item.id) {
+                <!-- <a href="{{item.url}}" target="_blank" class="w-full p-4 bg-white rounded-md flex-col">
+                    <div class="text-cyan-500">{{item.title}}</div>
+                    <div class="text-sm text-slate-400">{{item.url}}</div>
+                    <div>{{item.summary}}</div>
+                </a> -->
+                <div class="w-full p-1 bg-white rounded-md flex-col">
+                    <div class="text-lg"><a href="{{item.url}}" target="_blank">{{item.title}}</a></div>
+                    <div class="text-sm text-slate-400">{{item.url}}</div>
+                    <div>{{item.summary}}</div>
+                    <div class="mt-1 italic text-xs text-slate-300 text-right">Visited {{item.date | date: 'medium'}}</div>
+                </div>                   
+            }
+            @empty {
+                <div class="w-full p-4 bg-white text-center rounded-md">No results for current search text.</div>
+            }
+        <!-- } -->
+    </div>
+</div>
diff --git a/src/app/results/results.component.spec.ts b/src/app/results/results.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResultsComponent } from './results.component';
+
+describe('ResultsComponent', () => {
+  let component: ResultsComponent;
+  let fixture: ComponentFixture<ResultsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ResultsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ResultsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/results/results.component.ts b/src/app/results/results.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { SlicePipe, DatePipe } from '@angular/common';
+
+import { SearchService } from '../search.service';
+
+@Component({
+  selector: 'app-results',
+  standalone: true,
+  imports: [SlicePipe, DatePipe],
+  templateUrl: './results.component.html',
+  styleUrl: './results.component.css'
+})
+export class ResultsComponent {
+  count: number = 4;
+
+  results: any[];
+
+  constructor(private searchService: SearchService) {
+    this.results = this.searchService.query('*');
+   }
+}
diff --git a/src/app/search.service.spec.ts b/src/app/search.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SearchService } from './search.service';
+
+describe('SearchService', () => {
+  let service: SearchService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SearchService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/search.service.ts b/src/app/search.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SearchService {
+  private results = [
+      { title: 'Result 1', url: 'https://www.no-domain.com/', summary: '', date: new Date(), id: 1 },
+      { title: 'Result 2', url: 'https://www.no-domain.com/', summary: '', date: new Date(), id: 2 },
+      { title: 'Result 3', url: 'https://www.no-domain.com/', summary: '', date: new Date(), id: 3 },
+      { title: 'Result 4', url: 'https://www.no-domain.com/', summary: '', date: new Date(), id: 4 },
+      { title: 'Result 5', url: 'https://www.no-domain.com/', summary: '', date: new Date(), id: 5 },
+      { title: 'Result 6', url: 'https://www.no-domain.com/', summary: '', date: new Date(), id: 6 },
+      { title: 'Result 7', url: 'https://www.no-domain.com/', summary: '', date: new Date(), id: 7 },
+      { title: 'Result 8', url: 'https://www.no-domain.com/', summary: '', date: new Date(), id: 8 },
+      { title: 'Result 9', url: 'https://www.no-domain.com/', summary: '', date: new Date(), id: 9 },
+      { title: 'Result 10',url: 'https://www.no-domain.com/', summary: '', date: new Date(), id: 10 }
+    ];
+
+  query(query: string): any[] {
+    let n = Math.floor(Math.random() * this.results.length);
+    return this.results.slice(0,n);
+  }
+
+  constructor() { }
+}
diff --git a/src/app/settings/settings.component.css b/src/app/settings/settings.component.css
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
@@ -0,0 +1,23 @@
+<div class="h-full flex flex-col">
+    <div class="w-full h-10 p-1 px-2 space-x-2 bg-cyan-500 flex flex-row">
+        <div>
+            <img src="icon128.png" class="h-full">
+        </div>
+        <div class="justify-items-center grow">
+            <div class="font-sans text-lg text-white">Settings</div>
+        </div>
+        <div>
+            <a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">
+                <!-- https://cdn.jsdelivr.net/npm/heroicons@2.1.3/24/outline/home.svg -->
+                <svg viewBox="0 0 24 24" class="h-full py-0.5 fill-none stroke-current text-white stroke-1">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+                </svg>
+            </a>
+        </div>
+    </div>
+    <div class="w-full justify-items-center bg-slate-100 grow">
+        <div class="text-slate-400 py-1 uppercase">
+            <a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Home</a> | Settings
+        </div>
+    </div>   
+</div>
diff --git a/src/app/settings/settings.component.spec.ts b/src/app/settings/settings.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterOutlet, RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-settings',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink],
+  templateUrl: './settings.component.html',
+  styleUrl: './settings.component.css'
+})
+export class SettingsComponent {
+
+}
diff --git a/src/index.html b/src/index.html
@@ -5,9 +5,8 @@
   <title>vhs-ext</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body class="max-w-md">
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
@@ -1 +1,4 @@
-/* You can add global styles to this file, and also import other style files */
+/* global style definitions */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
