Refactor: Implement app-wide slug generation

src/components/admin/RideModelForm.tsx

@@ -8,7 +8,9 @@ import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import { SlugField } from '@/components/ui/slug-field';
 import { Layers, Save, X } from 'lucide-react';
+import { useUserRole } from '@/hooks/useUserRole';
 
 const rideModelSchema = z.object({
   name: z.string().min(1, 'Name is required'),
@@ -45,6 +47,8 @@ export function RideModelForm({
   onCancel, 
   initialData 
 }: RideModelFormProps) {
+  const { isModerator } = useUserRole();
+  
   const {
     register,
     handleSubmit,
@@ -63,20 +67,6 @@ export function RideModelForm({
     }
   });
 
-  const generateSlug = (name: string) => {
-    return name
-      .toLowerCase()
-      .replace(/[^a-z0-9\s-]/g, '')
-      .replace(/\s+/g, '-')
-      .replace(/-+/g, '-')
-      .trim();
-  };
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const name = e.target.value;
-    const slug = generateSlug(name);
-    setValue('slug', slug);
-  };
 
   return (
     <Card>
@@ -99,10 +89,6 @@ export function RideModelForm({
               <Input
                 id="name"
                 {...register('name')}
-                onChange={(e) => {
-                  register('name').onChange(e);
-                  handleNameChange(e);
-                }}
                 placeholder="e.g. Mega Coaster, Sky Screamer"
               />
               {errors.name && (
@@ -110,17 +96,12 @@ export function RideModelForm({
               )}
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="slug">URL Slug *</Label>
-              <Input
-                id="slug"
-                {...register('slug')}
-                placeholder="model-slug"
-              />
-              {errors.slug && (
-                <p className="text-sm text-destructive">{errors.slug.message}</p>
-              )}
-            </div>
+            <SlugField
+              name={watch('name')}
+              slug={watch('slug')}
+              onSlugChange={(slug) => setValue('slug', slug)}
+              isModerator={isModerator()}
+            />
           </div>
 
           {/* Category and Type */}