botui/TASKS.md
Rodrigo Rodriguez (Pragmatismo) 1f95ac7a15 refactor: Extract inline CSS/JS to separate files for monitoring module
- Create individual CSS files: monitoring.css, alerts.css, health.css, logs.css, metrics.css, resources.css
- Create individual JS files: monitoring.js, alerts.js, health.js, logs.js, metrics.js, resources.js
- Update HTML files to reference external CSS/JS files
- Add CSS/JS files for other modules (analytics, chat, mail, meet, tasks, etc.)
- Remove obsolete implementation plan files
2025-12-07 09:56:27 -03:00

7.5 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.


Files Requiring CSS Extraction (34 files)

File Module Priority
suite/home.html Home High
suite/partials/contexts.html Partials Medium
suite/partials/apps_menu.html Partials Medium
suite/partials/user_menu.html Partials Medium
suite/settings/index.html Settings High
suite/tasks/tasks.html Tasks High
suite/meet/meet.html Meet High
suite/attendant/index.html Attendant High
suite/monitoring/alerts.html Monitoring Medium
suite/monitoring/health.html Monitoring Medium
suite/monitoring/logs.html Monitoring Medium
suite/monitoring/home-dashboard.html Monitoring Medium
suite/monitoring/resources.html Monitoring Medium
suite/monitoring/metrics.html Monitoring Medium
suite/monitoring/index.html Monitoring High
suite/monitoring/monitoring.html Monitoring Medium
suite/admin/groups.html Admin Medium
suite/admin/users.html Admin Medium
suite/admin/index.html Admin High
suite/admin/dns.html Admin Medium
suite/tools/compliance.html Tools High
suite/research/research.html Research High
suite/chat/projector.html Chat Medium
suite/editor.html Editor High
suite/sources/index.html Sources High
suite/calendar/calendar.html Calendar High
suite/mail/mail.html Mail High
suite/auth/reset-password.html Auth High
suite/auth/login.html Auth High
suite/auth/register.html Auth High
suite/auth/forgot-password.html Auth High
suite/drive/index.html Drive High
suite/designer.html Designer High
suite/paper/paper.html Paper High

Files Requiring JS Extraction (35 files)

File Module Priority
suite/index.html Index High
suite/settings/index.html Settings High
suite/tasks/tasks.html Tasks High
suite/meet/meet.html Meet High
suite/monitoring/services.html Monitoring Medium
suite/monitoring/health.html Monitoring Medium
suite/monitoring/alerts.html Monitoring Medium
suite/monitoring/logs.html Monitoring Medium
suite/monitoring/resources.html Monitoring Medium
suite/monitoring/home-dashboard.html Monitoring Medium
suite/monitoring/metrics.html Monitoring Medium
suite/monitoring/index.html Monitoring High
suite/monitoring/monitoring.html Monitoring Medium
suite/attendant/index.html Attendant High
suite/sources/index.html Sources High
suite/admin/users.html Admin Medium
suite/admin/groups.html Admin Medium
suite/admin/dns.html Admin Medium
suite/admin/index.html Admin High
suite/chat/projector.html Chat Medium
suite/research/research.html Research High
suite/tools/compliance.html Tools High
suite/mail/mail.html Mail High
suite/calendar/calendar.html Calendar High
suite/editor.html Editor High
suite/auth/reset-password.html Auth High
suite/auth/login.html Auth High
suite/auth/register.html Auth High
suite/auth/forgot-password.html Auth High
suite/base.html Base Critical
suite/home.html Home High
suite/analytics/analytics.html Analytics High
suite/designer.html Designer High
suite/paper/paper.html Paper High
suite/drive/index.html Drive High

Extraction Strategy

CSS Files to Create

suite/css/home.css
suite/css/partials.css (combined contexts, apps_menu, user_menu)
suite/settings/settings.css ✓ (already created)
suite/tasks/tasks.css
suite/meet/meet.css
suite/attendant/attendant.css ✓ (already created)
suite/monitoring/monitoring.css (combined all monitoring views)
suite/admin/admin.css ✓ (already created)
suite/tools/tools.css ✓ (already created)
suite/research/research.css ✓ (already created)
suite/chat/chat.css
suite/editor.css
suite/sources/sources.css ✓ (already created)
suite/calendar/calendar.css ✓ (already created)
suite/mail/mail.css
suite/auth/auth.css ✓ (already created)
suite/drive/drive.css ✓ (already created)
suite/designer.css
suite/paper/paper.css ✓ (already created)
suite/analytics/analytics.css

JS Files to Create

suite/js/home.js
suite/settings/settings.js ✓ (already created)
suite/tasks/tasks.js
suite/meet/meet.js
suite/monitoring/monitoring.js (combined all monitoring scripts)
suite/attendant/attendant.js ✓ (already created)
suite/sources/sources.js ✓ (already created)
suite/admin/admin.js ✓ (already created)
suite/chat/chat.js
suite/research/research.js ✓ (already created)
suite/tools/tools.js ✓ (already created)
suite/mail/mail.js
suite/calendar/calendar.js ✓ (already created)
suite/editor.js
suite/auth/auth.js ✓ (already created)
suite/css/base.js
suite/analytics/analytics.js
suite/designer.js
suite/paper/paper.js ✓ (already created)
suite/drive/drive.js ✓ (already created)

Completed Extractions (CSS/JS files created, HTML not yet modified)

  • suite/admin/admin.css, admin.js
  • suite/auth/auth.css, auth.js
  • suite/calendar/calendar.css, calendar.js
  • suite/settings/settings.css, settings.js
  • suite/drive/drive.css, drive.js
  • suite/attendant/attendant.css, attendant.js
  • suite/paper/paper.css, paper.js
  • suite/research/research.css, research.js
  • suite/sources/sources.css, sources.js
  • suite/tools/tools.css, tools.js

Remaining Tasks

Phase 1: Create Missing CSS/JS Files COMPLETE

  • suite/css/home.css, js/home.js
  • suite/css/partials.css (contexts, apps_menu, user_menu)
  • suite/tasks/tasks.css, tasks.js
  • suite/meet/meet.css, meet.js
  • suite/monitoring/monitoring.css, monitoring.js
  • suite/chat/chat.css, chat.js
  • suite/editor.css, editor.js
  • suite/mail/mail.css, mail.js
  • suite/js/base.js
  • suite/analytics/analytics.css, analytics.js
  • suite/designer.css, designer.js

Phase 2: Modify HTML Files

Replace inline <style> and <script> blocks with external file references:

<!-- Replace inline styles with: -->
<link rel="stylesheet" href="module.css">

<!-- Replace inline scripts with: -->
<script src="module.js"></script>

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

Statistics

Category Count
Files with inline CSS 34
Files with inline JS 35
Unique files total ~38
CSS/JS already created 21 modules
CSS/JS remaining 0 modules

Notes

  1. Some files have both inline CSS and JS (e.g., paper.html, research.html)
  2. Monitoring module has 9 HTML files - consider consolidating CSS/JS
  3. Admin module has 4 HTML files - CSS/JS can be consolidated
  4. Auth module has 4 HTML files - CSS/JS already extracted
  5. Partials should share a single CSS file
  6. base.html contains critical JS for app menus - extract to base.js