Phase 0: Full frontend modernization — Laravel 12, Vite, Blade, Tiptap, design system, accessibility

[gloriafolaron]

Overview

This is a ground-up modernization of Leantime's entire frontend stack. It touches 1,086 files across 310 commits — every layer from the build system to the template engine to the CSS architecture to the JavaScript runtime. The goal is to replace a decade of accumulated legacy tooling with a modern, maintainable foundation that can support Leantime's next generation of features.

This is not a cosmetic refresh. It is an infrastructure overhaul that changes how templates are authored, how styles are defined, how JavaScript is loaded, how modals work, how forms are built, and how the design system is governed — while preserving every existing feature and user-facing behavior.

By the numbers:

• 540 PHP/Blade files changed (19,294 insertions / 13,795 deletions)
• 184 JS files changed (8,209 insertions / 12,172 deletions)
• 53 CSS files changed (3,674 insertions / 10,733 deletions)
• 142 legacy template files deleted (.tpl.php, .sub.php, .inc.php)
• 272 new Blade templates created
• ~4 MB eliminated from initial page load (TinyMCE, jQuery UI, Bootstrap, dead libraries)

---

1. Build System & Framework Upgrades

Laravel 12

Upgraded from Laravel 11 to Laravel 12. Updated framework dependencies, service providers, and kernel configuration to match the new structure.

Laravel Mix → Vite

Replaced the Webpack-based Laravel Mix build with Vite. This is not just a config swap — the entire asset pipeline was restructured:

• Converted all LESS files to standard CSS
• Rewrote entry points to use ES module imports instead of CommonJS require()
• Added @rollup/plugin-commonjs to handle legacy CJS libraries (jstree, DataTables, FullCalendar) that cannot be converted
• Created a virtual jQuery module so that import $ from 'jquery' works throughout the codebase without bundling jQuery multiple times
• Production builds now complete in ~6 seconds (down from ~45s with Webpack)
• Source maps work correctly in development for the first time

Tailwind CSS 3.4 → 4.x

Upgraded to Tailwind v4's CSS-native configuration model:

• Replaced tailwind.config.js with CSS-based config in resources/css/app.css
• Changed prefix from tw- (hyphen) to tw: (colon) across every template
• Only @tailwind components and @tailwind utilities are active (base layer disabled to avoid conflicts with existing styles)

HTMX 1.x → 2.x

Upgraded HTMX to version 2 and added the Idiomorph morphing extension for smoother DOM diffing during partial swaps. Added the head-support and preload extensions.

---

2. Template Migration — Legacy PHP to Blade

Complete conversion

Every legacy .tpl.php, .sub.php, and .inc.php template has been converted to Laravel Blade (.blade.php). This was done domain by domain:

• Tickets — All main views (showAll, showKanban, showTicket) plus submodules and modal dialogs
• Projects — All project templates including settings tabs, hub, and blueprints
• Sprints, Settings, Users, Clients — Full conversion
• Calendar, Comments, Files — Full conversion
• Timesheets, Wiki — Full conversion, with wiki getting a complete 3-panel redesign
• Canvas variants (14 domains) — All converted, leveraging the shared Canvas base
• Ideas — Full conversion including wall and kanban views
• Api, Connector, CsvImport, Errors, Install, Reports, Strategy — Remaining domains converted
• Auth, TwoFA, Help — Login, reset, invite flows, 2FA verification, and help tutorials

After conversion, 142 legacy template files were deleted and the legacy template extension registration was removed from the view system. The application no longer loads or renders .tpl.php files.

Bootstrap grid class removal

After the Blade conversion, every template was scrubbed to remove Bootstrap-specific grid classes (col-md-*, row, offset-*, pull-right, clearfix) across all domains including Help, Canvas, Goalcanvas, Strategy, shared Views, and plugin templates. These were replaced with flexbox utilities or lightweight CSS shims where layout was still needed.

---

3. Shared Blade Component Library

A reusable component library was built in app/Views/Templates/components/ to standardize all UI elements across the application. Every hardcoded HTML form element and interactive pattern was systematically converted to use these components:

Form components

Component	Replaces	Key features
forms/input	<input type="text|hidden|number|email|password|time">	Type variants, :bare prop for inline contexts
forms/select	<select>	SlimSelect integration, :bare prop, grouped options
forms/textarea	<textarea>	Auto-sizing, TipTap-aware (skips rich editors)
forms/checkbox	<input type="checkbox">	ID generation, disabled state, label wrapping, slot support
forms/radio	<input type="radio">	ID generation, disabled state, label wrapping, slot support
forms/date	<input class="dates">	Flatpickr integration, date/datetime modes
forms/file	<input type="file">	Uppy integration, :bare prop

UI components

Component	Purpose
button	All buttons and button-links with type variants (primary, secondary, danger, ghost)
pageheader	Page title with icon and breadcrumb slot
tabs	Tab navigation with active state
loader / loadingText	Loading indicators and skeleton screens
elements/badge	Status badges and labels
elements/card	Content cards with glass effect support
progress	Universal emboss-style progress bar
avatar	User avatar display
dateInline	Inline date display with icon/text toggle

The bare prop pattern

All form components support :bare="true" which outputs just the raw HTML element with no wrapper markup and no framework classes. This is essential for:

• Title inputs that need transparent, full-width styling
• Color picker and tag inputs that expect specific DOM structure for jQuery plugin compatibility
• Inline form layouts with float-based label+input patterns
• Table cell selects in filter bars and data rows
• HTMX-attributed elements that need clean DOM

DaisyUI evaluation

DaisyUI 5 was installed and all templates were converted to use its component classes. After thorough testing, DaisyUI was reverted — the class naming conflicts with Leantime's existing design token system created more problems than it solved. The component conversions remain (Blade components are still used), but they output Bootstrap-compatible class names styled by our own CSS. The DaisyUI package remains installed for future consideration but is not actively used for production styling.

---

4. CSS Architecture & Design System

Design token system

The entire CSS codebase was systematically swept to replace hardcoded values with CSS custom properties. This was done in 17 numbered sweeps covering every property type:

Sweep	Property	What changed
1	Brand colors	All hardcoded #004666, #1b75bb, etc. → var(--accent1), var(--accent2)
2	Neutral colors	All hardcoded grays/whites/blacks → var(--primary-font-color), var(--secondary-background), etc.
3	Dark mode	Shadows and remaining neutrals verified for dark mode rendering
4	Focus indicators	focus-visible outlines added to all custom interactive elements
5	Screen reader	aria-labels, aria-hidden, and form labels added throughout
6a-c	Loading states	role=status, sr-only text, aria-live=polite on all HTMX indicators/targets
9	Touch targets	All interactive elements enforced to 44×44px minimum (WCAG 2.5.8)
10	Editor typography	Tiptap editor fonts normalized to design scale
11	Border radius	All hardcoded border-radius → var(--box-radius) scale
12a-b	Spacing	All off-scale spacing snapped to 4px grid
13	Line height	All unitless line-heights normalized to tokens
14	Transitions	All transition durations normalized to tokens
15	Opacity	All opacity values normalized to tokens
16	Z-index / font-size	Z-index layers and remaining font-size px values tokenized
17	Box-shadow / font-weight	Final shadow and weight normalization

Semantic alias layer

Added accent3 and accent4 tokens, plus semantic aliases that map purpose to value (e.g., --feedback-success, --feedback-warning). This lets themes change meaning without hunting through hundreds of property declarations.

Glass morphism

Added a tiered glass effect system with CSS custom properties:

• --glass-blur, --glass-background, --glass-border for standard glass
• --glass-blur-subtle tier for lighter effects on widgets and selectables
• Applied to modals, dropdowns, tooltips, the left sidebar, and content cards
• Dark mode values tuned independently
• Hardcoded blur values in the Tiptap editor tokenized

Typography

Added Hanken Grotesk as the new default font family, with fallbacks to Roboto and system fonts. All font-size, font-weight, and line-height values across the CSS codebase were normalized to use the design token scale.

Design system naming (v3)

Implemented a comprehensive naming convention pass (Phases 0–5) to make all CSS custom properties consistent and predictable. This renamed tokens across the entire system to follow a --{category}-{property}-{variant} pattern.

---

5. JavaScript Modernization

jQuery elimination

Approximately 600 jQuery calls across all domain controllers were converted to vanilla JavaScript. This includes:

• $(document).ready() → DOMContentLoaded listeners
• $.ajax() → fetch() with proper credentials and headers
• $('.selector').on('click') → addEventListener with event delegation
• $.each(), $.extend(), $.trim() → native equivalents
• $(el).show/hide/toggle() → classList and style.display manipulation
• $(el).val(), .text(), .html() → .value, .textContent, .innerHTML

jQuery UI removal

• Datepicker → Flatpickr (lighter, more customizable, better mobile support)
• Sortable → SortableJS (modern drag-and-drop with nested list support)
• Tabs → Vanilla JS tabsController (reads data-tab-target attributes)
• Custom nestedSortable rewritten to use SortableJS internally

Other library replacements

Removed	Replaced with	Rationale
jQuery Growl	Vanilla toast utility	No jQuery dependency, CSS custom property theming
Chosen.js	SlimSelect	Modern, accessible, smaller bundle
nyroModal	Native <dialog> + modalManager.js	Browser-native, no jQuery, frosted-glass backdrop
simpleColorPicker	SlimSelect-based picker	Consistent with other select patterns
jquery.alerts	Removed (unused)	Dead code

Domain JS lazy-loading

Instead of loading all 46 domain JS files on every page (~110 KB), the build now uses import.meta.glob to split them into individual chunks. Only the active module's scripts are loaded:

• The page's $module variable determines which domain JS to fetch
• An hx-boost domain JS reloader automatically loads the correct scripts when SPA-style HTMX navigation changes the active module
• 17 canvas controllers were consolidated into a shared factory, eliminating 16 near-identical files

Performance impact

Eliminated approximately 4 MB from the initial page load:

• TinyMCE 5.10.9: 3.6 MB (replaced by Tiptap at ~480 KB)
• jQuery UI: ~400 KB
• Bootstrap CSS/JS: ~300 KB
• Dead libraries (nyroModal, jquery.alerts, Chosen CSS/JS, Growl): ~200 KB
• Domain JS (deferred): ~110 KB moved to lazy loading

---

6. Rich Text Editor — TinyMCE → Tiptap

The monolithic TinyMCE editor (3.6 MB, version 5.10.9 with ~20 custom plugins) was replaced with a modern Tiptap-based editor built on ProseMirror:

Features

• Slash commands — Type / for a command palette (headings, lists, code blocks, tables, etc.)
• @mentions — Type @ to search and mention users
• Column layouts — Multi-column content blocks
• Math rendering — KaTeX integration for mathematical notation
• Code blocks — Syntax-highlighted code with language selection
• Tables — Full table editing with add/remove rows and columns
• Mobile-responsive toolbar — Apple-like floating toolbar that adapts to screen size

Three editor variants

• Complex (wiki) — Full toolbar, slash commands, mentions, columns, math
• Simple (comments, descriptions) — Basic formatting, links, lists
• Notes — Minimal variant for sticky notes

Integration

• All Blade templates updated to use Tiptap instead of TinyMCE
• HTMX-aware — properly re-initializes after partial swaps
• Scoped CSS prevents editor styles from leaking into the page

---

7. Modal System — nyroModal → Native Dialog

Replaced the jQuery-based nyroModal plugin with a modern modal system built on the browser's native <dialog> element:

modalManager.js

• Opens ticket modals, article dialogs, and other content as <dialog> overlays
• Fetches content via fetch(), injects into the dialog, and manages lifecycle
• Frosted-glass backdrop using CSS backdrop-filter: blur(12px) with 50% opacity overlay
• Re-initializes modal handlers after hx-boost SPA navigation
• Handles form submissions inside modals, including FormData with submit button values
• Hash-based URL routing (#/tickets/showTicket/123) for deep-linkable modals

Migration scope

• All $.nmManual() and $.nyroModal() calls converted
• All Bootstrap <div class="modal fade"> patterns converted
• All data-dismiss="modal" attributes removed
• All jQuery(...).modal('show'|'hide') calls eliminated

---

8. HTMX & SPA Navigation

hx-boost navigation

Added hx-boost="true" to the main content area, enabling SPA-like navigation where clicking links swaps just the page content instead of doing a full page reload. This includes:

• A loading indicator during navigation transitions
• Automatic domain JS reloading when the active module changes
• Proper hx-target and hx-select attributes to prevent the target inheritance bug (where child HTMX elements inherit the parent's swap target and accidentally replace the entire page)

HTMX fixes

• Fixed hx-select inheritance — added explicit targets to all HTMX elements inside .primaryContent to prevent the .rightpanel ancestor's swap target from being inherited
• Added aria-live="polite" to all HTMX swap target containers for screen reader announcements
• Re-activated inert <script> tags after DOMParser innerHTML swaps (HTMX strips script tags by default)

---

9. Accessibility Improvements

Systematic accessibility improvements applied across the entire application:

Category	Changes
Touch targets	All interactive elements (buttons, links, checkboxes, radios, menu items) enforced to 44×44px minimum per WCAG 2.5.8
Focus indicators	focus-visible outlines added to all custom interactive elements (cards, clickable divs, icon buttons)
Screen reader	aria-labels added to all icon-only buttons and links, aria-hidden="true" on decorative icons
Form labels	All form inputs associated with labels via for/id attributes
Loading states	All loading indicators have role="status" and sr-only descriptive text
HTMX regions	All HTMX swap targets have aria-live="polite" for dynamic content announcements
Keyboard navigation	Custom clickable elements (cards, kanban items) made keyboard-accessible with tabindex="0" and Enter/Space handlers
Zoom	Removed maximum-scale=1 from viewport meta tag to allow user zoom (WCAG 1.4.4)
Priority indicators	Added aria-labels to color-only priority border ticket cards

---

10. Mobile & Responsive Improvements

Change	Details
Viewport units	All 100vh replaced with 100dvh (dynamic viewport height) for correct mobile browser behavior
Table overflow	Added horizontal scroll wrappers around all data tables that were breaking on mobile
Fixed widths	Replaced hardcoded pixel widths with responsive max-width values
Modal breakpoints	Added responsive sizing so modals don't overflow on small screens
Dashboard grid	Added responsive breakpoints for the GridStack widget dashboard
Performance	Replaced transition: all with specific property transitions to prevent layout thrashing on mobile

---

11. Page-Specific Fixes & Polish

Timesheets

• Modernized toolbar from float-based layout to flexbox
• Added inline editing to My Timesheets list view
• Fixed filter icon, data loading, and dropdown rendering
• Moved "Add Hours" button to right side of toolbar
• Added visual hierarchy to list view (dimmed dates, types, zero-hour entries)
• Constrained project/ticket selector widths in week view
• Fixed total alignment and empty ticket messaging
• Transaction safety and timezone handling improvements

Calendar

• Replaced float-based toolbar with flexbox
• Built scrollable day selector with 5-week date range
• Fixed dashboard calendar widget rendering under Vite
• Restored drag-and-drop from todo widget to calendar
• Fixed duplicate events when dragging
• Aligned day selector with grid columns, added event tooltips

Wiki

• Complete redesign with modern 3-panel Tiptap layout
• Activity feed integration
• Fixed double-escaping in Blade template

Notes

• Fixed inline editing, pin refresh, grid layout on HTMX navigation
• Resolved Packery layout, TipTap scoping, and HTMX conflicts
• Right-aligned filter controls, fixed scroll behavior

Dashboard & Widgets

• Fixed widget headers, dropdowns, resize handles, subtitle styling
• Repaired My ToDos filter and group-by HTMX interactions
• Allowed dropdown menus to overflow widget boundaries
• Aligned group-by labels with radio buttons
• Tightened ToDos row layout
• Fixed filter icon and widget action promotion timing

Project Settings

• Used bare inputs for budget fields to avoid full-width stretch
• Marked selects as required
• Bare label inputs on status settings, fixed Add Status icon
• Bare role inputs on Team tab, fixed HTML link rendering
• Aligned To-Do Status Settings into proper column grid
• Fixed SlimSelect double borders and Tiptap not rendering

Kanban

• Added SortableJS bridge for drag-and-drop (replacing jQuery UI sortable)
• Fixed recurring icon overflow and filter bar auto-opening

Admin & Settings

• Polished company section page layouts
• Fixed auth settings toggle layout
• Added missing jQuery UI tabs initialization for company settings

Plugins / Apps Page

• Redesigned from stacked vertical ticketBox cards to horizontal flex layout
• Plugin image left, content center (name, version, vendor, description), controls right
• Updated skeleton loading states to match new horizontal card layout
• Cleaned up marketplace category headers (h1 → h5, removed inline borders)
• Simplified control wrappers for both installed and marketplace plugins

Other fixes

• Fixed Gantt chart initialization and timeline tab rendering
• Fixed milestone loaders inheriting wrong HTMX targets
• Fixed reports MySQL CAST compatibility (INTEGER → SIGNED)
• Fixed Uppy file upload timing under Vite module loading
• Fixed canvas controller ordering and eager-load domain JS
• Fixed tagsInput strict-mode error and SlimSelect re-init crash
• Fixed various Blade parsing and template rendering issues
• Fixed login/install page rendering without Bootstrap

---

12. Submodule Updates

The app/Plugins/ submodule was updated throughout to keep plugins compatible with the modernization changes:

• Migrated tw- prefix to tw: for Tailwind v4
• Converted plugin templates to Blade where needed (PgmPro, Llamadorian cleanup)
• Applied bare prop conversions to plugin form components
• Fixed Notes header layout, filter rows, sort/search positioning
• Fixed AdvancedAuth HTMX compatibility
• Applied Pomodoro timer styling and drag-and-drop support
• Applied flagged-items token sweep and code style fixes
• Strategy/program settings fixes

---

Known Remaining Work

Bootstrap patterns still present

Pattern	Files	Notes
data-toggle="dropdown"	~39	Converting dropdownPill + inlineSelect shared components cascades to ~30 consumers
.nav-tabs / .nav-pills	~2	Left sidebar menu + ticket submenu
.alert.alert-*	~9	Mostly Plugins/Billing; component exists
.label.label-*	~9	Badge component exists
.btn-group	~10	Component exists, internal class still Bootstrap-named
.form-group	~15	Layout-only, low priority

Other

• A few secretInput inline date pickers were intentionally skipped (specialized transparent styling)
• The marketplace API is currently experiencing availability issues (unrelated to this PR — external service timeout)

---

Test Plan

Core Navigation

• Dashboard loads, widgets render, GridStack drag-and-drop works
• Left sidebar navigation works, icons display correctly
• hx-boost SPA navigation transitions smoothly between pages
• Domain JS loads correctly when navigating between different modules

Tickets & Kanban

• Ticket list view renders with proper table styling
• Kanban board renders, cards drag between columns via SortableJS
• Ticket modal opens as dialog overlay with frosted-glass backdrop
• Quick-add works from both list and kanban views
• Ticket title input renders as large transparent field

Projects

• Project hub renders with working HTMX client filter
• Project settings — all tabs render (General, Status, Team, Budget)
• All form fields work: date pickers, selects, checkboxes, color pickers
• Blueprint creation flow works

Timesheets

• Week view renders with proper column alignment
• List view renders with inline editing
• Filter bar works, Add Hours button is accessible
• Totals calculate and display correctly

Calendar

• Month view renders via FullCalendar
• Day selector scrolls and highlights today
• Drag-and-drop from todo widget to calendar works
• Event creation modal opens correctly

Wiki

• 3-panel layout renders (sidebar, content, activity)
• Tiptap editor loads with full toolbar
• Slash commands and @mentions work
• Article creation/editing saves correctly

Notes

• Notes grid renders with Packery layout
• Inline title editing works
• Pin/unpin refreshes correctly
• TipTap editor initializes in note cards

Canvas / Goals

• All 14 canvas variants render correctly
• Card creation, editing, and drag-and-drop work
• Goal canvas with its custom service layer works

Forms & Components

• All form components render correctly (input, select, textarea, checkbox, radio, date, file)
• :bare prop produces clean, unwrapped output
• SlimSelect initializes on all select elements
• Flatpickr initializes on all date inputs

Editor

• Tiptap loads in all three variants (complex, simple, notes)
• Slash commands open command palette
• @mentions search and insert correctly
• Tables, code blocks, and column layouts work
• Editor re-initializes after HTMX partial swaps

Modals

• Ticket modal opens/closes correctly
• Frosted-glass backdrop renders
• Form submission inside modals works
• Modal re-initializes after hx-boost navigation

Admin & Settings

• Account settings — all tabs render, theme settings work
• Company settings — all sections accessible, tabs initialize
• Auth settings — toggle layout renders correctly
• Apps page (My Apps) — horizontal card layout, enable/disable/remove links work
• Apps page (Marketplace) — horizontal cards with "Learn More" buttons (when API is available)

Visual & Responsive

• Dark mode renders correctly on all pages
• Mobile responsive — sidebar collapses, tables scroll, modals resize
• Glass effects render on modals, dropdowns, sidebar
• All design tokens resolve correctly (no broken var() references)

Accessibility

• Tab navigation reaches all interactive elements
• Screen reader announces loading states and dynamic content
• All icon-only buttons have accessible labels
• Touch targets are at least 44×44px
• Page is zoomable (no maximum-scale restriction)

cc @marcelfolaron

🤖 Generated with Claude Code

[CLAassistant]

All committers have signed the CLA.

[gloriafolaron]

Update: Timesheets, Menu Icons, and UI Polish

@marcelfolaron — new batch of changes pushed, summary below.

New in this push (19 commits)

Timesheets

• Inline editing for My Timesheets list view (click-to-edit hours, project/ticket selectors)
• Fixed list view save, validation, total alignment, and empty ticket message
• Constrained project/ticket selector widths and aligned week view total
• Fixed list view filter icon and data loading

UI Polish

• Fixed filter bar layout with flexbox and proper label stacking
• Increased table row height and toolbar-to-header spacing
• Fixed active column color and aligned timesheet dropdowns
• Made active column body cells transparent to match card background
• Scoped today indicator to header cell only with rounded outline

Menu

• Fixed missing icons in left sidebar nav items
• Removed duplicate icon rendering in nav item template
• Added strategy overview menu language keys