v0.1.3: Add language filtering and improve UI

- Added language-specific file extension mappings for Python, HTML, and CSS
- Implemented language filtering functionality in history view
- Enhanced UI with appropriate icons for action buttons
- Improved display of history items with proper context menus
- Added helper function to identify programming languages by file extension

Author: christliebdela

.github/ISSUE_TEMPLATE/bug_report.md

@@ -11,24 +11,37 @@ assignees: ''
 A clear and concise description of the bug.
 
 ## Steps To Reproduce
-1. Go to '...'
-2. Click on '....'
-3. See error
+1. Open VS Code with version [e.g., 1.75.0]
+2. Open file(s) of type [e.g., JavaScript, Python, etc.]
+3. Access Comment Cleaner Pro via [e.g., sidebar, command palette, right-click menu]
+4. Select option [e.g., Clean Current File, Clean Multiple Files]
+5. [Any additional steps taken]
+6. Observe the issue: [specific error or unexpected behavior]
 
 ## Expected Behavior
 What you expected to happen.
 
 ## Actual Behavior
-What actually happened.
+What actually happened. Include any error messages or console output if available.
+
+## Code Sample
+```python
+# Provide a minimal, reproducible example of the code where the bug occurs
+def example_function():
+    print("Hello, world!")
+```
 
 ## Screenshots
 If applicable, add screenshots to help explain your problem.
 
 ## Environment
 - OS: [e.g. Windows 11, macOS Ventura]
 - VS Code Version: [e.g. 1.75.0]
-- Extension Version: [e.g. 0.1.0]
+- Extension Version: [e.g. 0.1.2]
 - Python Version: [e.g. 3.9.6]
+- File Type(s) Affected: [e.g., .js, .py, .html]
 
 ## Additional Information
-Any other context about the problem.
+- Does the issue occur every time or intermittently?
+- Have you tried any workarounds?
+- Any other context about the problem.

.gitignore

@@ -28,4 +28,7 @@ npm-debug.log*
 !.vscode/tasks.json
 
 # Optional - typically committed, but can be excluded
-# package-lock.json
+# package-lock.json
+
+# Video files
+videos/

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to the "Comment Cleaner Pro" extension will be documented in this file.
 
+## [0.1.3] - 2025-05-29
+- Added language-specific file extension mappings
+- Enhanced language filtering in the history view
+- Added proper icon support for different action items
+- Improved UI for buttons in the sidebar
+- Fixed display issues with history items
+
 ## [0.1.2] - 2025-05-28
 
 ### Fixed

README.md

@@ -1,10 +1,10 @@
 # Comment Cleaner Pro
 
-<p align="center">
+<p align="Left">
   <img src="media/icon.png" width="128" height="128" alt="Comment Cleaner Pro Logo">
 </p>
 
-<p align="center">
+<p align="Left">
   <a href="https://marketplace.visualstudio.com/items?itemName=ChristliebDela.comment-cleaner-pro"><img src="https://img.shields.io/visual-studio-marketplace/v/ChristliebDela.comment-cleaner-pro?style=flat-square&color=000000&labelColor=222222" alt="Version"></a>
   <a href="https://marketplace.visualstudio.com/items?itemName=ChristliebDela.comment-cleaner-pro"><img src="https://img.shields.io/visual-studio-marketplace/d/ChristliebDela.comment-cleaner-pro?style=flat-square&color=000000&labelColor=222222" alt="Downloads"></a>
   <a href="https://github.com/christliebdela/Comment-Cleaner-VsCode-Ext/blob/main/LICENSE"><img src="https://img.shields.io/github/license/christliebdela/Comment-Cleaner-VsCode-Ext?style=flat-square&color=000000&labelColor=222222" alt="License"></a>

media/ccpStyles.css

@@ -0,0 +1,37 @@
+.ccp-button-item {
+  background-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+  border-radius: 3px;  
+  padding: 6px 10px; 
+  margin: 4px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+  text-align: center;
+  font-size: 13px;
+  font-weight: normal;
+}
+
+.ccp-button-item:hover {
+  background-color: var(--vscode-button-hoverBackground);
+}
+
+.ccp-button-item .codicon {
+  margin-right: 5px;
+}
+
+.icon-split-horizontal::before {
+    content: "\ea75";
+    font-family: "codicon";
+}
+
+.icon-history::before {
+    content: "\ead0";
+    font-family: "codicon";
+}
+
+.icon-trash::before {
+    content: "\eb9f";
+    font-family: "codicon";
+}

package.json

@@ -2,7 +2,7 @@
   "name": "comment-cleaner-pro",
   "displayName": "Comment Cleaner Pro",
   "description": "A Visual Studio Code extension for removing comments from source code files across multiple programming languages.",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "publisher": "ChristliebDela",
   "icon": "media/icon.png",
   "engines": {
@@ -25,15 +25,15 @@
       },
       {
         "command": "ccp.compareWithBackup",
-        "title": "$(split-horizontal) Compare with Backup"
+        "title": "Compare with Backup"
       },
       {
         "command": "ccp.restoreFromBackup",
-        "title": "$(history) Restore from Backup"
+        "title": "Restore from Backup"
       },
       {
         "command": "ccp.removeFromHistory",
-        "title": "$(trash) Remove from History"
+        "title": "Remove from History"
       },
       {
         "command": "ccp.previewCleanComments",
@@ -85,7 +85,11 @@
         {
           "command": "ccp.clearHistory",
           "when": "view == ccpHistory",
-          "group": "navigation"
+          "group": "navigation",
+          "icon": {
+            "light": "media/light/clear.svg",
+            "dark": "media/dark/clear.svg"
+          }
         }
       ]
     },
@@ -101,8 +105,9 @@
     "views": {
       "comment-cleaner-pro": [
         {
-          "id": "ccpFiles",
-          "name": "Clean Comments"
+          "id": "ccpButtons",
+          "name": "Actions",
+          "type": "webview"
         },
         {
           "id": "ccpHistory",
@@ -139,7 +144,22 @@
           "description": "Preserve comments matching these regex patterns"
         }
       }
-    }
+    },
+    "customEditors": [
+      {
+        "viewType": "ccpFiles",
+        "displayName": "Comment Cleaner Pro",
+        "selector": [
+          {
+            "filenamePattern": "*"
+          }
+        ],
+        "priority": "default"
+      }
+    ],
+    "css": [
+      "./media/ccpStyles.css"
+    ]
   },
   "scripts": {
     "vscode:prepublish": "npm run compile",

src/ccpViewProvider.ts

@@ -31,22 +31,26 @@ export class FilesViewProvider implements vscode.TreeDataProvider<FileItem> {
       }
 
       const cleanCurrentItem = new FileItem(
-        'Clean Current File',  // Remove the $(trash) prefix
+        'Clean Current File',
         vscode.TreeItemCollapsibleState.None,
         {
           command: 'ccp.cleanComments',
           title: 'Clean Current File'
-        }
+        },
+        undefined,
+        true // Mark as button
       );
       cleanCurrentItem.iconPath = new vscode.ThemeIcon('trash');
 
       const cleanMultipleItem = new FileItem(
-        'Clean Multiple Files',  // Remove the $(files) prefix
+        'Clean Multiple Files',
         vscode.TreeItemCollapsibleState.None,
         {
           command: 'ccp.cleanMultipleFiles',
           title: 'Clean Multiple Files'
-        }
+        },
+        undefined, 
+        true // Mark as button
       );
       cleanMultipleItem.iconPath = new vscode.ThemeIcon('files');
 
@@ -119,14 +123,22 @@ export class HistoryViewProvider implements vscode.TreeDataProvider<FileItem> {
 
       // Add filter option at top
       const filterItem = new FileItem(
-        'Filter by Language',  // Remove the $(filter) prefix
+        'Filter by Language',
         vscode.TreeItemCollapsibleState.None,
         {
           command: 'ccp.setLanguageFilter',
           title: 'Filter by Language'
-        }
+        },
+        undefined,
+        true // Mark as button
       );
+      // Add these lines to make the filter item correctly appear as a button
       filterItem.iconPath = new vscode.ThemeIcon('filter');
+      filterItem.contextValue = 'buttonItem';
+      // Add this line to apply CSS classes
+      filterItem.tooltip = 'Filter history by programming language';
+      // This is important to make VS Code apply custom styling
+      filterItem.description = '';
       items.push(filterItem);
 
       // Filter history items by language if filter is active
@@ -166,29 +178,44 @@ class FileItem extends vscode.TreeItem {
     public readonly label: string,
     public readonly collapsibleState: vscode.TreeItemCollapsibleState,
     public readonly command?: vscode.Command,
-    public readonly filePath?: string
+    public readonly filePath?: string,
+    public readonly isButton: boolean = false
   ) {
     super(label, collapsibleState);
     this.tooltip = filePath || label;
-    this.description = filePath ? path.dirname(filePath) : '';
 
-    // Add appropriate icons based on the action type
+    if (isButton) {
+      // Make items look like buttons
+      this.description = "";
+      this.tooltip = command?.title || label;
+    } else {
+      this.description = filePath ? path.dirname(filePath) : '';
+    }
+    
+    // Set appropriate icon based on action type
     if (label === 'Clean Current File') {
       this.iconPath = new vscode.ThemeIcon('trash');
+      this.contextValue = 'buttonItem';
     } else if (label === 'Clean Multiple Files') {
       this.iconPath = new vscode.ThemeIcon('files');
+      this.contextValue = 'buttonItem';
     } else if (label === 'Filter by Language') {
       this.iconPath = new vscode.ThemeIcon('filter');
-    } else if (label === 'Preview Comment Removal') {
-      this.iconPath = new vscode.ThemeIcon('eye');
-    } else if (label.startsWith('Compare with')) {
+      this.contextValue = 'buttonItem';
+    } else if (label === 'Compare with Backup') {
       this.iconPath = new vscode.ThemeIcon('split-horizontal');
-    } else if (label.startsWith('Restore from')) {
+      this.contextValue = 'buttonItem';
+    } else if (label === 'Restore from Backup') {
       this.iconPath = new vscode.ThemeIcon('history');
+      this.contextValue = 'buttonItem';
+    } else if (label === 'Remove from History') {
+      this.iconPath = new vscode.ThemeIcon('trash');
+      this.contextValue = 'buttonItem';
     } else {
       // For file entries in history
       if (filePath) {
         this.iconPath = vscode.ThemeIcon.File;
+        this.contextValue = 'historyItem';
       }
     }
   }