bbuugg · dependabot · Jan 25, 2026 · Mar 5, 2026 · Mar 13, 2026 · Mar 13, 2026
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+dist-electron
 *.local
 
 # Editor directories and files

diff --git a/README.md b/README.md
@@ -1,73 +1,153 @@
-# React + TypeScript + Vite
+# Developer Tools Collection
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A comprehensive collection of developer utilities and tools built with **React**, **TypeScript**, **Vite**, and **Electron**. This project provides a unified interface for various tasks ranging from JSON processing and media manipulation to web development utilities and system helpers.
 
-Currently, two official plugins are available:
+## 🚀 Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+The tools are categorized into four main sections:
 
-## React Compiler
+### 🌐 Web Tools
+Essential utilities for web developers and designers.
+- **HTTP/Network**:
+  - **Http Tester**: A robust tool for testing API endpoints (like Postman).
+  - **WebSocket Tool**: Test WebSocket connections.
+  - **IP Lookup**: Query IP address information.
+  - **Url Encoder**: Encode and decode URLs.
+  - **JWT Tool**: Decode and inspect JSON Web Tokens.
+- **Converters & Generators**:
+  - **Cron Generator**: Generate and explain Cron expressions.
+  - **CSS Gradient Generator**: Create CSS gradients visually.
+  - **Favicon Generator**: Generate favicons for websites.
+  - **Image To Ico**: Convert images to ICO format.
+  - **Base64 Image Converter**: Convert images to Base64 strings.
+  - **HTML/Markdown**: Convert between HTML and Markdown, extract HTML content, convert files to Markdown.
+  - **YML/Properties Converter**: Convert between YAML and Properties files.
+  - **Number Base Converter**: Convert numbers between binary, octal, decimal, and hex.
+  - **Timestamp/Date**: Date calculator, Timestamp converter, Timezone converter.
+  - **Unicode/Encoding**: Unicode converter, Text encoding converter.
+- **Security & Text**:
+  - **Crypto Tools**: Hashing and encryption utilities.
+  - **Password Generator**: Generate secure passwords.
+  - **Regex Tester**: Test and debug regular expressions.
+  - **Text Tools**: Text processor, Text counter, Text space stripper.
+  - **Code Formatter**: Prettify code snippets.
+- **PDF & Docs**:
+  - **PDF Manager**: Manage PDF files.
+  - **PDF Converter**: Convert PDFs.
+  - **PDF Compressor**: Reduce PDF file size.
+- **Other**:
+  - **Icon Designer**: Design custom icons.
+  - **Simple DB Demo**: Demonstration of SQLite integration.
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+### 📋 JSON Tools
+Powerful tools for handling JSON data.
+- **JSON Editor**: Edit JSON data with a visual interface.
+- **JSON Formatter**: Format and beautify JSON strings.
+- **JSON Converter**: Convert JSON to other formats.
+- **JSON Extractor**: Extract specific data from JSON using paths.
+- **Excel <-> JSON**: Convert between Excel files (.xlsx) and JSON.
 
-## Expanding the ESLint configuration
+### 🎬 Media Tools
+Tools for working with images, video, and audio.
+- **Image Processing**:
+  - **Image Compressor**: Compress images to save space.
+  - **Image Watermark**: Add watermarks to images.
+  - **File Renamer**: Batch rename files.
+  - **Color Picker**: Pick and manage colors.
+  - **Image List Processor**: Process batches of images.
+- **GIF Tools**:
+  - **Gif Editor**: Edit GIF images.
+  - **Image to GIF**: Create GIFs from a sequence of images.
+  - **Video to GIF**: Convert video clips to GIF.
+- **Video**:
+  - **Video Image Converter**: Extract images from video.
+- **QR Code**: Generate and read QR codes.
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### 🧩 AS (Assistive/System) Tools
+Miscellaneous utilities for personal productivity and system interaction.
+- **Breathing Reminder**: A tool to remind you to take deep breaths.
+- **Click Counter**: Count mouse clicks.
+- **Typing Simulator**: Simulate typing effects.
+- **Mouse Track**: Track mouse movement.
+- **Day Of Week**: Calculate the day of the week for a date.
+- **Encouragement**: Get motivated!
+- **Identity Transformer**: (Tool description dependent on implementation).
+- **Text Copy Tool**: Helper for copying text.
+- **Power On/Empty Detectors**: System status utilities.
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+## 🛠️ Tech Stack
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+- **Framework**: [React 19](https://react.dev/)
+- **Build Tool**: [Vite 5](https://vitejs.dev/)
+- **Language**: [TypeScript](https://www.typescriptlang.org/)
+- **Desktop Runtime**: [Electron 31](https://www.electronjs.org/)
+- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/), [Ant Design 6](https://ant.design/)
+- **State Management**: [Zustand](https://github.com/pmndrs/zustand)
+- **Routing**: [React Router 7](https://reactrouter.com/)
+- **Database**: [Better SQLite3](https://github.com/WiseLibs/better-sqlite3)
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## 📦 Installation
+
+1.  **Clone the repository:**
+    ```bash
+    git clone <repository-url>
+    cd tools
+    ```
+
+2.  **Install dependencies:**
+    ```bash
+    npm install
+    # or
+    pnpm install
+    ```
+
+## 🏃‍♂️ Usage
+
+### Web Development
+To start the React development server (browser-only mode):
+```bash
+npm run dev
+```
+
+### Electron Development
+To start the application in Electron mode (desktop app):
+```bash
+npm run electron:dev
+```
+
+## 🏗️ Building
+
+### Web Build
+To build the project for the web (outputs to `dist/`):
+```bash
+npm run build
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+### Electron Build
+To package the application for the desktop (outputs to `dist-electron/` and installers):
+```bash
+npm run electron:build
 ```
+
+## 📂 Project Structure
+
+```text
+tools/
+├── electron/          # Electron main process code
+├── src/
+│   ├── app/tools/     # Tool logic/utilities
+│   ├── components/    # Reusable UI components
+│   ├── pages/         # Page components (entry points for tools)
+│   │   └── tools/     # Tool pages organized by category (AS, Json, Media, Web)
+│   ├── layouts/       # App layouts
+│   ├── hooks/         # Custom React hooks
+│   ├── router/        # Routing configuration
+│   ├── store/         # Global state (Zustand)
+│   └── utils/         # Helper functions
+├── public/            # Static assets
+└── ...config files
+```
+
+## 📄 License
+
+[MIT](LICENSE)
diff --git a/build/icon.ico b/build/icon.ico
diff --git a/build/icon.png b/build/icon.png
diff --git a/components.json b/components.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}
diff --git a/data/app.db b/data/app.db
diff --git a/data/app.db-shm b/data/app.db-shm
diff --git a/data/app.db-wal b/data/app.db-wal
diff --git a/electron-builder.json b/electron-builder.json
@@ -1,25 +1,46 @@
 {
-  "appId": "com.tools.app",
-  "productName": "Tools App",
+  "appId": "cn.codeemo.tools",
+  "productName": "Tools",
   "directories": {
-    "output": "dist-electron"
+    "output": "dist-electron",
+    "buildResources": "build"
   },
-  "files": ["dist/**/*", "electron/**/*", "package.json", "!node_modules"],
+  "extraResources": [
+    {
+      "from": "node_modules/axios/",
+      "to": "node_modules/axios/"
+    }
+  ],
+  "files": [
+    "dist/**/*",
+    "electron/**/*",
+    "public/**/*",
+    "package.json"
+  ],
+  "asar": true,
   "win": {
-    "target": ["nsis"],
+    "icon": "build/icon.ico",
+    "target": {
+      "target" : "nsis",
+      "arch": ["x64"]
+    },
     "artifactName": "${productName}-Windows-${version}-Setup.${ext}"
   },
   "nsis": {
     "oneClick": false,
     "perMachine": false,
     "allowToChangeInstallationDirectory": true,
-    "deleteAppDataOnUninstall": false
+    "deleteAppDataOnUninstall": false,
+    "installerIcon": "build/icon.ico",
+    "uninstallerIcon": "build/icon.ico"
   },
   "mac": {
+    "icon": "build/icon.png",
     "target": ["dmg"],
     "artifactName": "${productName}-Mac-${version}-Installer.${ext}"
   },
   "linux": {
+    "icon": "build/icon.png",
     "target": ["AppImage"],
     "artifactName": "${productName}-Linux-${version}.${ext}"
   }

diff --git a/electron/build.js b/electron/build.js
@@ -32,14 +32,24 @@ function runCommand(command, args, options = {}) {
   })
 }
 
-// Build and package the Electron app
-async function buildElectronApp() {
+// Build and package the Electron app for specific platform
+async function buildElectronApp(platform = null) {
   try {
-    console.log('Building Vue application...')
-    await runCommand('npm', ['run', 'build'])
+    console.log('Converting icon to ICO format...')
+    await runCommand('node', ['scripts/convert-icon.js'])
 
-    console.log('Packaging Electron application...')
-    await runCommand('npx', ['electron-builder'])
+    console.log('Building Vite application...')
+    await runCommand('npm', ['run', 'build-only'])
+
+    const builderArgs = ['electron-builder'];
+    if (platform) {
+      builderArgs.push('--' + platform);
+      console.log(`Packaging Electron application for ${platform.toUpperCase()}...`);
+    } else {
+      console.log('Packaging Electron application for all platforms...');
+    }
+
+    await runCommand('npx', builderArgs)
 
     console.log('Electron app built successfully!')
   } catch (error) {
@@ -48,5 +58,19 @@ async function buildElectronApp() {
   }
 }
 
+// Parse command line arguments to determine platform
+const args = process.argv.slice(2);
+let targetPlatform = null;
+
+if (args.length > 0) {
+  if (args.includes('--win') || args.includes('-w')) {
+    targetPlatform = 'win';
+  } else if (args.includes('--mac') || args.includes('-m')) {
+    targetPlatform = 'mac';
+  } else if (args.includes('--linux') || args.includes('-l')) {
+    targetPlatform = 'linux';
+  }
+}
+
 // Run the build process
-buildElectronApp()
+buildElectronApp(targetPlatform)