From a4efb9485a6a92ef000105b380de9616dbe73152 Mon Sep 17 00:00:00 2001
From: Ma <101021254+CodeWithMa@users.noreply.github.com>
Date: Sat, 18 Jul 2026 06:20:37 +0200
Subject: [PATCH 1/5] ci: add PR validation workflow

---
 .github/workflows/pr.yml | 43 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 .github/workflows/pr.yml

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
new file mode 100644
index 0000000..f52d335
--- /dev/null
+++ b/.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: npx 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: npx 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 --run
+
+  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

From ace5e5454dca99569a3907b56395018b01b75c04 Mon Sep 17 00:00:00 2001
From: Ma <101021254+CodeWithMa@users.noreply.github.com>
Date: Sat, 18 Jul 2026 06:28:44 +0200
Subject: [PATCH 2/5] Fix running tests

---
 .github/workflows/pr.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index f52d335..d0c4118 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -32,7 +32,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
       - run: bun install --frozen-lockfile
-      - run: bun run test --run
+      - run: bun run test
 
   build:
     runs-on: ubuntu-latest

From 492752e48cac9bb3cd7d82d98f39945ca860f240 Mon Sep 17 00:00:00 2001
From: Ma <101021254+CodeWithMa@users.noreply.github.com>
Date: Sat, 18 Jul 2026 06:29:33 +0200
Subject: [PATCH 3/5] ci: add prettier as devDependency

---
 .github/workflows/pr.yml |  2 +-
 bun.lock                 | 19 +++++++++++--------
 package.json             |  1 +
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index d0c4118..7e3d05c 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -16,7 +16,7 @@ jobs:
       - uses: oven-sh/setup-bun@v2
       - run: bun install --frozen-lockfile
       - run: bun run lint
-      - run: npx prettier --check "src/**/*.{ts,html,css}"
+      - run: bunx prettier --check "src/**/*.{ts,html,css}"
 
   typecheck:
     runs-on: ubuntu-latest
diff --git a/bun.lock b/bun.lock
index 199db24..6233dfd 100644
--- a/bun.lock
+++ b/bun.lock
@@ -12,7 +12,7 @@
         "@angular/platform-browser": "^22.0.6",
         "@angular/router": "^22.0.6",
         "@angular/service-worker": "^22.0.6",
-        "@tauri-apps/api": "^2.10.1",
+        "@tauri-apps/api": "^2.11.1",
         "rxjs": "~7.8.2",
         "tslib": "^2.8.1",
       },
@@ -22,16 +22,17 @@
         "@angular/cli": "^22.0.6",
         "@angular/compiler-cli": "^22.0.6",
         "@eslint/js": "^10.0.1",
-        "@tailwindcss/postcss": "^4.2.2",
-        "@tauri-apps/cli": "^2.10.1",
+        "@tailwindcss/postcss": "^4.3.2",
+        "@tauri-apps/cli": "^2.11.4",
         "angular-eslint": "^22.0.0",
-        "eslint": "^10.2.0",
+        "eslint": "^10.7.0",
         "jsdom": "^27.4.0",
-        "postcss": "^8.5.10",
-        "tailwindcss": "^4.2.2",
+        "postcss": "^8.5.16",
+        "prettier": "^3.9.5",
+        "tailwindcss": "^4.3.2",
         "typescript": "~6.0.3",
-        "typescript-eslint": "^8.58.2",
-        "vitest": "^4.1.4",
+        "typescript-eslint": "^8.63.0",
+        "vitest": "^4.1.10",
       },
     },
   },
@@ -1078,6 +1079,8 @@
 
     "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
 
+    "prettier": ["prettier@3.9.5", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-/FVl766LpUfB5vXgCYOYa0MeV/441Ia99AeICQIQFTY/Nw0roZwULcXpku5i1/m5kt/baz+s4Zogspd839HSMg=="],
+
     "proc-log": ["proc-log@6.1.0", "", {}, "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ=="],
 
     "proxy-addr": ["proxy-addr@2.0.7", "", { "dependencies": { "forwarded": "0.2.0", "ipaddr.js": "1.9.1" } }, "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg=="],
diff --git a/package.json b/package.json
index db31857..cc9b37a 100644
--- a/package.json
+++ b/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",

From ebbaaa6ac3aa586ff575abbcbf1691eb10449623 Mon Sep 17 00:00:00 2001
From: Ma <101021254+CodeWithMa@users.noreply.github.com>
Date: Sat, 18 Jul 2026 06:55:46 +0200
Subject: [PATCH 4/5] Let prettier fix files

---
 src/app/app.config.ts                         |   8 +-
 src/app/app.html                              |  50 +++++--
 src/app/app.routes.ts                         |  26 ++--
 src/app/app.ts                                |   2 +-
 .../add-item/add-item.component.spec.ts       | 124 +++++++++---------
 .../components/add-item/add-item.component.ts |  20 +--
 .../group-manager/group-manager.component.ts  |  62 ++++++---
 src/app/components/home/home.component.ts     |  72 +++++++---
 .../item-card/item-card.component.ts          |  56 +++++---
 .../item-detail/item-detail.component.ts      |  33 +++--
 .../item-form/item-form.component.spec.ts     |  57 ++++----
 .../item-form/item-form.component.ts          |  93 +++++++++----
 .../item-list/item-list.component.ts          |  76 ++++++++---
 .../progress-bar/progress-bar.component.ts    |   9 +-
 .../settings/settings.component.spec.ts       |  28 ++--
 .../components/settings/settings.component.ts |  75 ++++++++---
 .../theme-switcher.component.ts               |  47 ++++++-
 .../components/time-ago/time-ago.component.ts |   9 +-
 .../watch-history/watch-history.component.ts  |  79 ++++++++---
 src/app/domain/item-form.spec.ts              |  42 +++---
 src/app/domain/item-form.ts                   |  14 +-
 src/app/domain/item.constants.ts              |   4 +-
 src/app/domain/storage-schema.ts              |  36 ++---
 src/app/models/group.model.ts                 |   1 -
 src/app/services/group.service.ts             |  32 +++--
 src/app/services/import-export.service.ts     |   3 +-
 src/app/services/round-robin.service.spec.ts  |  40 +++---
 src/app/services/round-robin.service.ts       |  20 +--
 src/app/services/storage.service.spec.ts      |  54 ++++----
 src/app/services/storage.service.ts           |   8 +-
 src/app/services/theme.service.ts             |   6 +-
 .../services/tmdb-settings.service.spec.ts    |   4 +-
 src/app/services/tmdb-settings.service.ts     |   6 +-
 .../services/tmdb-suggestion.service.spec.ts  |  79 +++++------
 src/app/services/tmdb-suggestion.service.ts   |  20 +--
 src/app/services/watch-list.service.spec.ts   |  36 ++---
 src/app/services/watch-list.service.ts        |  83 ++++++------
 src/app/utils/status.utils.ts                 |  30 +++--
 src/app/utils/watch-history.utils.spec.ts     |  10 +-
 src/app/utils/watch-history.utils.ts          |  12 +-
 src/environments/environment.tauri.ts         |   2 +-
 src/environments/environment.ts               |   2 +-
 src/environments/environment.web.ts           |   2 +-
 src/index.html                                |  44 +++----
 src/main.ts                                   |   3 +-
 src/styles.css                                |   8 +-
 46 files changed, 954 insertions(+), 573 deletions(-)

diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 61d12df..b7db5ab 100644
--- a/src/app/app.config.ts
+++ b/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',
+          }),
         ]
-      : [])
-  ]
+      : []),
+  ],
 };
diff --git a/src/app/app.html b/src/app/app.html
index 6c860ed..c9d61e6 100644
--- a/src/app/app.html
+++ b/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>
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index ee2e9da..961ad6a 100644
--- a/src/app/app.routes.ts
+++ b/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),
+  },
 ];
diff --git a/src/app/app.ts b/src/app/app.ts
index d27c962..fbfc7f6 100644
--- a/src/app/app.ts
+++ b/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');
diff --git a/src/app/components/add-item/add-item.component.spec.ts b/src/app/components/add-item/add-item.component.spec.ts
index 5745998..4357bca 100644
--- a/src/app/components/add-item/add-item.component.spec.ts
+++ b/src/app/components/add-item/add-item.component.spec.ts
@@ -20,11 +20,11 @@ describe('AddItemComponent', () => {
       progress: {
         season: 1,
         episode: 1,
-        seasons: []
+        seasons: [],
       },
       watchHistory: [],
-      createdAt: '2026-05-01T10:00:00.000Z'
-    }
+      createdAt: '2026-05-01T10:00:00.000Z',
+    },
   ];
 
   beforeEach(() => {
@@ -35,23 +35,23 @@ describe('AddItemComponent', () => {
           provide: WatchListService,
           useValue: {
             items: signal(existingItems),
-            addItem: vi.fn()
-          }
+            addItem: vi.fn(),
+          },
         },
         {
           provide: GroupService,
           useValue: {
-            groups: signal([{ id: 'ungrouped', name: 'Ungrouped', order: 0 }])
-          }
+            groups: signal([{ id: 'ungrouped', name: 'Ungrouped', order: 0 }]),
+          },
         },
         {
           provide: TmdbSuggestionService,
           useValue: {
             search: vi.fn(() => of([])),
-            getSeriesDetails: vi.fn(() => of(null))
-          }
-        }
-      ]
+            getSeriesDetails: vi.fn(() => of(null)),
+          },
+        },
+      ],
     });
   });
 
@@ -65,7 +65,7 @@ describe('AddItemComponent', () => {
     fixture.detectChanges();
 
     expect(fixture.nativeElement.textContent).toContain(
-      'An item named "Existing Show" already exists.'
+      'An item named "Existing Show" already exists.',
     );
   });
 
@@ -83,7 +83,7 @@ describe('AddItemComponent', () => {
       season: 1,
       episode: 1,
       seasons: [],
-      startImmediately: false
+      startImmediately: false,
     });
 
     expect(watchListService.addItem).toHaveBeenCalled();
@@ -98,15 +98,15 @@ describe('AddItemComponent', () => {
         tmdbId: 1396,
         title: 'Breaking Bad',
         type: 'series',
-        year: '2008'
-      }
+        year: '2008',
+      },
     ]);
 
     fixture.componentInstance.onSuggestionSelected({
       tmdbId: 1396,
       title: 'Breaking Bad',
       type: 'series',
-      year: '2008'
+      year: '2008',
     });
 
     expect(fixture.componentInstance.title()).toBe('Breaking Bad');
@@ -122,10 +122,10 @@ describe('AddItemComponent', () => {
           {
             seasonNumber: 1,
             totalEpisodes: 7,
-            firstEpisodeAirDate: '2008-01-20'
-          }
-        ]
-      })
+            firstEpisodeAirDate: '2008-01-20',
+          },
+        ],
+      }),
     );
     const fixture = TestBed.createComponent(AddItemComponent);
 
@@ -133,7 +133,7 @@ describe('AddItemComponent', () => {
       tmdbId: 1396,
       title: 'Breaking Bad',
       type: 'series',
-      year: '2008'
+      year: '2008',
     });
 
     expect(tmdbSuggestionService.getSeriesDetails).toHaveBeenCalledWith(1396);
@@ -144,10 +144,10 @@ describe('AddItemComponent', () => {
           {
             seasonNumber: 1,
             totalEpisodes: 7,
-            firstEpisodeAirDate: '2008-01-20'
-          }
-        ]
-      }
+            firstEpisodeAirDate: '2008-01-20',
+          },
+        ],
+      },
     });
   });
 
@@ -160,17 +160,17 @@ describe('AddItemComponent', () => {
         seasons: [
           {
             seasonNumber: 1,
-            totalEpisodes: 7
-          }
-        ]
-      }
+            totalEpisodes: 7,
+          },
+        ],
+      },
     });
 
     fixture.componentInstance.onSuggestionSelected({
       tmdbId: 11,
       title: 'Star Wars',
       type: 'movie',
-      year: '1977'
+      year: '1977',
     });
 
     expect(tmdbSuggestionService.getSeriesDetails).not.toHaveBeenCalled();
@@ -187,16 +187,16 @@ describe('AddItemComponent', () => {
       tmdbId: 1396,
       title: 'Breaking Bad',
       type: 'series',
-      year: '2008'
+      year: '2008',
     });
     fixture.componentInstance.onTitleChanged('Different show');
     details.next({
       seasons: [
         {
           seasonNumber: 1,
-          totalEpisodes: 7
-        }
-      ]
+          totalEpisodes: 7,
+        },
+      ],
     });
 
     expect(fixture.componentInstance.autofillPatch()).toBeNull();
@@ -212,24 +212,24 @@ describe('AddItemComponent', () => {
             seasons: [
               {
                 seasonNumber: 1,
-                totalEpisodes: 7
-              }
-            ]
+                totalEpisodes: 7,
+              },
+            ],
           });
           return () => {
             firstRequestUnsubscribed = true;
           };
-        })
+        }),
       )
       .mockReturnValueOnce(
         of({
           seasons: [
             {
               seasonNumber: 1,
-              totalEpisodes: 10
-            }
-          ]
-        })
+              totalEpisodes: 10,
+            },
+          ],
+        }),
       );
     const fixture = TestBed.createComponent(AddItemComponent);
 
@@ -237,13 +237,13 @@ describe('AddItemComponent', () => {
       tmdbId: 1396,
       title: 'Breaking Bad',
       type: 'series',
-      year: '2008'
+      year: '2008',
     });
     fixture.componentInstance.onSuggestionSelected({
       tmdbId: 66732,
       title: 'Stranger Things',
       type: 'series',
-      year: '2016'
+      year: '2016',
     });
 
     expect(firstRequestUnsubscribed).toBe(true);
@@ -255,10 +255,10 @@ describe('AddItemComponent', () => {
         seasons: [
           {
             seasonNumber: 1,
-            totalEpisodes: 10
-          }
-        ]
-      }
+            totalEpisodes: 10,
+          },
+        ],
+      },
     });
   });
 
@@ -270,10 +270,10 @@ describe('AddItemComponent', () => {
         seasons: [
           {
             seasonNumber: 1,
-            totalEpisodes: 7
-          }
-        ]
-      }
+            totalEpisodes: 7,
+          },
+        ],
+      },
     });
 
     fixture.componentInstance.onTitleChanged('Different show');
@@ -294,9 +294,9 @@ describe('AddItemComponent', () => {
               tmdbId: 1396,
               title: 'Breaking Bad',
               type: 'series',
-              year: '2008'
-            }
-          ])
+              year: '2008',
+            },
+          ]),
         );
       const fixture = TestBed.createComponent(AddItemComponent);
 
@@ -305,7 +305,9 @@ describe('AddItemComponent', () => {
 
       expect(fixture.componentInstance.suggestions()).toEqual([]);
       expect(fixture.componentInstance.suggestionsLoading()).toBe(false);
-      expect(fixture.componentInstance.suggestionsError()).toBe('TMDB suggestions are unavailable.');
+      expect(fixture.componentInstance.suggestionsError()).toBe(
+        'TMDB suggestions are unavailable.',
+      );
 
       fixture.componentInstance.onTitleChanged('good query');
       await vi.advanceTimersByTimeAsync(250);
@@ -315,8 +317,8 @@ describe('AddItemComponent', () => {
           tmdbId: 1396,
           title: 'Breaking Bad',
           type: 'series',
-          year: '2008'
-        }
+          year: '2008',
+        },
       ]);
       expect(fixture.componentInstance.suggestionsError()).toBe('');
     } finally {
@@ -355,8 +357,8 @@ describe('AddItemComponent', () => {
           tmdbId: 1396,
           title: 'Breaking Bad',
           type: 'series',
-          year: '2008'
-        }
+          year: '2008',
+        },
       ]);
       fixture.componentInstance.onTitleChanged('Breakin');
       await vi.advanceTimersByTimeAsync(100);
@@ -364,7 +366,7 @@ describe('AddItemComponent', () => {
         tmdbId: 1396,
         title: 'Breaking Bad',
         type: 'series',
-        year: '2008'
+        year: '2008',
       });
       await vi.advanceTimersByTimeAsync(250);
 
diff --git a/src/app/components/add-item/add-item.component.ts b/src/app/components/add-item/add-item.component.ts
index 2c36694..de99fd4 100644
--- a/src/app/components/add-item/add-item.component.ts
+++ b/src/app/components/add-item/add-item.component.ts
@@ -6,7 +6,11 @@ import { WatchListService } from '../../services/watch-list.service';
 import { GroupService } from '../../services/group.service';
 import { TmdbSuggestionService } from '../../services/tmdb-suggestion.service';
 import { ItemFormComponent } from '../item-form/item-form.component';
-import { buildItemMutationInput, createDefaultItemFormValue, ItemFormValue } from '../../domain/item-form';
+import {
+  buildItemMutationInput,
+  createDefaultItemFormValue,
+  ItemFormValue,
+} from '../../domain/item-form';
 import { TmdbSuggestion } from '../../models/tmdb-suggestion.model';
 
 @Component({
@@ -33,7 +37,7 @@ import { TmdbSuggestion } from '../../models/tmdb-suggestion.model';
         (cancelled)="cancel()"
       />
     </div>
-    `
+  `,
 })
 export class AddItemComponent {
   private watchListService = inject(WatchListService);
@@ -91,16 +95,16 @@ export class AddItemComponent {
             catchError(() => {
               this.suggestionsError.set('TMDB suggestions are unavailable.');
               return of([]);
-            })
+            }),
           );
         }),
-        takeUntilDestroyed(this.destroyRef)
+        takeUntilDestroyed(this.destroyRef),
       )
       .subscribe({
         next: (suggestions) => {
           this.suggestions.set(suggestions);
           this.suggestionsLoading.set(false);
-        }
+        },
       });
 
     this.selectedTmdbSeriesIds
@@ -114,7 +118,7 @@ export class AddItemComponent {
             .getSeriesDetails(tmdbId)
             .pipe(catchError(() => of(null)));
         }),
-        takeUntilDestroyed(this.destroyRef)
+        takeUntilDestroyed(this.destroyRef),
       )
       .subscribe((details) => {
         if (!details) {
@@ -124,8 +128,8 @@ export class AddItemComponent {
         this.autofillPatch.set({
           id: ++this.autofillPatchId,
           value: {
-            seasons: details.seasons
-          }
+            seasons: details.seasons,
+          },
         });
       });
   }
diff --git a/src/app/components/group-manager/group-manager.component.ts b/src/app/components/group-manager/group-manager.component.ts
index 7a43683..699f651 100644
--- a/src/app/components/group-manager/group-manager.component.ts
+++ b/src/app/components/group-manager/group-manager.component.ts
@@ -12,7 +12,9 @@ import { DEFAULT_GROUP_ID } from '../../domain/item.constants';
       <h1 class="text-2xl mb-8 text-light-font dark:text-dark-font">Group Management</h1>
 
       <div class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary p-6 rounded-lg mb-8">
-        <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">Create New Group</h2>
+        <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">
+          Create New Group
+        </h2>
         <form (ngSubmit)="createGroup()" class="flex gap-4">
           <input
             type="text"
@@ -21,15 +23,24 @@ import { DEFAULT_GROUP_ID } from '../../domain/item.constants';
             placeholder="Group name"
             required
             class="flex-1 p-3 border border-light-border dark:border-dark-border rounded text-base bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font"
-            />
-          <button type="submit" class="px-6 py-3 bg-accent-primary text-white border-none rounded cursor-pointer font-medium hover:bg-accent-primary-hover">Create Group</button>
+          />
+          <button
+            type="submit"
+            class="px-6 py-3 bg-accent-primary text-white border-none rounded cursor-pointer font-medium hover:bg-accent-primary-hover"
+          >
+            Create Group
+          </button>
         </form>
       </div>
 
-      <div class="bg-light-bg-secondary dark:bg-dark-bg-secondary border border-light-border dark:border-dark-border rounded-lg p-6">
+      <div
+        class="bg-light-bg-secondary dark:bg-dark-bg-secondary border border-light-border dark:border-dark-border rounded-lg p-6"
+      >
         <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">Groups</h2>
         @for (group of groups(); track group.id; let i = $index) {
-          <div class="flex justify-between items-center p-4 border-b border-light-border-light dark:border-dark-border-light last:border-b-0">
+          <div
+            class="flex justify-between items-center p-4 border-b border-light-border-light dark:border-dark-border-light last:border-b-0"
+          >
             <div class="flex flex-col gap-1">
               <span class="font-medium text-lg">{{ group.name }}</span>
             </div>
@@ -39,7 +50,7 @@ import { DEFAULT_GROUP_ID } from '../../domain/item.constants';
                   (click)="moveUp(group.id)"
                   class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
                   title="Move up"
-                  >
+                >
                   ↑
                 </button>
               }
@@ -48,7 +59,7 @@ import { DEFAULT_GROUP_ID } from '../../domain/item.constants';
                   (click)="moveDown(group.id)"
                   class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
                   title="Move down"
-                  >
+                >
                   ↓
                 </button>
               }
@@ -56,7 +67,7 @@ import { DEFAULT_GROUP_ID } from '../../domain/item.constants';
                 <button
                   (click)="editGroup(group)"
                   class="px-4 py-2 border border-accent-warning rounded bg-accent-warning text-black dark:text-white hover:bg-accent-warning-hover cursor-pointer text-sm"
-                  >
+                >
                   Edit
                 </button>
               }
@@ -64,7 +75,7 @@ import { DEFAULT_GROUP_ID } from '../../domain/item.constants';
                 <button
                   (click)="deleteGroup(group.id)"
                   class="px-4 py-2 border border-accent-danger rounded bg-accent-danger text-white hover:bg-accent-danger-hover cursor-pointer text-sm"
-                  >
+                >
                   Delete
                 </button>
               }
@@ -84,17 +95,28 @@ import { DEFAULT_GROUP_ID } from '../../domain/item.constants';
                 name="editGroupName"
                 required
                 class="w-full p-3 border border-light-border dark:border-dark-border rounded text-base bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font"
-                />
+              />
               <div class="flex gap-4 mt-6">
-                <button type="submit" class="px-6 py-3 bg-accent-primary text-white border-none rounded cursor-pointer hover:bg-accent-primary-hover">Save</button>
-                <button type="button" (click)="cancelEdit()" class="px-6 py-3 bg-accent-secondary text-white border-none rounded cursor-pointer hover:bg-accent-secondary-hover">Cancel</button>
+                <button
+                  type="submit"
+                  class="px-6 py-3 bg-accent-primary text-white border-none rounded cursor-pointer hover:bg-accent-primary-hover"
+                >
+                  Save
+                </button>
+                <button
+                  type="button"
+                  (click)="cancelEdit()"
+                  class="px-6 py-3 bg-accent-secondary text-white border-none rounded cursor-pointer hover:bg-accent-secondary-hover"
+                >
+                  Cancel
+                </button>
               </div>
             </form>
           </div>
         </div>
       }
     </div>
-    `
+  `,
 })
 export class GroupManagerComponent {
   private groupService = inject(GroupService);
@@ -124,7 +146,7 @@ export class GroupManagerComponent {
     if (group && this.editGroupName.trim()) {
       this.groupService.updateGroup({
         ...group,
-        name: this.editGroupName.trim()
+        name: this.editGroupName.trim(),
       });
       this.cancelEdit();
     }
@@ -136,7 +158,9 @@ export class GroupManagerComponent {
   }
 
   deleteGroup(groupId: string): void {
-    if (confirm('Are you sure you want to delete this group? Items will be moved to "Ungrouped".')) {
+    if (
+      confirm('Are you sure you want to delete this group? Items will be moved to "Ungrouped".')
+    ) {
       try {
         this.groupService.deleteGroup(groupId);
       } catch {
@@ -147,9 +171,9 @@ export class GroupManagerComponent {
 
   moveUp(groupId: string): void {
     const sorted = this.groups();
-    const index = sorted.findIndex(g => g.id === groupId);
+    const index = sorted.findIndex((g) => g.id === groupId);
     if (index > 0) {
-      const groupIds = sorted.map(g => g.id);
+      const groupIds = sorted.map((g) => g.id);
       [groupIds[index], groupIds[index - 1]] = [groupIds[index - 1], groupIds[index]];
       this.groupService.reorderGroups(groupIds);
     }
@@ -157,9 +181,9 @@ export class GroupManagerComponent {
 
   moveDown(groupId: string): void {
     const sorted = this.groups();
-    const index = sorted.findIndex(g => g.id === groupId);
+    const index = sorted.findIndex((g) => g.id === groupId);
     if (index < sorted.length - 1) {
-      const groupIds = sorted.map(g => g.id);
+      const groupIds = sorted.map((g) => g.id);
       [groupIds[index], groupIds[index + 1]] = [groupIds[index + 1], groupIds[index]];
       this.groupService.reorderGroups(groupIds);
     }
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 1ec008d..1f5b4af 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -15,7 +15,9 @@ import { ItemType } from '../../models/item.model';
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
         <div>
-          <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">Next Series</h2>
+          <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">
+            Next Series
+          </h2>
           @if (nextSeries()) {
             <div class="mb-4">
               <app-item-card
@@ -23,10 +25,12 @@ import { ItemType } from '../../models/item.model';
                 (markWatched)="markSeriesWatched()"
                 (markCompleted)="markSeriesCompleted()"
                 (markDropped)="markSeriesDropped()"
-                />
+              />
             </div>
           } @else {
-            <p class="p-8 text-center text-light-font-muted dark:text-dark-font-muted bg-light-bg-primary dark:bg-dark-bg-primary rounded-lg">
+            <p
+              class="p-8 text-center text-light-font-muted dark:text-dark-font-muted bg-light-bg-primary dark:bg-dark-bg-primary rounded-lg"
+            >
               @if (hasSeries()) {
                 @if (hasInProgressSeries()) {
                   No aired series episodes available
@@ -41,7 +45,9 @@ import { ItemType } from '../../models/item.model';
         </div>
 
         <div>
-          <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">Next Movie</h2>
+          <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">
+            Next Movie
+          </h2>
           @if (nextMovie()) {
             <div class="mb-4">
               <app-item-card
@@ -49,10 +55,12 @@ import { ItemType } from '../../models/item.model';
                 (markWatched)="markMovieWatched()"
                 (markCompleted)="markMovieCompleted()"
                 (markDropped)="markMovieDropped()"
-                />
+              />
             </div>
           } @else {
-            <p class="p-8 text-center text-light-font-muted dark:text-dark-font-muted bg-light-bg-primary dark:bg-dark-bg-primary rounded-lg">
+            <p
+              class="p-8 text-center text-light-font-muted dark:text-dark-font-muted bg-light-bg-primary dark:bg-dark-bg-primary rounded-lg"
+            >
               @if (hasMovies()) {
                 No movies currently being watched
               } @else {
@@ -64,20 +72,39 @@ import { ItemType } from '../../models/item.model';
       </div>
 
       <div class="border-t border-light-border dark:border-dark-border pt-8 mt-8">
-        <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">Backlog</h2>
+        <h2 class="text-xl mb-4 text-light-font-secondary dark:text-dark-font-secondary">
+          Backlog
+        </h2>
         @if (backlogItems().length > 0) {
-          <div class="overflow-hidden rounded-lg border border-light-border dark:border-dark-border bg-light-bg-secondary dark:bg-dark-bg-secondary shadow-light dark:shadow-dark">
+          <div
+            class="overflow-hidden rounded-lg border border-light-border dark:border-dark-border bg-light-bg-secondary dark:bg-dark-bg-secondary shadow-light dark:shadow-dark"
+          >
             @for (item of backlogItems(); track item.id) {
-              <div class="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between border-b border-light-border dark:border-dark-border last:border-b-0">
+              <div
+                class="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between border-b border-light-border dark:border-dark-border last:border-b-0"
+              >
                 <div class="min-w-0 flex items-center gap-3">
-                  <a [routerLink]="['/items', item.id]" class="truncate no-underline text-base font-medium text-light-font dark:text-dark-font hover:text-accent-primary">{{ item.title }}</a>
-                  <span class="shrink-0 rounded-full bg-light-bg-tertiary dark:bg-dark-bg-tertiary px-2 py-1 text-xs capitalize text-light-font-secondary dark:text-dark-font-secondary">{{ item.type }}</span>
+                  <a
+                    [routerLink]="['/items', item.id]"
+                    class="truncate no-underline text-base font-medium text-light-font dark:text-dark-font hover:text-accent-primary"
+                    >{{ item.title }}</a
+                  >
+                  <span
+                    class="shrink-0 rounded-full bg-light-bg-tertiary dark:bg-dark-bg-tertiary px-2 py-1 text-xs capitalize text-light-font-secondary dark:text-dark-font-secondary"
+                    >{{ item.type }}</span
+                  >
                 </div>
                 <div class="flex shrink-0 gap-2">
-                  <button (click)="startBacklogItem(item.id)" class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary">
+                  <button
+                    (click)="startBacklogItem(item.id)"
+                    class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
+                  >
                     Add to currently watching
                   </button>
-                  <button (click)="dropBacklogItem(item.id)" class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary">
+                  <button
+                    (click)="dropBacklogItem(item.id)"
+                    class="px-3 py-1.5 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:bg-light-bg-tertiary dark:hover:bg-dark-bg-tertiary"
+                  >
                     Drop
                   </button>
                 </div>
@@ -85,11 +112,15 @@ import { ItemType } from '../../models/item.model';
             }
           </div>
         } @else {
-          <p class="p-8 text-center text-light-font-muted dark:text-dark-font-muted bg-light-bg-primary dark:bg-dark-bg-primary rounded-lg">No items in backlog</p>
+          <p
+            class="p-8 text-center text-light-font-muted dark:text-dark-font-muted bg-light-bg-primary dark:bg-dark-bg-primary rounded-lg"
+          >
+            No items in backlog
+          </p>
         }
       </div>
     </div>
-  `
+  `,
 })
 export class HomeComponent {
   private roundRobinService = inject(RoundRobinService);
@@ -98,14 +129,17 @@ export class HomeComponent {
   nextSeries = this.roundRobinService.nextSeries;
   nextMovie = this.roundRobinService.nextMovie;
   backlogItems = computed(() =>
-    this.watchListService.items()
-      .filter(item => item.status === 'not-started')
-      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+    this.watchListService
+      .items()
+      .filter((item) => item.status === 'not-started')
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
   );
 
   protected hasSeries = computed(() => this.hasItemType('series'));
   protected hasMovies = computed(() => this.hasItemType('movie'));
-  protected hasInProgressSeries = computed(() => this.watchListService.inProgressSeries().length > 0);
+  protected hasInProgressSeries = computed(
+    () => this.watchListService.inProgressSeries().length > 0,
+  );
 
   markSeriesWatched(): void {
     const series = this.nextSeries();
diff --git a/src/app/components/item-card/item-card.component.ts b/src/app/components/item-card/item-card.component.ts
index 5cec115..28d4844 100644
--- a/src/app/components/item-card/item-card.component.ts
+++ b/src/app/components/item-card/item-card.component.ts
@@ -11,19 +11,26 @@ import { statusBadgeClass } from '../../utils/status.utils';
   selector: 'app-item-card',
   imports: [CommonModule, RouterLink, ProgressBarComponent, TimeAgoComponent],
   template: `
-    <div class="border border-light-border dark:border-dark-border rounded-lg p-4 mb-4 bg-light-bg-secondary dark:bg-dark-bg-secondary shadow-light dark:shadow-dark">
+    <div
+      class="border border-light-border dark:border-dark-border rounded-lg p-4 mb-4 bg-light-bg-secondary dark:bg-dark-bg-secondary shadow-light dark:shadow-dark"
+    >
       <div class="flex justify-between items-center mb-2">
         <h3 class="m-0 text-lg">
-          <a [routerLink]="['/items', item().id]" class="no-underline text-light-font dark:text-dark-font hover:text-accent-primary">{{ item().title }}</a>
+          <a
+            [routerLink]="['/items', item().id]"
+            class="no-underline text-light-font dark:text-dark-font hover:text-accent-primary"
+            >{{ item().title }}</a
+          >
         </h3>
-        <span class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary px-2 py-1 rounded text-xs capitalize">{{ item().type }}</span>
+        <span
+          class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary px-2 py-1 rounded text-xs capitalize"
+          >{{ item().type }}</span
+        >
       </div>
 
       @if (item().type === 'series' && item().progress) {
         <div class="my-2 text-sm text-light-font-secondary dark:text-dark-font-secondary">
-          <span class="season-info">
-            Season {{ item().progress!.season }}
-          </span>
+          <span class="season-info"> Season {{ item().progress!.season }} </span>
           <span class="episode-info ml-2">
             • Episode {{ item().progress!.episode }}
             @if (currentSeasonTotalEpisodes() !== undefined) {
@@ -31,42 +38,52 @@ import { statusBadgeClass } from '../../utils/status.utils';
             }
           </span>
           @if (progressPercent() !== null) {
-            <span class="ml-2">
-              ({{ progressPercent() }}% complete)
-            </span>
+            <span class="ml-2"> ({{ progressPercent() }}% complete) </span>
           }
         </div>
       }
 
       @if (progressPercent() !== null) {
-        <app-progress-bar
-          [percentage]="progressPercent()!"
-          />
+        <app-progress-bar [percentage]="progressPercent()!" />
       }
 
       <div class="flex gap-4 my-2 text-sm">
-        <span class="px-2 py-1 rounded font-medium capitalize"
-          [ngClass]="statusBadgeClass(true, item().status)">
+        <span
+          class="px-2 py-1 rounded font-medium capitalize"
+          [ngClass]="statusBadgeClass(true, item().status)"
+        >
           {{ item().status }}
         </span>
         <app-time-ago [date]="lastWatchedDate()" />
       </div>
 
       <div class="flex gap-2 mt-2">
-        <button (click)="markWatched.emit()" [disabled]="item().status === 'completed' || item().status === 'dropped'" class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:not-disabled:bg-light-bg-tertiary dark:hover:not-disabled:bg-dark-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed">
+        <button
+          (click)="markWatched.emit()"
+          [disabled]="item().status === 'completed' || item().status === 'dropped'"
+          class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:not-disabled:bg-light-bg-tertiary dark:hover:not-disabled:bg-dark-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed"
+        >
           Mark Watched
         </button>
         @if (item().type === 'series') {
-          <button (click)="markCompleted.emit()" [disabled]="item().status === 'completed' || item().status === 'dropped'" class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:not-disabled:bg-light-bg-tertiary dark:hover:not-disabled:bg-dark-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed">
+          <button
+            (click)="markCompleted.emit()"
+            [disabled]="item().status === 'completed' || item().status === 'dropped'"
+            class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:not-disabled:bg-light-bg-tertiary dark:hover:not-disabled:bg-dark-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed"
+          >
             Mark Completed
           </button>
         }
-        <button (click)="markDropped.emit()" [disabled]="item().status === 'completed' || item().status === 'dropped'" class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:not-disabled:bg-light-bg-tertiary dark:hover:not-disabled:bg-dark-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed">
+        <button
+          (click)="markDropped.emit()"
+          [disabled]="item().status === 'completed' || item().status === 'dropped'"
+          class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font cursor-pointer text-sm hover:not-disabled:bg-light-bg-tertiary dark:hover:not-disabled:bg-dark-bg-tertiary disabled:opacity-50 disabled:cursor-not-allowed"
+        >
           Drop
         </button>
       </div>
     </div>
-    `
+  `,
 })
 export class ItemCardComponent {
   private watchListService = inject(WatchListService);
@@ -85,7 +102,7 @@ export class ItemCardComponent {
     const item = this.item();
     if (!item.progress?.seasons) return undefined;
     const currentSeason = item.progress.seasons.find(
-      (s) => s.seasonNumber === item.progress!.season
+      (s) => s.seasonNumber === item.progress!.season,
     );
     return currentSeason?.totalEpisodes;
   });
@@ -94,4 +111,3 @@ export class ItemCardComponent {
     return this.watchListService.getMostRecentWatchDate(this.item());
   });
 }
-
diff --git a/src/app/components/item-detail/item-detail.component.ts b/src/app/components/item-detail/item-detail.component.ts
index 6cf8c3e..79b9e25 100644
--- a/src/app/components/item-detail/item-detail.component.ts
+++ b/src/app/components/item-detail/item-detail.component.ts
@@ -8,7 +8,7 @@ import {
   buildItemMutationInput,
   createDefaultItemFormValue,
   createItemFormValue,
-  ItemFormValue
+  ItemFormValue,
 } from '../../domain/item-form';
 
 @Component({
@@ -22,10 +22,28 @@ import {
             <h2 class="mt-0">Edit Item</h2>
             <div class="flex gap-2">
               @if (!confirmDelete()) {
-                <button type="button" (click)="confirmDelete.set(true)" class="px-6 py-3 border border-accent-danger rounded bg-transparent text-accent-danger cursor-pointer hover:bg-accent-danger hover:text-white">Delete</button>
+                <button
+                  type="button"
+                  (click)="confirmDelete.set(true)"
+                  class="px-6 py-3 border border-accent-danger rounded bg-transparent text-accent-danger cursor-pointer hover:bg-accent-danger hover:text-white"
+                >
+                  Delete
+                </button>
               } @else {
-                <button type="button" (click)="deleteItem()" class="px-6 py-3 border border-accent-danger rounded bg-accent-danger text-white cursor-pointer hover:bg-accent-danger-hover animate-pulse">Confirm Delete?</button>
-                <button type="button" (click)="cancelDelete()" class="px-6 py-3 bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font border border-light-border dark:border-dark-border rounded cursor-pointer">Cancel</button>
+                <button
+                  type="button"
+                  (click)="deleteItem()"
+                  class="px-6 py-3 border border-accent-danger rounded bg-accent-danger text-white cursor-pointer hover:bg-accent-danger-hover animate-pulse"
+                >
+                  Confirm Delete?
+                </button>
+                <button
+                  type="button"
+                  (click)="cancelDelete()"
+                  class="px-6 py-3 bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font border border-light-border dark:border-dark-border rounded cursor-pointer"
+                >
+                  Cancel
+                </button>
               }
             </div>
           </div>
@@ -38,7 +56,6 @@ import {
             [disableSubmitWhenPristine]="true"
             (submitted)="saveChanges($event)"
           />
-
         </div>
       } @else {
         <div class="text-center px-8 py-16">
@@ -47,7 +64,7 @@ import {
         </div>
       }
     </div>
-    `
+  `,
 })
 export class ItemDetailComponent {
   private route = inject(ActivatedRoute);
@@ -59,7 +76,7 @@ export class ItemDetailComponent {
 
   readonly item = computed<Item | null>(() => {
     const id = this.route.snapshot.paramMap.get('id');
-    return id ? this.watchListService.items().find((item) => item.id === id) ?? null : null;
+    return id ? (this.watchListService.items().find((item) => item.id === id) ?? null) : null;
   });
   readonly formValue = computed(() => {
     const currentItem = this.item();
@@ -73,7 +90,7 @@ export class ItemDetailComponent {
 
     const updated: Item = {
       ...currentItem,
-      ...buildItemMutationInput(formValue)
+      ...buildItemMutationInput(formValue),
     };
 
     this.watchListService.updateItem(updated);
diff --git a/src/app/components/item-form/item-form.component.spec.ts b/src/app/components/item-form/item-form.component.spec.ts
index 50197b7..8f0eb1a 100644
--- a/src/app/components/item-form/item-form.component.spec.ts
+++ b/src/app/components/item-form/item-form.component.spec.ts
@@ -7,8 +7,8 @@ describe('ItemFormComponent', () => {
     {
       id: 'ungrouped',
       name: 'Ungrouped',
-      order: 0
-    }
+      order: 0,
+    },
   ];
 
   it('applies the selected status color on first render', async () => {
@@ -22,14 +22,16 @@ describe('ItemFormComponent', () => {
       season: 1,
       episode: 8,
       seasons: [{ seasonNumber: 1, totalEpisodes: 10 }],
-      startImmediately: false
+      startImmediately: false,
     });
 
     fixture.detectChanges();
     await fixture.whenStable();
     fixture.detectChanges();
 
-    const buttons = Array.from(fixture.nativeElement.querySelectorAll('button')) as HTMLButtonElement[];
+    const buttons = Array.from(
+      fixture.nativeElement.querySelectorAll('button'),
+    ) as HTMLButtonElement[];
     const completedButton = buttons.find((button) => button.textContent?.trim() === 'Completed');
 
     expect(completedButton).toBeDefined();
@@ -49,28 +51,33 @@ describe('ItemFormComponent', () => {
       season: 1,
       episode: 8,
       seasons: [{ seasonNumber: 1, totalEpisodes: 10 }],
-      startImmediately: false
+      startImmediately: false,
     });
 
     fixture.detectChanges();
     await fixture.whenStable();
     fixture.detectChanges();
 
-    const submitButton = fixture.nativeElement.querySelector('button[type="submit"]') as HTMLButtonElement;
+    const submitButton = fixture.nativeElement.querySelector(
+      'button[type="submit"]',
+    ) as HTMLButtonElement;
     expect(submitButton.disabled).toBe(true);
   });
 
   it('shows the duplicate title hint when provided', async () => {
     const fixture = TestBed.createComponent(ItemFormComponent);
     fixture.componentRef.setInput('groups', groups);
-    fixture.componentRef.setInput('duplicateTitleHint', 'An item named "Existing Show" already exists.');
+    fixture.componentRef.setInput(
+      'duplicateTitleHint',
+      'An item named "Existing Show" already exists.',
+    );
 
     fixture.detectChanges();
     await fixture.whenStable();
     fixture.detectChanges();
 
     expect(fixture.nativeElement.textContent).toContain(
-      'An item named "Existing Show" already exists.'
+      'An item named "Existing Show" already exists.',
     );
   });
 
@@ -94,22 +101,22 @@ describe('ItemFormComponent', () => {
         title: 'Star Wars',
         type: 'movie',
         year: '1977',
-        overview: 'A space opera.'
-      }
+        overview: 'A space opera.',
+      },
     ]);
     const selected: unknown[] = [];
-    fixture.componentInstance.suggestionSelected.subscribe((suggestion) => selected.push(suggestion));
+    fixture.componentInstance.suggestionSelected.subscribe((suggestion) =>
+      selected.push(suggestion),
+    );
 
     fixture.detectChanges();
     await fixture.whenStable();
     fixture.detectChanges();
 
     const buttons = Array.from(
-      fixture.nativeElement.querySelectorAll('button')
+      fixture.nativeElement.querySelectorAll('button'),
     ) as HTMLButtonElement[];
-    const suggestionButton = buttons.find((button) =>
-      button.textContent?.includes('Star Wars')
-    );
+    const suggestionButton = buttons.find((button) => button.textContent?.includes('Star Wars'));
 
     expect(suggestionButton).toBeDefined();
     suggestionButton?.click();
@@ -122,8 +129,8 @@ describe('ItemFormComponent', () => {
         title: 'Star Wars',
         type: 'movie',
         year: '1977',
-        overview: 'A space opera.'
-      }
+        overview: 'A space opera.',
+      },
     ]);
   });
 
@@ -138,7 +145,7 @@ describe('ItemFormComponent', () => {
       season: 1,
       episode: 1,
       seasons: [{ seasonNumber: 1, totalEpisodes: 10 }],
-      startImmediately: false
+      startImmediately: false,
     });
 
     fixture.detectChanges();
@@ -160,7 +167,7 @@ describe('ItemFormComponent', () => {
       season: 1,
       episode: 1,
       seasons: [],
-      startImmediately: false
+      startImmediately: false,
     });
 
     fixture.detectChanges();
@@ -173,10 +180,10 @@ describe('ItemFormComponent', () => {
           {
             seasonNumber: 1,
             totalEpisodes: 10,
-            firstEpisodeAirDate: '2026-05-01'
-          }
-        ]
-      }
+            firstEpisodeAirDate: '2026-05-01',
+          },
+        ],
+      },
     });
     fixture.detectChanges();
     await fixture.whenStable();
@@ -185,8 +192,8 @@ describe('ItemFormComponent', () => {
       {
         seasonNumber: 1,
         totalEpisodes: 10,
-        firstEpisodeAirDate: '2026-05-01'
-      }
+        firstEpisodeAirDate: '2026-05-01',
+      },
     ]);
   });
 });
diff --git a/src/app/components/item-form/item-form.component.ts b/src/app/components/item-form/item-form.component.ts
index a93f1d0..72041c9 100644
--- a/src/app/components/item-form/item-form.component.ts
+++ b/src/app/components/item-form/item-form.component.ts
@@ -6,13 +6,13 @@ import {
   createDefaultItemFormValue,
   ItemFormValue,
   normalizeFormValueForType,
-  prepareSubmittedItemFormValue
+  prepareSubmittedItemFormValue,
 } from '../../domain/item-form';
 import {
   ITEM_STATUSES,
   ITEM_STATUS_LABELS,
   ITEM_TYPES,
-  ITEM_TYPE_LABELS
+  ITEM_TYPE_LABELS,
 } from '../../domain/item.constants';
 import { TmdbSuggestion } from '../../models/tmdb-suggestion.model';
 
@@ -25,9 +25,15 @@ export interface ItemFormAutofillPatch {
   selector: 'app-item-form',
   imports: [CommonModule, FormsModule],
   template: `
-    <form (ngSubmit)="submit()" #itemForm="ngForm" class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary p-8 rounded-lg">
+    <form
+      (ngSubmit)="submit()"
+      #itemForm="ngForm"
+      class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary p-8 rounded-lg"
+    >
       <div class="mb-6">
-        <label for="title" class="block mb-2 font-medium text-light-font dark:text-dark-font">Title *</label>
+        <label for="title" class="block mb-2 font-medium text-light-font dark:text-dark-font"
+          >Title *</label
+        >
         <input
           type="text"
           id="title"
@@ -44,9 +50,15 @@ export interface ItemFormAutofillPatch {
           <div class="text-accent-secondary text-sm mt-1">{{ duplicateTitleHint() }}</div>
         }
         @if (showSuggestions()) {
-          <div class="mt-3 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary overflow-hidden">
+          <div
+            class="mt-3 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary overflow-hidden"
+          >
             @if (suggestionsLoading()) {
-              <div class="px-3 py-2 text-sm text-light-font-secondary dark:text-dark-font-secondary">Searching TMDB...</div>
+              <div
+                class="px-3 py-2 text-sm text-light-font-secondary dark:text-dark-font-secondary"
+              >
+                Searching TMDB...
+              </div>
             } @else if (suggestionsError()) {
               <div class="px-3 py-2 text-sm text-accent-secondary">{{ suggestionsError() }}</div>
             } @else if (suggestions().length > 0) {
@@ -59,12 +71,20 @@ export interface ItemFormAutofillPatch {
                   <span class="block text-light-font dark:text-dark-font font-medium">
                     {{ suggestion.title }}
                     @if (suggestion.year) {
-                      <span class="text-light-font-muted dark:text-dark-font-muted font-normal">({{ suggestion.year }})</span>
+                      <span class="text-light-font-muted dark:text-dark-font-muted font-normal"
+                        >({{ suggestion.year }})</span
+                      >
                     }
                   </span>
-                  <span class="block text-sm text-light-font-secondary dark:text-dark-font-secondary">{{ itemTypeLabels[suggestion.type] }}</span>
+                  <span
+                    class="block text-sm text-light-font-secondary dark:text-dark-font-secondary"
+                    >{{ itemTypeLabels[suggestion.type] }}</span
+                  >
                   @if (suggestion.overview) {
-                    <span class="block text-sm text-light-font-muted dark:text-dark-font-muted mt-1 line-clamp-2">{{ suggestion.overview }}</span>
+                    <span
+                      class="block text-sm text-light-font-muted dark:text-dark-font-muted mt-1 line-clamp-2"
+                      >{{ suggestion.overview }}</span
+                    >
                   }
                 </button>
               }
@@ -74,7 +94,9 @@ export interface ItemFormAutofillPatch {
       </div>
 
       <div class="mb-6">
-        <label for="type" class="block mb-2 font-medium text-light-font dark:text-dark-font">Type *</label>
+        <label for="type" class="block mb-2 font-medium text-light-font dark:text-dark-font"
+          >Type *</label
+        >
         <select
           id="type"
           [ngModel]="formValue().type"
@@ -89,7 +111,9 @@ export interface ItemFormAutofillPatch {
       </div>
 
       <div class="mb-6">
-        <label for="groupId" class="block mb-2 font-medium text-light-font dark:text-dark-font">Group *</label>
+        <label for="groupId" class="block mb-2 font-medium text-light-font dark:text-dark-font"
+          >Group *</label
+        >
         <select
           id="groupId"
           [ngModel]="formValue().groupId"
@@ -139,7 +163,9 @@ export interface ItemFormAutofillPatch {
       @if (formValue().type === 'series') {
         <div class="border-t border-light-border dark:border-dark-border pt-6 mt-6">
           <div class="mb-6">
-            <label for="season" class="block mb-2 font-medium text-light-font dark:text-dark-font">Season</label>
+            <label for="season" class="block mb-2 font-medium text-light-font dark:text-dark-font"
+              >Season</label
+            >
             <input
               type="number"
               id="season"
@@ -151,7 +177,9 @@ export interface ItemFormAutofillPatch {
             />
           </div>
           <div class="mb-6">
-            <label for="episode" class="block mb-2 font-medium text-light-font dark:text-dark-font">Episode</label>
+            <label for="episode" class="block mb-2 font-medium text-light-font dark:text-dark-font"
+              >Episode</label
+            >
             <input
               type="number"
               id="episode"
@@ -191,7 +219,9 @@ export interface ItemFormAutofillPatch {
                   />
                 </div>
                 <div class="flex-1">
-                  <label for="seasonFirstAirDate{{ i }}" class="block mb-1 text-sm">First episode air date</label>
+                  <label for="seasonFirstAirDate{{ i }}" class="block mb-1 text-sm"
+                    >First episode air date</label
+                  >
                   <input
                     type="date"
                     id="seasonFirstAirDate{{ i }}"
@@ -222,7 +252,9 @@ export interface ItemFormAutofillPatch {
       }
 
       @if (showDirtyState() && isDirty()) {
-        <div class="mb-4 px-3 py-2 rounded bg-light-bg-secondary dark:bg-dark-bg-secondary border border-accent-secondary text-accent-secondary text-sm">
+        <div
+          class="mb-4 px-3 py-2 rounded bg-light-bg-secondary dark:bg-dark-bg-secondary border border-accent-secondary text-accent-secondary text-sm"
+        >
           You have unsaved changes
         </div>
       }
@@ -244,7 +276,7 @@ export interface ItemFormAutofillPatch {
         </button>
       </div>
     </form>
-  `
+  `,
 })
 export class ItemFormComponent {
   readonly groups = input.required<Group[]>();
@@ -289,7 +321,7 @@ export class ItemFormComponent {
   });
 
   readonly showSuggestions = computed(
-    () => this.suggestionsLoading() || !!this.suggestionsError() || this.suggestions().length > 0
+    () => this.suggestionsLoading() || !!this.suggestionsError() || this.suggestions().length > 0,
   );
 
   private lastAppliedAutofillPatchId: number | null = null;
@@ -310,8 +342,8 @@ export class ItemFormComponent {
     this.formValue.update((value) =>
       normalizeFormValueForType({
         ...value,
-        type
-      })
+        type,
+      }),
     );
   }
 
@@ -325,7 +357,7 @@ export class ItemFormComponent {
 
     this.submitted.emit({
       ...submittedValue,
-      title: submittedValue.title.trim()
+      title: submittedValue.title.trim(),
     });
   }
 
@@ -346,8 +378,8 @@ export class ItemFormComponent {
       normalizeFormValueForType({
         ...value,
         title: suggestion.title,
-        type: suggestion.type
-      })
+        type: suggestion.type,
+      }),
     );
     this.suggestionSelected.emit(suggestion);
   }
@@ -377,7 +409,10 @@ export class ItemFormComponent {
       const nextSeasonNumber = this.getNextSeasonNumber(value.seasons);
       return {
         ...value,
-        seasons: [...value.seasons, { seasonNumber: nextSeasonNumber, totalEpisodes: undefined as number | undefined }]
+        seasons: [
+          ...value.seasons,
+          { seasonNumber: nextSeasonNumber, totalEpisodes: undefined as number | undefined },
+        ],
       };
     });
   }
@@ -414,7 +449,7 @@ export class ItemFormComponent {
       if (newSeasons[index]) {
         newSeasons[index] = {
           ...newSeasons[index],
-          firstEpisodeAirDate: normalized
+          firstEpisodeAirDate: normalized,
         };
       }
       return { ...value, seasons: newSeasons };
@@ -424,7 +459,7 @@ export class ItemFormComponent {
   removeSeason(seasonNumber: number): void {
     this.formValue.update((value) => ({
       ...value,
-      seasons: value.seasons.filter((s) => s.seasonNumber !== seasonNumber)
+      seasons: value.seasons.filter((s) => s.seasonNumber !== seasonNumber),
     }));
   }
 
@@ -461,7 +496,9 @@ export class ItemFormComponent {
     return Number.isFinite(parsed) && parsed >= 1 ? parsed : fallback;
   }
 
-  protected toOptionalPositiveNumber(value: string | number | null | undefined): number | undefined {
+  protected toOptionalPositiveNumber(
+    value: string | number | null | undefined,
+  ): number | undefined {
     if (value === '' || value === null || value === undefined) {
       return undefined;
     }
@@ -482,8 +519,8 @@ export class ItemFormComponent {
     this.formValue.update((value) =>
       normalizeFormValueForType({
         ...value,
-        ...patch
-      })
+        ...patch,
+      }),
     );
   }
 }
diff --git a/src/app/components/item-list/item-list.component.ts b/src/app/components/item-list/item-list.component.ts
index 37fbfc1..9c80b0f 100644
--- a/src/app/components/item-list/item-list.component.ts
+++ b/src/app/components/item-list/item-list.component.ts
@@ -16,38 +16,80 @@ import { ItemCardComponent } from '../item-card/item-card.component';
       <div class="flex justify-between items-center mb-8">
         <h1 class="text-2xl m-0 text-light-font dark:text-dark-font">All Items</h1>
         <div class="flex gap-4">
-          <select [ngModel]="groupFilter()" (ngModelChange)="groupFilter.set($event)"
-            class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font">
+          <select
+            [ngModel]="groupFilter()"
+            (ngModelChange)="groupFilter.set($event)"
+            class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font"
+          >
             <option value="">All Groups</option>
             @for (group of groups(); track group.id) {
               <option [value]="group.id">{{ group.name }}</option>
             }
           </select>
-          <input type="text" placeholder="Search by name..." [ngModel]="searchFilter()" (ngModelChange)="searchFilter.set($event)"
-            class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font w-64" />
-          <a [routerLink]="['/items/add']" class="px-6 py-3 bg-accent-primary text-white no-underline rounded font-medium hover:bg-accent-primary-hover">Add Item</a>
+          <input
+            type="text"
+            placeholder="Search by name..."
+            [ngModel]="searchFilter()"
+            (ngModelChange)="searchFilter.set($event)"
+            class="px-4 py-2 border border-light-border dark:border-dark-border rounded bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font w-64"
+          />
+          <a
+            [routerLink]="['/items/add']"
+            class="px-6 py-3 bg-accent-primary text-white no-underline rounded font-medium hover:bg-accent-primary-hover"
+            >Add Item</a
+          >
         </div>
       </div>
 
       <div class="flex gap-4 mb-8 p-4 bg-light-bg-primary dark:bg-dark-bg-primary rounded">
         <label class="flex items-center gap-2 cursor-pointer">
-          <input type="radio" name="statusFilter" value="all" [ngModel]="statusFilter()" (ngModelChange)="statusFilter.set($event)" />
+          <input
+            type="radio"
+            name="statusFilter"
+            value="all"
+            [ngModel]="statusFilter()"
+            (ngModelChange)="statusFilter.set($event)"
+          />
           All
         </label>
         <label class="flex items-center gap-2 cursor-pointer">
-          <input type="radio" name="statusFilter" value="not-started" [ngModel]="statusFilter()" (ngModelChange)="statusFilter.set($event)" />
+          <input
+            type="radio"
+            name="statusFilter"
+            value="not-started"
+            [ngModel]="statusFilter()"
+            (ngModelChange)="statusFilter.set($event)"
+          />
           Not Started
         </label>
         <label class="flex items-center gap-2 cursor-pointer">
-          <input type="radio" name="statusFilter" value="in-progress" [ngModel]="statusFilter()" (ngModelChange)="statusFilter.set($event)" />
+          <input
+            type="radio"
+            name="statusFilter"
+            value="in-progress"
+            [ngModel]="statusFilter()"
+            (ngModelChange)="statusFilter.set($event)"
+          />
           In Progress
         </label>
         <label class="flex items-center gap-2 cursor-pointer">
-          <input type="radio" name="statusFilter" value="completed" [ngModel]="statusFilter()" (ngModelChange)="statusFilter.set($event)" />
+          <input
+            type="radio"
+            name="statusFilter"
+            value="completed"
+            [ngModel]="statusFilter()"
+            (ngModelChange)="statusFilter.set($event)"
+          />
           Completed
         </label>
         <label class="flex items-center gap-2 cursor-pointer">
-          <input type="radio" name="statusFilter" value="dropped" [ngModel]="statusFilter()" (ngModelChange)="statusFilter.set($event)" />
+          <input
+            type="radio"
+            name="statusFilter"
+            value="dropped"
+            [ngModel]="statusFilter()"
+            (ngModelChange)="statusFilter.set($event)"
+          />
           Dropped
         </label>
       </div>
@@ -59,7 +101,7 @@ import { ItemCardComponent } from '../item-card/item-card.component';
             (markWatched)="markWatched(item.id)"
             (markCompleted)="markCompleted(item.id)"
             (markDropped)="markDropped(item.id)"
-            />
+          />
         } @empty {
           <p class="text-center text-light-font-muted dark:text-dark-font-muted p-8">
             No items found
@@ -67,7 +109,7 @@ import { ItemCardComponent } from '../item-card/item-card.component';
         }
       </div>
     </div>
-  `
+  `,
 })
 export class ItemListComponent {
   private storageService = inject(StorageService);
@@ -92,18 +134,20 @@ export class ItemListComponent {
     const groupFilter = this.groupFilter();
 
     if (search) {
-      items = items.filter(item => item.title.toLowerCase().includes(search));
+      items = items.filter((item) => item.title.toLowerCase().includes(search));
     }
 
     if (statusFilter !== 'all') {
-      items = items.filter(item => item.status === statusFilter);
+      items = items.filter((item) => item.status === statusFilter);
     }
 
     if (groupFilter) {
-      items = items.filter(item => item.groupId === groupFilter);
+      items = items.filter((item) => item.groupId === groupFilter);
     }
 
-    return [...items].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+    return [...items].sort(
+      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    );
   });
 
   markWatched(itemId: string): void {
diff --git a/src/app/components/progress-bar/progress-bar.component.ts b/src/app/components/progress-bar/progress-bar.component.ts
index 830ed94..7bc8b62 100644
--- a/src/app/components/progress-bar/progress-bar.component.ts
+++ b/src/app/components/progress-bar/progress-bar.component.ts
@@ -1,20 +1,21 @@
 import { Component, input } from '@angular/core';
 
-
 @Component({
   selector: 'app-progress-bar',
   template: `
     <div class="w-full h-2 bg-light-border dark:bg-dark-border rounded overflow-hidden">
-      <div class="h-full bg-accent-success transition-[width] duration-300 ease-in-out flex items-center justify-center" [style.width.%]="percentage()">
+      <div
+        class="h-full bg-accent-success transition-[width] duration-300 ease-in-out flex items-center justify-center"
+        [style.width.%]="percentage()"
+      >
         @if (showText()) {
           <span class="text-[10px] text-white font-bold">{{ percentage() }}%</span>
         }
       </div>
     </div>
-    `
+  `,
 })
 export class ProgressBarComponent {
   percentage = input.required<number>();
   showText = input<boolean>(false);
 }
-
diff --git a/src/app/components/settings/settings.component.spec.ts b/src/app/components/settings/settings.component.spec.ts
index d110529..c6a4fcf 100644
--- a/src/app/components/settings/settings.component.spec.ts
+++ b/src/app/components/settings/settings.component.spec.ts
@@ -11,7 +11,7 @@ describe('SettingsComponent', () => {
       key: vi.fn(() => credentials.key),
       getCredential: vi.fn(() => credentials.credential),
       saveCredentials: vi.fn(),
-      clearCredentials: vi.fn()
+      clearCredentials: vi.fn(),
     };
 
     TestBed.configureTestingModule({
@@ -20,14 +20,14 @@ describe('SettingsComponent', () => {
           provide: ImportExportService,
           useValue: {
             exportData: vi.fn(),
-            importData: vi.fn()
-          }
+            importData: vi.fn(),
+          },
         },
         {
           provide: TmdbSettingsService,
-          useValue: tmdbSettingsService
-        }
-      ]
+          useValue: tmdbSettingsService,
+        },
+      ],
     });
 
     return tmdbSettingsService;
@@ -37,7 +37,7 @@ describe('SettingsComponent', () => {
     configure({
       token: 'read-token',
       key: 'api-key',
-      credential: { type: 'read-token', value: 'read-token' }
+      credential: { type: 'read-token', value: 'read-token' },
     });
     const fixture = TestBed.createComponent(SettingsComponent);
 
@@ -52,7 +52,7 @@ describe('SettingsComponent', () => {
     configure({
       token: '',
       key: '',
-      credential: null
+      credential: null,
     });
     const fixture = TestBed.createComponent(SettingsComponent);
 
@@ -60,13 +60,15 @@ describe('SettingsComponent', () => {
     await fixture.whenStable();
 
     const logo = fixture.nativeElement.querySelector('img[alt="TMDB"]') as HTMLImageElement;
-    const link = fixture.nativeElement.querySelector('a[href="https://www.themoviedb.org"]') as HTMLAnchorElement;
+    const link = fixture.nativeElement.querySelector(
+      'a[href="https://www.themoviedb.org"]',
+    ) as HTMLAnchorElement;
 
     expect(logo).toBeDefined();
     expect(logo.src).toContain('/assets/2/v4/logos/v2/blue_square_2-');
     expect(link).toBeDefined();
     expect(fixture.nativeElement.textContent).toContain(
-      'This product uses the TMDB API but is not endorsed or certified by TMDB.'
+      'This product uses the TMDB API but is not endorsed or certified by TMDB.',
     );
   });
 
@@ -74,7 +76,7 @@ describe('SettingsComponent', () => {
     const tmdbSettingsService = configure({
       token: 'read-token',
       key: 'api-key',
-      credential: { type: 'read-token', value: 'read-token' }
+      credential: { type: 'read-token', value: 'read-token' },
     });
     const fixture = TestBed.createComponent(SettingsComponent);
 
@@ -82,7 +84,7 @@ describe('SettingsComponent', () => {
 
     expect(tmdbSettingsService.saveCredentials).toHaveBeenCalledWith('read-token', 'api-key');
     expect(fixture.componentInstance.tmdbSettingsMessage()).toBe(
-      'TMDB read access token saved and will be used first.'
+      'TMDB read access token saved and will be used first.',
     );
   });
 
@@ -90,7 +92,7 @@ describe('SettingsComponent', () => {
     const tmdbSettingsService = configure({
       token: 'read-token',
       key: 'api-key',
-      credential: { type: 'read-token', value: 'read-token' }
+      credential: { type: 'read-token', value: 'read-token' },
     });
     const fixture = TestBed.createComponent(SettingsComponent);
 
diff --git a/src/app/components/settings/settings.component.ts b/src/app/components/settings/settings.component.ts
index 2bce29e..37ee714 100644
--- a/src/app/components/settings/settings.component.ts
+++ b/src/app/components/settings/settings.component.ts
@@ -12,19 +12,30 @@ import { TmdbSettingsService } from '../../services/tmdb-settings.service';
       <h1 class="text-2xl mb-8 text-light-font dark:text-dark-font">Settings</h1>
 
       <div class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary p-6 rounded-lg mb-6">
-        <h2 class="text-xl mt-0 mb-4 text-light-font-secondary dark:text-dark-font-secondary">TMDB</h2>
+        <h2 class="text-xl mt-0 mb-4 text-light-font-secondary dark:text-dark-font-secondary">
+          TMDB
+        </h2>
         <div class="mb-4">
-          <a href="https://www.themoviedb.org" target="_blank" rel="noopener noreferrer" class="inline-block">
+          <a
+            href="https://www.themoviedb.org"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-block"
+          >
             <img
               src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg"
               alt="TMDB"
               class="h-12 w-auto"
             />
           </a>
-          <p class="mt-3 mb-0 text-sm text-light-font-secondary dark:text-dark-font-secondary">This product uses the TMDB API but is not endorsed or certified by TMDB.</p>
+          <p class="mt-3 mb-0 text-sm text-light-font-secondary dark:text-dark-font-secondary">
+            This product uses the TMDB API but is not endorsed or certified by TMDB.
+          </p>
         </div>
         <div class="mb-4">
-          <label for="tmdbToken" class="block mb-2 font-medium text-light-font dark:text-dark-font">API Read Access Token</label>
+          <label for="tmdbToken" class="block mb-2 font-medium text-light-font dark:text-dark-font"
+            >API Read Access Token</label
+          >
           <input
             id="tmdbToken"
             type="password"
@@ -33,10 +44,14 @@ import { TmdbSettingsService } from '../../services/tmdb-settings.service';
             autocomplete="off"
             class="w-full p-3 border border-light-border dark:border-dark-border rounded text-base box-border bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font focus:outline-none focus:border-accent-primary focus:shadow-[0_0_0_2px_rgba(0,123,255,0.25)]"
           />
-          <p class="mt-2 mb-0 text-sm text-light-font-secondary dark:text-dark-font-secondary">Preferred for fetching movie and series suggestions while adding items.</p>
+          <p class="mt-2 mb-0 text-sm text-light-font-secondary dark:text-dark-font-secondary">
+            Preferred for fetching movie and series suggestions while adding items.
+          </p>
         </div>
         <div class="mb-4">
-          <label for="tmdbApiKey" class="block mb-2 font-medium text-light-font dark:text-dark-font">API Key</label>
+          <label for="tmdbApiKey" class="block mb-2 font-medium text-light-font dark:text-dark-font"
+            >API Key</label
+          >
           <input
             id="tmdbApiKey"
             type="password"
@@ -45,13 +60,21 @@ import { TmdbSettingsService } from '../../services/tmdb-settings.service';
             autocomplete="off"
             class="w-full p-3 border border-light-border dark:border-dark-border rounded text-base box-border bg-light-bg-secondary dark:bg-dark-bg-secondary text-light-font dark:text-dark-font focus:outline-none focus:border-accent-primary focus:shadow-[0_0_0_2px_rgba(0,123,255,0.25)]"
           />
-          <p class="mt-2 mb-0 text-sm text-light-font-secondary dark:text-dark-font-secondary">Used as a fallback when no read access token is saved.</p>
+          <p class="mt-2 mb-0 text-sm text-light-font-secondary dark:text-dark-font-secondary">
+            Used as a fallback when no read access token is saved.
+          </p>
         </div>
         <div class="flex flex-wrap gap-3">
-          <button (click)="saveTmdbToken()" class="px-6 py-3 border-none rounded cursor-pointer text-base font-medium bg-accent-primary text-white hover:bg-accent-primary-hover">
+          <button
+            (click)="saveTmdbToken()"
+            class="px-6 py-3 border-none rounded cursor-pointer text-base font-medium bg-accent-primary text-white hover:bg-accent-primary-hover"
+          >
             Save Credentials
           </button>
-          <button (click)="clearTmdbToken()" class="px-6 py-3 border-none rounded cursor-pointer text-base font-medium bg-accent-secondary text-white hover:bg-accent-secondary-hover">
+          <button
+            (click)="clearTmdbToken()"
+            class="px-6 py-3 border-none rounded cursor-pointer text-base font-medium bg-accent-secondary text-white hover:bg-accent-secondary-hover"
+          >
             Clear Credentials
           </button>
         </div>
@@ -61,12 +84,19 @@ import { TmdbSettingsService } from '../../services/tmdb-settings.service';
       </div>
 
       <div class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary p-6 rounded-lg mb-6">
-        <h2 class="text-xl mt-0 mb-4 text-light-font-secondary dark:text-dark-font-secondary">Data Management</h2>
+        <h2 class="text-xl mt-0 mb-4 text-light-font-secondary dark:text-dark-font-secondary">
+          Data Management
+        </h2>
         <div class="mb-4 last:mb-0">
-          <button (click)="exportData()" class="px-6 py-3 border-none rounded cursor-pointer text-base font-medium mr-4 bg-accent-success text-white hover:bg-accent-success-hover">
+          <button
+            (click)="exportData()"
+            class="px-6 py-3 border-none rounded cursor-pointer text-base font-medium mr-4 bg-accent-success text-white hover:bg-accent-success-hover"
+          >
             Export Data
           </button>
-          <p class="mt-2 mb-0 text-sm text-light-font-secondary dark:text-dark-font-secondary">Download all your watch list data as a JSON file</p>
+          <p class="mt-2 mb-0 text-sm text-light-font-secondary dark:text-dark-font-secondary">
+            Download all your watch list data as a JSON file
+          </p>
         </div>
         <div class="mb-4 last:mb-0">
           <label class="flex items-center gap-2 cursor-pointer">
@@ -76,18 +106,25 @@ import { TmdbSettingsService } from '../../services/tmdb-settings.service';
               (change)="onFileSelected($event)"
               accept=".json"
               style="display: none"
-              />
-            <button (click)="fileInput.click()" class="px-6 py-3 border-none rounded cursor-pointer text-base font-medium mr-4 bg-accent-info text-white hover:bg-accent-info-hover">
+            />
+            <button
+              (click)="fileInput.click()"
+              class="px-6 py-3 border-none rounded cursor-pointer text-base font-medium mr-4 bg-accent-info text-white hover:bg-accent-info-hover"
+            >
               Import Data
             </button>
           </label>
-          <p class="mt-2 mb-0 text-sm text-light-font-secondary dark:text-dark-font-secondary">Replace all data with imported JSON file</p>
+          <p class="mt-2 mb-0 text-sm text-light-font-secondary dark:text-dark-font-secondary">
+            Replace all data with imported JSON file
+          </p>
         </div>
       </div>
 
       @if (errorMessage()) {
         <div class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary p-6 rounded-lg mb-6">
-          <div class="bg-error-bg-light dark:bg-error-bg-dark text-error-text-light dark:text-error-text-dark p-4 rounded border border-error-border-light dark:border-error-border-dark">
+          <div
+            class="bg-error-bg-light dark:bg-error-bg-dark text-error-text-light dark:text-error-text-dark p-4 rounded border border-error-border-light dark:border-error-border-dark"
+          >
             {{ errorMessage() }}
           </div>
         </div>
@@ -95,13 +132,15 @@ import { TmdbSettingsService } from '../../services/tmdb-settings.service';
 
       @if (successMessage()) {
         <div class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary p-6 rounded-lg mb-6">
-          <div class="bg-success-bg-light dark:bg-success-bg-dark text-success-text-light dark:text-success-text-dark p-4 rounded border border-success-border-light dark:border-success-border-dark">
+          <div
+            class="bg-success-bg-light dark:bg-success-bg-dark text-success-text-light dark:text-success-text-dark p-4 rounded border border-success-border-light dark:border-success-border-dark"
+          >
             {{ successMessage() }}
           </div>
         </div>
       }
     </div>
-    `
+  `,
 })
 export class SettingsComponent {
   private importExportService = inject(ImportExportService);
diff --git a/src/app/components/theme-switcher/theme-switcher.component.ts b/src/app/components/theme-switcher/theme-switcher.component.ts
index 02d5870..7022e4e 100644
--- a/src/app/components/theme-switcher/theme-switcher.component.ts
+++ b/src/app/components/theme-switcher/theme-switcher.component.ts
@@ -12,14 +12,36 @@ import { ThemeService, Theme } from '../../services/theme.service';
     >
       @switch (themeService.theme()) {
         @case ('system') {
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-light-font dark:text-dark-font">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-light-font dark:text-dark-font"
+          >
             <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
             <line x1="8" y1="21" x2="16" y2="21"></line>
             <line x1="12" y1="17" x2="12" y2="21"></line>
           </svg>
         }
         @case ('light') {
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-light-font dark:text-dark-font">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-light-font dark:text-dark-font"
+          >
             <circle cx="12" cy="12" r="5"></circle>
             <line x1="12" y1="1" x2="12" y2="3"></line>
             <line x1="12" y1="21" x2="12" y2="23"></line>
@@ -32,13 +54,24 @@ import { ThemeService, Theme } from '../../services/theme.service';
           </svg>
         }
         @case ('dark') {
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-light-font dark:text-dark-font">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-light-font dark:text-dark-font"
+          >
             <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
           </svg>
         }
       }
     </button>
-  `
+  `,
 })
 export class ThemeSwitcherComponent {
   protected themeService = inject(ThemeService);
@@ -46,9 +79,9 @@ export class ThemeSwitcherComponent {
   getAriaLabel(): string {
     const current = this.themeService.theme();
     const next: Record<Theme, string> = {
-      'system': 'Switch to Light mode',
-      'light': 'Switch to Dark mode',
-      'dark': 'Switch to System mode'
+      system: 'Switch to Light mode',
+      light: 'Switch to Dark mode',
+      dark: 'Switch to System mode',
     };
     return next[current];
   }
diff --git a/src/app/components/time-ago/time-ago.component.ts b/src/app/components/time-ago/time-ago.component.ts
index 18036b3..c005af6 100644
--- a/src/app/components/time-ago/time-ago.component.ts
+++ b/src/app/components/time-ago/time-ago.component.ts
@@ -4,8 +4,12 @@ import { Component, computed, input } from '@angular/core';
   selector: 'app-time-ago',
   imports: [],
   template: `
-    <span [title]="dateString()" class="text-light-font-secondary dark:text-dark-font-secondary text-[0.9em]">{{ timeAgo() }}</span>
-  `
+    <span
+      [title]="dateString()"
+      class="text-light-font-secondary dark:text-dark-font-secondary text-[0.9em]"
+      >{{ timeAgo() }}</span
+    >
+  `,
 })
 export class TimeAgoComponent {
   date = input.required<string>();
@@ -44,4 +48,3 @@ export class TimeAgoComponent {
     }
   });
 }
-
diff --git a/src/app/components/watch-history/watch-history.component.ts b/src/app/components/watch-history/watch-history.component.ts
index 2567f15..055e96b 100644
--- a/src/app/components/watch-history/watch-history.component.ts
+++ b/src/app/components/watch-history/watch-history.component.ts
@@ -11,44 +11,83 @@ import { groupHistoryEntries } from '../../utils/watch-history.utils';
       <h1 class="text-2xl mb-8 text-light-font dark:text-dark-font">Watch History</h1>
 
       @if (history().length === 0) {
-        <div class="text-center p-16 bg-light-bg-secondary dark:bg-dark-bg-secondary rounded-lg border border-light-border dark:border-dark-border">
+        <div
+          class="text-center p-16 bg-light-bg-secondary dark:bg-dark-bg-secondary rounded-lg border border-light-border dark:border-dark-border"
+        >
           <div class="text-5xl mb-4 opacity-30">🗓️</div>
-          <p class="text-light-font-secondary dark:text-dark-font-secondary mb-2">No watch history yet.</p>
-          <p class="text-sm text-light-font-muted dark:text-dark-font-muted mb-4">Start watching to see your history here!</p>
-          <a [routerLink]="['/items']" class="inline-block px-6 py-3 bg-accent-primary text-white no-underline rounded-lg font-medium hover:bg-accent-primary-hover transition-colors">Browse Items</a>
+          <p class="text-light-font-secondary dark:text-dark-font-secondary mb-2">
+            No watch history yet.
+          </p>
+          <p class="text-sm text-light-font-muted dark:text-dark-font-muted mb-4">
+            Start watching to see your history here!
+          </p>
+          <a
+            [routerLink]="['/items']"
+            class="inline-block px-6 py-3 bg-accent-primary text-white no-underline rounded-lg font-medium hover:bg-accent-primary-hover transition-colors"
+            >Browse Items</a
+          >
         </div>
       } @else {
         <div class="space-y-2">
           @for (group of calendarGroups(); track group.dateLabel) {
-            <div class="bg-light-bg-secondary dark:bg-dark-bg-secondary rounded-lg border border-light-border dark:border-dark-border overflow-hidden">
-              <div class="flex items-center gap-3 px-5 py-3 bg-light-bg-tertiary dark:bg-dark-bg-tertiary border-b border-light-border dark:border-dark-border">
-                <span class="text-sm font-semibold text-light-font dark:text-dark-font">{{ group.relativeLabel }}</span>
-                <span class="text-xs text-light-font-muted dark:text-dark-font-muted">{{ group.dateLabel }}</span>
-                <span class="ml-auto text-xs bg-accent-primary/10 text-accent-primary px-2 py-0.5 rounded-full font-medium">{{ group.entries.length }}</span>
+            <div
+              class="bg-light-bg-secondary dark:bg-dark-bg-secondary rounded-lg border border-light-border dark:border-dark-border overflow-hidden"
+            >
+              <div
+                class="flex items-center gap-3 px-5 py-3 bg-light-bg-tertiary dark:bg-dark-bg-tertiary border-b border-light-border dark:border-dark-border"
+              >
+                <span class="text-sm font-semibold text-light-font dark:text-dark-font">{{
+                  group.relativeLabel
+                }}</span>
+                <span class="text-xs text-light-font-muted dark:text-dark-font-muted">{{
+                  group.dateLabel
+                }}</span>
+                <span
+                  class="ml-auto text-xs bg-accent-primary/10 text-accent-primary px-2 py-0.5 rounded-full font-medium"
+                  >{{ group.entries.length }}</span
+                >
               </div>
 
               @for (entry of group.entries; track entry.itemId + '-' + entry.date) {
-                <div class="flex items-center gap-4 px-5 py-3 hover:bg-light-hover dark:hover:bg-dark-hover transition-colors border-b border-light-border-light dark:border-dark-border-light last:border-b-0">
-                  <span class="text-sm font-mono text-light-font-muted dark:text-dark-font-muted min-w-[60px]">{{ entry.relativeTime }}</span>
+                <div
+                  class="flex items-center gap-4 px-5 py-3 hover:bg-light-hover dark:hover:bg-dark-hover transition-colors border-b border-light-border-light dark:border-dark-border-light last:border-b-0"
+                >
+                  <span
+                    class="text-sm font-mono text-light-font-muted dark:text-dark-font-muted min-w-[60px]"
+                    >{{ entry.relativeTime }}</span
+                  >
 
-                  <div class="w-1.5 h-1.5 rounded-full shrink-0"
-                       [class.bg-accent-primary]="entry.itemType === 'series'"
-                       [class.bg-accent-success]="entry.itemType === 'movie'"></div>
+                  <div
+                    class="w-1.5 h-1.5 rounded-full shrink-0"
+                    [class.bg-accent-primary]="entry.itemType === 'series'"
+                    [class.bg-accent-success]="entry.itemType === 'movie'"
+                  ></div>
 
                   @if (entry.isDeleted) {
-                    <span class="text-sm font-medium text-light-font dark:text-dark-font no-underline truncate flex-1">
-                      {{ entry.itemTitle }} <span class="text-light-font-muted dark:text-dark-font-muted">(deleted)</span>
+                    <span
+                      class="text-sm font-medium text-light-font dark:text-dark-font no-underline truncate flex-1"
+                    >
+                      {{ entry.itemTitle }}
+                      <span class="text-light-font-muted dark:text-dark-font-muted">(deleted)</span>
                     </span>
                   } @else {
-                    <a [routerLink]="['/items', entry.itemId]" class="text-sm font-medium text-light-font dark:text-dark-font no-underline hover:text-accent-primary transition-colors truncate flex-1">
+                    <a
+                      [routerLink]="['/items', entry.itemId]"
+                      class="text-sm font-medium text-light-font dark:text-dark-font no-underline hover:text-accent-primary transition-colors truncate flex-1"
+                    >
                       {{ entry.itemTitle }}
                     </a>
                   }
 
-                  <span class="text-xs px-2 py-0.5 rounded capitalize bg-light-bg-tertiary dark:bg-dark-bg-tertiary text-light-font-secondary dark:text-dark-font-secondary shrink-0">{{ entry.itemType }}</span>
+                  <span
+                    class="text-xs px-2 py-0.5 rounded capitalize bg-light-bg-tertiary dark:bg-dark-bg-tertiary text-light-font-secondary dark:text-dark-font-secondary shrink-0"
+                    >{{ entry.itemType }}</span
+                  >
 
                   @if (entry.itemType === 'series') {
-                    <span class="text-xs bg-accent-primary/10 text-accent-primary px-2 py-0.5 rounded font-medium shrink-0">
+                    <span
+                      class="text-xs bg-accent-primary/10 text-accent-primary px-2 py-0.5 rounded font-medium shrink-0"
+                    >
                       S{{ entry.season }}E{{ entry.episode }}
                     </span>
                   }
@@ -59,7 +98,7 @@ import { groupHistoryEntries } from '../../utils/watch-history.utils';
         </div>
       }
     </div>
-  `
+  `,
 })
 export class WatchHistoryComponent {
   private watchListService = inject(WatchListService);
diff --git a/src/app/domain/item-form.spec.ts b/src/app/domain/item-form.spec.ts
index b01e7ac..81146bf 100644
--- a/src/app/domain/item-form.spec.ts
+++ b/src/app/domain/item-form.spec.ts
@@ -1,10 +1,10 @@
 import {
-   buildItemMutationInput,
-   createDefaultItemFormValue,
-   createItemFormValue,
-   normalizeFormValueForType,
-   prepareSubmittedItemFormValue
- } from './item-form';
+  buildItemMutationInput,
+  createDefaultItemFormValue,
+  createItemFormValue,
+  normalizeFormValueForType,
+  prepareSubmittedItemFormValue,
+} from './item-form';
 import { Item } from '../models/item.model';
 
 describe('item-form helpers', () => {
@@ -17,7 +17,7 @@ describe('item-form helpers', () => {
       season: 1,
       episode: 1,
       seasons: [],
-      startImmediately: false
+      startImmediately: false,
     });
   });
 
@@ -31,10 +31,10 @@ describe('item-form helpers', () => {
       progress: {
         season: 2,
         episode: 4,
-        seasons: [{ seasonNumber: 2, totalEpisodes: 10, firstEpisodeAirDate: '2026-05-01' }]
+        seasons: [{ seasonNumber: 2, totalEpisodes: 10, firstEpisodeAirDate: '2026-05-01' }],
       },
       watchHistory: [],
-      createdAt: '2026-04-20T08:00:00.000Z'
+      createdAt: '2026-04-20T08:00:00.000Z',
     };
 
     expect(createItemFormValue(item)).toEqual({
@@ -45,7 +45,7 @@ describe('item-form helpers', () => {
       season: 2,
       episode: 4,
       seasons: [{ seasonNumber: 2, totalEpisodes: 10, firstEpisodeAirDate: '2026-05-01' }],
-      startImmediately: true
+      startImmediately: true,
     });
   });
 
@@ -58,7 +58,7 @@ describe('item-form helpers', () => {
       season: 1,
       episode: 1,
       seasons: [],
-      startImmediately: true
+      startImmediately: true,
     });
 
     expect(mutationInput).toEqual({
@@ -66,7 +66,7 @@ describe('item-form helpers', () => {
       type: 'movie',
       groupId: 'ungrouped',
       status: 'in-progress',
-      progress: undefined
+      progress: undefined,
     });
   });
 
@@ -79,11 +79,11 @@ describe('item-form helpers', () => {
       season: 1,
       episode: 3,
       seasons: [{ seasonNumber: 1, totalEpisodes: 10, firstEpisodeAirDate: '2026-05-01' }],
-      startImmediately: false
+      startImmediately: false,
     });
 
     expect(mutationInput.progress?.seasons).toEqual([
-      { seasonNumber: 1, totalEpisodes: 10, firstEpisodeAirDate: '2026-05-01' }
+      { seasonNumber: 1, totalEpisodes: 10, firstEpisodeAirDate: '2026-05-01' },
     ]);
   });
 
@@ -98,10 +98,10 @@ describe('item-form helpers', () => {
           season: 1,
           episode: 5,
           seasons: [{ seasonNumber: 1, totalEpisodes: 10 }],
-          startImmediately: true
+          startImmediately: true,
         },
-        false
-      )
+        false,
+      ),
     ).toEqual({
       title: 'Series',
       type: 'series',
@@ -110,7 +110,7 @@ describe('item-form helpers', () => {
       season: 1,
       episode: 5,
       seasons: [{ seasonNumber: 1, totalEpisodes: 10 }],
-      startImmediately: false
+      startImmediately: false,
     });
   });
 
@@ -124,8 +124,8 @@ describe('item-form helpers', () => {
         season: 4,
         episode: 9,
         seasons: [{ seasonNumber: 4, totalEpisodes: 12 }],
-        startImmediately: false
-      })
+        startImmediately: false,
+      }),
     ).toEqual({
       title: 'Movie Night',
       type: 'movie',
@@ -134,7 +134,7 @@ describe('item-form helpers', () => {
       season: 1,
       episode: 1,
       seasons: [],
-      startImmediately: false
+      startImmediately: false,
     });
   });
 });
diff --git a/src/app/domain/item-form.ts b/src/app/domain/item-form.ts
index 1b99a49..ef595e9 100644
--- a/src/app/domain/item-form.ts
+++ b/src/app/domain/item-form.ts
@@ -23,7 +23,7 @@ export function createDefaultItemFormValue(): ItemFormValue {
     season: 1,
     episode: 1,
     seasons: [],
-    startImmediately: false
+    startImmediately: false,
   };
 }
 
@@ -36,7 +36,7 @@ export function createItemFormValue(item: Item): ItemFormValue {
     season: item.progress?.season ?? 1,
     episode: item.progress?.episode ?? 1,
     seasons: item.progress?.seasons ?? [],
-    startImmediately: item.status === 'in-progress'
+    startImmediately: item.status === 'in-progress',
   };
 }
 
@@ -52,15 +52,15 @@ export function buildItemMutationInput(formValue: ItemFormValue): ItemMutationIn
         ? {
             season: formValue.season,
             episode: formValue.episode,
-            seasons: sortedSeasons
+            seasons: sortedSeasons,
           }
-        : undefined
+        : undefined,
   };
 }
 
 export function prepareSubmittedItemFormValue(
   formValue: ItemFormValue,
-  allowStartImmediately: boolean
+  allowStartImmediately: boolean,
 ): ItemFormValue {
   if (allowStartImmediately) {
     return formValue;
@@ -68,7 +68,7 @@ export function prepareSubmittedItemFormValue(
 
   return {
     ...formValue,
-    startImmediately: false
+    startImmediately: false,
   };
 }
 
@@ -81,6 +81,6 @@ export function normalizeFormValueForType(formValue: ItemFormValue): ItemFormVal
     ...formValue,
     season: 1,
     episode: 1,
-    seasons: []
+    seasons: [],
   };
 }
diff --git a/src/app/domain/item.constants.ts b/src/app/domain/item.constants.ts
index c40f7db..c765396 100644
--- a/src/app/domain/item.constants.ts
+++ b/src/app/domain/item.constants.ts
@@ -5,14 +5,14 @@ export const ITEM_STATUSES: ItemStatus[] = ['not-started', 'in-progress', 'compl
 
 export const ITEM_TYPE_LABELS: Record<ItemType, string> = {
   series: 'Series',
-  movie: 'Movie'
+  movie: 'Movie',
 };
 
 export const ITEM_STATUS_LABELS: Record<ItemStatus, string> = {
   'not-started': 'Not Started',
   'in-progress': 'In Progress',
   completed: 'Completed',
-  dropped: 'Dropped'
+  dropped: 'Dropped',
 };
 
 export const DEFAULT_GROUP_ID = 'ungrouped';
diff --git a/src/app/domain/storage-schema.ts b/src/app/domain/storage-schema.ts
index e4f5c08..d91d550 100644
--- a/src/app/domain/storage-schema.ts
+++ b/src/app/domain/storage-schema.ts
@@ -20,11 +20,11 @@ export function createDefaultStorageData(): StorageData {
       [DEFAULT_GROUP_ID]: {
         id: DEFAULT_GROUP_ID,
         name: 'Ungrouped',
-        order: 0
-      }
+        order: 0,
+      },
     },
     items: {},
-    deletedItems: {}
+    deletedItems: {},
   };
 }
 
@@ -55,10 +55,12 @@ function migrateStorageData(data: StorageData): StorageData {
       if (item.type === 'series' && item.progress) {
         const progress = item.progress as unknown as LegacyProgressV2;
         if ('totalEpisodes' in progress && typeof progress.totalEpisodes === 'number') {
-          progress.seasons = [{
-            seasonNumber: progress.season,
-            totalEpisodes: progress.totalEpisodes
-          }];
+          progress.seasons = [
+            {
+              seasonNumber: progress.season,
+              totalEpisodes: progress.totalEpisodes,
+            },
+          ];
           delete progress.totalEpisodes;
         } else if (!progress.seasons) {
           progress.seasons = [];
@@ -82,15 +84,14 @@ function applyStorageDefaults(data: StorageData): StorageData {
   return {
     ...data,
     groups: {
-      [DEFAULT_GROUP_ID]:
-        data.groups[DEFAULT_GROUP_ID] ?? {
-          id: DEFAULT_GROUP_ID,
-          name: 'Ungrouped',
-          order: 0
-        },
-      ...data.groups
+      [DEFAULT_GROUP_ID]: data.groups[DEFAULT_GROUP_ID] ?? {
+        id: DEFAULT_GROUP_ID,
+        name: 'Ungrouped',
+        order: 0,
+      },
+      ...data.groups,
     },
-    deletedItems: data.deletedItems ?? {}
+    deletedItems: data.deletedItems ?? {},
   };
 }
 
@@ -221,7 +222,10 @@ function isSeriesProgress(progress: unknown): boolean {
     if (typeof seasonEntry['seasonNumber'] !== 'number') {
       return false;
     }
-    if (seasonEntry['totalEpisodes'] !== undefined && typeof seasonEntry['totalEpisodes'] !== 'number') {
+    if (
+      seasonEntry['totalEpisodes'] !== undefined &&
+      typeof seasonEntry['totalEpisodes'] !== 'number'
+    ) {
       return false;
     }
     if (
diff --git a/src/app/models/group.model.ts b/src/app/models/group.model.ts
index 0206d70..1c1296d 100644
--- a/src/app/models/group.model.ts
+++ b/src/app/models/group.model.ts
@@ -3,4 +3,3 @@ export interface Group {
   name: string;
   order: number;
 }
-
diff --git a/src/app/services/group.service.ts b/src/app/services/group.service.ts
index 843c266..de12951 100644
--- a/src/app/services/group.service.ts
+++ b/src/app/services/group.service.ts
@@ -4,7 +4,7 @@ import { Group } from '../models/group.model';
 import { DEFAULT_GROUP_ID } from '../domain/item.constants';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class GroupService {
   private storageService = inject(StorageService);
@@ -17,21 +17,21 @@ export class GroupService {
   createGroup(name: string): Group {
     const data = this.storageService.getData();
     const groups = this.storageService.getGroups();
-    const maxOrder = groups.length > 0 ? Math.max(...groups.map(g => g.order)) : -1;
-    
+    const maxOrder = groups.length > 0 ? Math.max(...groups.map((g) => g.order)) : -1;
+
     const id = `group-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
     const newGroup: Group = {
       id,
       name,
-      order: maxOrder + 1
+      order: maxOrder + 1,
     };
 
     this.storageService.saveData({
       ...data,
       groups: {
         ...data.groups,
-        [id]: newGroup
-      }
+        [id]: newGroup,
+      },
     });
 
     return newGroup;
@@ -43,8 +43,8 @@ export class GroupService {
       ...data,
       groups: {
         ...data.groups,
-        [group.id]: group
-      }
+        [group.id]: group,
+      },
     });
   }
 
@@ -54,17 +54,15 @@ export class GroupService {
     }
 
     const data = this.storageService.getData();
-    const groups = Object.fromEntries(
-      Object.entries(data.groups).filter(([id]) => id !== groupId)
-    );
+    const groups = Object.fromEntries(Object.entries(data.groups).filter(([id]) => id !== groupId));
 
     // Move all items from this group to ungrouped
     const items = { ...data.items };
-    Object.values(items).forEach(item => {
+    Object.values(items).forEach((item) => {
       if (item.groupId === groupId) {
         items[item.id] = {
           ...item,
-          groupId: DEFAULT_GROUP_ID
+          groupId: DEFAULT_GROUP_ID,
         };
       }
     });
@@ -72,7 +70,7 @@ export class GroupService {
     this.storageService.saveData({
       ...data,
       groups,
-      items
+      items,
     });
   }
 
@@ -85,13 +83,13 @@ export class GroupService {
       if (group) {
         groups[id] = {
           ...group,
-          order: index
+          order: index,
         };
       }
     });
 
     // Keep any groups not in the reorder list
-    Object.values(data.groups).forEach(group => {
+    Object.values(data.groups).forEach((group) => {
       if (!groups[group.id]) {
         groups[group.id] = group;
       }
@@ -99,7 +97,7 @@ export class GroupService {
 
     this.storageService.saveData({
       ...data,
-      groups
+      groups,
     });
   }
 
diff --git a/src/app/services/import-export.service.ts b/src/app/services/import-export.service.ts
index ea388cb..a2eeeb8 100644
--- a/src/app/services/import-export.service.ts
+++ b/src/app/services/import-export.service.ts
@@ -2,12 +2,11 @@ import { Injectable, inject } from '@angular/core';
 import { StorageService } from './storage.service';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ImportExportService {
   private storageService = inject(StorageService);
 
-
   exportData(): void {
     const data = this.storageService.getData();
     const json = JSON.stringify(data, null, 2);
diff --git a/src/app/services/round-robin.service.spec.ts b/src/app/services/round-robin.service.spec.ts
index e3db5b1..cf034fc 100644
--- a/src/app/services/round-robin.service.spec.ts
+++ b/src/app/services/round-robin.service.spec.ts
@@ -11,9 +11,15 @@ describe('RoundRobinService', () => {
   beforeEach(() => {
     store = {};
     const localStorageMock = {
-      clear() { Object.keys(store).forEach(key => delete store[key]); },
-      getItem(key: string) { return store[key] ?? null; },
-      setItem(key: string, value: string) { store[key] = value; }
+      clear() {
+        Object.keys(store).forEach((key) => delete store[key]);
+      },
+      getItem(key: string) {
+        return store[key] ?? null;
+      },
+      setItem(key: string, value: string) {
+        store[key] = value;
+      },
     };
     Object.defineProperty(window, 'localStorage', { value: localStorageMock, writable: true });
 
@@ -28,14 +34,14 @@ describe('RoundRobinService', () => {
         id: 'future',
         title: 'Future Show',
         createdAt: '2026-01-01T10:00:00.000Z',
-        firstEpisodeAirDate: '2099-01-01'
+        firstEpisodeAirDate: '2099-01-01',
       }),
       createSeries({
         id: 'available',
         title: 'Available Show',
         createdAt: '2026-02-01T10:00:00.000Z',
-        firstEpisodeAirDate: '2020-01-01'
-      })
+        firstEpisodeAirDate: '2020-01-01',
+      }),
     ]);
 
     expect(service.nextSeries()?.id).toBe('available');
@@ -47,14 +53,14 @@ describe('RoundRobinService', () => {
         id: 'future-1',
         title: 'Future Show 1',
         createdAt: '2026-01-01T10:00:00.000Z',
-        firstEpisodeAirDate: '2099-01-01'
+        firstEpisodeAirDate: '2099-01-01',
       }),
       createSeries({
         id: 'future-2',
         title: 'Future Show 2',
         createdAt: '2026-02-01T10:00:00.000Z',
-        firstEpisodeAirDate: '2099-02-01'
-      })
+        firstEpisodeAirDate: '2099-02-01',
+      }),
     ]);
 
     expect(service.nextSeries()).toBeNull();
@@ -64,7 +70,7 @@ describe('RoundRobinService', () => {
     const series = createSeries({
       id: 'legacy',
       title: 'Legacy Show',
-      createdAt: '2026-01-01T10:00:00.000Z'
+      createdAt: '2026-01-01T10:00:00.000Z',
     });
     saveItems([series]);
 
@@ -77,7 +83,7 @@ describe('RoundRobinService', () => {
       title: 'Weekly Show',
       createdAt: '2026-01-01T10:00:00.000Z',
       episode: 3,
-      firstEpisodeAirDate: '2026-05-01'
+      firstEpisodeAirDate: '2026-05-01',
     });
 
     expect(service.hasAiredCurrentEpisode(series, new Date(2026, 4, 14))).toBe(false);
@@ -89,8 +95,8 @@ describe('RoundRobinService', () => {
       schemaVersion: 4,
       lastModifiedAt: '2026-04-01T10:00:00.000Z',
       groups: { ungrouped: { id: 'ungrouped', name: 'Ungrouped', order: 0 } },
-      items: Object.fromEntries(items.map(item => [item.id, item])),
-      deletedItems: {}
+      items: Object.fromEntries(items.map((item) => [item.id, item])),
+      deletedItems: {},
     });
   }
 
@@ -115,12 +121,12 @@ describe('RoundRobinService', () => {
           {
             seasonNumber: 1,
             totalEpisodes: 10,
-            firstEpisodeAirDate: options.firstEpisodeAirDate
-          }
-        ]
+            firstEpisodeAirDate: options.firstEpisodeAirDate,
+          },
+        ],
       },
       watchHistory: options.watchHistory ?? [],
-      createdAt: options.createdAt
+      createdAt: options.createdAt,
     };
   }
 });
diff --git a/src/app/services/round-robin.service.ts b/src/app/services/round-robin.service.ts
index f8fc142..0676077 100644
--- a/src/app/services/round-robin.service.ts
+++ b/src/app/services/round-robin.service.ts
@@ -3,12 +3,11 @@ import { WatchListService } from './watch-list.service';
 import { Item } from '../models/item.model';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class RoundRobinService {
   private watchListService = inject(WatchListService);
 
-
   nextSeries = computed(() => {
     const series = this.watchListService.inProgressSeries();
 
@@ -22,7 +21,7 @@ export class RoundRobinService {
       return new Date(aDate).getTime() - new Date(bDate).getTime();
     });
 
-    const watchable = sorted.filter(s => this.hasAiredCurrentEpisode(s));
+    const watchable = sorted.filter((s) => this.hasAiredCurrentEpisode(s));
     if (watchable.length === 0) {
       return null;
     }
@@ -55,15 +54,15 @@ export class RoundRobinService {
       return true;
     }
 
-    const targetSeries = series.find(s => s.id === seriesId);
+    const targetSeries = series.find((s) => s.id === seriesId);
     if (!targetSeries) {
       return false;
     }
 
-    const otherSeries = series.filter(s => s.id !== seriesId);
+    const otherSeries = series.filter((s) => s.id !== seriesId);
 
-    const allOthersWatched = otherSeries.every(s => {
-      return (s.watchHistory && s.watchHistory.length > 0);
+    const allOthersWatched = otherSeries.every((s) => {
+      return s.watchHistory && s.watchHistory.length > 0;
     });
 
     return allOthersWatched;
@@ -75,13 +74,16 @@ export class RoundRobinService {
     }
 
     const currentSeason = series.progress.seasons.find(
-      s => s.seasonNumber === series.progress!.season
+      (s) => s.seasonNumber === series.progress!.season,
     );
     if (!currentSeason?.firstEpisodeAirDate) {
       return true;
     }
 
-    const airDate = this.getEpisodeAirDate(currentSeason.firstEpisodeAirDate, series.progress.episode);
+    const airDate = this.getEpisodeAirDate(
+      currentSeason.firstEpisodeAirDate,
+      series.progress.episode,
+    );
     if (!airDate) {
       return true;
     }
diff --git a/src/app/services/storage.service.spec.ts b/src/app/services/storage.service.spec.ts
index c252030..52a1635 100644
--- a/src/app/services/storage.service.spec.ts
+++ b/src/app/services/storage.service.spec.ts
@@ -6,11 +6,17 @@ describe('StorageService', () => {
     const store: Record<string, string> = {};
     Object.defineProperty(window, 'localStorage', {
       value: {
-        clear() { Object.keys(store).forEach(key => delete store[key]); },
-        getItem(key: string) { return store[key] ?? null; },
-        setItem(key: string, value: string) { store[key] = value; }
+        clear() {
+          Object.keys(store).forEach((key) => delete store[key]);
+        },
+        getItem(key: string) {
+          return store[key] ?? null;
+        },
+        setItem(key: string, value: string) {
+          store[key] = value;
+        },
       },
-      writable: true
+      writable: true,
     });
   });
 
@@ -42,34 +48,32 @@ describe('StorageService', () => {
             season: 2,
             episode: 3,
             totalEpisodes: 10,
-            totalSeasons: 3
+            totalSeasons: 3,
           },
           watchHistory: [
             {
               date: '2026-03-02T12:00:00.000Z',
               season: 2,
-              episode: 3
-            }
-          ]
-        }
-      }
+              episode: 3,
+            },
+          ],
+        },
+      },
     });
 
     const data = service.getData();
     expect(data.schemaVersion).toBe(CURRENT_SCHEMA_VERSION);
 
     const progress = data.items['series1'].progress!;
-    expect(progress.seasons).toEqual([
-      { seasonNumber: 2, totalEpisodes: 10 }
-    ]);
+    expect(progress.seasons).toEqual([{ seasonNumber: 2, totalEpisodes: 10 }]);
     expect('totalEpisodes' in progress).toBe(false);
     expect('totalSeasons' in progress).toBe(false);
     expect(data.items['series1'].watchHistory).toEqual([
       {
         date: '2026-03-02T12:00:00.000Z',
         season: 2,
-        episode: 3
-      }
+        episode: 3,
+      },
     ]);
   });
 
@@ -81,8 +85,8 @@ describe('StorageService', () => {
         schemaVersion: 2,
         lastModifiedAt: '2026-04-01T10:00:00.000Z',
         groups: {},
-        items: []
-      })
+        items: [],
+      }),
     ).toThrowError('Invalid data format');
   });
 
@@ -104,17 +108,15 @@ describe('StorageService', () => {
           progress: {
             season: 1,
             episode: 2,
-            seasons: [
-              { seasonNumber: 1, totalEpisodes: 10, firstEpisodeAirDate: '2026-05-01' }
-            ]
+            seasons: [{ seasonNumber: 1, totalEpisodes: 10, firstEpisodeAirDate: '2026-05-01' }],
           },
-          watchHistory: []
-        }
-      }
+          watchHistory: [],
+        },
+      },
     });
 
-    expect(
-      service.getData().items['series1'].progress?.seasons[0].firstEpisodeAirDate
-    ).toBe('2026-05-01');
+    expect(service.getData().items['series1'].progress?.seasons[0].firstEpisodeAirDate).toBe(
+      '2026-05-01',
+    );
   });
 });
diff --git a/src/app/services/storage.service.ts b/src/app/services/storage.service.ts
index 291ea65..d5761b3 100644
--- a/src/app/services/storage.service.ts
+++ b/src/app/services/storage.service.ts
@@ -7,7 +7,7 @@ import { createDefaultStorageData, normalizeStorageData } from '../domain/storag
 const STORAGE_KEY = 'watchListData';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class StorageService {
   private readonly data = signal<StorageData | null>(null);
@@ -18,7 +18,7 @@ export class StorageService {
 
   loadData(): StorageData {
     const stored = localStorage.getItem(STORAGE_KEY);
-    
+
     if (stored) {
       try {
         const normalized = normalizeStorageData(JSON.parse(stored));
@@ -32,7 +32,7 @@ export class StorageService {
         return defaultData;
       }
     }
-    
+
     const defaultData = createDefaultStorageData();
     this.saveData(defaultData);
     return defaultData;
@@ -47,7 +47,7 @@ export class StorageService {
   saveData(data: StorageData): void {
     const updated: StorageData = {
       ...data,
-      lastModifiedAt: new Date().toISOString()
+      lastModifiedAt: new Date().toISOString(),
     };
     this.data.set(updated);
     localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts
index f0b9e89..8c0863d 100644
--- a/src/app/services/theme.service.ts
+++ b/src/app/services/theme.service.ts
@@ -4,7 +4,7 @@ import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 export type Theme = 'system' | 'light' | 'dark';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ThemeService implements OnDestroy {
   private readonly STORAGE_KEY = 'theme';
@@ -60,8 +60,8 @@ export class ThemeService implements OnDestroy {
     }
 
     const currentTheme = this.theme();
-    const isDark = currentTheme === 'dark' ||
-      (currentTheme === 'system' && this.mediaQuery?.matches);
+    const isDark =
+      currentTheme === 'dark' || (currentTheme === 'system' && this.mediaQuery?.matches);
 
     this.document.documentElement.classList.toggle('dark', isDark);
   }
diff --git a/src/app/services/tmdb-settings.service.spec.ts b/src/app/services/tmdb-settings.service.spec.ts
index 499be07..b491ff5 100644
--- a/src/app/services/tmdb-settings.service.spec.ts
+++ b/src/app/services/tmdb-settings.service.spec.ts
@@ -18,9 +18,9 @@ describe('TmdbSettingsService', () => {
         },
         removeItem(key: string) {
           delete store[key];
-        }
+        },
       },
-      writable: true
+      writable: true,
     });
   });
 
diff --git a/src/app/services/tmdb-settings.service.ts b/src/app/services/tmdb-settings.service.ts
index 621cd92..c71d8ae 100644
--- a/src/app/services/tmdb-settings.service.ts
+++ b/src/app/services/tmdb-settings.service.ts
@@ -4,12 +4,10 @@ const TMDB_READ_TOKEN_KEY = 'tmdbReadAccessToken';
 const TMDB_API_KEY = 'tmdbApiKey';
 
 export type TmdbCredential =
-  | { type: 'read-token'; value: string }
-  | { type: 'api-key'; value: string }
-  | null;
+  { type: 'read-token'; value: string } | { type: 'api-key'; value: string } | null;
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class TmdbSettingsService {
   private readonly readAccessToken = signal(this.loadToken());
diff --git a/src/app/services/tmdb-suggestion.service.spec.ts b/src/app/services/tmdb-suggestion.service.spec.ts
index a8770b5..dd462a0 100644
--- a/src/app/services/tmdb-suggestion.service.spec.ts
+++ b/src/app/services/tmdb-suggestion.service.spec.ts
@@ -13,10 +13,10 @@ describe('TmdbSuggestionService', () => {
         {
           provide: TmdbSettingsService,
           useValue: {
-            getCredential: () => ({ type: 'read-token', value: 'read-token' })
-          }
-        }
-      ]
+            getCredential: () => ({ type: 'read-token', value: 'read-token' }),
+          },
+        },
+      ],
     });
   });
 
@@ -33,7 +33,9 @@ describe('TmdbSuggestionService', () => {
       suggestions = results;
     });
 
-    const request = http.expectOne((req) => req.url === 'https://api.themoviedb.org/3/search/multi');
+    const request = http.expectOne(
+      (req) => req.url === 'https://api.themoviedb.org/3/search/multi',
+    );
     expect(request.request.headers.get('Authorization')).toBe('Bearer read-token');
     expect(request.request.params.get('api_key')).toBeNull();
     expect(request.request.params.get('query')).toBe('breaking');
@@ -47,20 +49,20 @@ describe('TmdbSuggestionService', () => {
           title: 'Breaking Movie',
           release_date: '2026-01-02',
           overview: 'Movie overview',
-          poster_path: '/movie.jpg'
+          poster_path: '/movie.jpg',
         },
         {
           id: 2,
           media_type: 'tv',
           name: 'Breaking Show',
-          first_air_date: '2025-03-04'
+          first_air_date: '2025-03-04',
         },
         {
           id: 3,
           media_type: 'person',
-          name: 'Actor'
-        }
-      ]
+          name: 'Actor',
+        },
+      ],
     });
 
     expect(suggestions).toEqual([
@@ -70,7 +72,7 @@ describe('TmdbSuggestionService', () => {
         type: 'movie',
         year: '2026',
         overview: 'Movie overview',
-        posterPath: '/movie.jpg'
+        posterPath: '/movie.jpg',
       },
       {
         tmdbId: 2,
@@ -78,8 +80,8 @@ describe('TmdbSuggestionService', () => {
         type: 'series',
         year: '2025',
         overview: undefined,
-        posterPath: undefined
-      }
+        posterPath: undefined,
+      },
     ]);
   });
 
@@ -92,10 +94,10 @@ describe('TmdbSuggestionService', () => {
         {
           provide: TmdbSettingsService,
           useValue: {
-            getCredential: () => ({ type: 'api-key', value: 'api-key-value' })
-          }
-        }
-      ]
+            getCredential: () => ({ type: 'api-key', value: 'api-key-value' }),
+          },
+        },
+      ],
     });
 
     const service = TestBed.inject(TmdbSuggestionService);
@@ -106,7 +108,9 @@ describe('TmdbSuggestionService', () => {
       results = suggestions;
     });
 
-    const request = http.expectOne((req) => req.url === 'https://api.themoviedb.org/3/search/multi');
+    const request = http.expectOne(
+      (req) => req.url === 'https://api.themoviedb.org/3/search/multi',
+    );
     expect(request.request.headers.get('Authorization')).toBeNull();
     expect(request.request.params.get('api_key')).toBe('api-key-value');
     request.flush({ results: [] });
@@ -133,24 +137,24 @@ describe('TmdbSuggestionService', () => {
         {
           season_number: 0,
           episode_count: 5,
-          air_date: '2009-02-17'
+          air_date: '2009-02-17',
         },
         {
           season_number: 2,
           episode_count: 13,
-          air_date: '2009-03-08'
+          air_date: '2009-03-08',
         },
         {
           season_number: 1,
           episode_count: 7,
-          air_date: '2008-01-20'
+          air_date: '2008-01-20',
         },
         {
           season_number: 3,
           episode_count: 0,
-          air_date: 'not-a-date'
-        }
-      ]
+          air_date: 'not-a-date',
+        },
+      ],
     });
 
     expect(details).toEqual({
@@ -158,19 +162,19 @@ describe('TmdbSuggestionService', () => {
         {
           seasonNumber: 1,
           totalEpisodes: 7,
-          firstEpisodeAirDate: '2008-01-20'
+          firstEpisodeAirDate: '2008-01-20',
         },
         {
           seasonNumber: 2,
           totalEpisodes: 13,
-          firstEpisodeAirDate: '2009-03-08'
+          firstEpisodeAirDate: '2009-03-08',
         },
         {
           seasonNumber: 3,
           totalEpisodes: undefined,
-          firstEpisodeAirDate: undefined
-        }
-      ]
+          firstEpisodeAirDate: undefined,
+        },
+      ],
     });
   });
 
@@ -183,10 +187,10 @@ describe('TmdbSuggestionService', () => {
         {
           provide: TmdbSettingsService,
           useValue: {
-            getCredential: () => null
-          }
-        }
-      ]
+            getCredential: () => null,
+          },
+        },
+      ],
     });
 
     const service = TestBed.inject(TmdbSuggestionService);
@@ -215,13 +219,12 @@ describe('TmdbSuggestionService', () => {
     service.search('breaking').subscribe({
       error: (error: { status?: number }) => {
         errorStatus = error.status;
-      }
+      },
     });
 
-    http.expectOne((req) => req.url === 'https://api.themoviedb.org/3/search/multi').flush(
-      { status_message: 'Invalid token' },
-      { status: 401, statusText: 'Unauthorized' }
-    );
+    http
+      .expectOne((req) => req.url === 'https://api.themoviedb.org/3/search/multi')
+      .flush({ status_message: 'Invalid token' }, { status: 401, statusText: 'Unauthorized' });
 
     expect(errorStatus).toBe(401);
   });
diff --git a/src/app/services/tmdb-suggestion.service.ts b/src/app/services/tmdb-suggestion.service.ts
index 5cf50c9..47e0ad9 100644
--- a/src/app/services/tmdb-suggestion.service.ts
+++ b/src/app/services/tmdb-suggestion.service.ts
@@ -31,7 +31,7 @@ interface TmdbTvSeason {
 }
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class TmdbSuggestionService {
   private readonly http = inject(HttpClient);
@@ -58,7 +58,7 @@ export class TmdbSuggestionService {
     return this.http
       .get<TmdbSearchResponse>('https://api.themoviedb.org/3/search/multi', {
         headers: requestOptions.headers,
-        params
+        params,
       })
       .pipe(map((response) => this.mapResults(response.results ?? [])));
   }
@@ -78,7 +78,7 @@ export class TmdbSuggestionService {
     return this.http
       .get<TmdbTvDetailsResponse>(`https://api.themoviedb.org/3/tv/${tmdbId}`, {
         headers: requestOptions.headers,
-        params
+        params,
       })
       .pipe(map((response) => ({ seasons: this.mapSeasons(response.seasons ?? []) })));
   }
@@ -94,16 +94,16 @@ export class TmdbSuggestionService {
       return {
         headers: new HttpHeaders({
           Authorization: `Bearer ${credential.value}`,
-          accept: 'application/json'
-        })
+          accept: 'application/json',
+        }),
       };
     }
 
     return {
       headers: new HttpHeaders({
-        accept: 'application/json'
+        accept: 'application/json',
       }),
-      apiKey: credential.value
+      apiKey: credential.value,
     };
   }
 
@@ -139,7 +139,7 @@ export class TmdbSuggestionService {
     result: TmdbSearchResult,
     type: TmdbSuggestion['type'],
     title: unknown,
-    date: unknown
+    date: unknown,
   ): TmdbSuggestion | null {
     if (typeof title !== 'string' || !title.trim()) {
       return null;
@@ -151,7 +151,7 @@ export class TmdbSuggestionService {
       type,
       year: typeof date === 'string' && date.length >= 4 ? date.slice(0, 4) : undefined,
       overview: typeof result.overview === 'string' ? result.overview : undefined,
-      posterPath: typeof result.poster_path === 'string' ? result.poster_path : undefined
+      posterPath: typeof result.poster_path === 'string' ? result.poster_path : undefined,
     };
   }
 
@@ -185,7 +185,7 @@ export class TmdbSuggestionService {
       firstEpisodeAirDate:
         typeof candidate.air_date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(candidate.air_date)
           ? candidate.air_date
-          : undefined
+          : undefined,
     };
   }
 }
diff --git a/src/app/services/watch-list.service.spec.ts b/src/app/services/watch-list.service.spec.ts
index a00673b..cbffb20 100644
--- a/src/app/services/watch-list.service.spec.ts
+++ b/src/app/services/watch-list.service.spec.ts
@@ -11,9 +11,15 @@ describe('WatchListService', () => {
   beforeEach(() => {
     store = {};
     const localStorageMock = {
-      clear() { Object.keys(store).forEach(key => delete store[key]); },
-      getItem(key: string) { return store[key] ?? null; },
-      setItem(key: string, value: string) { store[key] = value; }
+      clear() {
+        Object.keys(store).forEach((key) => delete store[key]);
+      },
+      getItem(key: string) {
+        return store[key] ?? null;
+      },
+      setItem(key: string, value: string) {
+        store[key] = value;
+      },
     };
     Object.defineProperty(window, 'localStorage', { value: localStorageMock, writable: true });
 
@@ -33,12 +39,10 @@ describe('WatchListService', () => {
         progress: {
           season: 1,
           episode: 10,
-          seasons: [
-            { seasonNumber: 1, totalEpisodes: 10 }
-          ]
+          seasons: [{ seasonNumber: 1, totalEpisodes: 10 }],
         } as SeriesProgress,
         watchHistory: [],
-        createdAt: '2026-04-01T10:00:00.000Z'
+        createdAt: '2026-04-01T10:00:00.000Z',
       };
 
       storageService.saveData({
@@ -46,7 +50,7 @@ describe('WatchListService', () => {
         lastModifiedAt: '2026-04-01T10:00:00.000Z',
         groups: { ungrouped: { id: 'ungrouped', name: 'Ungrouped', order: 0 } },
         items: { 'series-1': item },
-        deletedItems: {}
+        deletedItems: {},
       });
 
       service.markWatched('series-1');
@@ -68,11 +72,11 @@ describe('WatchListService', () => {
           episode: 10,
           seasons: [
             { seasonNumber: 1, totalEpisodes: 10 },
-            { seasonNumber: 2, totalEpisodes: 8 }
-          ]
+            { seasonNumber: 2, totalEpisodes: 8 },
+          ],
         } as SeriesProgress,
         watchHistory: [],
-        createdAt: '2026-04-01T10:00:00.000Z'
+        createdAt: '2026-04-01T10:00:00.000Z',
       };
 
       storageService.saveData({
@@ -80,7 +84,7 @@ describe('WatchListService', () => {
         lastModifiedAt: '2026-04-01T10:00:00.000Z',
         groups: { ungrouped: { id: 'ungrouped', name: 'Ungrouped', order: 0 } },
         items: { 'series-2': item },
-        deletedItems: {}
+        deletedItems: {},
       });
 
       service.markWatched('series-2');
@@ -103,11 +107,11 @@ describe('WatchListService', () => {
           episode: 5,
           seasons: [
             { seasonNumber: 1, totalEpisodes: 5 },
-            { seasonNumber: 3, totalEpisodes: 8 }
-          ]
+            { seasonNumber: 3, totalEpisodes: 8 },
+          ],
         } as SeriesProgress,
         watchHistory: [],
-        createdAt: '2026-04-01T10:00:00.000Z'
+        createdAt: '2026-04-01T10:00:00.000Z',
       };
 
       storageService.saveData({
@@ -115,7 +119,7 @@ describe('WatchListService', () => {
         lastModifiedAt: '2026-04-01T10:00:00.000Z',
         groups: { ungrouped: { id: 'ungrouped', name: 'Ungrouped', order: 0 } },
         items: { 'series-3': item },
-        deletedItems: {}
+        deletedItems: {},
       });
 
       service.markWatched('series-3');
diff --git a/src/app/services/watch-list.service.ts b/src/app/services/watch-list.service.ts
index d12342c..14b4e1f 100644
--- a/src/app/services/watch-list.service.ts
+++ b/src/app/services/watch-list.service.ts
@@ -4,30 +4,29 @@ import { Item, ItemStatus, SeriesProgress } from '../models/item.model';
 import { HistoryEntry } from '../models/storage.model';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class WatchListService {
   private storageService = inject(StorageService);
 
-
   addItem(item: Omit<Item, 'id' | 'createdAt' | 'watchHistory'>): void {
     const data = this.storageService.getData();
     const id = this.generateId();
     const now = new Date().toISOString();
-    
+
     const newItem: Item = {
       ...item,
       id,
       createdAt: now,
-      watchHistory: []
+      watchHistory: [],
     };
 
     this.storageService.saveData({
       ...data,
       items: {
         ...data.items,
-        [id]: newItem
-      }
+        [id]: newItem,
+      },
     });
   }
 
@@ -37,31 +36,34 @@ export class WatchListService {
       ...data,
       items: {
         ...data.items,
-        [item.id]: item
-      }
+        [item.id]: item,
+      },
     });
   }
 
   deleteItem(itemId: string): void {
     const data = this.storageService.getData();
     const { [itemId]: removed, ...items } = data.items;
-    
+
     if (!removed) {
       return;
     }
-    
-    const deletedItems = { ...(data.deletedItems || {}), [itemId]: {
-      itemId,
-      itemTitle: removed.title,
-      itemType: removed.type,
-      watchHistory: removed.watchHistory || [],
-      deletedAt: new Date().toISOString()
-    }};
-    
+
+    const deletedItems = {
+      ...(data.deletedItems || {}),
+      [itemId]: {
+        itemId,
+        itemTitle: removed.title,
+        itemType: removed.type,
+        watchHistory: removed.watchHistory || [],
+        deletedAt: new Date().toISOString(),
+      },
+    };
+
     this.storageService.saveData({
       ...data,
       items,
-      deletedItems
+      deletedItems,
     });
   }
 
@@ -75,24 +77,24 @@ export class WatchListService {
       this.updateItem({
         ...item,
         status: 'completed',
-        watchHistory: [...item.watchHistory, { date: now }]
+        watchHistory: [...item.watchHistory, { date: now }],
       });
     } else if (item.type === 'series') {
       const progress = item.progress || { season: 1, episode: 1, seasons: [] };
       let newProgress: SeriesProgress;
       let newStatus: ItemStatus;
 
-      const currentSeasonInfo = progress.seasons.find(s => s.seasonNumber === progress.season);
+      const currentSeasonInfo = progress.seasons.find((s) => s.seasonNumber === progress.season);
 
       const currentTotal = currentSeasonInfo?.totalEpisodes;
       if (currentTotal !== undefined && currentTotal > 0 && progress.episode >= currentTotal) {
         const sortedSeasons = [...progress.seasons].sort((a, b) => a.seasonNumber - b.seasonNumber);
-        const nextSeasonInfo = sortedSeasons.find(s => s.seasonNumber > progress.season);
+        const nextSeasonInfo = sortedSeasons.find((s) => s.seasonNumber > progress.season);
         if (nextSeasonInfo) {
           newProgress = {
             ...progress,
             season: nextSeasonInfo.seasonNumber,
-            episode: 1
+            episode: 1,
           };
           newStatus = 'in-progress';
         } else {
@@ -102,7 +104,7 @@ export class WatchListService {
       } else {
         newProgress = {
           ...progress,
-          episode: progress.episode + 1
+          episode: progress.episode + 1,
         };
         newStatus = 'in-progress';
       }
@@ -111,11 +113,14 @@ export class WatchListService {
         ...item,
         status: newStatus,
         progress: newProgress,
-        watchHistory: [...item.watchHistory, {
-          date: now,
-          season: progress.season,
-          episode: progress.episode
-        }]
+        watchHistory: [
+          ...item.watchHistory,
+          {
+            date: now,
+            season: progress.season,
+            episode: progress.episode,
+          },
+        ],
       });
     }
   }
@@ -126,7 +131,7 @@ export class WatchListService {
 
     this.updateItem({
       ...item,
-      status: 'completed'
+      status: 'completed',
     });
   }
 
@@ -136,7 +141,7 @@ export class WatchListService {
 
     this.updateItem({
       ...item,
-      status: 'dropped'
+      status: 'dropped',
     });
   }
 
@@ -146,7 +151,7 @@ export class WatchListService {
 
     this.updateItem({
       ...item,
-      status: 'in-progress'
+      status: 'in-progress',
     });
   }
 
@@ -167,7 +172,7 @@ export class WatchListService {
     if (item.type === 'series' && item.progress) {
       if (item.status === 'completed') return 100;
       const currentSeason = item.progress.seasons.find(
-        (s) => s.seasonNumber === item.progress!.season
+        (s) => s.seasonNumber === item.progress!.season,
       );
       const currentTotal = currentSeason?.totalEpisodes;
       if (currentTotal !== undefined && currentTotal > 0) {
@@ -182,7 +187,7 @@ export class WatchListService {
   getMostRecentWatchDate(item: Item): string {
     if (item.watchHistory && item.watchHistory.length > 0) {
       const sorted = [...item.watchHistory].sort(
-        (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+        (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
       );
       return sorted[0].date;
     }
@@ -198,12 +203,12 @@ export class WatchListService {
     return data ? Object.values(data.items) : [];
   });
 
-  inProgressSeries = computed(() => 
-    this.items().filter(i => i.type === 'series' && i.status === 'in-progress')
+  inProgressSeries = computed(() =>
+    this.items().filter((i) => i.type === 'series' && i.status === 'in-progress'),
   );
 
   inProgressMovies = computed(() =>
-    this.items().filter(i => i.type === 'movie' && i.status === 'in-progress')
+    this.items().filter((i) => i.type === 'movie' && i.status === 'in-progress'),
   );
 
   history = computed(() => {
@@ -220,7 +225,7 @@ export class WatchListService {
           ...entry,
           itemId: item.id,
           itemTitle: item.title,
-          itemType: item.type
+          itemType: item.type,
         });
       }
     }
@@ -232,7 +237,7 @@ export class WatchListService {
           itemId: deleted.itemId,
           itemTitle: deleted.itemTitle,
           itemType: deleted.itemType,
-          isDeleted: true
+          isDeleted: true,
         });
       }
     }
diff --git a/src/app/utils/status.utils.ts b/src/app/utils/status.utils.ts
index b6abc80..9b35993 100644
--- a/src/app/utils/status.utils.ts
+++ b/src/app/utils/status.utils.ts
@@ -1,6 +1,10 @@
 import { ItemStatus } from '../models/item.model';
 
-export function statusBadgeClass(isSelected: boolean, status: ItemStatus, interactive = false): Record<string, boolean> {
+export function statusBadgeClass(
+  isSelected: boolean,
+  status: ItemStatus,
+  interactive = false,
+): Record<string, boolean> {
   const unselected = !isSelected;
   const notStarted = status === 'not-started';
   const inProgress = status === 'in-progress';
@@ -15,13 +19,21 @@ export function statusBadgeClass(isSelected: boolean, status: ItemStatus, intera
 
   return {
     [base]: unselected,
-    [`${shadow} border-transparent bg-status-not-started-bg-light dark:bg-status-not-started-bg-dark text-status-not-started-text-light dark:text-status-not-started-text-dark`]: isSelected && notStarted && interactive,
-    [`${shadow} border-transparent bg-status-in-progress-bg-light dark:bg-status-in-progress-bg-dark text-status-in-progress-text-light dark:text-status-in-progress-text-dark`]: isSelected && inProgress && interactive,
-    [`${shadow} border-transparent bg-status-completed-bg-light dark:bg-status-completed-bg-dark text-status-completed-text-light dark:text-status-completed-text-dark`]: isSelected && completed && interactive,
-    [`${shadow} border-transparent bg-status-dropped-bg-light dark:bg-status-dropped-bg-dark text-status-dropped-text-light dark:text-status-dropped-text-dark`]: isSelected && dropped && interactive,
-    'bg-status-not-started-bg-light dark:bg-status-not-started-bg-dark text-status-not-started-text-light dark:text-status-not-started-text-dark': isSelected && notStarted && !interactive,
-    'bg-status-in-progress-bg-light dark:bg-status-in-progress-bg-dark text-status-in-progress-text-light dark:text-status-in-progress-text-dark': isSelected && inProgress && !interactive,
-    'bg-status-completed-bg-light dark:bg-status-completed-bg-dark text-status-completed-text-light dark:text-status-completed-text-dark': isSelected && completed && !interactive,
-    'bg-status-dropped-bg-light dark:bg-status-dropped-bg-dark text-status-dropped-text-light dark:text-status-dropped-text-dark': isSelected && dropped && !interactive,
+    [`${shadow} border-transparent bg-status-not-started-bg-light dark:bg-status-not-started-bg-dark text-status-not-started-text-light dark:text-status-not-started-text-dark`]:
+      isSelected && notStarted && interactive,
+    [`${shadow} border-transparent bg-status-in-progress-bg-light dark:bg-status-in-progress-bg-dark text-status-in-progress-text-light dark:text-status-in-progress-text-dark`]:
+      isSelected && inProgress && interactive,
+    [`${shadow} border-transparent bg-status-completed-bg-light dark:bg-status-completed-bg-dark text-status-completed-text-light dark:text-status-completed-text-dark`]:
+      isSelected && completed && interactive,
+    [`${shadow} border-transparent bg-status-dropped-bg-light dark:bg-status-dropped-bg-dark text-status-dropped-text-light dark:text-status-dropped-text-dark`]:
+      isSelected && dropped && interactive,
+    'bg-status-not-started-bg-light dark:bg-status-not-started-bg-dark text-status-not-started-text-light dark:text-status-not-started-text-dark':
+      isSelected && notStarted && !interactive,
+    'bg-status-in-progress-bg-light dark:bg-status-in-progress-bg-dark text-status-in-progress-text-light dark:text-status-in-progress-text-dark':
+      isSelected && inProgress && !interactive,
+    'bg-status-completed-bg-light dark:bg-status-completed-bg-dark text-status-completed-text-light dark:text-status-completed-text-dark':
+      isSelected && completed && !interactive,
+    'bg-status-dropped-bg-light dark:bg-status-dropped-bg-dark text-status-dropped-text-light dark:text-status-dropped-text-dark':
+      isSelected && dropped && !interactive,
   };
 }
diff --git a/src/app/utils/watch-history.utils.spec.ts b/src/app/utils/watch-history.utils.spec.ts
index aa6f678..6ee5b60 100644
--- a/src/app/utils/watch-history.utils.spec.ts
+++ b/src/app/utils/watch-history.utils.spec.ts
@@ -8,7 +8,7 @@ describe('groupHistoryEntries', () => {
         itemId: '1',
         itemTitle: 'Movie',
         itemType: 'movie',
-        date: '2026-04-25T09:30:00'
+        date: '2026-04-25T09:30:00',
       },
       {
         itemId: '2',
@@ -16,8 +16,8 @@ describe('groupHistoryEntries', () => {
         itemType: 'series',
         date: '2026-04-26T08:15:00',
         season: 1,
-        episode: 3
-      }
+        episode: 3,
+      },
     ];
 
     const grouped = groupHistoryEntries(entries, 'en-US', new Date('2026-04-26T12:00:00'));
@@ -36,8 +36,8 @@ describe('groupHistoryEntries', () => {
         itemType: 'series',
         date: '2026-04-22T18:45:00',
         season: 2,
-        episode: 1
-      }
+        episode: 1,
+      },
     ];
 
     const grouped = groupHistoryEntries(entries, 'en-US', new Date('2026-04-26T12:00:00'));
diff --git a/src/app/utils/watch-history.utils.ts b/src/app/utils/watch-history.utils.ts
index 97df401..a93b93d 100644
--- a/src/app/utils/watch-history.utils.ts
+++ b/src/app/utils/watch-history.utils.ts
@@ -9,7 +9,7 @@ export interface CalendarGroup {
 export function groupHistoryEntries(
   entries: HistoryEntry[],
   locale = 'en-US',
-  now = new Date()
+  now = new Date(),
 ): CalendarGroup[] {
   const groups: CalendarGroup[] = [];
   const groupMap = new Map<string, (HistoryEntry & { relativeTime: string })[]>();
@@ -26,7 +26,7 @@ export function groupHistoryEntries(
 
     groupMap.get(dayKey)!.push({
       ...entry,
-      relativeTime: formatClockTime(entryDate)
+      relativeTime: formatClockTime(entryDate),
     });
   }
 
@@ -39,13 +39,15 @@ export function groupHistoryEntries(
       dateLabel: entryDay.toLocaleDateString(locale, {
         month: 'short',
         day: 'numeric',
-        year: 'numeric'
+        year: 'numeric',
       }),
-      entries: dayEntries
+      entries: dayEntries,
     });
   });
 
-  groups.sort((a, b) => new Date(b.entries[0].date).getTime() - new Date(a.entries[0].date).getTime());
+  groups.sort(
+    (a, b) => new Date(b.entries[0].date).getTime() - new Date(a.entries[0].date).getTime(),
+  );
 
   return groups;
 }
diff --git a/src/environments/environment.tauri.ts b/src/environments/environment.tauri.ts
index a1c2c55..5bc3f30 100644
--- a/src/environments/environment.tauri.ts
+++ b/src/environments/environment.tauri.ts
@@ -1,3 +1,3 @@
 export const environment = {
-  enableServiceWorker: false
+  enableServiceWorker: false,
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index a1c2c55..5bc3f30 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,3 +1,3 @@
 export const environment = {
-  enableServiceWorker: false
+  enableServiceWorker: false,
 };
diff --git a/src/environments/environment.web.ts b/src/environments/environment.web.ts
index 43ed7cd..a901a13 100644
--- a/src/environments/environment.web.ts
+++ b/src/environments/environment.web.ts
@@ -1,3 +1,3 @@
 export const environment = {
-  enableServiceWorker: true
+  enableServiceWorker: true,
 };
diff --git a/src/index.html b/src/index.html
index 77a7395..80ffada 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,25 +1,25 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>WatchList</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="manifest" href="manifest.webmanifest">
-  <script>
-    (function() {
-      const stored = localStorage.getItem('theme');
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const isDark = stored === 'dark' || (stored !== 'light' && prefersDark);
-      if (isDark) {
-        document.documentElement.classList.add('dark');
-      }
-    })();
-  </script>
-</head>
-<body>
-  <app-root></app-root>
-  <noscript>Please enable JavaScript to continue using this application.</noscript>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>WatchList</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="manifest" href="manifest.webmanifest" />
+    <script>
+      (function () {
+        const stored = localStorage.getItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const isDark = stored === 'dark' || (stored !== 'light' && prefersDark);
+        if (isDark) {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
+  </head>
+  <body>
+    <app-root></app-root>
+    <noscript>Please enable JavaScript to continue using this application.</noscript>
+  </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
index 5df75f9..190f341 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,5 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { App } from './app/app';
 
-bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));
diff --git a/src/styles.css b/src/styles.css
index 2fbfbad..7015999 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -74,7 +74,7 @@
   --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
   --shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.5);
 
-  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
 @layer base {
@@ -99,7 +99,9 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     @apply bg-light-bg-primary text-light-font dark:bg-dark-bg-primary dark:text-dark-font;
-    transition: background-color 0.3s ease, color 0.3s ease;
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
   }
 
   button,

From 3f07552b3798a7f86a9878ef3dcf8e6ee66ee1ea Mon Sep 17 00:00:00 2001
From: Ma <101021254+CodeWithMa@users.noreply.github.com>
Date: Sat, 18 Jul 2026 07:03:27 +0200
Subject: [PATCH 5/5] ci: use bunx for typecheck

---
 .github/workflows/pr.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 7e3d05c..8553974 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -24,7 +24,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
       - run: bun install --frozen-lockfile
-      - run: npx tsc --noEmit -p tsconfig.app.json
+      - run: bunx tsc --noEmit -p tsconfig.app.json
 
   test:
     runs-on: ubuntu-latest