Pulldasher frontend v2: a React + TypeScript rewrite

.eslintrc.json

@@ -1,62 +1,52 @@
 {
-  "extends": [
-    "eslint:recommended"
-  ],
-  "parserOptions": {
-    "ecmaVersion": 2022,
-    "sourceType": "module"
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es2022": true
-  },
-  "globals": {
-    "App": true
-  },
-  "ignorePatterns": [
-    "dist/*",
-    "frontend/dist/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "**/*.ts",
-        "**/*.tsx"
-      ],
-      "parser": "@typescript-eslint/parser",
-      "plugins": [
-        "@typescript-eslint"
-      ],
-      "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:react/jsx-runtime",
-        "plugin:import/recommended",
-        "plugin:import/typescript"
-      ],
-      "parserOptions": {
-        "ecmaVersion": 2017,
-        "sourceType": "module"
-      },
-      "env": {
-        "browser": true,
-        "node": true,
-        "es6": true
-      },
-      "globals": {
-        "App": true
-      },
-      "rules": {
-        "react/jsx-uses-react": "off",
-        "react/react-in-jsx-scope": "off"
+   "extends": ["eslint:recommended"],
+   "parserOptions": {
+      "ecmaVersion": 2022,
+      "sourceType": "module"
+   },
+   "env": {
+      "browser": true,
+      "node": true,
+      "es2022": true
+   },
+   "globals": {
+      "App": true
+   },
+   "ignorePatterns": ["**/dist/**"],
+   "overrides": [
+      {
+         "files": ["**/*.ts", "**/*.tsx"],
+         "parser": "@typescript-eslint/parser",
+         "plugins": ["@typescript-eslint"],
+         "extends": [
+            "eslint:recommended",
+            "plugin:react/recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:react/jsx-runtime",
+            "plugin:import/recommended",
+            "plugin:import/typescript"
+         ],
+         "parserOptions": {
+            "ecmaVersion": 2017,
+            "sourceType": "module"
+         },
+         "env": {
+            "browser": true,
+            "node": true,
+            "es6": true
+         },
+         "globals": {
+            "App": true
+         },
+         "rules": {
+            "react/jsx-uses-react": "off",
+            "react/react-in-jsx-scope": "off"
+         }
       }
-    }
-  ],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}
+   ],
+   "settings": {
+      "react": {
+         "version": "detect"
+      }
+   }
+}

PRODUCT.md

@@ -0,0 +1,43 @@
+# Pulldasher — Product Context
+
+register: product
+
+## What this is
+
+A PR review hub for iFixit engineers: the between-tasks glance that answers
+"what can I act on, and what's the best next pickup?" in under a second.
+Used many times a day, briefly, by people who already know the codebase —
+familiarity and speed over novelty, always.
+
+## Users
+
+iFixit engineers (~20 reviewers) triaging their review queue between tasks.
+Desktop-first on wide monitors; both light and dark themes are first-class.
+The dummy board (`npm run dev:dummy` in `frontend-v2/`) is the design bench.
+
+## Design principles (in the owner's words)
+
+- "A minimal UI that just feels like it was meant to work — but indicate
+  things instead of hiding them." Subtle is good; invisible is a bug.
+- "No news is good news." Healthy states show nothing at rest (the CI bar is
+  invisible when green, revealed on hover). Color on the board means
+  *look here* — if everything is quiet, everything is fine.
+- Actionability first: the page answers "what's my move" before "what exists."
+  Position (which section a card sits in) is the primary state encoding.
+- Think Rams / Ive: the mark should *be* the thing it represents, self-evident
+  without the legend. The legend documents the vocabulary; it must never be
+  required to read it.
+
+## Anti-references
+
+- Badge soup: rows wearing 3+ colored chips each. v2 shipped this once and
+  the owner's eyes "went right to the badges instead of the titles."
+- Dashboard-as-fruit-salad: saturated status colors on every row.
+- Private codes: abstract marks (colored squares) that need the legend.
+- Anything that makes heavy/broken work the loudest thing on a board whose
+  users are hunting the *easy* pickups.
+
+## See also
+
+DESIGN.md (the visual system as implemented), frontend-v2/src/styles.css
+(tokens are the source of truth for values).

README.md

@@ -146,8 +146,9 @@ Pulldasher is released under the [MIT License](LICENSE/).
 
 ### React Frontend
 
-- Hack on the just the UI (no DB needed): `npm frontend:start`
-  - Then open http://localhost:8080/
-  - Or the demo page at http://localhost:8080/pull-card-demo.html
-- Hack on both the frontend + backend: `npm frontend:watch` + `npm start`
-  - Then open http://localhost:{port} where port is from your config.js
+The frontend lives in `frontend-v2/` (see its README). From the repo root:
+
+- Hack on just the UI, no DB needed: `npm run frontend:dummy`, then open the
+  Vite dev server it prints (a synthetic board, no backend).
+- Hack on the frontend against a live backend: `npm run frontend:dev` (proxies
+  `/token`, the socket, and `/stats-history` to a local `npm start`).