WIP: Mobile optimizations - responsive layout with bottom nav

agents.md

@@ -0,0 +1,136 @@
+# Static Testing Strategy for UI Changes
+
+## Overview
+This document outlines the static testing strategy to ensure code quality and build integrity after UI changes. Run these checks from the `web` directory to validate TypeScript and ESLint rules.
+
+## Commands
+
+### 1. Run All Checks
+```bash
+cd /home/sschuhmann/dev/rehearshalhub/web
+npm run check
+```
+This command runs both TypeScript and ESLint checks sequentially.
+
+### 2. Run TypeScript Check
+```bash
+cd /home/sschuhmann/dev/rehearshalhub/web
+npm run typecheck
+```
+Validates TypeScript types and catches unused variables/imports.
+
+### 3. Run ESLint
+```bash
+cd /home/sschuhmann/dev/rehearshalhub/web
+npm run lint
+```
+Enforces code style, formatting, and best practices.
+
+## When to Run
+- **After Every UI Change**: Run `npm run check` to ensure no regressions.
+- **Before Commits**: Add a pre-commit hook to automate checks.
+- **Before Deployment**: Verify build integrity.
+
+## Common Issues and Fixes
+
+### 1. Unused Imports
+**Error**: `TS6133: 'X' is declared but its value is never read.`
+**Fix**: Remove the unused import or variable.
+
+**Example**:
+```ts
+// Before
+import { useQuery } from "@tanstack/react-query"; // Unused
+
+// After
+// Removed unused import
+```
+
+### 2. Missing Imports
+**Error**: `TS2304: Cannot find name 'X'.`
+**Fix**: Import the missing dependency.
+
+**Example**:
+```ts
+// Before
+function Component() {
+  useEffect(() => {}, []); // Error: useEffect not imported
+}
+
+// After
+import { useEffect } from "react";
+function Component() {
+  useEffect(() => {}, []);
+}
+```
+
+### 3. Formatting Issues
+**Error**: ESLint formatting rules violated.
+**Fix**: Use consistent indentation (2 spaces) and semicolons.
+
+**Example**:
+```ts
+// Before
+function Component(){return <div>Hello</div>}
+
+// After
+function Component() {
+  return <div>Hello</div>;
+}
+```
+
+## Pre-Commit Hook
+Automate checks using Husky:
+
+### Setup
+1. Install Husky:
+```bash
+cd /home/sschuhmann/dev/rehearshalhub/web
+npm install husky --save-dev
+npx husky install
+```
+
+2. Add Pre-Commit Hook:
+```bash
+npx husky add .husky/pre-commit "npm run check"
+```
+
+### How It Works
+- Before each commit, Husky runs `npm run check`.
+- If checks fail, the commit is aborted.
+
+## Best Practices
+1. **Run Checks Locally**: Always run `npm run check` before pushing code.
+2. **Fix Warnings**: Address all warnings to maintain code quality.
+3. **Review Changes**: Use `git diff` to review changes before committing.
+
+## Example Workflow
+1. Make UI changes (e.g., update `AppShell.tsx`).
+2. Run static checks:
+   ```bash
+   cd /home/sschuhmann/dev/rehearshalhub/web
+   npm run check
+   ```
+3. Fix any errors/warnings.
+4. Commit changes:
+   ```bash
+   git add .
+   git commit -m "Update UI layout"
+   ```
+
+## Troubleshooting
+- **`tsc` not found**: Install TypeScript:
+  ```bash
+  npm install typescript --save-dev
+  ```
+- **ESLint errors**: Fix formatting or disable rules if necessary.
+- **Build failures**: Check `npm run check` output for details.
+
+## Responsibilities
+- **Developers**: Run checks before committing.
+- **Reviewers**: Verify checks pass during PR reviews.
+- **CI/CD**: Integrate `npm run check` into the pipeline.
+
+## Notes
+- This strategy ensures UI changes are type-safe and follow best practices.
+- Static checks do not replace manual testing (e.g., responsiveness, usability).