☰

GitHub Commit Labels

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

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

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