botui/TASKS.md
Rodrigo Rodriguez (Pragmatismo) 69654f37d6 refactor(ui): extract inline CSS/JS to external files
Phase 2 of CSS/JS extraction - replace inline styles and scripts with
external file references for better maintainability and caching.

Files updated:
- home.html -> css/home.css, js/home.js
- tasks/tasks.html -> tasks/tasks.css, tasks/tasks.js
- admin/index.html -> admin/admin.css, admin/admin.js
- analytics/analytics.html -> analytics/analytics.css, analytics/analytics.js
- mail/mail.html -> mail/mail.css, mail/mail.js
- monitoring/monitoring.html -> monitoring/monitoring.css, monitoring/monitoring.js
- attendant/index.html -> attendant/attendant.css, attendant/attendant.js

All JS wrapped in IIFE pattern to prevent global namespace pollution.
Functions called from HTML onclick handlers exposed via window object.
HTMX reload handlers included for proper reinitialization.

Per PROMPT.md: no CDN links, HTMX-first approach, local assets only.
2026-01-10 20:12:48 -03:00

3.9 KiB

BotUI CSS/JS Extraction Tasks

Overview

This document lists ALL HTML files in botui/ui/suite that contain inline <style> and/or <script> tags that need to be extracted to separate CSS/JS files.


Phase 1: Create CSS/JS Files COMPLETE

All external CSS/JS files have been created.


Phase 2: Modify HTML Files IN PROGRESS

Completed Extractions

File CSS JS Status
suite/home.html Done - uses css/home.css, js/home.js
suite/tasks/tasks.html Done - uses tasks/tasks.css, tasks/tasks.js
suite/admin/index.html Done - uses admin/admin.css, admin/admin.js
suite/analytics/analytics.html Done - uses analytics/analytics.css, analytics/analytics.js
suite/mail/mail.html Done - uses mail/mail.css, mail/mail.js
suite/monitoring/monitoring.html Done - uses monitoring/monitoring.css, monitoring/monitoring.js
suite/attendant/index.html Done - uses attendant/attendant.css, attendant/attendant.js

Remaining Files

File CSS JS Priority
suite/admin/users.html Medium
suite/admin/groups.html Medium
suite/admin/dns.html N/A Medium
suite/admin/billing.html N/A Low
suite/admin/roles.html N/A Low
suite/admin/contacts.html N/A Low
suite/admin/organization-settings.html N/A Low
suite/admin/organization-switcher.html Low
suite/admin/search-settings.html Low
suite/auth/login.html High
suite/auth/register.html High
suite/auth/forgot-password.html High
suite/auth/reset-password.html High
suite/auth/bootstrap.html Medium
suite/analytics/partials/business-reports.html Low
suite/monitoring/alerts.html Medium
suite/monitoring/health.html Medium
suite/monitoring/logs.html Medium
suite/monitoring/metrics.html Medium
suite/monitoring/resources.html Medium

Phase 3: Verification

  • All HTML files have no inline <style> tags
  • All HTML files have no inline <script> tags (except external src references)
  • All pages render correctly
  • All JavaScript functionality works
  • No console errors

External Files Reference

CSS Files

suite/css/home.css
suite/css/partials.css
suite/admin/admin.css
suite/analytics/analytics.css
suite/attendant/attendant.css
suite/auth/auth.css
suite/calendar/calendar.css
suite/chat/chat.css
suite/designer.css
suite/drive/drive.css
suite/editor.css
suite/mail/mail.css
suite/meet/meet.css
suite/monitoring/monitoring.css
suite/paper/paper.css
suite/research/research.css (needs creation)
suite/settings/settings.css
suite/sources/sources.css
suite/tasks/tasks.css
suite/tools/tools.css

JS Files

suite/js/home.js
suite/js/base.js
suite/admin/admin.js
suite/analytics/analytics.js
suite/attendant/attendant.js
suite/auth/auth.js
suite/calendar/calendar.js
suite/chat/chat.js
suite/designer.js
suite/drive/drive.js
suite/editor.js
suite/mail/mail.js
suite/meet/meet.js
suite/monitoring/monitoring.js
suite/paper/paper.js
suite/research/research.js
suite/settings/settings.js
suite/sources/sources.js
suite/tasks/tasks.js
suite/tools/tools.js

Notes

  1. All extracted JS uses IIFE pattern to prevent global namespace pollution
  2. Functions that need to be called from HTML onclick handlers are exposed via window.functionName
  3. HTMX reload handlers are included to reinitialize when content is swapped
  4. CSS files contain all styles including responsive breakpoints
  5. No CDN links - all assets are local per PROMPT.md requirements