☰

GitHub Commit Labels

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

目前为 2025-04-14 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         GitHub Commit Labels
  3. // @namespace    https://github.com/nazdridoy
  4. // @version      1.5.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.         const toggleBtn = document.createElement('button');
  300.         toggleBtn.id = 'commit-labels-toggle';
  301.         toggleBtn.textContent = USER_CONFIG.labelsVisible ? '🏷️' : '🏷️';
  302.         toggleBtn.title = USER_CONFIG.labelsVisible ? 'Hide commit labels' : 'Show commit labels';
  303.         toggleBtn.style.cssText = `
  304.             position: fixed;
  305.             bottom: 20px;
  306.             right: 20px;
  307.             width: 32px;
  308.             height: 32px;
  309.             border-radius: 6px;
  310.             background: rgba(31, 35, 40, 0.6);
  311.             color: #adbac7;
  312.             border: 1px solid rgba(205, 217, 229, 0.1);
  313.             font-size: 14px;
  314.             cursor: pointer;
  315.             z-index: 9999;
  316.             display: flex;
  317.             align-items: center;
  318.             justify-content: center;
  319.             box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  320.             opacity: 0.5;
  321.             transition: opacity 0.2s, transform 0.2s, background-color 0.2s;
  322.             backdrop-filter: blur(4px);
  323.         `;
  324.         
  325.         // Add hover effect
  326.         toggleBtn.addEventListener('mouseenter', () => {
  327.             toggleBtn.style.opacity = '1';
  328.             toggleBtn.style.background = currentTheme === 'light' ? 
  329.                 'rgba(246, 248, 250, 0.8)' : 'rgba(22, 27, 34, 0.8)';
  330.             toggleBtn.style.color = currentTheme === 'light' ? '#24292f' : '#e6edf3';
  331.         });
  332.         
  333.         toggleBtn.addEventListener('mouseleave', () => {
  334.             toggleBtn.style.opacity = '0.5';
  335.             toggleBtn.style.background = 'rgba(31, 35, 40, 0.6)';
  336.             toggleBtn.style.color = '#adbac7';
  337.         });
  338.         
  339.         // Toggle labels on click
  340.         toggleBtn.addEventListener('click', () => {
  341.             USER_CONFIG.labelsVisible = !USER_CONFIG.labelsVisible;
  342.             GM_setValue('commitLabelsConfig', USER_CONFIG);
  343.             
  344.             // Update button
  345.             toggleBtn.textContent = USER_CONFIG.labelsVisible ? '🏷️' : '🏷️';
  346.             toggleBtn.style.textDecoration = USER_CONFIG.labelsVisible ? 'none' : 'line-through';
  347.             toggleBtn.title = USER_CONFIG.labelsVisible ? 'Hide commit labels' : 'Show commit labels';
  348.             
  349.             // Toggle label visibility
  350.             document.querySelectorAll('.commit-label').forEach(label => {
  351.                 label.style.display = USER_CONFIG.labelsVisible ? 'inline-flex' : 'none';
  352.             });
  353.         });
  354.         
  355.         document.body.appendChild(toggleBtn);
  356.         
  357.         // Set initial state
  358.         toggleBtn.style.textDecoration = USER_CONFIG.labelsVisible ? 'none' : 'line-through';
  359.     }
  360.  
  361.     // Create configuration window
  362.     function createConfigWindow() {
  363.         // Get current theme colors for the config window
  364.         const isDark = isDarkTheme(currentTheme);
  365.         
  366.         const configStyles = {
  367.             window: {
  368.                 background: isDark ? '#0d1117' : '#ffffff',
  369.                 border: isDark ? '1px solid #30363d' : '1px solid #d0d7de',
  370.                 color: isDark ? '#c9d1d9' : '#24292f',
  371.                 boxShadow: isDark ? '0 0 10px rgba(0,0,0,0.5)' : '0 0 10px rgba(0,0,0,0.2)'
  372.             },
  373.             button: {
  374.                 primary: {
  375.                     background: '#238636',
  376.                     color: '#ffffff',
  377.                     border: 'none'
  378.                 },
  379.                 secondary: {
  380.                     background: isDark ? '#21262d' : '#f6f8fa',
  381.                     color: isDark ? '#c9d1d9' : '#24292f',
  382.                     border: isDark ? '1px solid #30363d' : '1px solid #d0d7de'
  383.                 },
  384.                 danger: {
  385.                     background: isDark ? '#21262d' : '#f6f8fa',
  386.                     color: '#f85149',
  387.                     border: isDark ? '1px solid #30363d' : '1px solid #d0d7de'
  388.                 }
  389.             },
  390.             input: {
  391.                 background: isDark ? '#161b22' : '#f6f8fa',
  392.                 color: isDark ? '#c9d1d9' : '#24292f',
  393.                 border: isDark ? '1px solid #30363d' : '1px solid #d0d7de'
  394.             },
  395.             text: {
  396.                 dim: isDark ? '#8b949e' : '#6e7781',
  397.                 link: isDark ? '#58a6ff' : '#0969da'
  398.             }
  399.         };
  400.         
  401.         const configWindow = document.createElement('div');
  402.         configWindow.style.cssText = `
  403.             position: fixed;
  404.             top: 50%;
  405.             left: 50%;
  406.             transform: translate(-50%, -50%);
  407.             background: ${configStyles.window.background};
  408.             border: ${configStyles.window.border};
  409.             border-radius: 6px;
  410.             padding: 20px;
  411.             z-index: 9999;
  412.             width: 600px;
  413.             max-height: 80vh;
  414.             overflow-y: auto;
  415.             color: ${configStyles.window.color};
  416.             box-shadow: ${configStyles.window.boxShadow};
  417.         `;
  418.  
  419.         // Header with title and repo link
  420.         const titleContainer = document.createElement('div');
  421.         titleContainer.style.display = 'flex';
  422.         titleContainer.style.justifyContent = 'space-between';
  423.         titleContainer.style.alignItems = 'center';
  424.         titleContainer.style.marginBottom = '20px';
  425.  
  426.         const title = document.createElement('h2');
  427.         title.textContent = 'Commit Labels Configuration';
  428.         title.style.margin = '0';
  429.  
  430.         // Repository link container with profile pic
  431.         const repoContainer = document.createElement('div');
  432.         repoContainer.style.display = 'flex';
  433.         repoContainer.style.alignItems = 'center';
  434.         repoContainer.style.gap = '8px';
  435.         
  436.         // Owner profile picture
  437.         const profilePic = document.createElement('img');
  438.         profilePic.src = 'https://raw.githubusercontent.com/nazdridoy/nazhome/main/public/favicons/nazhome.svg';
  439.         profilePic.alt = 'Owner';
  440.         profilePic.style.cssText = `
  441.             width: 36px;
  442.             height: 36px;
  443.             border-radius: 50%;
  444.             background: ${isDark ? '#30363d' : '#eaeef2'};
  445.             padding: 3px;
  446.             vertical-align: middle;
  447.         `;
  448.         
  449.         const repoLink = document.createElement('a');
  450.         repoLink.href = 'https://github.com/nazdridoy/github-commit-labels';
  451.         repoLink.target = '_blank';
  452.         repoLink.textContent = 'GitHub Repository';
  453.         repoLink.style.cssText = `
  454.             color: ${configStyles.text.link};
  455.             text-decoration: none;
  456.             font-size: 15px;
  457.             vertical-align: middle;
  458.         `;
  459.         repoLink.addEventListener('mouseenter', () => {
  460.             repoLink.style.textDecoration = 'underline';
  461.         });
  462.         repoLink.addEventListener('mouseleave', () => {
  463.             repoLink.style.textDecoration = 'none';
  464.         });
  465.  
  466.         repoContainer.appendChild(profilePic);
  467.         repoContainer.appendChild(repoLink);
  468.         
  469.         titleContainer.appendChild(title);
  470.         titleContainer.appendChild(repoContainer);
  471.         configWindow.appendChild(titleContainer);
  472.  
  473.         // Remove Prefix Option
  474.         const prefixDiv = document.createElement('div');
  475.         prefixDiv.style.marginBottom = '20px';
  476.         const prefixCheckbox = document.createElement('input');
  477.         prefixCheckbox.type = 'checkbox';
  478.         prefixCheckbox.checked = USER_CONFIG.removePrefix;
  479.         prefixCheckbox.id = 'remove-prefix';
  480.         prefixCheckbox.style.marginRight = '5px';
  481.         const prefixLabel = document.createElement('label');
  482.         prefixLabel.htmlFor = 'remove-prefix';
  483.         prefixLabel.textContent = 'Remove commit type prefix from message';
  484.         prefixDiv.appendChild(prefixCheckbox);
  485.         prefixDiv.appendChild(prefixLabel);
  486.         configWindow.appendChild(prefixDiv);
  487.  
  488.         // Add toggle for tooltips with preview
  489.         const tooltipDiv = document.createElement('div');
  490.         tooltipDiv.style.marginBottom = '20px';
  491.         
  492.         const tooltipHeader = document.createElement('div');
  493.         tooltipHeader.style.display = 'flex';
  494.         tooltipHeader.style.alignItems = 'center';
  495.         tooltipHeader.style.marginBottom = '5px';
  496.         
  497.         const tooltipCheckbox = document.createElement('input');
  498.         tooltipCheckbox.type = 'checkbox';
  499.         tooltipCheckbox.checked = USER_CONFIG.enableTooltips;
  500.         tooltipCheckbox.id = 'enable-tooltips';
  501.         tooltipCheckbox.style.marginRight = '5px';
  502.         
  503.         const tooltipLabel = document.createElement('label');
  504.         tooltipLabel.htmlFor = 'enable-tooltips';
  505.         tooltipLabel.textContent = 'Enable tooltips with extended descriptions';
  506.         tooltipLabel.style.marginRight = '15px';
  507.         
  508.         // Add tooltip preview
  509.         const previewLabel = document.createElement('span');
  510.         previewLabel.textContent = 'Preview: ';
  511.         previewLabel.style.marginRight = '5px';
  512.         
  513.         const previewExample = document.createElement('span');
  514.         previewExample.className = 'tooltip-preview-label';
  515.         previewExample.innerHTML = '✨ <span>Feature</span>';
  516.         previewExample.dataset.description = 'New user features (not for new files without user features)';
  517.         previewExample.style.cssText = `
  518.             display: inline-flex;
  519.             align-items: center;
  520.             justify-content: center;
  521.             height: 24px;
  522.             padding: 0 10px;
  523.             border-radius: 20px;
  524.             background: ${isDark ? 'rgba(35, 134, 54, 0.2)' : 'rgba(31, 136, 61, 0.1)'};
  525.             color: ${isDark ? '#7ee787' : '#1a7f37'};
  526.             cursor: help;
  527.         `;
  528.         
  529.         tooltipHeader.appendChild(tooltipCheckbox);
  530.         tooltipHeader.appendChild(tooltipLabel);
  531.         tooltipHeader.appendChild(previewLabel);
  532.         tooltipHeader.appendChild(previewExample);
  533.         
  534.         // Create custom preview tooltip
  535.         previewExample.addEventListener('mouseenter', (e) => {
  536.             if (!tooltipCheckbox.checked) return;
  537.             
  538.             const tooltipPreview = document.createElement('div');
  539.             tooltipPreview.className = 'tooltip-preview';
  540.             tooltipPreview.textContent = previewExample.dataset.description;
  541.             
  542.             const rect = e.target.getBoundingClientRect();
  543.             
  544.             tooltipPreview.style.cssText = `
  545.                 position: fixed;
  546.                 top: ${rect.bottom + 5}px;
  547.                 left: ${rect.left}px;
  548.                 max-width: 300px;
  549.                 padding: 8px 12px;
  550.                 color: ${isDark ? '#e6edf3' : '#ffffff'};
  551.                 text-align: center;
  552.                 background-color: ${isDark ? '#161b22' : '#24292f'};
  553.                 border-radius: 6px;
  554.                 border: ${isDark ? '1px solid #30363d' : '1px solid #d0d7de'};
  555.                 box-shadow: 0 3px 12px rgba(0,0,0,0.4);
  556.                 font-size: 12px;
  557.                 z-index: 10000;
  558.                 pointer-events: none;
  559.             `;
  560.             
  561.             document.body.appendChild(tooltipPreview);
  562.         });
  563.         
  564.         previewExample.addEventListener('mouseleave', () => {
  565.             const tooltipPreview = document.querySelector('.tooltip-preview');
  566.             if (tooltipPreview) {
  567.                 document.body.removeChild(tooltipPreview);
  568.             }
  569.         });
  570.         
  571.         tooltipDiv.appendChild(tooltipHeader);
  572.         
  573.         // Add explanation text
  574.         const tooltipExplanation = document.createElement('div');
  575.         tooltipExplanation.textContent = 'Tooltips show detailed descriptions when hovering over commit labels.';
  576.         tooltipExplanation.style.color = configStyles.text.dim;
  577.         tooltipExplanation.style.fontSize = '12px';
  578.         tooltipExplanation.style.marginTop = '5px';
  579.         
  580.         tooltipDiv.appendChild(tooltipExplanation);
  581.         configWindow.insertBefore(tooltipDiv, prefixDiv.nextSibling);
  582.  
  583.         // After prefixDiv and tooltipDiv, add a toggle for showing the floating button
  584.         const floatingBtnDiv = document.createElement('div');
  585.         floatingBtnDiv.style.marginBottom = '20px';
  586.         
  587.         // Add showFloatingButton to USER_CONFIG if it doesn't exist
  588.         if (USER_CONFIG.showFloatingButton === undefined) {
  589.             USER_CONFIG.showFloatingButton = true;
  590.             GM_setValue('commitLabelsConfig', USER_CONFIG);
  591.         }
  592.         
  593.         const floatingBtnCheckbox = document.createElement('input');
  594.         floatingBtnCheckbox.type = 'checkbox';
  595.         floatingBtnCheckbox.checked = USER_CONFIG.showFloatingButton;
  596.         floatingBtnCheckbox.id = 'show-floating-btn';
  597.         floatingBtnCheckbox.style.marginRight = '5px';
  598.         
  599.         const floatingBtnLabel = document.createElement('label');
  600.         floatingBtnLabel.htmlFor = 'show-floating-btn';
  601.         floatingBtnLabel.textContent = 'Show floating toggle button';
  602.         
  603.         floatingBtnDiv.appendChild(floatingBtnCheckbox);
  604.         floatingBtnDiv.appendChild(floatingBtnLabel);
  605.         
  606.         configWindow.insertBefore(floatingBtnDiv, tooltipDiv.nextSibling);
  607.  
  608.         // After the tooltipDiv and before the floatingBtnDiv in the createConfigWindow function:
  609.         const scopeDiv = document.createElement('div');
  610.         scopeDiv.style.marginBottom = '20px';
  611.         const scopeCheckbox = document.createElement('input');
  612.         scopeCheckbox.type = 'checkbox';
  613.         scopeCheckbox.checked = USER_CONFIG.showScope;
  614.         scopeCheckbox.id = 'show-scope';
  615.         scopeCheckbox.style.marginRight = '5px';
  616.         const scopeLabel = document.createElement('label');
  617.         scopeLabel.htmlFor = 'show-scope';
  618.         scopeLabel.textContent = 'Show commit scope in labels (e.g., "feat(api): message" shows "api" in label)';
  619.         scopeDiv.appendChild(scopeCheckbox);
  620.         scopeDiv.appendChild(scopeLabel);
  621.         configWindow.insertBefore(scopeDiv, floatingBtnDiv.nextSibling);
  622.  
  623.         // Add debug mode toggle
  624.         const debugDiv = document.createElement('div');
  625.         debugDiv.style.marginBottom = '20px';
  626.         const debugCheckbox = document.createElement('input');
  627.         debugCheckbox.type = 'checkbox';
  628.         debugCheckbox.checked = USER_CONFIG.debugMode;
  629.         debugCheckbox.id = 'debug-mode';
  630.         debugCheckbox.style.marginRight = '5px';
  631.         const debugLabel = document.createElement('label');
  632.         debugLabel.htmlFor = 'debug-mode';
  633.         debugLabel.textContent = 'Enable debug mode (shows detailed logs in console)';
  634.         debugDiv.appendChild(debugCheckbox);
  635.         debugDiv.appendChild(debugLabel);
  636.         configWindow.insertBefore(debugDiv, prefixDiv.nextSibling);
  637.  
  638.         // Commit Types Configuration
  639.         const typesContainer = document.createElement('div');
  640.         typesContainer.style.marginBottom = '20px';
  641.  
  642.         // Group commit types by their label
  643.         const groupedTypes = {};
  644.         Object.entries(USER_CONFIG.commitTypes).forEach(([type, config]) => {
  645.             const key = config.label;
  646.             if (!groupedTypes[key]) {
  647.                 groupedTypes[key] = {
  648.                     types: [],
  649.                     config: config
  650.                 };
  651.             }
  652.             groupedTypes[key].types.push(type);
  653.         });
  654.  
  655.         // Create rows for grouped types
  656.         Object.entries(groupedTypes).forEach(([label, { types, config }]) => {
  657.             const typeDiv = document.createElement('div');
  658.             typeDiv.style.marginBottom = '10px';
  659.             typeDiv.style.display = 'flex';
  660.             typeDiv.style.alignItems = 'center';
  661.             typeDiv.style.gap = '10px';
  662.  
  663.             // Type names (with aliases) and edit button container
  664.             const typeContainer = document.createElement('div');
  665.             typeContainer.style.display = 'flex';
  666.             typeContainer.style.width = '150px';
  667.             typeContainer.style.alignItems = 'center';
  668.             typeContainer.style.gap = '4px';
  669.  
  670.             const typeSpan = document.createElement('span');
  671.             typeSpan.style.color = configStyles.text.dim;
  672.             typeSpan.style.flex = '1';
  673.             typeSpan.textContent = types.join(', ') + ':';
  674.  
  675.             const editAliasButton = document.createElement('button');
  676.             editAliasButton.textContent = '✏️';
  677.             editAliasButton.title = 'Edit Aliases';
  678.             editAliasButton.style.cssText = `
  679.                 padding: 2px 4px;
  680.                 background: ${configStyles.button.secondary.background};
  681.                 color: ${isDark ? '#58a6ff' : '#0969da'};
  682.                 border: ${configStyles.button.secondary.border};
  683.                 border-radius: 4px;
  684.                 cursor: pointer;
  685.                 font-size: 10px;
  686.             `;
  687.  
  688.             editAliasButton.onclick = () => {
  689.                 const currentAliases = types.join(', ');
  690.                 const newAliases = prompt('Edit aliases (separate with commas):', currentAliases);
  691.  
  692.                 if (newAliases && newAliases.trim()) {
  693.                     const newTypes = newAliases.split(',').map(t => t.trim().toLowerCase()).filter(t => t);
  694.  
  695.                     // Check if any new aliases conflict with other types
  696.                     const conflictingType = newTypes.find(type =>
  697.                         USER_CONFIG.commitTypes[type] && !types.includes(type)
  698.                     );
  699.  
  700.                     if (conflictingType) {
  701.                         alert(`The alias "${conflictingType}" already exists in another group!`);
  702.                         return;
  703.                     }
  704.  
  705.                     // Remove old types
  706.                     types.forEach(type => delete USER_CONFIG.commitTypes[type]);
  707.  
  708.                     // Add new types with same config
  709.                     newTypes.forEach(type => {
  710.                         USER_CONFIG.commitTypes[type] = { ...config };
  711.                     });
  712.  
  713.                     // Update the display
  714.                     typeSpan.textContent = newTypes.join(', ') + ':';
  715.  
  716.                     // Update dataset for inputs
  717.                     const inputs = typeDiv.querySelectorAll('input, select');
  718.                     inputs.forEach(input => {
  719.                         input.dataset.types = newTypes.join(',');
  720.                     });
  721.                 }
  722.             };
  723.  
  724.             typeContainer.appendChild(typeSpan);
  725.             typeContainer.appendChild(editAliasButton);
  726.             typeDiv.appendChild(typeContainer);
  727.  
  728.             // Emoji input
  729.             const emojiInput = document.createElement('input');
  730.             emojiInput.type = 'text';
  731.             emojiInput.value = config.emoji;
  732.             emojiInput.style.width = '40px';
  733.             emojiInput.style.background = configStyles.input.background;
  734.             emojiInput.style.color = configStyles.input.color;
  735.             emojiInput.style.border = configStyles.input.border;
  736.             emojiInput.style.borderRadius = '4px';
  737.             emojiInput.style.padding = '4px';
  738.             emojiInput.dataset.types = types.join(',');
  739.             emojiInput.dataset.field = 'emoji';
  740.             typeDiv.appendChild(emojiInput);
  741.  
  742.             // Label input
  743.             const labelInput = document.createElement('input');
  744.             labelInput.type = 'text';
  745.             labelInput.value = config.label;
  746.             labelInput.style.width = '120px';
  747.             labelInput.style.background = configStyles.input.background;
  748.             labelInput.style.color = configStyles.input.color;
  749.             labelInput.style.border = configStyles.input.border;
  750.             labelInput.style.borderRadius = '4px';
  751.             labelInput.style.padding = '4px';
  752.             labelInput.dataset.types = types.join(',');
  753.             labelInput.dataset.field = 'label';
  754.             typeDiv.appendChild(labelInput);
  755.  
  756.             // Color select
  757.             const colorSelect = document.createElement('select');
  758.             Object.keys(COLORS).forEach(color => {
  759.                 const option = document.createElement('option');
  760.                 option.value = color;
  761.                 option.textContent = color;
  762.                 if (config.color === color) option.selected = true;
  763.                 colorSelect.appendChild(option);
  764.             });
  765.             colorSelect.style.background = configStyles.input.background;
  766.             colorSelect.style.color = configStyles.input.color;
  767.             colorSelect.style.border = configStyles.input.border;
  768.             colorSelect.style.borderRadius = '4px';
  769.             colorSelect.style.padding = '4px';
  770.             colorSelect.dataset.types = types.join(',');
  771.             colorSelect.dataset.field = 'color';
  772.             typeDiv.appendChild(colorSelect);
  773.  
  774.             // Delete button
  775.             const deleteButton = document.createElement('button');
  776.             deleteButton.textContent = '🗑️';
  777.             deleteButton.style.cssText = `
  778.                 padding: 2px 8px;
  779.                 background: ${configStyles.button.danger.background};
  780.                 color: ${configStyles.button.danger.color};
  781.                 border: ${configStyles.button.danger.border};
  782.                 border-radius: 4px;
  783.                 cursor: pointer;
  784.             `;
  785.             deleteButton.onclick = () => {
  786.                 if (confirm(`Delete commit types "${types.join(', ')}"?`)) {
  787.                     typeDiv.remove();
  788.                     types.forEach(type => delete USER_CONFIG.commitTypes[type]);
  789.                 }
  790.             };
  791.             typeDiv.appendChild(deleteButton);
  792.  
  793.             typesContainer.appendChild(typeDiv);
  794.         });
  795.  
  796.         // Add "Add New Type" button
  797.         const addNewButton = document.createElement('button');
  798.         addNewButton.textContent = '+ Add New Type';
  799.         addNewButton.style.cssText = `
  800.             margin-bottom: 15px;
  801.             padding: 5px 16px;
  802.             background: ${configStyles.button.primary.background};
  803.             color: ${configStyles.button.primary.color};
  804.             border: ${configStyles.button.primary.border};
  805.             border-radius: 6px;
  806.             cursor: pointer;
  807.         `;
  808.  
  809.         addNewButton.onclick = () => {
  810.             const typeInput = prompt('Enter the commit type and aliases (separated by commas, e.g., "added, add"):', '');
  811.             if (typeInput && typeInput.trim()) {
  812.                 const types = typeInput.split(',').map(t => t.trim().toLowerCase()).filter(t => t);
  813.  
  814.                 // Check if any of the types already exist
  815.                 const existingType = types.find(type => USER_CONFIG.commitTypes[type]);
  816.                 if (existingType) {
  817.                     alert(`The commit type "${existingType}" already exists!`);
  818.                     return;
  819.                 }
  820.  
  821.                 // Create base config for all aliases
  822.                 const baseConfig = {
  823.                     emoji: '🔄',
  824.                     label: types[0].charAt(0).toUpperCase() + types[0].slice(1),
  825.                     color: 'blue',
  826.                     description: 'Custom commit type'
  827.                 };
  828.  
  829.                 // Add all types to config with the same settings
  830.                 types.forEach(type => {
  831.                     USER_CONFIG.commitTypes[type] = { ...baseConfig };
  832.                 });
  833.  
  834.                 // Create and add new type row
  835.                 const typeDiv = document.createElement('div');
  836.                 typeDiv.style.marginBottom = '10px';
  837.                 typeDiv.style.display = 'flex';
  838.                 typeDiv.style.alignItems = 'center';
  839.                 typeDiv.style.gap = '10px';
  840.  
  841.                 // Type names (with aliases)
  842.                 const typeSpan = document.createElement('span');
  843.                 typeSpan.style.width = '150px';
  844.                 typeSpan.style.color = configStyles.text.dim;
  845.                 typeSpan.textContent = types.join(', ') + ':';
  846.                 typeDiv.appendChild(typeSpan);
  847.  
  848.                 // Emoji input
  849.                 const emojiInput = document.createElement('input');
  850.                 emojiInput.type = 'text';
  851.                 emojiInput.value = baseConfig.emoji;
  852.                 emojiInput.style.width = '40px';
  853.                 emojiInput.style.background = configStyles.input.background;
  854.                 emojiInput.style.color = configStyles.input.color;
  855.                 emojiInput.style.border = configStyles.input.border;
  856.                 emojiInput.style.borderRadius = '4px';
  857.                 emojiInput.style.padding = '4px';
  858.                 emojiInput.dataset.types = types.join(',');
  859.                 emojiInput.dataset.field = 'emoji';
  860.                 typeDiv.appendChild(emojiInput);
  861.  
  862.                 // Label input
  863.                 const labelInput = document.createElement('input');
  864.                 labelInput.type = 'text';
  865.                 labelInput.value = baseConfig.label;
  866.                 labelInput.style.width = '120px';
  867.                 labelInput.style.background = configStyles.input.background;
  868.                 labelInput.style.color = configStyles.input.color;
  869.                 labelInput.style.border = configStyles.input.border;
  870.                 labelInput.style.borderRadius = '4px';
  871.                 labelInput.style.padding = '4px';
  872.                 labelInput.dataset.types = types.join(',');
  873.                 labelInput.dataset.field = 'label';
  874.                 typeDiv.appendChild(labelInput);
  875.  
  876.                 // Color select
  877.                 const colorSelect = document.createElement('select');
  878.                 Object.keys(COLORS).forEach(color => {
  879.                     const option = document.createElement('option');
  880.                     option.value = color;
  881.                     option.textContent = color;
  882.                     if (color === 'blue') option.selected = true;
  883.                     colorSelect.appendChild(option);
  884.                 });
  885.                 colorSelect.style.background = configStyles.input.background;
  886.                 colorSelect.style.color = configStyles.input.color;
  887.                 colorSelect.style.border = configStyles.input.border;
  888.                 colorSelect.style.borderRadius = '4px';
  889.                 colorSelect.style.padding = '4px';
  890.                 colorSelect.dataset.types = types.join(',');
  891.                 colorSelect.dataset.field = 'color';
  892.                 typeDiv.appendChild(colorSelect);
  893.  
  894.                 // Delete button
  895.                 const deleteButton = document.createElement('button');
  896.                 deleteButton.textContent = '🗑️';
  897.                 deleteButton.style.cssText = `
  898.                     padding: 2px 8px;
  899.                     background: ${configStyles.button.danger.background};
  900.                     color: ${configStyles.button.danger.color};
  901.                     border: ${configStyles.button.danger.border};
  902.                     border-radius: 4px;
  903.                     cursor: pointer;
  904.                 `;
  905.                 deleteButton.onclick = () => {
  906.                     if (confirm(`Delete commit types "${types.join(', ')}"?`)) {
  907.                         typeDiv.remove();
  908.                         types.forEach(type => delete USER_CONFIG.commitTypes[type]);
  909.                     }
  910.                 };
  911.                 typeDiv.appendChild(deleteButton);
  912.  
  913.                 typesContainer.appendChild(typeDiv);
  914.             }
  915.         };
  916.  
  917.         configWindow.appendChild(addNewButton);
  918.         configWindow.appendChild(typesContainer);
  919.  
  920.         // Save and Close buttons
  921.         const buttonContainer = document.createElement('div');
  922.         buttonContainer.style.display = 'flex';
  923.         buttonContainer.style.gap = '10px';
  924.         buttonContainer.style.justifyContent = 'flex-end';
  925.  
  926.         const saveButton = document.createElement('button');
  927.         saveButton.textContent = 'Save';
  928.         saveButton.style.cssText = `
  929.             padding: 5px 16px;
  930.             background: ${configStyles.button.primary.background};
  931.             color: ${configStyles.button.primary.color};
  932.             border: ${configStyles.button.primary.border};
  933.             border-radius: 6px;
  934.             cursor: pointer;
  935.         `;
  936.  
  937.         const closeButton = document.createElement('button');
  938.         closeButton.textContent = 'Close';
  939.         closeButton.style.cssText = `
  940.             padding: 5px 16px;
  941.             background: ${configStyles.button.secondary.background};
  942.             color: ${configStyles.button.secondary.color};
  943.             border: ${configStyles.button.secondary.border};
  944.             border-radius: 6px;
  945.             cursor: pointer;
  946.         `;
  947.  
  948.         // Add Reset button next to Save and Close
  949.         const resetButton = document.createElement('button');
  950.         resetButton.textContent = 'Reset to Default';
  951.         resetButton.style.cssText = `
  952.             padding: 5px 16px;
  953.             background: ${configStyles.button.danger.background};
  954.             color: ${configStyles.button.danger.color};
  955.             border: ${configStyles.button.danger.border};
  956.             border-radius: 6px;
  957.             cursor: pointer;
  958.             margin-right: auto;  // This pushes Save/Close to the right
  959.         `;
  960.  
  961.         resetButton.onclick = () => {
  962.             if (confirm('Are you sure you want to reset all settings to default? This will remove all custom types and settings.')) {
  963.                 GM_setValue('commitLabelsConfig', DEFAULT_CONFIG);
  964.                 location.reload();
  965.             }
  966.         };
  967.  
  968.         saveButton.onclick = () => {
  969.             const newConfig = { ...USER_CONFIG };
  970.             newConfig.removePrefix = prefixCheckbox.checked;
  971.             newConfig.enableTooltips = tooltipCheckbox.checked;
  972.             newConfig.showFloatingButton = floatingBtnCheckbox.checked;
  973.             newConfig.showScope = scopeCheckbox.checked;
  974.             newConfig.debugMode = debugCheckbox.checked;  // Add debug mode
  975.             newConfig.commitTypes = {};
  976.  
  977.             typesContainer.querySelectorAll('input, select').forEach(input => {
  978.                 const types = input.dataset.types.split(',');
  979.                 const field = input.dataset.field;
  980.  
  981.                 types.forEach(type => {
  982.                     if (!newConfig.commitTypes[type]) {
  983.                         newConfig.commitTypes[type] = {};
  984.                     }
  985.                     newConfig.commitTypes[type][field] = input.value;
  986.                 });
  987.             });
  988.  
  989.             GM_setValue('commitLabelsConfig', newConfig);
  990.             location.reload();
  991.         };
  992.  
  993.         closeButton.onclick = () => {
  994.             document.body.removeChild(configWindow);
  995.         };
  996.  
  997.         buttonContainer.appendChild(resetButton);
  998.         buttonContainer.appendChild(closeButton);
  999.         buttonContainer.appendChild(saveButton);
  1000.         configWindow.appendChild(buttonContainer);
  1001.  
  1002.         document.body.appendChild(configWindow);
  1003.     }
  1004.  
  1005.     // Create export/import dialog
  1006.     function createExportImportDialog() {
  1007.         // Check if dialog already exists
  1008.         if (document.getElementById('config-export-import')) {
  1009.             document.getElementById('config-export-import').remove();
  1010.         }
  1011.         
  1012.         const dialog = document.createElement('div');
  1013.         dialog.id = 'config-export-import';
  1014.         dialog.style.cssText = `
  1015.             position: fixed;
  1016.             top: 50%;
  1017.             left: 50%;
  1018.             transform: translate(-50%, -50%);
  1019.             background: #0d1117;
  1020.             border: 1px solid #30363d;
  1021.             border-radius: 6px;
  1022.             padding: 20px;
  1023.             z-index: 9999;
  1024.             width: 500px;
  1025.             max-height: 80vh;
  1026.             overflow-y: auto;
  1027.             color: #c9d1d9;
  1028.             box-shadow: 0 0 20px rgba(0,0,0,0.7);
  1029.         `;
  1030.         
  1031.         const title = document.createElement('h2');
  1032.         title.textContent = 'Export/Import Configuration';
  1033.         title.style.marginBottom = '15px';
  1034.         
  1035.         const exportSection = document.createElement('div');
  1036.         exportSection.style.marginBottom = '20px';
  1037.         
  1038.         const exportTitle = document.createElement('h3');
  1039.         exportTitle.textContent = 'Export Configuration';
  1040.         exportTitle.style.marginBottom = '10px';
  1041.         
  1042.         const configOutput = document.createElement('textarea');
  1043.         configOutput.readOnly = true;
  1044.         configOutput.value = JSON.stringify(USER_CONFIG, null, 2);
  1045.         configOutput.style.cssText = `
  1046.             width: 100%;
  1047.             height: 150px;
  1048.             background: #161b22;
  1049.             color: #c9d1d9;
  1050.             border: 1px solid #30363d;
  1051.             border-radius: 6px;
  1052.             padding: 10px;
  1053.             font-family: monospace;
  1054.             resize: vertical;
  1055.             margin-bottom: 10px;
  1056.         `;
  1057.         
  1058.         const copyButton = document.createElement('button');
  1059.         copyButton.textContent = 'Copy to Clipboard';
  1060.         copyButton.style.cssText = `
  1061.             padding: 6px 16px;
  1062.             background: #238636;
  1063.             color: #fff;
  1064.             border: none;
  1065.             border-radius: 6px;
  1066.             cursor: pointer;
  1067.             margin-right: 10px;
  1068.         `;
  1069.         
  1070.         copyButton.onclick = () => {
  1071.             configOutput.select();
  1072.             document.execCommand('copy');
  1073.             copyButton.textContent = 'Copied!';
  1074.             setTimeout(() => {
  1075.                 copyButton.textContent = 'Copy to Clipboard';
  1076.             }, 2000);
  1077.         };
  1078.         
  1079.         exportSection.appendChild(exportTitle);
  1080.         exportSection.appendChild(configOutput);
  1081.         exportSection.appendChild(copyButton);
  1082.         
  1083.         const importSection = document.createElement('div');
  1084.         importSection.style.marginBottom = '20px';
  1085.         
  1086.         const importTitle = document.createElement('h3');
  1087.         importTitle.textContent = 'Import Configuration';
  1088.         importTitle.style.marginBottom = '10px';
  1089.         
  1090.         const configInput = document.createElement('textarea');
  1091.         configInput.placeholder = 'Paste configuration JSON here...';
  1092.         configInput.style.cssText = `
  1093.             width: 100%;
  1094.             height: 150px;
  1095.             background: #161b22;
  1096.             color: #c9d1d9;
  1097.             border: 1px solid #30363d;
  1098.             border-radius: 6px;
  1099.             padding: 10px;
  1100.             font-family: monospace;
  1101.             resize: vertical;
  1102.             margin-bottom: 10px;
  1103.         `;
  1104.         
  1105.         const importButton = document.createElement('button');
  1106.         importButton.textContent = 'Import';
  1107.         importButton.style.cssText = `
  1108.             padding: 6px 16px;
  1109.             background: #238636;
  1110.             color: #fff;
  1111.             border: none;
  1112.             border-radius: 6px;
  1113.             cursor: pointer;
  1114.             margin-right: 10px;
  1115.         `;
  1116.         
  1117.         importButton.onclick = () => {
  1118.             try {
  1119.                 const newConfig = JSON.parse(configInput.value);
  1120.                 
  1121.                 // Validate basic structure
  1122.                 if (!newConfig.commitTypes) {
  1123.                     throw new Error('Invalid configuration: missing commitTypes object');
  1124.                 }
  1125.                 
  1126.                 if (confirm('Are you sure you want to import this configuration? This will overwrite your current settings.')) {
  1127.                     GM_setValue('commitLabelsConfig', newConfig);
  1128.                     alert('Configuration imported successfully! Page will reload to apply changes.');
  1129.                     location.reload();
  1130.                 }
  1131.             } catch (error) {
  1132.                 alert('Error importing configuration: ' + error.message);
  1133.             }
  1134.         };
  1135.         
  1136.         const closeButton = document.createElement('button');
  1137.         closeButton.textContent = 'Close';
  1138.         closeButton.style.cssText = `
  1139.             padding: 6px 16px;
  1140.             background: #21262d;
  1141.             color: #c9d1d9;
  1142.             border: 1px solid #30363d;
  1143.             border-radius: 6px;
  1144.             cursor: pointer;
  1145.         `;
  1146.         
  1147.         closeButton.onclick = () => {
  1148.             document.body.removeChild(dialog);
  1149.         };
  1150.         
  1151.         importSection.appendChild(importTitle);
  1152.         importSection.appendChild(configInput);
  1153.         importSection.appendChild(importButton);
  1154.         
  1155.         dialog.appendChild(title);
  1156.         dialog.appendChild(exportSection);
  1157.         dialog.appendChild(importSection);
  1158.         dialog.appendChild(closeButton);
  1159.         
  1160.         document.body.appendChild(dialog);
  1161.     }
  1162.  
  1163.     // Register configuration menu command
  1164.     GM_registerMenuCommand('Configure Commit Labels', createConfigWindow);
  1165.     GM_registerMenuCommand('Toggle Labels', () => {
  1166.         USER_CONFIG.labelsVisible = !USER_CONFIG.labelsVisible;
  1167.         GM_setValue('commitLabelsConfig', USER_CONFIG);
  1168.         
  1169.         // Toggle label visibility
  1170.         document.querySelectorAll('.commit-label').forEach(label => {
  1171.             label.style.display = USER_CONFIG.labelsVisible ? 'inline-flex' : 'none';
  1172.         });
  1173.         
  1174.         // Update toggle button if it exists
  1175.         const toggleBtn = document.getElementById('commit-labels-toggle');
  1176.         if (toggleBtn) {
  1177.             toggleBtn.textContent = USER_CONFIG.labelsVisible ? '🏷️' : '🏷️';
  1178.             toggleBtn.style.textDecoration = USER_CONFIG.labelsVisible ? 'none' : 'line-through';
  1179.             toggleBtn.title = USER_CONFIG.labelsVisible ? 'Hide commit labels' : 'Show commit labels';
  1180.         }
  1181.     });
  1182.     GM_registerMenuCommand('Export/Import Config', createExportImportDialog);
  1183.  
  1184.     // Check if we're on a commit page
  1185.     function isCommitPage() {
  1186.         return window.location.pathname.includes('/commits') ||
  1187.                window.location.pathname.includes('/commit/');
  1188.     }
  1189.  
  1190.     // Update colors when theme changes
  1191.     function updateThemeColors() {
  1192.         const newTheme = detectTheme();
  1193.         if (newTheme !== currentTheme) {
  1194.             currentTheme = newTheme;
  1195.             
  1196.             // Map theme variants to our base themes for colors
  1197.             let baseTheme = newTheme;
  1198.             if (newTheme.startsWith('light_')) {
  1199.                 baseTheme = 'light';
  1200.             } else if (newTheme.startsWith('dark_') && newTheme !== 'dark_dimmed') {
  1201.                 baseTheme = 'dark';
  1202.             }
  1203.             
  1204.             COLORS = THEME_COLORS[baseTheme] || THEME_COLORS.light;
  1205.             
  1206.             // Update existing labels
  1207.             document.querySelectorAll('.commit-label').forEach(label => {
  1208.                 const type = label.dataset.commitType;
  1209.                 if (type && USER_CONFIG.commitTypes[type]) {
  1210.                     const color = COLORS[USER_CONFIG.commitTypes[type].color];
  1211.                     if (color) {
  1212.                         label.style.backgroundColor = color.bg;
  1213.                         label.style.color = color.text;
  1214.                     }
  1215.                 }
  1216.             });
  1217.         }
  1218.     }
  1219.  
  1220.     // Debug logging function
  1221.     function debugLog(message, data = null) {
  1222.         if (USER_CONFIG.debugMode) {
  1223.             const timestamp = new Date().toISOString();
  1224.             const logMessage = `[GitHub Commit Labels Debug] [${timestamp}] ${message}`;
  1225.             console.log(logMessage);
  1226.             if (data) {
  1227.                 console.log('Data:', data);
  1228.             }
  1229.         }
  1230.     }
  1231.  
  1232.     // Helper function to safely query elements
  1233.     function safeQuerySelector(selector) {
  1234.         try {
  1235.             const elements = document.querySelectorAll(selector);
  1236.             debugLog(`Query selector "${selector}" found ${elements.length} elements`);
  1237.             return elements;
  1238.         } catch (error) {
  1239.             debugLog(`Selector error for "${selector}":`, error);
  1240.             return [];
  1241.         }
  1242.     }
  1243.  
  1244.     // Debounce function to limit how often a function can be called
  1245.     function debounce(func, wait) {
  1246.         let timeout;
  1247.         return function executedFunction(...args) {
  1248.             const later = () => {
  1249.                 clearTimeout(timeout);
  1250.                 func(...args);
  1251.             };
  1252.             clearTimeout(timeout);
  1253.             timeout = setTimeout(later, wait);
  1254.         };
  1255.     }
  1256.  
  1257.     // Main function to add labels to commits
  1258.     function addCommitLabels() {
  1259.         debugLog('Starting addCommitLabels');
  1260.         
  1261.         // Only proceed if we're on a commit page
  1262.         if (!isCommitPage()) {
  1263.             debugLog('Not on a commit page, exiting');
  1264.             return;
  1265.         }
  1266.  
  1267.         debugLog('Updating theme colors');
  1268.         updateThemeColors();
  1269.         
  1270.         // Create toggle button if it doesn't exist and is enabled
  1271.         if (USER_CONFIG.showFloatingButton !== false) {
  1272.             debugLog('Creating label toggle button');
  1273.             createLabelToggle();
  1274.         }
  1275.  
  1276.         // Try multiple selectors in order of reliability
  1277.         const selectors = [
  1278.             'li[data-testid="commit-row-item"] h4 a[data-pjax="true"]', // Most reliable
  1279.             '.Title-module__heading--upUxW a[data-pjax="true"]',        // Backup
  1280.             '.markdown-title a[data-pjax="true"]'                       // Legacy
  1281.         ];
  1282.  
  1283.         debugLog('Trying selectors:', selectors);
  1284.         let commitMessages = [];
  1285.         for (const selector of selectors) {
  1286.             commitMessages = safeQuerySelector(selector);
  1287.             if (commitMessages.length > 0) {
  1288.                 debugLog(`Using selector: ${selector}`);
  1289.                 break;
  1290.             }
  1291.         }
  1292.  
  1293.         debugLog(`Found ${commitMessages.length} commit messages to process`);
  1294.  
  1295.         // Debounce and batch process for performance improvement
  1296.         let processedCount = 0;
  1297.         const batchSize = 20;
  1298.         const commitMessagesArray = Array.from(commitMessages);
  1299.         
  1300.         const processCommitBatch = (startIndex) => {
  1301.             debugLog(`Processing batch starting at index ${startIndex}`);
  1302.             const endIndex = Math.min(startIndex + batchSize, commitMessagesArray.length);
  1303.             
  1304.             for (let i = startIndex; i < endIndex; i++) {
  1305.                 try {
  1306.                     const message = commitMessagesArray[i];
  1307.                     const text = message.textContent.trim();
  1308.                     debugLog(`Processing commit message: ${text}`);
  1309.                     
  1310.                     // Skip if this commit already has a label
  1311.                     if (message.parentElement.querySelector('.commit-label')) {
  1312.                         debugLog('Commit already has a label, skipping');
  1313.                         continue;
  1314.                     }
  1315.  
  1316.                     const match = text.match(/^(\w+)(?:\(([\w-]+)\))?:\s*(.*)/);
  1317.                     debugLog('Commit message match result:', match);
  1318.  
  1319.                     if (match) {
  1320.                         const type = match[1].toLowerCase();
  1321.                         const scope = match[2] || '';
  1322.                         const restOfMessage = match[3];
  1323.                         debugLog(`Extracted: type=${type}, scope=${scope}, message=${restOfMessage}`);
  1324.  
  1325.                         if (USER_CONFIG.commitTypes[type]) {
  1326.                             debugLog(`Found matching commit type: ${type}`);
  1327.                             // Only add label if it hasn't been added yet
  1328.                             if (!message.parentElement.querySelector('.commit-label')) {
  1329.                                 debugLog('Creating new label');
  1330.                                 const label = document.createElement('span');
  1331.                                 label.className = 'commit-label';
  1332.                                 label.dataset.commitType = type;
  1333.                                 label.dataset.commitScope = scope;
  1334.                                 
  1335.                                 const color = COLORS[USER_CONFIG.commitTypes[type].color];
  1336.                                 
  1337.                                 // Apply styles
  1338.                                 const styles = {
  1339.                                     ...USER_CONFIG.labelStyle,
  1340.                                     backgroundColor: color.bg,
  1341.                                     color: color.text,
  1342.                                     display: USER_CONFIG.labelsVisible ? 'inline-flex' : 'none'
  1343.                                 };
  1344.  
  1345.                                 label.style.cssText = Object.entries(styles)
  1346.                                     .map(([key, value]) => `${key.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${value}`)
  1347.                                     .join(';');
  1348.  
  1349.                                 // Enhanced tooltip
  1350.                                 if (USER_CONFIG.enableTooltips && USER_CONFIG.commitTypes[type].description) {
  1351.                                     // Store description in data attribute instead of title to avoid double tooltips
  1352.                                     const description = USER_CONFIG.commitTypes[type].description;
  1353.                                     const tooltipText = scope ? 
  1354.                                         `${description} (Scope: ${scope})` : 
  1355.                                         description;
  1356.                                     label.dataset.description = tooltipText;
  1357.                                     label.setAttribute('aria-label', tooltipText);
  1358.                                     
  1359.                                     // Add tooltip indicator
  1360.                                     label.style.cursor = 'help';
  1361.                                     
  1362.                                     // For better accessibility
  1363.                                     label.setAttribute('role', 'tooltip');
  1364.                                     
  1365.                                     // Create a custom tooltip implementation if needed
  1366.                                     label.addEventListener('mouseenter', (e) => {
  1367.                                         // Check if we already have a custom tooltip showing
  1368.                                         if (document.querySelector('.commit-label-tooltip')) {
  1369.                                             return;
  1370.                                         }
  1371.                                         
  1372.                                         label.style.transform = 'translateY(-1px)';
  1373.                                         label.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
  1374.                                         
  1375.                                         // Force show tooltip by creating a custom one
  1376.                                         if (label.dataset.description) {
  1377.                                             const tooltip = document.createElement('div');
  1378.                                             tooltip.className = 'commit-label-tooltip';
  1379.                                             tooltip.textContent = label.dataset.description;
  1380.                                             
  1381.                                             // Calculate position relative to viewport
  1382.                                             const rect = e.target.getBoundingClientRect();
  1383.                                             const top = rect.bottom + 5;
  1384.                                             const left = rect.left;
  1385.                                             
  1386.                                             tooltip.style.cssText = `
  1387.                                                 position: fixed;
  1388.                                                 top: ${top}px;
  1389.                                                 left: ${left}px;
  1390.                                                 max-width: 300px;
  1391.                                                 padding: 8px 12px;
  1392.                                                 color: #e6edf3;
  1393.                                                 text-align: center;
  1394.                                                 background-color: #161b22;
  1395.                                                 border-radius: 6px;
  1396.                                                 border: 1px solid #30363d;
  1397.                                                 box-shadow: 0 3px 12px rgba(0,0,0,0.4);
  1398.                                                 font-size: 12px;
  1399.                                                 z-index: 1000;
  1400.                                                 pointer-events: none;
  1401.                                             `;
  1402.                                             document.body.appendChild(tooltip);
  1403.                                             
  1404.                                             // Adjust position if tooltip goes off-screen
  1405.                                             const tooltipRect = tooltip.getBoundingClientRect();
  1406.                                             if (tooltipRect.right > window.innerWidth) {
  1407.                                                 tooltip.style.left = `${window.innerWidth - tooltipRect.width - 10}px`;
  1408.                                             }
  1409.                                         }
  1410.                                     });
  1411.  
  1412.                                     label.addEventListener('mouseleave', () => {
  1413.                                         label.style.transform = 'translateY(0)';
  1414.                                         label.style.boxShadow = styles.boxShadow;
  1415.                                         
  1416.                                         // Remove custom tooltip if it exists
  1417.                                         const tooltip = document.querySelector('.commit-label-tooltip');
  1418.                                         if (tooltip) {
  1419.                                             document.body.removeChild(tooltip);
  1420.                                         }
  1421.                                     });
  1422.                                 } else {
  1423.                                     // Normal hover effect if tooltips are disabled
  1424.                                     if (USER_CONFIG.commitTypes[type].description) {
  1425.                                         label.title = USER_CONFIG.commitTypes[type].description;
  1426.                                     }
  1427.                                     
  1428.                                     label.addEventListener('mouseenter', () => {
  1429.                                         label.style.transform = 'translateY(-1px)';
  1430.                                         label.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
  1431.                                     });
  1432.  
  1433.                                     label.addEventListener('mouseleave', () => {
  1434.                                         label.style.transform = 'translateY(0)';
  1435.                                         label.style.boxShadow = styles.boxShadow;
  1436.                                     });
  1437.                                 }
  1438.  
  1439.                                 const emoji = document.createElement('span');
  1440.                                 emoji.style.marginRight = '4px';
  1441.                                 emoji.style.fontSize = '14px';
  1442.                                 emoji.style.lineHeight = '1';
  1443.                                 emoji.textContent = USER_CONFIG.commitTypes[type].emoji;
  1444.  
  1445.                                 const labelText = document.createElement('span');
  1446.                                 labelText.textContent = USER_CONFIG.commitTypes[type].label;
  1447.  
  1448.                                 label.appendChild(emoji);
  1449.                                 label.appendChild(labelText);
  1450.                                 message.parentElement.insertBefore(label, message);
  1451.  
  1452.                                 // Update the commit message text to remove the type prefix if enabled
  1453.                                 if (USER_CONFIG.removePrefix) {
  1454.                                     message.textContent = restOfMessage;
  1455.                                 }
  1456.  
  1457.                                 // Optionally display scope in the label
  1458.                                 if (scope && USER_CONFIG.showScope) {
  1459.                                     const scopeSpan = document.createElement('span');
  1460.                                     scopeSpan.className = 'commit-scope';
  1461.                                     scopeSpan.textContent = `(${scope})`;
  1462.                                     scopeSpan.style.marginLeft = '2px';
  1463.                                     scopeSpan.style.opacity = '0.8';
  1464.                                     scopeSpan.style.fontSize = '12px';
  1465.                                     labelText.appendChild(scopeSpan);
  1466.                                 }
  1467.                             } else {
  1468.                                 debugLog('Label already exists, skipping');
  1469.                             }
  1470.                         } else {
  1471.                             debugLog(`No matching commit type found for: ${type}`);
  1472.                         }
  1473.                     } else {
  1474.                         // Only log non-conventional commits if they don't have a label
  1475.                         if (!message.parentElement.querySelector('.commit-label')) {
  1476.                             debugLog('Commit message does not match conventional commit format and has no label');
  1477.                         } else {
  1478.                             debugLog('Skipping already processed commit');
  1479.                         }
  1480.                     }
  1481.                 } catch (error) {
  1482.                     debugLog('Error processing commit:', error);
  1483.                 }
  1484.             }
  1485.             
  1486.             // Process next batch if needed
  1487.             processedCount += (endIndex - startIndex);
  1488.             debugLog(`Processed ${processedCount} of ${commitMessagesArray.length} commits`);
  1489.             
  1490.             if (processedCount < commitMessagesArray.length) {
  1491.                 debugLog('Scheduling next batch');
  1492.                 setTimeout(() => processCommitBatch(endIndex), 0);
  1493.             } else {
  1494.                 debugLog('Finished processing all commits');
  1495.             }
  1496.         };
  1497.         
  1498.         // Start processing first batch
  1499.         if (commitMessagesArray.length > 0) {
  1500.             debugLog('Starting first batch processing');
  1501.             processCommitBatch(0);
  1502.         } else {
  1503.             debugLog('No commit messages found to process');
  1504.         }
  1505.     }
  1506.  
  1507.     // Set up MutationObserver to watch for DOM changes
  1508.     function setupMutationObserver() {
  1509.         debugLog('Setting up MutationObserver');
  1510.         const observer = new MutationObserver(debounce((mutations) => {
  1511.             debugLog('DOM changes detected:', mutations);
  1512.             for (const mutation of mutations) {
  1513.                 if (mutation.addedNodes.length) {
  1514.                     debugLog('New nodes added, triggering addCommitLabels');
  1515.                     addCommitLabels();
  1516.                 }
  1517.             }
  1518.         }, 100));
  1519.  
  1520.         // Start observing the document with the configured parameters
  1521.         observer.observe(document.body, {
  1522.             childList: true,
  1523.             subtree: true
  1524.         });
  1525.  
  1526.         debugLog('MutationObserver setup complete');
  1527.         return observer;
  1528.     }
  1529.  
  1530.     // Initialize the script
  1531.     function initialize() {
  1532.         debugLog('Initializing GitHub Commit Labels');
  1533.         // Initial run
  1534.         addCommitLabels();
  1535.  
  1536.         // Set up mutation observer
  1537.         const observer = setupMutationObserver();
  1538.  
  1539.         // Clean up on page unload
  1540.         window.addEventListener('unload', () => {
  1541.             debugLog('Cleaning up on page unload');
  1542.             observer.disconnect();
  1543.         });
  1544.     }
  1545.  
  1546.     // Initialize on page load
  1547.     initialize();
  1548.  
  1549.     // Handle GitHub's client-side navigation
  1550.     const navigationObserver = new MutationObserver(debounce((mutations) => {
  1551.         for (const mutation of mutations) {
  1552.             if (mutation.type === 'childList') {
  1553.                 // Check if we're on a commit page after navigation
  1554.                 if (isCommitPage()) {
  1555.                     // Small delay to ensure GitHub has finished rendering
  1556.                     setTimeout(addCommitLabels, 100);
  1557.                 }
  1558.             }
  1559.         }
  1560.     }, 100));
  1561.  
  1562.     // Observe changes to the main content area
  1563.     navigationObserver.observe(document.body, {
  1564.         childList: true,
  1565.         subtree: true
  1566.     });
  1567.  
  1568.     // Listen for popstate events (browser back/forward navigation)
  1569.     window.addEventListener('popstate', debounce(() => {
  1570.         if (isCommitPage()) {
  1571.             setTimeout(addCommitLabels, 100);
  1572.         }
  1573.     }, 100));
  1574.  
  1575.     // Listen for GitHub's custom navigation event
  1576.     document.addEventListener('turbo:render', debounce(() => {
  1577.         if (isCommitPage()) {
  1578.             setTimeout(addCommitLabels, 100);
  1579.         }
  1580.     }, 100));
  1581. })();