From 0d09bd534ac0128ec7a0c86c07a818092eaf5c30 Mon Sep 17 00:00:00 2001
From: Joel Wetzell <git@jwetzell.com>
Date: Sun, 17 May 2026 22:12:21 -0500
Subject: [PATCH] add drag and drop to rest of lists

---
 src/app/app.html                              |   2 +-
 .../components/module-list/module-list.html   |  12 +-
 src/app/components/module-list/module-list.ts |  79 +++++----
 src/app/components/module/module.html         | 123 ++++++++++++++
 src/app/components/module/module.ts           |  44 +++--
 src/app/components/processor/processor.html   |  28 +++-
 src/app/components/route-list/route-list.html |  12 +-
 src/app/components/route-list/route-list.ts   |  33 +++-
 src/app/components/route/route.html           | 156 +++++++++++++++++-
 src/app/components/route/route.ts             |  19 ++-
 src/app/services/lists.ts                     |   9 +
 11 files changed, 448 insertions(+), 69 deletions(-)

diff --git a/src/app/app.html b/src/app/app.html
index 90dd221..2bd202a 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -52,7 +52,7 @@
       <div class="grow overflow-y-auto">
         <app-module-list
           [modules]="config()?.modules"
-          (modulesChange)="modulesUpdated($event)"
+          (updated)="modulesUpdated($event)"
         ></app-module-list>
         <app-route-list
           [routes]="config()?.routes"
diff --git a/src/app/components/module-list/module-list.html b/src/app/components/module-list/module-list.html
index 629e171..0d740af 100644
--- a/src/app/components/module-list/module-list.html
+++ b/src/app/components/module-list/module-list.html
@@ -18,14 +18,20 @@
     }
     <div class="text-white">Modules</div>
   </div>
-  <div class="grow overflow-x-hidden overflow-y-auto gap-1.5">
+  <div
+    class="grow overflow-x-hidden overflow-y-auto gap-1.5"
+    cdkDropList
+    (cdkDropListDropped)="drop($event)"
+    [cdkDropListData]="modules()"
+  >
     @for (module of modules(); track module.id; let i = $index) {
-      <div class="m-2">
+      <div class="m-2" cdkDrag>
         <app-module
           [path]="`modules/${i}`"
-          (moduleChange)="moduleUpdated(i, $event)"
           [module]="module"
+          (updated)="moduleUpdated(i, $event)"
           (delete)="deleteModule(i)"
+          [inDragList]="true"
         ></app-module>
       </div>
     }
diff --git a/src/app/components/module-list/module-list.ts b/src/app/components/module-list/module-list.ts
index c4f6e98..c8cd391 100644
--- a/src/app/components/module-list/module-list.ts
+++ b/src/app/components/module-list/module-list.ts
@@ -1,21 +1,32 @@
-import { Component, inject, model } from '@angular/core';
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Component, inject, input, output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { cloneDeep } from 'lodash-es';
 import { ModuleConfig } from '../../models/config';
 import { SchemaService } from '../../services/schema';
 import { ModuleComponent } from '../module/module';
 
 @Component({
   selector: 'app-module-list',
-  imports: [MatMenuModule, MatIconModule, MatButtonModule, MatTooltipModule, ModuleComponent],
+  imports: [
+    MatMenuModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    ModuleComponent,
+    CdkDrag,
+    CdkDropList,
+  ],
   templateUrl: './module-list.html',
   styleUrl: './module-list.css',
 })
 export class ModuleListComponent {
-  modules = model<ModuleConfig[]>();
+  modules = input<ModuleConfig[]>();
+  updated = output<ModuleConfig[]>();
   public schemaService = inject(SchemaService);
 
   private snackBar = inject(MatSnackBar);
@@ -25,46 +36,52 @@ export class ModuleListComponent {
       console.error('module is undefined, not updating');
       return;
     }
-    this.modules.update((modules) => {
-      if (modules) {
-        modules[index].id = module.id;
-        modules[index].type = module.type;
-        if (module.params !== undefined) {
-          modules[index].params = module.params;
-        }
-        return [...modules];
-      }
-      return modules;
-    });
+    const currentModules = this.modules();
+    if (currentModules === undefined) {
+      console.error('modules is undefined, cannot update');
+      return;
+    }
+    currentModules[index] = cloneDeep(module);
+    this.updated.emit(cloneDeep(currentModules));
   }
 
   addModule(moduleType: string) {
     const moduleTemplate = this.schemaService.getSkeletonForModule(moduleType);
-    this.modules.update((modules) => {
-      if (modules) {
-        if (!modules) {
-          modules = [];
-        }
-        modules?.push(moduleTemplate);
-        return [...modules];
-      }
-      return modules;
-    });
+    const currentModules = this.modules() || [];
+    if (currentModules === undefined) {
+      console.error('modules is undefined, cannot update');
+      return;
+    }
+    currentModules.push(moduleTemplate);
+    this.updated.emit(cloneDeep(currentModules));
     this.snackBar.open('Module Added', 'Dismiss', {
       duration: 3000,
     });
   }
 
   deleteModule(index: number) {
-    this.modules.update((modules) => {
-      if (modules) {
-        modules?.splice(index, 1);
-        return [...modules];
-      }
-      return [];
-    });
+    const currentModules = this.modules();
+    if (currentModules === undefined) {
+      console.error('modules is undefined, cannot delete');
+      return;
+    }
+    currentModules.splice(index, 1);
+    this.updated.emit(cloneDeep(currentModules));
     this.snackBar.open('Module Removed', 'Dismiss', {
       duration: 3000,
     });
   }
+
+  drop(event: CdkDragDrop<ModuleConfig[] | undefined>) {
+    console.log('Drop event:', event);
+    if (event.previousContainer === event.container) {
+      const currentModules = this.modules();
+      if (currentModules === undefined) {
+        console.error('modules is undefined, not updating');
+        return;
+      }
+      moveItemInArray(currentModules, event.previousIndex, event.currentIndex);
+      this.updated.emit(cloneDeep(currentModules));
+    }
+  }
 }
diff --git a/src/app/components/module/module.html b/src/app/components/module/module.html
index 1eb3a1b..68a135a 100644
--- a/src/app/components/module/module.html
+++ b/src/app/components/module/module.html
@@ -5,6 +5,14 @@
     }} border-solid w-full h-full"
   >
     <div class="flex items-center justify-center">
+      @if (inDragList()) {
+        <div
+          cdkDragHandle
+          class="flex items-center justify-center bg-transparent hover:bg-gray-700 hover:cursor-move text-blue-400"
+        >
+          <mat-icon>drag_indicator</mat-icon>
+        </div>
+      }
       <div class="flex items-center">
         <mat-icon [style.color]="inputIndicatorColor()" matTooltip="Input Indicator"
           >keyboard_arrow_down</mat-icon
@@ -66,4 +74,119 @@
       }
     </div>
   </div>
+
+  <div *cdkDragPreview class="flex items-start m-2 w-fit">
+    <div
+      class="flex flex-col bg-gray-800 border-2 {{
+        isInError() ? 'border-red-500' : 'border-gray-600'
+      }} border-solid w-full h-full"
+    >
+      <div class="flex items-center justify-center">
+        @if (inDragList()) {
+          <div
+            cdkDragHandle
+            class="flex items-center justify-center bg-transparent hover:bg-gray-700 hover:cursor-move text-blue-400"
+          >
+            <mat-icon>drag_indicator</mat-icon>
+          </div>
+        }
+        <div class="flex items-center">
+          <mat-icon [style.color]="inputIndicatorColor()" matTooltip="Input Indicator"
+            >keyboard_arrow_down</mat-icon
+          >
+          <mat-icon [style.color]="outputIndicatorColor()" matTooltip="Output Indicator"
+            >keyboard_arrow_up</mat-icon
+          >
+        </div>
+        <div class="text-white">
+          {{ schema().title || module()?.type }}
+        </div>
+        <div class="grow"></div>
+        <div
+          class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
+          (click)="delete.emit()"
+        >
+          <mat-icon class="text-red-500!">close</mat-icon>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div *cdkDragPlaceholder class="flex items-start m-2 w-fit">
+    <div
+      class="flex flex-col bg-gray-800 border-2 {{
+        isInError() ? 'border-red-500' : 'border-gray-600'
+      }} border-solid w-full h-full opacity-30"
+    >
+      <div class="flex items-center justify-center">
+        @if (inDragList()) {
+          <div
+            cdkDragHandle
+            class="flex items-center justify-center bg-transparent hover:bg-gray-700 hover:cursor-move text-blue-400"
+          >
+            <mat-icon>drag_indicator</mat-icon>
+          </div>
+        }
+        <div class="flex items-center">
+          <mat-icon [style.color]="inputIndicatorColor()" matTooltip="Input Indicator"
+            >keyboard_arrow_down</mat-icon
+          >
+          <mat-icon [style.color]="outputIndicatorColor()" matTooltip="Output Indicator"
+            >keyboard_arrow_up</mat-icon
+          >
+        </div>
+        <div class="text-white">
+          {{ schema().title || module()?.type }}
+        </div>
+        <div class="grow"></div>
+        <div
+          class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
+          (click)="delete.emit()"
+        >
+          <mat-icon class="text-red-500!">close</mat-icon>
+        </div>
+      </div>
+      <hr class="bg-gray-600 h-0.5 border-0" />
+      <div>
+        <form [formGroup]="formGroup" class="h-full">
+          <div class="m-2">
+            <div class="flex items-center m-1">
+              <label class="mr-2 text-white"> ID: </label>
+              <input
+                type="text"
+                class="pl-1 border-2 border-gray-200 text-white border-solid rounded-sm"
+                [placeholder]="'module-1'"
+                [formControlName]="'id'"
+              />
+              <mat-icon class="text-white!" matTooltip="String">abc</mat-icon>
+              @if (!formGroup.controls['id'].valid) {
+                <!-- TODO(jwetzell): better error displaying -->
+                <div class="ml-2 text-red-500">{{ formGroup.controls['id'].errors | json }}</div>
+              }
+            </div>
+            <app-params-form
+              [paramsSchema]="schema()?.properties?.params"
+              [data]="params()"
+              (updated)="paramsUpdated($event)"
+            ></app-params-form>
+          </div>
+        </form>
+      </div>
+      <div>
+        @if (moduleConfigErrors().length > 0) {
+          <div class="m-2 p-2 border-2 border-red-500">
+            <div class="flex items-center mb-2 text-red-500">
+              <mat-icon>error</mat-icon>
+              <span class="ml-1">Module Errors</span>
+            </div>
+            @for (error of moduleConfigErrors(); track $index) {
+              <div class="ml-4 mb-1 text-white">
+                {{ error.error }}
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  </div>
 }
diff --git a/src/app/components/module/module.ts b/src/app/components/module/module.ts
index 48bd669..33dbac2 100644
--- a/src/app/components/module/module.ts
+++ b/src/app/components/module/module.ts
@@ -1,10 +1,12 @@
+import { CdkDragHandle, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
 import { JsonPipe } from '@angular/common';
-import { Component, computed, inject, input, model, output, signal } from '@angular/core';
+import { Component, computed, inject, input, output, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { cloneDeep } from 'lodash-es';
 import { debounceTime, tap } from 'rxjs';
 import { ModuleConfig } from '../../models/config';
 import { ConfigService } from '../../services/config';
@@ -22,6 +24,9 @@ import { ParamsFormComponent } from '../params-form/params-form';
     MatMenuModule,
     MatTooltipModule,
     JsonPipe,
+    CdkDragHandle,
+    CdkDragPreview,
+    CdkDragPlaceholder,
   ],
   templateUrl: './module.html',
   styleUrl: './module.css',
@@ -38,8 +43,10 @@ export class ModuleComponent {
     return undefined;
   });
 
-  module = model<ModuleConfig>();
+  inDragList = input<boolean>(false);
+  module = input<ModuleConfig>();
   delete = output<void>();
+  updated = output<ModuleConfig>();
 
   params = computed(() => this.module()!.params);
   id = computed(() => this.module()!.id);
@@ -77,18 +84,12 @@ export class ModuleComponent {
     });
 
     this.formGroup.valueChanges.subscribe((value) => {
-      this.module.update((module) => {
-        if (module) {
-          module.id = value.id;
-          module.type = value.type;
-          return {
-            ...module,
-            id: module.id,
-            type: module.type,
-          };
-        }
-        return undefined;
-      });
+      const currentModule = this.module();
+      if (currentModule) {
+        currentModule.id = value.id;
+        currentModule.type = value.type;
+        this.updated.emit(cloneDeep(currentModule));
+      }
     });
     if (this.id() !== undefined) {
       this.eventsService
@@ -117,16 +118,11 @@ export class ModuleComponent {
   }
 
   paramsUpdated(params: any) {
-    this.module.update((module) => {
-      if (module !== undefined && module.params !== undefined) {
-        module.params = params;
-        return {
-          ...module,
-          params: module.params,
-        };
-      }
-      return undefined;
-    });
+    const currentModule = this.module();
+    if (currentModule && currentModule.params !== undefined) {
+      currentModule.params = params;
+      this.updated.emit(cloneDeep(currentModule));
+    }
   }
 
   deleteMe() {
diff --git a/src/app/components/processor/processor.html b/src/app/components/processor/processor.html
index d1f2b72..51dba9c 100644
--- a/src/app/components/processor/processor.html
+++ b/src/app/components/processor/processor.html
@@ -63,13 +63,37 @@
     <div
       class="flex flex-col bg-gray-800 border-2 {{
         isInError() ? 'border-red-500' : 'border-gray-600'
-      }} border-dotted w-fit h-full"
+      }} border-solid w-fit h-full opacity-30"
     >
       <div class="flex items-center justify-center">
-        <div class="grow ml-1 mr-3 text-transparent">
+        @if (inDragList()) {
+          <div
+            cdkDragHandle
+            class="flex items-center justify-center bg-transparent hover:bg-gray-700 hover:cursor-move text-blue-400"
+          >
+            <mat-icon>drag_indicator</mat-icon>
+          </div>
+        }
+        <div class="grow ml-1 mr-3 text-white">
           {{ schema()?.title || processor()?.type }}
         </div>
+        <div
+          class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
+          (click)="delete.emit()"
+        >
+          <mat-icon class="text-red-500!">close</mat-icon>
+        </div>
       </div>
+      @if (hasParams()) {
+        <hr class="bg-gray-600 h-0.5 border-0" />
+        <div>
+          <app-params-form
+            [paramsSchema]="schema()?.properties?.params"
+            [data]="params()"
+            (updated)="paramsUpdated($event)"
+          ></app-params-form>
+        </div>
+      }
     </div>
   </div>
 }
diff --git a/src/app/components/route-list/route-list.html b/src/app/components/route-list/route-list.html
index 6c054db..565d87f 100644
--- a/src/app/components/route-list/route-list.html
+++ b/src/app/components/route-list/route-list.html
@@ -9,9 +9,14 @@
     </div>
     <div class="text-white">Routes</div>
   </div>
-  <div class="grow overflow-x-hidden overflow-y-auto gap-1.5">
-    @for (route of routes(); track $index; let i = $index) {
-      <div class="m-2">
+  <div
+    class="grow overflow-x-hidden overflow-y-auto gap-1.5"
+    cdkDropList
+    (cdkDropListDropped)="drop($event)"
+    [cdkDropListData]="routes()"
+  >
+    @for (route of routes(); track route; let i = $index) {
+      <div class="m-2" cdkDrag>
         <app-route
           [path]="`routes/${i}`"
           (updated)="routeUpdated(i, $event)"
@@ -19,6 +24,7 @@
           [moduleIds]="moduleIds() || []"
           (delete)="deleteRoute(i)"
           (moveProcessor)="moveProcessorBetweenRoutes($event)"
+          [inDragList]="true"
         ></app-route>
       </div>
     }
diff --git a/src/app/components/route-list/route-list.ts b/src/app/components/route-list/route-list.ts
index 821b452..738386b 100644
--- a/src/app/components/route-list/route-list.ts
+++ b/src/app/components/route-list/route-list.ts
@@ -1,4 +1,11 @@
-import { transferArrayItem } from '@angular/cdk/drag-drop';
+import { A11yModule } from '@angular/cdk/a11y';
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDropList,
+  moveItemInArray,
+  transferArrayItem,
+} from '@angular/cdk/drag-drop';
 import { Component, inject, input, output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -12,7 +19,16 @@ import { RouteComponent } from '../route/route';
 
 @Component({
   selector: 'app-route-list',
-  imports: [RouteComponent, MatMenuModule, MatIconModule, MatButtonModule, MatTooltipModule],
+  imports: [
+    RouteComponent,
+    MatMenuModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    CdkDrag,
+    CdkDropList,
+    A11yModule,
+  ],
   templateUrl: './route-list.html',
   styleUrl: './route-list.css',
 })
@@ -103,4 +119,17 @@ export class RouteListComponent {
 
     this.updated.emit(cloneDeep(routes));
   }
+
+  drop(event: CdkDragDrop<RouteConfig[] | undefined>) {
+    console.log('Drop event:', event);
+    if (event.previousContainer === event.container) {
+      const currentRoutes = this.routes();
+      if (currentRoutes === undefined) {
+        console.error('routes is undefined, not updating');
+        return;
+      }
+      moveItemInArray(currentRoutes, event.previousIndex, event.currentIndex);
+      this.updated.emit(cloneDeep(currentRoutes));
+    }
+  }
 }
diff --git a/src/app/components/route/route.html b/src/app/components/route/route.html
index 55b27ae..68c01ce 100644
--- a/src/app/components/route/route.html
+++ b/src/app/components/route/route.html
@@ -6,6 +6,14 @@
     }} border-solid w-full"
   >
     <div class="flex items-center justify-end">
+      @if (inDragList()) {
+        <div
+          cdkDragHandle
+          class="flex items-center justify-center bg-transparent hover:bg-gray-700 hover:cursor-move text-blue-400"
+        >
+          <mat-icon>drag_indicator</mat-icon>
+        </div>
+      }
       <div class="flex items-center">
         <mat-icon [style.color]="indicatorColor()" matTooltip="Route Indicator"
           >chevron_right</mat-icon
@@ -66,12 +74,12 @@
           <div
             class="border-2 border-gray-500 m-2"
             cdkDropList
-            [id]="listsService.registerProcessorList(path() + '/processors')"
+            [id]="processorListId()"
             [cdkDropListConnectedTo]="listsService.processorListIds"
             (cdkDropListDropped)="drop($event)"
             [cdkDropListData]="route()?.processors"
           >
-            @for (processor of processors(); track $index; let i = $index) {
+            @for (processor of processors(); track processor; let i = $index) {
               <div cdkDrag>
                 <app-processor
                   [path]="path() + '/processors/' + i"
@@ -115,4 +123,148 @@
       </div>
     }
   </ng-template>
+
+  <div *cdkDragPreview class="flex items-start m-2 w-fit">
+    <div
+      class="flex flex-col bg-gray-800 border-2 {{
+        isInError() ? 'border-red-500' : 'border-gray-600'
+      }} border-solid w-full"
+    >
+      <div class="flex items-center justify-end">
+        @if (inDragList()) {
+          <div
+            cdkDragHandle
+            class="flex items-center justify-center bg-transparent hover:bg-gray-700 hover:cursor-move text-blue-400"
+          >
+            <mat-icon>drag_indicator</mat-icon>
+          </div>
+        }
+        <div class="flex items-center">
+          <mat-icon [style.color]="indicatorColor()" matTooltip="Route Indicator"
+            >chevron_right</mat-icon
+          >
+        </div>
+        <div class="grow text-left ml-2 text-white">Route</div>
+        <div
+          class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
+          (click)="delete.emit()"
+        >
+          <mat-icon class="text-red-500!">close</mat-icon>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div *cdkDragPlaceholder class="flex items-start m-2 w-fit">
+    <div
+      class="flex flex-col bg-gray-800 border-2 {{
+        isInError() ? 'border-red-500' : 'border-gray-600'
+      }} border-solid w-full opacity-30"
+    >
+      <div class="flex items-center justify-end">
+        @if (inDragList()) {
+          <div
+            cdkDragHandle
+            class="flex items-center justify-center bg-transparent hover:bg-gray-700 hover:cursor-move text-blue-400"
+          >
+            <mat-icon>drag_indicator</mat-icon>
+          </div>
+        }
+        <div class="flex items-center">
+          <mat-icon [style.color]="indicatorColor()" matTooltip="Route Indicator"
+            >chevron_right</mat-icon
+          >
+        </div>
+        <div class="grow text-left ml-2 text-white">Route</div>
+        <div
+          class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
+          (click)="delete.emit()"
+        >
+          <mat-icon class="text-red-500!">close</mat-icon>
+        </div>
+      </div>
+      <hr class="bg-gray-600 h-0.5 border-0" />
+      <div>
+        <form [formGroup]="formGroup">
+          <div class="m-2">
+            <div class="flex items-center m-1">
+              <label class="mr-2 text-white"> Input: </label>
+              <select
+                class="pl-1 border-2 border-gray-200 text-white border-solid rounded-sm w-full"
+                formControlName="input"
+              >
+                @for (option of moduleIds(); track option) {
+                  <option [value]="option">
+                    {{ option }}
+                  </option>
+                }
+              </select>
+              @if (!formGroup.controls['input'].valid) {
+                <!-- TODO(jwetzell): better error displaying -->
+                <div class="ml-2 text-red-500">{{ formGroup.controls['input'].errors | json }}</div>
+              }
+            </div>
+          </div>
+        </form>
+        <div>
+          <div class="flex items-center">
+            @if (schemaService.processorTypes.length > 0) {
+              <div
+                matTooltip="Add Processor"
+                class="flex items-center justify-center w-10 h-10 bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400"
+                [matMenuTriggerFor]="addProcessorMenu"
+              >
+                <mat-icon>add</mat-icon>
+              </div>
+              <mat-menu #addProcessorMenu="matMenu">
+                @for (processorType of schemaService.processorTypes; track processorType) {
+                  <button mat-menu-item (click)="addProcessor(processorType.type)">
+                    <span>{{ processorType.name }}</span>
+                  </button>
+                }
+              </mat-menu>
+            }
+            <div class="text-md text-white text-center">Processors</div>
+          </div>
+          @if (processors() !== undefined && processors()!.length > 0) {
+            <div
+              class="border-2 border-gray-500 m-2"
+              cdkDropList
+              [id]="processorListId()"
+              [cdkDropListConnectedTo]="listsService.processorListIds"
+              (cdkDropListDropped)="drop($event)"
+              [cdkDropListData]="route()?.processors"
+            >
+              @for (processor of processors(); track processor; let i = $index) {
+                <div cdkDrag>
+                  <app-processor
+                    [path]="path() + '/processors/' + i"
+                    (updated)="processorUpdated(i, $event)"
+                    [processor]="processor"
+                    (delete)="deleteProcessor(i)"
+                    [inDragList]="true"
+                  ></app-processor>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </div>
+      <div>
+        @if (routeConfigErrors().length > 0) {
+          <div class="m-2 p-2 border-2 border-red-500">
+            <div class="flex items-center mb-2 text-red-500">
+              <mat-icon>error</mat-icon>
+              <span class="ml-1">Route Errors</span>
+            </div>
+            @for (error of routeConfigErrors(); track error.index) {
+              <div class="ml-4 mb-1 text-white">
+                {{ error.error }}
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  </div>
 }
diff --git a/src/app/components/route/route.ts b/src/app/components/route/route.ts
index 454e178..73b301d 100644
--- a/src/app/components/route/route.ts
+++ b/src/app/components/route/route.ts
@@ -1,4 +1,11 @@
-import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragPlaceholder,
+  CdkDragPreview,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
 import { JsonPipe } from '@angular/common';
 import { Component, computed, inject, input, output, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -28,6 +35,8 @@ import { ProcessorComponent } from '../processor/processor';
     MatTooltipModule,
     CdkDrag,
     CdkDropList,
+    CdkDragPreview,
+    CdkDragPlaceholder,
   ],
   templateUrl: './route.html',
   styleUrl: './route.css',
@@ -45,6 +54,7 @@ export class RouteComponent {
     return undefined;
   });
 
+  inDragList = input<boolean>(false);
   route = input<RouteConfig>();
   moduleIds = input<string[]>([]);
   delete = output<void>();
@@ -83,8 +93,14 @@ export class RouteComponent {
   private configService = inject(ConfigService);
   public listsService = inject(ListsService);
 
+  public processorListId = signal<string>('');
+
   indicatorColor = signal<string>('gray');
 
+  ngOnDestroy(): void {
+    this.listsService.removeProcessorList(this.path() + '/processors');
+  }
+
   ngOnInit(): void {
     this.formGroup.patchValue({
       input: this.route()?.input,
@@ -115,6 +131,7 @@ export class RouteComponent {
           this.indicatorColor.set('gray');
         });
     }
+    this.processorListId.set(this.listsService.registerProcessorList(this.path() + '/processors'));
   }
 
   isInError(): boolean {
diff --git a/src/app/services/lists.ts b/src/app/services/lists.ts
index e6da014..f65c830 100644
--- a/src/app/services/lists.ts
+++ b/src/app/services/lists.ts
@@ -18,6 +18,15 @@ export class ListsService {
     return id;
   }
 
+  removeProcessorList(path: string | undefined) {
+    if (path === undefined) {
+      return;
+    }
+
+    const id = this.pathToId(path);
+    this.processorListIds = this.processorListIds.filter((listId) => listId !== id);
+  }
+
   pathToId(path: string) {
     return path.replaceAll('/', '.');
   }