chore(tests): Extend test workflows and bug fixes for v0.3.2

.cursor/commands/commit.md

@@ -0,0 +1,39 @@
+---
+description: AGENT STEPS TO COMMIT CHANGES
+---
+
+Commit the current changes following Conventional Commits specification.
+
+## Actions
+
+1. Check git status to see what files have changed
+2. Analyze the changes to determine:
+   - Type: feat, fix, docs, style, refactor, perf, test, chore, ci, build
+   - Scope: ui, storage, services, notifications, background, content, popup, hooks, managers, docs, build, workflows
+   - Subject: concise description of the change
+3. Check if changes contain breaking changes (API changes, signature changes, etc.)
+4. Generate commit message in format: `<type>(<scope>): <subject>`
+5. Add `!` after scope if breaking change detected
+6. Include body if change needs explanation (ensure each body line is ≤100 characters)
+7. Execute: `git add -A`
+8. Execute: `git commit -m "<message>"`
+
+## Rules
+
+- Use lowercase for type and scope
+- Subject should be imperative mood, no period at end
+- Maximum 72 characters for subject line
+- Maximum 100 characters per line in commit body (wrap long lines with proper indentation)
+- If breaking change, add `!` after scope or include `BREAKING CHANGE:` in footer
+- Scope is optional but recommended
+
+## Linting, testing and formatting
+
+- Before committing execute linting, testing and formatting checks:
+  - `npm run lint` or `npm run lint:fix`
+  - `npm run format:check` or `npm run format`
+  - `npm run test:e2e`
+
+## CRITICAL
+
+- DO NOT EXCEED THE CHARACTER LIMIT

.cursor/commands/create-pr.md

@@ -0,0 +1,40 @@
+---
+description: CREATE PULL REQUEST
+---
+
+Analyze current changes and create a GitHub PR with appropriate description and labels.
+
+## Actions
+
+1. Check current branch name
+2. Get git diff to analyze changes
+3. Determine PR type from changes:
+   - `type:feature` - New functionality
+   - `type:bugfix` - Bug fixes
+   - `type:breaking` - Breaking changes
+   - `type:documentation` - Docs only
+   - `type:refactor` - Code refactoring
+   - `type:performance` - Performance improvements
+   - `type:chore` - Maintenance
+4. Determine area labels from changed files:
+   - `area:ui`, `area:storage`, `area:services`, `area:notifications`, `area:background`, `area:content`, `area:popup`, `area:hooks`, `area:managers`, `area:docs`, `area:build`, `area:workflows`
+5. Generate PR description with:
+   - Summary of changes
+   - List of modified files
+   - Breaking changes (if any)
+   - Testing notes
+6. Create PR using GitHub CLI or API:
+   - Title: Follow conventional commit format
+   - Body: Generated description
+   - Labels: Type and area labels
+   - Base branch: master (or development for ongoing work)
+7. Output PR URL
+
+## Rules
+
+- PR title should follow conventional commit format
+- Include clear description of what changed and why
+- List breaking changes prominently if present
+- Add appropriate labels for changelog generation
+- Set base branch to `master` for releases, `development` for ongoing work
+- Ensure CODEOWNERS (@vertefra, @emypeeler) are notified for review

components/ui/Button.tsx

@@ -1,4 +1,4 @@
-import { commonSpacing, spacing, textSize } from "../../design-system"
+import { commonSpacing, iconSize, spacing, textSize } from "../../design-system"
 
 type ButtonProps = {
   children: React.ReactNode
@@ -72,7 +72,11 @@ const Button = ({
       onClick={handleClick}
       disabled={disabled}>
       {icon && (
-        <img src={icon} alt="icon" style={{ width: "20px", height: "20px" }} />
+        <img
+          src={icon}
+          alt="icon"
+          style={{ width: iconSize.medium, height: iconSize.medium }}
+        />
       )}
       {children}
     </button>

components/ui/Header.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import { commonSpacing, spacing } from "../../design-system"
+import { commonSpacing, iconSize, layout, spacing } from "../../design-system"
 
 type HeaderProps = {
   onBack?: () => void
@@ -11,9 +11,7 @@ type HeaderProps = {
 }
 
 const headerStyle: React.CSSProperties = {
-  display: "grid",
-  gridTemplateColumns: "1fr 1fr 1fr",
-  alignItems: "center",
+  ...layout.gridThreeColumn,
   marginBottom: commonSpacing.itemMargin
 }
 
@@ -123,7 +121,7 @@ const Header = ({
               <img
                 src={centerIcon}
                 alt={centerIconAlt || "icon"}
-                style={{ width: "20px", height: "20px" }}
+                style={{ width: iconSize.medium, height: iconSize.medium }}
               />
             ) : (
               centerIcon

components/ui/PauseMenu.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import { spacing, textSize } from "../../design-system"
+import { layout, spacing, textSize, typography } from "../../design-system"
 
 export type PauseDuration = "close" | "30s" | "1hour" | "1day"
 
@@ -28,17 +28,14 @@ const menuStyle: React.CSSProperties = {
   padding: spacing.lg,
   minWidth: "280px",
   boxShadow: "0 4px 24px rgba(0, 0, 0, 0.15)",
-  display: "flex",
-  flexDirection: "column",
-  gap: spacing.md
+  ...layout.actionsContainer
 }
 
 const titleStyle: React.CSSProperties = {
-  fontSize: textSize.xl,
+  ...typography.title,
   fontWeight: "600",
   margin: 0,
-  color: "#1a1a1a",
-  textAlign: "center"
+  color: "#1a1a1a"
 }
 
 const optionsStyle: React.CSSProperties = {
@@ -47,24 +44,17 @@ const optionsStyle: React.CSSProperties = {
   gap: spacing.sm
 }
 
-const optionButtonStyle: React.CSSProperties = {
+const cancelButtonStyle: React.CSSProperties = {
   padding: `${spacing.md} ${spacing.lg}`,
-  backgroundColor: "#f5f5f5",
-  color: "#1a1a1a",
+  backgroundColor: "transparent",
+  color: "#666666",
   border: "1px solid #e0e0e0",
   borderRadius: "8px",
   fontSize: textSize.md,
   cursor: "pointer",
-  textAlign: "left",
-  transition: "all 0.2s ease",
-  fontFamily: "inherit"
-}
-
-const cancelButtonStyle: React.CSSProperties = {
-  ...optionButtonStyle,
-  backgroundColor: "transparent",
-  color: "#666666",
   textAlign: "center",
+  transition: "all 0.2s ease",
+  fontFamily: "inherit",
   marginTop: spacing.sm
 }
 
@@ -82,56 +72,72 @@ const PauseMenu = ({ onSelect, onCancel }: PauseMenuProps) => {
         <h3 style={titleStyle}>Pause notifications?</h3>
         <div style={optionsStyle}>
           <button
-            style={optionButtonStyle}
+            className="option-button"
+            style={{
+              backgroundColor: "#f5f5f5",
+              color: "#1a1a1a",
+              border: "1px solid #e0e0e0",
+              textAlign: "left"
+            }}
             onClick={() => handleSelect("close")}
             onMouseEnter={(e) => {
               e.currentTarget.style.backgroundColor = "#e8e8e8"
-              e.currentTarget.style.transform = "translateY(-1px)"
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.backgroundColor = "#f5f5f5"
-              e.currentTarget.style.transform = "translateY(0)"
             }}>
             Close for now
           </button>
           {isDebugMode && (
             <button
-              style={optionButtonStyle}
+              className="option-button"
+              style={{
+                backgroundColor: "#f5f5f5",
+                color: "#1a1a1a",
+                border: "1px solid #e0e0e0",
+                textAlign: "left"
+              }}
               onClick={() => handleSelect("30s")}
               onMouseEnter={(e) => {
                 e.currentTarget.style.backgroundColor = "#e8e8e8"
-                e.currentTarget.style.transform = "translateY(-1px)"
               }}
               onMouseLeave={(e) => {
                 e.currentTarget.style.backgroundColor = "#f5f5f5"
-                e.currentTarget.style.transform = "translateY(0)"
               }}>
               🐛 Pause for 30 seconds (debug)
             </button>
           )}
           <button
-            style={optionButtonStyle}
+            className="option-button"
+            style={{
+              backgroundColor: "#f5f5f5",
+              color: "#1a1a1a",
+              border: "1px solid #e0e0e0",
+              textAlign: "left"
+            }}
             onClick={() => handleSelect("1hour")}
             onMouseEnter={(e) => {
               e.currentTarget.style.backgroundColor = "#e8e8e8"
-              e.currentTarget.style.transform = "translateY(-1px)"
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.backgroundColor = "#f5f5f5"
-              e.currentTarget.style.transform = "translateY(0)"
             }}>
             Pause for 1 hour
           </button>
           <button
-            style={optionButtonStyle}
+            className="option-button"
+            style={{
+              backgroundColor: "#f5f5f5",
+              color: "#1a1a1a",
+              border: "1px solid #e0e0e0",
+              textAlign: "left"
+            }}
             onClick={() => handleSelect("1day")}
             onMouseEnter={(e) => {
               e.currentTarget.style.backgroundColor = "#e8e8e8"
-              e.currentTarget.style.transform = "translateY(-1px)"
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.backgroundColor = "#f5f5f5"
-              e.currentTarget.style.transform = "translateY(0)"
             }}>
             Pause for 1 day
           </button>

components/ui/PrivacyBadge.tsx

@@ -1,4 +1,4 @@
-import { spacing, textSize } from "../../design-system"
+import { iconSize, spacing, textSize } from "../../design-system"
 
 const PrivacyBadge = () => {
   const containerStyle: React.CSSProperties = {
@@ -21,8 +21,8 @@ const PrivacyBadge = () => {
   return (
     <div style={containerStyle}>
       <svg
-        width="12"
-        height="12"
+        width={iconSize.small}
+        height={iconSize.small}
         viewBox="0 0 24 24"
         fill="none"
         stroke="var(--text-color-light)"

contents/amazon.tsx

@@ -8,7 +8,6 @@ import { useState } from "react"
 
 import { useGoogleFonts } from "~/hooks/useGoogleFonts"
 import { useProductPageState } from "~/hooks/useProductPageState"
-import { ProductActionManager } from "~/managers/ProductActionManager"
 import type { Product } from "~/storage"
 import BackToAnOldFlame from "~/views/BackToAnOldFlame"
 import CelebrateThoughtfulPurchase from "~/views/CelebrateThoughtfulPurchase"
@@ -74,7 +73,7 @@ const App = () => {
   useGoogleFonts()
   const {
     currentView: reminderView,
-    currentProduct,
+    product,
     reminderId,
     reminderStartTime,
     pluginClosed,
@@ -91,16 +90,7 @@ const App = () => {
     setLocalView(VIEW.PRODUCT)
   }
 
-  const handleShowIDontNeedIt = async (product: Product | null) => {
-    // Update product state to dontNeedIt
-    if (product) {
-      try {
-        await ProductActionManager.dontNeedIt(product)
-        console.log("[Amazon] Product marked as dontNeedIt")
-      } catch (error) {
-        console.error("[Amazon] Failed to execute dontNeedIt:", error)
-      }
-    }
+  const handleShowIDontNeedIt = (_product: Product | null) => {
     setLocalView(VIEW.I_DONT_NEED_IT)
   }
 
@@ -133,12 +123,12 @@ const App = () => {
     if (regex.test(window.location.href)) {
       // Extract product ID from URL
       const url = window.location.href
-      const productId = getAmazonProductId(url)
+      const _productId = getAmazonProductId(url)
 
       if (currentView === VIEW.EARLY_RETURN) {
         return (
           <EarlyReturnFromSleep
-            product={currentProduct}
+            product={product}
             reminderId={reminderId || ""}
             reminderStartTime={reminderStartTime || 0}
             onShowINeedIt={handleShowINeedIt}
@@ -150,7 +140,7 @@ const App = () => {
       if (currentView === VIEW.OLD_FLAME) {
         return (
           <BackToAnOldFlame
-            product={currentProduct}
+            product={product}
             reminderId={reminderId || ""}
             reminderStartTime={reminderStartTime || 0}
             onShowThoughtfulPurchase={handleShowThoughtfulPurchase}
@@ -191,8 +181,7 @@ const App = () => {
 
       return (
         <ProductView
-          productId={productId}
-          marketplace={MARKETPLACE}
+          product={product}
           onShowIDontNeedIt={handleShowIDontNeedIt}
           onShowSleepOnIt={handleShowSleepOnIt}
           onShowINeedIt={handleShowINeedIt}