feat(app): add the snapshot reviewer

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,18 @@
+Issue URL: 
+
+
+## What is the current behavior?
+
+
+
+## What is the new behavior?
+
+
+
+## Does this introduce a breaking change?
+
+- [ ] Yes
+- [ ] No
+
+
+## Other information

.github/workflows/CI.yml

@@ -0,0 +1,75 @@
+name: CI
+
+on: [pull_request]
+
+# A new push supersedes the run before it.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NODE_VERSION: 24
+
+jobs:
+  checks:
+    name: Checks
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+    - name: ⚙️ Use Node.js
+      uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: npm
+    - name: 🕸️ Install Dependencies
+      run: npm ci
+    - name: 🖌️ Lint
+      run: npm run lint
+    - name: 🧩 Typecheck
+      run: npm run typecheck
+    - name: 🧪 Spec
+      run: npm run test.spec
+    # Lint formats files in place, so a diff means the branch was pushed unformatted.
+    - name: 🔍 Check Diff
+      run: git diff --exit-code
+      shell: bash
+
+  e2e:
+    name: E2E
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+    - name: ⚙️ Use Node.js
+      uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: npm
+    - name: 🕸️ Install Dependencies
+      run: npm ci
+    - name: 📦 Install Playwright Browsers
+      run: npx playwright install chromium
+    - name: 🧪 E2E
+      run: npm run test.e2e
+    # The HTML report is the useful part of a failure, so it is kept for download.
+    - name: 📦 Archive Playwright Report
+      if: ${{ failure() }}
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 7
+
+  verify:
+    # The one required check, so the jobs above can change without touching the
+    # protection rules. Renaming this blocks merges until those rules match.
+    name: Verify
+    if: ${{ always() }}
+    needs: [checks, e2e]
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Check job status
+      if: ${{ contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled') }}
+      run: exit 1

.github/workflows/conventional-commit.yml

@@ -0,0 +1,36 @@
+name: PR Conventional Commit Validation
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, edited]
+
+jobs:
+  validate-pr-title:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Validate PR title
+        if: |
+          !contains(github.event.pull_request.title, 'release') &&
+          !contains(github.event.pull_request.title, 'chore')
+        uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          requireScope: true
+          types: |
+            feat
+            fix
+            docs
+            style
+            refactor
+            perf
+            test
+            build
+            ci
+            revert
+            release
+            chore
+          # The subject must not start with an uppercase character.
+          subjectPattern: ^(?![A-Z]).+$
+          subjectPatternError: |
+            The subject "{subject}" found in the pull request title "{title}" didn't match the configured pattern. Please ensure that the subject doesn't start with an uppercase character.

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+test-results/
+playwright-report/

.prettierrc.js

@@ -0,0 +1,7 @@
+import ionicConfig from '@ionic/prettier-config';
+
+export default {
+  ...ionicConfig,
+  /* No trailing commas in function arguments. */
+  trailingComma: 'es5',
+};

.stylelintrc.yml

@@ -0,0 +1,194 @@
+# https://stylelint.io/
+
+plugins:
+- stylelint-order
+rules:
+  at-rule-empty-line-before:
+  - always
+  - except:
+    - blockless-after-blockless
+    - first-nested
+    ignore:
+    - after-comment
+  block-no-empty:
+  - true
+  custom-property-empty-line-before:
+  - always
+  - except:
+    - after-comment
+    - after-custom-property
+    - first-nested
+  declaration-no-important:
+  - true
+  order/order:
+  - custom-properties
+  - dollar-variables
+  - at-rules
+  - declarations
+  - rules
+  order/properties-order:
+  - emptyLineBefore: always
+    properties:
+    - display
+    - position
+    - top
+    - right
+    - bottom
+    - left
+  - emptyLineBefore: always
+    properties:
+    - flex
+    - flex-basis
+    - flex-direction
+    - flex-flow
+    - flex-grow
+    - flex-shrink
+    - flex-wrap
+    - align-content
+    - align-items
+    - align-self
+    - justify-content
+    - order
+  - emptyLineBefore: always
+    properties:
+    - width
+    - min-width
+    - max-width
+    - height
+    - min-height
+    - max-height
+  - emptyLineBefore: always
+    properties:
+    - margin
+    - margin-top
+    - margin-right
+    - margin-bottom
+    - margin-left
+  - emptyLineBefore: always
+    properties:
+    - padding
+    - padding-top
+    - padding-right
+    - padding-bottom
+    - padding-left
+  - emptyLineBefore: always
+    properties:
+    - float
+    - clear
+  - emptyLineBefore: always
+    properties:
+    - columns
+    - column-gap
+    - column-fill
+    - column-rule
+    - column-span
+    - column-count
+    - column-width
+  - emptyLineBefore: always
+    properties:
+    - transform
+    - transform-box
+    - transform-origin
+    - transform-style
+  - emptyLineBefore: always
+    properties:
+    - transition
+    - transition-delay
+    - transition-duration
+    - transition-property
+    - transition-timing-function
+  - emptyLineBefore: always
+    properties:
+    - border
+    - border-top
+    - border-right
+    - border-bottom
+    - border-left
+    - border-width
+    - border-top-width
+    - border-right-width
+    - border-bottom-width
+    - border-left-width
+    - border-style
+    - border-top-style
+    - border-right-style
+    - border-bottom-style
+    - border-left-style
+    - border-radius
+    - border-top-left-radius
+    - border-top-right-radius
+    - border-bottom-left-radius
+    - border-bottom-right-radius
+    - border-color
+    - border-top-color
+    - border-right-color
+    - border-bottom-color
+    - border-left-color
+  - emptyLineBefore: always
+    properties:
+    - outline
+    - outline-color
+    - outline-offset
+    - outline-style
+    - outline-width
+  - emptyLineBefore: always
+    properties:
+    - background
+    - background-attachment
+    - background-clip
+    - background-color
+    - background-image
+    - background-repeat
+    - background-position
+    - background-size
+    - color
+  - emptyLineBefore: always
+    properties:
+    - font
+    - font-family
+    - font-size
+    - font-smoothing
+    - font-style
+    - font-variant
+    - font-weight
+  - emptyLineBefore: always
+    properties:
+    - letter-spacing
+    - line-height
+    - list-style
+  - emptyLineBefore: always
+    properties:
+    - text-align
+    - text-decoration
+    - text-indent
+    - text-overflow
+    - text-rendering
+    - text-shadow
+    - text-transform
+    - text-wrap
+  - emptyLineBefore: always
+    properties:
+    - white-space
+    - word-spacing
+  - emptyLineBefore: always
+    properties:
+    - border-collapse
+    - border-spacing
+    - box-shadow
+    - caption-side
+    - contain
+    - content
+    - cursor
+    - direction
+    - empty-cells
+    - object-fit
+    - opacity
+    - overflow
+    - quotes
+    - speak
+    - table-layout
+    - touch-action
+    - user-select
+    - vertical-align
+    - visibility
+    - z-index