feat(angular): reshape PaperlessUI.Angular to TourPlanner-Angular layout

PaperlessUI.Angular/package.json

@@ -3,10 +3,14 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --port 4200 --proxy-config proxy.conf.json",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test --watch=false",
+    "test:watch": "ng test",
+    "generate:openapi": "node -e \"const fs=require('node:fs');fs.rmSync('../PaperlessREST/openapi/paperless.json',{force:true})\" && dotnet build ../PaperlessREST/PaperlessREST.csproj -tlp:ErrorsOnly && node -e \"if(!require('node:fs').existsSync('../PaperlessREST/openapi/paperless.json')){console.error('paperless.json not generated');process.exit(1)}\"",
+    "generate:types": "openapi-typescript ../PaperlessREST/openapi/paperless.json -o src/app/core/api/generated/api-types.ts",
+    "generate": "pnpm run generate:openapi && pnpm run generate:types"
   },
   "private": true,
   "packageManager": "pnpm@10.30.2",

PaperlessUI.Angular/proxy.conf.json

@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://localhost:5057",
+    "secure": false
+  }
+}

PaperlessUI.Angular/src/app/app.component.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  min-height: 100vh;
+}

PaperlessUI.Angular/src/app/app.component.html

@@ -0,0 +1 @@
+<app-shell />

PaperlessUI.Angular/src/app/app.component.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+      providers: [provideRouter([])],
+    }).compileComponents();
+  });
+
+  it('renders the app shell', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const host = fixture.nativeElement as HTMLElement;
+    expect(host.querySelector('app-shell')).toBeTruthy();
+  });
+});

PaperlessUI.Angular/src/app/app.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AppShellComponent } from './layout/shell/app-shell.component';
+
+@Component({
+  selector: 'app-root',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AppShellComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+})
+export class AppComponent {}

PaperlessUI.Angular/src/app/app.config.ts

@@ -1,11 +1,15 @@
+import { provideHttpClient, withFetch } from '@angular/common/http';
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
+import { API_BASE_URL } from './core/config/api-base-url.token';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(routes)
-  ]
+    provideHttpClient(withFetch()),
+    provideRouter(routes),
+    { provide: API_BASE_URL, useFactory: () => location.origin + '/' },
+  ],
 };

PaperlessUI.Angular/src/app/app.routes.ts

@@ -1,3 +1,13 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: '', pathMatch: 'full', redirectTo: 'documents' },
+  {
+    path: 'documents',
+    loadComponent: () =>
+      import('./features/documents/pages/documents-page.component').then(
+        (m) => m.DocumentsPageComponent,
+      ),
+  },
+  { path: '**', redirectTo: 'documents' },
+];

PaperlessUI.Angular/src/app/core/api/api-client.service.ts

@@ -0,0 +1,32 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { API_BASE_URL } from '../config/api-base-url.token';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ApiClientService {
+  private readonly http = inject(HttpClient);
+  private readonly baseUrl = inject(API_BASE_URL);
+
+  get<TResponse>(path: string): Observable<TResponse> {
+    return this.http.get<TResponse>(this.buildUrl(path));
+  }
+
+  post<TRequest, TResponse>(path: string, body: TRequest): Observable<TResponse> {
+    return this.http.post<TResponse>(this.buildUrl(path), body);
+  }
+
+  put<TRequest, TResponse>(path: string, body: TRequest): Observable<TResponse> {
+    return this.http.put<TResponse>(this.buildUrl(path), body);
+  }
+
+  delete(path: string): Observable<void> {
+    return this.http.delete<void>(this.buildUrl(path));
+  }
+
+  private buildUrl(path: string): string {
+    return new URL(path, this.baseUrl).toString();
+  }
+}

PaperlessUI.Angular/src/app/core/api/generated/.gitkeep

@@ -0,0 +1 @@
+openapi-typescript output target — `npm run generate:types` writes api-types.ts here once the PaperlessREST OpenAPI document is wired up.

PaperlessUI.Angular/src/app/core/config/api-base-url.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL');

PaperlessUI.Angular/src/app/features/documents/pages/documents-page.component.css

@@ -0,0 +1,8 @@
+.documents-page {
+  max-width: 64rem;
+  margin: 0 auto;
+}
+
+.documents-page h1 {
+  margin-top: 0;
+}

PaperlessUI.Angular/src/app/features/documents/pages/documents-page.component.html

@@ -0,0 +1,4 @@
+<section class="documents-page">
+  <h1>Documents</h1>
+  <p>Document list lands here. Backend wiring follows in the next PR once <code>openapi-typescript</code> generates the contract.</p>
+</section>

PaperlessUI.Angular/src/app/features/documents/pages/documents-page.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-documents-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './documents-page.component.html',
+  styleUrl: './documents-page.component.css',
+})
+export class DocumentsPageComponent {}

PaperlessUI.Angular/src/app/layout/navbar/app-navbar.component.css

@@ -0,0 +1,32 @@
+.app-navbar {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.app-navbar__brand {
+  font-weight: 600;
+  text-decoration: none;
+  color: inherit;
+}
+
+.app-navbar__links {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.app-navbar__links a {
+  text-decoration: none;
+  color: inherit;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+}
+
+.app-navbar__links a.is-active {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}

PaperlessUI.Angular/src/app/layout/navbar/app-navbar.component.html

@@ -0,0 +1,14 @@
+<nav class="app-navbar">
+  <a class="app-navbar__brand" routerLink="/documents">Paperless</a>
+  <ul class="app-navbar__links">
+    <li>
+      <a routerLink="/documents" routerLinkActive="is-active">Documents</a>
+    </li>
+    <li>
+      <a routerLink="/upload" routerLinkActive="is-active">Upload</a>
+    </li>
+    <li>
+      <a routerLink="/search" routerLinkActive="is-active">Search</a>
+    </li>
+  </ul>
+</nav>

PaperlessUI.Angular/src/app/layout/navbar/app-navbar.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-navbar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './app-navbar.component.html',
+  styleUrl: './app-navbar.component.css',
+})
+export class AppNavbarComponent {}

PaperlessUI.Angular/src/app/layout/shell/app-shell.component.css

@@ -0,0 +1,10 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.app-shell__content {
+  flex: 1;
+  padding: 1.5rem;
+}

PaperlessUI.Angular/src/app/layout/shell/app-shell.component.html

@@ -0,0 +1,4 @@
+<app-navbar />
+<main class="app-shell__content">
+  <router-outlet />
+</main>

PaperlessUI.Angular/src/app/layout/shell/app-shell.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { AppNavbarComponent } from '../navbar/app-navbar.component';
+
+@Component({
+  selector: 'app-shell',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, AppNavbarComponent],
+  templateUrl: './app-shell.component.html',
+  styleUrl: './app-shell.component.css',
+})
+export class AppShellComponent {}

PaperlessUI.Angular/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>PaperlessUIAngular</title>
+  <title>Paperless</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

PaperlessUI.Angular/src/main.ts

@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { App } from './app/app';
+import { AppComponent } from './app/app.component';
 
-bootstrapApplication(App, appConfig)
+bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));