Frontend: set standard for code formatting with prettier

.github/actions/frontend-build/action.yml

@@ -0,0 +1,54 @@
+name: 'Frontend Build'
+description: 'Build and test frontend application'
+inputs:
+  run-prettier-check:
+    description: 'Whether to run prettier check'
+    required: false
+    default: 'false'
+  run-tests:
+    description: 'Whether to run Cypress tests'
+    required: false
+    default: 'false'
+  node-version:
+    description: 'Node.js version to use'
+    required: false
+    default: '23'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+
+    - name: Install dependencies
+      run: npm ci
+      working-directory: frontend
+      shell: bash
+
+    - name: Verify prettier installation
+      if: inputs.run-prettier-check == 'true'
+      run: npx prettier --version
+      working-directory: frontend
+      shell: bash
+
+    - name: Check code formatting with Prettier
+      if: inputs.run-prettier-check == 'true'
+      run: make check-prettify
+      working-directory: frontend
+      shell: bash
+
+    - name: Build frontend
+      run: npm run build
+      working-directory: frontend
+      shell: bash
+
+    - name: Run tests
+      if: inputs.run-tests == 'true'
+      uses: cypress-io/github-action@v6
+      with:
+        working-directory: frontend
+        start: npm start
+        wait-on: http://localhost:4200
+        wait-on-timeout: 180s

.github/workflows/frontend-macos-13.yaml

@@ -0,0 +1,20 @@
+name: Frontend macOS 13
+
+on:
+  push:
+    branches: [main, develop]
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  frontend:
+    runs-on: macos-13
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v5
+
+      - name: Frontend build
+        uses: ./.github/actions/frontend-build

.github/workflows/frontend-macos-14.yaml

@@ -0,0 +1,20 @@
+name: Frontend macOS 14
+
+on:
+  push:
+    branches: [main, develop]
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  frontend:
+    runs-on: macos-14
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v5
+
+      - name: Frontend build
+        uses: ./.github/actions/frontend-build

.github/workflows/frontend-macos-15.yaml

@@ -0,0 +1,20 @@
+name: Frontend macOS 15
+
+on:
+  push:
+    branches: [main, develop]
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  frontend:
+    runs-on: macos-15
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v5
+
+      - name: Frontend build
+        uses: ./.github/actions/frontend-build

.github/workflows/frontend-macos-latest.yaml

@@ -0,0 +1,20 @@
+name: Frontend macOS latest
+
+on:
+  push:
+    branches: [main, develop]
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  frontend:
+    runs-on: macos-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v5
+
+      - name: Frontend build
+        uses: ./.github/actions/frontend-build

.github/workflows/frontend-ubuntu-22-04.yaml

@@ -0,0 +1,20 @@
+name: Frontend Ubuntu 22.04
+
+on:
+  push:
+    branches: [main, develop]
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  frontend:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v5
+
+      - name: Frontend build
+        uses: ./.github/actions/frontend-build

.github/workflows/frontend-ubuntu-24-04-arm.yaml

@@ -0,0 +1,20 @@
+name: Frontend Ubuntu 24.04 ARM
+
+on:
+  push:
+    branches: [main, develop]
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  frontend:
+    runs-on: ubuntu-24.04-arm
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v5
+
+      - name: Frontend build
+        uses: ./.github/actions/frontend-build

.github/workflows/frontend.yaml

@@ -11,19 +11,14 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  frontend-test:
+  frontend:
     runs-on: ubuntu-24.04
     steps:
       - name: Git checkout
         uses: actions/checkout@v5
-        with:
-          sparse-checkout: |
-            frontend
 
-      - name: Run tests
-        uses: cypress-io/github-action@v6
+      - name: Frontend build and test
+        uses: ./.github/actions/frontend-build
         with:
-          working-directory: frontend
-          start: npm start
-          wait-on: http://localhost:4200
-          wait-on-timeout: 180s
+          run-prettier-check: 'true'
+          run-tests: 'true'

frontend/.prettierrc.json

@@ -0,0 +1,28 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "avoid",
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": "**/*.html",
+      "options": {
+        "parser": "angular",
+        "printWidth": 80,
+        "bracketSameLine": false,
+        "htmlWhitespaceSensitivity": "ignore",
+        "singleAttributePerLine": false
+      }
+    }
+  ]
+}

frontend/Makefile

@@ -0,0 +1,41 @@
+# Frontend Makefile
+
+.PHONY: help
+help: ## Display this help message
+	@echo "Frontend Makefile - Available targets:"
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
+
+.PHONY: install
+install: ## Install npm dependencies
+	npm install
+
+.PHONY: prettify
+prettify: ## Format HTML, SCSS, TypeScript, and JavaScript files with Prettier
+	npx prettier --write 'src/**/*.{ts,js,html,scss,css,json}'
+
+.PHONY: check-prettify
+check-prettify: ## Check if files are formatted with Prettier
+	npx prettier --check 'src/**/*.{ts,js,html,scss,css,json}'
+
+.PHONY: start
+start: ## Start the development server
+	npm start
+
+.PHONY: build
+build: ## Build the frontend for production
+	npm run build:prod
+
+.PHONY: test
+test: ## Run Cypress tests
+	npm run tests
+
+.PHONY: test-headless
+test-headless: ## Run Cypress tests in headless mode
+	npm run tests:headless
+
+.PHONY: clean
+clean: ## Clean build artifacts and node_modules
+	rm -rf dist node_modules
+
+.PHONY: rebuild
+rebuild: clean install build ## Clean, reinstall dependencies, and rebuild

frontend/package.json

@@ -19,7 +19,9 @@
     "sentry:sourcemaps": "sentry-cli sourcemaps inject --org openmina-uv --project openmina ./dist/frontend/browser && sentry-cli sourcemaps upload --org openmina-uv --project openmina ./dist/frontend/browser",
     "copy-env": "cp dist/frontend/browser/assets/environments/webnode.js dist/frontend/browser/assets/environments/env.js",
     "deploy": "npm run prebuild && npm run build:prod && npm run copy-env && firebase deploy",
-    "deploy:leaderboard": "npm run prebuild && npm run build:prod && cp dist/frontend/browser/assets/environments/leaderboard.js dist/frontend/browser/assets/environments/env.js && firebase deploy"
+    "deploy:leaderboard": "npm run prebuild && npm run build:prod && cp dist/frontend/browser/assets/environments/leaderboard.js dist/frontend/browser/assets/environments/env.js && firebase deploy",
+    "prettify": "make prettify",
+    "check-prettify": "make check-prettify"
   },
   "private": true,
   "dependencies": {
@@ -84,6 +86,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "prettier": "^3.6.2",
     "terser-webpack-plugin": "^5.3.10",
     "typescript": "~5.8.3",
     "webpack": "^5.88.2",

frontend/src/app/app.actions.ts

@@ -10,19 +10,43 @@ export const APP_PREFIX = 'App';
 const type = <T extends string>(type: T) => createType(APP_PREFIX, null, type);
 
 const init = createAction(type('Init'));
-const initSuccess = createAction(type('Init Success'), props<{ activeNode: MinaNode, nodes: MinaNode[] }>());
+const initSuccess = createAction(
+  type('Init Success'),
+  props<{ activeNode: MinaNode; nodes: MinaNode[] }>(),
+);
 
-const changeActiveNode = createAction(type('Change Active Node'), props<{ node: MinaNode }>());
+const changeActiveNode = createAction(
+  type('Change Active Node'),
+  props<{ node: MinaNode }>(),
+);
 const getNodeDetails = createAction(type('Get Node Details'));
-const getNodeDetailsSuccess = createAction(type('Get Node Details Success'), props<{ details: AppNodeDetails }>());
+const getNodeDetailsSuccess = createAction(
+  type('Get Node Details Success'),
+  props<{ details: AppNodeDetails }>(),
+);
 const getNodeEnvBuild = createAction(type('Get Node Env Build'));
-const getNodeEnvBuildSuccess = createAction(type('Get Node Env Build Success'), props<{ envBuild: AppEnvBuild }>());
-const deleteNode = createAction(type('Delete Node'), props<{ node: MinaNode }>());
+const getNodeEnvBuildSuccess = createAction(
+  type('Get Node Env Build Success'),
+  props<{ envBuild: AppEnvBuild }>(),
+);
+const deleteNode = createAction(
+  type('Delete Node'),
+  props<{ node: MinaNode }>(),
+);
 const addNode = createAction(type('Add Node'), props<{ node: MinaNode }>());
 
-const changeMenuCollapsing = createAction(type('Change Menu Collapsing'), props<{ isCollapsing: boolean }>());
-const changeSubMenus = createAction(type('Change Sub Menus'), props<{ subMenus: string[] }>());
-const toggleMobile = createAction(type('Toggle Mobile'), props<{ isMobile: boolean }>());
+const changeMenuCollapsing = createAction(
+  type('Change Menu Collapsing'),
+  props<{ isCollapsing: boolean }>(),
+);
+const changeSubMenus = createAction(
+  type('Change Sub Menus'),
+  props<{ subMenus: string[] }>(),
+);
+const toggleMobile = createAction(
+  type('Toggle Mobile'),
+  props<{ isMobile: boolean }>(),
+);
 const toggleMenuOpening = createAction(type('Toggle Menu Opening'));
 
 export const AppActions = {