ci: add PR validation workflow

.github/workflows/pr.yml

@@ -0,0 +1,43 @@
+name: PR Validation
+
+on:
+  pull_request:
+    branches: [dev]
+
+concurrency:
+  group: pr-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install --frozen-lockfile
+      - run: bun run lint
+      - run: bunx prettier --check "src/**/*.{ts,html,css}"
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install --frozen-lockfile
+      - run: bunx tsc --noEmit -p tsconfig.app.json
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install --frozen-lockfile
+      - run: bun run test
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - run: bun install --frozen-lockfile
+      - run: bun run build

package.json

@@ -52,6 +52,7 @@
     "eslint": "^10.7.0",
     "jsdom": "^27.4.0",
     "postcss": "^8.5.16",
+    "prettier": "^3.9.5",
     "tailwindcss": "^4.3.2",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.63.0",

src/app/app.config.ts

@@ -15,9 +15,9 @@ export const appConfig: ApplicationConfig = {
       ? [
           provideServiceWorker('ngsw-worker.js', {
             enabled: true,
-            registrationStrategy: 'registerWhenStable:30000'
-          })
+            registrationStrategy: 'registerWhenStable:30000',
+          }),
         ]
-      : [])
-  ]
+      : []),
+  ],
 };

src/app/app.html

@@ -1,12 +1,46 @@
-<nav class="bg-light-bg-secondary dark:bg-dark-bg-secondary border-b border-light-border dark:border-dark-border shadow-light dark:shadow-dark sticky top-0 z-100">
-  <div class="max-w-[1200px] mx-auto px-8 py-4 flex justify-between items-center max-md:flex-col max-md:gap-4">
-    <a routerLink="/" class="text-2xl font-bold text-accent-primary hover:text-accent-primary-hover no-underline">Watch List</a>
+<nav
+  class="bg-light-bg-secondary dark:bg-dark-bg-secondary border-b border-light-border dark:border-dark-border shadow-light dark:shadow-dark sticky top-0 z-100"
+>
+  <div
+    class="max-w-[1200px] mx-auto px-8 py-4 flex justify-between items-center max-md:flex-col max-md:gap-4"
+  >
+    <a
+      routerLink="/"
+      class="text-2xl font-bold text-accent-primary hover:text-accent-primary-hover no-underline"
+      >Watch List</a
+    >
     <div class="flex gap-6 max-md:flex-wrap max-md:justify-center items-center">
-      <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" class="text-light-font dark:text-dark-font no-underline font-medium py-2 transition-colors duration-200 hover:text-accent-primary [&.active]:text-accent-primary [&.active]:border-b-2 [&.active]:border-accent-primary">Home</a>
-      <a routerLink="/items" routerLinkActive="active" class="text-light-font dark:text-dark-font no-underline font-medium py-2 transition-colors duration-200 hover:text-accent-primary [&.active]:text-accent-primary [&.active]:border-b-2 [&.active]:border-accent-primary">Items</a>
-      <a routerLink="/history" routerLinkActive="active" class="text-light-font dark:text-dark-font no-underline font-medium py-2 transition-colors duration-200 hover:text-accent-primary [&.active]:text-accent-primary [&.active]:border-b-2 [&.active]:border-accent-primary">History</a>
-      <a routerLink="/groups" routerLinkActive="active" class="text-light-font dark:text-dark-font no-underline font-medium py-2 transition-colors duration-200 hover:text-accent-primary [&.active]:text-accent-primary [&.active]:border-b-2 [&.active]:border-accent-primary">Groups</a>
-      <a routerLink="/settings" routerLinkActive="active" class="text-light-font dark:text-dark-font no-underline font-medium py-2 transition-colors duration-200 hover:text-accent-primary [&.active]:text-accent-primary [&.active]:border-b-2 [&.active]:border-accent-primary">Settings</a>
+      <a
+        routerLink="/"
+        routerLinkActive="active"
+        [routerLinkActiveOptions]="{ exact: true }"
+        class="text-light-font dark:text-dark-font no-underline font-medium py-2 transition-colors duration-200 hover:text-accent-primary [&.active]:text-accent-primary [&.active]:border-b-2 [&.active]:border-accent-primary"
+        >Home</a
+      >
+      <a
+        routerLink="/items"
+        routerLinkActive="active"
+        class="text-light-font dark:text-dark-font no-underline font-medium py-2 transition-colors duration-200 hover:text-accent-primary [&.active]:text-accent-primary [&.active]:border-b-2 [&.active]:border-accent-primary"
+        >Items</a
+      >
+      <a
+        routerLink="/history"
+        routerLinkActive="active"
+        class="text-light-font dark:text-dark-font no-underline font-medium py-2 transition-colors duration-200 hover:text-accent-primary [&.active]:text-accent-primary [&.active]:border-b-2 [&.active]:border-accent-primary"
+        >History</a
+      >
+      <a
+        routerLink="/groups"
+        routerLinkActive="active"
+        class="text-light-font dark:text-dark-font no-underline font-medium py-2 transition-colors duration-200 hover:text-accent-primary [&.active]:text-accent-primary [&.active]:border-b-2 [&.active]:border-accent-primary"
+        >Groups</a
+      >
+      <a
+        routerLink="/settings"
+        routerLinkActive="active"
+        class="text-light-font dark:text-dark-font no-underline font-medium py-2 transition-colors duration-200 hover:text-accent-primary [&.active]:text-accent-primary [&.active]:border-b-2 [&.active]:border-accent-primary"
+        >Settings</a
+      >
       <app-theme-switcher />
     </div>
   </div>

src/app/app.routes.ts

@@ -3,30 +3,40 @@ import { Routes } from '@angular/router';
 export const routes: Routes = [
   {
     path: '',
-    loadComponent: () => import('./components/home/home.component').then(m => m.HomeComponent)
+    loadComponent: () => import('./components/home/home.component').then((m) => m.HomeComponent),
   },
   {
     path: 'items',
-    loadComponent: () => import('./components/item-list/item-list.component').then(m => m.ItemListComponent)
+    loadComponent: () =>
+      import('./components/item-list/item-list.component').then((m) => m.ItemListComponent),
   },
   {
     path: 'items/add',
-    loadComponent: () => import('./components/add-item/add-item.component').then(m => m.AddItemComponent)
+    loadComponent: () =>
+      import('./components/add-item/add-item.component').then((m) => m.AddItemComponent),
   },
   {
     path: 'items/:id',
-    loadComponent: () => import('./components/item-detail/item-detail.component').then(m => m.ItemDetailComponent)
+    loadComponent: () =>
+      import('./components/item-detail/item-detail.component').then((m) => m.ItemDetailComponent),
   },
   {
     path: 'groups',
-    loadComponent: () => import('./components/group-manager/group-manager.component').then(m => m.GroupManagerComponent)
+    loadComponent: () =>
+      import('./components/group-manager/group-manager.component').then(
+        (m) => m.GroupManagerComponent,
+      ),
   },
   {
     path: 'history',
-    loadComponent: () => import('./components/watch-history/watch-history.component').then(m => m.WatchHistoryComponent)
+    loadComponent: () =>
+      import('./components/watch-history/watch-history.component').then(
+        (m) => m.WatchHistoryComponent,
+      ),
   },
   {
     path: 'settings',
-    loadComponent: () => import('./components/settings/settings.component').then(m => m.SettingsComponent)
-  }
+    loadComponent: () =>
+      import('./components/settings/settings.component').then((m) => m.SettingsComponent),
+  },
 ];

src/app/app.ts

@@ -6,7 +6,7 @@ import { ThemeSwitcherComponent } from './components/theme-switcher/theme-switch
   selector: 'app-root',
   imports: [RouterOutlet, RouterLink, RouterLinkActive, ThemeSwitcherComponent],
   templateUrl: './app.html',
-  styles: [':host { display: block; min-height: 100vh; }']
+  styles: [':host { display: block; min-height: 100vh; }'],
 })
 export class App {
   protected readonly title = signal('watch-list');