☰

GitHub Commit Labels

Enhances GitHub commits with beautiful labels for conventional commit types (feat, fix, docs, etc.)

  1. // ==UserScript==
  2. // @name         GitHub Commit Labels
  3. // @namespace    https://github.com/nazdridoy
  4. // @version      1.6.0
  5. // @description  Enhances GitHub commits with beautiful labels for conventional commit types (feat, fix, docs, etc.)
  6. // @author       nazdridoy
  7. // @license      MIT
  8. // @match        https://github.com/*
  9. // @icon         https://github.githubassets.com/favicons/favicon.svg
  10. // @grant        GM_getValue
  11. // @grant        GM_setValue
  12. // @grant        GM_registerMenuCommand
  13. // @run-at       document-end
  14. // @homepageURL  https://github.com/nazdridoy/github-commit-labels
  15. // @supportURL   https://github.com/nazdridoy/github-commit-labels/issues
  16. // ==/UserScript==
  17.  
  18. /* 
  19. MIT License
  20.  
  21. Copyright (c) 2025 nazDridoy
  22.  
  23. Permission is hereby granted, free of charge, to any person obtaining a copy
  24. of this software and associated documentation files (the "Software"), to deal
  25. in the Software without restriction, including without limitation the rights
  26. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  27. copies of the Software, and to permit persons to whom the Software is
  28. furnished to do so, subject to the following conditions:
  29.  
  30. The above copyright notice and this permission notice shall be included in all
  31. copies or substantial portions of the Software.
  32.  
  33. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  34. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  35. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  36. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  37. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  38. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  39. SOFTWARE.
  40. */
  41.  
  42. (function() {
  43.     'use strict';
  44.  
  45.     // Detect GitHub theme (dark, light, or dark dimmed)
  46.     function detectTheme() {
  47.         const html = document.documentElement;
  48.         const colorMode = html.getAttribute('data-color-mode');
  49.         
  50.         // Handle sync with system (auto) setting
  51.         if (colorMode === 'auto') {
  52.             // Get the system preference
  53.             const darkThemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
  54.             const isDarkMode = darkThemeMedia.matches;
  55.             
  56.             if (isDarkMode) {
  57.                 // System is in dark mode, but we need to check what's set for "Night theme"
  58.                 const darkThemeSetting = html.getAttribute('data-dark-theme');
  59.                 
  60.                 // If a light theme variant is set for "Night theme"
  61.                 if (darkThemeSetting && darkThemeSetting.startsWith('light')) {
  62.                     return darkThemeSetting; // Return the specific light theme variant
  63.                 }
  64.                 
  65.                 // Otherwise return the dark theme variant
  66.                 return darkThemeSetting === 'dark_dimmed' ? 'dark_dimmed' : 'dark';
  67.             } else {
  68.                 // System is in light mode, check what's set for "Day theme"
  69.                 const lightThemeSetting = html.getAttribute('data-light-theme');
  70.                 
  71.                 // If a dark theme variant is set for "Day theme"
  72.                 if (lightThemeSetting && lightThemeSetting.startsWith('dark')) {
  73.                     return lightThemeSetting; // Return the specific dark theme variant
  74.                 }
  75.                 
  76.                 return 'light'; // Default to light theme
  77.             }
  78.         }
  79.         
  80.         // Direct theme setting (not auto)
  81.         if (colorMode === 'dark') {
  82.             const darkTheme = html.getAttribute('data-dark-theme');
  83.             return darkTheme === 'dark_dimmed' ? 'dark_dimmed' : 'dark';
  84.         } else {
  85.             const lightTheme = html.getAttribute('data-light-theme');
  86.             // If a specific light theme variant is set
  87.             if (lightTheme && lightTheme !== 'light') {
  88.                 return lightTheme;
  89.             }
  90.             return 'light';
  91.         }
  92.     }
  93.  
  94.     // Helper function to determine if a theme is a dark variant
  95.     function isDarkTheme(theme) {
  96.         return theme && (theme === 'dark' || theme === 'dark_dimmed' || 
  97.                theme === 'dark_high_contrast' || theme === 'dark_colorblind' || 
  98.                theme === 'dark_tritanopia');
  99.     }
  100.  
  101.     // Get current theme
  102.     let currentTheme = detectTheme();
  103.     
  104.     // Watch for system color scheme changes
  105.     const darkThemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
  106.     darkThemeMedia.addEventListener('change', () => {
  107.         if (document.documentElement.getAttribute('data-color-mode') === 'auto') {
  108.             updateThemeColors();
  109.         }
  110.     });
  111.     
  112.     // Color definitions based on theme
  113.     const THEME_COLORS = {
  114.         light: {
  115.             'green': { bg: 'rgba(35, 134, 54, 0.1)', text: '#1a7f37' },
  116.             'purple': { bg: 'rgba(163, 113, 247, 0.1)', text: '#8250df' },
  117.             'blue': { bg: 'rgba(47, 129, 247, 0.1)', text: '#0969da' },
  118.             'light-blue': { bg: 'rgba(31, 111, 235, 0.1)', text: '#0550ae' },
  119.             'yellow': { bg: 'rgba(210, 153, 34, 0.1)', text: '#9e6a03' },
  120.             'orange': { bg: 'rgba(219, 109, 40, 0.1)', text: '#bc4c00' },
  121.             'gray': { bg: 'rgba(139, 148, 158, 0.1)', text: '#57606a' },
  122.             'light-green': { bg: 'rgba(57, 211, 83, 0.1)', text: '#1a7f37' },
  123.             'red': { bg: 'rgba(248, 81, 73, 0.1)', text: '#cf222e' },
  124.             'dark-yellow': { bg: 'rgba(187, 128, 9, 0.1)', text: '#9e6a03' }
  125.         },
  126.         dark: {
  127.             'green': { bg: 'rgba(35, 134, 54, 0.2)', text: '#7ee787' },
  128.             'purple': { bg: 'rgba(163, 113, 247, 0.2)', text: '#d2a8ff' },
  129.             'blue': { bg: 'rgba(47, 129, 247, 0.2)', text: '#79c0ff' },
  130.             'light-blue': { bg: 'rgba(31, 111, 235, 0.2)', text: '#58a6ff' },
  131.             'yellow': { bg: 'rgba(210, 153, 34, 0.2)', text: '#e3b341' },
  132.             'orange': { bg: 'rgba(219, 109, 40, 0.2)', text: '#ffa657' },
  133.             'gray': { bg: 'rgba(139, 148, 158, 0.2)', text: '#8b949e' },
  134.             'light-green': { bg: 'rgba(57, 211, 83, 0.2)', text: '#56d364' },
  135.             'red': { bg: 'rgba(248, 81, 73, 0.2)', text: '#ff7b72' },
  136.             'dark-yellow': { bg: 'rgba(187, 128, 9, 0.2)', text: '#bb8009' }
  137.         },
  138.         dark_dimmed: {
  139.             'green': { bg: 'rgba(35, 134, 54, 0.15)', text: '#6bc46d' },
  140.             'purple': { bg: 'rgba(163, 113, 247, 0.15)', text: '#c297ff' },
  141.             'blue': { bg: 'rgba(47, 129, 247, 0.15)', text: '#6cb6ff' },
  142.             'light-blue': { bg: 'rgba(31, 111, 235, 0.15)', text: '#539bf5' },
  143.             'yellow': { bg: 'rgba(210, 153, 34, 0.15)', text: '#daaa3f' },
  144.             'orange': { bg: 'rgba(219, 109, 40, 0.15)', text: '#f0883e' },
  145.             'gray': { bg: 'rgba(139, 148, 158, 0.15)', text: '#909dab' },
  146.             'light-green': { bg: 'rgba(57, 211, 83, 0.15)', text: '#6bc46d' },
  147.             'red': { bg: 'rgba(248, 81, 73, 0.15)', text: '#e5534b' },
  148.             'dark-yellow': { bg: 'rgba(187, 128, 9, 0.15)', text: '#daaa3f' }
  149.         }
  150.     };
  151.  
  152.     // Get colors for current theme
  153.     let COLORS = THEME_COLORS[currentTheme];
  154.  
  155.     // Define default configuration
  156.     const DEFAULT_CONFIG = {
  157.         removePrefix: true,
  158.         enableTooltips: true,
  159.         labelsVisible: true,
  160.         showScope: false,
  161.         debugMode: false,  // Add debug mode setting
  162.         labelStyle: {
  163.             fontSize: '14px',
  164.             fontWeight: '500',
  165.             height: '24px',
  166.             padding: '0 10px',
  167.             marginRight: '8px',
  168.             borderRadius: '20px',
  169.             minWidth: 'auto',
  170.             textAlign: 'center',
  171.             display: 'inline-flex',
  172.             alignItems: 'center',
  173.             justifyContent: 'center',
  174.             whiteSpace: 'nowrap',
  175.             background: 'rgba(0, 0, 0, 0.2)',
  176.             backdropFilter: 'blur(4px)',
  177.             border: '1px solid rgba(240, 246, 252, 0.1)', // Subtle border
  178.             color: '#ffffff'
  179.         },
  180.         commitTypes: {
  181.             // Features
  182.             feat: { emoji: '✨', label: 'Feature', color: 'green', description: 'New user features (not for new files without user features)' },
  183.             feature: { emoji: '✨', label: 'Feature', color: 'green', description: 'New user features (not for new files without user features)' },
  184.  
  185.             // Added
  186.             added: { emoji: '📝', label: 'Added', color: 'green', description: 'New files/resources with no user-facing features' },
  187.             add: { emoji: '📝', label: 'Added', color: 'green', description: 'New files/resources with no user-facing features' },
  188.  
  189.             // Updated
  190.             update: { emoji: '♻️', label: 'Updated', color: 'blue', description: 'Changes to existing functionality' },
  191.             updated: { emoji: '♻️', label: 'Updated', color: 'blue', description: 'Changes to existing functionality' },
  192.  
  193.             // Removed
  194.             removed: { emoji: '🗑️', label: 'Removed', color: 'red', description: 'Removing files/code' },
  195.             remove: { emoji: '🗑️', label: 'Removed', color: 'red', description: 'Removing files/code' },
  196.             delete: { emoji: '🗑️', label: 'Removed', color: 'red', description: 'Removing files/code' },
  197.             del: { emoji: '🗑️', label: 'Removed', color: 'red', description: 'Removing files/code' },
  198.  
  199.             // Fixes
  200.             fix: { emoji: '🐛', label: 'Fix', color: 'purple', description: 'Bug fixes/corrections to errors' },
  201.             bugfix: { emoji: '🐛', label: 'Fix', color: 'purple', description: 'Bug fixes/corrections to errors' },
  202.             fixed: { emoji: '🐛', label: 'Fix', color: 'purple', description: 'Bug fixes/corrections to errors' },
  203.             hotfix: { emoji: '🚨', label: 'Hot Fix', color: 'red', description: 'Critical bug fixes requiring immediate attention' },
  204.  
  205.             // Documentation
  206.             docs: { emoji: '📚', label: 'Docs', color: 'blue', description: 'Documentation only changes' },
  207.             doc: { emoji: '📚', label: 'Docs', color: 'blue', description: 'Documentation only changes' },
  208.             documentation: { emoji: '📚', label: 'Docs', color: 'blue', description: 'Documentation only changes' },
  209.  
  210.             // Styling
  211.             style: { emoji: '💎', label: 'Style', color: 'light-green', description: 'Formatting/whitespace changes (no code change)' },
  212.             ui: { emoji: '🎨', label: 'UI', color: 'light-green', description: 'User interface changes' },
  213.             css: { emoji: '💎', label: 'Style', color: 'light-green', description: 'CSS/styling changes' },
  214.  
  215.             // Code Changes
  216.             refactor: { emoji: '📦', label: 'Refactor', color: 'light-blue', description: 'Restructured code (no behavior change)' },
  217.             perf: { emoji: '🚀', label: 'Performance', color: 'purple', description: 'Performance improvements' },
  218.             performance: { emoji: '🚀', label: 'Performance', color: 'purple', description: 'Performance improvements' },
  219.             optimize: { emoji: '⚡', label: 'Optimize', color: 'purple', description: 'Code optimization without functional changes' },
  220.  
  221.             // Testing
  222.             test: { emoji: '🧪', label: 'Test', color: 'yellow', description: 'Test-related changes' },
  223.             tests: { emoji: '🧪', label: 'Test', color: 'yellow', description: 'Test-related changes' },
  224.             testing: { emoji: '🧪', label: 'Test', color: 'yellow', description: 'Test-related changes' },
  225.  
  226.             // Build & Deploy
  227.             build: { emoji: '🛠', label: 'Build', color: 'orange', description: 'Build system changes' },
  228.             ci: { emoji: '⚙️', label: 'CI', color: 'gray', description: 'CI pipeline changes' },
  229.             cd: { emoji: '🚀', label: 'CD', color: 'gray', description: 'Continuous deployment changes' },
  230.             deploy: { emoji: '📦', label: 'Deploy', color: 'orange', description: 'Deployment related changes' },
  231.             release: { emoji: '🚀', label: 'Deploy', color: 'orange', description: 'Production releases' },
  232.  
  233.             // Maintenance
  234.             chore: { emoji: '♻️', label: 'Chore', color: 'light-green', description: 'Routine maintenance tasks' },
  235.             deps: { emoji: '📦', label: 'Dependencies', color: 'light-green', description: 'Dependency updates or changes' },
  236.             dep: { emoji: '📦', label: 'Dependencies', color: 'light-green', description: 'Dependency updates or changes' },
  237.             dependencies: { emoji: '📦', label: 'Dependencies', color: 'light-green', description: 'Dependency updates or changes' },
  238.             revert: { emoji: '🗑', label: 'Revert', color: 'red', description: 'Reverting previous changes' },
  239.             wip: { emoji: '🚧', label: 'WIP', color: 'dark-yellow', description: 'Work in progress' },
  240.  
  241.             // Security
  242.             security: { emoji: '🔒', label: 'Security', color: 'red', description: 'Security-related changes' },
  243.             
  244.             // Internationalization
  245.             i18n: { emoji: '🌐', label: 'i18n', color: 'blue', description: 'Internationalization and localization' },
  246.             
  247.             // Accessibility
  248.             a11y: { emoji: '♿', label: 'Accessibility', color: 'purple', description: 'Accessibility improvements' },
  249.             
  250.             // API changes
  251.             api: { emoji: '🔌', label: 'API', color: 'light-blue', description: 'API-related changes' },
  252.             
  253.             // Database changes
  254.             data: { emoji: '🗃️', label: 'Database', color: 'orange', description: 'Database schema or data changes' },
  255.             
  256.             // Configuration changes
  257.             config: { emoji: '⚙️', label: 'Config', color: 'gray', description: 'Configuration changes' },
  258.             
  259.             // Initial setup
  260.             init: { emoji: '🎬', label: 'Init', color: 'green', description: 'Initial commit/project setup' }
  261.         }
  262.     };
  263.  
  264.     // Get saved configuration or use default
  265.     const USER_CONFIG = GM_getValue('commitLabelsConfig', DEFAULT_CONFIG);
  266.     
  267.     // Ensure backward compatibility with older versions
  268.     if (USER_CONFIG.enableTooltips === undefined) {
  269.         USER_CONFIG.enableTooltips = true;
  270.         GM_setValue('commitLabelsConfig', USER_CONFIG);
  271.     }
  272.     
  273.     // Ensure labelsVisible exists in config (for backward compatibility)
  274.     if (USER_CONFIG.labelsVisible === undefined) {
  275.         USER_CONFIG.labelsVisible = true;
  276.         GM_setValue('commitLabelsConfig', USER_CONFIG);
  277.     }
  278.     
  279.     // Make sure all commit types have descriptions (for backward compatibility)
  280.     let configUpdated = false;
  281.     Object.entries(USER_CONFIG.commitTypes).forEach(([type, config]) => {
  282.         if (!config.description && DEFAULT_CONFIG.commitTypes[type]) {
  283.             USER_CONFIG.commitTypes[type].description = DEFAULT_CONFIG.commitTypes[type].description;
  284.             configUpdated = true;
  285.         }
  286.     });
  287.     if (configUpdated) {
  288.         GM_setValue('commitLabelsConfig', USER_CONFIG);
  289.     }
  290.  
  291.     // Create floating toggle button for labels
  292.     function createLabelToggle() {
  293.         // Only create if we're on a commit page
  294.         if (!isCommitPage()) return;
  295.         
  296.         // Check if toggle already exists
  297.         if (document.getElementById('commit-labels-toggle')) return;
  298.         
  299.         // Create a container for both buttons
  300.         const buttonContainer = document.createElement('div');
  301.         buttonContainer.id = 'commit-labels-buttons';
  302.         buttonContainer.style.cssText = `
  303.             position: fixed;
  304.             bottom: 20px;
  305.             right: 20px;
  306.             display: flex;
  307.             gap: 8px;
  308.             z-index: 9999;
  309.         `;
  310.         
  311.         // Label toggle button
  312.         const toggleBtn = document.createElement('button');
  313.         toggleBtn.id = 'commit-labels-toggle';
  314.         toggleBtn.textContent = USER_CONFIG.labelsVisible ? '🏷️' : '🏷️';
  315.         toggleBtn.title = USER_CONFIG.labelsVisible ? 'Hide commit labels' : 'Show commit labels';
  316.         toggleBtn.style.cssText = `
  317.             width: 32px;
  318.             height: 32px;
  319.             border-radius: 6px;
  320.             background: rgba(31, 35, 40, 0.6);
  321.             color: #adbac7;
  322.             border: 1px solid rgba(205, 217, 229, 0.1);
  323.             font-size: 14px;
  324.             cursor: pointer;
  325.             display: flex;
  326.             align-items: center;
  327.             justify-content: center;
  328.             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  329.             opacity: 0.5;
  330.             transition: opacity 0.2s, transform 0.2s, background-color 0.2s;
  331.             backdrop-filter: blur(4px);
  332.         `;
  333.         
  334.         // Config toggle button
  335.         const configBtn = document.createElement('button');
  336.         configBtn.id = 'commit-labels-config-toggle';
  337.         configBtn.textContent = '⚙️';
  338.         configBtn.title = 'Open configuration';
  339.         configBtn.style.cssText = `
  340.             width: 32px;
  341.             height: 32px;
  342.             border-radius: 6px;
  343.             background: rgba(31, 35, 40, 0.6);
  344.             color: #adbac7;
  345.             border: 1px solid rgba(205, 217, 229, 0.1);
  346.             font-size: 14px;
  347.             cursor: pointer;
  348.             display: flex;
  349.             align-items: center;
  350.             justify-content: center;
  351.             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  352.             opacity: 0.5;
  353.             transition: opacity 0.2s, transform 0.2s, background-color 0.2s;
  354.             backdrop-filter: blur(4px);
  355.         `;
  356.         
  357.         // Add hover effect for label toggle
  358.         toggleBtn.addEventListener('mouseenter', () => {
  359.             toggleBtn.style.opacity = '1';
  360.             toggleBtn.style.background = currentTheme === 'light' ? 
  361.                 'rgba(246, 248, 250, 0.8)' : 'rgba(22, 27, 34, 0.8)';
  362.             toggleBtn.style.color = currentTheme === 'light' ? '#24292f' : '#e6edf3';
  363.         });
  364.         
  365.         toggleBtn.addEventListener('mouseleave', () => {
  366.             toggleBtn.style.opacity = '0.5';
  367.             toggleBtn.style.background = 'rgba(31, 35, 40, 0.6)';
  368.             toggleBtn.style.color = '#adbac7';
  369.         });
  370.         
  371.         // Add hover effect for config button
  372.         configBtn.addEventListener('mouseenter', () => {
  373.             configBtn.style.opacity = '1';
  374.             configBtn.style.background = currentTheme === 'light' ? 
  375.                 'rgba(246, 248, 250, 0.8)' : 'rgba(22, 27, 34, 0.8)';
  376.             configBtn.style.color = currentTheme === 'light' ? '#24292f' : '#e6edf3';
  377.         });
  378.         
  379.         configBtn.addEventListener('mouseleave', () => {
  380.             configBtn.style.opacity = '0.5';
  381.             configBtn.style.background = 'rgba(31, 35, 40, 0.6)';
  382.             configBtn.style.color = '#adbac7';
  383.         });
  384.         
  385.         // Toggle labels on click
  386.         toggleBtn.addEventListener('click', () => {
  387.             USER_CONFIG.labelsVisible = !USER_CONFIG.labelsVisible;
  388.             GM_setValue('commitLabelsConfig', USER_CONFIG);
  389.             
  390.             // Update button
  391.             toggleBtn.textContent = USER_CONFIG.labelsVisible ? '🏷️' : '🏷️';
  392.             toggleBtn.style.textDecoration = USER_CONFIG.labelsVisible ? 'none' : 'line-through';
  393.             toggleBtn.title = USER_CONFIG.labelsVisible ? 'Hide commit labels' : 'Show commit labels';
  394.             
  395.             // Toggle label visibility
  396.             document.querySelectorAll('.commit-label').forEach(label => {
  397.                 label.style.display = USER_CONFIG.labelsVisible ? 'inline-flex' : 'none';
  398.             });
  399.         });
  400.         
  401.         // Open config window on click
  402.         configBtn.addEventListener('click', () => {
  403.             createConfigWindow();
  404.         });
  405.         
  406.         // Add buttons to container
  407.         buttonContainer.appendChild(toggleBtn);
  408.         buttonContainer.appendChild(configBtn);
  409.         document.body.appendChild(buttonContainer);
  410.         
  411.         // Set initial state
  412.         toggleBtn.style.textDecoration = USER_CONFIG.labelsVisible ? 'none' : 'line-through';
  413.     }
  414.  
  415.     // Create configuration window
  416.     function createConfigWindow() {
  417.         // Get current theme colors for the config window
  418.         const isDark = isDarkTheme(currentTheme);
  419.         
  420.         const configStyles = {
  421.             window: {
  422.                 background: isDark ? '#0d1117' : '#ffffff',
  423.                 border: isDark ? '1px solid #30363d' : '1px solid #d0d7de',
  424.                 color: isDark ? '#c9d1d9' : '#24292f',
  425.                 boxShadow: isDark ? '0 0 10px rgba(0,0,0,0.5)' : '0 0 10px rgba(0,0,0,0.2)'
  426.             },
  427.             button: {
  428.                 primary: {
  429.                     background: '#238636',
  430.                     color: '#ffffff',
  431.                     border: 'none'
  432.                 },
  433.                 secondary: {
  434.                     background: isDark ? '#21262d' : '#f6f8fa',
  435.                     color: isDark ? '#c9d1d9' : '#24292f',
  436.                     border: isDark ? '1px solid #30363d' : '1px solid #d0d7de'
  437.                 },
  438.                 danger: {
  439.                     background: isDark ? '#21262d' : '#f6f8fa',
  440.                     color: '#f85149',
  441.                     border: isDark ? '1px solid #30363d' : '1px solid #d0d7de'
  442.                 }
  443.             },
  444.             input: {
  445.                 background: isDark ? '#161b22' : '#f6f8fa',
  446.                 color: isDark ? '#c9d1d9' : '#24292f',
  447.                 border: isDark ? '1px solid #30363d' : '1px solid #d0d7de'
  448.             },
  449.             text: {
  450.                 dim: isDark ? '#8b949e' : '#6e7781',
  451.                 link: isDark ? '#58a6ff' : '#0969da'
  452.             }
  453.         };
  454.         
  455.         const configWindow = document.createElement('div');
  456.         configWindow.style.cssText = `
  457.             position: fixed;
  458.             top: 50%;
  459.             left: 50%;
  460.             transform: translate(-50%, -50%);
  461.             background: ${configStyles.window.background};
  462.             border: ${configStyles.window.border};
  463.             border-radius: 6px;
  464.             padding: 20px;
  465.             z-index: 9999;
  466.             width: 600px;
  467.             max-height: 80vh;
  468.             overflow-y: auto;
  469.             color: ${configStyles.window.color};
  470.             box-shadow: ${configStyles.window.boxShadow};
  471.         `;
  472.  
  473.         // Header with title and repo link
  474.         const titleContainer = document.createElement('div');
  475.         titleContainer.style.display = 'flex';
  476.         titleContainer.style.justifyContent = 'space-between';
  477.         titleContainer.style.alignItems = 'center';
  478.         titleContainer.style.marginBottom = '20px';
  479.  
  480.         const title = document.createElement('h2');
  481.         title.textContent = 'Commit Labels Configuration';
  482.         title.style.margin = '0';
  483.  
  484.         // Repository link container with profile pic
  485.         const repoContainer = document.createElement('div');
  486.         repoContainer.style.display = 'flex';
  487.         repoContainer.style.alignItems = 'center';
  488.         repoContainer.style.gap = '8px';
  489.         
  490.         // Owner profile picture
  491.         const profilePic = document.createElement('img');
  492.         profilePic.src = 'https://raw.githubusercontent.com/nazdridoy/nazhome/main/public/favicons/nazhome.svg';
  493.         profilePic.alt = 'Owner';
  494.         profilePic.style.cssText = `
  495.             width: 36px;
  496.             height: 36px;
  497.             border-radius: 50%;
  498.             background: ${isDark ? '#30363d' : '#eaeef2'};
  499.             padding: 3px;
  500.             vertical-align: middle;
  501.         `;
  502.         
  503.         const repoLink = document.createElement('a');
  504.         repoLink.href = 'https://github.com/nazdridoy/github-commit-labels';
  505.         repoLink.target = '_blank';
  506.         repoLink.textContent = 'GitHub Repository';
  507.         repoLink.style.cssText = `
  508.             color: ${configStyles.text.link};
  509.             text-decoration: none;
  510.             font-size: 15px;
  511.             vertical-align: middle;
  512.         `;
  513.         repoLink.addEventListener('mouseenter', () => {
  514.             repoLink.style.textDecoration = 'underline';
  515.         });
  516.         repoLink.addEventListener('mouseleave', () => {
  517.             repoLink.style.textDecoration = 'none';
  518.         });
  519.  
  520.         repoContainer.appendChild(profilePic);
  521.         repoContainer.appendChild(repoLink);
  522.         
  523.         titleContainer.appendChild(title);
  524.         titleContainer.appendChild(repoContainer);
  525.         configWindow.appendChild(titleContainer);
  526.  
  527.         // Remove Prefix Option
  528.         const prefixDiv = document.createElement('div');
  529.         prefixDiv.style.marginBottom = '20px';
  530.         const prefixCheckbox = document.createElement('input');
  531.         prefixCheckbox.type = 'checkbox';
  532.         prefixCheckbox.checked = USER_CONFIG.removePrefix;
  533.         prefixCheckbox.id = 'remove-prefix';
  534.         prefixCheckbox.style.marginRight = '5px';
  535.         const prefixLabel = document.createElement('label');
  536.         prefixLabel.htmlFor = 'remove-prefix';
  537.         prefixLabel.textContent = 'Remove commit type prefix from message';
  538.         prefixDiv.appendChild(prefixCheckbox);
  539.         prefixDiv.appendChild(prefixLabel);
  540.         configWindow.appendChild(prefixDiv);
  541.  
  542.         // Add toggle for tooltips with preview
  543.         const tooltipDiv = document.createElement('div');
  544.         tooltipDiv.style.marginBottom = '20px';
  545.         
  546.         const tooltipHeader = document.createElement('div');
  547.         tooltipHeader.style.display = 'flex';
  548.         tooltipHeader.style.alignItems = 'center';
  549.         tooltipHeader.style.marginBottom = '5px';
  550.         
  551.         const tooltipCheckbox = document.createElement('input');
  552.         tooltipCheckbox.type = 'checkbox';
  553.         tooltipCheckbox.checked = USER_CONFIG.enableTooltips;
  554.         tooltipCheckbox.id = 'enable-tooltips';
  555.         tooltipCheckbox.style.marginRight = '5px';
  556.         
  557.         const tooltipLabel = document.createElement('label');
  558.         tooltipLabel.htmlFor = 'enable-tooltips';
  559.         tooltipLabel.textContent = 'Enable tooltips with extended descriptions';
  560.         tooltipLabel.style.marginRight = '15px';
  561.         
  562.         // Add tooltip preview
  563.         const previewLabel = document.createElement('span');
  564.         previewLabel.textContent = 'Preview: ';
  565.         previewLabel.style.marginRight = '5px';
  566.         
  567.         const previewExample = document.createElement('span');
  568.         previewExample.className = 'tooltip-preview-label';
  569.         previewExample.innerHTML = '✨ <span>Feature</span>';
  570.         previewExample.dataset.description = 'New user features (not for new files without user features)';
  571.         previewExample.style.cssText = `
  572.             display: inline-flex;
  573.             align-items: center;
  574.             justify-content: center;
  575.             height: 24px;
  576.             padding: 0 10px;
  577.             border-radius: 20px;
  578.             background: ${isDark ? 'rgba(35, 134, 54, 0.2)' : 'rgba(31, 136, 61, 0.1)'};
  579.             color: ${isDark ? '#7ee787' : '#1a7f37'};
  580.             cursor: help;
  581.         `;
  582.         
  583.         tooltipHeader.appendChild(tooltipCheckbox);
  584.         tooltipHeader.appendChild(tooltipLabel);
  585.         tooltipHeader.appendChild(previewLabel);
  586.         tooltipHeader.appendChild(previewExample);
  587.         
  588.         // Create custom preview tooltip
  589.         previewExample.addEventListener('mouseenter', (e) => {
  590.             if (!tooltipCheckbox.checked) return;
  591.             
  592.             const tooltipPreview = document.createElement('div');
  593.             tooltipPreview.className = 'tooltip-preview';
  594.             tooltipPreview.textContent = previewExample.dataset.description;
  595.             
  596.             const rect = e.target.getBoundingClientRect();
  597.             
  598.             tooltipPreview.style.cssText = `
  599.                 position: fixed;
  600.                 top: ${rect.bottom + 5}px;
  601.                 left: ${rect.left}px;
  602.                 max-width: 300px;
  603.                 padding: 8px 12px;
  604.                 color: ${isDark ? '#e6edf3' : '#ffffff'};
  605.                 text-align: center;
  606.                 background-color: ${isDark ? '#161b22' : '#24292f'};
  607.                 border-radius: 6px;
  608.                 border: ${isDark ? '1px solid #30363d' : '1px solid #d0d7de'};
  609.                 box-shadow: 0 3px 12px rgba(0,0,0,0.4);
  610.                 font-size: 12px;
  611.                 z-index: 10000;
  612.                 pointer-events: none;
  613.             `;
  614.             
  615.             document.body.appendChild(tooltipPreview);
  616.         });
  617.         
  618.         previewExample.addEventListener('mouseleave', () => {
  619.             const tooltipPreview = document.querySelector('.tooltip-preview');
  620.             if (tooltipPreview) {
  621.                 document.body.removeChild(tooltipPreview);
  622.             }
  623.         });
  624.         
  625.         tooltipDiv.appendChild(tooltipHeader);
  626.         
  627.         // Add explanation text
  628.         const tooltipExplanation = document.createElement('div');
  629.         tooltipExplanation.textContent = 'Tooltips show detailed descriptions when hovering over commit labels.';
  630.         tooltipExplanation.style.color = configStyles.text.dim;
  631.         tooltipExplanation.style.fontSize = '12px';
  632.         tooltipExplanation.style.marginTop = '5px';
  633.         
  634.         tooltipDiv.appendChild(tooltipExplanation);
  635.         configWindow.insertBefore(tooltipDiv, prefixDiv.nextSibling);
  636.  
  637.         // After prefixDiv and tooltipDiv, add a toggle for showing the floating button
  638.         const floatingBtnDiv = document.createElement('div');
  639.         floatingBtnDiv.style.marginBottom = '20px';
  640.         
  641.         // Add showFloatingButton to USER_CONFIG if it doesn't exist
  642.         if (USER_CONFIG.showFloatingButton === undefined) {
  643.             USER_CONFIG.showFloatingButton = true;
  644.             GM_setValue('commitLabelsConfig', USER_CONFIG);
  645.         }
  646.         
  647.         const floatingBtnCheckbox = document.createElement('input');
  648.         floatingBtnCheckbox.type = 'checkbox';
  649.         floatingBtnCheckbox.checked = USER_CONFIG.showFloatingButton;
  650.         floatingBtnCheckbox.id = 'show-floating-btn';
  651.         floatingBtnCheckbox.style.marginRight = '5px';
  652.         
  653.         const floatingBtnLabel = document.createElement('label');
  654.         floatingBtnLabel.htmlFor = 'show-floating-btn';
  655.         floatingBtnLabel.textContent = 'Show floating toggle button';
  656.         
  657.         floatingBtnDiv.appendChild(floatingBtnCheckbox);
  658.         floatingBtnDiv.appendChild(floatingBtnLabel);
  659.         
  660.         configWindow.insertBefore(floatingBtnDiv, tooltipDiv.nextSibling);
  661.  
  662.         // After the tooltipDiv and before the floatingBtnDiv in the createConfigWindow function:
  663.         const scopeDiv = document.createElement('div');
  664.         scopeDiv.style.marginBottom = '20px';
  665.         const scopeCheckbox = document.createElement('input');
  666.         scopeCheckbox.type = 'checkbox';
  667.         scopeCheckbox.checked = USER_CONFIG.showScope;
  668.         scopeCheckbox.id = 'show-scope';
  669.         scopeCheckbox.style.marginRight = '5px';
  670.         const scopeLabel = document.createElement('label');
  671.         scopeLabel.htmlFor = 'show-scope';
  672.         scopeLabel.textContent = 'Show commit scope in labels (e.g., "feat(api): message" shows "api" in label)';
  673.         scopeDiv.appendChild(scopeCheckbox);
  674.         scopeDiv.appendChild(scopeLabel);
  675.         configWindow.insertBefore(scopeDiv, floatingBtnDiv.nextSibling);
  676.  
  677.         // Add debug mode toggle
  678.         const debugDiv = document.createElement('div');
  679.         debugDiv.style.marginBottom = '20px';
  680.         const debugCheckbox = document.createElement('input');
  681.         debugCheckbox.type = 'checkbox';
  682.         debugCheckbox.checked = USER_CONFIG.debugMode;
  683.         debugCheckbox.id = 'debug-mode';
  684.         debugCheckbox.style.marginRight = '5px';
  685.         const debugLabel = document.createElement('label');
  686.         debugLabel.htmlFor = 'debug-mode';
  687.         debugLabel.textContent = 'Enable debug mode (shows detailed logs in console)';
  688.         debugDiv.appendChild(debugCheckbox);
  689.         debugDiv.appendChild(debugLabel);
  690.         configWindow.insertBefore(debugDiv, prefixDiv.nextSibling);
  691.  
  692.         // Commit Types Configuration
  693.         const typesContainer = document.createElement('div');
  694.         typesContainer.style.marginBottom = '20px';
  695.  
  696.         // Group commit types by their label
  697.         const groupedTypes = {};
  698.         Object.entries(USER_CONFIG.commitTypes).forEach(([type, config]) => {
  699.             const key = config.label;
  700.             if (!groupedTypes[key]) {
  701.                 groupedTypes[key] = {
  702.                     types: [],
  703.                     config: config
  704.                 };
  705.             }
  706.             groupedTypes[key].types.push(type);
  707.         });
  708.  
  709.         // Create rows for grouped types
  710.         Object.entries(groupedTypes).forEach(([label, { types, config }]) => {
  711.             const typeDiv = document.createElement('div');
  712.             typeDiv.style.marginBottom = '10px';
  713.             typeDiv.style.display = 'flex';
  714.             typeDiv.style.alignItems = 'center';
  715.             typeDiv.style.gap = '10px';
  716.  
  717.             // Type names (with aliases) and edit button container
  718.             const typeContainer = document.createElement('div');
  719.             typeContainer.style.display = 'flex';
  720.             typeContainer.style.width = '150px';
  721.             typeContainer.style.alignItems = 'center';
  722.             typeContainer.style.gap = '4px';
  723.  
  724.             const typeSpan = document.createElement('span');
  725.             typeSpan.style.color = configStyles.text.dim;
  726.             typeSpan.style.flex = '1';
  727.             typeSpan.textContent = types.join(', ') + ':';
  728.  
  729.             const editAliasButton = document.createElement('button');
  730.             editAliasButton.textContent = '✏️';
  731.             editAliasButton.title = 'Edit Aliases';
  732.             editAliasButton.style.cssText = `
  733.                 padding: 2px 4px;
  734.                 background: ${configStyles.button.secondary.background};
  735.                 color: ${isDark ? '#58a6ff' : '#0969da'};
  736.                 border: ${configStyles.button.secondary.border};
  737.                 border-radius: 4px;
  738.                 cursor: pointer;
  739.                 font-size: 10px;
  740.             `;
  741.  
  742.             editAliasButton.onclick = () => {
  743.                 const currentAliases = types.join(', ');
  744.                 const newAliases = prompt('Edit aliases (separate with commas):', currentAliases);
  745.  
  746.                 if (newAliases && newAliases.trim()) {
  747.                     const newTypes = newAliases.split(',').map(t => t.trim().toLowerCase()).filter(t => t);
  748.  
  749.                     // Check if any new aliases conflict with other types
  750.                     const conflictingType = newTypes.find(type =>
  751.                         USER_CONFIG.commitTypes[type] && !types.includes(type)
  752.                     );
  753.  
  754.                     if (conflictingType) {
  755.                         alert(`The alias "${conflictingType}" already exists in another group!`);
  756.                         return;
  757.                     }
  758.  
  759.                     // Remove old types
  760.                     types.forEach(type => delete USER_CONFIG.commitTypes[type]);
  761.  
  762.                     // Add new types with same config
  763.                     newTypes.forEach(type => {
  764.                         USER_CONFIG.commitTypes[type] = { ...config };
  765.                     });
  766.  
  767.                     // Update the display
  768.                     typeSpan.textContent = newTypes.join(', ') + ':';
  769.  
  770.                     // Update dataset for inputs
  771.                     const inputs = typeDiv.querySelectorAll('input, select');
  772.                     inputs.forEach(input => {
  773.                         input.dataset.types = newTypes.join(',');
  774.                     });
  775.                 }
  776.             };
  777.  
  778.             typeContainer.appendChild(typeSpan);
  779.             typeContainer.appendChild(editAliasButton);
  780.             typeDiv.appendChild(typeContainer);
  781.  
  782.             // Emoji input
  783.             const emojiInput = document.createElement('input');
  784.             emojiInput.type = 'text';
  785.             emojiInput.value = config.emoji;
  786.             emojiInput.style.width = '40px';
  787.             emojiInput.style.background = configStyles.input.background;
  788.             emojiInput.style.color = configStyles.input.color;
  789.             emojiInput.style.border = configStyles.input.border;
  790.             emojiInput.style.borderRadius = '4px';
  791.             emojiInput.style.padding = '4px';
  792.             emojiInput.dataset.types = types.join(',');
  793.             emojiInput.dataset.field = 'emoji';
  794.             typeDiv.appendChild(emojiInput);
  795.  
  796.             // Label input
  797.             const labelInput = document.createElement('input');
  798.             labelInput.type = 'text';
  799.             labelInput.value = config.label;
  800.             labelInput.style.width = '120px';
  801.             labelInput.style.background = configStyles.input.background;
  802.             labelInput.style.color = configStyles.input.color;
  803.             labelInput.style.border = configStyles.input.border;
  804.             labelInput.style.borderRadius = '4px';
  805.             labelInput.style.padding = '4px';
  806.             labelInput.dataset.types = types.join(',');
  807.             labelInput.dataset.field = 'label';
  808.             typeDiv.appendChild(labelInput);
  809.  
  810.             // Color select
  811.             const colorSelect = document.createElement('select');
  812.             Object.keys(COLORS).forEach(color => {
  813.                 const option = document.createElement('option');
  814.                 option.value = color;
  815.                 option.textContent = color;
  816.                 if (config.color === color) option.selected = true;
  817.                 colorSelect.appendChild(option);
  818.             });
  819.             colorSelect.style.background = configStyles.input.background;
  820.             colorSelect.style.color = configStyles.input.color;
  821.             colorSelect.style.border = configStyles.input.border;
  822.             colorSelect.style.borderRadius = '4px';
  823.             colorSelect.style.padding = '4px';
  824.             colorSelect.dataset.types = types.join(',');
  825.             colorSelect.dataset.field = 'color';
  826.             typeDiv.appendChild(colorSelect);
  827.  
  828.             // Delete button
  829.             const deleteButton = document.createElement('button');
  830.             deleteButton.textContent = '🗑️';
  831.             deleteButton.style.cssText = `
  832.                 padding: 2px 8px;
  833.                 background: ${configStyles.button.danger.background};
  834.                 color: ${configStyles.button.danger.color};
  835.                 border: ${configStyles.button.danger.border};
  836.                 border-radius: 4px;
  837.                 cursor: pointer;
  838.             `;
  839.             deleteButton.onclick = () => {
  840.                 if (confirm(`Delete commit types "${types.join(', ')}"?`)) {
  841.                     typeDiv.remove();
  842.                     types.forEach(type => delete USER_CONFIG.commitTypes[type]);
  843.                 }
  844.             };
  845.             typeDiv.appendChild(deleteButton);
  846.  
  847.             typesContainer.appendChild(typeDiv);
  848.         });
  849.  
  850.         // Add "Add New Type" button
  851.         const addNewButton = document.createElement('button');
  852.         addNewButton.textContent = '+ Add New Type';
  853.         addNewButton.style.cssText = `
  854.             margin-bottom: 15px;
  855.             padding: 5px 16px;
  856.             background: ${configStyles.button.primary.background};
  857.             color: ${configStyles.button.primary.color};
  858.             border: ${configStyles.button.primary.border};
  859.             border-radius: 6px;
  860.             cursor: pointer;
  861.         `;
  862.  
  863.         addNewButton.onclick = () => {
  864.             const typeInput = prompt('Enter the commit type and aliases (separated by commas, e.g., "added, add"):', '');
  865.             if (typeInput && typeInput.trim()) {
  866.                 const types = typeInput.split(',').map(t => t.trim().toLowerCase()).filter(t => t);
  867.  
  868.                 // Check if any of the types already exist
  869.                 const existingType = types.find(type => USER_CONFIG.commitTypes[type]);
  870.                 if (existingType) {
  871.                     alert(`The commit type "${existingType}" already exists!`);
  872.                     return;
  873.                 }
  874.  
  875.                 // Create base config for all aliases
  876.                 const baseConfig = {
  877.                     emoji: '🔄',
  878.                     label: types[0].charAt(0).toUpperCase() + types[0].slice(1),
  879.                     color: 'blue',
  880.                     description: 'Custom commit type'
  881.                 };
  882.  
  883.                 // Add all types to config with the same settings
  884.                 types.forEach(type => {
  885.                     USER_CONFIG.commitTypes[type] = { ...baseConfig };
  886.                 });
  887.  
  888.                 // Create and add new type row
  889.                 const typeDiv = document.createElement('div');
  890.                 typeDiv.style.marginBottom = '10px';
  891.                 typeDiv.style.display = 'flex';
  892.                 typeDiv.style.alignItems = 'center';
  893.                 typeDiv.style.gap = '10px';
  894.  
  895.                 // Type names (with aliases)
  896.                 const typeSpan = document.createElement('span');
  897.                 typeSpan.style.width = '150px';
  898.                 typeSpan.style.color = configStyles.text.dim;
  899.                 typeSpan.textContent = types.join(', ') + ':';
  900.                 typeDiv.appendChild(typeSpan);
  901.  
  902.                 // Emoji input
  903.                 const emojiInput = document.createElement('input');
  904.                 emojiInput.type = 'text';
  905.                 emojiInput.value = baseConfig.emoji;
  906.                 emojiInput.style.width = '40px';
  907.                 emojiInput.style.background = configStyles.input.background;
  908.                 emojiInput.style.color = configStyles.input.color;
  909.                 emojiInput.style.border = configStyles.input.border;
  910.                 emojiInput.style.borderRadius = '4px';
  911.                 emojiInput.style.padding = '4px';
  912.                 emojiInput.dataset.types = types.join(',');
  913.                 emojiInput.dataset.field = 'emoji';
  914.                 typeDiv.appendChild(emojiInput);
  915.  
  916.                 // Label input
  917.                 const labelInput = document.createElement('input');
  918.                 labelInput.type = 'text';
  919.                 labelInput.value = baseConfig.label;
  920.                 labelInput.style.width = '120px';
  921.                 labelInput.style.background = configStyles.input.background;
  922.                 labelInput.style.color = configStyles.input.color;
  923.                 labelInput.style.border = configStyles.input.border;
  924.                 labelInput.style.borderRadius = '4px';
  925.                 labelInput.style.padding = '4px';
  926.                 labelInput.dataset.types = types.join(',');
  927.                 labelInput.dataset.field = 'label';
  928.                 typeDiv.appendChild(labelInput);
  929.  
  930.                 // Color select
  931.                 const colorSelect = document.createElement('select');
  932.                 Object.keys(COLORS).forEach(color => {
  933.                     const option = document.createElement('option');
  934.                     option.value = color;
  935.                     option.textContent = color;
  936.                     if (color === 'blue') option.selected = true;
  937.                     colorSelect.appendChild(option);
  938.                 });
  939.                 colorSelect.style.background = configStyles.input.background;
  940.                 colorSelect.style.color = configStyles.input.color;
  941.                 colorSelect.style.border = configStyles.input.border;
  942.                 colorSelect.style.borderRadius = '4px';
  943.                 colorSelect.style.padding = '4px';
  944.                 colorSelect.dataset.types = types.join(',');
  945.                 colorSelect.dataset.field = 'color';
  946.                 typeDiv.appendChild(colorSelect);
  947.  
  948.                 // Delete button
  949.                 const deleteButton = document.createElement('button');
  950.                 deleteButton.textContent = '🗑️';
  951.                 deleteButton.style.cssText = `
  952.                     padding: 2px 8px;
  953.                     background: ${configStyles.button.danger.background};
  954.                     color: ${configStyles.button.danger.color};
  955.                     border: ${configStyles.button.danger.border};
  956.                     border-radius: 4px;
  957.                     cursor: pointer;
  958.                 `;
  959.                 deleteButton.onclick = () => {
  960.                     if (confirm(`Delete commit types "${types.join(', ')}"?`)) {
  961.                         typeDiv.remove();
  962.                         types.forEach(type => delete USER_CONFIG.commitTypes[type]);
  963.                     }
  964.                 };
  965.                 typeDiv.appendChild(deleteButton);
  966.  
  967.                 typesContainer.appendChild(typeDiv);
  968.             }
  969.         };
  970.  
  971.         configWindow.appendChild(addNewButton);
  972.         configWindow.appendChild(typesContainer);
  973.  
  974.         // Save and Close buttons
  975.         const buttonContainer = document.createElement('div');
  976.         buttonContainer.style.display = 'flex';
  977.         buttonContainer.style.gap = '10px';
  978.         buttonContainer.style.justifyContent = 'flex-end';
  979.  
  980.         const saveButton = document.createElement('button');
  981.         saveButton.textContent = 'Save';
  982.         saveButton.style.cssText = `
  983.             padding: 5px 16px;
  984.             background: ${configStyles.button.primary.background};
  985.             color: ${configStyles.button.primary.color};
  986.             border: ${configStyles.button.primary.border};
  987.             border-radius: 6px;
  988.             cursor: pointer;
  989.         `;
  990.  
  991.         const closeButton = document.createElement('button');
  992.         closeButton.textContent = 'Close';
  993.         closeButton.style.cssText = `
  994.             padding: 5px 16px;
  995.             background: ${configStyles.button.secondary.background};
  996.             color: ${configStyles.button.secondary.color};
  997.             border: ${configStyles.button.secondary.border};
  998.             border-radius: 6px;
  999.             cursor: pointer;
  1000.         `;
  1001.  
  1002.         // Add Reset button next to Save and Close
  1003.         const resetButton = document.createElement('button');
  1004.         resetButton.textContent = 'Reset to Default';
  1005.         resetButton.style.cssText = `
  1006.             padding: 5px 16px;
  1007.             background: ${configStyles.button.danger.background};
  1008.             color: ${configStyles.button.danger.color};
  1009.             border: ${configStyles.button.danger.border};
  1010.             border-radius: 6px;
  1011.             cursor: pointer;
  1012.             margin-right: auto;  // This pushes Save/Close to the right
  1013.         `;
  1014.  
  1015.         resetButton.onclick = () => {
  1016.             if (confirm('Are you sure you want to reset all settings to default? This will remove all custom types and settings.')) {
  1017.                 GM_setValue('commitLabelsConfig', DEFAULT_CONFIG);
  1018.                 location.reload();
  1019.             }
  1020.         };
  1021.  
  1022.         saveButton.onclick = () => {
  1023.             const newConfig = { ...USER_CONFIG };
  1024.             newConfig.removePrefix = prefixCheckbox.checked;
  1025.             newConfig.enableTooltips = tooltipCheckbox.checked;
  1026.             newConfig.showFloatingButton = floatingBtnCheckbox.checked;
  1027.             newConfig.showScope = scopeCheckbox.checked;
  1028.             newConfig.debugMode = debugCheckbox.checked;  // Add debug mode
  1029.             newConfig.commitTypes = {};
  1030.  
  1031.             typesContainer.querySelectorAll('input, select').forEach(input => {
  1032.                 const types = input.dataset.types.split(',');
  1033.                 const field = input.dataset.field;
  1034.  
  1035.                 types.forEach(type => {
  1036.                     if (!newConfig.commitTypes[type]) {
  1037.                         newConfig.commitTypes[type] = {};
  1038.                     }
  1039.                     newConfig.commitTypes[type][field] = input.value;
  1040.                 });
  1041.             });
  1042.  
  1043.             GM_setValue('commitLabelsConfig', newConfig);
  1044.             location.reload();
  1045.         };
  1046.  
  1047.         closeButton.onclick = () => {
  1048.             document.body.removeChild(configWindow);
  1049.         };
  1050.  
  1051.         buttonContainer.appendChild(resetButton);
  1052.         buttonContainer.appendChild(closeButton);
  1053.         buttonContainer.appendChild(saveButton);
  1054.         configWindow.appendChild(buttonContainer);
  1055.  
  1056.         document.body.appendChild(configWindow);
  1057.     }
  1058.  
  1059.     // Create export/import dialog
  1060.     function createExportImportDialog() {
  1061.         // Check if dialog already exists
  1062.         if (document.getElementById('config-export-import')) {
  1063.             document.getElementById('config-export-import').remove();
  1064.         }
  1065.         
  1066.         const dialog = document.createElement('div');
  1067.         dialog.id = 'config-export-import';
  1068.         dialog.style.cssText = `
  1069.             position: fixed;
  1070.             top: 50%;
  1071.             left: 50%;
  1072.             transform: translate(-50%, -50%);
  1073.             background: #0d1117;
  1074.             border: 1px solid #30363d;
  1075.             border-radius: 6px;
  1076.             padding: 20px;
  1077.             z-index: 9999;
  1078.             width: 500px;
  1079.             max-height: 80vh;
  1080.             overflow-y: auto;
  1081.             color: #c9d1d9;
  1082.             box-shadow: 0 0 20px rgba(0,0,0,0.7);
  1083.         `;
  1084.         
  1085.         const title = document.createElement('h2');
  1086.         title.textContent = 'Export/Import Configuration';
  1087.         title.style.marginBottom = '15px';
  1088.         
  1089.         const exportSection = document.createElement('div');
  1090.         exportSection.style.marginBottom = '20px';
  1091.         
  1092.         const exportTitle = document.createElement('h3');
  1093.         exportTitle.textContent = 'Export Configuration';
  1094.         exportTitle.style.marginBottom = '10px';
  1095.         
  1096.         const configOutput = document.createElement('textarea');
  1097.         configOutput.readOnly = true;
  1098.         configOutput.value = JSON.stringify(USER_CONFIG, null, 2);
  1099.         configOutput.style.cssText = `
  1100.             width: 100%;
  1101.             height: 150px;
  1102.             background: #161b22;
  1103.             color: #c9d1d9;
  1104.             border: 1px solid #30363d;
  1105.             border-radius: 6px;
  1106.             padding: 10px;
  1107.             font-family: monospace;
  1108.             resize: vertical;
  1109.             margin-bottom: 10px;
  1110.         `;
  1111.         
  1112.         const copyButton = document.createElement('button');
  1113.         copyButton.textContent = 'Copy to Clipboard';
  1114.         copyButton.style.cssText = `
  1115.             padding: 6px 16px;
  1116.             background: #238636;
  1117.             color: #fff;
  1118.             border: none;
  1119.             border-radius: 6px;
  1120.             cursor: pointer;
  1121.             margin-right: 10px;
  1122.         `;
  1123.         
  1124.         copyButton.onclick = () => {
  1125.             configOutput.select();
  1126.             document.execCommand('copy');
  1127.             copyButton.textContent = 'Copied!';
  1128.             setTimeout(() => {
  1129.                 copyButton.textContent = 'Copy to Clipboard';
  1130.             }, 2000);
  1131.         };
  1132.         
  1133.         exportSection.appendChild(exportTitle);
  1134.         exportSection.appendChild(configOutput);
  1135.         exportSection.appendChild(copyButton);
  1136.         
  1137.         const importSection = document.createElement('div');
  1138.         importSection.style.marginBottom = '20px';
  1139.         
  1140.         const importTitle = document.createElement('h3');
  1141.         importTitle.textContent = 'Import Configuration';
  1142.         importTitle.style.marginBottom = '10px';
  1143.         
  1144.         const configInput = document.createElement('textarea');
  1145.         configInput.placeholder = 'Paste configuration JSON here...';
  1146.         configInput.style.cssText = `
  1147.             width: 100%;
  1148.             height: 150px;
  1149.             background: #161b22;
  1150.             color: #c9d1d9;
  1151.             border: 1px solid #30363d;
  1152.             border-radius: 6px;
  1153.             padding: 10px;
  1154.             font-family: monospace;
  1155.             resize: vertical;
  1156.             margin-bottom: 10px;
  1157.         `;
  1158.         
  1159.         const importButton = document.createElement('button');
  1160.         importButton.textContent = 'Import';
  1161.         importButton.style.cssText = `
  1162.             padding: 6px 16px;
  1163.             background: #238636;
  1164.             color: #fff;
  1165.             border: none;
  1166.             border-radius: 6px;
  1167.             cursor: pointer;
  1168.             margin-right: 10px;
  1169.         `;
  1170.         
  1171.         importButton.onclick = () => {
  1172.             try {
  1173.                 const newConfig = JSON.parse(configInput.value);
  1174.                 
  1175.                 // Validate basic structure
  1176.                 if (!newConfig.commitTypes) {
  1177.                     throw new Error('Invalid configuration: missing commitTypes object');
  1178.                 }
  1179.                 
  1180.                 if (confirm('Are you sure you want to import this configuration? This will overwrite your current settings.')) {
  1181.                     GM_setValue('commitLabelsConfig', newConfig);
  1182.                     alert('Configuration imported successfully! Page will reload to apply changes.');
  1183.                     location.reload();
  1184.                 }
  1185.             } catch (error) {
  1186.                 alert('Error importing configuration: ' + error.message);
  1187.             }
  1188.         };
  1189.         
  1190.         const closeButton = document.createElement('button');
  1191.         closeButton.textContent = 'Close';
  1192.         closeButton.style.cssText = `
  1193.             padding: 6px 16px;
  1194.             background: #21262d;
  1195.             color: #c9d1d9;
  1196.             border: 1px solid #30363d;
  1197.             border-radius: 6px;
  1198.             cursor: pointer;
  1199.         `;
  1200.         
  1201.         closeButton.onclick = () => {
  1202.             document.body.removeChild(dialog);
  1203.         };
  1204.         
  1205.         importSection.appendChild(importTitle);
  1206.         importSection.appendChild(configInput);
  1207.         importSection.appendChild(importButton);
  1208.         
  1209.         dialog.appendChild(title);
  1210.         dialog.appendChild(exportSection);
  1211.         dialog.appendChild(importSection);
  1212.         dialog.appendChild(closeButton);
  1213.         
  1214.         document.body.appendChild(dialog);
  1215.     }
  1216.  
  1217.     // Register configuration menu command
  1218.     GM_registerMenuCommand('Configure Commit Labels', createConfigWindow);
  1219.     GM_registerMenuCommand('Toggle Labels', () => {
  1220.         USER_CONFIG.labelsVisible = !USER_CONFIG.labelsVisible;
  1221.         GM_setValue('commitLabelsConfig', USER_CONFIG);
  1222.         
  1223.         // Toggle label visibility
  1224.         document.querySelectorAll('.commit-label').forEach(label => {
  1225.             label.style.display = USER_CONFIG.labelsVisible ? 'inline-flex' : 'none';
  1226.         });
  1227.         
  1228.         // Update toggle button if it exists
  1229.         const toggleBtn = document.getElementById('commit-labels-toggle');
  1230.         if (toggleBtn) {
  1231.             toggleBtn.textContent = USER_CONFIG.labelsVisible ? '🏷️' : '🏷️';
  1232.             toggleBtn.style.textDecoration = USER_CONFIG.labelsVisible ? 'none' : 'line-through';
  1233.             toggleBtn.title = USER_CONFIG.labelsVisible ? 'Hide commit labels' : 'Show commit labels';
  1234.         }
  1235.     });
  1236.     GM_registerMenuCommand('Export/Import Config', createExportImportDialog);
  1237.  
  1238.     // Check if we're on a commit page
  1239.     function isCommitPage() {
  1240.         return window.location.pathname.includes('/commits') ||
  1241.                window.location.pathname.includes('/commit/');
  1242.     }
  1243.  
  1244.     // Update colors when theme changes
  1245.     function updateThemeColors() {
  1246.         const newTheme = detectTheme();
  1247.         if (newTheme !== currentTheme) {
  1248.             currentTheme = newTheme;
  1249.             
  1250.             // Map theme variants to our base themes for colors
  1251.             let baseTheme = newTheme;
  1252.             if (newTheme.startsWith('light_')) {
  1253.                 baseTheme = 'light';
  1254.             } else if (newTheme.startsWith('dark_') && newTheme !== 'dark_dimmed') {
  1255.                 baseTheme = 'dark';
  1256.             }
  1257.             
  1258.             COLORS = THEME_COLORS[baseTheme] || THEME_COLORS.light;
  1259.             
  1260.             // Update existing labels
  1261.             document.querySelectorAll('.commit-label').forEach(label => {
  1262.                 const type = label.dataset.commitType;
  1263.                 if (type && USER_CONFIG.commitTypes[type]) {
  1264.                     const color = COLORS[USER_CONFIG.commitTypes[type].color];
  1265.                     if (color) {
  1266.                         label.style.backgroundColor = color.bg;
  1267.                         label.style.color = color.text;
  1268.                     }
  1269.                 }
  1270.             });
  1271.         }
  1272.     }
  1273.  
  1274.     // Debug logging function
  1275.     function debugLog(message, data = null) {
  1276.         if (USER_CONFIG.debugMode) {
  1277.             const timestamp = new Date().toISOString();
  1278.             const logMessage = `[GitHub Commit Labels Debug] [${timestamp}] ${message}`;
  1279.             console.log(logMessage);
  1280.             if (data) {
  1281.                 console.log('Data:', data);
  1282.             }
  1283.         }
  1284.     }
  1285.  
  1286.     // Helper function to safely query elements
  1287.     function safeQuerySelector(selector) {
  1288.         try {
  1289.             const elements = document.querySelectorAll(selector);
  1290.             debugLog(`Query selector "${selector}" found ${elements.length} elements`);
  1291.             return elements;
  1292.         } catch (error) {
  1293.             debugLog(`Selector error for "${selector}":`, error);
  1294.             return [];
  1295.         }
  1296.     }
  1297.  
  1298.     // Debounce function to limit how often a function can be called
  1299.     function debounce(func, wait) {
  1300.         let timeout;
  1301.         return function executedFunction(...args) {
  1302.             const later = () => {
  1303.                 clearTimeout(timeout);
  1304.                 func(...args);
  1305.             };
  1306.             clearTimeout(timeout);
  1307.             timeout = setTimeout(later, wait);
  1308.         };
  1309.     }
  1310.  
  1311.     // Main function to add labels to commits
  1312.     function addCommitLabels() {
  1313.         debugLog('Starting addCommitLabels');
  1314.         
  1315.         // Only proceed if we're on a commit page
  1316.         if (!isCommitPage()) {
  1317.             debugLog('Not on a commit page, exiting');
  1318.             return;
  1319.         }
  1320.  
  1321.         debugLog('Updating theme colors');
  1322.         updateThemeColors();
  1323.         
  1324.         // Create toggle button if it doesn't exist and is enabled
  1325.         if (USER_CONFIG.showFloatingButton !== false) {
  1326.             debugLog('Creating label toggle button');
  1327.             createLabelToggle();
  1328.         }
  1329.  
  1330.         // Try multiple selectors in order of reliability
  1331.         const selectors = [
  1332.             'li[data-testid="commit-row-item"] h4 a[data-pjax="true"]', // Most reliable
  1333.             '.Title-module__heading--upUxW a[data-pjax="true"]',        // Backup
  1334.             '.markdown-title a[data-pjax="true"]'                       // Legacy
  1335.         ];
  1336.  
  1337.         debugLog('Trying selectors:', selectors);
  1338.         let commitMessages = [];
  1339.         for (const selector of selectors) {
  1340.             commitMessages = safeQuerySelector(selector);
  1341.             if (commitMessages.length > 0) {
  1342.                 debugLog(`Using selector: ${selector}`);
  1343.                 break;
  1344.             }
  1345.         }
  1346.  
  1347.         debugLog(`Found ${commitMessages.length} commit messages to process`);
  1348.  
  1349.         // Debounce and batch process for performance improvement
  1350.         let processedCount = 0;
  1351.         const batchSize = 20;
  1352.         const commitMessagesArray = Array.from(commitMessages);
  1353.         
  1354.         const processCommitBatch = (startIndex) => {
  1355.             debugLog(`Processing batch starting at index ${startIndex}`);
  1356.             const endIndex = Math.min(startIndex + batchSize, commitMessagesArray.length);
  1357.             
  1358.             for (let i = startIndex; i < endIndex; i++) {
  1359.                 try {
  1360.                     const message = commitMessagesArray[i];
  1361.                     const text = message.textContent.trim();
  1362.                     debugLog(`Processing commit message: ${text}`);
  1363.                     
  1364.                     // Skip if this commit already has a label
  1365.                     if (message.parentElement.querySelector('.commit-label')) {
  1366.                         debugLog('Commit already has a label, skipping');
  1367.                         continue;
  1368.                     }
  1369.  
  1370.                     // Step 1: Basic parse - Capture type, middle part, and message
  1371.                     const basicMatch = text.match(/^(\w+)(.*?):\s*(.*)$/);
  1372.                     debugLog('Basic commit message match result:', basicMatch);
  1373.  
  1374.                     if (basicMatch) {
  1375.                         const type = basicMatch[1].toLowerCase();
  1376.                         const middlePart = basicMatch[2].trim();
  1377.                         const restOfMessage = basicMatch[3];
  1378.  
  1379.                         let scope = '';
  1380.                         let isBreaking = false;
  1381.                         let scopePart = middlePart; // Start with the full middle part
  1382.  
  1383.                         // Step 2: Check for breaking change indicator anywhere in the middle part
  1384.                         if (middlePart.includes('!')) {
  1385.                             isBreaking = true;
  1386.                             scopePart = middlePart.replace('!', '').trim(); // Remove ! for scope extraction
  1387.                         }
  1388.                         
  1389.                         // Step 3: Check if the remaining part is a scope
  1390.                         if (scopePart.startsWith('(') && scopePart.endsWith(')')) {
  1391.                             scope = scopePart.slice(1, -1); // Extract scope content
  1392.                         }
  1393.  
  1394.                         debugLog(`Extracted: type=${type}, scope=${scope}, isBreaking=${isBreaking}, message=${restOfMessage}`);
  1395.  
  1396.                         if (USER_CONFIG.commitTypes[type]) {
  1397.                             debugLog(`Found matching commit type: ${type}`);
  1398.                             // Only add label if it hasn't been added yet
  1399.                             if (!message.parentElement.querySelector('.commit-label')) {
  1400.                                 debugLog('Creating new label');
  1401.                                 const label = document.createElement('span');
  1402.                                 label.className = 'commit-label';
  1403.                                 label.dataset.commitType = type;
  1404.                                 label.dataset.commitScope = scope;
  1405.                                 if (isBreaking) {
  1406.                                     label.dataset.isBreaking = 'true';
  1407.                                 }
  1408.                                 
  1409.                                 const color = COLORS[USER_CONFIG.commitTypes[type].color];
  1410.                                 
  1411.                                 // Apply styles
  1412.                                 const styles = {
  1413.                                     ...USER_CONFIG.labelStyle,
  1414.                                     backgroundColor: color.bg,
  1415.                                     color: color.text,
  1416.                                     display: USER_CONFIG.labelsVisible ? 'inline-flex' : 'none'
  1417.                                 };
  1418.  
  1419.                                 if (isBreaking) {
  1420.                                     styles.border = '2px solid #d73a49';
  1421.                                     styles.fontWeight = 'bold';
  1422.                                 }
  1423.  
  1424.                                 label.style.cssText = Object.entries(styles)
  1425.                                     .map(([key, value]) => `${key.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${value}`)
  1426.                                     .join(';');
  1427.  
  1428.                                 // Enhanced tooltip
  1429.                                 if (USER_CONFIG.enableTooltips && USER_CONFIG.commitTypes[type].description) {
  1430.                                     // Store description in data attribute instead of title to avoid double tooltips
  1431.                                     const description = USER_CONFIG.commitTypes[type].description;
  1432.                                     const tooltipText = scope ? 
  1433.                                         `${description} (Scope: ${scope})` : 
  1434.                                         description;
  1435.                                     label.dataset.description = tooltipText;
  1436.                                     label.setAttribute('aria-label', tooltipText);
  1437.                                     
  1438.                                     // Add tooltip indicator
  1439.                                     label.style.cursor = 'help';
  1440.                                     
  1441.                                     // For better accessibility
  1442.                                     label.setAttribute('role', 'tooltip');
  1443.                                     
  1444.                                     // Create a custom tooltip implementation if needed
  1445.                                     label.addEventListener('mouseenter', (e) => {
  1446.                                         // Check if we already have a custom tooltip showing
  1447.                                         if (document.querySelector('.commit-label-tooltip')) {
  1448.                                             return;
  1449.                                         }
  1450.                                         
  1451.                                         label.style.transform = 'translateY(-1px)';
  1452.                                         label.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
  1453.                                         
  1454.                                         // Force show tooltip by creating a custom one
  1455.                                         if (label.dataset.description) {
  1456.                                             const tooltip = document.createElement('div');
  1457.                                             tooltip.className = 'commit-label-tooltip';
  1458.                                             tooltip.textContent = label.dataset.description;
  1459.                                             
  1460.                                             // Calculate position relative to viewport
  1461.                                             const rect = e.target.getBoundingClientRect();
  1462.                                             const top = rect.bottom + 5;
  1463.                                             const left = rect.left;
  1464.                                             
  1465.                                             tooltip.style.cssText = `
  1466.                                                 position: fixed;
  1467.                                                 top: ${top}px;
  1468.                                                 left: ${left}px;
  1469.                                                 max-width: 300px;
  1470.                                                 padding: 8px 12px;
  1471.                                                 color: #e6edf3;
  1472.                                                 text-align: center;
  1473.                                                 background-color: #161b22;
  1474.                                                 border-radius: 6px;
  1475.                                                 border: 1px solid #30363d;
  1476.                                                 box-shadow: 0 3px 12px rgba(0,0,0,0.4);
  1477.                                                 font-size: 12px;
  1478.                                                 z-index: 1000;
  1479.                                                 pointer-events: none;
  1480.                                             `;
  1481.                                             document.body.appendChild(tooltip);
  1482.                                             
  1483.                                             // Adjust position if tooltip goes off-screen
  1484.                                             const tooltipRect = tooltip.getBoundingClientRect();
  1485.                                             if (tooltipRect.right > window.innerWidth) {
  1486.                                                 tooltip.style.left = `${window.innerWidth - tooltipRect.width - 10}px`;
  1487.                                             }
  1488.                                         }
  1489.                                     });
  1490.  
  1491.                                     label.addEventListener('mouseleave', () => {
  1492.                                         label.style.transform = 'translateY(0)';
  1493.                                         label.style.boxShadow = styles.boxShadow;
  1494.                                         
  1495.                                         // Remove custom tooltip if it exists
  1496.                                         const tooltip = document.querySelector('.commit-label-tooltip');
  1497.                                         if (tooltip) {
  1498.                                             document.body.removeChild(tooltip);
  1499.                                         }
  1500.                                     });
  1501.                                 } else {
  1502.                                     // Normal hover effect if tooltips are disabled
  1503.                                     if (USER_CONFIG.commitTypes[type].description) {
  1504.                                         label.title = USER_CONFIG.commitTypes[type].description;
  1505.                                     }
  1506.                                     
  1507.                                     label.addEventListener('mouseenter', () => {
  1508.                                         label.style.transform = 'translateY(-1px)';
  1509.                                         label.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
  1510.                                     });
  1511.  
  1512.                                     label.addEventListener('mouseleave', () => {
  1513.                                         label.style.transform = 'translateY(0)';
  1514.                                         label.style.boxShadow = styles.boxShadow;
  1515.                                     });
  1516.                                 }
  1517.  
  1518.                                 const emoji = document.createElement('span');
  1519.                                 emoji.style.marginRight = '4px';
  1520.                                 emoji.style.fontSize = '14px';
  1521.                                 emoji.style.lineHeight = '1';
  1522.                                 emoji.textContent = USER_CONFIG.commitTypes[type].emoji;
  1523.  
  1524.                                 const labelText = document.createElement('span');
  1525.                                 labelText.textContent = USER_CONFIG.commitTypes[type].label;
  1526.                                 if (isBreaking) {
  1527.                                     labelText.textContent += ' ⚠️';
  1528.                                 }
  1529.  
  1530.                                 label.appendChild(emoji);
  1531.                                 label.appendChild(labelText);
  1532.                                 message.parentElement.insertBefore(label, message);
  1533.  
  1534.                                 // Update the commit message text to remove the type prefix if enabled
  1535.                                 if (USER_CONFIG.removePrefix) {
  1536.                                     message.textContent = restOfMessage;
  1537.                                 }
  1538.  
  1539.                                 // Optionally display scope in the label
  1540.                                 if (scope && USER_CONFIG.showScope) {
  1541.                                     const scopeSpan = document.createElement('span');
  1542.                                     scopeSpan.className = 'commit-scope';
  1543.                                     scopeSpan.textContent = `(${scope})`;
  1544.                                     scopeSpan.style.marginLeft = '2px';
  1545.                                     scopeSpan.style.opacity = '0.8';
  1546.                                     scopeSpan.style.fontSize = '12px';
  1547.                                     labelText.appendChild(scopeSpan);
  1548.                                 }
  1549.                             } else {
  1550.                                 debugLog('Label already exists, skipping');
  1551.                             }
  1552.                         } else {
  1553.                             debugLog(`No matching commit type found for: ${type}`);
  1554.                         }
  1555.                     } else {
  1556.                         // Only log non-conventional commits if they don't have a label
  1557.                         if (!message.parentElement.querySelector('.commit-label')) {
  1558.                             debugLog('Commit message does not match conventional commit format and has no label');
  1559.                         } else {
  1560.                             debugLog('Skipping already processed commit');
  1561.                         }
  1562.                     }
  1563.                 } catch (error) {
  1564.                     debugLog('Error processing commit:', error);
  1565.                 }
  1566.             }
  1567.             
  1568.             // Process next batch if needed
  1569.             processedCount += (endIndex - startIndex);
  1570.             debugLog(`Processed ${processedCount} of ${commitMessagesArray.length} commits`);
  1571.             
  1572.             if (processedCount < commitMessagesArray.length) {
  1573.                 debugLog('Scheduling next batch');
  1574.                 setTimeout(() => processCommitBatch(endIndex), 0);
  1575.             } else {
  1576.                 debugLog('Finished processing all commits');
  1577.             }
  1578.         };
  1579.         
  1580.         // Start processing first batch
  1581.         if (commitMessagesArray.length > 0) {
  1582.             debugLog('Starting first batch processing');
  1583.             processCommitBatch(0);
  1584.         } else {
  1585.             debugLog('No commit messages found to process');
  1586.         }
  1587.     }
  1588.  
  1589.     // Set up MutationObserver to watch for DOM changes
  1590.     function setupMutationObserver() {
  1591.         debugLog('Setting up MutationObserver');
  1592.         const observer = new MutationObserver(debounce((mutations) => {
  1593.             debugLog('DOM changes detected:', mutations);
  1594.             for (const mutation of mutations) {
  1595.                 if (mutation.addedNodes.length) {
  1596.                     debugLog('New nodes added, triggering addCommitLabels');
  1597.                     addCommitLabels();
  1598.                 }
  1599.             }
  1600.         }, 100));
  1601.  
  1602.         // Start observing the document with the configured parameters
  1603.         observer.observe(document.body, {
  1604.             childList: true,
  1605.             subtree: true
  1606.         });
  1607.  
  1608.         debugLog('MutationObserver setup complete');
  1609.         return observer;
  1610.     }
  1611.  
  1612.     // Initialize the script
  1613.     function initialize() {
  1614.         debugLog('Initializing GitHub Commit Labels');
  1615.         // Initial run
  1616.         addCommitLabels();
  1617.  
  1618.         // Set up mutation observer
  1619.         const observer = setupMutationObserver();
  1620.  
  1621.         // Clean up on page unload
  1622.         window.addEventListener('unload', () => {
  1623.             debugLog('Cleaning up on page unload');
  1624.             observer.disconnect();
  1625.         });
  1626.     }
  1627.  
  1628.     // Initialize on page load
  1629.     initialize();
  1630.  
  1631.     // Handle GitHub's client-side navigation
  1632.     const navigationObserver = new MutationObserver(debounce((mutations) => {
  1633.         for (const mutation of mutations) {
  1634.             if (mutation.type === 'childList') {
  1635.                 // Check if we're on a commit page after navigation
  1636.                 if (isCommitPage()) {
  1637.                     // Small delay to ensure GitHub has finished rendering
  1638.                     setTimeout(addCommitLabels, 100);
  1639.                 }
  1640.             }
  1641.         }
  1642.     }, 100));
  1643.  
  1644.     // Observe changes to the main content area
  1645.     navigationObserver.observe(document.body, {
  1646.         childList: true,
  1647.         subtree: true
  1648.     });
  1649.  
  1650.     // Listen for popstate events (browser back/forward navigation)
  1651.     window.addEventListener('popstate', debounce(() => {
  1652.         if (isCommitPage()) {
  1653.             setTimeout(addCommitLabels, 100);
  1654.         }
  1655.     }, 100));
  1656.  
  1657.     // Listen for GitHub's custom navigation event
  1658.     document.addEventListener('turbo:render', debounce(() => {
  1659.         if (isCommitPage()) {
  1660.             setTimeout(addCommitLabels, 100);
  1661.         }
  1662.     }, 100));
  1663. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址