Added preliminary files modal; fixed tabs scroll issue; fixed missing build deps

newton/main.js

@@ -50,7 +50,7 @@ app.whenReady().then(async () => {
     createWindow();
 
     newton.fs.setWindow(window);
-    newton.fs.ipc.setWindow(window);
+    newton.ipc.setWindow(window);
 
 });
  
@@ -86,4 +86,4 @@ process.on('unhandledRejection', function(error = {}) {
     if (error.stack != null) {
         console.log(error.stack);
     }
-});
+});

package.json

@@ -24,8 +24,7 @@
         "icon": "./icos/",
         "files": [
             "newton/",
-            "build/",
-            "!node_modules/"
+            "build/"
         ],
         "mac": {
             "category": "public.app-category.developer-tools"
@@ -83,4 +82,4 @@
         "karma-jasmine-html-reporter": "2.1.0",
         "typescript": "5.7.2"
     }
-}
+}

src/app/common/services/editor/modals/files-modal.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { ReplaySubject, Observable } from 'rxjs';
+
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FilesModalService {
+    private showFilesModalSubject: ReplaySubject<null> = new ReplaySubject<null>(1);
+    private addFileSubject: ReplaySubject<string>  = new ReplaySubject<string>(1);
+
+
+    constructor() {
+    }
+
+
+    showFilesModal(): void {
+        this.showFilesModalSubject.next(null);
+    }
+
+    showFilesModalRequested$(): Observable<null> {
+        return this.showFilesModalSubject.asObservable();
+    }
+
+    addFileToModal(data: string): void {
+        this.addFileSubject.next(data);
+    }
+
+    addFileToModalRequested$(): Observable<string> {
+        return this.addFileSubject.asObservable();
+    }
+
+}

src/app/editor/editors.component.html

@@ -35,4 +35,6 @@
         </div>
     </div>
 
+    <files-modal></files-modal>
+
 <div>

src/app/editor/editors.component.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, ViewChild, TemplateRef, ComponentRef, ViewContai
 import { Subject, takeUntil } from 'rxjs';
 
 import { NewtonEditorComponent } from "./newton-editor/newton-editor.component";
+import { FilesModalComponent } from "./modals/files-modal.component";
 import { EditorsService } from '../common/services/editor/editors.service';
 import { FilesService } from '../common/services/editor/files.service';
 
@@ -15,7 +16,8 @@ import { ServiceMessage } from '../common/types/service-message.type';
     selector: 'editors',
     standalone: true,
     imports: [
-        DndDirective
+        DndDirective,
+        FilesModalComponent
     ],
     templateUrl: './editors.component.html',
     styleUrl: './editors.component.css',

src/app/editor/modals/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/editor/modals/files-modal.component.html

@@ -0,0 +1,52 @@
+<div #filesModal
+    id="filesModal" 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">Files:</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="row">
+                            <div class="col modal-column">
+
+                                <div #filesList *ngFor="let file of files" class="row">
+                                    <div class="col-11 title"
+                                        title="{{file.path}}"
+                                        uuid="{{file.uuid}}"
+                                        path="{{file.path}}"
+                                    >
+                                        {{file.title}}
+                                    </div>
+                                    <div class="col-1 close-button">
+                                        X
+                                    </div>
+                                </div>
+
+                            </div>
+
+                        </div>
+
+                        <div class="row">
+                            <input #filesSearch type="text" placeholder="Search..." />
+                        </div>
+
+                    </div>
+
+                    <div class="col modal-column">
+                    </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/editor/modals/files-modal.component.ts

@@ -0,0 +1,85 @@
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { Subject, takeUntil } from 'rxjs';
+
+import * as bootstrap from "bootstrap";
+
+import { FilesModalService } from "../../common/services/editor/modals/files-modal.service";
+import { TabsService } from '../../common/services/editor/tabs/tabs.service';
+
+import { ServiceMessage } from '../../common/types/service-message.type';
+
+
+
+@Component({
+    selector: 'files-modal',
+    standalone: true,
+    imports: [
+        CommonModule
+    ],
+    templateUrl: './files-modal.component.html',
+    styleUrl: './files-modal.component.css',
+    host: {
+        'class': ''
+    }
+})
+export class FilesModalComponent {
+    private unsubscribe = new Subject<void>();
+
+    filesModal!: bootstrap.Modal;
+    files: any[] = [];
+
+
+    constructor(
+        private filesModalService: FilesModalService,
+        private tabsService: TabsService
+    ) {
+    }
+
+
+    public ngAfterViewInit(): void {
+        this.loadSubscribers();
+    }
+
+    loadSubscribers() {
+        this.tabsService.getData$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((data: ServiceMessage) => {
+            if (data.action === "create-tab") {
+                this.createFileRow(data.message, data.uuid, data.data);
+            }
+        });
+
+        this.filesModalService.showFilesModalRequested$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe(() => {
+            if (!this.filesModal) {
+                this.createModal();
+            }
+
+            this.showModal();
+        });
+
+        this.filesModalService.addFileToModalRequested$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((uuid: string) => {
+            if (!this.filesModal) {
+                this.createModal();
+            }
+        });
+    }
+
+    private createFileRow(title: string, uuid: string, path: string): void {
+        this.files.push({title: title, path: path, uuid: uuid})
+    }
+
+    createModal() {
+        this.filesModal = new bootstrap.Modal("#filesModal", {});
+    }
+
+    showModal() {
+        this.filesModal?.toggle();
+    }
+
+}

src/app/editor/newton-editor/newton-editor.component.ts

@@ -9,8 +9,9 @@ import "ace-builds/src-noconflict/theme-one_dark";
 import "ace-builds/src-noconflict/theme-dracula";
 
 import { InfoBarService } from '../../common/services/editor/info-bar/info-bar.service';
-import { EditorsService } from '../../common/services/editor/editors.service';
+import { FilesModalService } from '../../common/services/editor/modals/files-modal.service';
 import { LSPService } from '../../common/services/lsp.service';
+import { EditorsService } from '../../common/services/editor/editors.service';
 
 import { NewtonEditorBase } from './newton-editor.base';
 
@@ -33,7 +34,8 @@ export class NewtonEditorComponent extends NewtonEditorBase {
     constructor(
         private infoBarService: InfoBarService,
         private editorsService: EditorsService,
-        private lspService: LSPService
+        private lspService: LSPService,
+        private filesModalService: FilesModalService
     ) {
         super();
     }
@@ -174,6 +176,13 @@ export class NewtonEditorComponent extends NewtonEditorBase {
                      this.saveFileAs();
                  },
                  readOnly: false
+            }, {
+                 name: "showModal",
+                 bindKey: {win: "ctrl-b", mac: "ctrl-b"},
+                 exec: () => {
+                     this.filesModalService.showFilesModal();
+                 },
+                 readOnly: false
             }
         ]);
 

src/app/editor/tabs/tabs.component.css

@@ -1,6 +1,9 @@
+.display-contents {
+    display: contents;
+}
+
 .tab {
     display: flex;
-    overflow: auto;
     float: left;
     margin-right: 2em;
     font-size: 0.2em;

src/app/editor/tabs/tabs.component.html

@@ -4,6 +4,7 @@
      cdkDropListOrientation="horizontal"
      (cdkDropListDropped)="dropped($event)"
      (click)="handleAction($event)"
+     class="display-contents"
 >
 
     <div *ngFor="let tab of tabs"

src/app/editor/tabs/tabs.component.ts

@@ -21,7 +21,7 @@ import { ServiceMessage } from '../../common/types/service-message.type';
     templateUrl: './tabs.component.html',
     styleUrl: './tabs.component.css',
     host: {
-        'class': 'row tabs scroller'
+        'class': 'tabs scroller'
     }
 })
 export class TabsComponent {
@@ -42,8 +42,9 @@ export class TabsComponent {
         this.tabsService.getData$().pipe(
             takeUntil(this.unsubscribe)
         ).subscribe((data: ServiceMessage) => {
-            if (data.action === "create-tab")
+            if (data.action === "create-tab") {
                 this.createTab(data.message, data.uuid, data.data);
+            }
         });
     }
 

src/assets/css/styles.css

@@ -32,6 +32,8 @@ body {
     padding-bottom: 0.4em;
     padding-top: 0.4em;
     color: rgba(255, 255, 255, 0.64);
+    margin-left: 0.2em;
+    margin-right: 0.2em;
 }
 
 

src/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="utf-8">
     <title>Newton</title>