Merge branch 'main' into feat/stop-route-labels-256

Author: Ahmedhossamdev

.claude/agents/simplify.md

@@ -0,0 +1,132 @@
+---
+name: simplify
+description: Use to simplify JavaScript/TypeScript/Svelte code before code review. Invoke with "simplify my branch", "simplify these changes", or "use simplify on these changes". Analyzes git diff against main, iterates file-by-file, proposes refactors interactively.
+tools: Read, Grep, Glob, Bash, Write, Task
+---
+
+You are an opinionated code simplifier for JavaScript, TypeScript, and SvelteKit projects. Your job is to make code cleaner, more readable, and more maintainable before code review.
+
+## Workflow
+
+1. **Get the diff**: Run `git diff main...HEAD --name-only` to find changed files
+2. **Filter**: Only process `.js`, `.ts`, `.svelte` files
+3. **Iterate file-by-file**: For each file:
+   - Show the filename
+   - Read the file and the diff for that file (`git diff main...HEAD -- <file>`)
+   - Analyze against simplification principles
+   - Present numbered proposals + observations
+   - Wait for user input before proceeding
+
+## Before proposing changes
+
+**Always consult Svelte/SvelteKit conventions first.** Use the Svelte MCP tools:
+
+- `list-sections` to find relevant documentation sections
+- `get-documentation` to fetch current best practices
+- `svelte-autofixer` to detect anti-patterns in Svelte files
+
+This ensures your suggestions align with Svelte 5 and SvelteKit conventions, not outdated patterns.
+
+## Interaction format
+
+Present proposals like this:
+
+```
+## src/routes/dashboard/+page.svelte
+
+### Proposals
+1. [Lines 23-41] Flatten nested if/else into early returns
+2. [Lines 67-89] Extract repeated fetch error handling into `$lib/utils/fetch.ts`
+3. [Lines 102-108] Rename `d` to `dashboardData` for clarity
+
+### Observations
+- This component is 180 lines. Consider extracting the chart configuration (lines 100-150) into a separate component.
+- The reactive statement on line 45 recalculates on every state change. Consider using $derived with more specific dependencies.
+
+[1] [2] [3] [all] [skip] [discuss N]
+```
+
+Wait for user response:
+
+- `1`, `2`, `3`, etc. → Apply that specific proposal, show the change, confirm
+- `all` → Apply all proposals in sequence
+- `skip` → Move to next file
+- `discuss 2` → Explain proposal 2 in detail, show before/after, wait for approval
+
+After applying changes or skipping, move to the next file. Continue until all files are processed.
+
+## Simplification principles (opinionated)
+
+### Control flow
+
+- **Early returns over nested conditionals.** Flip conditions and return/continue early.
+- **No nested ternaries.** One level max. Otherwise use if/else or extract to a function.
+- **Guard clauses first.** Handle edge cases and errors at the top of functions.
+- **Prefer `switch` with early returns** over long if/else chains when matching discrete values.
+
+### Functions
+
+- **Max 30 lines per function.** If longer, it probably does too much—extract.
+- **Single responsibility.** A function should do one thing. "And" in a description = split it.
+- **Max 3 parameters.** More than 3? Use an options object.
+- **No boolean parameters** that change behavior. Use two functions or an options object.
+- **Name functions for what they return**, not what they do internally. `getUserRole()` not `checkUserAndGetRole()`.
+
+### Naming
+
+- **Variables: nouns.** `user`, `dashboardData`, `isLoading`
+- **Functions: verbs.** `fetchUser`, `calculateTotal`, `handleSubmit`
+- **Booleans: `is`, `has`, `should`, `can`.** `isActive`, `hasPermission`
+- **No abbreviations** unless universally understood (`id`, `url`, `api`). `btn` → `button`, `msg` → `message`
+- **No single-letter variables** except in very short lambdas or loop indices.
+
+### Svelte/SvelteKit specific
+
+- **Use `$state` and `$derived`** (Svelte 5 runes), not legacy `let` + `$:` reactive statements.
+- **Prefer `onclick` over `on:click`** (Svelte 5 syntax).
+- **Colocate related logic** in the same file unless it's reused elsewhere.
+- **Use `+page.server.ts` for data loading**, not client-side fetches in `onMount`.
+- **Use `$lib` aliases** for imports from lib folder.
+- **Form actions over API routes** for mutations when possible.
+- **Keep components under 150 lines.** Extract sub-components or move logic to `.svelte.ts` files.
+
+### Extraction patterns
+
+- **Repeated code (2+ times)**: Extract to a function or component.
+- **Complex conditionals**: Extract to a well-named boolean or function.
+- **Magic numbers/strings**: Extract to named constants.
+- **Fetch/error handling patterns**: Extract to `$lib/utils/`.
+- **Shared component logic**: Extract to `$lib/components/` or colocate in same folder.
+
+### Removal
+
+- **Dead code**: Unused imports, unreachable branches, commented-out code.
+- **Unnecessary abstractions**: If a wrapper adds no value, inline it.
+- **Redundant type annotations**: Let TypeScript infer when obvious.
+
+## Summary
+
+After all files are processed, provide a summary:
+
+```
+## Summary
+
+### Applied
+- src/routes/dashboard/+page.svelte: 3 refactors (early returns, fetch helper, naming)
+- src/lib/components/DataTable.svelte: 1 refactor (extracted sort logic)
+
+### Skipped
+- src/routes/api/health/+server.ts: No changes needed
+
+### Observations to consider later
+- Dashboard component could be split into smaller pieces
+- Consider adding error boundary around chart section
+```
+
+## Important
+
+- **Don't change behavior.** These are refactors, not rewrites. Tests should still pass.
+- **Preserve comments** that explain "why", but remove obvious "what" comments.
+- **One thing at a time.** Apply proposals individually so user can review each change.
+- **Be specific.** Show line numbers, show before/after snippets.
+- **Respect user decisions.** If they skip something, don't bring it up again.

.claude/settings.json

@@ -0,0 +1,15 @@
+{
+	"permissions": {
+		"allow": [
+			"WebFetch(domain:github.com)",
+			"Bash(cat:*)",
+			"Bash(gh issue edit:*)",
+			"Bash(grep:*)",
+			"Bash(npm run prepush:*)",
+			"Bash(find:*)",
+			"Bash(sort:*)",
+			"Bash(npm run build:*)",
+			"Bash(npm run test:*)"
+		]
+	}
+}

.env.example

@@ -10,19 +10,38 @@ PRIVATE_OBACO_SHOW_TEST_ALERTS=false
 PUBLIC_NAV_BAR_LINKS={"Home": "/","About": "/about","Contact": "/contact","Fares & Tolls": "/fares-and-tolls"}
 PUBLIC_OBA_GOOGLE_MAPS_API_KEY=""
 PUBLIC_OBA_LOGO_URL="https://onebusaway.org/wp-content/uploads/oba_logo-1.png"
+FAVICON_URL=""
 PUBLIC_OBA_MAP_PROVIDER="osm"
 
 PUBLIC_OBA_REGION_CENTER_LAT=47.60728155903877
 PUBLIC_OBA_REGION_CENTER_LNG=-122.3339240843084
 PUBLIC_OBA_REGION_NAME="Puget Sound"
 
+# Set to "false" to hide the region name text in the navigation bar
+SHOW_REGION_NAME_IN_NAV_BAR=true
+
 PUBLIC_OBA_SERVER_URL="https://api.pugetsound.onebusaway.org/"
 
 PUBLIC_OTP_SERVER_URL=""
 
-# 1 TUE, 2 WED, 3 THU, 4 FRI, 5 SAT, 6 SUN, 0 MON 
+# 1 TUE, 2 WED, 3 THU, 4 FRI, 5 SAT, 6 SUN, 0 MON
 PUBLIC_CALENDAR_FIRST_DAY_OF_WEEK=6
 
+# Nav bar background, primary buttons
+COLOR_BRAND_PRIMARY="#78aa36"
+
+# Text on brand-primary surfaces
+COLOR_BRAND_PRIMARY_FOREGROUND="#ffffff"
+
+# Links, selected states, focus rings
+COLOR_BRAND_ACCENT="#486621"
+
+# Panel backgrounds
+COLOR_SURFACE="#ffffff"
+
+# Panel text
+COLOR_SURFACE_FOREGROUND="#000000"
+
 # Analytics
 PUBLIC_ANALYTICS_DOMAIN=""
 PUBLIC_ANALYTICS_ENABLED=true

.gitignore

@@ -21,4 +21,4 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 coverage/
-.claude
+.claude/settings.local.json

.mcp.json

@@ -0,0 +1,10 @@
+{
+	"mcpServers": {
+		"svelte": {
+			"type": "stdio",
+			"command": "npx",
+			"args": ["-y", "@sveltejs/mcp"],
+			"env": {}
+		}
+	}
+}

README.md

@@ -17,17 +17,51 @@ npm run dev
 
 See `.env.example` for an example of the required keys and values.
 
-### Visuals
+### Analytics
 
-- `PUBLIC_OBA_REGION_NAME` - string: (required) displayed in the header.
-- `PUBLIC_OBA_LOGO_URL` - string: (required) The URL of your transit agency's logo.
-- `PUBLIC_NAV_BAR_LINKS` - JSON string: (required) A dictionary of the links displayed across the navigation bar.
-- `PUBLIC_APP_PRIMARY_COLOR` - string: (required) The hex color code for the application's primary brand color. Must be wrapped in quotes (e.g., "#214666").
-- `PUBLIC_APP_SECONDARY_COLOR` - string: (required) The hex color code for the application's secondary brand color. Must be wrapped in quotes (e.g., "#486621").
 - `PUBLIC_ANALYTICS_DOMAIN` - string: (optional).
 - `PUBLIC_ANALYTICS_ENABLED` - boolean: (optional).
 - `PUBLIC_ANALYTICS_API_HOST` - string: (optional).
 
+### Text and Images
+
+- `PUBLIC_OBA_REGION_NAME` - string: (required) displayed in the header.
+- `PUBLIC_OBA_LOGO_URL` - string: (required) The URL of your transit agency's logo.
+- `SHOW_REGION_NAME_IN_NAV_BAR` - boolean: (optional) Set to "false" to hide the region name text in the navigation bar. Defaults to true.
+- `FAVICON_URL` - string: (optional) URL to a custom favicon. Falls back to the default favicon if not specified.
+- `PUBLIC_NAV_BAR_LINKS` - JSON string: (required) A dictionary of the links displayed across the navigation bar.
+
+### Colors
+
+Customize the application's color scheme via environment variables:
+
+- `COLOR_BRAND_PRIMARY` - string: (optional) Primary brand color for nav bar and buttons. Default: "#78aa36".
+- `COLOR_BRAND_PRIMARY_FOREGROUND` - string: (optional) Text color on brand-colored surfaces. Default: "#ffffff".
+- `COLOR_BRAND_ACCENT` - string: (optional) Accent color for links, selected states, focus rings. Default: "#486621".
+- `COLOR_SURFACE` - string: (optional) Background color for panels and surfaces. Default: "#ffffff".
+- `COLOR_SURFACE_FOREGROUND` - string: (optional) Text color on surfaces. Default: "#000000".
+
+> **Note:** Color variables (`COLOR_*`) are processed at build time by Tailwind CSS. After changing any color values, you must rebuild the application (`npm run build`) for changes to take effect.
+
+#### Generated Primary Palette
+
+A full 10-shade color palette is automatically generated from `COLOR_BRAND_ACCENT` for use with Flowbite components:
+
+| Shade         | Description                                  |
+| ------------- | -------------------------------------------- |
+| `primary-50`  | Very light (95% white)                       |
+| `primary-100` | Light (90% white)                            |
+| `primary-200` | Light (75% white)                            |
+| `primary-300` | Light-medium (60% white)                     |
+| `primary-400` | Slightly lighter than base (30% white)       |
+| `primary-500` | **Base color** (equals `COLOR_BRAND_ACCENT`) |
+| `primary-600` | Slightly darker (15% black)                  |
+| `primary-700` | Medium-dark (30% black)                      |
+| `primary-800` | Dark (45% black)                             |
+| `primary-900` | Very dark (60% black)                        |
+
+Use these in Tailwind classes: `bg-primary-500`, `text-primary-700`, `border-primary-300`, etc.
+
 ## Calendar Configuration
 
 - `PUBLIC_CALENDAR_FIRST_DAY_OF_WEEK` - number: (optional) Sets the first day of the week for calendar components. Use 0 for Monday, 1 for Tuesday, 2 for Wednesday, 3 for Thursday, 4 for Friday, 5 for Saturday, 6 for Sunday. Defaults to 0 (Monday).
@@ -56,6 +90,30 @@ See `.env.example` for an example of the required keys and values.
 
 - `PUBLIC_OTP_SERVER_URL` - string: (optional) Your OpenTripPlanner 1.x-compatible trip planner server URL.
 
+## URL Parameters
+
+You can link directly to a specific location on the map using URL query parameters:
+
+| Parameter | Description                         | Example     |
+| --------- | ----------------------------------- | ----------- |
+| `lat`     | Latitude of the initial map center  | `47.6062`   |
+| `lng`     | Longitude of the initial map center | `-122.3321` |
+
+**Example URL:**
+
+```
+https://your-wayfinder-instance.com/?lat=47.6062&lng=-122.3321
+```
+
+**Validation rules:**
+
+- Both `lat` and `lng` must be provided together
+- Latitude must be between -90 and 90
+- Longitude must be between -180 and 180
+- Coordinates must be within 200km of the configured region center (`PUBLIC_OBA_REGION_CENTER_LAT`/`PUBLIC_OBA_REGION_CENTER_LNG`)
+
+When valid coordinates are provided, the map will center on that location and place a location marker there. The URL parameters are automatically cleaned from the browser address bar after being applied.
+
 ## Building
 
 To create a production version of your app:

eslint.config.js

@@ -16,7 +16,8 @@ export default [
 				...globals.node,
 				L: 'readonly',
 				google: 'readonly',
-				$state: 'readonly'
+				$state: 'readonly',
+				__SHOW_REGION_NAME_IN_NAV_BAR__: 'readonly'
 			}
 		}
 	},

package-lock.json

@@ -4,19 +4,19 @@
 
 @layer components {
 	.h1 {
-		@apply mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-300;
+		@apply mb-4 text-2xl font-semibold text-surface-foreground dark:text-surface-foreground-dark;
 	}
 
 	.h2 {
-		@apply mb-4 text-xl font-semibold text-gray-900 dark:text-gray-300;
+		@apply mb-4 text-xl font-semibold text-surface-foreground dark:text-surface-foreground-dark;
 	}
 
 	.h3 {
-		@apply mb-2 text-lg font-semibold dark:text-white;
+		@apply mb-2 text-lg font-semibold dark:text-surface-foreground-dark;
 	}
 
 	.modal-pane {
-		@apply rounded-lg border-gray-500 bg-white/90 px-4 shadow-lg dark:bg-black dark:text-white dark:shadow-lg dark:shadow-gray-200/10;
+		@apply rounded-lg border-gray-500 bg-surface/90 px-4 shadow-lg dark:bg-surface-dark dark:text-surface-foreground-dark dark:shadow-lg dark:shadow-gray-200/10;
 	}
 
 	.tab-container {
@@ -28,15 +28,15 @@
 	}
 
 	.tab-container__item--active {
-		@apply border-b-2 border-brand-secondary text-brand-secondary;
+		@apply border-b-2 border-brand-accent text-brand-accent;
 	}
 
 	.button {
-		@apply rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
+		@apply rounded-md bg-surface px-3 py-2 text-sm font-semibold text-surface-foreground shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
 	}
 
 	.button--primary {
-		@apply rounded-md bg-brand-secondary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-secondary;
+		@apply rounded-md bg-brand-accent px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-accent;
 	}
 
 	.rtl {

src/app.css

@@ -3,8 +3,6 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
-		<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
-		<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
 		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%