From 1a59b24f60f4f937a3c6280f8d831436dcf09789 Mon Sep 17 00:00:00 2001
From: vato007 <contact@michaelpivato.dev>
Date: Sat, 6 Jul 2024 09:47:14 +0930
Subject: [PATCH] Add overflow to editor, maximise field widths, add toggle for
 preview

---
 src/app/app.component.html                     | 12 +++++++++++-
 src/app/app.component.scss                     |  8 ++++++++
 src/app/app.component.ts                       |  1 +
 src/app/editor/editor.component.html           |  2 +-
 src/app/editor/editor.component.scss           | 12 ++++++++++++
 src/app/editor/editor.component.ts             |  4 +++-
 src/app/list-field/list-field.component.scss   | 12 +++++++++++-
 src/app/list-field/list-field.component.ts     |  8 +++++---
 src/app/proto-field/proto-field.component.scss |  4 ++++
 src/app/proto-field/proto-field.component.ts   |  4 ++--
 10 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index d7cbcc0..cfd467d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -8,6 +8,13 @@
     >
       <mat-icon [class.filled]="leftSideOpen()">dock_to_right</mat-icon>
     </button>
+    <button
+      mat-icon-button
+      (click)="previewOpen.set(!previewOpen())"
+      title="Toggle editor preview"
+    >
+      <mat-icon [class.filled]="previewOpen()">dock_to_bottom</mat-icon>
+    </button>
     <button
       mat-icon-button
       (click)="rightSideOpen.set(!rightSideOpen())"
@@ -37,7 +44,10 @@
   </mat-sidenav>
   <mat-sidenav-content>
     @if(selectedMessage()) {
-    <app-editor [selectedMessage]="selectedMessage()!"></app-editor>
+    <app-editor
+      [selectedMessage]="selectedMessage()!"
+      [showRaw]="previewOpen()"
+    ></app-editor>
     }
   </mat-sidenav-content>
 </mat-sidenav-container>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 7ecb782..2fa6f54 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -16,6 +16,14 @@ mat-sidenav-container {
   height: 100%;
 }
 
+mat-sidenav-content {
+  display: flex;
+}
+
+app-editor {
+  flex: 1;
+}
+
 .mat-sidenav.mat-drawer-end,
 .mat-sidenav {
   padding: var(--mat-sidenav-container-shape);
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0da4441..377ead7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -41,6 +41,7 @@ export class AppComponent {
   protected selectedMessage = signal<ProtoMessage | undefined>(undefined);
   protected rightSideOpen = signal(true);
   protected leftSideOpen = signal(true);
+  protected previewOpen = signal(true);
 
   protected isMobile = signal(
     this.breakpointObserver.isMatched(mobileBreakpoints)
diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html
index 82440b8..1c1c69a 100644
--- a/src/app/editor/editor.component.html
+++ b/src/app/editor/editor.component.html
@@ -10,4 +10,4 @@
   } }
 </div>
 
-<pre><code #code></code></pre>
+<pre *ngIf="showRaw()"><code #code></code></pre>
diff --git a/src/app/editor/editor.component.scss b/src/app/editor/editor.component.scss
index 83fd8be..7cac253 100644
--- a/src/app/editor/editor.component.scss
+++ b/src/app/editor/editor.component.scss
@@ -1,3 +1,15 @@
 :host {
   padding: var(--mat-sidenav-container-shape);
+  display: flex;
+  flex-direction: column;
+}
+
+pre,
+div {
+  flex: 1;
+  overflow: auto;
+}
+
+div {
+  padding: 10px;
 }
diff --git a/src/app/editor/editor.component.ts b/src/app/editor/editor.component.ts
index c91037e..51dcfb1 100644
--- a/src/app/editor/editor.component.ts
+++ b/src/app/editor/editor.component.ts
@@ -26,6 +26,8 @@ export class EditorComponent {
   fileContents = input<string>();
   selectedMessage = input.required<ProtoMessage>();
 
+  showRaw = input<boolean>(true);
+
   protected values = signal<any>(undefined);
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
@@ -53,7 +55,7 @@ export class EditorComponent {
         const message = this.selectedMessage();
         this.values.set(
           Object.fromEntries(
-            message.values.map((value) => [[value.name, null]])
+            message.values.map((value) => [[value.name, undefined]])
           )
         );
       },
diff --git a/src/app/list-field/list-field.component.scss b/src/app/list-field/list-field.component.scss
index 636bf4e..a101913 100644
--- a/src/app/list-field/list-field.component.scss
+++ b/src/app/list-field/list-field.component.scss
@@ -1,7 +1,17 @@
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 
 .row-wrapper {
   display: flex;
+  align-items: baseline;
+}
+
+app-proto-field {
+  flex: 1;
+}
+
+.add-button {
+  align-self: flex-end;
 }
diff --git a/src/app/list-field/list-field.component.ts b/src/app/list-field/list-field.component.ts
index d9461f1..0253f90 100644
--- a/src/app/list-field/list-field.component.ts
+++ b/src/app/list-field/list-field.component.ts
@@ -35,7 +35,9 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
       </button>
     </div>
     } }
-    <button mat-icon-button (click)="add()"><mat-icon>add</mat-icon></button>`,
+    <button mat-icon-button class="add-button" (click)="add()">
+      <mat-icon>add</mat-icon>
+    </button>`,
   styleUrl: './list-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -48,10 +50,10 @@ export class ListFieldComponent {
     const existingValues = this.values();
     if (existingValues) {
       const newValues = [...existingValues];
-      newValues.push(undefined);
+      newValues.push('');
       this.values.set(newValues);
     } else {
-      this.values.set([undefined]);
+      this.values.set(['']);
     }
   }
 
diff --git a/src/app/proto-field/proto-field.component.scss b/src/app/proto-field/proto-field.component.scss
index 5d4e87f..801d45f 100644
--- a/src/app/proto-field/proto-field.component.scss
+++ b/src/app/proto-field/proto-field.component.scss
@@ -1,3 +1,7 @@
 :host {
   display: block;
+
+  & > * {
+    width: 100%;
+  }
 }
diff --git a/src/app/proto-field/proto-field.component.ts b/src/app/proto-field/proto-field.component.ts
index 92a5121..b294cf0 100644
--- a/src/app/proto-field/proto-field.component.ts
+++ b/src/app/proto-field/proto-field.component.ts
@@ -76,14 +76,14 @@ export class ProtoFieldComponent {
     if (this.configuration().type === MessageTypeEnum.Enum) {
       return this.configuration() as EnumMessage;
     }
-    return null;
+    return;
   });
 
   protected listConfiguration = computed(() => {
     if (this.configuration().type === MessageTypeEnum.List) {
       return this.configuration() as ListMessage;
     }
-    return null;
+    return;
   });
 
   protected readonly MessageTypeEnum = MessageTypeEnum;