Wiring in majority of minimap-view Part 2; Fixing keybinding select and move of session; moved modals around

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 { TabsService } from '../../services/editor/tabs/tabs.service';
+import { FilesModalService } from "../../../services/editor/modals/files-modal.service";
+import { TabsService } from '../../../services/editor/tabs/tabs.service';
 
-import { ServiceMessage } from '../../types/service-message.type';
+import { ServiceMessage } from '../../../types/service-message.type';