Add Makefile to centralize build commands

- Create Makefile with targets: install, test, test-coverage, build, lint, lint-fix, clean, ci, start
- Update GitHub Actions CI workflow to use Makefile commands
- Add help target to display available commands
- Run prettier to fix code formatting

Author: claude

.github/workflows/ci.yml

@@ -26,13 +26,13 @@ jobs:
         cache: 'yarn'
 
     - name: Install dependencies
-      run: yarn install --frozen-lockfile
+      run: make install
 
-    - name: Run tests
-      run: yarn test --coverage --watchAll=false
+    - name: Run tests with coverage
+      run: make test-coverage
 
     - name: Build
-      run: yarn build
+      run: make build
 
     - name: Upload coverage to Codecov
       if: matrix.node-version == '20.x'
@@ -57,7 +57,7 @@ jobs:
         cache: 'yarn'
 
     - name: Install dependencies
-      run: yarn install --frozen-lockfile
+      run: make install
 
     - name: Check formatting with Prettier
-      run: yarn prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
+      run: make lint

Makefile

@@ -0,0 +1,51 @@
+.PHONY: help install test test-coverage build lint lint-fix clean ci start
+
+# Default target
+help:
+	@echo "Available targets:"
+	@echo "  make install        - Install dependencies"
+	@echo "  make test           - Run tests"
+	@echo "  make test-coverage  - Run tests with coverage"
+	@echo "  make build          - Build production bundle"
+	@echo "  make lint           - Check code formatting"
+	@echo "  make lint-fix       - Fix code formatting"
+	@echo "  make clean          - Clean build artifacts"
+	@echo "  make ci             - Run all CI checks (test + build + lint)"
+	@echo "  make start          - Start development server"
+
+# Install dependencies
+install:
+	yarn install --frozen-lockfile
+
+# Run tests without coverage
+test:
+	yarn test --watchAll=false
+
+# Run tests with coverage
+test-coverage:
+	yarn test --watchAll=false --coverage
+
+# Build production bundle
+build:
+	yarn build
+
+# Check code formatting with Prettier
+lint:
+	yarn prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
+
+# Fix code formatting with Prettier
+lint-fix:
+	yarn prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
+
+# Clean build artifacts
+clean:
+	rm -rf build
+	rm -rf coverage
+	rm -rf node_modules
+
+# Run all CI checks
+ci: test-coverage build lint
+
+# Start development server
+start:
+	yarn start

src/App.test.tsx

@@ -122,7 +122,9 @@ describe("URL parameter handling", () => {
     // The "No" option for display mode should be bold (active)
     const displayModeOptions = screen.getAllByText(/^(Yes|No)$/);
     const noOption = displayModeOptions.find(
-      (el) => el.textContent === "No" && el.getAttribute("href") === "#disable-displaymode"
+      (el) =>
+        el.textContent === "No" &&
+        el.getAttribute("href") === "#disable-displaymode"
     );
 
     expect(noOption).toHaveStyle({ fontWeight: "bold" });