feat: implement tab reordering feature

CHANGELOG/README.md

@@ -0,0 +1,23 @@
+# Changelog
+
+This directory contains the changelog for each release version of JSONP. Each file represents a specific release and its associated changes.
+
+## Release History
+
+1. v1.0.0 (96c3049) - Initial release
+2. v1.1.0 (bc6a659) - Feature additions
+3. v1.2.0 (77e1aa1) - Enhancements
+4. v1.3.0 (c2b3f3e) - Major updates
+5. v1.4.0 (1689dab) - New features
+6. v1.5.0 (fee4e58) - Improvements
+7. v1.6.0 (74741a8) - Feature additions
+8. v1.7.0 (444b22a) - Enhancements
+9. v1.8.0 (95529d1) - Updates
+10. v1.9.0 (9481e49) - New features
+11. v1.10.0 (c9176bd) - Major improvements
+12. v1.11.0 (dcceba8) - Feature additions
+13. v1.12.0 (1cc33a1) - Enhancements
+14. v1.13.0 (f779cd8) - Latest updates
+15. v1.14.0 (aa31b10) - Tab Reordering Feature
+
+Each version has its own changelog file with detailed information about the changes.

CHANGELOG/v1.0.0.md

@@ -0,0 +1,9 @@
+# v1.0.0 (96c3049)
+
+Initial release of JSONP - Multi tab JSON toolkit
+
+### Features
+- Base design for JSON preview
+- Initial JSON formatting functionality
+- Basic tree view implementation
+- JSON validation

CHANGELOG/v1.1.0.md

@@ -0,0 +1,6 @@
+# v1.1.0 (bc6a659)
+
+### Features
+- Added multi-tab support
+- Tab management system
+- Ability to work with multiple JSON documents simultaneously

CHANGELOG/v1.10.0.md

@@ -0,0 +1,6 @@
+# v1.10.0 (c9176bd)
+
+### Features
+- Added copy button to all features
+- Enhanced user interaction capabilities
+- Improved clipboard functionality

CHANGELOG/v1.11.0.md

@@ -0,0 +1,6 @@
+# v1.11.0 (dcceba8)
+
+### Features
+- Added coloration on JSON tree view
+- Improved design for tree view
+- Enhanced visual representation of JSON structure

CHANGELOG/v1.12.0.md

@@ -0,0 +1,10 @@
+# v1.12.0 (1cc33a1)
+
+### Features
+- Added Python dictionary to JSON converter
+- Added JSON to Python dictionary converter
+- Enhanced conversion capabilities
+
+### Documentation
+- Added Code of Conduct
+- Created Contributing Guidelines

CHANGELOG/v1.13.0.md

@@ -0,0 +1,11 @@
+# v1.13.0 (f779cd8)
+
+### Features
+- Added mock data generator
+- Implemented Faker.js integration
+- Enhanced data generation capabilities
+
+### Bug Fixes
+- Fixed text overflow on preview screen of JSON formatter in raw view
+- Added favicon
+- Added logo.svg format

CHANGELOG/v1.14.0.md

@@ -0,0 +1,6 @@
+# v1.14.0 (aa31b10)
+
+### Features
+- Implemented tab reordering functionality
+- Added drag-and-drop support for tabs
+- Enhanced tab management system with reordering capabilities

CHANGELOG/v1.2.0.md

@@ -0,0 +1,11 @@
+# v1.2.0 (77e1aa1)
+
+### Features
+- Added search functionality
+- Implemented JSON search feature
+- Search within raw JSON content
+- Tree preview improvements
+
+### Bug Fixes
+- Fixed tree preview hidden class
+- Fixed multiple tab switch failure for tab 1

CHANGELOG/v1.3.0.md

@@ -0,0 +1,9 @@
+# v1.3.0 (c2b3f3e)
+
+### Features
+- Added editable tab names
+- Tab name customization support
+
+### Documentation
+- Updated documentation for tab name editing feature
+- Fixed name title in documentation

CHANGELOG/v1.4.0.md

@@ -0,0 +1,10 @@
+# v1.4.0 (1689dab)
+
+### Features
+- Added local storage persistence
+- Data persistence across browser sessions
+- Improved state management
+
+### Other Changes
+- Added issue templates
+- Various documentation improvements

CHANGELOG/v1.5.0.md

@@ -0,0 +1,10 @@
+# v1.5.0 (fee4e58)
+
+### Features
+- Added dark mode support
+- Implemented JSON upload/download per tab
+- Enhanced UI/UX improvements
+
+### Bug Fixes
+- Fixed tab selection logic
+- Resolved tab issues with localStorage

CHANGELOG/v1.6.0.md

@@ -0,0 +1,9 @@
+# v1.6.0 (74741a8)
+
+### Features
+- Added close tabs functionality
+- Implemented tab color customization
+- Enhanced tab management system
+
+### Bug Fixes
+- Fixed styling issues for tabs

CHANGELOG/v1.7.0.md

@@ -0,0 +1,9 @@
+# v1.7.0 (444b22a)
+
+### Features
+- Added code generation functionality
+- Implemented JSON comparison (diff checker)
+- Enhanced tooltip for tab names
+
+### Documentation
+- Updated documentation for new features

CHANGELOG/v1.8.0.md

@@ -0,0 +1,9 @@
+# v1.8.0 (95529d1)
+
+### Features
+- Major refactoring: separated design, logic, and template
+- Added "Made with Love" tag
+- Improved overall code organization
+
+### Documentation
+- Enhanced documentation structure

CHANGELOG/v1.9.0.md

@@ -0,0 +1,9 @@
+# v1.9.0 (9481e49)
+
+### Features
+- Added missing CSS for tree formatting
+- Enhanced tree view styling
+
+### Improvements
+- Overall UI/UX enhancements
+- Better visual hierarchy

README.md

@@ -1,4 +1,4 @@
-<h1 align="center">JSONP - Multi tab JSON toolkit</h1>
+# JSONP - Multi tab JSON toolkit
 
 <p align="center">
   A versatile web-based toolkit for working with JSON data. Open-source and works offline!
@@ -12,22 +12,38 @@
 
 - **Core Tools**
   - 🧹 JSON Formatter & Validator
+    - Multi-tab support with color coding
+    - Tree view with expandable nodes
+    - Search functionality
+    - Error highlighting
   - 🔍 JSON Comparison (diff checker)
-  - 💻 Code Generation (TypeScript, Python, Go)
-  - 🐍 Python - json-to-dict and dict-to-json
-  - 🧪 Mock Data Generator (with Faker support)
+    - Side-by-side diff view
+    - Multi-tab support
+  - 💻 Code Generation
+    - TypeScript interfaces
+    - Python dataclasses
+    - Go structs
+  - 🐍 Python - json-to-dict and dict-to-json converter
+  - 🧪 Mock Data Generator
+    - Faker.js integration
+    - JSON/CSV export
+    - Table/JSON view modes
+    - Customizable schemas
+    - Built-in presets
 
 - **Workflow**
-  - 📑 Multi-tab interface
+  - 📑 Multi-tab interface with drag-and-drop reordering
   - 🌓 Dark/Light mode toggle
   - ⌨️ Keyboard shortcuts
   - 💾 Automatic local saving
+  - 🔄 Real-time previews
 
 - **Convenience**
   - 📤📥 Import/Export JSON files
   - 🌐 Browser-based (no install needed)
-  - 🔄 Real-time previews
+  - 🔄 Real-time validation
   - 🚦 Error highlighting
+  - 📋 Copy/paste support
 
 ## 🚧 Planned Features
 
@@ -48,6 +64,10 @@
 
 > **Note**: All data stays local - nothing is uploaded to servers
 
+## 📝 Changelog
+
+For a detailed list of changes and version history, please see the [CHANGELOG](./CHANGELOG/README.md) directory.
+
 ## 🤝 Contributing
 
 We welcome contributions! Please see:

index.css

@@ -583,4 +583,19 @@ body.dark-mode .markdown-preview pre::-webkit-scrollbar {
 body.dark-mode .markdown-preview pre::-webkit-scrollbar-thumb {
     background-color: #555;
     border-radius: 4px;
-}
+}
+
+/* Tab reordering css  */
+.tab-button.dragging {
+    opacity: 0.5;
+    border: 2px dashed #007bff;
+}
+
+.tab-button {
+    transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.tab-button.drag-over {
+    transform: translateY(2px) scale(1.02);
+    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
+}

index.js

@@ -105,6 +105,11 @@ function loadGlobalState() {
         createCodegenTabWithData(tabData);
     });
     if (state.codegen.activeTab) switchCodegenTab(state.codegen.activeTab);
+
+    enableTabReordering("formatter-tabs-container");
+    enableTabReordering("compare-tabs-container");
+    enableTabReordering("codegen-tabs-container");
+
 }
 
 /* ========== COPY FUNCTIONS ========== */
@@ -241,6 +246,8 @@ function createFormatterTab(tabData = null) {
     textarea.addEventListener("blur", () => autoFormatTextarea(textarea));
     textarea.addEventListener("input", () => updateFormatterPreview(tabId));
     updateFormatterPreview(tabId);
+    enableTabReordering("formatter-tabs-container");
+
 }
 
 function switchFormatterTab(tabId) {
@@ -418,6 +425,8 @@ function createCompareTab() {
     rightTA.addEventListener("paste", () => setTimeout(() => autoFormatTextarea(rightTA), 100));
     rightTA.addEventListener("blur", () => autoFormatTextarea(rightTA));
     saveGlobalState();
+    enableTabReordering("compare-tabs-container");
+
 }
 // Create Compare tab using saved data
 function createCompareTabWithData(tabData) {
@@ -454,6 +463,8 @@ function createCompareTabWithData(tabData) {
     rightTA.addEventListener("paste", () => setTimeout(() => autoFormatTextarea(rightTA), 100));
     rightTA.addEventListener("blur", () => autoFormatTextarea(rightTA));
     saveGlobalState();
+    enableTabReordering("compare-tabs-container");
+
 }
 
 function switchCompareTab(tabId) {
@@ -628,6 +639,8 @@ function createCodegenTabWithData(tabData) {
     textarea.addEventListener("paste", () => setTimeout(() => autoFormatTextarea(textarea), 100));
     textarea.addEventListener("blur", () => autoFormatTextarea(textarea));
     saveGlobalState();
+    enableTabReordering("codegen-tabs-container");
+
 }
 
 function switchCodegenTab(tabId) {
@@ -1184,15 +1197,15 @@ function downloadFile(content, filename, type) {
     a.click();
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
-  }
+}
 
-  let userInputValue = ""; // This variable will store filename input from user using the following event listener:
+let userInputValue = ""; // This variable will store filename input from user using the following event listener:
+
+document.getElementById("userInput").addEventListener("input", function (e) {
+    userInputValue = e.target.value;
+    //console.log("Saved input:", userInputValue); // Optional: see it live
+});
 
-  document.getElementById("userInput").addEventListener("input", function (e) {
-      userInputValue = e.target.value;
-      //console.log("Saved input:", userInputValue); // Optional: see it live
-  });
-
 function exportMockOutput(format = "json") {
     if (!Array.isArray(latestMockData) || latestMockData.length === 0) {
         console.error("No data available to export.");
@@ -1313,6 +1326,51 @@ document.addEventListener("keydown", (e) => {
         if (modal.style.display === "block") toggleShortcutModal();
     }
 });
+
+/* ========== Tab reordering ========== */
+function enableTabReordering(containerId) {
+    const container = document.getElementById(containerId);
+    const tabButtons = container.querySelectorAll(".tab-button[data-tab]");
+
+    tabButtons.forEach((button) => {
+        button.draggable = true;
+
+        button.addEventListener("dragstart", (e) => {
+            e.dataTransfer.setData("text/plain", button.getAttribute("data-tab"));
+            button.classList.add("dragging");
+        });
+
+        button.addEventListener("dragend", () => {
+            button.classList.remove("dragging");
+            container.querySelectorAll(".tab-button").forEach(b => b.classList.remove("drag-over"));
+        });
+
+        button.addEventListener("dragover", (e) => {
+            e.preventDefault();
+            button.classList.add("drag-over");
+        });
+
+        button.addEventListener("dragleave", () => {
+            button.classList.remove("drag-over");
+        });
+
+        button.addEventListener("drop", (e) => {
+            e.preventDefault();
+            const draggedId = e.dataTransfer.getData("text/plain");
+            const draggedBtn = container.querySelector(`[data-tab="${draggedId}"]`);
+
+            button.classList.remove("drag-over");
+
+            if (draggedBtn && draggedBtn !== button) {
+                container.insertBefore(draggedBtn, button);
+                saveGlobalState();
+            }
+        });
+    });
+}
+
+
+
 /* ========== Initialization ========== */
 window.addEventListener("load", () => {
     loadGlobalState();