chore: add Biome for frontend linting and formatting

.github/workflows/lint.yml

@@ -0,0 +1,34 @@
+name: Lint
+
+on:
+  pull_request:
+    paths:
+      - 'static/**'
+      - 'package.json'
+      - 'biome.json'
+  push:
+    branches:
+      - main
+    paths:
+      - 'static/**'
+      - 'package.json'
+      - 'biome.json'
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Biome
+        run: npm run lint

.gitignore

@@ -9,8 +9,15 @@ instance/
 
 # Virtual environment
 venv/
+.venv/
 env/
 
+# Node.js
+node_modules/
+
+# Biome
+.biome/
+
 # IDEs and editors
 .vscode/
 .idea/

biome.json

@@ -0,0 +1,26 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"rules": {
+			"recommended": true,
+			"complexity": {
+				"noForEach": "off"
+			},
+			"style": {
+				"noUselessElse": "off",
+				"useExponentiationOperator": "off",
+				"noParameterAssign": "off"
+			},
+			"suspicious": {
+				"noAssignInExpressions": "off"
+			}
+		},
+		"ignore": ["**/.venv/**", "**/node_modules/**", "**/__pycache__/**"]
+	},
+	"formatter": {
+		"ignore": ["**/.venv/**", "**/node_modules/**", "**/__pycache__/**"]
+	}
+}

package.json

@@ -0,0 +1,14 @@
+{
+	"name": "btcmap-admin",
+	"version": "0.1.0",
+	"description": "BTC Map Admin - Frontend dev tools",
+	"private": true,
+	"scripts": {
+		"lint": "biome check .",
+		"format": "biome format --write .",
+		"lint:fix": "biome check --write ."
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.9.0"
+	}
+}

static/css/map.css

@@ -1,5 +1,5 @@
 #map {
-    height: 400px;
-    width: 100%;
-    margin-bottom: 20px;
+	height: 400px;
+	width: 100%;
+	margin-bottom: 20px;
 }

static/css/style.css

@@ -1,80 +1,80 @@
 body {
-    padding-top: 5rem;
+	padding-top: 5rem;
 }
 
 .starter-template {
-    padding: 3rem 1.5rem;
-    text-align: center;
+	padding: 3rem 1.5rem;
+	text-align: center;
 }
 
 .form-signin {
-    width: 100%;
-    max-width: 330px;
-    padding: 15px;
-    margin: auto;
+	width: 100%;
+	max-width: 330px;
+	padding: 15px;
+	margin: auto;
 }
 
 .form-signin .form-control {
-    position: relative;
-    box-sizing: border-box;
-    height: auto;
-    padding: 10px;
-    font-size: 16px;
+	position: relative;
+	box-sizing: border-box;
+	height: auto;
+	padding: 10px;
+	font-size: 16px;
 }
 
 .form-signin .form-control:focus {
-    z-index: 2;
+	z-index: 2;
 }
 
 .form-signin input[type="password"] {
-    margin-bottom: 10px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+	margin-bottom: 10px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
 }
 
 /* Area details table - prevent field value overflow */
 #tags-table {
-    table-layout: fixed;
-    width: 100%;
+	table-layout: fixed;
+	width: 100%;
 }
 
 #tags-table th:first-child,
 #tags-table td:first-child {
-    width: 15%;
+	width: 15%;
 }
 
 #tags-table th:nth-child(2),
 #tags-table td:nth-child(2) {
-    width: 65%;
+	width: 65%;
 }
 
 #tags-table th:last-child,
 #tags-table td:last-child {
-    width: 20%;
-    white-space: nowrap;
+	width: 20%;
+	white-space: nowrap;
 }
 
 /* Action buttons - standalone with spacing */
 #tags-table .btn-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem;
 }
 
 #tags-table .btn-group .btn {
-    border-radius: 0.25rem !important;
+	border-radius: 0.25rem !important;
 }
 
 #tags-table .tag-value-cell {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	word-break: break-word;
 }
 
 #tags-table .tag-value-content {
-    display: block;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
-    white-space: normal;
+	display: block;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	word-break: break-word;
+	white-space: normal;
 }