♻️(frontend) make room pattern validation rules reusable

Make the validation rules more maintainable and reusable across the codebase.
Particularly useful when these values need to be referenced in multiple
validation contexts.

The personalize room's link modal needs a step-by-step validation.

src/frontend/src/features/home/components/PersonalizeMeetingDialog.tsx

@@ -13,6 +13,10 @@ import {
   TextField,
 } from 'react-aria-components'
 import { css } from '@/styled-system/css'
+import {
+  MIN_ROOM_LENGTH,
+  ALPHANUMERIC_LOWERCASE,
+} from '@/features/rooms/utils/isRoomValid'
 
 export const PersonalizeMeetingDialog = ({
   isOpen,
@@ -43,10 +47,10 @@ export const PersonalizeMeetingDialog = ({
   }
 
   const validationErrors = []
-  if (roomSlug.length < 5) {
+  if (roomSlug.length < MIN_ROOM_LENGTH) {
     validationErrors.push(t('errors.validation.length'))
   }
-  if (!roomSlug.match(/^[a-z0-9]+$/)) {
+  if (!new RegExp(`^${ALPHANUMERIC_LOWERCASE}+$`).test(roomSlug)) {
     validationErrors.push(t('errors.validation.spaceOrSpecialCharacter'))
   }
 

src/frontend/src/features/rooms/utils/isRoomValid.ts

@@ -6,13 +6,18 @@
  */
 export const generatedRoomPattern = '[a-z]{3}-[a-z]{4}-[a-z]{3}'
 
+export const ALPHANUMERIC_LOWERCASE = '[a-z0-9]'
+
+// Minimum length requirement for personalized rooms
+export const MIN_ROOM_LENGTH = 5
+
 /**
  * Pattern for user-defined custom room IDs
  * Format: Minimum 5 lowercase alphanumeric characters
  * This pattern allows users to create memorable, personalized room names
  * while maintaining basic validation rules (e.g., myroom123, teamspace, project2024)
  */
-export const personalizedRoomPattern = '[a-z0-9]{5,}'
+export const personalizedRoomPattern = `${ALPHANUMERIC_LOWERCASE}{${MIN_ROOM_LENGTH},}`
 
 // Combined pattern that accepts both system-generated and personalized room IDs
 // This allows flexibility in room creation while maintaining consistent validation