solidstats 0.0.4 → 1.0.0

data/app/views/solidstats/dashboard/audit/_audit_details.html.erb

@@ -1,11 +1,10 @@
-<div id="audit-details" class="details-panel hidden">
+<div id="audit-details">
   <%= render partial: 'solidstats/dashboard/audit/audit_summary' %>
   
   <% results = @audit_output.dig("results") || [] %>
   <% if results.empty? %>
     <%= render partial: 'solidstats/dashboard/audit/no_vulnerabilities' %>
   <% else %>
-    <%= render partial: 'solidstats/dashboard/audit/audit_filters' %>
     <%= render partial: 'solidstats/dashboard/audit/vulnerabilities_table', locals: { results: results } %>
     <%= render partial: 'solidstats/dashboard/audit/vulnerability_details', locals: { results: results } %>
   <% end %>
@@ -159,12 +158,6 @@
     border-left: 4px solid #dc3545;
   }
   
-  .vulnerability-title {
-    margin-top: 0;
-    margin-bottom: 0.75rem;
-    font-size: 1.1rem;
-    font-weight: 600;
-  }
   
   .vulnerability-meta {
     display: flex;
@@ -224,6 +217,7 @@
     border-bottom: 1px solid #e1e4e8;
     padding: 24px;
     background-color: #ffffff;
+    transition: background-color 0.3s ease;
   }
   
   .md-entry:last-child {
@@ -234,6 +228,10 @@
     border-left: 4px solid #d73a49;
   }
   
+  .md-entry.highlight-detail {
+    background-color: #fffbe6;
+  }
+  
   /* Markdown heading style */
   .md-heading {
     font-size: 1.5rem;
@@ -416,12 +414,12 @@
     const toggleBtn = document.querySelector('.toggle-details-btn');
     if (toggleBtn) {
       toggleBtn.addEventListener('click', function() {
-        const detailsSection = document.querySelector('.vulnerabilities-details-section');
-        const isHidden = detailsSection.classList.contains('hidden');
+        const detailsSection = document.querySelector('.md-container');
+        const isHidden = detailsSection.style.display === 'none';
         
         if (isHidden) {
           // Show the details
-          detailsSection.classList.remove('hidden');
+          detailsSection.style.display = '';
           this.textContent = 'Hide Details';
           this.setAttribute('aria-expanded', 'true');
           
@@ -432,7 +430,7 @@
           });
         } else {
           // Hide the details
-          detailsSection.classList.add('hidden');
+          detailsSection.style.display = 'none';
           this.textContent = 'Show Details';
           this.setAttribute('aria-expanded', 'false');
         }
@@ -440,66 +438,57 @@
     }
     
     // View details link functionality - simplified to avoid duplication
-    document.querySelectorAll('.view-details-link').forEach(function(link) {
+    document.querySelectorAll('.view-details-link, .scroll-to-details').forEach(function(link) {
       link.addEventListener('click', function(e) {
         e.preventDefault();
         const target = this.getAttribute('href');
-        const detailsSection = document.querySelector('.vulnerabilities-details-section');
+        const mdContainer = document.querySelector('.md-container');
         
         // Show the details section if it's hidden
-        if (detailsSection.classList.contains('hidden')) {
-          detailsSection.classList.remove('hidden');
+        if (mdContainer.style.display === 'none') {
+          mdContainer.style.display = '';
           const toggleBtn = document.querySelector('.toggle-details-btn');
-          toggleBtn.textContent = 'Hide Details';
-          toggleBtn.setAttribute('aria-expanded', 'true');
+          if (toggleBtn) {
+            toggleBtn.textContent = 'Hide Details';
+            toggleBtn.setAttribute('aria-expanded', 'true');
+          }
         }
         
         // Scroll to the specific vulnerability
         setTimeout(() => {
-          document.querySelector(target).scrollIntoView({
-            behavior: 'smooth',
-            block: 'start'
-          });
+          const targetElement = document.querySelector(target);
+          if (targetElement) {
+            const headerOffset = 70;
+            const elementPosition = targetElement.getBoundingClientRect().top;
+            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+            
+            window.scrollTo({
+              top: offsetPosition,
+              behavior: "smooth"
+            });
+            
+            // Highlight the target element briefly
+            targetElement.classList.add('highlight-detail');
+            setTimeout(() => {
+              targetElement.classList.remove('highlight-detail');
+            }, 1500);
+          }
         }, 100);
       });
     });
     
-    // Filter functionality
-    document.querySelectorAll('.filter-btn').forEach(function(button) {
-      button.addEventListener('click', function() {
-        const filter = this.getAttribute('data-filter');
-        
-        // Update active button
-        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
-        this.classList.add('active');
-        
-        // Handle special case for copy-solutions
-        if (filter === 'copy-solutions') {
-          const solutions = [];
-          document.querySelectorAll('.vulnerability-row').forEach(function(row) {
-            const gem = row.cells[0].textContent.trim();
-            const solution = row.querySelector('.solution code')?.textContent.trim() || "No patch available";
-            solutions.push(`${gem}: ${solution}`);
-          });
-          
-          // Copy all solutions to clipboard
-          navigator.clipboard.writeText(solutions.join('\n')).then(() => {
-            alert('All solutions copied to clipboard!');
-          });
-          
-          return;
-        }
-        
-        // Filter the vulnerability rows
-        document.querySelectorAll('.vulnerability-row').forEach(function(row) {
-          const isHigh = row.classList.contains('high-severity');
-          
-          if (filter === 'all') {
-            row.style.display = '';
-          } else if (filter === 'high') {
-            row.style.display = isHigh ? '' : 'none';
-          }
-        });
+    // Special case handler for copy-solutions button (if it exists)
+    document.querySelector('.filter-btn[data-filter="copy-solutions"]')?.addEventListener('click', function() {
+      const solutions = [];
+      document.querySelectorAll('.vulnerability-row').forEach(function(row) {
+        const gem = row.cells[0].textContent.trim();
+        const solution = row.querySelector('.solution code')?.textContent.trim() || "No patch available";
+        solutions.push(`${gem}: ${solution}`);
+      });
+      
+      // Copy all solutions to clipboard
+      navigator.clipboard.writeText(solutions.join('\n')).then(() => {
+        alert('All solutions copied to clipboard!');
       });
     });
   });

data/app/views/solidstats/dashboard/audit/_audit_summary.html.erb

@@ -1,7 +1,7 @@
 <%# filepath: /Users/mezbah/microstartup/infolily_organizer/gems/solidstats/app/views/solidstats/dashboard/_audit_summary.html.erb %>
 <div class="audit-summary">
   <div class="audit-summary-header">
-    <h3>Security Audit Summary</h3>
+    <h2><span class="icon">🔒</span>Security Audit Summary</h2>
     <% created_at = @audit_output.dig("created_at") %>
     <span class="audit-date">Last updated: <%= created_at ? DateTime.parse(created_at).strftime("%B %d, %Y at %H:%M") : Time.now.strftime("%B %d, %Y at %H:%M") %></span>
   </div>

data/app/views/solidstats/dashboard/audit/_security_audit.html.erb

@@ -1,27 +1,4 @@
 <div class="stat-card audit-card">
-  <h2><span class="icon">🔒</span> Security Audit</h2>
-  <div class="card-content">
-    <% results = @audit_output.dig("results") || [] %>
-    <% vulnerabilities_count = results.size %>
-    <% if vulnerabilities_count == 0 %>
-      <div class="status-badge success">All Clear</div>
-    <% else %>
-      <div class="status-badge warning"><%= vulnerabilities_count %> <%= "Vulnerability".pluralize(vulnerabilities_count) %> Found</div>
-    <% end %>
-    
-    <div class="metrics-group">
-      <div class="metric">
-        <span class="metric-label">Affected Gems:</span>
-        <span class="metric-value"><%= results.map { |r| r.dig("gem", "name") }.uniq.size %></span>
-      </div>
-      <div class="metric">
-        <span class="metric-label">High Severity:</span>
-        <span class="metric-value"><%= results.count { |r| %w[high critical].include?(r.dig("advisory", "criticality").to_s.downcase) } %></span>
-      </div>
-    </div>
-    
-    <a href="#" class="toggle-details" data-target="audit-details">Show Details</a>
-  </div>
   <%= render 'solidstats/dashboard/audit/audit_details' %>
 </div>