Improve slug description, regex and replace useState with watch

backend/src/lib/api-docs/constants.ts

@@ -460,7 +460,7 @@ export const PROJECTS = {
     name: "The new name of the project.",
     projectDescription: "An optional description label for the project.",
     autoCapitalization: "Disable or enable auto-capitalization for the project.",
-    slug: "An optional slug for the project. (must be unique within the server)"
+    slug: "An optional slug for the project. (must be unique within the organization)"
   },
   GET_KEY: {
     workspaceId: "The ID of the project to get the key from."

backend/src/server/routes/v1/project-router.ts

@@ -311,6 +311,10 @@ export const registerProjectRouter = async (server: FastifyZodProvider) => {
         slug: z
           .string()
           .trim()
+          .regex(
+            /^[a-z0-9]+(?:[_-][a-z0-9]+)*$/,
+            "Project slug can only contain lowercase letters and numbers, with optional single hyphens (-) or underscores (_) between words. Cannot start or end with a hyphen or underscore."
+          )
           .max(64, { message: "Slug must be 64 characters or fewer" })
           .optional()
           .describe(PROJECTS.UPDATE.slug)