Add SpiderMonkey Bug Dashboard

Creates a live dashboard that queries the Bugzilla API to display key metrics
for the SpiderMonkey project.

Features:
- Displays recently opened bugs (last 30 days)
- Shows recently resolved bugs (last 30 days)
- Lists all open S1 & S2 severity bugs
- Shows all assigned but still open bugs
- Two-column layout for important links and Bugzilla components
- Sortable columns - click any header to sort by that field
- "View More" functionality for tables with >10 items
- Each table title links to the full Bugzilla query
- Clickable rows for easy bug navigation
- Responsive design with styling consistent with the site

Technical details:
- Uses Bugzilla REST API with live data fetching
- Client-side sorting with visual indicators
- Maintains data locally to avoid re-fetching when sorting
- Smooth scrolling to section headers when expanding tables

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: mgaudet

dashboard/dashboard.css

@@ -0,0 +1,250 @@
+/* SpiderMonkey Dashboard Styles */
+
+/* Import site fonts and variables */
+@font-face {
+    font-family: ZillaSlab-Regular;
+    src: url("/assets/fonts/ZillaSlab-Regular.ttf");
+}
+
+@font-face {
+    font-family: PT-Sans-S55;
+    src: url("/assets/fonts/pt-sans/PTS55F-webfont.woff");
+}
+
+/* Override styles to match site theme */
+.main-content {
+    font-family: PT-Sans-S55;
+    font-size: 1rem;
+}
+
+h1 {
+    font-family: ZillaSlab-Regular;
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+}
+
+h2 {
+    background-color: var(--color-primary);
+    color: var(--color-bg);
+    display: inline-block;
+    font-size: 1.5em;
+    padding: 0 10px;
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+    font-family: ZillaSlab-Regular;
+}
+
+h2 a {
+    color: var(--color-bg);
+    text-decoration: none;
+}
+
+h2 a:hover {
+    color: var(--color-bg);
+    background-color: transparent;
+    text-decoration: underline;
+}
+
+/* Links Section */
+.links-section {
+    background-color: var(--color-dim-bg);
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 40px;
+}
+
+.links-section > ul {
+    list-style-type: none;
+    padding-left: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+@media (max-width: 768px) {
+    .links-section > ul {
+        grid-template-columns: 1fr;
+    }
+}
+
+.links-section li {
+    margin-bottom: 8px;
+}
+
+.links-section ul ul {
+    list-style-type: none;
+    padding-left: 0;
+    margin-top: 5px;
+}
+
+.links-section a {
+    color: var(--color-primary);
+    font-weight: 550;
+    padding: 2px;
+    font-size: 0.9rem;
+}
+
+.links-section a:hover {
+    color: var(--color-bg);
+    background-color: var(--color-primary);
+    text-decoration: none;
+}
+
+.links-section strong {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--color-primary);
+    font-family: ZillaSlab-Regular;
+    font-size: 1.1rem;
+}
+
+/* Bug Tables */
+.bug-table-container {
+    margin-bottom: 40px;
+    min-height: 200px;
+}
+
+.bug-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: PT-Sans-S55;
+    font-size: 0.9rem;
+}
+
+.bug-table thead {
+    background-color: var(--color-primary);
+}
+
+.bug-table thead th {
+    color: var(--color-bg);
+    font-family: ZillaSlab-Regular;
+    font-weight: 550;
+}
+
+.bug-table thead th.sortable {
+    cursor: pointer;
+    user-select: none;
+}
+
+.bug-table thead th.sortable:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.bug-table th,
+.bug-table td {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 1px solid var(--color-primary);
+}
+
+.bug-table tbody tr {
+    cursor: pointer;
+}
+
+.bug-table tbody tr:hover {
+    background-color: var(--color-dim-bg);
+}
+
+.bug-table a {
+    color: var(--color-primary);
+    font-weight: 550;
+    padding: 2px;
+}
+
+.bug-table a:hover {
+    color: var(--color-bg);
+    background-color: var(--color-primary);
+    text-decoration: none;
+}
+
+.summary {
+    max-width: 500px;
+}
+
+/* Priority Styling - removed coloring */
+
+/* Severity Styling */
+.severity-s1 {
+    color: #ff4444;
+    font-weight: bold;
+}
+
+.severity-s2 {
+    color: #ff4444;
+    font-weight: bold;
+}
+
+.severity-s3 {
+    color: var(--color-primary);
+}
+
+.severity-s4 {
+    color: var(--color-dim-primary);
+}
+
+/* Loading and Error States */
+.loading {
+    text-align: center;
+    padding: 40px;
+    color: var(--color-dim-primary);
+    font-style: italic;
+    font-family: PT-Sans-S55;
+}
+
+.error {
+    color: #ff4444;
+    text-align: center;
+    padding: 20px;
+    background-color: rgba(255, 68, 68, 0.1);
+    border-radius: 4px;
+    font-family: PT-Sans-S55;
+}
+
+/* Last Updated */
+.last-updated {
+    text-align: right;
+    color: var(--color-dim-primary);
+    font-size: 0.85rem;
+    margin-top: 20px;
+    font-style: italic;
+    font-family: PT-Sans-S55;
+}
+
+/* View More Button */
+.view-more-container {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.view-more-button {
+    background-color: var(--color-primary);
+    color: var(--color-bg);
+    border: none;
+    padding: 10px 20px;
+    font-family: ZillaSlab-Regular;
+    font-size: 1rem;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.view-more-button:hover {
+    background-color: var(--color-dim-primary);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .bug-table {
+        font-size: 14px;
+    }
+    
+    .bug-table th,
+    .bug-table td {
+        padding: 8px;
+    }
+    
+    .summary {
+        max-width: 300px;
+    }
+}