feat(frontend): auto-derive slugs from names on create forms (#48)

The org/project/bucket/collection create forms required typing a slug
by hand. While the slug field is untouched (empty or still equal to the
derived value), naming the entity fills its slug; a manual slug edit
stops the derivation and is sanitized to slug form as you type.

Co-authored-by: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

apps/frontend/src/lib/__tests__/slug.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+
+import { applySlugField, slugify } from "../slug";
+
+describe("slugify", () => {
+  it("derives lowercase hyphenated slugs", () => {
+    expect(slugify("TDvorak")).toBe("tdvorak");
+    expect(slugify("Acme Corporation")).toBe("acme-corporation");
+    expect(slugify("  My_App!! v2  ")).toBe("my-app-v2");
+  });
+
+  it("strips accents and non-ascii characters", () => {
+    expect(slugify("Zürich — Héllo")).toBe("zurich-hello");
+    expect(slugify("日本語")).toBe("");
+  });
+});
+
+describe("applySlugField", () => {
+  const form = { name: "", slug: "", description: "" };
+
+  it("fills the slug while it is untouched", () => {
+    const next = applySlugField(form, "name", "My Org");
+    expect(next.slug).toBe("my-org");
+    // keeps following name edits
+    expect(applySlugField(next, "name", "Renamed Org").slug).toBe("renamed-org");
+  });
+
+  it("stops deriving once the slug was hand-edited", () => {
+    const custom = applySlugField(applySlugField(form, "name", "My Org"), "slug", "custom-slug");
+    expect(applySlugField(custom, "name", "New Name").slug).toBe("custom-slug");
+  });
+
+  it("resumes deriving if the slug is cleared", () => {
+    const cleared = applySlugField(applySlugField(form, "name", "My Org"), "slug", "");
+    expect(applySlugField(cleared, "name", "Other").slug).toBe("other");
+  });
+
+  it("sanitizes manual slug edits", () => {
+    expect(applySlugField(form, "slug", "Not A Slug!").slug).toBe("not-a-slug");
+  });
+
+  it("passes through unrelated fields", () => {
+    expect(applySlugField(form, "description", "hi").description).toBe("hi");
+  });
+});

apps/frontend/src/lib/slug.ts

@@ -0,0 +1,27 @@
+export function slugify(value: string): string {
+  return value
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 63);
+}
+
+/**
+ * Applies a field edit to a {name, slug, ...} form. While the slug is
+ * untouched — empty or still equal to the derived value — renaming the
+ * entity re-derives its slug. Explicit slug edits are sanitized in place.
+ */
+export function applySlugField<T extends { name: string; slug: string }>(
+  current: T,
+  field: string,
+  value: string,
+): T {
+  if (field === "slug") return { ...current, slug: slugify(value) };
+  if (field === "name" && (current.slug === "" || current.slug === slugify(current.name))) {
+    return { ...current, name: value, slug: slugify(value) };
+  }
+  return { ...current, [field]: value };
+}