From 6528538814f95bae4b2dd9be1cc5483c9199b030 Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 00:43:14 -0300
Subject: [PATCH 01/15] refactor: use @ imports

---
 src/entrypoints/content.ts             | 2 +-
 src/entrypoints/popup/popup.ts         | 2 +-
 src/lib/components/FilterEditor.svelte | 2 +-
 src/lib/components/Toast.svelte        | 6 +++---
 src/lib/github.ts                      | 4 ++--
 src/lib/storage.ts                     | 6 +++---
 src/lib/stores/filters.ts              | 6 +++---
 src/lib/types/messages.ts              | 4 ++--
 src/lib/utils/messaging.ts             | 8 ++++----
 src/lib/utils/validation.ts            | 2 +-
 10 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/entrypoints/content.ts b/src/entrypoints/content.ts
index d8fa000..2ab6dc2 100644
--- a/src/entrypoints/content.ts
+++ b/src/entrypoints/content.ts
@@ -1,6 +1,6 @@
 import "../app.css";
 import { mount } from "svelte";
-import GithubPrFilter from "./content/GithubPRFilter.svelte";
+import GithubPrFilter from "@/entrypoints/content/GithubPRFilter.svelte";
 import { logger } from "@/lib/utils/logger";
 
 export default defineContentScript({
diff --git a/src/entrypoints/popup/popup.ts b/src/entrypoints/popup/popup.ts
index 46c1e1d..7a0a5fb 100644
--- a/src/entrypoints/popup/popup.ts
+++ b/src/entrypoints/popup/popup.ts
@@ -1,5 +1,5 @@
 import "../../app.css";
-import Popup from "./Popup.svelte";
+import Popup from "@/entrypoints/popup/Popup.svelte";
 import { mount } from "svelte";
 
 const appElement = document.getElementById("app");
diff --git a/src/lib/components/FilterEditor.svelte b/src/lib/components/FilterEditor.svelte
index 60a8f9f..a8e9dc9 100644
--- a/src/lib/components/FilterEditor.svelte
+++ b/src/lib/components/FilterEditor.svelte
@@ -3,7 +3,7 @@
   import { filterStore } from "@/lib/stores/filters";
   import { validateFilter, validateFilterName } from "@/lib/utils/validation";
   import { cn } from "@/lib/utils/cn";
-  import ErrorDisplay from "./ErrorDisplay.svelte";
+  import ErrorDisplay from "@/lib/components/ErrorDisplay.svelte";
 
   let {
     filter,
diff --git a/src/lib/components/Toast.svelte b/src/lib/components/Toast.svelte
index 471d0cd..c209447 100644
--- a/src/lib/components/Toast.svelte
+++ b/src/lib/components/Toast.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { cn } from "../utils/cn";
-  import { TOAST_TYPES, ToastType } from "../types/toast";
-  import { TOAST_DURATION } from "../constants";
+  import { cn } from "@/lib/utils/cn";
+  import { TOAST_TYPES, ToastType } from "@/lib/types/toast";
+  import { TOAST_DURATION } from "@/lib/constants";
 
   let {
     message,
diff --git a/src/lib/github.ts b/src/lib/github.ts
index 58b4f1b..7591baa 100644
--- a/src/lib/github.ts
+++ b/src/lib/github.ts
@@ -1,5 +1,5 @@
-import { logger } from "./utils/logger";
-import { GITHUB_PATTERNS } from "./constants";
+import { logger } from "@/lib/utils/logger";
+import { GITHUB_PATTERNS } from "@/lib/constants";
 
 export const SELECTORS = {
   GITHUB_SEARCH: "#js-issues-search",
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index 92acfe5..9f3a2d6 100644
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -1,6 +1,6 @@
-import type { PRFilter, NewPRFilter } from "./types/filter";
-import { logger } from "./utils/logger";
-import { STORAGE_KEYS } from "./constants";
+import type { PRFilter, NewPRFilter } from "@/lib/types/filter";
+import { logger } from "@/lib/utils/logger";
+import { STORAGE_KEYS } from "@/lib/constants";
 
 export async function saveFilters(filters: PRFilter[]): Promise<void> {
   await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: filters });
diff --git a/src/lib/stores/filters.ts b/src/lib/stores/filters.ts
index 49335d9..8509db3 100644
--- a/src/lib/stores/filters.ts
+++ b/src/lib/stores/filters.ts
@@ -1,7 +1,7 @@
 import { writable, derived, get } from "svelte/store";
-import type { PRFilter, NewPRFilter } from "../types/filter";
-import { logger } from "../utils/logger";
-import { STORAGE_KEYS } from "../constants";
+import type { PRFilter, NewPRFilter } from "@/lib/types/filter";
+import { logger } from "@/lib/utils/logger";
+import { STORAGE_KEYS } from "@/lib/constants";
 
 interface FilterStoreState {
   filters: PRFilter[];
diff --git a/src/lib/types/messages.ts b/src/lib/types/messages.ts
index 6877d15..8b21945 100644
--- a/src/lib/types/messages.ts
+++ b/src/lib/types/messages.ts
@@ -1,5 +1,5 @@
-import type { PRFilter } from "./filter";
-import { MESSAGE_ACTIONS } from "../constants";
+import type { PRFilter } from "@/lib/types/filter";
+import { MESSAGE_ACTIONS } from "@/lib/constants";
 
 export type ApplyFiltersMessage = {
   action: typeof MESSAGE_ACTIONS.APPLY_FILTERS;
diff --git a/src/lib/utils/messaging.ts b/src/lib/utils/messaging.ts
index 87f5be2..b0481f9 100644
--- a/src/lib/utils/messaging.ts
+++ b/src/lib/utils/messaging.ts
@@ -1,7 +1,7 @@
-import type { PRFilter } from "../types/filter";
-import type { ToggleFilterMessage } from "../types/messages";
-import { MESSAGE_ACTIONS, GITHUB_PATTERNS } from "../constants";
-import { logger } from "./logger";
+import type { PRFilter } from "@/lib/types/filter";
+import type { ToggleFilterMessage } from "@/lib/types/messages";
+import { MESSAGE_ACTIONS, GITHUB_PATTERNS } from "@/lib/constants";
+import { logger } from "@/lib/utils/logger";
 
 /**
  * Broadcast filter toggle to all GitHub PR tabs
diff --git a/src/lib/utils/validation.ts b/src/lib/utils/validation.ts
index 984633b..4515118 100644
--- a/src/lib/utils/validation.ts
+++ b/src/lib/utils/validation.ts
@@ -1,4 +1,4 @@
-import { VALIDATION } from "../constants";
+import { VALIDATION } from "@/lib/constants";
 
 export interface ValidationResult {
   readonly isValid: boolean;

From 0de96451dfdcd2ce5664562b582fef54665d8026 Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 00:43:38 -0300
Subject: [PATCH 02/15] refactor: change color pallete

---
 src/app.css | 78 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 49 insertions(+), 29 deletions(-)

diff --git a/src/app.css b/src/app.css
index db8bc70..6b98e67 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,44 +4,64 @@
 @plugin "@tailwindcss/forms";
 
 @theme {
-  /* Primary brand colors */
-  --color-primary: #05d9ff;
-  --color-primary-hover: #04b8d9;
-  --color-primary-dark: #0396b3;
+  /* Primary */
+  --color-primary: #0969da;
+  --color-primary-hover: #0550ae;
+  --color-primary-dark: #033d8b;
 
-  /* Accent color */
-  --color-accent: #f535aa;
-  --color-accent-hover: #dc2f99;
+  /* Accent */
+  --color-accent: #8250df;
+  --color-accent-hover: #6639ba;
 
   /* Semantic colors */
-  --color-success: #10b981;
-  --color-success-light: #d1fae5;
-  --color-success-dark: #065f46;
-  --color-error: #ef4444;
-  --color-error-light: #fee2e2;
-  --color-error-dark: #991b1b;
-  --color-warning: #f59e0b;
-  --color-warning-light: #fef3c7;
-  --color-warning-dark: #92400e;
-  --color-info: #3b82f6;
-  --color-info-light: #dbeafe;
-  --color-info-dark: #1e40af;
+  --color-success: #1a7f37;
+  --color-success-light: #dafbe1;
+  --color-success-dark: #044f1e;
+
+  --color-error: #d1242f;
+  --color-error-light: #ffebe9;
+  --color-error-dark: #8e1519;
+
+  --color-warning: #bf8700;
+  --color-warning-light: #fff8c5;
+  --color-warning-dark: #7d4e00;
+
+  --color-info: #0969da;
+  --color-info-light: #ddf4ff;
+  --color-info-dark: #0550ae;
 
   /* Neutrals */
-  --color-bg-primary: #ffffff;
-  --color-bg-secondary: #f9fafb;
-  --color-bg-tertiary: #f3f4f6;
-  --color-text-primary: #111827;
-  --color-text-secondary: #6b7280;
-  --color-text-tertiary: #9ca3af;
-  --color-border: #e5e7eb;
-  --color-border-light: #f3f4f6;
+  --color-bg-primary: light-dark(#ffffff, #0d1117);
+  --color-bg-secondary: light-dark(#f6f8fa, #161b22);
+  --color-bg-tertiary: light-dark(#eaeef2, #21262d);
+  --color-text-primary: light-dark(#1f2328, #c9d1d9);
+  --color-text-secondary: light-dark(#656d76, #8b949e);
+  --color-text-tertiary: light-dark(#8c959f, #6e7681);
+  --color-border: light-dark(#d0d7de, #30363d);
+  --color-border-light: light-dark(#eaeef2, #21262d);
 }
 
-/* Base
-*************************************************/
 @layer base {
   body {
     @apply bg-bg-secondary text-text-primary;
   }
+
+  /* Ensure color scheme is set for light-dark() to work */
+  :root {
+    color-scheme: light dark;
+  }
+}
+
+@layer components {
+  .filter-badge {
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+  }
+
+  .filter-badge-enabled {
+    @apply bg-success-light text-success-dark;
+  }
+
+  .filter-badge-disabled {
+    @apply bg-bg-tertiary text-text-secondary;
+  }
 }

From 42091e43ba594f2a389d8d74ba1a0efba6160103 Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 00:43:58 -0300
Subject: [PATCH 03/15] refactor: move `DEFAULT_FILTERS` outside of function

---
 src/entrypoints/background.ts | 39 ++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
index aab47fd..4b80512 100644
--- a/src/entrypoints/background.ts
+++ b/src/entrypoints/background.ts
@@ -8,6 +8,27 @@ import type {
 import { MESSAGE_ACTIONS, GITHUB_PATTERNS, CONTEXT_MENU_IDS } from "@/lib/constants";
 import { logger } from "@/lib/utils/logger";
 
+const DEFAULT_FILTERS = [
+  {
+    id: crypto.randomUUID(),
+    name: "Hide Dependabot PRs",
+    value: "-author:app/dependabot",
+    enabled: true,
+  },
+  {
+    id: crypto.randomUUID(),
+    name: "Only Open PRs",
+    value: "is:open",
+    enabled: true,
+  },
+  {
+    id: crypto.randomUUID(),
+    name: "Is a PR",
+    value: "is:pr",
+    enabled: true,
+  },
+] satisfies PRFilter[];
+
 export default defineBackground(() => {
   logger.info("GitHub PR Filters background script initialized");
 
@@ -18,23 +39,7 @@ export default defineBackground(() => {
       const existingFilters = await getFilters();
 
       if (existingFilters.length === 0) {
-        // Add some default filters as examples
-        const defaultFilters: PRFilter[] = [
-          {
-            id: crypto.randomUUID(),
-            name: "Hide Dependabot PRs",
-            value: "-author:app/dependabot",
-            enabled: true,
-          },
-          {
-            id: crypto.randomUUID(),
-            name: "Only Open PRs",
-            value: "is:open",
-            enabled: true,
-          },
-        ];
-
-        await saveFilters(defaultFilters);
+        await saveFilters(DEFAULT_FILTERS);
         logger.info("Default filters installed");
       }
 

From 88f7b452e7187088c758417931525d9bf36f1f7e Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 00:46:22 -0300
Subject: [PATCH 04/15] refactor: satisfies over type assertion

---
 src/entrypoints/options/Options.svelte | 8 +++-----
 src/entrypoints/popup/Popup.svelte     | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/entrypoints/options/Options.svelte b/src/entrypoints/options/Options.svelte
index 4fdd64f..5ff50ed 100644
--- a/src/entrypoints/options/Options.svelte
+++ b/src/entrypoints/options/Options.svelte
@@ -50,10 +50,10 @@
     }
 
     // Create updated filter with toggled state
-    const toggledFilter: PRFilter = {
+    const toggledFilter = {
       ...filter,
       enabled: !filter.enabled,
-    };
+    } satisfies PRFilter;
 
     // Broadcast to all GitHub PR tabs with NEW state
     broadcastFilterToggle(toggledFilter);
@@ -167,9 +167,7 @@
                 <span
                   class={cn(
                     "ml-2 rounded px-2 py-0.5 text-xs font-medium",
-                    filter.enabled
-                      ? "bg-success-light text-success-dark"
-                      : "bg-bg-tertiary text-text-secondary"
+                    filter.enabled ? "filter-badge-enabled" : "filter-badge-disabled"
                   )}
                 >
                   {filter.enabled ? "Enabled" : "Disabled"}
diff --git a/src/entrypoints/popup/Popup.svelte b/src/entrypoints/popup/Popup.svelte
index 5dbbb5c..aec4e61 100644
--- a/src/entrypoints/popup/Popup.svelte
+++ b/src/entrypoints/popup/Popup.svelte
@@ -44,10 +44,10 @@
     }
 
     // Create updated filter with toggled state
-    const toggledFilter: PRFilter = {
+    const toggledFilter = {
       ...filter,
       enabled: !filter.enabled,
-    };
+    } satisfies PRFilter;
 
     // Broadcast to all GitHub PR tabs with NEW state
     broadcastFilterToggle(toggledFilter);

From 44ca1aab380dc6edddc47b7d48900b0cb9489922 Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 00:47:59 -0300
Subject: [PATCH 05/15] style: format tabWidth to 4

---
 .github/workflows/ci.yml                      | 200 ++++-----
 .lintstagedrc.json                            |   4 +-
 .prettierrc                                   |  30 +-
 README.md                                     |  66 +--
 eslint.config.js                              | 191 +++++----
 package.json                                  | 146 +++----
 scripts/generate-icons.mjs                    |  24 +-
 src/app.css                                   |  90 ++--
 src/entrypoints/background.ts                 | 172 ++++----
 src/entrypoints/content.ts                    |  24 +-
 src/entrypoints/content/GithubPRFilter.svelte | 213 +++++-----
 src/entrypoints/options/Options.svelte        | 401 +++++++++---------
 src/entrypoints/options/index.html            |  18 +-
 src/entrypoints/options/options.ts            |   4 +-
 src/entrypoints/popup/Popup.svelte            | 202 ++++-----
 src/entrypoints/popup/index.html              |  20 +-
 src/entrypoints/popup/popup.ts                |   4 +-
 src/lib/components/ErrorDisplay.svelte        |  72 ++--
 src/lib/components/FilterEditor.svelte        | 340 +++++++--------
 src/lib/components/Icon.svelte                |  38 +-
 src/lib/components/Toast.svelte               | 144 +++----
 src/lib/constants.ts                          |  34 +-
 src/lib/github.ts                             | 202 ++++-----
 src/lib/storage.ts                            |  66 +--
 src/lib/stores/filters.ts                     | 352 +++++++--------
 src/lib/types/filter.ts                       |   8 +-
 src/lib/types/messages.ts                     |  12 +-
 src/lib/types/toast.ts                        |   8 +-
 src/lib/utils/cn.ts                           |   2 +-
 src/lib/utils/dom.ts                          |  72 ++--
 src/lib/utils/logger.ts                       |  90 ++--
 src/lib/utils/messaging.ts                    |  30 +-
 src/lib/utils/validation.ts                   | 176 ++++----
 tsconfig.json                                 |   8 +-
 wxt.config.ts                                 |  52 +--
 35 files changed, 1772 insertions(+), 1743 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9205a28..47fd671 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,105 +1,105 @@
 name: CI
 
 on:
-  pull_request:
-    branches: [main]
-  push:
-    branches: [main]
+    pull_request:
+        branches: [main]
+    push:
+        branches: [main]
 
 jobs:
-  lint-and-format:
-    name: Lint & Format Check
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Run linter
-        run: pnpm lint
-
-      - name: Run formatter check
-        run: pnpm format
-
-      - name: Run type check
-        run: pnpm check
-
-  build:
-    name: Build Extension
-    runs-on: ubuntu-latest
-    needs: lint-and-format
-
-    strategy:
-      matrix:
-        browser: [chrome, firefox]
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build for ${{ matrix.browser }}
-        run: |
-          if [ "${{ matrix.browser }}" = "firefox" ]; then
-            pnpm build:firefox
-          else
-            pnpm build
-          fi
-
-      - name: Upload build artifacts
-        uses: actions/upload-artifact@v4
-        with:
-          name: extension-${{ matrix.browser }}
-          path: .output/${{ matrix.browser == 'firefox' && 'firefox-mv2' || 'chrome-mv3' }}
-          retention-days: 7
+    lint-and-format:
+        name: Lint & Format Check
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "20"
+
+            - name: Setup pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                  version: 10
+
+            - name: Get pnpm store directory
+              shell: bash
+              run: |
+                  echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+            - name: Setup pnpm cache
+              uses: actions/cache@v4
+              with:
+                  path: ${{ env.STORE_PATH }}
+                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                      ${{ runner.os }}-pnpm-store-
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Run linter
+              run: pnpm lint
+
+            - name: Run formatter check
+              run: pnpm format
+
+            - name: Run type check
+              run: pnpm check
+
+    build:
+        name: Build Extension
+        runs-on: ubuntu-latest
+        needs: lint-and-format
+
+        strategy:
+            matrix:
+                browser: [chrome, firefox]
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "20"
+
+            - name: Setup pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                  version: 10
+
+            - name: Get pnpm store directory
+              shell: bash
+              run: |
+                  echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+            - name: Setup pnpm cache
+              uses: actions/cache@v4
+              with:
+                  path: ${{ env.STORE_PATH }}
+                  key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+                  restore-keys: |
+                      ${{ runner.os }}-pnpm-store-
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Build for ${{ matrix.browser }}
+              run: |
+                  if [ "${{ matrix.browser }}" = "firefox" ]; then
+                    pnpm build:firefox
+                  else
+                    pnpm build
+                  fi
+
+            - name: Upload build artifacts
+              uses: actions/upload-artifact@v4
+              with:
+                  name: extension-${{ matrix.browser }}
+                  path: .output/${{ matrix.browser == 'firefox' && 'firefox-mv2' || 'chrome-mv3' }}
+                  retention-days: 7
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
index 3f39e00..4489242 100644
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@@ -1,4 +1,4 @@
 {
-  "*.{js,ts,svelte}": ["prettier --write", "eslint --fix"],
-  "*.{json,md,css,html}": ["prettier --write"]
+    "*.{js,ts,svelte}": ["prettier --write", "eslint --fix"],
+    "*.{json,md,css,html}": ["prettier --write"]
 }
diff --git a/.prettierrc b/.prettierrc
index 43a65ec..79c2903 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,17 +1,17 @@
 {
-  "semi": true,
-  "singleQuote": false,
-  "tabWidth": 2,
-  "useTabs": false,
-  "trailingComma": "es5",
-  "printWidth": 100,
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-  "overrides": [
-    {
-      "files": "*.svelte",
-      "options": {
-        "parser": "svelte"
-      }
-    }
-  ]
+    "semi": true,
+    "singleQuote": false,
+    "tabWidth": 4,
+    "useTabs": false,
+    "trailingComma": "es5",
+    "printWidth": 100,
+    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+    "overrides": [
+        {
+            "files": "*.svelte",
+            "options": {
+                "parser": "svelte"
+            }
+        }
+    ]
 }
diff --git a/README.md b/README.md
index b11a512..1cd7845 100644
--- a/README.md
+++ b/README.md
@@ -49,16 +49,16 @@ pnpm build:firefox # For Firefox
 
 **Chrome/Chromium:**
 
-- Open `chrome://extensions/`
-- Enable "Developer mode"
-- Click "Load unpacked"
-- Select the `.output/chrome-mv3` directory
+-   Open `chrome://extensions/`
+-   Enable "Developer mode"
+-   Click "Load unpacked"
+-   Select the `.output/chrome-mv3` directory
 
 **Firefox:**
 
-- Open `about:debugging#/runtime/this-firefox`
-- Click "Load Temporary Add-on"
-- Select the `manifest.json` file from `.output/firefox-mv2`
+-   Open `about:debugging#/runtime/this-firefox`
+-   Click "Load Temporary Add-on"
+-   Select the `manifest.json` file from `.output/firefox-mv2`
 
 ### Development Mode
 
@@ -77,8 +77,8 @@ pnpm dev:firefox # Firefox with hot reload
 3. **Click the extension icon** to open the popup
 4. **Click "Manage Filters"** to add your first filter
 5. **Create a filter** with a name and GitHub search syntax:
-   - Name: `Hide Dependabot PRs`
-   - Value: `-author:app/dependabot`
+    - Name: `Hide Dependabot PRs`
+    - Value: `-author:app/dependabot`
 6. **Save** and refresh the PR page - filter applies automatically!
 
 ### Filter Examples
@@ -106,11 +106,11 @@ See [GitHub's search syntax documentation](https://docs.github.com/en/search-git
 
 ### Technology Stack
 
-- **[WXT](https://wxt.dev/)** - Cross-browser extension framework
-- **[Svelte 5](https://svelte.dev/)** - Reactive UI framework with runes API
-- **[TypeScript](https://www.typescriptlang.org/)** - Type-safe development
-- **[Tailwind CSS 4](https://tailwindcss.com/)** - Utility-first styling
-- **[Vite](https://vitejs.dev/)** - Fast build tool
+-   **[WXT](https://wxt.dev/)** - Cross-browser extension framework
+-   **[Svelte 5](https://svelte.dev/)** - Reactive UI framework with runes API
+-   **[TypeScript](https://www.typescriptlang.org/)** - Type-safe development
+-   **[Tailwind CSS 4](https://tailwindcss.com/)** - Utility-first styling
+-   **[Vite](https://vitejs.dev/)** - Fast build tool
 
 ### Project Structure
 
@@ -153,24 +153,24 @@ pullscope/
 
 **Filter Store** (`src/lib/stores/filters.ts`)
 
-- Centralized state management
-- Automatic sync with browser storage
-- Real-time updates across components
-- Storage change listener for cross-tab sync
+-   Centralized state management
+-   Automatic sync with browser storage
+-   Real-time updates across components
+-   Storage change listener for cross-tab sync
 
 **GitHub Integration** (`src/lib/github.ts`)
 
-- Multiple fallback selectors for robustness
-- Token-based duplicate detection
-- Form submission triggering
-- Proper event dispatching
+-   Multiple fallback selectors for robustness
+-   Token-based duplicate detection
+-   Form submission triggering
+-   Proper event dispatching
 
 **Content Script** (`src/entrypoints/content/GithubPRFilter.svelte`)
 
-- Waits for DOM elements to load
-- Debounced URL change handler
-- Real-time filter toggle listener
-- Toast notifications
+-   Waits for DOM elements to load
+-   Debounced URL change handler
+-   Real-time filter toggle listener
+-   Toast notifications
 
 ## 🤝 Contributing
 
@@ -190,9 +190,9 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 
 ### Guidelines
 
-- Follow the existing code style
-- Use technology standards
-- Update documentation as needed
+-   Follow the existing code style
+-   Use technology standards
+-   Update documentation as needed
 
 ## 📝 License
 
@@ -202,10 +202,10 @@ MIT License - see [LICENSE](LICENSE) file for details
 
 **Guido Dinello**
 
-- GitHub: [@guidodinello](https://github.com/guidodinello)
-- Extension ID: `pullscope@guidodinello.dev`
+-   GitHub: [@guidodinello](https://github.com/guidodinello)
+-   Extension ID: `pullscope@guidodinello.dev`
 
 ## 🙏 Acknowledgments
 
-- Built with [WXT](https://wxt.dev/)
-- Template used [oneezy/svelte-5-extension](https://github.com/oneezy/svelte-5-extension)
+-   Built with [WXT](https://wxt.dev/)
+-   Template used [oneezy/svelte-5-extension](https://github.com/oneezy/svelte-5-extension)
diff --git a/eslint.config.js b/eslint.config.js
index e90ecae..67ff890 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,102 +5,109 @@ import sveltePlugin from "eslint-plugin-svelte";
 import svelteParser from "svelte-eslint-parser";
 
 export default [
-  // Ignore patterns
-  {
-    ignores: [".output/**", ".wxt/**", "dist/**", "node_modules/**", "*.config.js", "*.config.ts"],
-  },
-
-  // JavaScript/TypeScript files
-  {
-    files: ["**/*.js", "**/*.ts"],
-    plugins: {
-      "@typescript-eslint": tseslint,
-    },
-    languageOptions: {
-      parser: tsparser,
-      parserOptions: {
-        ecmaVersion: 2022,
-        sourceType: "module",
-      },
-      globals: {
-        // Browser globals
-        browser: "readonly",
-        document: "readonly",
-        window: "readonly",
-        crypto: "readonly",
-        console: "readonly",
-        setTimeout: "readonly",
-        clearTimeout: "readonly",
-        Event: "readonly",
-        KeyboardEvent: "readonly",
-        HTMLInputElement: "readonly",
-        Element: "readonly",
-        MutationObserver: "readonly",
-        // WXT globals
-        defineBackground: "readonly",
-        defineContentScript: "readonly",
-      },
+    // Ignore patterns
+    {
+        ignores: [
+            ".output/**",
+            ".wxt/**",
+            "dist/**",
+            "node_modules/**",
+            "*.config.js",
+            "*.config.ts",
+        ],
     },
-    rules: {
-      ...js.configs.recommended.rules,
-      ...tseslint.configs.recommended.rules,
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_",
+
+    // JavaScript/TypeScript files
+    {
+        files: ["**/*.js", "**/*.ts"],
+        plugins: {
+            "@typescript-eslint": tseslint,
+        },
+        languageOptions: {
+            parser: tsparser,
+            parserOptions: {
+                ecmaVersion: 2022,
+                sourceType: "module",
+            },
+            globals: {
+                // Browser globals
+                browser: "readonly",
+                document: "readonly",
+                window: "readonly",
+                crypto: "readonly",
+                console: "readonly",
+                setTimeout: "readonly",
+                clearTimeout: "readonly",
+                Event: "readonly",
+                KeyboardEvent: "readonly",
+                HTMLInputElement: "readonly",
+                Element: "readonly",
+                MutationObserver: "readonly",
+                // WXT globals
+                defineBackground: "readonly",
+                defineContentScript: "readonly",
+            },
+        },
+        rules: {
+            ...js.configs.recommended.rules,
+            ...tseslint.configs.recommended.rules,
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                    argsIgnorePattern: "^_",
+                    varsIgnorePattern: "^_",
+                },
+            ],
+            "@typescript-eslint/no-explicit-any": "warn",
+            "no-console": ["warn", { allow: ["warn", "error"] }],
         },
-      ],
-      "@typescript-eslint/no-explicit-any": "warn",
-      "no-console": ["warn", { allow: ["warn", "error"] }],
     },
-  },
 
-  // Svelte files
-  {
-    files: ["**/*.svelte"],
-    plugins: {
-      svelte: sveltePlugin,
-      "@typescript-eslint": tseslint,
-    },
-    languageOptions: {
-      parser: svelteParser,
-      parserOptions: {
-        parser: tsparser,
-        extraFileExtensions: [".svelte"],
-      },
-      globals: {
-        // Browser globals
-        browser: "readonly",
-        document: "readonly",
-        window: "readonly",
-        crypto: "readonly",
-        console: "readonly",
-        setTimeout: "readonly",
-        clearTimeout: "readonly",
-        Event: "readonly",
-        KeyboardEvent: "readonly",
-        HTMLInputElement: "readonly",
-        Element: "readonly",
-        MutationObserver: "readonly",
-        // WXT globals
-        defineBackground: "readonly",
-        defineContentScript: "readonly",
-      },
-    },
-    rules: {
-      ...sveltePlugin.configs.recommended.rules,
-      ...tseslint.configs.recommended.rules,
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_",
+    // Svelte files
+    {
+        files: ["**/*.svelte"],
+        plugins: {
+            svelte: sveltePlugin,
+            "@typescript-eslint": tseslint,
+        },
+        languageOptions: {
+            parser: svelteParser,
+            parserOptions: {
+                parser: tsparser,
+                extraFileExtensions: [".svelte"],
+            },
+            globals: {
+                // Browser globals
+                browser: "readonly",
+                document: "readonly",
+                window: "readonly",
+                crypto: "readonly",
+                console: "readonly",
+                setTimeout: "readonly",
+                clearTimeout: "readonly",
+                Event: "readonly",
+                KeyboardEvent: "readonly",
+                HTMLInputElement: "readonly",
+                Element: "readonly",
+                MutationObserver: "readonly",
+                // WXT globals
+                defineBackground: "readonly",
+                defineContentScript: "readonly",
+            },
+        },
+        rules: {
+            ...sveltePlugin.configs.recommended.rules,
+            ...tseslint.configs.recommended.rules,
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                    argsIgnorePattern: "^_",
+                    varsIgnorePattern: "^_",
+                },
+            ],
+            "@typescript-eslint/no-explicit-any": "warn",
+            "no-console": ["warn", { allow: ["warn", "error"] }],
+            "svelte/no-at-html-tags": "warn",
         },
-      ],
-      "@typescript-eslint/no-explicit-any": "warn",
-      "no-console": ["warn", { allow: ["warn", "error"] }],
-      "svelte/no-at-html-tags": "warn",
     },
-  },
 ];
diff --git a/package.json b/package.json
index ff78077..a584f1d 100644
--- a/package.json
+++ b/package.json
@@ -1,75 +1,75 @@
 {
-  "name": "pullscope",
-  "description": "Automatically apply custom filters to GitHub Pull Request pages with real-time sync",
-  "private": true,
-  "version": "0.0.1",
-  "type": "module",
-  "keywords": [
-    "github",
-    "pull-request",
-    "filters",
-    "browser-extension",
-    "chrome-extension",
-    "firefox-extension",
-    "wxt",
-    "svelte",
-    "svelte-5",
-    "tailwind",
-    "tailwind-4"
-  ],
-  "scripts": {
-    "dev": "wxt",
-    "dev:firefox": "wxt -b firefox",
-    "build": "wxt build",
-    "build:firefox": "wxt build -b firefox",
-    "zip": "wxt zip",
-    "zip:firefox": "wxt zip -b firefox",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "lint-staged": "lint-staged",
-    "fix": "pnpm run lint:fix && pnpm run format && pnpm run check",
-    "generate-icons": "node scripts/generate-icons.mjs",
-    "postinstall": "wxt prepare",
-    "clean": "git clean -fXd",
-    "prepare": "husky"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@resvg/resvg-js": "^2.6.2",
-    "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
-    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/typography": "^0.5.15",
-    "@tailwindcss/vite": "4.0.0-alpha.24",
-    "@tsconfig/svelte": "^5.0.4",
-    "@types/chrome": "^0.0.269",
-    "@typescript-eslint/eslint-plugin": "^8.46.4",
-    "@typescript-eslint/parser": "^8.46.4",
-    "@wxt-dev/module-svelte": "^1.0.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-svelte": "^3.13.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.2.6",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "svelte": "5.0.0-next.245",
-    "svelte-check": "^3.8.6",
-    "svelte-eslint-parser": "^1.4.0",
-    "tailwindcss": "4.0.0-alpha.24",
-    "tslib": "^2.7.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.5",
-    "vite-plugin-top-level-await": "^1.4.4",
-    "vite-plugin-wasm": "^3.3.0",
-    "wxt": "^0.19.9"
-  },
-  "overrides": {
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next"
-  },
-  "resolutions": {
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next"
-  }
+    "name": "pullscope",
+    "description": "Automatically apply custom filters to GitHub Pull Request pages with real-time sync",
+    "private": true,
+    "version": "0.0.1",
+    "type": "module",
+    "keywords": [
+        "github",
+        "pull-request",
+        "filters",
+        "browser-extension",
+        "chrome-extension",
+        "firefox-extension",
+        "wxt",
+        "svelte",
+        "svelte-5",
+        "tailwind",
+        "tailwind-4"
+    ],
+    "scripts": {
+        "dev": "wxt",
+        "dev:firefox": "wxt -b firefox",
+        "build": "wxt build",
+        "build:firefox": "wxt build -b firefox",
+        "zip": "wxt zip",
+        "zip:firefox": "wxt zip -b firefox",
+        "check": "svelte-check --tsconfig ./tsconfig.json",
+        "lint": "eslint .",
+        "lint:fix": "eslint . --fix",
+        "format": "prettier --write .",
+        "format:check": "prettier --check .",
+        "lint-staged": "lint-staged",
+        "fix": "pnpm run lint:fix && pnpm run format && pnpm run check",
+        "generate-icons": "node scripts/generate-icons.mjs",
+        "postinstall": "wxt prepare",
+        "clean": "git clean -fXd",
+        "prepare": "husky"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.39.1",
+        "@resvg/resvg-js": "^2.6.2",
+        "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
+        "@tailwindcss/forms": "^0.5.9",
+        "@tailwindcss/typography": "^0.5.15",
+        "@tailwindcss/vite": "4.0.0-alpha.24",
+        "@tsconfig/svelte": "^5.0.4",
+        "@types/chrome": "^0.0.269",
+        "@typescript-eslint/eslint-plugin": "^8.46.4",
+        "@typescript-eslint/parser": "^8.46.4",
+        "@wxt-dev/module-svelte": "^1.0.1",
+        "eslint": "^9.39.1",
+        "eslint-plugin-svelte": "^3.13.0",
+        "husky": "^9.1.7",
+        "lint-staged": "^16.2.6",
+        "prettier": "^3.3.3",
+        "prettier-plugin-svelte": "^3.2.6",
+        "prettier-plugin-tailwindcss": "^0.5.14",
+        "svelte": "5.0.0-next.245",
+        "svelte-check": "^3.8.6",
+        "svelte-eslint-parser": "^1.4.0",
+        "tailwindcss": "4.0.0-alpha.24",
+        "tslib": "^2.7.0",
+        "typescript": "^5.6.2",
+        "vite": "^5.4.5",
+        "vite-plugin-top-level-await": "^1.4.4",
+        "vite-plugin-wasm": "^3.3.0",
+        "wxt": "^0.19.9"
+    },
+    "overrides": {
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next"
+    },
+    "resolutions": {
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next"
+    }
 }
diff --git a/scripts/generate-icons.mjs b/scripts/generate-icons.mjs
index ae738fb..b8786c8 100755
--- a/scripts/generate-icons.mjs
+++ b/scripts/generate-icons.mjs
@@ -17,22 +17,22 @@ const svg = readFileSync(svgPath, "utf-8");
 console.log("Generating PNG icons from SVG...\n");
 
 for (const size of sizes) {
-  const outputPath = join(outputDir, `icon-${size}.png`);
+    const outputPath = join(outputDir, `icon-${size}.png`);
 
-  // Render SVG to PNG with resvg
-  const resvg = new Resvg(svg, {
-    fitTo: {
-      mode: "width",
-      value: size,
-    },
-  });
+    // Render SVG to PNG with resvg
+    const resvg = new Resvg(svg, {
+        fitTo: {
+            mode: "width",
+            value: size,
+        },
+    });
 
-  const pngData = resvg.render();
-  const pngBuffer = pngData.asPng();
+    const pngData = resvg.render();
+    const pngBuffer = pngData.asPng();
 
-  writeFileSync(outputPath, pngBuffer);
+    writeFileSync(outputPath, pngBuffer);
 
-  console.log(`✓ Generated ${size}x${size} icon: icon-${size}.png`);
+    console.log(`✓ Generated ${size}x${size} icon: icon-${size}.png`);
 }
 
 console.log("\n✅ All icons generated successfully!");
diff --git a/src/app.css b/src/app.css
index 6b98e67..a9c468e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,64 +4,64 @@
 @plugin "@tailwindcss/forms";
 
 @theme {
-  /* Primary */
-  --color-primary: #0969da;
-  --color-primary-hover: #0550ae;
-  --color-primary-dark: #033d8b;
+    /* Primary */
+    --color-primary: #0969da;
+    --color-primary-hover: #0550ae;
+    --color-primary-dark: #033d8b;
 
-  /* Accent */
-  --color-accent: #8250df;
-  --color-accent-hover: #6639ba;
+    /* Accent */
+    --color-accent: #8250df;
+    --color-accent-hover: #6639ba;
 
-  /* Semantic colors */
-  --color-success: #1a7f37;
-  --color-success-light: #dafbe1;
-  --color-success-dark: #044f1e;
+    /* Semantic colors */
+    --color-success: #1a7f37;
+    --color-success-light: #dafbe1;
+    --color-success-dark: #044f1e;
 
-  --color-error: #d1242f;
-  --color-error-light: #ffebe9;
-  --color-error-dark: #8e1519;
+    --color-error: #d1242f;
+    --color-error-light: #ffebe9;
+    --color-error-dark: #8e1519;
 
-  --color-warning: #bf8700;
-  --color-warning-light: #fff8c5;
-  --color-warning-dark: #7d4e00;
+    --color-warning: #bf8700;
+    --color-warning-light: #fff8c5;
+    --color-warning-dark: #7d4e00;
 
-  --color-info: #0969da;
-  --color-info-light: #ddf4ff;
-  --color-info-dark: #0550ae;
+    --color-info: #0969da;
+    --color-info-light: #ddf4ff;
+    --color-info-dark: #0550ae;
 
-  /* Neutrals */
-  --color-bg-primary: light-dark(#ffffff, #0d1117);
-  --color-bg-secondary: light-dark(#f6f8fa, #161b22);
-  --color-bg-tertiary: light-dark(#eaeef2, #21262d);
-  --color-text-primary: light-dark(#1f2328, #c9d1d9);
-  --color-text-secondary: light-dark(#656d76, #8b949e);
-  --color-text-tertiary: light-dark(#8c959f, #6e7681);
-  --color-border: light-dark(#d0d7de, #30363d);
-  --color-border-light: light-dark(#eaeef2, #21262d);
+    /* Neutrals */
+    --color-bg-primary: light-dark(#ffffff, #0d1117);
+    --color-bg-secondary: light-dark(#f6f8fa, #161b22);
+    --color-bg-tertiary: light-dark(#eaeef2, #21262d);
+    --color-text-primary: light-dark(#1f2328, #c9d1d9);
+    --color-text-secondary: light-dark(#656d76, #8b949e);
+    --color-text-tertiary: light-dark(#8c959f, #6e7681);
+    --color-border: light-dark(#d0d7de, #30363d);
+    --color-border-light: light-dark(#eaeef2, #21262d);
 }
 
 @layer base {
-  body {
-    @apply bg-bg-secondary text-text-primary;
-  }
+    body {
+        @apply bg-bg-secondary text-text-primary;
+    }
 
-  /* Ensure color scheme is set for light-dark() to work */
-  :root {
-    color-scheme: light dark;
-  }
+    /* Ensure color scheme is set for light-dark() to work */
+    :root {
+        color-scheme: light dark;
+    }
 }
 
 @layer components {
-  .filter-badge {
-    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
-  }
+    .filter-badge {
+        @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+    }
 
-  .filter-badge-enabled {
-    @apply bg-success-light text-success-dark;
-  }
+    .filter-badge-enabled {
+        @apply bg-success-light text-success-dark;
+    }
 
-  .filter-badge-disabled {
-    @apply bg-bg-tertiary text-text-secondary;
-  }
+    .filter-badge-disabled {
+        @apply bg-bg-tertiary text-text-secondary;
+    }
 }
diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
index 4b80512..11447e3 100644
--- a/src/entrypoints/background.ts
+++ b/src/entrypoints/background.ts
@@ -1,107 +1,107 @@
 import { getFilters, saveFilters } from "@/lib/storage";
 import type { PRFilter } from "@/lib/types/filter";
 import type {
-  ExtensionMessage,
-  MessageResponse,
-  ApplyFiltersNowMessage,
+    ExtensionMessage,
+    MessageResponse,
+    ApplyFiltersNowMessage,
 } from "@/lib/types/messages";
 import { MESSAGE_ACTIONS, GITHUB_PATTERNS, CONTEXT_MENU_IDS } from "@/lib/constants";
 import { logger } from "@/lib/utils/logger";
 
 const DEFAULT_FILTERS = [
-  {
-    id: crypto.randomUUID(),
-    name: "Hide Dependabot PRs",
-    value: "-author:app/dependabot",
-    enabled: true,
-  },
-  {
-    id: crypto.randomUUID(),
-    name: "Only Open PRs",
-    value: "is:open",
-    enabled: true,
-  },
-  {
-    id: crypto.randomUUID(),
-    name: "Is a PR",
-    value: "is:pr",
-    enabled: true,
-  },
+    {
+        id: crypto.randomUUID(),
+        name: "Hide Dependabot PRs",
+        value: "-author:app/dependabot",
+        enabled: true,
+    },
+    {
+        id: crypto.randomUUID(),
+        name: "Only Open PRs",
+        value: "is:open",
+        enabled: true,
+    },
+    {
+        id: crypto.randomUUID(),
+        name: "Is a PR",
+        value: "is:pr",
+        enabled: true,
+    },
 ] satisfies PRFilter[];
 
 export default defineBackground(() => {
-  logger.info("GitHub PR Filters background script initialized");
+    logger.info("GitHub PR Filters background script initialized");
 
-  // Set up default filters if none exist
-  browser.runtime.onInstalled.addListener(async (details) => {
-    if (details.reason === "install") {
-      // Check if we already have filters
-      const existingFilters = await getFilters();
+    // Set up default filters if none exist
+    browser.runtime.onInstalled.addListener(async (details) => {
+        if (details.reason === "install") {
+            // Check if we already have filters
+            const existingFilters = await getFilters();
 
-      if (existingFilters.length === 0) {
-        await saveFilters(DEFAULT_FILTERS);
-        logger.info("Default filters installed");
-      }
+            if (existingFilters.length === 0) {
+                await saveFilters(DEFAULT_FILTERS);
+                logger.info("Default filters installed");
+            }
 
-      browser.tabs.create({
-        url: browser.runtime.getURL("/options.html"),
-      });
-    }
-  });
+            browser.tabs.create({
+                url: browser.runtime.getURL("/options.html"),
+            });
+        }
+    });
 
-  // Listen for commands from browser action
-  browser.runtime.onMessage.addListener(
-    async (message: ExtensionMessage, _sender): Promise<MessageResponse | undefined> => {
-      if (message.action === MESSAGE_ACTIONS.APPLY_FILTERS) {
-        const tabs = await browser.tabs.query({
-          active: true,
-          currentWindow: true,
-        });
-        const currentTab = tabs[0];
+    // Listen for commands from browser action
+    browser.runtime.onMessage.addListener(
+        async (message: ExtensionMessage, _sender): Promise<MessageResponse | undefined> => {
+            if (message.action === MESSAGE_ACTIONS.APPLY_FILTERS) {
+                const tabs = await browser.tabs.query({
+                    active: true,
+                    currentWindow: true,
+                });
+                const currentTab = tabs[0];
 
-        if (currentTab?.id) {
-          // Check if the tab URL is a GitHub PR page
-          if (
-            currentTab.url?.includes(GITHUB_PATTERNS.PR_PAGE_PARTIAL) &&
-            currentTab.url?.includes(GITHUB_PATTERNS.PR_PATH_PARTIAL)
-          ) {
-            // Send message to content script to apply filters
-            try {
-              await browser.tabs.sendMessage(currentTab.id, {
-                action: MESSAGE_ACTIONS.APPLY_FILTERS_NOW,
-              } satisfies ApplyFiltersNowMessage);
-              return { success: true };
-            } catch (err) {
-              logger.error("Failed to send message to tab", err);
-              return {
-                success: false,
-                message: "Failed to communicate with page",
-              };
-            }
-          }
-        }
+                if (currentTab?.id) {
+                    // Check if the tab URL is a GitHub PR page
+                    if (
+                        currentTab.url?.includes(GITHUB_PATTERNS.PR_PAGE_PARTIAL) &&
+                        currentTab.url?.includes(GITHUB_PATTERNS.PR_PATH_PARTIAL)
+                    ) {
+                        // Send message to content script to apply filters
+                        try {
+                            await browser.tabs.sendMessage(currentTab.id, {
+                                action: MESSAGE_ACTIONS.APPLY_FILTERS_NOW,
+                            } satisfies ApplyFiltersNowMessage);
+                            return { success: true };
+                        } catch (err) {
+                            logger.error("Failed to send message to tab", err);
+                            return {
+                                success: false,
+                                message: "Failed to communicate with page",
+                            };
+                        }
+                    }
+                }
 
-        return { success: false, message: "Not a GitHub PR page" };
-      }
+                return { success: false, message: "Not a GitHub PR page" };
+            }
 
-      return undefined;
-    }
-  );
+            return undefined;
+        }
+    );
 
-  // Add context menu for quickly applying filters
-  browser.contextMenus?.create({
-    id: CONTEXT_MENU_IDS.APPLY_PR_FILTERS,
-    title: "Apply PR Filters",
-    contexts: ["page"],
-    documentUrlPatterns: [GITHUB_PATTERNS.PR_PAGE_QUERY],
-  });
+    // Add context menu for quickly applying filters
+    browser.contextMenus?.create({
+        id: CONTEXT_MENU_IDS.APPLY_PR_FILTERS,
+        title: "Apply PR Filters",
+        contexts: ["page"],
+        documentUrlPatterns: [GITHUB_PATTERNS.PR_PAGE_QUERY],
+    });
 
-  // Handle context menu clicks
-  browser.contextMenus?.onClicked.addListener((info, tab) => {
-    if (info.menuItemId === CONTEXT_MENU_IDS.APPLY_PR_FILTERS && tab?.id) {
-      browser.tabs.sendMessage(tab.id, {
-        action: MESSAGE_ACTIONS.APPLY_FILTERS_NOW,
-      } satisfies ApplyFiltersNowMessage);
-    }
-  });
+    // Handle context menu clicks
+    browser.contextMenus?.onClicked.addListener((info, tab) => {
+        if (info.menuItemId === CONTEXT_MENU_IDS.APPLY_PR_FILTERS && tab?.id) {
+            browser.tabs.sendMessage(tab.id, {
+                action: MESSAGE_ACTIONS.APPLY_FILTERS_NOW,
+            } satisfies ApplyFiltersNowMessage);
+        }
+    });
 });
diff --git a/src/entrypoints/content.ts b/src/entrypoints/content.ts
index 2ab6dc2..83cc4b6 100644
--- a/src/entrypoints/content.ts
+++ b/src/entrypoints/content.ts
@@ -4,18 +4,18 @@ import GithubPrFilter from "@/entrypoints/content/GithubPRFilter.svelte";
 import { logger } from "@/lib/utils/logger";
 
 export default defineContentScript({
-  matches: ["https://github.com/*/*/pulls*"],
-  main() {
-    logger.info("GitHub PR Filters Content Script activated");
+    matches: ["https://github.com/*/*/pulls*"],
+    main() {
+        logger.info("GitHub PR Filters Content Script activated");
 
-    // Create a container for our component
-    const container = document.createElement("div");
-    container.id = "github-pr-filters-container";
-    document.body.appendChild(container);
+        // Create a container for our component
+        const container = document.createElement("div");
+        container.id = "github-pr-filters-container";
+        document.body.appendChild(container);
 
-    // Mount the Svelte component
-    mount(GithubPrFilter, {
-      target: container,
-    });
-  },
+        // Mount the Svelte component
+        mount(GithubPrFilter, {
+            target: container,
+        });
+    },
 });
diff --git a/src/entrypoints/content/GithubPRFilter.svelte b/src/entrypoints/content/GithubPRFilter.svelte
index 2000fbf..af440fa 100644
--- a/src/entrypoints/content/GithubPRFilter.svelte
+++ b/src/entrypoints/content/GithubPRFilter.svelte
@@ -1,121 +1,126 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
-  import { isGitHubPRPage, applyFilters, addFilter, removeFilter, SELECTORS } from "@/lib/github";
-  import { filterStore } from "@/lib/stores/filters";
-  import { waitForElement, debounce } from "@/lib/utils/dom";
-  import { logger } from "@/lib/utils/logger";
-  import type { PRFilter } from "@/lib/types/filter";
-  import type { ExtensionMessage } from "@/lib/types/messages";
-  import { MESSAGE_ACTIONS, WAIT_TIMEOUTS, DEBOUNCE_DELAYS, TOAST_DURATION } from "@/lib/constants";
-  import Toast from "@/lib/components/Toast.svelte";
-  import { TOAST_TYPES, ToastType } from "@/lib/types/toast";
-
-  // Component state
-  let _filtersApplied = $state(false);
-  let toastMessage = $state("");
-  let toastType = $state<ToastType>(TOAST_TYPES.SUCCESS);
-  let enabledFilters = $state<string[]>([]);
-
-  async function tryApplyFilters() {
-    if (!isGitHubPRPage(window.location.href)) {
-      return;
-    }
-
-    try {
-      await waitForElement(SELECTORS.GITHUB_SEARCH, WAIT_TIMEOUTS.INITIAL_LOAD);
-
-      if (enabledFilters.length > 0) {
-        const success = applyFilters(enabledFilters);
-        _filtersApplied = success;
+    import { onMount, onDestroy } from "svelte";
+    import { isGitHubPRPage, applyFilters, addFilter, removeFilter, SELECTORS } from "@/lib/github";
+    import { filterStore } from "@/lib/stores/filters";
+    import { waitForElement, debounce } from "@/lib/utils/dom";
+    import { logger } from "@/lib/utils/logger";
+    import type { PRFilter } from "@/lib/types/filter";
+    import type { ExtensionMessage } from "@/lib/types/messages";
+    import {
+        MESSAGE_ACTIONS,
+        WAIT_TIMEOUTS,
+        DEBOUNCE_DELAYS,
+        TOAST_DURATION,
+    } from "@/lib/constants";
+    import Toast from "@/lib/components/Toast.svelte";
+    import { TOAST_TYPES, ToastType } from "@/lib/types/toast";
+
+    // Component state
+    let _filtersApplied = $state(false);
+    let toastMessage = $state("");
+    let toastType = $state<ToastType>(TOAST_TYPES.SUCCESS);
+    let enabledFilters = $state<string[]>([]);
+
+    async function tryApplyFilters() {
+        if (!isGitHubPRPage(window.location.href)) {
+            return;
+        }
 
-        if (success) {
-          toastMessage = `Applied ${enabledFilters.length} filter(s)`;
-          toastType = TOAST_TYPES.SUCCESS;
-        } else {
-          toastMessage = "Filters already applied";
-          toastType = TOAST_TYPES.INFO;
+        try {
+            await waitForElement(SELECTORS.GITHUB_SEARCH, WAIT_TIMEOUTS.INITIAL_LOAD);
+
+            if (enabledFilters.length > 0) {
+                const success = applyFilters(enabledFilters);
+                _filtersApplied = success;
+
+                if (success) {
+                    toastMessage = `Applied ${enabledFilters.length} filter(s)`;
+                    toastType = TOAST_TYPES.SUCCESS;
+                } else {
+                    toastMessage = "Filters already applied";
+                    toastType = TOAST_TYPES.INFO;
+                }
+            }
+        } catch (err) {
+            logger.error("Failed to apply filters:", err);
+            toastMessage = "Failed to apply filters";
+            toastType = TOAST_TYPES.ERROR;
         }
-      }
-    } catch (err) {
-      logger.error("Failed to apply filters:", err);
-      toastMessage = "Failed to apply filters";
-      toastType = TOAST_TYPES.ERROR;
     }
-  }
 
-  const debouncedURLChange = debounce(() => {
-    if (isGitHubPRPage(window.location.href)) {
-      _filtersApplied = false;
-      tryApplyFilters();
-    }
-  }, DEBOUNCE_DELAYS.URL_CHANGE);
+    const debouncedURLChange = debounce(() => {
+        if (isGitHubPRPage(window.location.href)) {
+            _filtersApplied = false;
+            tryApplyFilters();
+        }
+    }, DEBOUNCE_DELAYS.URL_CHANGE);
 
-  async function handleFilterToggle(filter: PRFilter) {
-    if (!isGitHubPRPage(window.location.href)) return;
+    async function handleFilterToggle(filter: PRFilter) {
+        if (!isGitHubPRPage(window.location.href)) return;
 
-    try {
-      await waitForElement(SELECTORS.GITHUB_SEARCH, WAIT_TIMEOUTS.FILTER_TOGGLE);
+        try {
+            await waitForElement(SELECTORS.GITHUB_SEARCH, WAIT_TIMEOUTS.FILTER_TOGGLE);
 
-      const success = filter.enabled ? addFilter(filter.value) : removeFilter(filter.value);
+            const success = filter.enabled ? addFilter(filter.value) : removeFilter(filter.value);
 
-      if (success) {
-        toastMessage = `Filter ${filter.enabled ? "enabled" : "disabled"}: ${filter.name}`;
-        toastType = TOAST_TYPES.SUCCESS;
-      }
-    } catch (error) {
-      logger.error("Error toggling filter:", error);
-      toastMessage = "Failed to toggle filter";
-      toastType = TOAST_TYPES.ERROR;
+            if (success) {
+                toastMessage = `Filter ${filter.enabled ? "enabled" : "disabled"}: ${filter.name}`;
+                toastType = TOAST_TYPES.SUCCESS;
+            }
+        } catch (error) {
+            logger.error("Error toggling filter:", error);
+            toastMessage = "Failed to toggle filter";
+            toastType = TOAST_TYPES.ERROR;
+        }
     }
-  }
 
-  const cleanupFunctions: (() => void)[] = [];
+    const cleanupFunctions: (() => void)[] = [];
+
+    onMount(async () => {
+        const unsubscribe = filterStore.subscribe((state) => {
+            enabledFilters = state.filters.filter((f) => f.enabled).map((f) => f.value);
+        });
+        cleanupFunctions.push(unsubscribe);
+
+        await filterStore.init();
+        cleanupFunctions.push(() => filterStore.destroy());
+
+        await tryApplyFilters();
+
+        const observer = new MutationObserver(debouncedURLChange);
+        observer.observe(document.body, { childList: true, subtree: false });
+        cleanupFunctions.push(() => observer.disconnect());
+
+        window.addEventListener("popstate", debouncedURLChange);
+        cleanupFunctions.push(() => window.removeEventListener("popstate", debouncedURLChange));
+
+        const messageHandler = (message: ExtensionMessage) => {
+            switch (message.action) {
+                case MESSAGE_ACTIONS.APPLY_FILTERS_NOW:
+                    tryApplyFilters();
+                    break;
+                case MESSAGE_ACTIONS.TOGGLE_FILTER:
+                    handleFilterToggle(message.filter);
+                    break;
+                default:
+                    logger.debug("Ignoring unknown message action:", message.action);
+            }
+        };
+
+        browser.runtime.onMessage.addListener(messageHandler);
+        cleanupFunctions.push(() => browser.runtime.onMessage.removeListener(messageHandler));
+    });
 
-  onMount(async () => {
-    const unsubscribe = filterStore.subscribe((state) => {
-      enabledFilters = state.filters.filter((f) => f.enabled).map((f) => f.value);
+    onDestroy(() => {
+        cleanupFunctions.forEach((cleanup) => cleanup());
     });
-    cleanupFunctions.push(unsubscribe);
-
-    await filterStore.init();
-    cleanupFunctions.push(() => filterStore.destroy());
-
-    await tryApplyFilters();
-
-    const observer = new MutationObserver(debouncedURLChange);
-    observer.observe(document.body, { childList: true, subtree: false });
-    cleanupFunctions.push(() => observer.disconnect());
-
-    window.addEventListener("popstate", debouncedURLChange);
-    cleanupFunctions.push(() => window.removeEventListener("popstate", debouncedURLChange));
-
-    const messageHandler = (message: ExtensionMessage) => {
-      switch (message.action) {
-        case MESSAGE_ACTIONS.APPLY_FILTERS_NOW:
-          tryApplyFilters();
-          break;
-        case MESSAGE_ACTIONS.TOGGLE_FILTER:
-          handleFilterToggle(message.filter);
-          break;
-        default:
-          logger.debug("Ignoring unknown message action:", message.action);
-      }
-    };
-
-    browser.runtime.onMessage.addListener(messageHandler);
-    cleanupFunctions.push(() => browser.runtime.onMessage.removeListener(messageHandler));
-  });
-
-  onDestroy(() => {
-    cleanupFunctions.forEach((cleanup) => cleanup());
-  });
 </script>
 
 {#if toastMessage}
-  <Toast
-    message={toastMessage}
-    type={toastType}
-    duration={TOAST_DURATION.DEFAULT}
-    onClose={() => (toastMessage = "")}
-  />
+    <Toast
+        message={toastMessage}
+        type={toastType}
+        duration={TOAST_DURATION.DEFAULT}
+        onClose={() => (toastMessage = "")}
+    />
 {/if}
diff --git a/src/entrypoints/options/Options.svelte b/src/entrypoints/options/Options.svelte
index 5ff50ed..eb91300 100644
--- a/src/entrypoints/options/Options.svelte
+++ b/src/entrypoints/options/Options.svelte
@@ -1,222 +1,233 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
-  import FilterEditor from "@/lib/components/FilterEditor.svelte";
-  import ErrorDisplay from "@/lib/components/ErrorDisplay.svelte";
-  import Icon from "@/lib/components/Icon.svelte";
-  import type { PRFilter } from "@/lib/types/filter";
-  import { filterStore } from "@/lib/stores/filters";
-  import { broadcastFilterToggle } from "@/lib/utils/messaging";
-  import { cn } from "@/lib/utils/cn";
-  import { logger } from "@/lib/utils/logger";
-
-  // Component state
-  let editingFilter = $state<PRFilter | null>(null);
-  let showAddForm = $state(false);
-  let filters = $state<PRFilter[]>([]);
-  let isLoading = $state(false);
-  let error = $state("");
-  let unsubscribe: (() => void) | null = null;
-
-  // Load filters on mount
-  onMount(async () => {
-    unsubscribe = filterStore.subscribe((state) => {
-      filters = state.filters;
-      isLoading = state.isLoading;
-      error = state.error || "";
+    import { onMount, onDestroy } from "svelte";
+    import FilterEditor from "@/lib/components/FilterEditor.svelte";
+    import ErrorDisplay from "@/lib/components/ErrorDisplay.svelte";
+    import Icon from "@/lib/components/Icon.svelte";
+    import type { PRFilter } from "@/lib/types/filter";
+    import { filterStore } from "@/lib/stores/filters";
+    import { broadcastFilterToggle } from "@/lib/utils/messaging";
+    import { cn } from "@/lib/utils/cn";
+    import { logger } from "@/lib/utils/logger";
+
+    // Component state
+    let editingFilter = $state<PRFilter | null>(null);
+    let showAddForm = $state(false);
+    let filters = $state<PRFilter[]>([]);
+    let isLoading = $state(false);
+    let error = $state("");
+    let unsubscribe: (() => void) | null = null;
+
+    // Load filters on mount
+    onMount(async () => {
+        unsubscribe = filterStore.subscribe((state) => {
+            filters = state.filters;
+            isLoading = state.isLoading;
+            error = state.error || "";
+        });
+
+        await filterStore.init();
     });
 
-    await filterStore.init();
-  });
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+        filterStore.destroy();
+    });
 
-  onDestroy(() => {
-    if (unsubscribe) {
-      unsubscribe();
+    async function handleToggleFilter(id: string) {
+        // Find the filter BEFORE toggling to get current state
+        const filter = filters.find((f) => f.id === id);
+        if (!filter) {
+            logger.error("Filter not found:", id);
+            return;
+        }
+
+        const success = await filterStore.toggle(id);
+        if (!success) {
+            logger.error("Failed to toggle filter:", id);
+            return;
+        }
+
+        // Create updated filter with toggled state
+        const toggledFilter = {
+            ...filter,
+            enabled: !filter.enabled,
+        } satisfies PRFilter;
+
+        // Broadcast to all GitHub PR tabs with NEW state
+        broadcastFilterToggle(toggledFilter);
     }
-    filterStore.destroy();
-  });
-
-  async function handleToggleFilter(id: string) {
-    // Find the filter BEFORE toggling to get current state
-    const filter = filters.find((f) => f.id === id);
-    if (!filter) {
-      logger.error("Filter not found:", id);
-      return;
+
+    async function handleDeleteFilter(id: string) {
+        if (!confirm("Are you sure you want to delete this filter?")) return;
+
+        const success = await filterStore.delete(id);
+        if (!success) {
+            logger.error("Failed to delete filter:", id);
+        }
     }
 
-    const success = await filterStore.toggle(id);
-    if (!success) {
-      logger.error("Failed to toggle filter:", id);
-      return;
+    function handleEditFilter(filter: PRFilter) {
+        editingFilter = filter;
+        showAddForm = false;
     }
 
-    // Create updated filter with toggled state
-    const toggledFilter = {
-      ...filter,
-      enabled: !filter.enabled,
-    } satisfies PRFilter;
+    function handleAddNew() {
+        logger.debug("handleAddNew");
+        editingFilter = null;
+        showAddForm = true;
+    }
 
-    // Broadcast to all GitHub PR tabs with NEW state
-    broadcastFilterToggle(toggledFilter);
-  }
+    function handleSaveFilter() {
+        // Reset editing state (store updates automatically)
+        editingFilter = null;
+        showAddForm = false;
+    }
 
-  async function handleDeleteFilter(id: string) {
-    if (!confirm("Are you sure you want to delete this filter?")) return;
+    function handleCancelEdit() {
+        editingFilter = null;
+        showAddForm = false;
+    }
 
-    const success = await filterStore.delete(id);
-    if (!success) {
-      logger.error("Failed to delete filter:", id);
+    function handleRetry() {
+        filterStore.clearError();
+        filterStore.init();
     }
-  }
-
-  function handleEditFilter(filter: PRFilter) {
-    editingFilter = filter;
-    showAddForm = false;
-  }
-
-  function handleAddNew() {
-    logger.debug("handleAddNew");
-    editingFilter = null;
-    showAddForm = true;
-  }
-
-  function handleSaveFilter() {
-    // Reset editing state (store updates automatically)
-    editingFilter = null;
-    showAddForm = false;
-  }
-
-  function handleCancelEdit() {
-    editingFilter = null;
-    showAddForm = false;
-  }
-
-  function handleRetry() {
-    filterStore.clearError();
-    filterStore.init();
-  }
 </script>
 
 <main class="mx-auto max-w-2xl p-4">
-  <div class="mb-6 flex items-center justify-between">
-    <h1 class="text-2xl font-bold">GitHub PR Filters</h1>
-    <img src="/icons/icon-48.png" alt="Logo" class="size-10" />
-  </div>
-
-  <ErrorDisplay message={error} onRetry={handleRetry} />
-
-  <div class="bg-bg-primary mb-6 rounded-lg p-6 shadow">
-    <p class="text-text-primary">
-      Configure filters to be automatically applied when you visit GitHub Pull Request pages.
-    </p>
-    <p class="text-text-secondary mt-2">
-      These filters use GitHub's search syntax. For example, add
-      <code class="bg-bg-tertiary text-text-primary rounded px-1 py-0.5"
-        >-author:app/dependabot</code
-      >
-      to hide Dependabot PRs.
-    </p>
-  </div>
-
-  {#if isLoading}
-    <div class="my-8 flex justify-center">
-      <div
-        class="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"
-      ></div>
+    <div class="mb-6 flex items-center justify-between">
+        <h1 class="text-2xl font-bold">GitHub PR Filters</h1>
+        <img src="/icons/icon-48.png" alt="Logo" class="size-10" />
     </div>
-  {:else}
-    {#if !editingFilter && !showAddForm}
-      <div class="mb-6">
-        <button
-          class="bg-primary hover:bg-primary-hover focus:ring-primary flex items-center gap-2 rounded px-4 py-2 text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
-          onclick={handleAddNew}
-        >
-          <Icon name="plus" class="size-5" />
-          Add New Filter
-        </button>
-      </div>
-    {/if}
 
-    {#if editingFilter}
-      <div class="mb-6">
-        <FilterEditor
-          filter={editingFilter}
-          onSave={handleSaveFilter}
-          onCancel={handleCancelEdit}
-        />
-      </div>
-    {/if}
-
-    {#if showAddForm}
-      <div class="mb-6">
-        <FilterEditor onSave={handleSaveFilter} onCancel={handleCancelEdit} />
-      </div>
-    {/if}
+    <ErrorDisplay message={error} onRetry={handleRetry} />
+
+    <div class="bg-bg-primary mb-6 rounded-lg p-6 shadow">
+        <p class="text-text-primary">
+            Configure filters to be automatically applied when you visit GitHub Pull Request pages.
+        </p>
+        <p class="text-text-secondary mt-2">
+            These filters use GitHub's search syntax. For example, add
+            <code class="bg-bg-tertiary text-text-primary rounded px-1 py-0.5"
+                >-author:app/dependabot</code
+            >
+            to hide Dependabot PRs.
+        </p>
+    </div>
 
-    {#if filters.length === 0 && !showAddForm}
-      <div class="bg-bg-tertiary rounded-lg p-8 text-center">
-        <p class="text-text-secondary">You haven't added any filters yet.</p>
-      </div>
+    {#if isLoading}
+        <div class="my-8 flex justify-center">
+            <div
+                class="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"
+            ></div>
+        </div>
     {:else}
-      <h2 class="mb-4 text-xl font-semibold">Your Filters</h2>
-      <div class="space-y-4">
-        {#each filters as filter (filter.id)}
-          <div class="bg-bg-primary flex items-center justify-between rounded-lg p-4 shadow">
-            <div class="flex-1">
-              <div class="flex items-center">
-                <span class="font-medium">{filter.name}</span>
-                <span
-                  class={cn(
-                    "ml-2 rounded px-2 py-0.5 text-xs font-medium",
-                    filter.enabled ? "filter-badge-enabled" : "filter-badge-disabled"
-                  )}
+        {#if !editingFilter && !showAddForm}
+            <div class="mb-6">
+                <button
+                    class="bg-primary hover:bg-primary-hover focus:ring-primary flex items-center gap-2 rounded px-4 py-2 text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+                    onclick={handleAddNew}
                 >
-                  {filter.enabled ? "Enabled" : "Disabled"}
-                </span>
-              </div>
-              <div class="text-text-secondary mt-1 text-sm">
-                <code class="bg-bg-tertiary rounded px-1 py-0.5">{filter.value}</code>
-              </div>
+                    <Icon name="plus" class="size-5" />
+                    Add New Filter
+                </button>
+            </div>
+        {/if}
+
+        {#if editingFilter}
+            <div class="mb-6">
+                <FilterEditor
+                    filter={editingFilter}
+                    onSave={handleSaveFilter}
+                    onCancel={handleCancelEdit}
+                />
             </div>
+        {/if}
 
-            <div class="flex gap-1">
-              <button
-                class={cn(
-                  "rounded p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
-                  filter.enabled
-                    ? "text-success hover:bg-success-light focus:ring-success"
-                    : "text-text-tertiary hover:bg-bg-tertiary focus:ring-text-secondary"
-                )}
-                title={filter.enabled ? "Disable filter" : "Enable filter"}
-                onclick={() => handleToggleFilter(filter.id)}
-                aria-label={filter.enabled ? `Disable ${filter.name}` : `Enable ${filter.name}`}
-              >
-                <Icon name={filter.enabled ? "toggle-on" : "toggle-off"} class="size-5" />
-              </button>
-              <button
-                class="text-text-secondary hover:bg-bg-tertiary hover:text-text-primary focus:ring-text-secondary rounded p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
-                title="Edit filter"
-                onclick={() => handleEditFilter(filter)}
-                aria-label={`Edit ${filter.name}`}
-              >
-                <Icon name="edit" class="size-5" />
-              </button>
-              <button
-                class="text-error hover:bg-error-light focus:ring-error rounded p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
-                title="Delete filter"
-                onclick={() => handleDeleteFilter(filter.id)}
-                aria-label={`Delete ${filter.name}`}
-              >
-                <Icon name="delete" class="size-5" />
-              </button>
+        {#if showAddForm}
+            <div class="mb-6">
+                <FilterEditor onSave={handleSaveFilter} onCancel={handleCancelEdit} />
+            </div>
+        {/if}
+
+        {#if filters.length === 0 && !showAddForm}
+            <div class="bg-bg-tertiary rounded-lg p-8 text-center">
+                <p class="text-text-secondary">You haven't added any filters yet.</p>
+            </div>
+        {:else}
+            <h2 class="mb-4 text-xl font-semibold">Your Filters</h2>
+            <div class="space-y-4">
+                {#each filters as filter (filter.id)}
+                    <div
+                        class="bg-bg-primary flex items-center justify-between rounded-lg p-4 shadow"
+                    >
+                        <div class="flex-1">
+                            <div class="flex items-center">
+                                <span class="font-medium">{filter.name}</span>
+                                <span
+                                    class={cn(
+                                        "ml-2 rounded px-2 py-0.5 text-xs font-medium",
+                                        filter.enabled
+                                            ? "filter-badge-enabled"
+                                            : "filter-badge-disabled"
+                                    )}
+                                >
+                                    {filter.enabled ? "Enabled" : "Disabled"}
+                                </span>
+                            </div>
+                            <div class="text-text-secondary mt-1 text-sm">
+                                <code class="bg-bg-tertiary rounded px-1 py-0.5"
+                                    >{filter.value}</code
+                                >
+                            </div>
+                        </div>
+
+                        <div class="flex gap-1">
+                            <button
+                                class={cn(
+                                    "rounded p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+                                    filter.enabled
+                                        ? "text-success hover:bg-success-light focus:ring-success"
+                                        : "text-text-tertiary hover:bg-bg-tertiary focus:ring-text-secondary"
+                                )}
+                                title={filter.enabled ? "Disable filter" : "Enable filter"}
+                                onclick={() => handleToggleFilter(filter.id)}
+                                aria-label={filter.enabled
+                                    ? `Disable ${filter.name}`
+                                    : `Enable ${filter.name}`}
+                            >
+                                <Icon
+                                    name={filter.enabled ? "toggle-on" : "toggle-off"}
+                                    class="size-5"
+                                />
+                            </button>
+                            <button
+                                class="text-text-secondary hover:bg-bg-tertiary hover:text-text-primary focus:ring-text-secondary rounded p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+                                title="Edit filter"
+                                onclick={() => handleEditFilter(filter)}
+                                aria-label={`Edit ${filter.name}`}
+                            >
+                                <Icon name="edit" class="size-5" />
+                            </button>
+                            <button
+                                class="text-error hover:bg-error-light focus:ring-error rounded p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+                                title="Delete filter"
+                                onclick={() => handleDeleteFilter(filter.id)}
+                                aria-label={`Delete ${filter.name}`}
+                            >
+                                <Icon name="delete" class="size-5" />
+                            </button>
+                        </div>
+                    </div>
+                {/each}
             </div>
-          </div>
-        {/each}
-      </div>
+        {/if}
     {/if}
-  {/if}
 
-  <footer class="text-text-tertiary mt-8 text-center text-sm">
-    <p>Pullscope Extension</p>
-    <p class="mt-1">by guidodinello</p>
-  </footer>
+    <footer class="text-text-tertiary mt-8 text-center text-sm">
+        <p>Pullscope Extension</p>
+        <p class="mt-1">by guidodinello</p>
+    </footer>
 </main>
diff --git a/src/entrypoints/options/index.html b/src/entrypoints/options/index.html
index f0fb217..e2530b8 100644
--- a/src/entrypoints/options/index.html
+++ b/src/entrypoints/options/index.html
@@ -1,12 +1,12 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pullscope Options</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="./options.ts"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Pullscope Options</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="./options.ts"></script>
+    </body>
 </html>
diff --git a/src/entrypoints/options/options.ts b/src/entrypoints/options/options.ts
index 2e048d7..99cf20b 100644
--- a/src/entrypoints/options/options.ts
+++ b/src/entrypoints/options/options.ts
@@ -5,9 +5,9 @@ import { mount } from "svelte";
 const appElement = document.getElementById("app");
 
 if (!appElement) {
-  throw new Error("Failed to find app element. Cannot mount options page.");
+    throw new Error("Failed to find app element. Cannot mount options page.");
 }
 
 mount(Options, {
-  target: appElement,
+    target: appElement,
 });
diff --git a/src/entrypoints/popup/Popup.svelte b/src/entrypoints/popup/Popup.svelte
index aec4e61..29b2d92 100644
--- a/src/entrypoints/popup/Popup.svelte
+++ b/src/entrypoints/popup/Popup.svelte
@@ -1,119 +1,121 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
-  import type { PRFilter } from "@/lib/types/filter";
-  import { filterStore } from "@/lib/stores/filters";
-  import { broadcastFilterToggle } from "@/lib/utils/messaging";
-  import { cn } from "@/lib/utils/cn";
-  import { logger } from "@/lib/utils/logger";
+    import { onMount, onDestroy } from "svelte";
+    import type { PRFilter } from "@/lib/types/filter";
+    import { filterStore } from "@/lib/stores/filters";
+    import { broadcastFilterToggle } from "@/lib/utils/messaging";
+    import { cn } from "@/lib/utils/cn";
+    import { logger } from "@/lib/utils/logger";
 
-  // Component state
-  let filters = $state<PRFilter[]>([]);
-  let isLoading = $state(false);
-  let unsubscribe: (() => void) | null = null;
+    // Component state
+    let filters = $state<PRFilter[]>([]);
+    let isLoading = $state(false);
+    let unsubscribe: (() => void) | null = null;
 
-  onMount(async () => {
-    unsubscribe = filterStore.subscribe((state) => {
-      filters = state.filters;
-      isLoading = state.isLoading;
-    });
+    onMount(async () => {
+        unsubscribe = filterStore.subscribe((state) => {
+            filters = state.filters;
+            isLoading = state.isLoading;
+        });
 
-    await filterStore.init();
-  });
+        await filterStore.init();
+    });
 
-  onDestroy(() => {
-    if (unsubscribe) {
-      unsubscribe();
-    }
-    filterStore.destroy();
-  });
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+        filterStore.destroy();
+    });
 
-  async function handleToggleFilter(id: string) {
-    logger.debug("handleToggleFilter", id);
+    async function handleToggleFilter(id: string) {
+        logger.debug("handleToggleFilter", id);
 
-    // Find the filter BEFORE toggling to get current state
-    const filter = filters.find((f) => f.id === id);
-    if (!filter) {
-      logger.error("Filter not found:", id);
-      return;
-    }
+        // Find the filter BEFORE toggling to get current state
+        const filter = filters.find((f) => f.id === id);
+        if (!filter) {
+            logger.error("Filter not found:", id);
+            return;
+        }
 
-    const success = await filterStore.toggle(id);
-    if (!success) {
-      logger.error("Failed to toggle filter:", id);
-      return;
-    }
+        const success = await filterStore.toggle(id);
+        if (!success) {
+            logger.error("Failed to toggle filter:", id);
+            return;
+        }
 
-    // Create updated filter with toggled state
-    const toggledFilter = {
-      ...filter,
-      enabled: !filter.enabled,
-    } satisfies PRFilter;
+        // Create updated filter with toggled state
+        const toggledFilter = {
+            ...filter,
+            enabled: !filter.enabled,
+        } satisfies PRFilter;
 
-    // Broadcast to all GitHub PR tabs with NEW state
-    broadcastFilterToggle(toggledFilter);
-  }
+        // Broadcast to all GitHub PR tabs with NEW state
+        broadcastFilterToggle(toggledFilter);
+    }
 
-  function openOptions() {
-    browser.runtime.openOptionsPage();
-  }
+    function openOptions() {
+        browser.runtime.openOptionsPage();
+    }
 </script>
 
 <main class="bg-bg-primary w-72 p-4">
-  <div class="mb-4 flex items-center justify-between">
-    <h1 class="text-text-primary text-lg font-bold">GitHub PR Filters</h1>
-    <img src="/icons/icon-32.png" alt="Logo" class="size-6" />
-  </div>
-
-  {#if isLoading}
-    <div class="my-4 flex justify-center">
-      <div
-        class="border-primary h-5 w-5 animate-spin rounded-full border-2 border-t-transparent"
-      ></div>
-    </div>
-  {:else if filters.length === 0}
-    <div class="py-4 text-center">
-      <p class="text-text-secondary mb-2">No filters configured yet</p>
+    <div class="mb-4 flex items-center justify-between">
+        <h1 class="text-text-primary text-lg font-bold">GitHub PR Filters</h1>
+        <img src="/icons/icon-32.png" alt="Logo" class="size-6" />
     </div>
-  {:else}
-    <div class="mb-4 max-h-64 overflow-y-auto">
-      {#each filters as filter (filter.id)}
-        <div class="border-border-light flex items-center justify-between border-b py-2">
-          <div>
-            <span class="text-text-primary text-sm font-medium">{filter.name}</span>
-            <div class="text-text-secondary text-xs">
-              <code class="bg-bg-tertiary rounded px-1">{filter.value}</code>
-            </div>
-          </div>
 
-          <button
-            class={cn(
-              "focus:ring-primary relative me-2 h-5 w-10 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
-              filter.enabled ? "bg-success" : "bg-text-tertiary"
-            )}
-            onclick={() => handleToggleFilter(filter.id)}
-            aria-label={filter.enabled ? `Disable ${filter.name}` : `Enable ${filter.name}`}
-            role="switch"
-            aria-checked={filter.enabled}
-          >
-            <span
-              class={cn(
-                "absolute left-0.5 top-0.5 size-4 transform rounded-full bg-white shadow transition-transform",
-                filter.enabled && "translate-x-5"
-              )}
-            ></span>
-          </button>
+    {#if isLoading}
+        <div class="my-4 flex justify-center">
+            <div
+                class="border-primary h-5 w-5 animate-spin rounded-full border-2 border-t-transparent"
+            ></div>
         </div>
-      {/each}
-    </div>
-  {/if}
+    {:else if filters.length === 0}
+        <div class="py-4 text-center">
+            <p class="text-text-secondary mb-2">No filters configured yet</p>
+        </div>
+    {:else}
+        <div class="mb-4 max-h-64 overflow-y-auto">
+            {#each filters as filter (filter.id)}
+                <div class="border-border-light flex items-center justify-between border-b py-2">
+                    <div>
+                        <span class="text-text-primary text-sm font-medium">{filter.name}</span>
+                        <div class="text-text-secondary text-xs">
+                            <code class="bg-bg-tertiary rounded px-1">{filter.value}</code>
+                        </div>
+                    </div>
 
-  <div class="mt-4">
-    <button
-      class="bg-primary hover:bg-primary-hover focus:ring-primary w-full rounded px-3 py-2 text-sm text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
-      onclick={openOptions}
-      aria-label="Open filter management page"
-    >
-      Manage Filters
-    </button>
-  </div>
+                    <button
+                        class={cn(
+                            "focus:ring-primary relative me-2 h-5 w-10 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+                            filter.enabled ? "bg-success" : "bg-text-tertiary"
+                        )}
+                        onclick={() => handleToggleFilter(filter.id)}
+                        aria-label={filter.enabled
+                            ? `Disable ${filter.name}`
+                            : `Enable ${filter.name}`}
+                        role="switch"
+                        aria-checked={filter.enabled}
+                    >
+                        <span
+                            class={cn(
+                                "absolute left-0.5 top-0.5 size-4 transform rounded-full bg-white shadow transition-transform",
+                                filter.enabled && "translate-x-5"
+                            )}
+                        ></span>
+                    </button>
+                </div>
+            {/each}
+        </div>
+    {/if}
+
+    <div class="mt-4">
+        <button
+            class="bg-primary hover:bg-primary-hover focus:ring-primary w-full rounded px-3 py-2 text-sm text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+            onclick={openOptions}
+            aria-label="Open filter management page"
+        >
+            Manage Filters
+        </button>
+    </div>
 </main>
diff --git a/src/entrypoints/popup/index.html b/src/entrypoints/popup/index.html
index 67de68e..4028201 100644
--- a/src/entrypoints/popup/index.html
+++ b/src/entrypoints/popup/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pullscope</title>
-    <meta name="manifest.type" content="browser_action" />
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="./popup.ts"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Pullscope</title>
+        <meta name="manifest.type" content="browser_action" />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="./popup.ts"></script>
+    </body>
 </html>
diff --git a/src/entrypoints/popup/popup.ts b/src/entrypoints/popup/popup.ts
index 7a0a5fb..dd59534 100644
--- a/src/entrypoints/popup/popup.ts
+++ b/src/entrypoints/popup/popup.ts
@@ -5,9 +5,9 @@ import { mount } from "svelte";
 const appElement = document.getElementById("app");
 
 if (!appElement) {
-  throw new Error("Failed to find app element. Cannot mount popup.");
+    throw new Error("Failed to find app element. Cannot mount popup.");
 }
 
 mount(Popup, {
-  target: appElement,
+    target: appElement,
 });
diff --git a/src/lib/components/ErrorDisplay.svelte b/src/lib/components/ErrorDisplay.svelte
index 029ac3f..b1055b8 100644
--- a/src/lib/components/ErrorDisplay.svelte
+++ b/src/lib/components/ErrorDisplay.svelte
@@ -1,41 +1,45 @@
 <script lang="ts">
-  let {
-    message,
-    onRetry,
-    onDismiss,
-  }: {
-    message: string;
-    onRetry?: () => void;
-    onDismiss?: () => void;
-  } = $props();
+    let {
+        message,
+        onRetry,
+        onDismiss,
+    }: {
+        message: string;
+        onRetry?: () => void;
+        onDismiss?: () => void;
+    } = $props();
 
-  const errorButtonClasses =
-    "focus:ring-error rounded text-sm underline transition-opacity hover:no-underline hover:opacity-80 focus:outline-none focus:ring-2";
+    const errorButtonClasses =
+        "focus:ring-error rounded text-sm underline transition-opacity hover:no-underline hover:opacity-80 focus:outline-none focus:ring-2";
 </script>
 
 {#if message}
-  <div
-    class="border-error bg-error-light text-error-dark mb-4 border-l-4 p-4"
-    role="alert"
-    aria-live="assertive"
-  >
-    <div class="flex items-start justify-between">
-      <div class="flex-1">
-        <p class="font-medium">Error</p>
-        <p class="mt-1 text-sm">{message}</p>
-      </div>
-      <div class="ml-4 flex gap-2">
-        {#if onRetry}
-          <button class={errorButtonClasses} onclick={onRetry} aria-label="Retry action">
-            Try again
-          </button>
-        {/if}
-        {#if onDismiss}
-          <button class={errorButtonClasses} onclick={onDismiss} aria-label="Dismiss error">
-            Dismiss
-          </button>
-        {/if}
-      </div>
+    <div
+        class="border-error bg-error-light text-error-dark mb-4 border-l-4 p-4"
+        role="alert"
+        aria-live="assertive"
+    >
+        <div class="flex items-start justify-between">
+            <div class="flex-1">
+                <p class="font-medium">Error</p>
+                <p class="mt-1 text-sm">{message}</p>
+            </div>
+            <div class="ml-4 flex gap-2">
+                {#if onRetry}
+                    <button class={errorButtonClasses} onclick={onRetry} aria-label="Retry action">
+                        Try again
+                    </button>
+                {/if}
+                {#if onDismiss}
+                    <button
+                        class={errorButtonClasses}
+                        onclick={onDismiss}
+                        aria-label="Dismiss error"
+                    >
+                        Dismiss
+                    </button>
+                {/if}
+            </div>
+        </div>
     </div>
-  </div>
 {/if}
diff --git a/src/lib/components/FilterEditor.svelte b/src/lib/components/FilterEditor.svelte
index a8e9dc9..36a5e12 100644
--- a/src/lib/components/FilterEditor.svelte
+++ b/src/lib/components/FilterEditor.svelte
@@ -1,179 +1,179 @@
 <script lang="ts">
-  import type { PRFilter } from "@/lib/types/filter";
-  import { filterStore } from "@/lib/stores/filters";
-  import { validateFilter, validateFilterName } from "@/lib/utils/validation";
-  import { cn } from "@/lib/utils/cn";
-  import ErrorDisplay from "@/lib/components/ErrorDisplay.svelte";
-
-  let {
-    filter,
-    onSave,
-    onCancel,
-  }: {
-    filter?: PRFilter;
-    onSave: () => void;
-    onCancel: () => void;
-  } = $props();
-
-  // Form state
-  let name = $state(filter?.name || "");
-  let value = $state(filter?.value || "");
-  let enabled = $state(filter?.enabled ?? true);
-  let isSaving = $state(false);
-  let error = $state("");
-  let nameError = $state("");
-  let valueError = $state("");
-
-  function validateForm() {
-    nameError = "";
-    valueError = "";
-    error = "";
-
-    const nameValidation = validateFilterName(name);
-    if (!nameValidation.isValid) {
-      nameError = nameValidation.error || "";
-      return false;
+    import type { PRFilter } from "@/lib/types/filter";
+    import { filterStore } from "@/lib/stores/filters";
+    import { validateFilter, validateFilterName } from "@/lib/utils/validation";
+    import { cn } from "@/lib/utils/cn";
+    import ErrorDisplay from "@/lib/components/ErrorDisplay.svelte";
+
+    let {
+        filter,
+        onSave,
+        onCancel,
+    }: {
+        filter?: PRFilter;
+        onSave: () => void;
+        onCancel: () => void;
+    } = $props();
+
+    // Form state
+    let name = $state(filter?.name || "");
+    let value = $state(filter?.value || "");
+    let enabled = $state(filter?.enabled ?? true);
+    let isSaving = $state(false);
+    let error = $state("");
+    let nameError = $state("");
+    let valueError = $state("");
+
+    function validateForm() {
+        nameError = "";
+        valueError = "";
+        error = "";
+
+        const nameValidation = validateFilterName(name);
+        if (!nameValidation.isValid) {
+            nameError = nameValidation.error || "";
+            return false;
+        }
+
+        const valueValidation = validateFilter(value);
+        if (!valueValidation.isValid) {
+            valueError = valueValidation.error || "";
+            return false;
+        }
+
+        return true;
     }
 
-    const valueValidation = validateFilter(value);
-    if (!valueValidation.isValid) {
-      valueError = valueValidation.error || "";
-      return false;
+    async function handleSubmit(event: Event) {
+        event.preventDefault();
+
+        if (!validateForm()) {
+            return;
+        }
+
+        try {
+            isSaving = true;
+            error = "";
+
+            let success = false;
+
+            if (filter) {
+                success = await filterStore.update({
+                    ...filter,
+                    name: name.trim(),
+                    value: value.trim(),
+                    enabled,
+                });
+            } else {
+                const newFilter = await filterStore.add({
+                    name: name.trim(),
+                    value: value.trim(),
+                    enabled,
+                });
+                success = newFilter !== null;
+            }
+
+            if (success) {
+                onSave();
+            } else {
+                error = "Failed to save filter. Please try again.";
+            }
+        } catch {
+            error = "Failed to save filter. Please try again.";
+        } finally {
+            isSaving = false;
+        }
     }
 
-    return true;
-  }
-
-  async function handleSubmit(event: Event) {
-    event.preventDefault();
-
-    if (!validateForm()) {
-      return;
-    }
-
-    try {
-      isSaving = true;
-      error = "";
-
-      let success = false;
-
-      if (filter) {
-        success = await filterStore.update({
-          ...filter,
-          name: name.trim(),
-          value: value.trim(),
-          enabled,
-        });
-      } else {
-        const newFilter = await filterStore.add({
-          name: name.trim(),
-          value: value.trim(),
-          enabled,
-        });
-        success = newFilter !== null;
-      }
-
-      if (success) {
-        onSave();
-      } else {
-        error = "Failed to save filter. Please try again.";
-      }
-    } catch {
-      error = "Failed to save filter. Please try again.";
-    } finally {
-      isSaving = false;
-    }
-  }
-
-  const inputClasses =
-    "focus:ring-primary w-full rounded border px-3 py-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
+    const inputClasses =
+        "focus:ring-primary w-full rounded border px-3 py-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
 </script>
 
 <div class="bg-bg-primary rounded-lg p-6 shadow">
-  <h2 class="mb-4 text-xl font-semibold">
-    {filter ? "Edit Filter" : "Add New Filter"}
-  </h2>
-
-  <ErrorDisplay message={error} onDismiss={() => (error = "")} />
-
-  <form onsubmit={handleSubmit}>
-    <div class="mb-4">
-      <label for="name" class="text-text-primary mb-1 block text-sm font-medium">
-        Filter Name
-      </label>
-      <input
-        type="text"
-        id="name"
-        bind:value={name}
-        class={cn(inputClasses, nameError ? "border-error" : "border-border")}
-        placeholder="e.g., Hide Dependabot PRs"
-        aria-invalid={!!nameError}
-        aria-describedby={nameError ? "name-error" : undefined}
-      />
-      {#if nameError}
-        <p id="name-error" class="text-error mt-1 text-sm" role="alert">
-          {nameError}
-        </p>
-      {:else}
-        <p class="text-text-secondary mt-1 text-sm">A descriptive name for your filter</p>
-      {/if}
-    </div>
-
-    <div class="mb-4">
-      <label for="value" class="text-text-primary mb-1 block text-sm font-medium">
-        Filter Value
-      </label>
-      <input
-        type="text"
-        id="value"
-        bind:value
-        class={cn(inputClasses, valueError ? "border-error" : "border-border")}
-        placeholder="e.g., -author:app/dependabot"
-        aria-invalid={!!valueError}
-        aria-describedby={valueError ? "value-error" : undefined}
-      />
-      {#if valueError}
-        <p id="value-error" class="text-error mt-1 text-sm" role="alert">
-          {valueError}
-        </p>
-      {:else}
-        <p class="text-text-secondary mt-1 text-sm">
-          GitHub search syntax (e.g., <code>-author:app/dependabot</code>,
-          <code>is:open</code>)
-        </p>
-      {/if}
-    </div>
-
-    <div class="mb-6">
-      <div class="flex items-center">
-        <input
-          type="checkbox"
-          id="enabled"
-          bind:checked={enabled}
-          class="text-primary focus:ring-primary size-4 rounded transition-colors focus:ring-2 focus:ring-offset-2"
-        />
-        <label for="enabled" class="text-text-primary ml-2 block text-sm">
-          Enable this filter
-        </label>
-      </div>
-    </div>
-
-    <div class="flex justify-end gap-3">
-      <button
-        type="button"
-        onclick={onCancel}
-        class="bg-bg-tertiary text-text-primary hover:bg-border focus:ring-text-secondary rounded px-4 py-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
-        disabled={isSaving}
-      >
-        Cancel
-      </button>
-      <button
-        type="submit"
-        class="bg-primary hover:bg-primary-hover focus:ring-primary rounded px-4 py-2 text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
-        disabled={isSaving}
-      >
-        {isSaving ? "Saving..." : filter ? "Update Filter" : "Add Filter"}
-      </button>
-    </div>
-  </form>
+    <h2 class="mb-4 text-xl font-semibold">
+        {filter ? "Edit Filter" : "Add New Filter"}
+    </h2>
+
+    <ErrorDisplay message={error} onDismiss={() => (error = "")} />
+
+    <form onsubmit={handleSubmit}>
+        <div class="mb-4">
+            <label for="name" class="text-text-primary mb-1 block text-sm font-medium">
+                Filter Name
+            </label>
+            <input
+                type="text"
+                id="name"
+                bind:value={name}
+                class={cn(inputClasses, nameError ? "border-error" : "border-border")}
+                placeholder="e.g., Hide Dependabot PRs"
+                aria-invalid={!!nameError}
+                aria-describedby={nameError ? "name-error" : undefined}
+            />
+            {#if nameError}
+                <p id="name-error" class="text-error mt-1 text-sm" role="alert">
+                    {nameError}
+                </p>
+            {:else}
+                <p class="text-text-secondary mt-1 text-sm">A descriptive name for your filter</p>
+            {/if}
+        </div>
+
+        <div class="mb-4">
+            <label for="value" class="text-text-primary mb-1 block text-sm font-medium">
+                Filter Value
+            </label>
+            <input
+                type="text"
+                id="value"
+                bind:value
+                class={cn(inputClasses, valueError ? "border-error" : "border-border")}
+                placeholder="e.g., -author:app/dependabot"
+                aria-invalid={!!valueError}
+                aria-describedby={valueError ? "value-error" : undefined}
+            />
+            {#if valueError}
+                <p id="value-error" class="text-error mt-1 text-sm" role="alert">
+                    {valueError}
+                </p>
+            {:else}
+                <p class="text-text-secondary mt-1 text-sm">
+                    GitHub search syntax (e.g., <code>-author:app/dependabot</code>,
+                    <code>is:open</code>)
+                </p>
+            {/if}
+        </div>
+
+        <div class="mb-6">
+            <div class="flex items-center">
+                <input
+                    type="checkbox"
+                    id="enabled"
+                    bind:checked={enabled}
+                    class="text-primary focus:ring-primary size-4 rounded transition-colors focus:ring-2 focus:ring-offset-2"
+                />
+                <label for="enabled" class="text-text-primary ml-2 block text-sm">
+                    Enable this filter
+                </label>
+            </div>
+        </div>
+
+        <div class="flex justify-end gap-3">
+            <button
+                type="button"
+                onclick={onCancel}
+                class="bg-bg-tertiary text-text-primary hover:bg-border focus:ring-text-secondary rounded px-4 py-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+                disabled={isSaving}
+            >
+                Cancel
+            </button>
+            <button
+                type="submit"
+                class="bg-primary hover:bg-primary-hover focus:ring-primary rounded px-4 py-2 text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+                disabled={isSaving}
+            >
+                {isSaving ? "Saving..." : filter ? "Update Filter" : "Add Filter"}
+            </button>
+        </div>
+    </form>
 </div>
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index 48a597c..af3767d 100644
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -1,41 +1,41 @@
 <script lang="ts">
-  const icons = {
-    "toggle-on": `
+    const icons = {
+        "toggle-on": `
       <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
     `,
-    "toggle-off": `
+        "toggle-off": `
       <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
     `,
-    edit: `
+        edit: `
       <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
     `,
-    delete: `
+        delete: `
       <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
     `,
-    check: `
+        check: `
       <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
     `,
-    x: `
+        x: `
       <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
     `,
-    plus: `
+        plus: `
       <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
     `,
-  } as const;
+    } as const;
 
-  type IconName = keyof typeof icons;
+    type IconName = keyof typeof icons;
 
-  let {
-    name,
-    class: className = "size-5",
-  }: {
-    name: IconName;
-    class?: string;
-  } = $props();
+    let {
+        name,
+        class: className = "size-5",
+    }: {
+        name: IconName;
+        class?: string;
+    } = $props();
 
-  const iconPath = $derived(icons[name as IconName]);
+    const iconPath = $derived(icons[name as IconName]);
 </script>
 
 <svg class={className} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-  {@html iconPath}
+    {@html iconPath}
 </svg>
diff --git a/src/lib/components/Toast.svelte b/src/lib/components/Toast.svelte
index c209447..04f3ced 100644
--- a/src/lib/components/Toast.svelte
+++ b/src/lib/components/Toast.svelte
@@ -1,89 +1,89 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { cn } from "@/lib/utils/cn";
-  import { TOAST_TYPES, ToastType } from "@/lib/types/toast";
-  import { TOAST_DURATION } from "@/lib/constants";
+    import { onMount } from "svelte";
+    import { cn } from "@/lib/utils/cn";
+    import { TOAST_TYPES, ToastType } from "@/lib/types/toast";
+    import { TOAST_DURATION } from "@/lib/constants";
 
-  let {
-    message,
-    duration = TOAST_DURATION.DEFAULT,
-    type = TOAST_TYPES.INFO,
-    onClose,
-  }: {
-    message: string;
-    duration: number;
-    type: ToastType;
-    onClose?: () => void;
-  } = $props();
+    let {
+        message,
+        duration = TOAST_DURATION.DEFAULT,
+        type = TOAST_TYPES.INFO,
+        onClose,
+    }: {
+        message: string;
+        duration: number;
+        type: ToastType;
+        onClose?: () => void;
+    } = $props();
 
-  let visible = $state(true);
+    let visible = $state(true);
 
-  onMount(() => {
-    if (duration > 0) {
-      const timer = setTimeout(() => {
-        visible = false;
-        onClose?.();
-      }, duration);
+    onMount(() => {
+        if (duration > 0) {
+            const timer = setTimeout(() => {
+                visible = false;
+                onClose?.();
+            }, duration);
 
-      return () => clearTimeout(timer);
-    }
-  });
+            return () => clearTimeout(timer);
+        }
+    });
 
-  const handleClose = () => {
-    visible = false;
-    onClose?.();
-  };
+    const handleClose = () => {
+        visible = false;
+        onClose?.();
+    };
 
-  const typeStyles = {
-    info: "bg-info border-info-dark",
-    success: "bg-success border-success-dark",
-    error: "bg-error border-error-dark",
-    warning: "bg-warning border-warning-dark",
-  } as const satisfies Record<ToastType, string>;
+    const typeStyles = {
+        info: "bg-info border-info-dark",
+        success: "bg-success border-success-dark",
+        error: "bg-error border-error-dark",
+        warning: "bg-warning border-warning-dark",
+    } as const satisfies Record<ToastType, string>;
 </script>
 
 {#if visible}
-  <div
-    class={cn(
-      "animate-slide-in fixed bottom-4 right-4 z-50 max-w-md rounded-lg border-l-4 px-4 py-3 text-white shadow-lg",
-      typeStyles[type]
-    )}
-    role="status"
-    aria-live="polite"
-  >
-    <div class="flex items-center justify-between gap-3">
-      <p class="flex-1 text-sm">{message}</p>
-      <button
-        class="rounded text-white transition-opacity hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
-        onclick={handleClose}
-        aria-label="Close notification"
-      >
-        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      </button>
+    <div
+        class={cn(
+            "animate-slide-in fixed bottom-4 right-4 z-50 max-w-md rounded-lg border-l-4 px-4 py-3 text-white shadow-lg",
+            typeStyles[type]
+        )}
+        role="status"
+        aria-live="polite"
+    >
+        <div class="flex items-center justify-between gap-3">
+            <p class="flex-1 text-sm">{message}</p>
+            <button
+                class="rounded text-white transition-opacity hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                onclick={handleClose}
+                aria-label="Close notification"
+            >
+                <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M6 18L18 6M6 6l12 12"
+                    />
+                </svg>
+            </button>
+        </div>
     </div>
-  </div>
 {/if}
 
 <style>
-  @keyframes slide-in {
-    from {
-      transform: translateX(100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
+    @keyframes slide-in {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
     }
-  }
 
-  .animate-slide-in {
-    animation: slide-in 0.3s ease-out;
-  }
+    .animate-slide-in {
+        animation: slide-in 0.3s ease-out;
+    }
 </style>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index abf89d6..883d3d5 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,40 +1,40 @@
 export const STORAGE_KEYS = {
-  PR_FILTERS: "prFilters",
+    PR_FILTERS: "prFilters",
 } as const;
 
 export const GITHUB_PATTERNS = {
-  PR_PAGE_REGEX: /^https:\/\/github\.com\/[^/]+\/[^/]+\/pulls(\/.*|\?.*)?$/,
-  PR_PAGE_QUERY: "*://github.com/*/*/pulls*",
-  PR_PAGE_PARTIAL: "github.com",
-  PR_PATH_PARTIAL: "/pulls",
+    PR_PAGE_REGEX: /^https:\/\/github\.com\/[^/]+\/[^/]+\/pulls(\/.*|\?.*)?$/,
+    PR_PAGE_QUERY: "*://github.com/*/*/pulls*",
+    PR_PAGE_PARTIAL: "github.com",
+    PR_PATH_PARTIAL: "/pulls",
 } as const;
 
 export const MESSAGE_ACTIONS = {
-  APPLY_FILTERS: "applyFilters",
-  APPLY_FILTERS_NOW: "applyFiltersNow",
-  TOGGLE_FILTER: "toggleFilter",
+    APPLY_FILTERS: "applyFilters",
+    APPLY_FILTERS_NOW: "applyFiltersNow",
+    TOGGLE_FILTER: "toggleFilter",
 } as const;
 
 export const TOAST_DURATION = {
-  SHORT: 2000,
-  DEFAULT: 3000,
-  LONG: 5000,
+    SHORT: 2000,
+    DEFAULT: 3000,
+    LONG: 5000,
 } as const;
 
 export const WAIT_TIMEOUTS = {
-  INITIAL_LOAD: 5000,
-  FILTER_TOGGLE: 2000,
-  DEFAULT: 5000,
+    INITIAL_LOAD: 5000,
+    FILTER_TOGGLE: 2000,
+    DEFAULT: 5000,
 } as const;
 
 export const DEBOUNCE_DELAYS = {
-  URL_CHANGE: 500,
+    URL_CHANGE: 500,
 } as const;
 
 export const VALIDATION = {
-  FILTER_NAME_MAX_LENGTH: 50,
+    FILTER_NAME_MAX_LENGTH: 50,
 } as const;
 
 export const CONTEXT_MENU_IDS = {
-  APPLY_PR_FILTERS: "apply-pr-filters",
+    APPLY_PR_FILTERS: "apply-pr-filters",
 } as const;
diff --git a/src/lib/github.ts b/src/lib/github.ts
index 7591baa..95bd06b 100644
--- a/src/lib/github.ts
+++ b/src/lib/github.ts
@@ -2,7 +2,7 @@ import { logger } from "@/lib/utils/logger";
 import { GITHUB_PATTERNS } from "@/lib/constants";
 
 export const SELECTORS = {
-  GITHUB_SEARCH: "#js-issues-search",
+    GITHUB_SEARCH: "#js-issues-search",
 } as const;
 
 /**
@@ -10,24 +10,24 @@ export const SELECTORS = {
  * Ordered by priority (most specific to most general)
  */
 const SEARCH_INPUT_SELECTORS = [
-  SELECTORS.GITHUB_SEARCH,
-  'input[name="q"]',
-  'input[aria-label*="Search"]',
+    SELECTORS.GITHUB_SEARCH,
+    'input[name="q"]',
+    'input[aria-label*="Search"]',
 ] as const;
 
 export const isGitHubPRPage = (url: string): boolean => GITHUB_PATTERNS.PR_PAGE_REGEX.test(url);
 
 export function getSearchInputElement(): HTMLInputElement | null {
-  for (const selector of SEARCH_INPUT_SELECTORS) {
-    const element = document.querySelector<HTMLInputElement>(selector);
-    if (element) {
-      logger.debug(`Found search input with selector: ${selector}`);
-      return element;
+    for (const selector of SEARCH_INPUT_SELECTORS) {
+        const element = document.querySelector<HTMLInputElement>(selector);
+        if (element) {
+            logger.debug(`Found search input with selector: ${selector}`);
+            return element;
+        }
     }
-  }
 
-  logger.warn("Could not find GitHub search input element");
-  return null;
+    logger.warn("Could not find GitHub search input element");
+    return null;
 }
 
 /**
@@ -35,34 +35,34 @@ export function getSearchInputElement(): HTMLInputElement | null {
  * Uses word boundary matching to avoid false positives
  */
 function isFilterPresent(searchValue: string, filter: string): boolean {
-  // Split both the search value and filter into tokens
-  const searchTokens = searchValue.split(/\s+/).filter(Boolean);
-  const filterTokens = filter.split(/\s+/).filter(Boolean);
+    // Split both the search value and filter into tokens
+    const searchTokens = searchValue.split(/\s+/).filter(Boolean);
+    const filterTokens = filter.split(/\s+/).filter(Boolean);
 
-  // Check if all filter tokens are present in search tokens
-  return filterTokens.every((token) => searchTokens.includes(token));
+    // Check if all filter tokens are present in search tokens
+    return filterTokens.every((token) => searchTokens.includes(token));
 }
 
 function triggerSearch(searchInput: HTMLInputElement): void {
-  searchInput.dispatchEvent(new Event("input", { bubbles: true }));
-
-  const form = searchInput.closest("form");
-  if (form) {
-    form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
-    logger.debug("Triggered form submit");
-  } else {
-    // Fallback: trigger Enter key press
-    searchInput.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        key: "Enter",
-        code: "Enter",
-        keyCode: 13,
-        which: 13,
-        bubbles: true,
-      })
-    );
-    logger.debug("Triggered Enter key press");
-  }
+    searchInput.dispatchEvent(new Event("input", { bubbles: true }));
+
+    const form = searchInput.closest("form");
+    if (form) {
+        form.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+        logger.debug("Triggered form submit");
+    } else {
+        // Fallback: trigger Enter key press
+        searchInput.dispatchEvent(
+            new KeyboardEvent("keydown", {
+                key: "Enter",
+                code: "Enter",
+                keyCode: 13,
+                which: 13,
+                bubbles: true,
+            })
+        );
+        logger.debug("Triggered Enter key press");
+    }
 }
 
 /**
@@ -70,65 +70,65 @@ function triggerSearch(searchInput: HTMLInputElement): void {
  * @returns Object with updated value and count of filters added
  */
 function buildSearchValueWithFilters(
-  currentValue: string,
-  filterValues: string[]
+    currentValue: string,
+    filterValues: string[]
 ): { value: string; count: number } {
-  let value = currentValue.trim();
-  let count = 0;
-
-  filterValues.forEach((filter) => {
-    if (!isFilterPresent(value, filter)) {
-      if (value && !value.endsWith(" ")) {
-        value += " ";
-      }
-      value += filter;
-      count++;
-    }
-  });
-
-  return { value, count };
+    let value = currentValue.trim();
+    let count = 0;
+
+    filterValues.forEach((filter) => {
+        if (!isFilterPresent(value, filter)) {
+            if (value && !value.endsWith(" ")) {
+                value += " ";
+            }
+            value += filter;
+            count++;
+        }
+    });
+
+    return { value, count };
 }
 
 export function applyFilters(filterValues: string[]): boolean {
-  const searchInput = getSearchInputElement();
-  if (!searchInput) {
-    logger.error("Cannot apply filters: search input not found");
-    return false;
-  }
+    const searchInput = getSearchInputElement();
+    if (!searchInput) {
+        logger.error("Cannot apply filters: search input not found");
+        return false;
+    }
 
-  const result = buildSearchValueWithFilters(searchInput.value || "", filterValues);
+    const result = buildSearchValueWithFilters(searchInput.value || "", filterValues);
 
-  if (result.count === 0) {
-    logger.debug("All filters already present");
-    return false;
-  }
+    if (result.count === 0) {
+        logger.debug("All filters already present");
+        return false;
+    }
 
-  searchInput.value = result.value;
-  triggerSearch(searchInput);
+    searchInput.value = result.value;
+    triggerSearch(searchInput);
 
-  logger.info(`Applied ${result.count} filter(s)`);
-  return true;
+    logger.info(`Applied ${result.count} filter(s)`);
+    return true;
 }
 
 export function addFilter(filterValue: string): boolean {
-  const searchInput = getSearchInputElement();
-  if (!searchInput) {
-    logger.error("Cannot add filter: search input not found");
-    return false;
-  }
+    const searchInput = getSearchInputElement();
+    if (!searchInput) {
+        logger.error("Cannot add filter: search input not found");
+        return false;
+    }
 
-  const result = buildSearchValueWithFilters(searchInput.value || "", [filterValue]);
+    const result = buildSearchValueWithFilters(searchInput.value || "", [filterValue]);
 
-  if (result.count === 0) {
-    logger.debug(`Filter already present: ${filterValue}`);
-    return false;
-  }
+    if (result.count === 0) {
+        logger.debug(`Filter already present: ${filterValue}`);
+        return false;
+    }
 
-  searchInput.value = result.value;
-  triggerSearch(searchInput);
+    searchInput.value = result.value;
+    triggerSearch(searchInput);
 
-  logger.info(`Added filter: ${filterValue}`);
-  return true;
+    logger.info(`Added filter: ${filterValue}`);
+    return true;
 }
 
 /**
@@ -136,33 +136,33 @@ export function addFilter(filterValue: string): boolean {
  * @param filterValue The filter string to remove
  */
 export function removeFilter(filterValue: string): boolean {
-  const searchInput = getSearchInputElement();
-  if (!searchInput) {
-    logger.error("Cannot remove filter: search input not found");
-    return false;
-  }
+    const searchInput = getSearchInputElement();
+    if (!searchInput) {
+        logger.error("Cannot remove filter: search input not found");
+        return false;
+    }
 
-  const currentValue = searchInput.value || "";
-  const filterTokens = filterValue.split(/\s+/).filter(Boolean);
+    const currentValue = searchInput.value || "";
+    const filterTokens = filterValue.split(/\s+/).filter(Boolean);
 
-  // Split current value into tokens
-  let tokens = currentValue.split(/\s+/).filter(Boolean);
+    // Split current value into tokens
+    let tokens = currentValue.split(/\s+/).filter(Boolean);
 
-  // Remove all tokens that are part of the filter
-  tokens = tokens.filter((token) => !filterTokens.includes(token));
+    // Remove all tokens that are part of the filter
+    tokens = tokens.filter((token) => !filterTokens.includes(token));
 
-  // Reconstruct the search value
-  const newValue = tokens.join(" ");
+    // Reconstruct the search value
+    const newValue = tokens.join(" ");
 
-  if (newValue === currentValue) {
-    logger.debug(`Filter not present: ${filterValue}`);
-    return false;
-  }
+    if (newValue === currentValue) {
+        logger.debug(`Filter not present: ${filterValue}`);
+        return false;
+    }
 
-  searchInput.value = newValue;
+    searchInput.value = newValue;
 
-  triggerSearch(searchInput);
+    triggerSearch(searchInput);
 
-  logger.info(`Removed filter: ${filterValue}`);
-  return true;
+    logger.info(`Removed filter: ${filterValue}`);
+    return true;
 }
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index 9f3a2d6..6299d82 100644
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -3,63 +3,63 @@ import { logger } from "@/lib/utils/logger";
 import { STORAGE_KEYS } from "@/lib/constants";
 
 export async function saveFilters(filters: PRFilter[]): Promise<void> {
-  await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: filters });
+    await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: filters });
 }
 
 export async function getFilters(): Promise<PRFilter[]> {
-  const data = await browser.storage.sync.get(STORAGE_KEYS.PR_FILTERS);
-  logger.debug("getFilters", data[STORAGE_KEYS.PR_FILTERS] || []);
+    const data = await browser.storage.sync.get(STORAGE_KEYS.PR_FILTERS);
+    logger.debug("getFilters", data[STORAGE_KEYS.PR_FILTERS] || []);
 
-  return data[STORAGE_KEYS.PR_FILTERS] || [];
+    return data[STORAGE_KEYS.PR_FILTERS] || [];
 }
 
 export async function addFilter(filter: NewPRFilter): Promise<PRFilter[]> {
-  logger.debug("addFilter", filter);
-
-  const updatedFilters = [
-    ...(await getFilters()),
-    {
-      ...filter,
-      id: crypto.randomUUID(),
-    } satisfies PRFilter,
-  ];
-  await saveFilters(updatedFilters);
-
-  logger.debug("after addFilter", await getFilters());
-  return updatedFilters;
+    logger.debug("addFilter", filter);
+
+    const updatedFilters = [
+        ...(await getFilters()),
+        {
+            ...filter,
+            id: crypto.randomUUID(),
+        } satisfies PRFilter,
+    ];
+    await saveFilters(updatedFilters);
+
+    logger.debug("after addFilter", await getFilters());
+    return updatedFilters;
 }
 
 /**
  * Update an existing filter
  */
 export async function updateFilter(filter: PRFilter): Promise<PRFilter[]> {
-  logger.debug("updateFilter", filter);
+    logger.debug("updateFilter", filter);
 
-  const filters = await getFilters();
-  const updatedFilters = filters.map((f) => (f.id === filter.id ? filter : f));
+    const filters = await getFilters();
+    const updatedFilters = filters.map((f) => (f.id === filter.id ? filter : f));
 
-  await saveFilters(updatedFilters);
+    await saveFilters(updatedFilters);
 
-  logger.debug("after updateFilter", await getFilters());
-  return updatedFilters;
+    logger.debug("after updateFilter", await getFilters());
+    return updatedFilters;
 }
 
 export async function deleteFilter(id: string): Promise<PRFilter[]> {
-  const updatedFilters = (await getFilters()).filter((f) => f.id !== id);
+    const updatedFilters = (await getFilters()).filter((f) => f.id !== id);
 
-  await saveFilters(updatedFilters);
-  return updatedFilters;
+    await saveFilters(updatedFilters);
+    return updatedFilters;
 }
 
 export async function toggleFilter(id: string): Promise<PRFilter[]> {
-  logger.debug("toggleFilter", id);
+    logger.debug("toggleFilter", id);
 
-  const updatedFilters = (await getFilters()).map((f) =>
-    f.id === id ? { ...f, enabled: !f.enabled } : f
-  );
+    const updatedFilters = (await getFilters()).map((f) =>
+        f.id === id ? { ...f, enabled: !f.enabled } : f
+    );
 
-  await saveFilters(updatedFilters);
+    await saveFilters(updatedFilters);
 
-  logger.debug("after toggleFilter", await getFilters());
-  return updatedFilters;
+    logger.debug("after toggleFilter", await getFilters());
+    return updatedFilters;
 }
diff --git a/src/lib/stores/filters.ts b/src/lib/stores/filters.ts
index 8509db3..de5ce9d 100644
--- a/src/lib/stores/filters.ts
+++ b/src/lib/stores/filters.ts
@@ -4,9 +4,9 @@ import { logger } from "@/lib/utils/logger";
 import { STORAGE_KEYS } from "@/lib/constants";
 
 interface FilterStoreState {
-  filters: PRFilter[];
-  isLoading: boolean;
-  error: string | null;
+    filters: PRFilter[];
+    isLoading: boolean;
+    error: string | null;
 }
 
 /**
@@ -14,177 +14,177 @@ interface FilterStoreState {
  * Syncs with browser.storage and provides CRUD operations
  */
 function createFilterStore() {
-  const {
-    subscribe,
-    set: _set,
-    update,
-  } = writable<FilterStoreState>({
-    filters: [],
-    isLoading: false,
-    error: null,
-  });
-
-  // Storage change listener
-  let storageListener:
-    | ((
-        changes: Record<string, { newValue?: PRFilter[]; oldValue?: PRFilter[] }>,
-        areaName: string
-      ) => void)
-    | null = null;
-
-  return {
-    subscribe,
-
-    /**
-     * Initialize the store by loading filters from storage
-     */
-    async init() {
-      logger.debug("Initializing filter store");
-      update((state) => ({ ...state, isLoading: true, error: null }));
-
-      try {
-        const data = await browser.storage.sync.get(STORAGE_KEYS.PR_FILTERS);
-        const filters = (data[STORAGE_KEYS.PR_FILTERS] || []) as PRFilter[];
-
-        logger.debug("Loaded filters from storage", filters);
-        update((state) => ({
-          ...state,
-          filters,
-          isLoading: false,
-        }));
-
-        // Set up storage change listener
-        if (!storageListener) {
-          storageListener = (changes, areaName) => {
-            if (areaName === "sync" && changes[STORAGE_KEYS.PR_FILTERS]) {
-              const newFilters = changes[STORAGE_KEYS.PR_FILTERS].newValue || [];
-              logger.debug("Storage changed, updating filters", newFilters);
-              update((state) => ({ ...state, filters: newFilters }));
+    const {
+        subscribe,
+        set: _set,
+        update,
+    } = writable<FilterStoreState>({
+        filters: [],
+        isLoading: false,
+        error: null,
+    });
+
+    // Storage change listener
+    let storageListener:
+        | ((
+              changes: Record<string, { newValue?: PRFilter[]; oldValue?: PRFilter[] }>,
+              areaName: string
+          ) => void)
+        | null = null;
+
+    return {
+        subscribe,
+
+        /**
+         * Initialize the store by loading filters from storage
+         */
+        async init() {
+            logger.debug("Initializing filter store");
+            update((state) => ({ ...state, isLoading: true, error: null }));
+
+            try {
+                const data = await browser.storage.sync.get(STORAGE_KEYS.PR_FILTERS);
+                const filters = (data[STORAGE_KEYS.PR_FILTERS] || []) as PRFilter[];
+
+                logger.debug("Loaded filters from storage", filters);
+                update((state) => ({
+                    ...state,
+                    filters,
+                    isLoading: false,
+                }));
+
+                // Set up storage change listener
+                if (!storageListener) {
+                    storageListener = (changes, areaName) => {
+                        if (areaName === "sync" && changes[STORAGE_KEYS.PR_FILTERS]) {
+                            const newFilters = changes[STORAGE_KEYS.PR_FILTERS].newValue || [];
+                            logger.debug("Storage changed, updating filters", newFilters);
+                            update((state) => ({ ...state, filters: newFilters }));
+                        }
+                    };
+                    browser.storage.onChanged.addListener(storageListener);
+                }
+            } catch (err) {
+                logger.error("Failed to load filters", err);
+                update((state) => ({
+                    ...state,
+                    isLoading: false,
+                    error: "Failed to load filters. Please try again.",
+                }));
             }
-          };
-          browser.storage.onChanged.addListener(storageListener);
-        }
-      } catch (err) {
-        logger.error("Failed to load filters", err);
-        update((state) => ({
-          ...state,
-          isLoading: false,
-          error: "Failed to load filters. Please try again.",
-        }));
-      }
-    },
-
-    async add(filter: NewPRFilter): Promise<PRFilter | null> {
-      logger.debug("Adding filter", filter);
-
-      try {
-        const state = get({ subscribe });
-        const newFilter = {
-          ...filter,
-          id: crypto.randomUUID(),
-        } satisfies PRFilter;
-
-        const updatedFilters = [...state.filters, newFilter];
-        await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: updatedFilters });
-
-        update((s) => ({ ...s, filters: updatedFilters, error: null }));
-        logger.info("Filter added successfully", newFilter);
-
-        return newFilter;
-      } catch (err) {
-        logger.error("Failed to add filter", err);
-        update((s) => ({
-          ...s,
-          error: "Failed to add filter. Please try again.",
-        }));
-        return null;
-      }
-    },
-
-    async update(filter: PRFilter): Promise<boolean> {
-      logger.debug("Updating filter", filter);
-
-      try {
-        const state = get({ subscribe });
-        const updatedFilters = state.filters.map((f) => (f.id === filter.id ? filter : f));
-
-        await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: updatedFilters });
-        update((s) => ({ ...s, filters: updatedFilters, error: null }));
-
-        logger.info("Filter updated successfully", filter);
-        return true;
-      } catch (err) {
-        logger.error("Failed to update filter", err);
-        update((s) => ({
-          ...s,
-          error: "Failed to update filter. Please try again.",
-        }));
-        return false;
-      }
-    },
-
-    async delete(id: string): Promise<boolean> {
-      logger.debug("Deleting filter", id);
-
-      try {
-        const state = get({ subscribe });
-        const updatedFilters = state.filters.filter((f) => f.id !== id);
-
-        await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: updatedFilters });
-        update((s) => ({ ...s, filters: updatedFilters, error: null }));
-
-        logger.info("Filter deleted successfully", id);
-        return true;
-      } catch (err) {
-        logger.error("Failed to delete filter", err);
-        update((s) => ({
-          ...s,
-          error: "Failed to delete filter. Please try again.",
-        }));
-        return false;
-      }
-    },
-
-    async toggle(id: string): Promise<boolean> {
-      logger.debug("Toggling filter", id);
-
-      try {
-        const state = get({ subscribe });
-        const updatedFilters = state.filters.map((f) =>
-          f.id === id ? { ...f, enabled: !f.enabled } : f
-        );
-
-        await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: updatedFilters });
-        update((s) => ({ ...s, filters: updatedFilters, error: null }));
-
-        logger.info("Filter toggled successfully", id);
-        return true;
-      } catch (err) {
-        logger.error("Failed to toggle filter", err);
-        update((s) => ({
-          ...s,
-          error: "Failed to toggle filter. Please try again.",
-        }));
-        return false;
-      }
-    },
-
-    getEnabled(): PRFilter[] {
-      const state = get({ subscribe });
-      return state.filters.filter((f) => f.enabled);
-    },
-
-    clearError() {
-      update((s) => ({ ...s, error: null }));
-    },
-
-    destroy() {
-      if (storageListener) {
-        browser.storage.onChanged.removeListener(storageListener);
-        storageListener = null;
-      }
-    },
-  };
+        },
+
+        async add(filter: NewPRFilter): Promise<PRFilter | null> {
+            logger.debug("Adding filter", filter);
+
+            try {
+                const state = get({ subscribe });
+                const newFilter = {
+                    ...filter,
+                    id: crypto.randomUUID(),
+                } satisfies PRFilter;
+
+                const updatedFilters = [...state.filters, newFilter];
+                await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: updatedFilters });
+
+                update((s) => ({ ...s, filters: updatedFilters, error: null }));
+                logger.info("Filter added successfully", newFilter);
+
+                return newFilter;
+            } catch (err) {
+                logger.error("Failed to add filter", err);
+                update((s) => ({
+                    ...s,
+                    error: "Failed to add filter. Please try again.",
+                }));
+                return null;
+            }
+        },
+
+        async update(filter: PRFilter): Promise<boolean> {
+            logger.debug("Updating filter", filter);
+
+            try {
+                const state = get({ subscribe });
+                const updatedFilters = state.filters.map((f) => (f.id === filter.id ? filter : f));
+
+                await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: updatedFilters });
+                update((s) => ({ ...s, filters: updatedFilters, error: null }));
+
+                logger.info("Filter updated successfully", filter);
+                return true;
+            } catch (err) {
+                logger.error("Failed to update filter", err);
+                update((s) => ({
+                    ...s,
+                    error: "Failed to update filter. Please try again.",
+                }));
+                return false;
+            }
+        },
+
+        async delete(id: string): Promise<boolean> {
+            logger.debug("Deleting filter", id);
+
+            try {
+                const state = get({ subscribe });
+                const updatedFilters = state.filters.filter((f) => f.id !== id);
+
+                await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: updatedFilters });
+                update((s) => ({ ...s, filters: updatedFilters, error: null }));
+
+                logger.info("Filter deleted successfully", id);
+                return true;
+            } catch (err) {
+                logger.error("Failed to delete filter", err);
+                update((s) => ({
+                    ...s,
+                    error: "Failed to delete filter. Please try again.",
+                }));
+                return false;
+            }
+        },
+
+        async toggle(id: string): Promise<boolean> {
+            logger.debug("Toggling filter", id);
+
+            try {
+                const state = get({ subscribe });
+                const updatedFilters = state.filters.map((f) =>
+                    f.id === id ? { ...f, enabled: !f.enabled } : f
+                );
+
+                await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: updatedFilters });
+                update((s) => ({ ...s, filters: updatedFilters, error: null }));
+
+                logger.info("Filter toggled successfully", id);
+                return true;
+            } catch (err) {
+                logger.error("Failed to toggle filter", err);
+                update((s) => ({
+                    ...s,
+                    error: "Failed to toggle filter. Please try again.",
+                }));
+                return false;
+            }
+        },
+
+        getEnabled(): PRFilter[] {
+            const state = get({ subscribe });
+            return state.filters.filter((f) => f.enabled);
+        },
+
+        clearError() {
+            update((s) => ({ ...s, error: null }));
+        },
+
+        destroy() {
+            if (storageListener) {
+                browser.storage.onChanged.removeListener(storageListener);
+                storageListener = null;
+            }
+        },
+    };
 }
 
 /**
@@ -196,7 +196,7 @@ export const filterStore = createFilterStore();
  * Derived store for enabled filters only
  */
 export const enabledFilters = derived(filterStore, ($store) =>
-  $store.filters.filter((f) => f.enabled)
+    $store.filters.filter((f) => f.enabled)
 );
 
 /**
@@ -208,6 +208,6 @@ export const filterCount = derived(filterStore, ($store) => $store.filters.lengt
  * Derived store for enabled filter count
  */
 export const enabledFilterCount = derived(
-  filterStore,
-  ($store) => $store.filters.filter((f) => f.enabled).length
+    filterStore,
+    ($store) => $store.filters.filter((f) => f.enabled).length
 );
diff --git a/src/lib/types/filter.ts b/src/lib/types/filter.ts
index d254ade..106a583 100644
--- a/src/lib/types/filter.ts
+++ b/src/lib/types/filter.ts
@@ -1,8 +1,8 @@
 export interface PRFilter {
-  id: string;
-  name: string;
-  value: string; // The actual filter text (e.g., "-author:app/dependabot")
-  enabled: boolean;
+    id: string;
+    name: string;
+    value: string; // The actual filter text (e.g., "-author:app/dependabot")
+    enabled: boolean;
 }
 
 export type NewPRFilter = Omit<PRFilter, "id">;
diff --git a/src/lib/types/messages.ts b/src/lib/types/messages.ts
index 8b21945..05f28bd 100644
--- a/src/lib/types/messages.ts
+++ b/src/lib/types/messages.ts
@@ -2,21 +2,21 @@ import type { PRFilter } from "@/lib/types/filter";
 import { MESSAGE_ACTIONS } from "@/lib/constants";
 
 export type ApplyFiltersMessage = {
-  action: typeof MESSAGE_ACTIONS.APPLY_FILTERS;
+    action: typeof MESSAGE_ACTIONS.APPLY_FILTERS;
 };
 
 export type ApplyFiltersNowMessage = {
-  action: typeof MESSAGE_ACTIONS.APPLY_FILTERS_NOW;
+    action: typeof MESSAGE_ACTIONS.APPLY_FILTERS_NOW;
 };
 
 export type ToggleFilterMessage = {
-  action: typeof MESSAGE_ACTIONS.TOGGLE_FILTER;
-  filter: PRFilter;
+    action: typeof MESSAGE_ACTIONS.TOGGLE_FILTER;
+    filter: PRFilter;
 };
 
 export type ExtensionMessage = ApplyFiltersMessage | ApplyFiltersNowMessage | ToggleFilterMessage;
 
 export type MessageResponse = {
-  success: boolean;
-  message?: string;
+    success: boolean;
+    message?: string;
 };
diff --git a/src/lib/types/toast.ts b/src/lib/types/toast.ts
index 589386e..ad6ae7e 100644
--- a/src/lib/types/toast.ts
+++ b/src/lib/types/toast.ts
@@ -1,8 +1,8 @@
 export const TOAST_TYPES = {
-  INFO: "info",
-  SUCCESS: "success",
-  ERROR: "error",
-  WARNING: "warning",
+    INFO: "info",
+    SUCCESS: "success",
+    ERROR: "error",
+    WARNING: "warning",
 } as const;
 
 export type ToastType = (typeof TOAST_TYPES)[keyof typeof TOAST_TYPES];
diff --git a/src/lib/utils/cn.ts b/src/lib/utils/cn.ts
index abc8c5f..f4bd3cd 100644
--- a/src/lib/utils/cn.ts
+++ b/src/lib/utils/cn.ts
@@ -1,3 +1,3 @@
 export function cn(...classes: (string | false | null | undefined)[]): string {
-  return classes.filter(Boolean).join(" ");
+    return classes.filter(Boolean).join(" ");
 }
diff --git a/src/lib/utils/dom.ts b/src/lib/utils/dom.ts
index 3336665..a3fcec3 100644
--- a/src/lib/utils/dom.ts
+++ b/src/lib/utils/dom.ts
@@ -5,38 +5,38 @@
  * @returns Promise that resolves with the element or rejects on timeout
  */
 export function waitForElement<T extends Element = Element>(
-  selector: string,
-  timeout = 5000
+    selector: string,
+    timeout = 5000
 ): Promise<T> {
-  return new Promise((resolve, reject) => {
-    const existingElement = document.querySelector<T>(selector);
-    if (existingElement) {
-      return resolve(existingElement);
-    }
+    return new Promise((resolve, reject) => {
+        const existingElement = document.querySelector<T>(selector);
+        if (existingElement) {
+            return resolve(existingElement);
+        }
 
-    const timeoutId = setTimeout(() => {
-      observer.disconnect();
-      reject(new Error(`Timeout waiting for element: ${selector}`));
-    }, timeout);
+        const timeoutId = setTimeout(() => {
+            observer.disconnect();
+            reject(new Error(`Timeout waiting for element: ${selector}`));
+        }, timeout);
 
-    const observer = new MutationObserver(() => {
-      const element = document.querySelector<T>(selector);
-      if (element) {
-        clearTimeout(timeoutId);
-        observer.disconnect();
-        resolve(element);
-      }
-    });
+        const observer = new MutationObserver(() => {
+            const element = document.querySelector<T>(selector);
+            if (element) {
+                clearTimeout(timeoutId);
+                observer.disconnect();
+                resolve(element);
+            }
+        });
 
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
     });
-  });
 }
 
 export const waitForElements = async (selectors: string[], timeout = 5000) =>
-  Promise.all(selectors.map((s) => waitForElement(s, timeout)));
+    Promise.all(selectors.map((s) => waitForElement(s, timeout)));
 
 /**
  * Debounce function to limit how often a function can fire
@@ -46,19 +46,19 @@ export const waitForElements = async (selectors: string[], timeout = 5000) =>
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function debounce<T extends (...args: any[]) => any>(
-  func: T,
-  wait: number
+    func: T,
+    wait: number
 ): (...args: Parameters<T>) => void {
-  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function (this: any, ...args: Parameters<T>) {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return function (this: any, ...args: Parameters<T>) {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
 
-    timeoutId = setTimeout(() => {
-      func.apply(this, args);
-    }, wait);
-  };
+        timeoutId = setTimeout(() => {
+            func.apply(this, args);
+        }, wait);
+    };
 }
diff --git a/src/lib/utils/logger.ts b/src/lib/utils/logger.ts
index 434572b..0b541af 100644
--- a/src/lib/utils/logger.ts
+++ b/src/lib/utils/logger.ts
@@ -1,55 +1,55 @@
 type LogLevel = "debug" | "info" | "warn" | "error";
 
 class Logger {
-  private isDevelopment = import.meta.env.DEV;
-  private prefix = "[Pullscope]";
+    private isDevelopment = import.meta.env.DEV;
+    private prefix = "[Pullscope]";
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private log(level: LogLevel, message: string, ...args: any[]) {
+        if (!this.isDevelopment && level === "debug") {
+            return; // Skip debug logs in production
+        }
+
+        const timestamp = new Date().toISOString();
+        const formattedMessage = `${this.prefix} [${timestamp}] [${level.toUpperCase()}] ${message}`;
+
+        switch (level) {
+            case "debug":
+                // eslint-disable-next-line no-console
+                console.debug(formattedMessage, ...args);
+                break;
+            case "info":
+                // eslint-disable-next-line no-console
+                console.info(formattedMessage, ...args);
+                break;
+            case "warn":
+                console.warn(formattedMessage, ...args);
+                break;
+            case "error":
+                console.error(formattedMessage, ...args);
+                break;
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    debug(message: string, ...args: any[]) {
+        this.log("debug", message, ...args);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    info(message: string, ...args: any[]) {
+        this.log("info", message, ...args);
+    }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private log(level: LogLevel, message: string, ...args: any[]) {
-    if (!this.isDevelopment && level === "debug") {
-      return; // Skip debug logs in production
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    warn(message: string, ...args: any[]) {
+        this.log("warn", message, ...args);
     }
 
-    const timestamp = new Date().toISOString();
-    const formattedMessage = `${this.prefix} [${timestamp}] [${level.toUpperCase()}] ${message}`;
-
-    switch (level) {
-      case "debug":
-        // eslint-disable-next-line no-console
-        console.debug(formattedMessage, ...args);
-        break;
-      case "info":
-        // eslint-disable-next-line no-console
-        console.info(formattedMessage, ...args);
-        break;
-      case "warn":
-        console.warn(formattedMessage, ...args);
-        break;
-      case "error":
-        console.error(formattedMessage, ...args);
-        break;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    error(message: string, ...args: any[]) {
+        this.log("error", message, ...args);
     }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  debug(message: string, ...args: any[]) {
-    this.log("debug", message, ...args);
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  info(message: string, ...args: any[]) {
-    this.log("info", message, ...args);
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  warn(message: string, ...args: any[]) {
-    this.log("warn", message, ...args);
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  error(message: string, ...args: any[]) {
-    this.log("error", message, ...args);
-  }
 }
 
 export const logger = new Logger();
diff --git a/src/lib/utils/messaging.ts b/src/lib/utils/messaging.ts
index b0481f9..2f29841 100644
--- a/src/lib/utils/messaging.ts
+++ b/src/lib/utils/messaging.ts
@@ -8,22 +8,22 @@ import { logger } from "@/lib/utils/logger";
  * This utility is shared between Popup and Options components
  */
 export async function broadcastFilterToggle(filter: PRFilter): Promise<void> {
-  try {
-    const tabs = await browser.tabs.query({
-      url: GITHUB_PATTERNS.PR_PAGE_QUERY,
-    });
+    try {
+        const tabs = await browser.tabs.query({
+            url: GITHUB_PATTERNS.PR_PAGE_QUERY,
+        });
 
-    const message = {
-      action: MESSAGE_ACTIONS.TOGGLE_FILTER,
-      filter,
-    } satisfies ToggleFilterMessage;
+        const message = {
+            action: MESSAGE_ACTIONS.TOGGLE_FILTER,
+            filter,
+        } satisfies ToggleFilterMessage;
 
-    for (const tab of tabs) {
-      if (tab.id) {
-        browser.tabs.sendMessage(tab.id, message);
-      }
+        for (const tab of tabs) {
+            if (tab.id) {
+                browser.tabs.sendMessage(tab.id, message);
+            }
+        }
+    } catch (err) {
+        logger.error("Failed to broadcast filter toggle:", err);
     }
-  } catch (err) {
-    logger.error("Failed to broadcast filter toggle:", err);
-  }
 }
diff --git a/src/lib/utils/validation.ts b/src/lib/utils/validation.ts
index 4515118..5fe126b 100644
--- a/src/lib/utils/validation.ts
+++ b/src/lib/utils/validation.ts
@@ -1,8 +1,8 @@
 import { VALIDATION } from "@/lib/constants";
 
 export interface ValidationResult {
-  readonly isValid: boolean;
-  readonly error?: string;
+    readonly isValid: boolean;
+    readonly error?: string;
 }
 
 /**
@@ -10,105 +10,105 @@ export interface ValidationResult {
  * Source: https://docs.github.com/en/search-github/searching-on-github/searching-issues-and-pull-requests
  */
 const GITHUB_QUALIFIERS = [
-  "type",
-  "in",
-  "author",
-  "assignee",
-  "mentions",
-  "team",
-  "commenter",
-  "involves",
-  "linked",
-  "label",
-  "milestone",
-  "project",
-  "status",
-  "head",
-  "base",
-  "language",
-  "comments",
-  "interactions",
-  "reactions",
-  "draft",
-  "review",
-  "reviewed-by",
-  "review-requested",
-  "team-review-requested",
-  "user-review-requested",
-  "is",
-  "no",
-  "archived",
-  "locked",
-  "created",
-  "updated",
-  "merged",
-  "closed",
-  "sort",
+    "type",
+    "in",
+    "author",
+    "assignee",
+    "mentions",
+    "team",
+    "commenter",
+    "involves",
+    "linked",
+    "label",
+    "milestone",
+    "project",
+    "status",
+    "head",
+    "base",
+    "language",
+    "comments",
+    "interactions",
+    "reactions",
+    "draft",
+    "review",
+    "reviewed-by",
+    "review-requested",
+    "team-review-requested",
+    "user-review-requested",
+    "is",
+    "no",
+    "archived",
+    "locked",
+    "created",
+    "updated",
+    "merged",
+    "closed",
+    "sort",
 ];
 
 export function validateFilter(value: string): ValidationResult {
-  if (!value || !value.trim()) {
-    return {
-      isValid: false,
-      error: "Filter value cannot be empty",
-    };
-  }
-
-  // Check for unclosed quotes
-  const quoteCount = (value.match(/"/g) || []).length;
-  if (quoteCount % 2 !== 0) {
-    return {
-      isValid: false,
-      error: "Unclosed quote detected",
-    };
-  }
-
-  // Check for basic syntax errors
-  const tokens = value.split(/\s+/);
-  for (const token of tokens) {
-    // Check for invalid qualifier syntax (e.g., "author::" or "author:")
-    if (token.includes(":")) {
-      const [qualifier, ...valueParts] = token.split(":");
-
-      // Remove leading - or + from qualifier
-      const cleanQualifier = qualifier.replace(/^[-+]/, "");
-
-      // Check if it's a recognized qualifier
-      if (cleanQualifier && !GITHUB_QUALIFIERS.includes(cleanQualifier)) {
+    if (!value || !value.trim()) {
         return {
-          isValid: false,
-          error: `Unknown qualifier: ${cleanQualifier}`,
+            isValid: false,
+            error: "Filter value cannot be empty",
         };
-      }
+    }
 
-      // Check if value is empty (e.g., "author:")
-      const value = valueParts.join(":");
-      if (!value && cleanQualifier) {
+    // Check for unclosed quotes
+    const quoteCount = (value.match(/"/g) || []).length;
+    if (quoteCount % 2 !== 0) {
         return {
-          isValid: false,
-          error: `Qualifier "${cleanQualifier}" is missing a value`,
+            isValid: false,
+            error: "Unclosed quote detected",
         };
-      }
     }
-  }
 
-  return { isValid: true };
+    // Check for basic syntax errors
+    const tokens = value.split(/\s+/);
+    for (const token of tokens) {
+        // Check for invalid qualifier syntax (e.g., "author::" or "author:")
+        if (token.includes(":")) {
+            const [qualifier, ...valueParts] = token.split(":");
+
+            // Remove leading - or + from qualifier
+            const cleanQualifier = qualifier.replace(/^[-+]/, "");
+
+            // Check if it's a recognized qualifier
+            if (cleanQualifier && !GITHUB_QUALIFIERS.includes(cleanQualifier)) {
+                return {
+                    isValid: false,
+                    error: `Unknown qualifier: ${cleanQualifier}`,
+                };
+            }
+
+            // Check if value is empty (e.g., "author:")
+            const value = valueParts.join(":");
+            if (!value && cleanQualifier) {
+                return {
+                    isValid: false,
+                    error: `Qualifier "${cleanQualifier}" is missing a value`,
+                };
+            }
+        }
+    }
+
+    return { isValid: true };
 }
 
 export function validateFilterName(name: string): ValidationResult {
-  if (!name || !name.trim()) {
-    return {
-      isValid: false,
-      error: "Filter name is required",
-    };
-  }
+    if (!name || !name.trim()) {
+        return {
+            isValid: false,
+            error: "Filter name is required",
+        };
+    }
 
-  if (name.length > VALIDATION.FILTER_NAME_MAX_LENGTH) {
-    return {
-      isValid: false,
-      error: `Filter name must be ${VALIDATION.FILTER_NAME_MAX_LENGTH} characters or less`,
-    };
-  }
+    if (name.length > VALIDATION.FILTER_NAME_MAX_LENGTH) {
+        return {
+            isValid: false,
+            error: `Filter name must be ${VALIDATION.FILTER_NAME_MAX_LENGTH} characters or less`,
+        };
+    }
 
-  return { isValid: true };
+    return { isValid: true };
 }
diff --git a/tsconfig.json b/tsconfig.json
index 3229644..2298e0b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
-  "extends": "./.wxt/tsconfig.json",
-  "compilerOptions": {
-    "useDefineForClassFields": true
-  }
+    "extends": "./.wxt/tsconfig.json",
+    "compilerOptions": {
+        "useDefineForClassFields": true
+    }
 }
diff --git a/wxt.config.ts b/wxt.config.ts
index bc15e2c..5d5e215 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -5,32 +5,32 @@ import tailwindcss from "@tailwindcss/vite";
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
-  srcDir: "src",
-  modules: ["@wxt-dev/module-svelte"],
-  manifest: {
-    name: "Pullscope",
-    description: "Automatically apply custom filters to GitHub Pull Request pages",
-    permissions: ["storage", "contextMenus", "tabs"],
-    icons: {
-      16: "icons/icon-16.png",
-      32: "icons/icon-32.png",
-      48: "icons/icon-48.png",
-      128: "icons/icon-128.png",
+    srcDir: "src",
+    modules: ["@wxt-dev/module-svelte"],
+    manifest: {
+        name: "Pullscope",
+        description: "Automatically apply custom filters to GitHub Pull Request pages",
+        permissions: ["storage", "contextMenus", "tabs"],
+        icons: {
+            16: "icons/icon-16.png",
+            32: "icons/icon-32.png",
+            48: "icons/icon-48.png",
+            128: "icons/icon-128.png",
+        },
+        browser_specific_settings: {
+            gecko: {
+                id: "pullscope@guidodinello.dev",
+                // Required by Firefox for all new extensions. This extension does not collect any user data
+                // @ts-ignore
+                data_collection_permissions: { required: ["none"] },
+            },
+        },
     },
-    browser_specific_settings: {
-      gecko: {
-        id: "pullscope@guidodinello.dev",
-        // Required by Firefox for all new extensions. This extension does not collect any user data
-        // @ts-ignore
-        data_collection_permissions: { required: ["none"] },
-      },
-    },
-  },
-  vite: () => ({
-    plugins: [wasm(), topLevelAwait(), tailwindcss()],
-  }),
+    vite: () => ({
+        plugins: [wasm(), topLevelAwait(), tailwindcss()],
+    }),
 
-  runner: {
-    startUrls: ["https://github.com/facebook/react/pulls"],
-  },
+    runner: {
+        startUrls: ["https://github.com/facebook/react/pulls"],
+    },
 });

From a27962b7351186bef9de644cd8cd2fe73852afa6 Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 01:33:07 -0300
Subject: [PATCH 06/15] build: add Svelte 5 runes to ESLint global
 configuration

---
 eslint.config.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/eslint.config.js b/eslint.config.js
index 67ff890..174b279 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -46,6 +46,13 @@ export default [
                 // WXT globals
                 defineBackground: "readonly",
                 defineContentScript: "readonly",
+                // Svelte 5 runes
+                $state: "readonly",
+                $derived: "readonly",
+                $effect: "readonly",
+                $props: "readonly",
+                $bindable: "readonly",
+                $inspect: "readonly",
             },
         },
         rules: {
@@ -93,6 +100,13 @@ export default [
                 // WXT globals
                 defineBackground: "readonly",
                 defineContentScript: "readonly",
+                // Svelte 5 runes
+                $state: "readonly",
+                $derived: "readonly",
+                $effect: "readonly",
+                $props: "readonly",
+                $bindable: "readonly",
+                $inspect: "readonly",
             },
         },
         rules: {

From cb5dadc2f2f62eb7b2006f3635874942ce11653d Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 01:33:08 -0300
Subject: [PATCH 07/15] build: add Svelte types to TypeScript configuration

---
 tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tsconfig.json b/tsconfig.json
index 2298e0b..4869a47 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
     "extends": "./.wxt/tsconfig.json",
     "compilerOptions": {
+        "types": ["svelte"],
         "useDefineForClassFields": true
     }
 }

From 2623d17e8e5dc73e2bfe973caed330ed066f02f8 Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 01:33:09 -0300
Subject: [PATCH 08/15] style: improve color contrast and add dark mode support
 with WCAG AAA compliance

---
 src/app.css | 166 +++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 137 insertions(+), 29 deletions(-)

diff --git a/src/app.css b/src/app.css
index a9c468e..7f8b4bb 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,41 +4,52 @@
 @plugin "@tailwindcss/forms";
 
 @theme {
-    /* Primary */
-    --color-primary: #0969da;
-    --color-primary-hover: #0550ae;
-    --color-primary-dark: #033d8b;
+    /* Primary - GitHub blue*/
+    --color-primary: light-dark(#0969da, #58a6ff);
+    --color-primary-hover: light-dark(#0550ae, #1f6feb);
+    --color-primary-dark: light-dark(#033d8b, #0969da);
 
-    /* Accent */
-    --color-accent: #8250df;
-    --color-accent-hover: #6639ba;
+    /* Accent - Purple */
+    --color-accent: light-dark(#8250df, #a371f7);
+    --color-accent-hover: light-dark(#6639ba, #8b5cf6);
 
-    /* Semantic colors */
-    --color-success: #1a7f37;
-    --color-success-light: #dafbe1;
-    --color-success-dark: #044f1e;
+    /* Success - Green*/
+    --color-success: light-dark(#1a7f37, #3fb950);
+    --color-success-light: light-dark(#dafbe1, #1b4721);
+    --color-success-dark: light-dark(#044f1e, #56d364);
 
-    --color-error: #d1242f;
-    --color-error-light: #ffebe9;
-    --color-error-dark: #8e1519;
+    /* Error - Red*/
+    --color-error: light-dark(#d1242f, #f85149);
+    --color-error-light: light-dark(#ffebe9, #4c1f1f);
+    --color-error-dark: light-dark(#8e1519, #da3633);
 
-    --color-warning: #bf8700;
-    --color-warning-light: #fff8c5;
-    --color-warning-dark: #7d4e00;
+    /* Warning - Orange/Yellow*/
+    --color-warning: light-dark(#9a6700, #e3b341);
+    --color-warning-light: light-dark(#fff8c5, #3d2f00);
+    --color-warning-dark: light-dark(#7d4e00, #f0b72f);
 
-    --color-info: #0969da;
-    --color-info-light: #ddf4ff;
-    --color-info-dark: #0550ae;
+    /* Info - Blue matching primary theme */
+    --color-info: light-dark(#0969da, #58a6ff);
+    --color-info-light: light-dark(#ddf4ff, #0c2d6b);
+    --color-info-dark: light-dark(#0550ae, #1f6feb);
 
-    /* Neutrals */
+    /* Neutrals - GitHub-inspired with proper contrast */
     --color-bg-primary: light-dark(#ffffff, #0d1117);
     --color-bg-secondary: light-dark(#f6f8fa, #161b22);
     --color-bg-tertiary: light-dark(#eaeef2, #21262d);
-    --color-text-primary: light-dark(#1f2328, #c9d1d9);
-    --color-text-secondary: light-dark(#656d76, #8b949e);
-    --color-text-tertiary: light-dark(#8c959f, #6e7681);
-    --color-border: light-dark(#d0d7de, #30363d);
-    --color-border-light: light-dark(#eaeef2, #21262d);
+
+    /* Text colors with WCAG AAA contrast ratios */
+    --color-text-primary: light-dark(#24292f, #e6edf3);
+    --color-text-secondary: light-dark(#57606a, #8d96a0);
+    --color-text-tertiary: light-dark(#6e7781, #7d8590);
+
+    /* Borders */
+    --color-border: light-dark(#d1d9e0, #30363d);
+    --color-border-light: light-dark(#d8dee4, #21262d);
+
+    /* Button text colors for contrast */
+    --color-btn-text-primary: light-dark(#ffffff, #0d1117);
+    --color-btn-text-secondary: light-dark(#24292f, #e6edf3);
 }
 
 @layer base {
@@ -50,18 +61,115 @@
     :root {
         color-scheme: light dark;
     }
+
+    /* Improve button text contrast */
+    button {
+        font-weight: 500;
+    }
 }
 
 @layer components {
     .filter-badge {
-        @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium;
+        @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold;
     }
 
     .filter-badge-enabled {
-        @apply bg-success-light text-success-dark;
+        /* Light mode: dark text on light bg, Dark mode: light text on dark bg */
+        background-color: light-dark(#dafbe1, #1b4721);
+        color: light-dark(#044f1e, #56d364);
     }
 
     .filter-badge-disabled {
-        @apply bg-bg-tertiary text-text-secondary;
+        background-color: light-dark(#eaeef2, #21262d);
+        color: light-dark(#57606a, #8d96a0);
+    }
+
+    /* Primary button */
+    .btn-primary {
+        background-color: light-dark(#0969da, #238636);
+        color: #ffffff;
+    }
+
+    .btn-primary:hover {
+        background-color: light-dark(#0550ae, #2ea043);
+    }
+
+    .btn-primary:focus-visible {
+        outline: 2px solid light-dark(#0969da, #238636);
+        outline-offset: 2px;
+    }
+
+    /* Secondary button */
+    .btn-secondary {
+        background-color: light-dark(#f6f8fa, #21262d);
+        color: light-dark(#24292f, #e6edf3);
+        border: 1px solid light-dark(#d1d9e0, #30363d);
+    }
+
+    .btn-secondary:hover {
+        background-color: light-dark(#eaeef2, #30363d);
+    }
+
+    /* Danger button */
+    .btn-danger {
+        background-color: light-dark(#d1242f, #da3633);
+        color: #ffffff;
+    }
+
+    .btn-danger:hover {
+        background-color: light-dark(#a40e26, #b62324);
+    }
+
+    /* Success button */
+    .btn-success {
+        background-color: light-dark(#1a7f37, #238636);
+        color: #ffffff;
+    }
+
+    .btn-success:hover {
+        background-color: light-dark(#146c2e, #2ea043);
+    }
+
+    /* Input fields */
+    input[type="text"],
+    input[type="checkbox"],
+    select,
+    textarea {
+        background-color: light-dark(#ffffff, #0d1117);
+        color: light-dark(#24292f, #e6edf3);
+        border-color: light-dark(#d1d9e0, #30363d);
+    }
+
+    input[type="text"]:focus,
+    select:focus,
+    textarea:focus {
+        border-color: light-dark(#0969da, #58a6ff);
+        outline: 2px solid light-dark(#0969da80, #58a6ff40);
+        outline-offset: -1px;
+    }
+
+    /* Toast notifications */
+    .toast-success {
+        background-color: light-dark(#1a7f37, #238636);
+        border-color: light-dark(#044f1e, #2ea043);
+        color: #ffffff;
+    }
+
+    .toast-error {
+        background-color: light-dark(#d1242f, #da3633);
+        border-color: light-dark(#8e1519, #f85149);
+        color: #ffffff;
+    }
+
+    .toast-warning {
+        background-color: light-dark(#9a6700, #9a6700);
+        border-color: light-dark(#7d4e00, #bb8800);
+        color: #ffffff;
+    }
+
+    .toast-info {
+        background-color: light-dark(#0969da, #0969da);
+        border-color: light-dark(#0550ae, #1f6feb);
+        color: #ffffff;
     }
 }

From 402c925591cb4164bb520facaf58453878385c7e Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 01:33:10 -0300
Subject: [PATCH 09/15] feat: add useFilters composition for centralized filter
 state management

---
 .../compositions/filter-management.svelte.ts  | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/lib/compositions/filter-management.svelte.ts

diff --git a/src/lib/compositions/filter-management.svelte.ts b/src/lib/compositions/filter-management.svelte.ts
new file mode 100644
index 0000000..67841ea
--- /dev/null
+++ b/src/lib/compositions/filter-management.svelte.ts
@@ -0,0 +1,76 @@
+import { onMount, onDestroy } from "svelte";
+import type { PRFilter } from "@/lib/types/filter";
+import { filterStore } from "@/lib/stores/filters";
+import { broadcastFilterToggle } from "@/lib/utils/messaging";
+import { logger } from "@/lib/utils/logger";
+
+class FilterManager {
+    filters = $state<PRFilter[]>([]);
+    isLoading = $state(false);
+    error = $state("");
+    private unsubscribe: (() => void) | null = null;
+
+    async init() {
+        this.unsubscribe = filterStore.subscribe((state) => {
+            this.filters = state.filters;
+            this.isLoading = state.isLoading;
+            this.error = state.error || "";
+        });
+
+        await filterStore.init();
+    }
+
+    destroy() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+        filterStore.destroy();
+    }
+
+    async toggleFilter(id: string) {
+        logger.debug("toggleFilter", id);
+
+        const filter = this.filters.find((f) => f.id === id);
+        if (!filter) {
+            logger.error("Filter not found:", id);
+            return false;
+        }
+
+        const success = await filterStore.toggle(id);
+        if (!success) {
+            logger.error("Failed to toggle filter:", id);
+            return false;
+        }
+
+        const toggledFilter = {
+            ...filter,
+            enabled: !filter.enabled,
+        } satisfies PRFilter;
+
+        broadcastFilterToggle(toggledFilter);
+        return true;
+    }
+
+    async deleteFilter(id: string) {
+        return await filterStore.delete(id);
+    }
+
+    retry() {
+        filterStore.clearError();
+        filterStore.init();
+    }
+}
+
+export function useFilters() {
+    const manager = new FilterManager();
+
+    onMount(async () => {
+        await manager.init();
+    });
+
+    onDestroy(() => {
+        manager.destroy();
+    });
+
+    return manager;
+}

From de722a645f40cfa2eea7e0eabc9f0e0f6415b7c3 Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 01:33:12 -0300
Subject: [PATCH 10/15] refactor: migrate Options component to use useFilters
 composition

---
 src/entrypoints/options/Options.svelte | 81 +++++---------------------
 1 file changed, 15 insertions(+), 66 deletions(-)

diff --git a/src/entrypoints/options/Options.svelte b/src/entrypoints/options/Options.svelte
index eb91300..b2ae529 100644
--- a/src/entrypoints/options/Options.svelte
+++ b/src/entrypoints/options/Options.svelte
@@ -1,68 +1,22 @@
 <script lang="ts">
-    import { onMount, onDestroy } from "svelte";
     import FilterEditor from "@/lib/components/FilterEditor.svelte";
     import ErrorDisplay from "@/lib/components/ErrorDisplay.svelte";
     import Icon from "@/lib/components/Icon.svelte";
     import type { PRFilter } from "@/lib/types/filter";
-    import { filterStore } from "@/lib/stores/filters";
-    import { broadcastFilterToggle } from "@/lib/utils/messaging";
+    import { useFilters } from "@/lib/compositions/filter-management.svelte";
     import { cn } from "@/lib/utils/cn";
     import { logger } from "@/lib/utils/logger";
 
-    // Component state
+    const filterManager = useFilters();
+
+    // Component-specific state
     let editingFilter = $state<PRFilter | null>(null);
     let showAddForm = $state(false);
-    let filters = $state<PRFilter[]>([]);
-    let isLoading = $state(false);
-    let error = $state("");
-    let unsubscribe: (() => void) | null = null;
-
-    // Load filters on mount
-    onMount(async () => {
-        unsubscribe = filterStore.subscribe((state) => {
-            filters = state.filters;
-            isLoading = state.isLoading;
-            error = state.error || "";
-        });
-
-        await filterStore.init();
-    });
-
-    onDestroy(() => {
-        if (unsubscribe) {
-            unsubscribe();
-        }
-        filterStore.destroy();
-    });
-
-    async function handleToggleFilter(id: string) {
-        // Find the filter BEFORE toggling to get current state
-        const filter = filters.find((f) => f.id === id);
-        if (!filter) {
-            logger.error("Filter not found:", id);
-            return;
-        }
-
-        const success = await filterStore.toggle(id);
-        if (!success) {
-            logger.error("Failed to toggle filter:", id);
-            return;
-        }
-
-        // Create updated filter with toggled state
-        const toggledFilter = {
-            ...filter,
-            enabled: !filter.enabled,
-        } satisfies PRFilter;
-
-        // Broadcast to all GitHub PR tabs with NEW state
-        broadcastFilterToggle(toggledFilter);
-    }
 
     async function handleDeleteFilter(id: string) {
         if (!confirm("Are you sure you want to delete this filter?")) return;
 
-        const success = await filterStore.delete(id);
+        const success = await filterManager.deleteFilter(id);
         if (!success) {
             logger.error("Failed to delete filter:", id);
         }
@@ -89,11 +43,6 @@
         editingFilter = null;
         showAddForm = false;
     }
-
-    function handleRetry() {
-        filterStore.clearError();
-        filterStore.init();
-    }
 </script>
 
 <main class="mx-auto max-w-2xl p-4">
@@ -102,7 +51,7 @@
         <img src="/icons/icon-48.png" alt="Logo" class="size-10" />
     </div>
 
-    <ErrorDisplay message={error} onRetry={handleRetry} />
+    <ErrorDisplay message={filterManager.error} onRetry={() => filterManager.retry()} />
 
     <div class="bg-bg-primary mb-6 rounded-lg p-6 shadow">
         <p class="text-text-primary">
@@ -117,7 +66,7 @@
         </p>
     </div>
 
-    {#if isLoading}
+    {#if filterManager.isLoading}
         <div class="my-8 flex justify-center">
             <div
                 class="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"
@@ -127,7 +76,7 @@
         {#if !editingFilter && !showAddForm}
             <div class="mb-6">
                 <button
-                    class="bg-primary hover:bg-primary-hover focus:ring-primary flex items-center gap-2 rounded px-4 py-2 text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+                    class="bg-primary hover:bg-primary-hover focus:ring-primary flex items-center gap-2 rounded px-4 py-2 font-medium text-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
                     onclick={handleAddNew}
                 >
                     <Icon name="plus" class="size-5" />
@@ -152,14 +101,14 @@
             </div>
         {/if}
 
-        {#if filters.length === 0 && !showAddForm}
+        {#if filterManager.filters.length === 0 && !showAddForm}
             <div class="bg-bg-tertiary rounded-lg p-8 text-center">
                 <p class="text-text-secondary">You haven't added any filters yet.</p>
             </div>
         {:else}
             <h2 class="mb-4 text-xl font-semibold">Your Filters</h2>
             <div class="space-y-4">
-                {#each filters as filter (filter.id)}
+                {#each filterManager.filters as filter (filter.id)}
                     <div
                         class="bg-bg-primary flex items-center justify-between rounded-lg p-4 shadow"
                     >
@@ -168,7 +117,7 @@
                                 <span class="font-medium">{filter.name}</span>
                                 <span
                                     class={cn(
-                                        "ml-2 rounded px-2 py-0.5 text-xs font-medium",
+                                        "ml-2 rounded px-2 py-0.5 text-xs font-semibold",
                                         filter.enabled
                                             ? "filter-badge-enabled"
                                             : "filter-badge-disabled"
@@ -187,13 +136,13 @@
                         <div class="flex gap-1">
                             <button
                                 class={cn(
-                                    "rounded p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+                                    "rounded p-2 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2",
                                     filter.enabled
-                                        ? "text-success hover:bg-success-light focus:ring-success"
-                                        : "text-text-tertiary hover:bg-bg-tertiary focus:ring-text-secondary"
+                                        ? "text-success hover:bg-success-light focus:ring-success hover:scale-110"
+                                        : "text-text-tertiary hover:bg-bg-tertiary focus:ring-text-secondary opacity-60 hover:opacity-100"
                                 )}
                                 title={filter.enabled ? "Disable filter" : "Enable filter"}
-                                onclick={() => handleToggleFilter(filter.id)}
+                                onclick={() => filterManager.toggleFilter(filter.id)}
                                 aria-label={filter.enabled
                                     ? `Disable ${filter.name}`
                                     : `Enable ${filter.name}`}

From 87f116d922c0a5e3916c813a74e32861b560468d Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 01:33:14 -0300
Subject: [PATCH 11/15] refactor: migrate Popup component to use useFilters
 composition

---
 src/entrypoints/popup/Popup.svelte | 73 ++++++------------------------
 1 file changed, 13 insertions(+), 60 deletions(-)

diff --git a/src/entrypoints/popup/Popup.svelte b/src/entrypoints/popup/Popup.svelte
index 29b2d92..bd2b5bb 100644
--- a/src/entrypoints/popup/Popup.svelte
+++ b/src/entrypoints/popup/Popup.svelte
@@ -1,57 +1,8 @@
 <script lang="ts">
-    import { onMount, onDestroy } from "svelte";
-    import type { PRFilter } from "@/lib/types/filter";
-    import { filterStore } from "@/lib/stores/filters";
-    import { broadcastFilterToggle } from "@/lib/utils/messaging";
+    import { useFilters } from "@/lib/compositions/filter-management.svelte";
     import { cn } from "@/lib/utils/cn";
-    import { logger } from "@/lib/utils/logger";
 
-    // Component state
-    let filters = $state<PRFilter[]>([]);
-    let isLoading = $state(false);
-    let unsubscribe: (() => void) | null = null;
-
-    onMount(async () => {
-        unsubscribe = filterStore.subscribe((state) => {
-            filters = state.filters;
-            isLoading = state.isLoading;
-        });
-
-        await filterStore.init();
-    });
-
-    onDestroy(() => {
-        if (unsubscribe) {
-            unsubscribe();
-        }
-        filterStore.destroy();
-    });
-
-    async function handleToggleFilter(id: string) {
-        logger.debug("handleToggleFilter", id);
-
-        // Find the filter BEFORE toggling to get current state
-        const filter = filters.find((f) => f.id === id);
-        if (!filter) {
-            logger.error("Filter not found:", id);
-            return;
-        }
-
-        const success = await filterStore.toggle(id);
-        if (!success) {
-            logger.error("Failed to toggle filter:", id);
-            return;
-        }
-
-        // Create updated filter with toggled state
-        const toggledFilter = {
-            ...filter,
-            enabled: !filter.enabled,
-        } satisfies PRFilter;
-
-        // Broadcast to all GitHub PR tabs with NEW state
-        broadcastFilterToggle(toggledFilter);
-    }
+    const filterManager = useFilters();
 
     function openOptions() {
         browser.runtime.openOptionsPage();
@@ -64,19 +15,19 @@
         <img src="/icons/icon-32.png" alt="Logo" class="size-6" />
     </div>
 
-    {#if isLoading}
+    {#if filterManager.isLoading}
         <div class="my-4 flex justify-center">
             <div
                 class="border-primary h-5 w-5 animate-spin rounded-full border-2 border-t-transparent"
             ></div>
         </div>
-    {:else if filters.length === 0}
+    {:else if filterManager.filters.length === 0}
         <div class="py-4 text-center">
             <p class="text-text-secondary mb-2">No filters configured yet</p>
         </div>
     {:else}
         <div class="mb-4 max-h-64 overflow-y-auto">
-            {#each filters as filter (filter.id)}
+            {#each filterManager.filters as filter (filter.id)}
                 <div class="border-border-light flex items-center justify-between border-b py-2">
                     <div>
                         <span class="text-text-primary text-sm font-medium">{filter.name}</span>
@@ -87,10 +38,12 @@
 
                     <button
                         class={cn(
-                            "focus:ring-primary relative me-2 h-5 w-10 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
-                            filter.enabled ? "bg-success" : "bg-text-tertiary"
+                            "focus:ring-primary relative me-2 h-5 w-10 rounded-full shadow-inner transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2",
+                            filter.enabled
+                                ? "bg-success hover:bg-success-dark focus:ring-success"
+                                : "bg-text-tertiary hover:bg-text-secondary focus:ring-text-secondary"
                         )}
-                        onclick={() => handleToggleFilter(filter.id)}
+                        onclick={() => filterManager.toggleFilter(filter.id)}
                         aria-label={filter.enabled
                             ? `Disable ${filter.name}`
                             : `Enable ${filter.name}`}
@@ -99,8 +52,8 @@
                     >
                         <span
                             class={cn(
-                                "absolute left-0.5 top-0.5 size-4 transform rounded-full bg-white shadow transition-transform",
-                                filter.enabled && "translate-x-5"
+                                "absolute left-0.5 top-0.5 size-4 transform rounded-full bg-white shadow-md transition-all duration-200 ease-in-out",
+                                filter.enabled && "translate-x-5 scale-105"
                             )}
                         ></span>
                     </button>
@@ -111,7 +64,7 @@
 
     <div class="mt-4">
         <button
-            class="bg-primary hover:bg-primary-hover focus:ring-primary w-full rounded px-3 py-2 text-sm text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+            class="bg-primary hover:bg-primary-hover focus:ring-primary w-full rounded px-3 py-2 text-sm font-medium text-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
             onclick={openOptions}
             aria-label="Open filter management page"
         >

From c26cb111bf9c0caf8def58b9f0f2f81150d4a915 Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 01:33:15 -0300
Subject: [PATCH 12/15] style: improve button contrast and add disabled state
 styling

---
 src/lib/components/FilterEditor.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/FilterEditor.svelte b/src/lib/components/FilterEditor.svelte
index 36a5e12..4b17d69 100644
--- a/src/lib/components/FilterEditor.svelte
+++ b/src/lib/components/FilterEditor.svelte
@@ -169,7 +169,7 @@
             </button>
             <button
                 type="submit"
-                class="bg-primary hover:bg-primary-hover focus:ring-primary rounded px-4 py-2 text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2"
+                class="bg-primary hover:bg-primary-hover focus:ring-primary rounded px-4 py-2 font-medium text-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 disabled={isSaving}
             >
                 {isSaving ? "Saving..." : filter ? "Update Filter" : "Add Filter"}

From 9ba616cb4ea360e005409ee50df7bfad97c96e5c Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 01:33:17 -0300
Subject: [PATCH 13/15] style: refactor Toast to use semantic CSS classes for
 better theming

---
 src/lib/components/Toast.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Toast.svelte b/src/lib/components/Toast.svelte
index 04f3ced..e76ce10 100644
--- a/src/lib/components/Toast.svelte
+++ b/src/lib/components/Toast.svelte
@@ -35,17 +35,17 @@
     };
 
     const typeStyles = {
-        info: "bg-info border-info-dark",
-        success: "bg-success border-success-dark",
-        error: "bg-error border-error-dark",
-        warning: "bg-warning border-warning-dark",
+        info: "toast-info",
+        success: "toast-success",
+        error: "toast-error",
+        warning: "toast-warning",
     } as const satisfies Record<ToastType, string>;
 </script>
 
 {#if visible}
     <div
         class={cn(
-            "animate-slide-in fixed bottom-4 right-4 z-50 max-w-md rounded-lg border-l-4 px-4 py-3 text-white shadow-lg",
+            "animate-slide-in fixed bottom-4 right-4 z-50 max-w-md rounded-lg border-l-4 px-4 py-3 shadow-lg",
             typeStyles[type]
         )}
         role="status"

From 1ca529e83ddc495ef244eb871c31792a3aba2c9a Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 01:33:19 -0300
Subject: [PATCH 14/15] fix: use INFO toast type when disabling filters instead
 of SUCCESS

---
 src/entrypoints/content/GithubPRFilter.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/entrypoints/content/GithubPRFilter.svelte b/src/entrypoints/content/GithubPRFilter.svelte
index af440fa..4402d1c 100644
--- a/src/entrypoints/content/GithubPRFilter.svelte
+++ b/src/entrypoints/content/GithubPRFilter.svelte
@@ -65,7 +65,7 @@
 
             if (success) {
                 toastMessage = `Filter ${filter.enabled ? "enabled" : "disabled"}: ${filter.name}`;
-                toastType = TOAST_TYPES.SUCCESS;
+                toastType = filter.enabled ? TOAST_TYPES.SUCCESS : TOAST_TYPES.INFO;
             }
         } catch (error) {
             logger.error("Error toggling filter:", error);

From ac7bbaca0824c07dd37bdb0fb2c493952e339067 Mon Sep 17 00:00:00 2001
From: Guido Dinello <guido.dinello@gmail.com>
Date: Tue, 18 Nov 2025 01:36:07 -0300
Subject: [PATCH 15/15] fix: import `ToastType` as type

---
 src/entrypoints/content/GithubPRFilter.svelte | 2 +-
 src/lib/components/Toast.svelte               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/entrypoints/content/GithubPRFilter.svelte b/src/entrypoints/content/GithubPRFilter.svelte
index 4402d1c..a4764b9 100644
--- a/src/entrypoints/content/GithubPRFilter.svelte
+++ b/src/entrypoints/content/GithubPRFilter.svelte
@@ -13,7 +13,7 @@
         TOAST_DURATION,
     } from "@/lib/constants";
     import Toast from "@/lib/components/Toast.svelte";
-    import { TOAST_TYPES, ToastType } from "@/lib/types/toast";
+    import { TOAST_TYPES, type ToastType } from "@/lib/types/toast";
 
     // Component state
     let _filtersApplied = $state(false);
diff --git a/src/lib/components/Toast.svelte b/src/lib/components/Toast.svelte
index e76ce10..bc7003f 100644
--- a/src/lib/components/Toast.svelte
+++ b/src/lib/components/Toast.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { cn } from "@/lib/utils/cn";
-    import { TOAST_TYPES, ToastType } from "@/lib/types/toast";
     import { TOAST_DURATION } from "@/lib/constants";
+    import { TOAST_TYPES, type ToastType } from "@/lib/types/toast";
 
     let {
         message,