Rewrite the app with React, Typescript and new UI design

.github/workflows/build.yml

@@ -0,0 +1,75 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        os: [windows-latest, macos-latest, ubuntu-latest]
+        include:
+          - os: windows-latest
+            artifact_name: devtools-windows
+          - os: macos-latest
+            artifact_name: devtools-macos
+          - os: ubuntu-latest
+            artifact_name: devtools-linux
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build and package
+        run: npm run dist
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: devtools-${{ matrix.os }}
+          path: release/*
+          retention-days: 30
+
+  release:
+    needs: build
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/v')
+
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: release-artifacts
+
+      - name: Display structure of downloaded files
+        run: ls -R release-artifacts
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: release-artifacts/**/*
+          draft: false
+          prerelease: false
+          generate_release_notes: false
+          fail_on_unmatched_files: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -12,7 +12,6 @@ Offline-first developer utilities for macOS, Windows, and Linux. No cloud depend
 - **API Response Formatter** - Format REST/GraphQL responses with interactive tree view and real-time search
 - **Text Compare** - Diff viewer with line-by-line comparison
 - **Case Converter** - Transform between camelCase, snake_case, kebab-case, and more
-- **SQL Formatter** - Format SQL queries with customizable indentation
 - **Markdown Editor** - Live preview with export support
 - **Code Playground** - Multi-language editor (JS, HTML, CSS, JSON, Markdown)
 
@@ -27,19 +26,20 @@ Offline-first developer utilities for macOS, Windows, and Linux. No cloud depend
 
 ### Generators
 
-- **UUID** - Generate v1/v4 UUIDs with batch support
+- **UUID Generator** - Generate v1/v4/v6/v7 UUIDs and ULIDs with batch support
 - **Password Generator** - Generate secure passwords and passphrases with strength analysis
-- **Hash** - MD5, SHA-1, SHA-256, SHA-512
-- **QR Code** - Generate QR codes with custom size and error correction
+- **Hash Generator** - MD5, SHA-1, SHA-256, SHA-512
+- **QR Generator** - Generate QR codes with custom size and error correction
 - **Color Palette** - Create monochromatic, analogous, complementary schemes
-- **Lorem Ipsum** - Generate placeholder text
+- **Lorem Generator** - Generate placeholder text
 
 ### Developer Utilities
 
 - **JWT Decoder** - Decode and inspect JWT tokens
-- **Regex Builder** - Interactive regex construction with live testing
-- **Cron Parser** - Build cron expressions with plain English descriptions
+- **Regex Generator** - Interactive regex construction with live testing
+- **Cron Calculator** - Build cron expressions with plain English descriptions
 - **Timestamp Converter** - Unix timestamp conversion with multiple formats
+- **Date Difference** - Calculate difference between two dates
 - **Image Converter** - Convert between PNG, JPEG, WebP, BMP
 
 ## Quick Start
@@ -50,71 +50,82 @@ git clone https://github.com/me-shaon/devtools.git
 cd devtools
 npm install
 
-# Run locally
-npm start
+# Run locally (development mode)
+npm run dev
 
 # Build for distribution
 npm run dist
 ```
 
 ## Requirements
 
-- Node.js 14+
+- Node.js 18+
 - npm or yarn
 
 ## Architecture
 
 ```
 src/
-├── main.js              # Electron main process
-└── renderer/
-    ├── index.html       # Single-page application
-    ├── styles/          # CSS modules
-    └── js/
-        ├── main.js      # App router and state
-        └── tools/       # Tool implementations (23 modules)
+├── components/
+│   └── tools/       # Tool implementations (24 React components)
+├── app/
+│   └── DevToolsApp.tsx   # Main app with sidebar navigation
+└── main.tsx         # React entry point
+
+src-electron/
+├── main.ts          # Electron main process
+└── preload.ts       # Secure IPC bridge
 ```
 
-Each tool is a self-contained module with no external dependencies. All processing happens client-side.
+### Tech Stack
 
+- **Electron** 40+ for desktop runtime
+- **React** 18+ with TypeScript
+- **Vite** for fast builds and hot reload
+- **Tailwind CSS** for styling
+- **shadcn/ui** for UI components
+- No analytics or telemetry
 
 ## Development
 
-### Adding a Tool
+### Running in Development
 
-1. Create module in `src/renderer/js/tools/`
-2. Add HTML section in `index.html`
-3. Register in navigation sidebar
-4. Add menu item in `src/main.js`
+```bash
+npm run dev    # Starts Vite dev server + Electron
+```
 
 ### Build Scripts
 
 ```bash
-npm start          # Development server
-npm run build      # Build executable
-npm run pack       # Package without distributing
-npm run dist       # Create installer
-npm test           # Run test suite
-npm run security-check  # Run security checks
+npm run dev              # Development mode with hot reload
+npm run build            # Build React app + Electron
+npm run dist             # Create installers for all platforms
+npm run dist:publish     # Build and publish to GitHub releases
 ```
 
-## Security
+## Releases
+
+Releases are built automatically via GitHub Actions when you push a version tag:
 
-This project uses GitGuardian for secret detection and follows security best practices:
+```bash
+# Create and push a version tag
+git tag v1.0.0
+git push origin v1.0.0
+```
 
-- 🔒 **Secret Scanning**: Automated detection of hardcoded secrets
-- 🛡️ **Pre-commit Hooks**: Prevent secrets from being committed
-- 📋 **Security Guidelines**: See [SECURITY.md](SECURITY.md) for details
-- 🔧 **Local Testing**: Run `npm run security-check` before committing
+The workflow will:
+1. Build for Windows, macOS, and Linux
+2. Create a GitHub release
+3. Attach all installer files (DMG, NSIS, AppImage)
 
-For security issues, please review our [Security Guidelines](SECURITY.md).
+See [RELEASE.md](RELEASE.md) for detailed release instructions.
 
-## Tech Stack
+## Adding a Tool
 
-- Electron 22+ for desktop runtime
-- Vanilla JavaScript (ES6+)
-- No framework dependencies
-- No analytics or telemetry
+1. Create component in `src/components/tools/YourTool.tsx`
+2. Add tool definition to `ALL_TOOLS` array in `src/app/DevToolsApp.tsx`
+3. Add render case in the `renderTool()` switch statement
+4. That's it! The tool will appear in the sidebar automatically
 
 ## Contributing
 
@@ -128,10 +139,9 @@ Pull requests welcome. For major changes, open an issue first to discuss the pro
 
 ```bash
 git clone https://github.com/me-shaon/devtools.git
-cd devtools-desktop
+cd devtools
 npm install
-npm start  # Run in development mode
-npm test   # Run test suite
+npm run dev  # Run in development mode
 ```
 
 ## License

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

dist-electron/main.js

@@ -0,0 +1,95 @@
+// src-electron/main.ts
+import { app, BrowserWindow, dialog, shell } from "electron";
+import path from "path";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+import electronUpdater from "electron-updater";
+var { autoUpdater } = electronUpdater;
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = dirname(__filename);
+var win = null;
+var isDev = !app.isPackaged;
+function createWindow() {
+  win = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    backgroundColor: "#191919",
+    show: false,
+    webPreferences: {
+      preload: path.join(__dirname, "preload.js"),
+      contextIsolation: true,
+      nodeIntegration: false,
+      webSecurity: true
+    }
+  });
+  win.once("ready-to-show", () => {
+    win?.show();
+  });
+  const url = isDev ? "http://localhost:8080" : `file://${path.join(__dirname, "../dist/index.html")}`;
+  win.loadURL(url);
+  if (isDev) {
+    win.webContents.openDevTools();
+  }
+  win.webContents.setWindowOpenHandler(({ url: url2 }) => {
+    shell.openExternal(url2);
+    return { action: "deny" };
+  });
+  win.on("closed", () => {
+    win = null;
+  });
+}
+function createTray() {
+  const trayIconPath = path.join(__dirname, "assets/tray.png");
+}
+app.whenReady().then(() => {
+  createWindow();
+  createTray();
+  if (!isDev) {
+    autoUpdater.checkForUpdates();
+  }
+});
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+app.on("activate", () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+autoUpdater.autoDownload = false;
+autoUpdater.setFeedURL({
+  provider: "github",
+  owner: "me-shaon",
+  repo: "devtools"
+});
+autoUpdater.on("update-available", () => {
+  dialog.showMessageBox({
+    type: "info",
+    title: "Update available",
+    message: "A new version of DevTools is available. Update now?",
+    buttons: ["Update", "Later"]
+  }).then((result) => {
+    if (result.response === 0) {
+      autoUpdater.downloadUpdate();
+    }
+  });
+});
+autoUpdater.on("update-not-available", () => {
+});
+autoUpdater.on("update-downloaded", () => {
+  dialog.showMessageBox({
+    type: "info",
+    title: "Update ready",
+    message: "Restart to install update?",
+    buttons: ["Restart", "Later"]
+  }).then((result) => {
+    if (result.response === 0) {
+      autoUpdater.quitAndInstall();
+    }
+  });
+});
+autoUpdater.on("error", (error) => {
+  console.error("Auto-updater error:", error);
+});

dist-electron/preload.js

@@ -0,0 +1,25 @@
+// src-electron/preload.ts
+import { contextBridge, ipcRenderer } from "electron";
+contextBridge.exposeInMainWorld("electronAPI", {
+  invoke: (channel, ...args) => {
+    const validChannels = ["app-version", "get-path"];
+    if (validChannels.includes(channel)) {
+      return ipcRenderer.invoke(channel, ...args);
+    }
+    return Promise.reject(new Error(`Channel ${channel} is not allowed`));
+  },
+  on: (channel, callback) => {
+    const validChannels = ["update-available", "update-downloaded"];
+    if (validChannels.includes(channel)) {
+      const subscription = (_event, ...args) => callback(...args);
+      ipcRenderer.on(channel, subscription);
+      return () => {
+        ipcRenderer.removeListener(channel, subscription);
+      };
+    }
+    return () => {
+    };
+  },
+  platform: process.platform,
+  version: process.versions.electron
+});