jupyterlab_vscode_icons_extension 1.0.102 → 1.0.117

package/lib/index.js

@@ -126,16 +126,8 @@ const fileTypeConfigs = [
         iconName: 'file-type-perl',
         group: 'enableLanguageIcons'
     },
-    {
-        extensions: ['.sh', '.bash', '.zsh'],
-        iconName: 'file-type-shell',
-        group: 'enableLanguageIcons'
-    },
-    {
-        extensions: ['.bat', '.cmd'],
-        iconName: 'file-type-shell',
-        group: 'enableLanguageIcons'
-    },
+    // Shell scripts (.sh, .bash, .zsh) and batch files (.bat, .cmd) use custom icons with black backgrounds
+    // Registered separately below with custom SVGs
     {
         extensions: ['.ps1'],
         iconName: 'file-type-powershell',
@@ -422,6 +414,8 @@ const plugin = {
             const wordSvg = (wordIcon === null || wordIcon === void 0 ? void 0 : wordIcon.svgstr) || '';
             const excelSvg = (excelIcon === null || excelIcon === void 0 ? void 0 : excelIcon.svgstr) || '';
             const powerpointSvg = (powerpointIcon === null || powerpointIcon === void 0 ? void 0 : powerpointIcon.svgstr) || '';
+            const svgFileIcon = createLabIcon('file-type-image');
+            const svgFileSvg = (svgFileIcon === null || svgFileIcon === void 0 ? void 0 : svgFileIcon.svgstr) || '';
             // Create base64 encoded data URIs
             const pythonDataUri = `data:image/svg+xml;base64,${btoa(pythonSvg)}`;
             const markdownDataUri = `data:image/svg+xml;base64,${btoa(markdownSvg)}`;
@@ -431,6 +425,7 @@ const plugin = {
             const wordDataUri = wordSvg ? `data:image/svg+xml;base64,${btoa(wordSvg)}` : '';
             const excelDataUri = excelSvg ? `data:image/svg+xml;base64,${btoa(excelSvg)}` : '';
             const powerpointDataUri = powerpointSvg ? `data:image/svg+xml;base64,${btoa(powerpointSvg)}` : '';
+            const svgFileDataUri = svgFileSvg ? `data:image/svg+xml;base64,${btoa(svgFileSvg)}` : '';
             // Inject CSS that overrides icons for .py and .md files
             // Note: Jupytext marks .py and .md files as type="notebook", so we need to
             // use JavaScript to detect and mark these files for CSS targeting
@@ -570,6 +565,22 @@ const plugin = {
           background-repeat: no-repeat;
           background-position: center;
         }
+
+        /* Override any incorrect file type detection for SVG files */
+        .jp-DirListing-item[data-vscode-svg-override] .jp-DirListing-itemIcon svg,
+        .jp-DirListing-item[data-vscode-svg-override] .jp-DirListing-itemIcon img {
+          display: none !important;
+        }
+        .jp-DirListing-item[data-vscode-svg-override] .jp-DirListing-itemIcon::before {
+          content: '';
+          display: inline-block;
+          width: calc(var(--jp-ui-font-size1, 13px) * var(--jp-custom-icon-scale, 1.5));
+          height: calc(var(--jp-ui-font-size1, 13px) * var(--jp-custom-icon-scale, 1.5));
+          background-image: url('${svgFileDataUri}');
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
       `;
             // Add CSS to make JavaScript and .env icons less bright
             style.textContent += `
@@ -585,15 +596,6 @@ const plugin = {
           filter: brightness(0.85) saturate(0.75);
         }
 
-        /* Color shell script icons - JupyterLab orange for Linux shells (.sh, .bash, .zsh) */
-        .jp-DirListing-item[data-file-type="vscode-file-type-shell"][data-shell-type="linux"] .jp-DirListing-itemIcon svg {
-          filter: brightness(0) saturate(100%) invert(58%) sepia(76%) saturate(3113%) hue-rotate(1deg) brightness(101%) contrast(101%);
-        }
-
-        /* Color shell script icons - pale blue for Windows shells (.bat, .cmd) */
-        .jp-DirListing-item[data-file-type="vscode-file-type-shell"][data-shell-type="windows"] .jp-DirListing-itemIcon svg {
-          filter: hue-rotate(180deg) saturate(0.6) brightness(1.2);
-        }
 
         /* Make hidden items darker (items starting with .) */
         .jp-DirListing-item[data-is-dot] {
@@ -639,23 +641,6 @@ const plugin = {
                         item.removeAttribute('data-jupytext-py');
                         item.removeAttribute('data-jupytext-md');
                     }
-                    // Handle shell script files - ONLY set attribute if BOTH conditions match
-                    if (fileType === 'vscode-file-type-shell') {
-                        if (name.endsWith('.sh') || name.endsWith('.bash') || name.endsWith('.zsh')) {
-                            item.setAttribute('data-shell-type', 'linux');
-                        }
-                        else if (name.endsWith('.bat') || name.endsWith('.cmd')) {
-                            item.setAttribute('data-shell-type', 'windows');
-                        }
-                        else {
-                            // Shell file type but wrong extension - clear attribute
-                            item.removeAttribute('data-shell-type');
-                        }
-                    }
-                    else {
-                        // Not a shell file - always clear shell-type attribute
-                        item.removeAttribute('data-shell-type');
-                    }
                     // Handle PDF and Office files by extension (override native JupyterLab icons)
                     const nameLower = name.toLowerCase();
                     // Clear all office/pdf attributes first
@@ -676,6 +661,11 @@ const plugin = {
                     else if (nameLower.endsWith('.ppt') || nameLower.endsWith('.pptx')) {
                         item.setAttribute('data-vscode-powerpoint', 'true');
                     }
+                    // Force SVG icon for .svg files (override any incorrect file type detection)
+                    item.removeAttribute('data-vscode-svg-override');
+                    if (nameLower.endsWith('.svg')) {
+                        item.setAttribute('data-vscode-svg-override', 'true');
+                    }
                 });
             };
             // Watch for changes in the file browser
@@ -756,7 +746,6 @@ const plugin = {
             docRegistry.addFileType({
                 name: 'vscode-makefile',
                 displayName: 'Makefile',
-                mimeTypes: ['text/x-makefile'],
                 extensions: ['.mk', '.mak', '.make'],
                 pattern: '^(Makefile|makefile|GNUmakefile)$',
                 fileFormat: 'text',
@@ -832,6 +821,65 @@ const plugin = {
                     icon: drawioIcon
                 });
             }
+            // Register MCP config files with custom icon
+            if (settings.enableConfigIcons) {
+                const mcpSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path fill="#eee" d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"/>
+          <path fill="#eee" d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"/>
+        </svg>`;
+                const mcpIcon = new LabIcon({
+                    name: 'mcp-icon',
+                    svgstr: mcpSvg
+                });
+                docRegistry.addFileType({
+                    name: 'vscode-mcp',
+                    displayName: 'MCP Configuration',
+                    pattern: '^\\.mcp\\.json(\\..*)?$',
+                    fileFormat: 'text',
+                    contentType: 'file',
+                    icon: mcpIcon
+                });
+            }
+            // Register shell scripts with custom black background and desaturated orange icon
+            if (settings.enableLanguageIcons) {
+                const shellSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+          <rect x="1" y="3" width="30" height="26" rx="2" fill="#1a1a1a"/>
+          <path fill="#e8b070" d="M29.4 27.6H2.5V4.5h26.9Zm-25.9-1h24.9V5.5H3.5Z"/>
+          <path fill="#e8b070" d="m6.077 19.316l-.555-.832l4.844-3.229l-4.887-4.071l.641-.768l5.915 4.928zM12.7 18.2h7.8v1h-7.8zM2.5 5.5h26.9v1.9H2.5z"/>
+        </svg>`;
+                const shellIcon = new LabIcon({
+                    name: 'shell-icon',
+                    svgstr: shellSvg
+                });
+                docRegistry.addFileType({
+                    name: 'vscode-shell',
+                    displayName: 'Shell Script',
+                    extensions: ['.sh', '.bash', '.zsh'],
+                    fileFormat: 'text',
+                    contentType: 'file',
+                    icon: shellIcon
+                });
+            }
+            // Register batch files with custom black background and desaturated blue icon
+            if (settings.enableLanguageIcons) {
+                const batchSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+          <rect x="1" y="3" width="30" height="26" rx="2" fill="#1a1a1a"/>
+          <path fill="#80c8f0" d="M29.4 27.6H2.5V4.5h26.9Zm-25.9-1h24.9V5.5H3.5Z"/>
+          <path fill="#80c8f0" d="m6.077 19.316l-.555-.832l4.844-3.229l-4.887-4.071l.641-.768l5.915 4.928zM12.7 18.2h7.8v1h-7.8zM2.5 5.5h26.9v1.9H2.5z"/>
+        </svg>`;
+                const batchIcon = new LabIcon({
+                    name: 'batch-icon',
+                    svgstr: batchSvg
+                });
+                docRegistry.addFileType({
+                    name: 'vscode-batch',
+                    displayName: 'Batch File',
+                    extensions: ['.bat', '.cmd'],
+                    fileFormat: 'text',
+                    contentType: 'file',
+                    icon: batchIcon
+                });
+            }
         };
         // Debounce timer for settings change alert
         let settingsChangeTimeout = null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_vscode_icons_extension",
-    "version": "1.0.102",
+    "version": "1.0.117",
     "description": "Jupyterlab extension with a shameless rip-off of the vscode-icons into our beloved environment",
     "keywords": [
         "jupyter",

package/src/index.ts

@@ -155,16 +155,8 @@ const fileTypeConfigs: IFileTypeConfig[] = [
     iconName: 'file-type-perl',
     group: 'enableLanguageIcons'
   },
-  {
-    extensions: ['.sh', '.bash', '.zsh'],
-    iconName: 'file-type-shell',
-    group: 'enableLanguageIcons'
-  },
-  {
-    extensions: ['.bat', '.cmd'],
-    iconName: 'file-type-shell',
-    group: 'enableLanguageIcons'
-  },
+  // Shell scripts (.sh, .bash, .zsh) and batch files (.bat, .cmd) use custom icons with black backgrounds
+  // Registered separately below with custom SVGs
   {
     extensions: ['.ps1'],
     iconName: 'file-type-powershell',
@@ -469,6 +461,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
       const wordSvg = wordIcon?.svgstr || '';
       const excelSvg = excelIcon?.svgstr || '';
       const powerpointSvg = powerpointIcon?.svgstr || '';
+      const svgFileIcon = createLabIcon('file-type-image');
+      const svgFileSvg = svgFileIcon?.svgstr || '';
 
       // Create base64 encoded data URIs
       const pythonDataUri = `data:image/svg+xml;base64,${btoa(pythonSvg)}`;
@@ -479,6 +473,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
       const wordDataUri = wordSvg ? `data:image/svg+xml;base64,${btoa(wordSvg)}` : '';
       const excelDataUri = excelSvg ? `data:image/svg+xml;base64,${btoa(excelSvg)}` : '';
       const powerpointDataUri = powerpointSvg ? `data:image/svg+xml;base64,${btoa(powerpointSvg)}` : '';
+      const svgFileDataUri = svgFileSvg ? `data:image/svg+xml;base64,${btoa(svgFileSvg)}` : '';
 
       // Inject CSS that overrides icons for .py and .md files
       // Note: Jupytext marks .py and .md files as type="notebook", so we need to
@@ -619,6 +614,22 @@ const plugin: JupyterFrontEndPlugin<void> = {
           background-repeat: no-repeat;
           background-position: center;
         }
+
+        /* Override any incorrect file type detection for SVG files */
+        .jp-DirListing-item[data-vscode-svg-override] .jp-DirListing-itemIcon svg,
+        .jp-DirListing-item[data-vscode-svg-override] .jp-DirListing-itemIcon img {
+          display: none !important;
+        }
+        .jp-DirListing-item[data-vscode-svg-override] .jp-DirListing-itemIcon::before {
+          content: '';
+          display: inline-block;
+          width: calc(var(--jp-ui-font-size1, 13px) * var(--jp-custom-icon-scale, 1.5));
+          height: calc(var(--jp-ui-font-size1, 13px) * var(--jp-custom-icon-scale, 1.5));
+          background-image: url('${svgFileDataUri}');
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
       `;
 
       // Add CSS to make JavaScript and .env icons less bright
@@ -635,15 +646,6 @@ const plugin: JupyterFrontEndPlugin<void> = {
           filter: brightness(0.85) saturate(0.75);
         }
 
-        /* Color shell script icons - JupyterLab orange for Linux shells (.sh, .bash, .zsh) */
-        .jp-DirListing-item[data-file-type="vscode-file-type-shell"][data-shell-type="linux"] .jp-DirListing-itemIcon svg {
-          filter: brightness(0) saturate(100%) invert(58%) sepia(76%) saturate(3113%) hue-rotate(1deg) brightness(101%) contrast(101%);
-        }
-
-        /* Color shell script icons - pale blue for Windows shells (.bat, .cmd) */
-        .jp-DirListing-item[data-file-type="vscode-file-type-shell"][data-shell-type="windows"] .jp-DirListing-itemIcon svg {
-          filter: hue-rotate(180deg) saturate(0.6) brightness(1.2);
-        }
 
         /* Make hidden items darker (items starting with .) */
         .jp-DirListing-item[data-is-dot] {
@@ -693,21 +695,6 @@ const plugin: JupyterFrontEndPlugin<void> = {
             item.removeAttribute('data-jupytext-md');
           }
 
-          // Handle shell script files - ONLY set attribute if BOTH conditions match
-          if (fileType === 'vscode-file-type-shell') {
-            if (name.endsWith('.sh') || name.endsWith('.bash') || name.endsWith('.zsh')) {
-              item.setAttribute('data-shell-type', 'linux');
-            } else if (name.endsWith('.bat') || name.endsWith('.cmd')) {
-              item.setAttribute('data-shell-type', 'windows');
-            } else {
-              // Shell file type but wrong extension - clear attribute
-              item.removeAttribute('data-shell-type');
-            }
-          } else {
-            // Not a shell file - always clear shell-type attribute
-            item.removeAttribute('data-shell-type');
-          }
-
           // Handle PDF and Office files by extension (override native JupyterLab icons)
           const nameLower = name.toLowerCase();
 
@@ -727,6 +714,12 @@ const plugin: JupyterFrontEndPlugin<void> = {
           } else if (nameLower.endsWith('.ppt') || nameLower.endsWith('.pptx')) {
             item.setAttribute('data-vscode-powerpoint', 'true');
           }
+
+          // Force SVG icon for .svg files (override any incorrect file type detection)
+          item.removeAttribute('data-vscode-svg-override');
+          if (nameLower.endsWith('.svg')) {
+            item.setAttribute('data-vscode-svg-override', 'true');
+          }
         });
       };
 
@@ -826,7 +819,6 @@ const plugin: JupyterFrontEndPlugin<void> = {
       docRegistry.addFileType({
         name: 'vscode-makefile',
         displayName: 'Makefile',
-        mimeTypes: ['text/x-makefile'],
         extensions: ['.mk', '.mak', '.make'],
         pattern: '^(Makefile|makefile|GNUmakefile)$',
         fileFormat: 'text',
@@ -911,6 +903,74 @@ const plugin: JupyterFrontEndPlugin<void> = {
           icon: drawioIcon
         });
       }
+
+      // Register MCP config files with custom icon
+      if (settings.enableConfigIcons) {
+        const mcpSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path fill="#eee" d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"/>
+          <path fill="#eee" d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"/>
+        </svg>`;
+
+        const mcpIcon = new LabIcon({
+          name: 'mcp-icon',
+          svgstr: mcpSvg
+        });
+
+        docRegistry.addFileType({
+          name: 'vscode-mcp',
+          displayName: 'MCP Configuration',
+          pattern: '^\\.mcp\\.json(\\..*)?$',
+          fileFormat: 'text',
+          contentType: 'file',
+          icon: mcpIcon
+        });
+      }
+
+      // Register shell scripts with custom black background and desaturated orange icon
+      if (settings.enableLanguageIcons) {
+        const shellSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+          <rect x="1" y="3" width="30" height="26" rx="2" fill="#1a1a1a"/>
+          <path fill="#e8b070" d="M29.4 27.6H2.5V4.5h26.9Zm-25.9-1h24.9V5.5H3.5Z"/>
+          <path fill="#e8b070" d="m6.077 19.316l-.555-.832l4.844-3.229l-4.887-4.071l.641-.768l5.915 4.928zM12.7 18.2h7.8v1h-7.8zM2.5 5.5h26.9v1.9H2.5z"/>
+        </svg>`;
+
+        const shellIcon = new LabIcon({
+          name: 'shell-icon',
+          svgstr: shellSvg
+        });
+
+        docRegistry.addFileType({
+          name: 'vscode-shell',
+          displayName: 'Shell Script',
+          extensions: ['.sh', '.bash', '.zsh'],
+          fileFormat: 'text',
+          contentType: 'file',
+          icon: shellIcon
+        });
+      }
+
+      // Register batch files with custom black background and desaturated blue icon
+      if (settings.enableLanguageIcons) {
+        const batchSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+          <rect x="1" y="3" width="30" height="26" rx="2" fill="#1a1a1a"/>
+          <path fill="#80c8f0" d="M29.4 27.6H2.5V4.5h26.9Zm-25.9-1h24.9V5.5H3.5Z"/>
+          <path fill="#80c8f0" d="m6.077 19.316l-.555-.832l4.844-3.229l-4.887-4.071l.641-.768l5.915 4.928zM12.7 18.2h7.8v1h-7.8zM2.5 5.5h26.9v1.9H2.5z"/>
+        </svg>`;
+
+        const batchIcon = new LabIcon({
+          name: 'batch-icon',
+          svgstr: batchSvg
+        });
+
+        docRegistry.addFileType({
+          name: 'vscode-batch',
+          displayName: 'Batch File',
+          extensions: ['.bat', '.cmd'],
+          fileFormat: 'text',
+          contentType: 'file',
+          icon: batchIcon
+        });
+      }
     };
 
     // Debounce timer for settings change alert