Update screenshots and chores

.github/workflows/css-selectors.yaml

@@ -2,7 +2,7 @@ name: CSS Selectors
 
 on:
     pull_request:
-        branches: [main]
+        branches: [main, dev]
         types: [opened, reopened, synchronize, ready_for_review]
         paths:
             - 'src/**'

.github/workflows/prettier-check.yaml

@@ -2,7 +2,7 @@ name: Prettier Check
 
 on:
     pull_request:
-        branches: [main]
+        branches: [main, dev]
         types: [opened, reopened, synchronize, ready_for_review]
 
 jobs:

package.json

@@ -44,21 +44,21 @@
     },
     "homepage": "https://github.com/Seismix/royalrefresh#readme",
     "devDependencies": {
-        "@playwright/test": "^1.56.1",
-        "@tsconfig/svelte": "^5.0.5",
+        "@playwright/test": "^1.57.0",
+        "@tsconfig/svelte": "^5.0.6",
         "@types/firefox-webext-browser": "^143.0.0",
-        "@types/node": "^24.9.2",
+        "@types/node": "^25.0.9",
         "@wxt-dev/module-svelte": "^2.0.4",
-        "prettier": "^3.6.2",
-        "prettier-plugin-svelte": "^3.4.0",
-        "svelte": "^5.43.0",
-        "svelte-check": "^4.3.3",
+        "prettier": "^3.8.0",
+        "prettier-plugin-svelte": "^3.4.1",
+        "svelte": "^5.47.1",
+        "svelte-check": "^4.3.5",
         "tslib": "^2.8.1",
         "typescript": "^5.9.3",
-        "web-ext": "^9.1.0",
-        "wxt": "^0.20.11"
+        "web-ext": "^9.2.0",
+        "wxt": "^0.20.13"
     },
     "dependencies": {
-        "dompurify": "^3.3.0"
+        "dompurify": "^3.3.1"
     }
 }

src/components/extension/ToggleButton.svelte

@@ -47,9 +47,9 @@
         }
     }
 
-    const buttonText = type === "recap" ? "Recap" : "Blurb"
-    const iconName = type === "recap" ? "book" : "info-circle"
-    const buttonId = type === "recap" ? "recapButton" : "blurbButton"
+    let buttonText = $derived(type === "recap" ? "Recap" : "Blurb")
+    let iconName = $derived(type === "recap" ? "book" : "info-circle")
+    let buttonId = $derived(type === "recap" ? "recapButton" : "blurbButton")
 </script>
 
 <button

src/components/icons/Icon.svelte

@@ -8,7 +8,9 @@
     }
 
     let { variant = "default", path, size = 16 }: Props = $props()
-    const variantClass = variant !== "default" ? `variant-${variant}` : ""
+    let variantClass = $derived(
+        variant !== "default" ? `variant-${variant}` : "",
+    )
 </script>
 
 <div class="icon-wrapper">
@@ -24,5 +26,5 @@
 </div>
 
 <style>
-    @import "~/lib/styles/icon-button.css";
+    @import "~/lib/styles/icon.css";
 </style>

src/lib/styles/icon-button.css

@@ -20,49 +20,7 @@
     outline-offset: 2px;
 }
 
-/* Icon wrapper for non-interactive icons */
-.icon-wrapper {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-
-/* Shared icon styles */
-.icon {
-    display: block;
-    color: var(--color-text);
-    transition: color 0.2s;
-    width: var(--icon-size-base);
-    height: var(--icon-size-base);
-}
-
-/* Variant colors - apply to icon elements */
-.icon.variant-primary {
-    color: var(--color-primary);
-}
-
-.icon.variant-success {
-    color: var(--color-success);
-}
-
-.icon.variant-error {
-    color: var(--color-error);
-}
-
-.icon.variant-warning {
-    color: var(--color-warning);
-}
-
-.icon.variant-muted {
-    color: var(--color-text-muted);
-}
-
 @media (prefers-color-scheme: dark) {
-    .icon {
-        color: #ffffff;
-    }
-
     .icon-button:hover {
         background-color: rgba(255, 255, 255, 0.1);
     }
@@ -77,9 +35,4 @@
         min-width: var(--touch-target-min);
         min-height: var(--touch-target-min);
     }
-
-    .icon {
-        width: var(--icon-size-touch);
-        height: var(--icon-size-touch);
-    }
 }

src/lib/styles/icon.css

@@ -0,0 +1,53 @@
+/* Icon wrapper for non-interactive icons */
+.icon-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+/* Shared icon styles */
+.icon {
+    display: block;
+    color: var(--color-text);
+    transition: color 0.2s;
+    width: var(--icon-size-base);
+    height: var(--icon-size-base);
+}
+
+/* Variant colors - apply to icon elements */
+.icon.variant-primary {
+    color: var(--color-primary);
+}
+
+.icon.variant-success {
+    color: var(--color-success);
+}
+
+.icon.variant-error {
+    color: var(--color-error);
+}
+
+.icon.variant-warning {
+    color: var(--color-warning);
+}
+
+.icon.variant-muted {
+    color: var(--color-text-muted);
+}
+
+@media (prefers-color-scheme: dark) {
+    .icon {
+        color: #ffffff;
+    }
+
+    /* Variants remain unchanged in dark mode - they use CSS variables */
+}
+
+/* Mobile touch target improvements */
+@media (hover: none) and (pointer: coarse) {
+    .icon {
+        width: var(--icon-size-touch);
+        height: var(--icon-size-touch);
+    }
+}