relayout folders

src/app/components/module-list/module-list.component.html

@@ -0,0 +1,45 @@
+<div class="flex flex-col">
+  <div class="flex items-center">
+    @if (schemaService.moduleTypes.length > 0) {
+      <div
+        matTooltip="Add Module"
+        class="flex items-center justify-center w-10 h-10 bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400"
+        [matMenuTriggerFor]="addModuleMenu"
+      >
+        <mat-icon>add</mat-icon>
+      </div>
+      <mat-menu #addModuleMenu="matMenu">
+        @for (moduleType of schemaService.moduleTypes; track moduleType) {
+          <button mat-menu-item (click)="addModule(moduleType.type)">
+            <span>{{ moduleType.name }}</span>
+          </button>
+        }
+      </mat-menu>
+    }
+    <div class="text-white">Modules</div>
+  </div>
+  <div class="flex-grow overflow-x-hidden overflow-y-auto gap-1.5">
+    @for (module of modules(); track module; let i = $index) {
+      <div class="m-2">
+        <app-module
+          [path]="`modules/${i}`"
+          (moduleChange)="moduleUpdated(i, $event)"
+          [module]="module"
+          (delete)="deleteModule(i)"
+        ></app-module>
+      </div>
+    }
+  </div>
+</div>
+
+<ng-template #addModuleMenu>
+  @if (schemaService.moduleTypes.length > 0) {
+    <div cdkMenu class="context-menu">
+      @for (moduleType of schemaService.moduleTypes; track moduleType) {
+        <button cdkMenuItem class="context-menu-item" (click)="addModule(moduleType.type)">
+          <span>{{ moduleType.name }}</span>
+        </button>
+      }
+    </div>
+  }
+</ng-template>