Fix/spa navigation (#4)

* fix: support SPA navigation by matching all GitHub repo pages

* refactor: remove redundant Promise return type annotations

* style: simplify mount calls and arrow function syntax

Author: guidodinello

src/entrypoints/content.ts

@@ -2,20 +2,17 @@ import "../app.css";
 import { mount } from "svelte";
 import GithubPrFilter from "@/entrypoints/content/GithubPRFilter.svelte";
 import { logger } from "@/lib/utils/logger";
+import { GITHUB_PATTERNS } from "@/lib/constants";
 
 export default defineContentScript({
-    matches: ["https://github.com/*/*/pulls*"],
+    matches: [GITHUB_PATTERNS.REPO_PAGE_PATTERN],
     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);
 
-        // Mount the Svelte component
-        mount(GithubPrFilter, {
-            target: container,
-        });
+        mount(GithubPrFilter, { target: container });
     },
 });

src/entrypoints/options/options.ts

@@ -8,6 +8,4 @@ if (!appElement) {
     throw new Error("Failed to find app element. Cannot mount options page.");
 }
 
-mount(Options, {
-    target: appElement,
-});
+mount(Options, { target: appElement });

src/entrypoints/popup/Popup.svelte

@@ -4,9 +4,7 @@
 
     const filterManager = useFilters();
 
-    function openOptions() {
-        browser.runtime.openOptionsPage();
-    }
+    const openOptions = () => browser.runtime.openOptionsPage();
 </script>
 
 <main class="bg-bg-primary w-72 p-4">

src/entrypoints/popup/popup.ts

@@ -8,6 +8,4 @@ if (!appElement) {
     throw new Error("Failed to find app element. Cannot mount popup.");
 }
 
-mount(Popup, {
-    target: appElement,
-});
+mount(Popup, { target: appElement });

src/lib/constants.ts

@@ -1,18 +1,26 @@
 export const STORAGE_KEYS = {
-    PR_FILTERS: "prFilters",
+    PR_FILTERS: "pr_filters",
 } as const;
 
 export const GITHUB_PATTERNS = {
+    // Used by isGitHubPRPage() for PR page validation
     PR_PAGE_REGEX: /^https:\/\/github\.com\/[^/]+\/[^/]+\/pulls(\/.*|\?.*)?$/,
+
+    // Used by context menu in background.ts so it only shows on PR pages
     PR_PAGE_QUERY: "*://github.com/*/*/pulls*",
+
+    // Used by content script, matches all github pages to avoid issues with SPA navigation
+    REPO_PAGE_PATTERN: "https://github.com/*/*",
+
+    // Used in background.ts for simple URL checks
     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: "apply_filters",
+    APPLY_FILTERS_NOW: "apply_filters_now",
+    TOGGLE_FILTER: "toggle_filter",
 } as const;
 
 export const TOAST_DURATION = {

src/lib/storage.ts

@@ -2,7 +2,7 @@ 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> {
+export async function saveFilters(filters: PRFilter[]) {
     await browser.storage.sync.set({ [STORAGE_KEYS.PR_FILTERS]: filters });
 }
 
@@ -13,7 +13,7 @@ export async function getFilters(): Promise<PRFilter[]> {
     return data[STORAGE_KEYS.PR_FILTERS] || [];
 }
 
-export async function addFilter(filter: NewPRFilter): Promise<PRFilter[]> {
+export async function addFilter(filter: NewPRFilter) {
     logger.debug("addFilter", filter);
 
     const updatedFilters = [
@@ -29,10 +29,7 @@ export async function addFilter(filter: NewPRFilter): Promise<PRFilter[]> {
     return updatedFilters;
 }
 
-/**
- * Update an existing filter
- */
-export async function updateFilter(filter: PRFilter): Promise<PRFilter[]> {
+export async function updateFilter(filter: PRFilter) {
     logger.debug("updateFilter", filter);
 
     const filters = await getFilters();
@@ -44,14 +41,14 @@ export async function updateFilter(filter: PRFilter): Promise<PRFilter[]> {
     return updatedFilters;
 }
 
-export async function deleteFilter(id: string): Promise<PRFilter[]> {
+export async function deleteFilter(id: string) {
     const updatedFilters = (await getFilters()).filter((f) => f.id !== id);
 
     await saveFilters(updatedFilters);
     return updatedFilters;
 }
 
-export async function toggleFilter(id: string): Promise<PRFilter[]> {
+export async function toggleFilter(id: string) {
     logger.debug("toggleFilter", id);
 
     const updatedFilters = (await getFilters()).map((f) =>