Fixing keybinding select and move of session; moved modals around; cleanup

package.json

@@ -45,6 +45,7 @@
         "@angular/forms": "19.2.0",
         "@angular/platform-browser": "19.2.0",
         "ace-builds": "1.41.0",
+        "ace-diff": "3.0.3",
         "ace-linters": "1.5.3",
         "bootstrap": "5.3.6",
         "bootstrap-icons": "1.12.1",
@@ -73,7 +74,7 @@
         "karma-coverage": "2.2.0",
         "karma-jasmine": "5.1.0",
         "karma-jasmine-html-reporter": "2.1.0",
-        "typescript": "5.7.2",
+        "tslib": "2.3.0",
-        "tslib": "2.3.0"
+        "typescript": "5.7.2"
     }
 }

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { InfoBarComponent } from './editor/info-bar/info-bar.component';
 import { TabsComponent } from './editor/tabs/tabs.component';
 import { EditorsComponent } from './editor/editors.component';
-import { FilesModalComponent } from "./common/components/modals/files-modal.component";
+import { FilesModalComponent } from "./common/components/modals/files/files-modal.component";
 
 
 

src/app/common/components/modals/diffs/diff-modal.component.html

@@ -0,0 +1,28 @@
+<div #diffModal
+    id="diffModal" class="modal fade" tabindex="-1" role="dialog"
+>
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Diff:</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+
+            <div class="modal-body">
+                <div class="row">
+
+                    <div class="col">
+
+                        <div class="diff-view"></div>
+
+                    </div>
+
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/common/components/modals/diffs/diff-modal.component.ts

@@ -0,0 +1,69 @@
+import { Component, inject } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { Subject, takeUntil } from 'rxjs';
+
+import * as bootstrap from "bootstrap";
+
+import AceDiff from 'ace-diff';
+
+import 'ace-diff/dist/ace-diff.min.css';
+import 'ace-diff/dist/ace-diff-dark.min.css';
+
+
+
+@Component({
+    selector: 'diff-modal',
+    standalone: true,
+    imports: [
+        CommonModule
+    ],
+    templateUrl: './diff-modal.component.html',
+    styleUrl: './diff-modal.component.css',
+    host: {
+        'class': ''
+    }
+})
+export class DiffModalComponent {
+
+    diffModal!: bootstrap.Modal;
+
+
+    constructor() {
+    }
+
+
+    private ngAfterViewInit(): void {
+        this.loadDiffView();
+        this.loadSubscribers();
+    }
+
+    private loadDiffView() {
+        // Notes:  https://github.com/ace-diff/ace-diff
+        //  https://ajaxorg.github.io/ace-api-docs/classes/src_ext_diff_diff_view.DiffView.html#scrollB
+        /*
+        const differ = new AceDiff({
+            ace: window.ace
+                element: '.diff-view',
+            left: {
+                content: 'your first file content here',
+            },
+            right: {
+                content: 'your second file content here',
+            },
+        });
+        */
+    }
+
+    private loadSubscribers() {
+    }
+
+    private createModal() {
+        this.diffModal = new bootstrap.Modal("#diffModal", {});
+    }
+
+    public showModal() {
+        this.diffModal?.toggle();
+    }
+
+}

src/app/common/components/modals/files/files-modal.component.css

@@ -0,0 +1,16 @@
+.modal-column {
+    min-height: 24em;
+    max-height: 24em;
+    overflow: auto;
+}
+
+.close-button {
+    background: rgba(116, 0, 0, 0.64);
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.64);
+    border-width: 1px;
+}
+
+.close-button:hover {
+    background: rgba(256, 0, 0, 0.64);
+}

src/app/common/components/modals/files/files-modal.component.ts

@@ -5,10 +5,10 @@ import { Subject, takeUntil } from 'rxjs';
 
 import * as bootstrap from "bootstrap";
 
-import { FilesModalService } from "../../services/editor/modals/files-modal.service";
+import { FilesModalService } from "../../../services/editor/modals/files-modal.service";
-import { TabsService } from '../../services/editor/tabs/tabs.service';
+import { TabsService } from '../../../services/editor/tabs/tabs.service';
 
-import { ServiceMessage } from '../../types/service-message.type';
+import { ServiceMessage } from '../../../types/service-message.type';
 
 
 

src/app/common/configs/editor.config.ts

@@ -10,6 +10,7 @@ export const EditorSettings: any = {
         theme: "ace/theme/gruvbox",
         mode: "ace/mode/text",
         printMarginColumn: 80,
+        enableCodeLens: true,
         enableBasicAutocompletion: true,
         enableLiveAutocompletion: true,
         enableSnippets: true,

src/app/common/services/editor/editors.service.ts

@@ -45,11 +45,11 @@ export class EditorsService {
 
         this.editors.set(uuid, component);
 
-        if (Object.keys(this.editors).length < 1) return;
+        if (Array.from(this.editors.keys()).length <= 1) return;
 
+        let _editors    = this.getEditorsAsArray();
         let leftEditor  = null;
         let rightEditor = null;
-        let _editors    = this.getEditorsAsArray();
 
         for (let i = 0; i < _editors.length; i++) {
             if (_editors[i].uuid !== uuid) continue;

src/app/editor/code-view/view.base.ts

@@ -155,6 +155,15 @@ export class CodeViewBase {
         this.editor.renderer.showLineNumbers = false;
         this.editor.renderer.setShowGutter(false);
 
+/*
+        this.editor.on("click", (event) => {
+            let editorComponent = this.editorsService.getActiveEditorComponent();
+        });
+
+        this.editor.session.on("changeScrollTop", (event) => {
+        });
+*/
+
         this.editor.setReadOnly(true);
         this.editor.setFontSize(2);
         this.editor.setHighlightActiveLine(false);