solidstats 1.0.0 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a77d4bb173582d123384ccdaad313743f1305432d26b03d9f9489512fd5a07fa
-  data.tar.gz: 7ff358c8b80b43483c308956b408928fa2ef9d4e729b06c7446d37d730a86ecf
+  metadata.gz: 1087b955c118f56234de6e254a1c4f8fbb25184caccae8e72756d277b77d8a4d
+  data.tar.gz: fd69b3cec25f03c5c2854b76b7ea5fe5154c762a6b22dbe50ef6e423d780aef5
 SHA512:
-  metadata.gz: 21c7e3383dd6e05ba382df3179a4935797b96872731e9e7cc4f9b3a7bed991a1cc93c44cc9b517a4333b97387475b73642ece0b69aba0e18df4a2a55508dcdb6
-  data.tar.gz: 6ddc2a6c605f4975b6fd7e614cb01e9830b1616cf40597a2a779ec81c0673403517d39f961603f8ac12fda134461af0bd9b13823c3e5552e7d6ae3f36008c66e
+  metadata.gz: 45d75fb7fbbccb543628e14747177807f8fb7b652be35cb74d05a5fe65b666731c4290413ce7e0da2a5038cb9d68c265916bbe2421949b073424eb5b603018ad
+  data.tar.gz: 8d425d7b2f9abcba38460f5ec97fa0e5021fbc1542e00442c97e7b099707bc4a11d578f53f440fc213885e8172706fa947fd57f025283abfdfe09b93d8a965e6

data/CHANGELOG.md

@@ -5,6 +5,91 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0] - 2025-05-26
+
+### Added
+- **Complete Gem Metadata System**: Comprehensive gem dependency tracking and management
+  - Dual-view interface with grid and table layouts
+  - Real-time search and filtering by gem name, status, and other criteria
+  - Smart sorting by name, status, release date, and version information
+  - Status indicators for outdated, up-to-date, and unavailable gems
+  - Dependency visualization with runtime dependency details
+  - Version comparison showing current vs. latest versions
+  - CSV export functionality for gem data analysis
+  - Refresh capability to update gem metadata from RubyGems API
+  - Responsive design with 3-cards-per-row grid (2 on tablet, 1 on mobile)
+
+- **View Component Architecture**: Modern component-based UI system for maintainable code
+  - BaseComponent foundation for all UI components
+  - Specialized components for different dashboard sections
+  - Component preview system for development and testing
+  - Reusable UI components (ActionButton, SummaryCard, Navigation, TabNavigation)
+  - Clean separation of concerns between HTML, CSS, and JavaScript
+
+- **Feature Generator System**: Automated development tools for rapid feature development
+  - `rails g solidstats:feature` generator for creating new dashboard sections
+  - Automatic component, controller, view, and asset generation
+  - Built-in best practices and conventions
+  - Template-based code generation with customizable options
+
+- **CSS Component Architecture**: Modular styling system with 1,631+ lines of extracted CSS
+  - Dedicated component stylesheets for maintainable styling
+  - Conflict-free CSS with proper specificity management
+  - Responsive design patterns and mobile-first approach
+  - Consistent design tokens and reusable style patterns
+
+### Fixed
+- **Gem Metadata Table Layout**: Eliminated horizontal scrolling issues
+  - Changed table wrapper from `overflow-x: auto` to `width: 100%`
+  - Removed restrictive `white-space: nowrap` from table headers
+  - Implemented percentage-based column widths for better responsiveness
+  - Added proper word-wrapping for long content
+
+- **Empty State Positioning**: Perfect centering for "No matching gems found" messages
+  - Implemented flexbox-based centering for both grid and table views
+  - Added proper fallback support for older browsers
+  - Enhanced visual hierarchy and user experience
+
+- **Navigation System**: Fixed section-based navigation throughout the application
+  - Removed external routing in favor of seamless section switching
+  - Updated all navigation components to use `data-section` attributes
+  - Eliminated page reloads when switching between dashboard sections
+  - Consistent navigation behavior across all components
+
+- **CSS Conflicts**: Resolved styling conflicts between component stylesheets
+  - Fixed security.css interference with gem metadata styling
+  - Implemented proper CSS specificity to prevent style bleeding
+  - Added scoped styling for component isolation
+
+### Improved
+- **Performance Optimizations**: Enhanced user experience with better responsiveness
+  - Debounced search functionality to reduce unnecessary API calls
+  - Efficient DOM manipulation and rendering
+  - Optimized CSS delivery and reduced file sizes
+
+- **Cross-Browser Compatibility**: Enhanced support for different browsers and devices
+  - Fallback CSS for older browser versions
+  - Progressive enhancement patterns
+  - Improved mobile experience and touch interactions
+
+
+## [1.1.0] - 2025-05-23
+
+### Added
+- Log Size Monitor feature:
+  - Comprehensive monitoring of all Rails application log files
+  - Total log directory size tracking with status indicators
+  - Individual log file monitoring with size and status details
+  - Visual indicators for log size status (OK, Warning, Danger)
+  - Visual meter showing log size relative to thresholds
+  - One-click log truncation for individual files or all logs
+  - Sortable log file table with size and last modified information
+  - Log management recommendations
+
+### Fixed
+- Fixed log file truncation when filename is provided without extension
+- Added constraints to route handling to improve filename parameter handling
+
 ## [1.0.0] - 2025-05-22
 
 ### Added

data/README.md

@@ -1,16 +1,39 @@
 Solidstats is a local-only Rails engine that shows your project's health at `/solidstats`. The dashboard provides real-time insights into your application's security, code quality, and development tasks.
 
 ## Features
+
+### Core Dashboard
 - Interactive security dashboard with real-time refresh capability
 - Comprehensive gem vulnerability analysis with severity breakdown
 - Visual security score rating (A+, B, C) and metrics
 - Bundler Audit scan with detailed remediation suggestions
 - Interactive vulnerability details with patched version information
 - Gem impact analysis showing affected gems by severity
+
+### Gem Metadata System
+- **Complete Gem Analysis Platform**: Comprehensive gem metadata dashboard with detailed information about all gems in your project
+- **Dual-View System**: Switch between table and grid layouts for optimal data presentation
+  - **Table View**: Sortable columns with gem name, version, description, dependencies, and status
+  - **Grid View**: Card-based layout with 3 cards per row (responsive: 3 on desktop, 2 on tablet, 1 on mobile)
+- **Advanced Filtering**: Real-time search and filtering across all gem attributes
+- **Dependency Analysis**: View gem dependencies with version compatibility information
+- **Status Monitoring**: Real-time health indicators and gem status tracking
+- **Download Statistics**: Popularity metrics and download statistics for gems
+- **License Information**: Security compliance and license tracking
+
+### System Monitoring
+- Log Size Monitor for tracking and managing application log files
+- Log file truncation tool for individual or all log files
 - Rubocop offense count and quality metrics
 - TODO/FIXME tracker with file hotspots
 - Test coverage summary
 
+### Architecture
+- **View Component Architecture**: Modern, maintainable component-based UI system
+- **Feature Generator System**: Automated scaffolding for rapid development
+- **CSS Component Architecture**: Organized, conflict-free styling with responsive design
+- **Cross-Browser Compatibility**: Enhanced support across modern browsers
+
 ## Compatibility
 
 - Ruby 2.7+: Compatible with Rails 6.1 through Rails 7.0
@@ -72,6 +95,18 @@ You can refresh the dashboard data at any time by clicking the "Refresh" button
 3. Show real-time feedback during the refresh process
 4. Update the "Last Updated" timestamp
 
+### Gem Metadata
+Comprehensive gem analysis and management platform featuring:
+- **Complete Gem Information**: Detailed metadata for all gems in your project including versions, descriptions, dependencies, and status
+- **Flexible Views**: 
+  - **Table View**: Sortable table with comprehensive gem information, perfect for detailed analysis
+  - **Grid View**: Card-based layout showing 3 gems per row with visual appeal and responsive design
+- **Advanced Search & Filtering**: Real-time filtering across gem names, descriptions, and dependencies
+- **Dependency Analysis**: View and analyze gem dependencies with version information
+- **Status Monitoring**: Health indicators and status tracking for all gems
+- **Download Metrics**: Popularity statistics and download information
+- **License Tracking**: Security compliance and license information for each gem
+
 ### Code Quality
 Displays code quality metrics, test coverage, and code health indicators.
 

data/app/assets/javascripts/solidstats/application.js

@@ -0,0 +1,257 @@
+// Solidstats JavaScript Application Manifest
+// This file includes all JavaScript modules for the Solidstats dashboard
+//
+//= require dashboard
+//= require_tree .
+
+// Initialize dashboard when DOM is ready
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('🚀 Solidstats Dashboard JavaScript loaded');
+  
+  // Ensure dashboard module is available
+  if (typeof window.SolidstatsDashboard !== 'undefined') {
+    console.log('✅ Dashboard module loaded successfully');
+    
+    // Verify key functions are available
+    const requiredFunctions = ['init', 'navigateToSection', 'setupMainNavigation'];
+    const missingFunctions = requiredFunctions.filter(func => 
+      typeof window.SolidstatsDashboard[func] !== 'function'
+    );
+    
+    if (missingFunctions.length === 0) {
+      console.log('✅ All dashboard functions available');
+    } else {
+      console.warn('⚠️ Missing functions:', missingFunctions);
+    }
+  } else {
+    console.warn('⚠️ Dashboard module not found');
+    console.log('Available globals:', Object.keys(window).filter(k => k.includes('Solid')));
+  }
+});
+
+
+// Dashboard JavaScript functionality
+
+// Create the Solidstats Dashboard namespace
+window.SolidstatsDashboard = window.SolidstatsDashboard || {};
+
+// Main dashboard initialization
+window.SolidstatsDashboard.init = function() {
+  handleUrlNavigation();
+  setupEventListeners();
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  window.SolidstatsDashboard.init();
+});
+
+function handleUrlNavigation() {
+  // Parse URL hash for initial navigation
+  const hash = window.location.hash.substring(1);
+  if (hash) {
+    const [section, tab] = hash.split('/');
+    if (section) {
+      setTimeout(() => {
+        window.SolidstatsDashboard.navigateToSection(section, tab, true);
+      }, 100);
+    }
+  }
+}
+
+function setupEventListeners() {
+  window.SolidstatsDashboard.setupMainNavigation();
+  window.SolidstatsDashboard.setupTabNavigation();
+  window.SolidstatsDashboard.setupQuickNavigation();
+  window.SolidstatsDashboard.setupSummaryCardNavigation();
+}
+
+// Function to update URL hash with current state
+window.SolidstatsDashboard.updateUrlHash = function(section, tab = null) {
+  let hash = '#' + section;
+  if (tab) {
+    hash += '/' + tab;
+  }
+  history.replaceState(null, null, hash);
+};
+
+// Function to navigate to section and tab
+window.SolidstatsDashboard.navigateToSection = function(section, tab = null, shouldScroll = false) {
+  // Remove active class from all nav items and sections
+  document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
+  document.querySelectorAll('.dashboard-section').forEach(section => section.classList.remove('active'));
+  
+  // Add active class to matching nav item
+  const navItem = document.querySelector(`.nav-item[data-section="${section}"]`);
+  if (navItem) {
+    navItem.classList.add('active');
+  }
+  
+  // Show corresponding section
+  const sectionElement = document.getElementById(section);
+  if (sectionElement) {
+    sectionElement.classList.add('active');
+    
+    // If tab is specified, activate that tab
+    if (tab) {
+      const sectionEl = sectionElement;
+      if (sectionEl) {
+        // Deactivate all tabs first
+        sectionEl.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
+        sectionEl.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+        
+        // Activate the target tab
+        const targetTabItem = sectionEl.querySelector(`.tab-item[data-tab="${tab}"]`);
+        const targetTabContent = sectionEl.querySelector(`#${tab}`);
+        
+        if (targetTabItem) targetTabItem.classList.add('active');
+        if (targetTabContent) targetTabContent.classList.add('active');
+      }
+    }
+    
+    // Scroll to section if requested (with a small delay to ensure rendering)
+    if (shouldScroll) {
+      setTimeout(() => {
+        sectionElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 100);
+    }
+    
+    // Update URL hash
+    window.SolidstatsDashboard.updateUrlHash(section, tab);
+  }
+};
+
+// Main navigation
+window.SolidstatsDashboard.setupMainNavigation = function() {
+  document.querySelectorAll('.nav-item').forEach(function(navItem) {
+    navItem.addEventListener('click', function(e) {
+      e.preventDefault();
+      
+      // Get section ID from data attribute
+      const sectionId = this.getAttribute('data-section');
+      
+      // Navigate to the section
+      window.SolidstatsDashboard.navigateToSection(sectionId);
+    });
+  });
+};
+
+// Tab navigation
+window.SolidstatsDashboard.setupTabNavigation = function() {
+  document.querySelectorAll('.tab-item').forEach(function(tabItem) {
+    if (!tabItem.hasAttribute('disabled')) {
+      tabItem.addEventListener('click', function(e) {
+        e.preventDefault();
+        const tabContainer = this.closest('.dashboard-section');
+        const tabId = this.getAttribute('data-tab');
+        
+        // Find the current active section
+        const currentSection = tabContainer.id;
+        
+        // Remove active class from all tab items and tabs within this container
+        tabContainer.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
+        tabContainer.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+        
+        // Add active class to clicked item and corresponding tab
+        this.classList.add('active');
+        const targetContent = tabContainer.querySelector(`#${tabId}`);
+        if (targetContent) {
+          targetContent.classList.add('active');
+        }
+        
+        // Update URL hash with current section and tab
+        window.SolidstatsDashboard.updateUrlHash(currentSection, tabId);
+      });
+    }
+  });
+};
+
+// Quick navigation
+window.SolidstatsDashboard.setupQuickNavigation = function() {
+  document.querySelectorAll('.quick-nav-item').forEach(function(navItem) {
+    navItem.addEventListener('click', function(e) {
+      e.preventDefault();
+      const targetId = this.getAttribute('href').substring(1);
+      
+      // Navigate to the specified section
+      window.SolidstatsDashboard.navigateToSection(targetId);
+      
+      // Close the quick nav menu
+      document.querySelector('.quick-nav-menu').style.display = 'none';
+    });
+  });
+};
+
+// Summary card navigation
+window.SolidstatsDashboard.setupSummaryCardNavigation = function() {
+  document.querySelectorAll('.summary-card').forEach(function(card) {
+    card.addEventListener('click', function() {
+      const section = this.getAttribute('data-section');
+      const tab = this.getAttribute('data-tab');
+      
+      // Navigate to the specified section and tab, with scrolling
+      window.SolidstatsDashboard.navigateToSection(section, tab, true);
+    });
+  });
+};
+
+// Refresh functionality
+window.SolidstatsDashboard.refreshAudit = function() {
+  // Show loading indicator
+  const refreshButton = document.querySelector('.action-button');
+  const originalText = refreshButton.innerHTML;
+  refreshButton.innerHTML = '<span class="action-icon">⟳</span> Refreshing...';
+  refreshButton.disabled = true;
+  
+  // Make AJAX call to refresh endpoint
+  fetch('/solidstats/refresh', {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+      'X-Requested-With': 'XMLHttpRequest'
+    },
+    credentials: 'same-origin'
+  })
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then(data => {
+    // Update the dashboard with fresh data
+    location.reload();
+    
+    // Show success notification
+    window.SolidstatsDashboard.showNotification('Dashboard data refreshed successfully', 'success');
+    
+    // Reset button state
+    refreshButton.innerHTML = originalText;
+    refreshButton.disabled = false;
+  })
+  .catch(error => {
+    console.error('Error refreshing data:', error);
+    
+    // Show error notification
+    window.SolidstatsDashboard.showNotification('Failed to refresh data. Please try again.', 'error');
+    
+    // Reset button state
+    refreshButton.innerHTML = originalText;
+    refreshButton.disabled = false;
+  });
+};
+
+// Notification system
+window.SolidstatsDashboard.showNotification = function(message, type) {
+  // Simple notification system
+  const notification = document.createElement('div');
+  notification.className = `notification notification-${type}`;
+  notification.textContent = message;
+  
+  // Add to body
+  document.body.appendChild(notification);
+  
+  // Remove after 3 seconds
+  setTimeout(() => {
+    notification.remove();
+  }, 3000);
+};

data/app/assets/javascripts/solidstats/dashboard.js

@@ -0,0 +1,225 @@
+// Dashboard JavaScript functionality
+
+// Create the Solidstats Dashboard namespace
+window.SolidstatsDashboard = window.SolidstatsDashboard || {};
+
+// Main dashboard initialization
+window.SolidstatsDashboard.init = function() {
+  handleUrlNavigation();
+  setupEventListeners();
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  window.SolidstatsDashboard.init();
+});
+
+function handleUrlNavigation() {
+  // Parse URL hash for initial navigation
+  const hash = window.location.hash.substring(1);
+  if (hash) {
+    const [section, tab] = hash.split('/');
+    if (section) {
+      setTimeout(() => {
+        window.SolidstatsDashboard.navigateToSection(section, tab, true);
+      }, 100);
+    }
+  }
+}
+
+function setupEventListeners() {
+  window.SolidstatsDashboard.setupMainNavigation();
+  window.SolidstatsDashboard.setupTabNavigation();
+  window.SolidstatsDashboard.setupQuickNavigation();
+  window.SolidstatsDashboard.setupSummaryCardNavigation();
+}
+
+// Function to update URL hash with current state
+window.SolidstatsDashboard.updateUrlHash = function(section, tab = null) {
+  let hash = '#' + section;
+  if (tab) {
+    hash += '/' + tab;
+  }
+  history.replaceState(null, null, hash);
+};
+
+// Function to navigate to section and tab
+window.SolidstatsDashboard.navigateToSection = function(section, tab = null, shouldScroll = false) {
+  // Remove active class from all nav items and sections
+  document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
+  document.querySelectorAll('.dashboard-section').forEach(section => section.classList.remove('active'));
+  
+  // Add active class to matching nav item
+  const navItem = document.querySelector(`.nav-item[data-section="${section}"]`);
+  if (navItem) {
+    navItem.classList.add('active');
+  }
+  
+  // Show corresponding section
+  const sectionElement = document.getElementById(section);
+  if (sectionElement) {
+    sectionElement.classList.add('active');
+    
+    // If tab is specified, activate that tab
+    if (tab) {
+      const sectionEl = sectionElement;
+      if (sectionEl) {
+        // Deactivate all tabs first
+        sectionEl.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
+        sectionEl.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+        
+        // Activate the target tab
+        const targetTabItem = sectionEl.querySelector(`.tab-item[data-tab="${tab}"]`);
+        const targetTabContent = sectionEl.querySelector(`#${tab}`);
+        
+        if (targetTabItem) targetTabItem.classList.add('active');
+        if (targetTabContent) targetTabContent.classList.add('active');
+      }
+    }
+    
+    // Scroll to section if requested (with a small delay to ensure rendering)
+    if (shouldScroll) {
+      setTimeout(() => {
+        sectionElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 100);
+    }
+    
+    // Update URL hash
+    window.SolidstatsDashboard.updateUrlHash(section, tab);
+  }
+};
+
+// Main navigation
+window.SolidstatsDashboard.setupMainNavigation = function() {
+  document.querySelectorAll('.nav-item').forEach(function(navItem) {
+    navItem.addEventListener('click', function(e) {
+      e.preventDefault();
+      
+      // Get section ID from data attribute
+      const sectionId = this.getAttribute('data-section');
+      
+      // Navigate to the section
+      window.SolidstatsDashboard.navigateToSection(sectionId);
+    });
+  });
+};
+
+// Tab navigation
+window.SolidstatsDashboard.setupTabNavigation = function() {
+  document.querySelectorAll('.tab-item').forEach(function(tabItem) {
+    if (!tabItem.hasAttribute('disabled')) {
+      tabItem.addEventListener('click', function(e) {
+        e.preventDefault();
+        const tabContainer = this.closest('.dashboard-section');
+        const tabId = this.getAttribute('data-tab');
+        
+        // Find the current active section
+        const currentSection = tabContainer.id;
+        
+        // Remove active class from all tab items and tabs within this container
+        tabContainer.querySelectorAll('.tab-item').forEach(item => item.classList.remove('active'));
+        tabContainer.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+        
+        // Add active class to clicked item and corresponding tab
+        this.classList.add('active');
+        const targetContent = tabContainer.querySelector(`#${tabId}`);
+        if (targetContent) {
+          targetContent.classList.add('active');
+        }
+        
+        // Update URL hash with current section and tab
+        window.SolidstatsDashboard.updateUrlHash(currentSection, tabId);
+      });
+    }
+  });
+};
+
+// Quick navigation
+window.SolidstatsDashboard.setupQuickNavigation = function() {
+  document.querySelectorAll('.quick-nav-item').forEach(function(navItem) {
+    navItem.addEventListener('click', function(e) {
+      e.preventDefault();
+      const targetId = this.getAttribute('href').substring(1);
+      
+      // Navigate to the specified section
+      window.SolidstatsDashboard.navigateToSection(targetId);
+      
+      // Close the quick nav menu
+      document.querySelector('.quick-nav-menu').style.display = 'none';
+    });
+  });
+};
+
+// Summary card navigation
+window.SolidstatsDashboard.setupSummaryCardNavigation = function() {
+  document.querySelectorAll('.summary-card').forEach(function(card) {
+    card.addEventListener('click', function() {
+      const section = this.getAttribute('data-section');
+      const tab = this.getAttribute('data-tab');
+      
+      // Navigate to the specified section and tab, with scrolling
+      window.SolidstatsDashboard.navigateToSection(section, tab, true);
+    });
+  });
+};
+
+// Refresh functionality
+window.SolidstatsDashboard.refreshAudit = function() {
+  // Show loading indicator
+  const refreshButton = document.querySelector('.action-button');
+  const originalText = refreshButton.innerHTML;
+  refreshButton.innerHTML = '<span class="action-icon">⟳</span> Refreshing...';
+  refreshButton.disabled = true;
+  
+  // Make AJAX call to refresh endpoint
+  fetch('/solidstats/refresh', {
+    method: 'GET',
+    headers: {
+      'Accept': 'application/json',
+      'X-Requested-With': 'XMLHttpRequest'
+    },
+    credentials: 'same-origin'
+  })
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then(data => {
+    // Update the dashboard with fresh data
+    location.reload();
+    
+    // Show success notification
+    window.SolidstatsDashboard.showNotification('Dashboard data refreshed successfully', 'success');
+    
+    // Reset button state
+    refreshButton.innerHTML = originalText;
+    refreshButton.disabled = false;
+  })
+  .catch(error => {
+    console.error('Error refreshing data:', error);
+    
+    // Show error notification
+    window.SolidstatsDashboard.showNotification('Failed to refresh data. Please try again.', 'error');
+    
+    // Reset button state
+    refreshButton.innerHTML = originalText;
+    refreshButton.disabled = false;
+  });
+};
+
+// Notification system
+window.SolidstatsDashboard.showNotification = function(message, type) {
+  // Simple notification system
+  const notification = document.createElement('div');
+  notification.className = `notification notification-${type}`;
+  notification.textContent = message;
+  
+  // Add to body
+  document.body.appendChild(notification);
+  
+  // Remove after 3 seconds
+  setTimeout(() => {
+    notification.remove();
+  }, 3000);
+};