refactor: clean up code

Author: danivek

README.md

@@ -61,6 +61,13 @@ Switch to **Split Mode** from the header. Use the **→** button on the left pan
 
 Switch to **Compare Mode**. The left and right editor contents are loaded into a Monaco Diff Editor. A change summary panel below the diff view lists all additions, deletions, and modifications.
 
+### JSON Schema
+
+Switch to **JSON Schema Mode**. The left editor contains your main JSON payload, and the right editor contains the JSON Schema.
+
+- **Validate:** The payload is validated against the schema in real-time, with errors shown in a dedicated panel below.
+- **Generate:** Click **Generate Schema** to automatically build a valid JSON Schema based on your current JSON payload.
+
 ### Querying JSON
 
 Switch to **Query Mode**. The current active editor content is loaded into the input panel. Choose your query engine ([JMESPath](https://jmespath.org/), [JSONPath Plus](https://github.com/JSONPath-Plus/JSONPath), or [JSONQuery](https://github.com/jsonquerylang/jsonquery)) and type your expression — results update automatically as you type, and the transformation is applied to the main editor live.

eslint.config.js

@@ -31,6 +31,10 @@ export default [
         ShareUtils: 'readonly',
         StorageUtils: 'readonly',
         SchemaUtils: 'readonly',
+        DomUtils: 'readonly',
+        CompareController: 'readonly',
+        QueryController: 'readonly',
+        SchemaController: 'readonly',
       },
     },
     rules: {

src/css/styles.css

@@ -451,14 +451,6 @@ body {
 }
 
 /* Tree View */
-.tree-toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-md);
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border);
-}
 
 .tree-container {
   flex: 1;
@@ -548,9 +540,6 @@ body {
   display: block;
 }
 
-.tree-node.highlight>.tree-node-header {
-  background: var(--color-accent-light);
-}
 
 /* Context Menu */
 .context-menu {
@@ -894,16 +883,6 @@ body {
   min-height: 32px;
 }
 
-.btn-success {
-  background: var(--color-success);
-  border-color: var(--color-success);
-  color: white;
-}
-
-.btn-success:hover {
-  background: #059669;
-  /* Darker green */
-}
 
 /* Status Bar */
 .status-bar {
@@ -1095,31 +1074,6 @@ body {
   color: var(--color-text-primary);
 }
 
-/* Drag and Drop Overlay */
-.drop-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(79, 70, 229, 0.1);
-  border: 3px dashed var(--color-accent);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 999;
-  pointer-events: none;
-}
-
-.drop-overlay.hidden {
-  display: none;
-}
-
-.drop-overlay-text {
-  font-size: var(--font-size-xl);
-  font-weight: 600;
-  color: var(--color-accent);
-  background: var(--color-bg-primary);
-  padding: var(--space-lg) var(--space-xl);
-  border-radius: var(--radius-lg);
-}
 
 /* Scrollbar Styling */
 ::-webkit-scrollbar {

src/index.html

@@ -49,8 +49,8 @@ <h1>JSONLab</h1>
                 <button id="btn-mode-query" class="btn btn-secondary" title="Query JSON">
                     <i data-lucide="search-code" class="icon"></i> Query
                 </button>
-                <button id="btn-mode-schema" class="btn btn-secondary" title="JSON Schema Gen/Val">
-                    <i data-lucide="file-json" class="icon"></i> JSON Schema
+                <button id="btn-mode-schema" class="btn btn-secondary" title="JSON Schema Validation">
+                    <i data-lucide="file-check" class="icon"></i> JSON Schema
                 </button>
                 <div class="toolbar-divider"></div>
                 <button id="btn-share-global" class="btn btn-secondary" title="Share Workspace as URL Snippet">
@@ -204,14 +204,14 @@ <h1>JSONLab</h1>
             <div id="schema-panel" class="editor-panel schema-panel">
                 <div id="schema-editors-container" class="editors-container"
                     style="display: flex; flex: 1; min-height: 0; flex-direction: row;">
-                    <div id="schema-input-container" class="editor-wrapper"
+                    <div id="schema-payload-container" class="editor-wrapper"
                         style="flex: 1; display: flex; flex-direction: column; min-width: 0; border-right: none;">
                         <div class="panel-header"
                             style="background: var(--color-bg-secondary); padding: 8px 16px; border-bottom: 1px solid var(--color-border); font-weight: 600; font-size: 13px;">
                             JSON Payload</div>
                     </div>
                     <div id="schema-splitter" class="editor-splitter" style="display: flex;"></div>
-                    <div id="schema-output-container" class="editor-wrapper"
+                    <div id="schema-jsonschema-container" class="editor-wrapper"
                         style="flex: 1; display: flex; flex-direction: column; min-width: 0;">
                         <div class="panel-header"
                             style="background: var(--color-bg-secondary); padding: 8px 16px; border-bottom: 1px solid var(--color-border); font-weight: 600; font-size: 13px;">
@@ -379,18 +379,21 @@ <h2>CSV Options</h2>
 
     <!-- App Scripts -->
     <script type="module" src="js/utils/storageUtils.js"></script>
+    <script type="module" src="js/utils/domUtils.js"></script>
     <script type="module" src="js/utils/jsonUtils.js"></script>
     <script type="module" src="js/utils/csvUtils.js"></script>
     <script type="module" src="js/utils/diffUtils.js"></script>
     <script type="module" src="js/utils/queryUtils.js"></script>
     <script type="module" src="js/utils/shareUtils.js"></script>
     <script type="module" src="js/utils/schemaUtils.js"></script>
+    <script type="module" src="js/app/CompareController.js"></script>
+    <script type="module" src="js/app/QueryController.js"></script>
+    <script type="module" src="js/app/SchemaController.js"></script>
     <script type="module" src="js/editor/textEditor.js"></script>
     <script type="module" src="js/editor/treeView.js"></script>
     <script type="module" src="js/editor/tableView.js"></script>
     <script type="module" src="js/ui/theme.js"></script>
     <script type="module" src="js/ui/modal.js"></script>
-    <script type="module" src="js/ui/toolbar.js"></script>
     <script type="module" src="js/ui/editorToolbar.js"></script>
     <script type="module" src="js/editor/jsonEditor.js"></script>
     <script type="module" src="js/app.js"></script>