refactor(command-palette): adjust class order for improved styling consistency

refactor(image-color-inverter): update import statements for Node.js compatibility
test(image-color-inverter): enhance tests with consistent globalThis usage
fix(image-color-inverter.service): streamline image processing logic and error handling
refactor(image-color-inverter.vue): simplify file upload handling and improve readability
refactor(index): optimize tools mapping for better performance
fix(c-select): correct input class order for consistent styling
fix(c-table): adjust header class order for improved styling consistency

src/modules/command-palette/command-palette.vue

@@ -128,7 +128,7 @@ function activateOption(option: PaletteOption) {
       <c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />
 
       <div v-for="(options, category) in filteredSearchResult" :key="category">
-        <div ml-3 mt-3 text-sm font-bold text-primary op-60>
+        <div ml-3 mt-3 text-sm text-primary font-bold op-60>
           {{ category }}
         </div>
         <command-palette-option v-for="option in options" :key="option.name" :option="option" :selected="selectedOptionIndex === getOptionIndex(option)" @activated="activateOption" />

src/tools/image-color-inverter/image-color-inverter.e2e.spec.ts

@@ -1,6 +1,7 @@
-import { test, expect } from '@playwright/test';
-import { promises as fs } from 'fs';
-import path from 'path';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { expect, test } from '@playwright/test';
 
 test.describe('Tool - Image color inverter', () => {
   test.beforeEach(async ({ page }) => {
@@ -31,7 +32,8 @@ test.describe('Tool - Image color inverter', () => {
       const errorAlert = page.locator('.n-alert--error');
       await expect(errorAlert).toBeVisible();
       await expect(errorAlert).toContainText('File must be an image');
-    } finally {
+    }
+    finally {
       // Clean up
       await fs.unlink(testFilePath).catch(() => {});
     }
@@ -39,7 +41,8 @@ test.describe('Tool - Image color inverter', () => {
 
   test('Processes image upload successfully', async ({ page }) => {
     // Create a simple test image (1x1 pixel PNG in base64)
-    const testImageDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+    const testImageDataUrl
+      = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
 
     // Create a blob from the data URL
     const response = await fetch(testImageDataUrl);
@@ -73,7 +76,8 @@ test.describe('Tool - Image color inverter', () => {
       // Check that copy button is available
       const copyButton = page.locator('text=Copy Base64');
       await expect(copyButton).toBeVisible();
-    } finally {
+    }
+    finally {
       // Clean up
       await fs.unlink(testFilePath).catch(() => {});
     }
@@ -81,7 +85,8 @@ test.describe('Tool - Image color inverter', () => {
 
   test('Clear button resets the tool', async ({ page }) => {
     // Create a simple test image
-    const testImageDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+    const testImageDataUrl
+      = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
 
     const response = await fetch(testImageDataUrl);
     const blob = await response.blob();
@@ -110,7 +115,8 @@ test.describe('Tool - Image color inverter', () => {
       // Check that upload area is visible again
       const uploadArea = page.locator('text=Drag and drop an image here, or click to select');
       await expect(uploadArea).toBeVisible();
-    } finally {
+    }
+    finally {
       await fs.unlink(testFilePath).catch(() => {});
     }
   });

src/tools/image-color-inverter/image-color-inverter.service.test.ts

@@ -1,8 +1,8 @@
-import { expect, describe, it, beforeEach } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { invertImageColors } from './image-color-inverter.service';
 
 // Mock ImageData for Node.js environment
-Object.defineProperty(global, 'ImageData', {
+Object.defineProperty(globalThis, 'ImageData', {
   value: class ImageData {
     data: Uint8ClampedArray;
     width: number;
@@ -14,7 +14,8 @@ Object.defineProperty(global, 'ImageData', {
         this.width = data;
         this.height = width;
         this.data = new Uint8ClampedArray(data * width * 4);
-      } else {
+      }
+      else {
         // ImageData(data, width, height)
         this.data = data;
         this.width = width;
@@ -25,30 +26,39 @@ Object.defineProperty(global, 'ImageData', {
 });
 
 // Mock other browser APIs for completeness
-Object.defineProperty(global, 'HTMLCanvasElement', {
+Object.defineProperty(globalThis, 'HTMLCanvasElement', {
   value: class {
     width = 0;
     height = 0;
+
     getContext() {
       return {
         drawImage: () => {},
-        getImageData: () => new (global as any).ImageData(new Uint8ClampedArray([255, 0, 128, 255]), 1, 1),
+        getImageData: () => new (globalThis as any).ImageData(new Uint8ClampedArray([255, 0, 128, 255]), 1, 1),
         putImageData: () => {},
       };
     }
-    toDataURL() { return 'data:image/png;base64,mock'; }
+
+    toDataURL() {
+      return 'data:image/png;base64,mock';
+    }
   },
 });
 
-Object.defineProperty(global, 'Image', {
+Object.defineProperty(globalThis, 'Image', {
   value: class {
     onload: () => void = () => {};
     onerror: () => void = () => {};
+    width = 100;
+    height = 100;
+
     set src(value: string) {
       setTimeout(() => this.onload(), 0);
     }
-    width = 100;
-    height = 100;
+
+    get src(): string {
+      return '';
+    }
   },
 });
 
@@ -57,10 +67,16 @@ describe('image-color-inverter service', () => {
     it('should invert RGB colors while preserving alpha', () => {
       // Create test image data with known values
       const originalData = new Uint8ClampedArray([
-        255, 0, 128, 255,    // Red=255, Green=0, Blue=128, Alpha=255
-        0, 255, 64, 128,     // Red=0, Green=255, Blue=64, Alpha=128
+        255,
+        0,
+        128,
+        255, // Red=255, Green=0, Blue=128, Alpha=255
+        0,
+        255,
+        64,
+        128, // Red=0, Green=255, Blue=64, Alpha=128
       ]);
-      const imageData = new (global as any).ImageData(originalData, 2, 1);
+      const imageData = new (globalThis as any).ImageData(originalData, 2, 1);
 
       const inverted = invertImageColors(imageData);
 
@@ -78,7 +94,7 @@ describe('image-color-inverter service', () => {
 
     it('should preserve image dimensions', () => {
       const originalData = new Uint8ClampedArray([255, 0, 128, 255]);
-      const imageData = new (global as any).ImageData(originalData, 1, 1);
+      const imageData = new (globalThis as any).ImageData(originalData, 1, 1);
 
       const inverted = invertImageColors(imageData);
 
@@ -88,10 +104,16 @@ describe('image-color-inverter service', () => {
 
     it('should handle pure black and white pixels', () => {
       const originalData = new Uint8ClampedArray([
-        0, 0, 0, 255,        // Pure black
-        255, 255, 255, 255,  // Pure white
+        0,
+        0,
+        0,
+        255, // Pure black
+        255,
+        255,
+        255,
+        255, // Pure white
       ]);
-      const imageData = new (global as any).ImageData(originalData, 2, 1);
+      const imageData = new (globalThis as any).ImageData(originalData, 2, 1);
 
       const inverted = invertImageColors(imageData);
 

src/tools/image-color-inverter/image-color-inverter.service.ts

@@ -53,7 +53,8 @@ export function invertImageFile(file: File): Promise<string> {
           // Convert to base64 PNG
           const invertedDataUrl = canvas.toDataURL('image/png');
           resolve(invertedDataUrl);
-        } catch (err) {
+        }
+        catch (err) {
           reject(new Error(`Failed to process image: ${err}`));
         }
       };

src/tools/image-color-inverter/image-color-inverter.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { invertImageFile } from './image-color-inverter.service';
 import { useCopy } from '@/composable/copy';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 import { withDefaultOnError } from '@/utils/defaults';
-import { invertImageFile } from './image-color-inverter.service';
 
 const originalImageSrc = ref<string>('');
 const invertedImageSrc = ref<string>('');
@@ -11,7 +11,7 @@ const error = ref<string | null>(null);
 
 const { copy: copyInvertedImage } = useCopy({
   source: invertedImageSrc,
-  text: 'Inverted image base64 copied to clipboard' 
+  text: 'Inverted image base64 copied to clipboard',
 });
 
 const { download: downloadInvertedImage } = useDownloadFileFromBase64({
@@ -20,12 +20,11 @@ const { download: downloadInvertedImage } = useDownloadFileFromBase64({
   extension: 'png',
 });
 
-const handleFileUpload = async (file: File) => {
+function handleFileUpload(file: File) {
   if (!file) {
     return;
   }
 
-  try {
   error.value = null;
   isProcessing.value = true;
 
@@ -37,19 +36,23 @@ const handleFileUpload = async (file: File) => {
   reader.readAsDataURL(file);
 
   // Process the image
-    invertedImageSrc.value = await invertImageFile(file);
-  } catch (err) {
+  invertImageFile(file)
+    .then((result) => {
+      invertedImageSrc.value = result;
+    })
+    .catch((err) => {
       error.value = withDefaultOnError(err, 'Failed to process image');
-  } finally {
+    })
+    .finally(() => {
       isProcessing.value = false;
+    });
 }
-};
 
-const clearImages = () => {
+function clearImages() {
   originalImageSrc.value = '';
   invertedImageSrc.value = '';
   error.value = null;
-};
+}
 </script>
 
 <template>
@@ -72,7 +75,7 @@ const clearImages = () => {
           <div>
             <n-h3>Original Image</n-h3>
             <div class="image-container">
-              <img :src="originalImageSrc" alt="Original" />
+              <img :src="originalImageSrc" alt="Original">
             </div>
           </div>
         </n-gi>
@@ -81,7 +84,7 @@ const clearImages = () => {
           <div>
             <n-h3>Inverted Image</n-h3>
             <div class="image-container">
-              <img :src="invertedImageSrc" alt="Inverted" />
+              <img :src="invertedImageSrc" alt="Inverted">
             </div>
             <n-space style="margin-top: 12px" justify="start">
               <c-button @click="downloadInvertedImage()">

src/tools/index.ts

@@ -214,5 +214,5 @@ export const toolsByCategory: ToolCategory[] = [
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);
 export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) =>
-  components.map((tool) => ({ category: name, ...tool })),
+  components.map(tool => ({ category: name, ...tool })),
 );

src/ui/c-select/c-select.vue

@@ -151,7 +151,7 @@ function onSearchInput() {
       >
         <div flex-1 truncate>
           <slot name="displayed-value">
-            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput">
+            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full color-current lh-normal @input="onSearchInput">
             <span v-else-if="selectedOption" lh-normal>
               {{ selectedOption.label }}
             </span>

src/ui/c-table/c-table.vue

@@ -39,7 +39,7 @@ const headers = computed(() => {
 <template>
   <div class="relative overflow-x-auto rounded">
     <table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" role="table" :aria-label="description">
-      <thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
+      <thead v-if="!hideHeaders" class="bg-#ffffff text-gray-700 uppercase dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
         <tr>
           <th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">
             {{ header.label }}