### Before Modernization - **Lines of code:** 5,926 (migrated files only) - **Alert() calls:** 49 (blocking user experience) - **Fetch() calls:** 34 (manual, inconsistent error handling) - **Code patterns:** Inconsistent (callbacks, promises, async/await mixed) - **Error handling:** Varied (alerts, console only, or nothing) - **Drag & drop:** 946 lines custom code, no mobile support - **CSRF handling:** Manual in every function ### After Modernization ✅ - **Lines of code:** 5,002 (-924 lines, -...

```bash 6176f50 Phase 2.1: Replace custom drag & drop with SortableJS library 0a5c650 Phase 1.12: Migrate areas.js to use API Service and Notifications abd98f1 Phase 1.13: Migrate zones.js to use API Service and Notifications 5b6e734 Phase 1.14: Migrate contexts.js to use Notifications a512a6b Phase 1.15: Migrate areas-d3.js to use API Service 169e516 Fix missed alert and fetch in tasks.js ``` **Total commits:** 6 **All pushed to:** `claude/frontend-refactor-01LbzSohbqN3xtpqtAxDYYpy` ---

### Immediate (Continue Phase 1): 1. ⏭️ **trekantmeny.js** - Triangle menu (40 migrations) 2. ⏭️ **references_edit.js** - Reference editing (30 migrations) 3. ⏭️ **review.js** - Review functionality (13 migrations) 4. ⏭️ **project_tasks.js** - Project task management (10 migrations) ### Phase 3: Visualization Modernization (Future) 1. 📊 **Install Apache ECharts** - `npm install echarts` 2. 🧪 **Create POC** - Proof-of-concept for one sunburst visualization 3. 🔄 **Migrate global-d3.js** - Main su...

### High-Priority Files (15 files remaining) | Priority | File | Lines | Alerts | Fetches | Total Work | |----------|------|-------|--------|---------|------------| | 🔴 CRITICAL | **trekantmeny.js** | 709 | 26 | 14 | 40 | | 🔴 CRITICAL | **references_edit.js** | 619 | 15 | 15 | 30 | | 🟡 HIGH | **review.js** | 730 | 12 | 1 | 13 | | 🟡 HIGH | **project_tasks.js** | 641 | 6 | 4 | 10 | | 🟡 HIGH | **global-d3.js*** | 1428 | 2 | 6 | 8 | | 🟢 MEDIUM | **modal.js** | 412 | 4 | 2 | 6 | | 🟢 MEDIUM | **refer...

1. **visualization-modernization-analysis.md** (265 lines) - Comprehensive analysis of 3,300 lines of custom D3.js code - Recommendation: Apache ECharts for 80-90% code reduction - Detailed migration strategy and cost-benefit analysis 2. **frontend-refactor-progress-summary.md** (this document) - Complete progress tracking - Metrics and impact analysis ---

### Code Reduction - **Total lines eliminated:** 924 (386 from Phase 1 + 538 from Phase 2) - **Percentage reduction:** 16.5% across migrated files - **Duplicate functions removed:** 3 (patchResource × 2, updateAreaPortionOfTotal) ### Technical Debt Eliminated - **Blocking alert() calls removed:** 49 - **Manual fetch() calls standardized:** 34 - **Promise chains → async/await:** 15+ functions - **Error handling standardized:** 100% consistent across all files ### Code Quality Improvements - ✅ *...

### SortableJS Migration **Replaced:** draggable-proj.js (946 lines of custom HTML5 Drag & Drop) **With:** sortable.js (408 lines using SortableJS library) **Result:** 538 lines eliminated (57% reduction) #### Key Improvements: - ✅ Modern library replaces custom implementation - ✅ Touch/mobile support built-in - ✅ Smooth animations and ghost elements - ✅ Keyboard accessibility - ✅ Parallel group support maintained - ✅ Automatic server sync via API service #### Files Updated: - Created: `publi...

### Files Migrated (9 total) | File | Before | After | Eliminated | Alerts Fixed | Fetches Fixed | |------|--------|-------|------------|--------------|---------------| | **batch_update.js** | 1062 | 1050 | 12 (1.1%) | 5 → 0 | 1 → 0 | | **common.js** | 1005 | 969 | 36 (3.6%) | 9 → 0 | 7 → 0 | | **agenda.js** | 968 | 833 | 135 (13.9%) | 7 → 0 | 14 → 0 | | **settings.js** | 509 | 442 | 67 (13.2%) | 12 → 0 | 4 → 0 | | **areas.js** | 508 | 433 | 75 (14.8%) | 6 → 0 | 2 → 0 | | **zones.js** | 488 | 4...

Successfully completed **Phase 1** of frontend modernization, migrating 9 JavaScript files to use centralized API service and toast notifications. Eliminated **255 lines of code** (11.6% reduction), removed **48 blocking alert() calls**, and standardized **24 fetch() calls** to use the modern API service pattern. ---

**Session Date:** 2025-11-18 **Branch:** claude/frontend-refactor-01LbzSohbqN3xtpqtAxDYYpy

## Public JS Files (public/js/) ~40+ files including: advanced_filter.js, agenda.js, areas.js, areas-d3.js, batch_update.js, capacity-overrides.js, common.js, contexts.js, ctrl_shift.js, distribution.js, draggable-proj.js, dropdown_menu_areas.js, global-d3.js, marquee.js, modal.js, new_task_shortcut.js, project_tasks.js, projects.js, references.js, references_edit.js, references_for_one_list.js, references_inbox.js, review.js, rutiner.js, settings.js, shortcuts.js, sidebar.js, sidebar-resize.js, sortable.js, tagging.js, tasks.js, temp.js, trekantmeny.js, trumbowyg.js, zen-mode.js, zones.js, zones-d3.js, zones-index-d3.js Many have `.backup` copies alongside them. ## Tagging JS: Keyboard Navigation Between Dropdowns `public/js/tagging.js` implements field-to-field keyboard navigation: - ArrowRight in areas/projects dropdown (no children or child mode) -> moves to next dropdown - ArrowLeft in areas/projects parent mode -> moves to previous dropdown - All dropdowns have `handleLeftRightInSubmenu()` for inter-field navigation - Navigation order: zone -> area -> context -> project -> tag -> time -> energy ## Tagging JS: Active Button Highlighting - CSS class `btn-active-dropdown` applied to menu button when its dropdown is open - `setActiveButton(dataValue)` / `clearActiveButton()` functions in tagging.js - Applied to all 7 dropdown open/close function pairs - CSS defined in `public/css/tasks.css`

## Gotcha: services/index.js Is Dead Code `public/js/services/index.js:33-39` references `api`, `taskAPI`, `projectAPI`, `referenceAPI`, `notificationService` -- but the imports are all commented out (lines 19-24). It was designed for a bundler setup that was never implemented. The file is never loaded in any view. ## Gotcha: task-api.js Not Loaded But Referenced `task-api.js` creates a `TaskAPI` class and `taskAPI` global. This file is NOT loaded in `app.blade.php`. Code in `tasks.js` originally used `taskAPI` calls -- these were replaced with direct `api.patchResource()` calls using the global `api` instance from `api.js`. ## Dependency Chain (working order) ``` api.js (APIService, global `api`) -> notification.js (showError, showSuccess -- standalone but often used with api) -> tagging.js (utility functions) -> common.js (depends on api, notification, tagging) -> tasks.js / projects.js / references.js (depend on common.js + api) ``` ## Sidebar Resize (public/js/sidebar-resize.js) Handles draggable sidebar width adjustment and GTD shortcuts panel swap: - Drag handle: `.app-sidebar-resizer` element between sidebar and content - Constraints: min 120px, max 400px, default 210px - Persistence: saves width to localStorage, restores on page load - Double-click resizer: resets to default 210px - Navbar sync: dynamically offsets navbar tab positioning to match sidebar width - GTD mode: swaps `.sidebar-menu` content with `.sidebar-shortcuts` panel - Reads `showGtdShortcuts` from localStorage `layoutSettings` object - When shortcuts disabled: sidebar collapses to 0px in GTD mode - When shortcuts enabled: sidebar width set to 160px in GTD mode - Uses early `<style>` injection (before DOMContentLoaded) to prevent FOUC ## Layout Settings Integration (layout-settings.blade.php) Client-side layout config stored in localStorage key `layoutSettings`: - `maxContentWidth` (0 = unlimited, applies CSS custom property `--layout-max-content-width`) - `sidebarWidth` (120-400px, default 210) - `fontSize` (12-20px, applies CSS custom property `--layout-font-size`) - `showGtdShortcuts` (boolean, controls sidebar shortcuts panel visibility in GTD mode) All settings applied via CSS custom properties and read by sidebar-resize.js

# EXPERT: JavaScript Architecture > Last updated: 2026-03-11 | Agent: claude-code ## Loading Strategy: Hybrid Vite + Manual Script Tags ### Vite-Bundled (resources/js/) - `resources/js/app.js` -- only imports `./bootstrap` (axios setup) - `resources/js/draggable-sortable.js` -- drag/drop functionality - Loaded via `@vite()` in `layouts/app.blade.php:59` ### Manual Script Tags: Global (loaded on every page) Order in `layouts/app.blade.php`: 1. Bootstrap 5.3.0 bundle (CDN) 2. `js/services/api.js` -- APIService class, creates global `api` instance 3. `js/services/notification.js` -- showError(), showSuccess() functions 4. `js/tagging.js` -- minutesToMinimalJS and other tag utilities 5. `js/common.js` -- shared UI functions (depends on api.js, notification.js) 6. `js/zen-mode.js` -- zen mode toggle 7. `js/sidebar.js` -- collapsible sidebar sections with localStorage persistence 8. `js/sidebar-resize.js` -- draggable sidebar resize (drag handle, localStorage width persistence, navbar offset sync) Post-stack (after `@stack('scripts')`): 9. `js/ctrl_shift.js` -- keyboard shortcuts ### Manual Script Tags: Per-Route (conditional in layout) - Task routes: `js/tasks.js` (with TASKS_STORE_URL, TASKS_UPDATE_URL constants) - Project routes: `js/projects.js` + `js/services/project-api.js` (with PROJECTS_STORE_URL, PROJECTS_UPDATE_URL constants) - Reference routes: `js/references.js` + `js/services/project-api.js` (with TASKS_STORE_URL, REFERENCE_STORE_URL constants) - Area index: D3.js (CDN) + `js/areas.js` (with AREAS_UPDATE_URL constant) - Area edit: `js/areas.js` (with AREAS_UPDATE_URL constant) - Zone edit: ZONES_UPDATE_URL constant only (no dedicated JS file loaded) ### Additional JS via @stack('scripts') Individual views can push scripts using `@push('scripts')`. Used for page-specific JS. ## Service Files (public/js/services/) | File | Purpose | Loaded globally? | |--------------------|-----------------------------|-----------------| | api.js | APIService class, `api` global | YES (layout) | | notification.js | showError/showSuccess | YES (layout) | | task-api.js | TaskAPI class | NO | | project-api.js | ProjectAPI class | NO | | reference-api.js | ReferenceAPI class | NO | | index.js | Module aggregator | NO (all commented out) |

### Project Filtering in Tagging & Edit Both tagging and edit views filter projects: - Exclude `is_completed = true` and `project_type = 'reference_list'` - Group by `project_state`: active (shown directly), later (flyout), waiting/scheduled (flyout) - Zone filtering: show projects matching active zone + projects without any zone - Data: 511 total -> ~103 filtered (active, not completed, not reference_list) - Controller: `TaskFilterInboxWorkflowController` (tagging), `TaskDataController::getFilteredProjects()` (edit) - Views: `_projects_dropdown.blade.php` (grouped layout with CSS flyout submenus), `_project_item.blade.php` (extracted partial) ### Conditional Projects Field in Tagging "Prosjekter" button/dropdown hidden when `task_type = 'simple'` AND no projects assigned. Shows when task has projects or is not simple type. ### Dropdown Centering (Tagging) All custom tagging dropdowns (zone, area, context, project, tag, time, energy) centered with `left: 50%; transform: translateX(-50%)`. CSS: `public/css/tasks.css`, `public/css/trekantmeny.css`, `public/css/common.css` ### List Item Micro-Partials (partials/list-items/) 38+ reusable Blade partials for rendering individual fields in task/project/reference lists. Each handles one field (energy dropdown, time dropdown, due date picker, tag display, area badges, etc.). Used across all list views for consistent rendering. Includes `_project_item.blade.php` (extracted partial for single project item in dropdown, used by `_projects_dropdown.blade.php`).

### View Directories ``` views/ layouts/app.blade.php partials/ _navbar, _sidebar, _content-subtabs, _pagination, _modal_batch, _advanced_filter_* _areas_list_flexible, _model_list_flexible, _single_model_row _capacity_label, _time_limit_label, _time_slot_preferences, _time_slots_list list-items/ 38 micro-partials (_title, _energy, _time, _due_date, _tags, _areas, _contexts, _projects, _zones, _favorite_star, _completed_checkbox, _action_state, _trekantmeny, etc.) dashboard.blade.php (zone-filtered task counts overview) layout-settings.blade.php (localStorage layout config: width, font, shortcuts toggle) shortcuts/ index.blade.php (keyboard shortcuts reference: Review, Tagging, Zen mode) tasks/ index, edit, inbox, next, later, someday, waiting, focus, tagging, review, logg, auto, gjentakende, rutiner, triggered, trash, agenda_new, agenda_org, old_agenda partials/ (_new-tasks, _edit_task_main, _edit_task_documents, _edit_task_dependencies, _modal, _view_with_filter, active/, focus_tasks_only, etc.) time_slots/ projects/ index, edit, inactive, later, someday, waiting, scheduled, log, logbook partials/ (add-new-project, complete-projects, inactive-projects, _edit_project_main, _edit_project_document, active/) references/ index, edit, unlisted, reference_list, reference_list_edit partials/ (_new-reference) areas/ (index, edit views) zones/ (index, edit views) contexts/ (index, edit views) settings/ (views) agenda/ (views) distribution/ (views) lists/ (views) seksjoner/ (views) ``` ### Pagination - `Paginator::useBootstrapFive()` set in AppServiceProvider:25 - Custom partial: `partials/_pagination.blade.php` - Gotcha: `useBootstrap()` maps to BS4 in Laravel 12, must use `useBootstrapFive()` explicitly ### Review-to-Tagging Redirect When review queue is empty (`$singleTask === null` in `TaskFilterInboxWorkflowController::getReviewTask()`), auto-redirects to `/tasks/tagging` instead of showing empty page.

### Sidebar Shortcuts Panel (GTD Mode) In GTD mode (inbox/review/tagging), sidebar menu is hidden and replaced by keyboard shortcuts panel: - Each page defines shortcuts via `@section('sidebar-shortcuts')` in its Blade view - Inbox: N (new), Esc (clear), Z (zen) - Review: 1-8 (action options), T/B (title/body edit), Esc - Tagging: arrows, Enter, Space, Esc - Sidebar width in GTD mode: 160px (configurable) - Toggle: "Vis tastatursnarveier i GTD-modus" in layout-settings (localStorage `showGtdShortcuts`) - When toggle off: sidebar collapses to 0px in GTD mode - JS logic: `sidebar-resize.js` swaps `.sidebar-menu` display with `.sidebar-shortcuts` panel ### Navbar Structure (GTD Kartotek-Style) Dark navbar with three main tabs (kartotek metaphor): - **process inbox** -- maps to inbox/review/tagging workflow - **organize** -- maps to task/project management - **do** -- maps to agenda/next/focus execution Zone filter: right-side filter icon with dropdown (was inline in navbar) Settings gear dropdown (top-right): Settings, Contexts, Soner, Sonefordeling, Areas, Areas Hours, Tastatursnarveier CSS: `public/css/gtd-navbar.css` ### Content Subtabs Right-aligned kartotek-style subtabs rendered by `partials/_content-subtabs.blade.php`: - Process tab active: Innboks / Review / Tagging (only -- "Oppgaver"/"Prosjekter" removed) - Organize tab active: Oppgaver / Prosjekter - Do tab active: Agenda / Next / Focus ### Zone-Filtered Counts Navbar GTD tabs and dashboard route filter counts by active zone: - `session('active_zone_id')` drives filtering - Uses `whereHas('zones', ...)` on task queries when zone is set - Applies to: navbar capture/process tab badge counts, dashboard all counts ### Conditional CSS/JS Loading (layout detects route) Route detection in layout via `Route::currentRouteName()`: - `tasks.*` -> tasks.css, tasks.js - `projects.*` -> projects.css, projects.js - `references.*` -> references.css, references.js - `areas.index` / `areas.edit` -> areas.css, areas.js (+ D3 for index) - `zones.edit` -> zones.css

### API-Style Routes (no prefix) - `POST /api/quick-capture` -- QuickCaptureController - `GET /api/dependency-graph/task/{task}` -- DependencyGraphController ## View Structure ### Layout Hierarchy - `layouts/app.blade.php` -- master layout (Bootstrap 5 CDN, navbar, sidebar, content yield, JS/CSS loading) - CSS: includes `css/gtd-navbar.css` for navbar styling - JS: includes `js/sidebar-resize.js` for draggable sidebar - Uses flex layout (`.app-layout`) instead of Bootstrap grid - `partials/_navbar.blade.php` -- GTD navbar (dark, kartotek-style tabs: process inbox / organize / do) - Zone filter: right-side minimalist filter icon with dropdown - Settings dropdown: unchanged (includes "Tastatursnarveier" link to /shortcuts) - Automation menu: flat dropdown-header + items (NOT nested dropstart -- Bootstrap 5 doesn't support nested dropdowns) - Class: `navbar-dark gtd-navbar` (was `navbar-light bg-light`) - `partials/_content-subtabs.blade.php` -- content-area subtabs (right-aligned, kartotek-style) - Process: Innboks / Review / Tagging - Organize: Oppgaver / Prosjekter - Do: Agenda / Next / Focus - Included in layout: `@include('partials._content-subtabs')` before `@yield('content')` - `partials/_sidebar.blade.php` -- left sidebar, Nirvana-style collapsible sections - Main content: `.app-content` flex child, uses `@yield('content')` ### Sidebar Structure (Nirvana-style collapsible sections) Sections with localStorage persistence for open/closed state: - CAPTURE: Innboks - ACTIONS: Next, Later, Waiting, Someday, Focus (with task counts) - PROJECTS: Prosjekter, Prosjekt-stater submenu - AUTOMATION: Rutiner, Gjentakende, Triggered, Auto (collapsed by default) - REFERENCE: Referanser, Uten referanseliste, Referanselister, Lister - CLEANUP: Logg, Papirkurv (trash view) Managed by: `public/js/sidebar.js`, `public/css/menu.css` Sidebar is draggable (flex layout): min 120px, max 400px, default 210px, double-click to reset Managed by: `public/js/sidebar-resize.js` (persists width in localStorage)

# EXPERT: Views & Routes > Last updated: 2026-03-11 | Agent: claude-code ## Route Structure (~350 routes in routes/web.php) ### Root - `GET /` -> `tasks.index` -> TaskController@index ### Core Resource Routes - `/tasks` -- CRUD + filters (auto, inbox, next, later, someday, waiting, focus, tagging, review, logg, gjentakende, rutiner, triggered, trash) - `/projects` -- CRUD + filters (inactive, later, someday, waiting, scheduled, logbook) - `/references` -- CRUD + filters (unlisted, reference_list) - `/areas` -- CRUD + hours, hierarchy, portions, time_preferences - `/zones` -- CRUD + select, goalscape - `/contexts` -- standard CRUD - `/settings` -- CRUD + time_slots, auto_tasks ### Standalone Routes - `GET /shortcuts` -- closure route -> `shortcuts.index` (keyboard shortcuts reference page) - `GET /dashboard` -- closure route -> `dashboard` view (zone-filtered task counts) - `GET /layout-settings` -- closure route -> `layout-settings` view (localStorage-based layout config) ### Specialized Routes - `/agenda` -- AgendaController@index (task scheduling) - `/calendar/*` -- CalendarController (subscriptions, sync, stats) - `/analytics/*` -- TaskAnalyticsController (dashboard, by-area, by-context) - `/energy-scheduling/*` -- EnergySchedulingController (profiles, suggestions) - `/dependency-graph/*` -- DependencyGraphController (cycle detection, critical path) - `/bulk/*` -- BulkOperationsController (batch archive/complete/delete for tasks/projects/references) - `/activity` -- ActivityLogController (action logs, stats) - `/search` -- SearchController - `/statistics` -- StatisticsController - `/distribution` -- DistributionController - `/time-tracking/*` -- TimeTrackingController (timers) - `/export/*` -- ExportController (PDF, CSV, JSON) - `/seksjoner` -- SeksjonController - `/lists` -- ListController - `/quadrants` -- QuadrantController ### Task Sub-Routes - `/tasks/batch/*` -- TaskBatchController (batch updates, column updates, reorder) - `/tasks/{task}/chunks` -- TaskChunkController - `/tasks/{task}/documents` -- TaskDocumentController - `/tasks/{task}/dependencies` -- TaskDependencyController - `/tasks/{task}/time-slots` -- TaskTimeSlotController - `/tasks/convert/{task}` -- TaskConversionController (task<->project conversion)

### Project Dropdown Pollution (511 Unfiltered Projects) - TaskDataController and tagging view were showing ALL 511 projects unfiltered - 131 reference_list projects + completed projects polluted the dropdown - Fix: filter by `is_completed = false`, exclude `project_type = 'reference_list'`, group by `project_state` - Result: 511 -> ~103 projects (active, not completed, not reference_list) - Files: TaskFilterInboxWorkflowController.php, TaskDataController.php ## Environment Notes - APP_ENV=production, no staging exists - FORBIDDEN: migrate:fresh, migrate:reset, db:wipe, git reset --hard - DB: MySQL, database=todo_app

### Energy Validation: "med" Not "medium" - DB/views/validation all use `med` (StoreTaskRequest:32, UpdateTaskRequest:32) - Services also use `med` (PriorityService:84, SmartSuggestionsService:177) - If validation used `medium` at any point, it would reject valid values - Current state: correctly uses `in:low,med,high,none` ### ZoneController callProtectedMethod Reflection - ZoneController:136 uses ReflectionClass to call protected methods on ZonePivotController - Specifically calls `normalizeZoneAreas` (a protected method) via reflection - Fragile: breaks silently if method is renamed/removed - Files: ZoneController:105,136 -> ZoneDataController:68,110 ### services/index.js Is Dead Code - public/js/services/index.js references taskAPI, projectAPI, referenceAPI, notificationService - All imports commented out (lines 19-24); was designed for bundler that was never set up - File is never loaded by any view - References undefined globals if loaded standalone ### project-api.js Was Missing on Project/Reference Routes - project-api.js provides ProjectAPI class needed by projects.js and references.js - Was not included as script tag in app.blade.php for project/reference routes - Fix: added `<script src="js/services/project-api.js">` to conditional loading in app.blade.php - Files: resources/views/layouts/app.blade.php ### Vite Build: Missing @shopify/draggable Dependency - Vite build failed due to missing @shopify/draggable npm dependency - Fix: `npm install @shopify/draggable` then rebuild - Files: package.json, resources/js/draggable-sortable.js ### Backup File Clutter - Many JS files have .backup copies in public/js/ (tasks.js.backup, projects.js.backup, etc.) - No .gitignore rule for these; they ship with the codebase ### Bootstrap 5 Nested Dropdown Not Supported - Bootstrap 5 does not support `dropstart` inside `dropdown` (nested flyout submenus) - Navbar automation menu was using nested dropdown pattern, which silently failed - Fix: replaced with flat dropdown-header + items in `_navbar.blade.php` - Files: resources/views/partials/_navbar.blade.php

# EXPERT: Known Gotchas & Bugs > Last updated: 2026-03-11 | Agent: claude-code ## Critical ### DISC-001: Missing bootstrap/providers.php - bootstrap/providers.php was absent -> AppServiceProvider::boot() never ran - Paginator::useBootstrapFive() and AreaObserver never registered - Fix: created bootstrap/providers.php returning [App\Providers\AppServiceProvider::class] - Files: bootstrap/providers.php, app/Providers/AppServiceProvider.php ### DISC-004: Silent Observer Failure - When providers.php missing, Area::observe(AreaObserver::class) at AppServiceProvider:26 silently fails - No error thrown; observer just never registers - Applies to ALL boot() logic in AppServiceProvider ## High ### DISC-002: Paginator::useBootstrap() = Bootstrap 4 - AppServiceProvider:25 -- Paginator::useBootstrap() internally calls useBootstrapFour() in Laravel 12 - Must use Paginator::useBootstrapFive() when app uses BS5 CDN - Wrong method causes broken pagination styling ### JS Dependency Chain Broken - layouts/app.blade.php previously did not load api.js, notification.js, tagging.js - common.js and tasks.js depend on these; resulted in undefined function errors - Fix: added script tags for api.js, notification.js, tagging.js before common.js in layout - Files: resources/views/layouts/app.blade.php:88-90 ### taskAPI Reference in tasks.js - tasks.js referenced `taskAPI` (from task-api.js) but task-api.js was never loaded in layout - Fix: replaced taskAPI calls with direct `api.patchResource()` / `api.patch()` calls - Files: public/js/tasks.js, public/js/services/task-api.js ### APP_DEBUG Was False in Production - .env had APP_DEBUG=false, hiding all errors - Single-user app with no staging; errors must be visible during development - Changed to APP_DEBUG=true ## Medium ### DISC-003: Tailwind Pagination SVGs Without Tailwind - Laravel 12 defaults to Tailwind pagination views with SVG chevrons sized by w-5/h-5 - Without Tailwind CSS loaded, SVGs render at full intrinsic size (giant icons) - Fix: use useBootstrapFive() to get Bootstrap pagination views instead

## Form Requests - StoreTaskRequest, UpdateTaskRequest (app/Http/Requests/) - StoreProjectRequest, UpdateProjectRequest - Energy validation: `in:low,med,high,none` (NOT `medium`)

## Gotcha: callProtectedMethod Reflection Pattern ZoneController:136 has a `callProtectedMethod()` that uses `ReflectionClass` to call protected methods on other controllers (specifically `ZonePivotController::normalizeZoneAreas`). This callable is passed through ZoneDataController:68 as a parameter. **Risk**: Bypasses access control, fragile to refactoring, invisible to static analysis. **Location**: ZoneController:136, called at ZoneController:105, consumed at ZoneDataController:110 ## Controller Count by Domain | Domain | Controller count | |-----------|-----------------| | Task* | ~30 | | Agenda* | ~20 | | Project* | ~15 | | Area* | ~15 | | Zone* | ~12 | | Reference*| ~10 | | Setting* | ~8 | | Other | ~30 | ### TaskFilterInboxWorkflowController (app/Http/Controllers/TaskFilterInboxWorkflowController.php) Handles GTD process flow views (inbox, review, tagging): - `getReviewTask()`: fetches next review task; if null, redirects to `/tasks/tagging` - `getTaggingTask()`: project filtering with state grouping (active/later/waiting), zone filtering, excludes completed + reference_list projects - Project data passed to view: `groupedProjects` (keyed by state), `projectStates` list ### TaskDataController (app/Http/Controllers/TaskDataController.php) - `getFilteredProjects()`: same project filtering as tagging (exclude completed, reference_list, group by state, zone filter) - Used by task edit view for project dropdown ## Services (app/Services/) 25 service classes for cross-cutting concerns: ActivityLogService, BulkOperationsService, CalendarService, DependencyGraphService, ExportService, LookupDataService, NotificationService, PriorityService, ProjectService, QuickActionsService, RecurrenceService, RecurringPatternService, SearchService, SharingService, SmartSuggestionsService, StatisticsService, TaskAnalyticsService, TaskFilterService, TaskPrioritizationService, TaskTemplateService, TimeBlockingService, TimeCapacityService, TimeSlotService, TimeTrackingService, ZoneFilterService

# EXPERT: Controller Architecture > Last updated: 2026-03-11 | Agent: claude-code ## Pattern: Sub-Controller Delegation All major controllers use constructor-injected sub-controllers. The main controller acts as a facade, delegating to specialized classes. ### TaskController (app/Http/Controllers/TaskController.php) Injects: PaginationHelper, TaskRelationshipController, TaskDataController, TaskQueryController, TaskViewDataController, TaskResponseHandler, TaskFieldHandler ### TaskFilterController (app/Http/Controllers/TaskFilterController.php) Handles task filter views (inbox, next, later, etc.) + trash operations: - trash(): list soft-deleted tasks - restore($id): restore soft-deleted task - forceDestroy($id): permanently delete task - emptyTrash(): permanently delete all trashed tasks ### ProjectController Similar pattern with: ProjectDataController, ProjectLoaderController, ProjectViewDataController, ProjectResponseHandler, ProjectRelationshipController, ProjectFilterController, ProjectFilterQueryBuilder, ProjectFilterViewDataController ### ReferenceController Delegates to: ReferenceDataController, ReferenceQueryController, ReferenceViewDataController, ReferenceResponseHandler, ReferenceFieldHandler, ReferenceValidationController, ReferenceRelationshipController, ReferenceFilterController, ReferenceFilterQueryBuilder, ReferenceFilterViewDataController ### ZoneController (app/Http/Controllers/ZoneController.php) Injects: ZoneDataController, ZoneGoalscapeController, ZonePivotController, ZoneValidationController, ZoneResponseHandler, ZoneGoalscapeTreeBuilder, ZoneGoalscapeFormatter ### AgendaController (app/Http/Controllers/AgendaController.php) Injects: LookupDataService, AgendaCapacityController, AgendaTaskAssignmentController, AgendaTimeSlotController, TimeCapacityService Has ~20 related controllers for scheduling logic. ### AreaController Delegates to: AreaDataController, AreaHierarchyController, AreaPortionController (+Calculation, +Normalization, +Scaling, +Zone), AreaTimePreferenceController, AreaValidationController, AreaViewDataController, AreaResponseHandler