Merge branch 'main' into copilot/add-fullscreen-image-feature

Author: Starefossen

.github/workflows/copilot-setup-steps.yml

@@ -0,0 +1,51 @@
+name: 'Copilot Setup Steps'
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+  pull_request:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+
+jobs:
+  copilot-setup-steps:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.24.0
+
+      - 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 --frozen-lockfile
+
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium

AGENTS.md

@@ -180,6 +180,42 @@ The project uses Chromatic for visual regression testing. PRs automatically trig
 2. PRs will show visual diff status checks
 3. Changes to main are auto-accepted as the new baseline
 
+**Deterministic Date Rendering:**
+
+Stories that display relative dates (e.g. "5 days ago", "Pending (14d)") must mock `globalThis.Date` in a `beforeEach` hook to pin `Date.now()` to a fixed timestamp. Without this, Chromatic detects a visual change every day as the rendered text shifts. Use the pattern from `PaymentDetailsModal.stories.tsx`:
+
+```typescript
+const FIXED_NOW = new Date('2026-02-15T12:00:00Z')
+
+const meta = {
+  // ...
+  beforeEach: () => {
+    const OriginalDate = globalThis.Date
+    const fixedTime = FIXED_NOW.getTime()
+
+    const MockDate: any = function (...args: any[]) {
+      if (args.length === 0) return new OriginalDate(fixedTime)
+      return new (Function.prototype.bind.apply(OriginalDate, [
+        null,
+        ...args,
+      ]) as typeof OriginalDate)()
+    }
+    Object.setPrototypeOf(MockDate, OriginalDate)
+    MockDate.prototype = Object.create(OriginalDate.prototype)
+    MockDate.now = () => fixedTime
+    MockDate.parse = OriginalDate.parse.bind(OriginalDate)
+    MockDate.UTC = OriginalDate.UTC.bind(OriginalDate)
+    globalThis.Date = MockDate
+
+    return () => {
+      globalThis.Date = OriginalDate
+    }
+  },
+} satisfies Meta<typeof MyComponent>
+```
+
+This applies to any component using `formatDistanceToNow`, `getDaysPending`, or other relative date calculations.
+
 ### Privacy and GDPR Compliance
 
 - **User Data Protection:** Always abide by GDPR regulations when handling any user data, including but not limited to: