add drag and drop builder

frontend/src/app/builder/create-page-dialog/create-page-dialog.ts

@@ -0,0 +1,74 @@
+import { Component, Inject, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { NgIf } from '@angular/common';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { PageService } from '../../core/services/page.service';
+
+@Component({
+  selector: 'app-create-page-dialog',
+  standalone: true,
+  imports: [NgIf, MatDialogModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule],
+  template: `
+    <h2 mat-dialog-title>Add Page</h2>
+    <mat-dialog-content>
+      <form [formGroup]="form" class="flex flex-col gap-4 pt-2">
+        <mat-form-field appearance="outline" class="w-full">
+          <mat-label>Page Title</mat-label>
+          <input matInput formControlName="title" placeholder="About" />
+          <mat-error>Title is required</mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="w-full">
+          <mat-label>Slug</mat-label>
+          <input matInput formControlName="slug" placeholder="about" />
+          <mat-error *ngIf="form.get('slug')?.hasError('required')">Slug is required</mat-error>
+          <mat-error *ngIf="form.get('slug')?.hasError('pattern')">Lowercase letters, numbers, and hyphens only</mat-error>
+        </mat-form-field>
+      </form>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button mat-dialog-close>Cancel</button>
+      <button mat-flat-button color="primary" [disabled]="form.invalid || loading" (click)="onCreate()">
+        {{ loading ? 'Creating...' : 'Create' }}
+      </button>
+    </mat-dialog-actions>
+  `,
+})
+export class CreatePageDialog {
+  private fb = inject(FormBuilder);
+  private dialogRef = inject(MatDialogRef<CreatePageDialog>);
+  private pageService = inject(PageService);
+
+  constructor() {
+    const data: { siteId: string } = inject(MAT_DIALOG_DATA);
+    this.siteId = data.siteId;
+  }
+
+  siteId: string;
+
+  form = this.fb.group({
+    title: ['', Validators.required],
+    slug: ['', [Validators.pattern(/^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/)]],
+  });
+  loading = false;
+
+  onCreate(): void {
+    if (this.form.invalid) return;
+    this.loading = true;
+    this.pageService.create(this.siteId, {
+      title: this.form.value.title || '',
+      slug: this.form.value.slug || '',
+      orderIndex: 0,
+    }).subscribe({
+      next: (page) => {
+        this.dialogRef.close(page);
+      },
+      error: () => {
+        this.loading = false;
+      },
+    });
+  }
+}