@@ -72,7 +72,6 @@ async function init() {
7272
7373 // 1. Theme (Immediate visual stability)
7474 initTheme ( ) ;
75- updateBootstrapTheme ( getEffectiveTheme ( ) ) ; // Sync Bootstrap
7675 console . log ( "✅ Theme System" ) ;
7776
7877 // 2. Internationalization
@@ -100,10 +99,10 @@ async function init() {
10099 // Fallback: try to show error on screen if possible
101100 const main = document . querySelector ( "main" ) ;
102101 if ( main ) {
103- main . innerHTML = `<div class="alert alert-danger m-4">
104- <h4>System Error</h4>
105- <p>Failed to initialize application: ${ e . message }
106- <button class="btn btn-outline-danger " onclick="location.reload()">Reload</button>
102+ main . innerHTML = `<div class="bg-red-500/10 border border-red-500/30 rounded p-6 m-4 text-red-400 ">
103+ <h4 class="text-lg font-bold mb-2" >System Error</h4>
104+ <p class="text-sm mb-3" >Failed to initialize application: ${ e . message }
105+ <button class="bg-red-500 hover:bg-red-600 text-white text-xs font-bold px-4 py-2 rounded transition-colors " onclick="location.reload()">Reload</button>
107106 </div>` ;
108107 }
109108 }
@@ -427,98 +426,46 @@ function runVLSMCalculation() {
427426 * Global Actions (Buttons)
428427 */
429428function setupGlobalActions ( ) {
430- const container = document . querySelector ( ".global-actions" ) ;
431- if ( ! container ) return ;
432-
433- container . innerHTML = "" ;
434-
435429 // --- History System Integration ---
436- // Create the panel and overlay (hidden by default)
437430 const { panel, overlay, content } = createHistoryPanel (
438- // On Load Item
439431 item => {
440- // Restore inputs
441432 const ipEl = document . getElementById ( "vlsm-ip" ) ;
442433 const hostsEl = document . getElementById ( "vlsm-hosts" ) ;
443434 if ( ipEl ) ipEl . value = item . network ;
444435 if ( hostsEl ) hostsEl . value = item . hosts ;
445-
446- // Go to dashboard/VLSM view
447436 showView ( "view-vlsm" , "VLSM CALCULATOR" ) ;
448437 panel . classList . remove ( "open" ) ;
449438 overlay . classList . remove ( "active" ) ;
450439 } ,
451- // On Delete Item
452- id => {
453- removeFromHistory ( id ) ;
454- refreshHistory ( ) ;
455- } ,
456- // On Clear All
457- ( ) => {
458- clearHistory ( ) ;
459- refreshHistory ( ) ;
460- }
440+ id => { removeFromHistory ( id ) ; refreshHistory ( ) ; } ,
441+ ( ) => { clearHistory ( ) ; refreshHistory ( ) ; }
461442 ) ;
462443
463- // Refresh function helper
464444 function refreshHistory ( ) {
465- updateHistoryPanel (
466- content ,
467- getHistory ( ) ,
468- getHistoryStats ( ) ,
469- ( ) => {
470- /* Load handled in createHistoryPanel closure above */
471- } ,
472- id => {
473- removeFromHistory ( id ) ;
474- refreshHistory ( ) ;
475- } ,
476- ( ) => {
477- clearHistory ( ) ;
478- refreshHistory ( ) ;
479- }
445+ updateHistoryPanel ( content , getHistory ( ) , getHistoryStats ( ) ,
446+ ( ) => { } ,
447+ id => { removeFromHistory ( id ) ; refreshHistory ( ) ; } ,
448+ ( ) => { clearHistory ( ) ; refreshHistory ( ) ; }
480449 ) ;
481450 }
482451
483- // Append Panel & Overlay to Body (outside header)
484452 document . body . appendChild ( overlay ) ;
485453 document . body . appendChild ( panel ) ;
486- // Add History Button to Header
487- const historyBtn = document . createElement ( "button" ) ;
488- historyBtn . className = "btn btn-outline-info btn-sm me-2" ;
489- historyBtn . innerHTML = "<i class=\"fas fa-history\"></i> Historial" ;
490- historyBtn . onclick = ( ) => {
491- refreshHistory ( ) ; // Update data before showing
492- panel . classList . add ( "open" ) ;
493- overlay . classList . add ( "active" ) ;
494- } ;
495- container . appendChild ( historyBtn ) ;
496- // ----------------------------------
497-
498- // Theme Button
499- const themeBtn = createThemeToggle ( ) ;
500- themeBtn . className = "btn btn-outline-secondary btn-sm me-2" ;
501- themeBtn . addEventListener ( "click" , ( ) => {
502- setTimeout ( ( ) => updateBootstrapTheme ( getEffectiveTheme ( ) ) , 50 ) ;
503- } ) ;
504- container . appendChild ( themeBtn ) ;
505-
506- // Lang Button
507- const langBtn = document . createElement ( "button" ) ;
508- langBtn . className = "btn btn-outline-secondary btn-sm" ;
509- langBtn . innerHTML = document . documentElement . lang === "es" ? "🇺🇸 EN" : "🇪🇸 ES" ;
510- langBtn . onclick = ( ) => switchAppLanguage ( langBtn ) ;
511- container . appendChild ( langBtn ) ;
512- }
513454
514- function switchAppLanguage ( btn ) {
515- const newLang = document . documentElement . lang === "es" ? "en" : "es" ;
516- setLanguage ( newLang ) ;
517- btn . innerHTML = newLang === "es" ? "🇺🇸 EN" : "🇪🇸 ES" ;
518- }
519-
520- function updateBootstrapTheme ( theme ) {
521- document . documentElement . setAttribute ( "data-bs-theme" , theme === "dark" ? "dark" : "light" ) ;
455+ // Add History button to the header next to the tools buttons
456+ const headerRight = document . querySelector ( "header .flex.items-center.gap-4:last-child" ) ;
457+ if ( headerRight ) {
458+ const historyBtn = document . createElement ( "button" ) ;
459+ historyBtn . className = "px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded bg-surface-dark text-slate-400 border border-border-dark hover:text-white hover:border-primary transition-all" ;
460+ historyBtn . innerHTML = '<span class="material-symbols-outlined !text-sm" style="vertical-align: middle;">history</span>' ;
461+ historyBtn . title = "History" ;
462+ historyBtn . onclick = ( ) => {
463+ refreshHistory ( ) ;
464+ panel . classList . add ( "open" ) ;
465+ overlay . classList . add ( "active" ) ;
466+ } ;
467+ headerRight . insertBefore ( historyBtn , headerRight . firstChild ) ;
468+ }
522469}
523470
524471// Boot
0 commit comments