Refactor: Implement app-wide slug generation

src/components/admin/RideForm.tsx

@@ -13,10 +13,12 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { DatePicker } from '@/components/ui/date-picker';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Combobox } from '@/components/ui/combobox';
+import { SlugField } from '@/components/ui/slug-field';
 import { toast } from '@/hooks/use-toast';
 import { Plus, Zap, Save, X } from 'lucide-react';
 import { useUnitPreferences } from '@/hooks/useUnitPreferences';
 import { useManufacturers, useRideModels } from '@/hooks/useAutocompleteData';
+import { useUserRole } from '@/hooks/useUserRole';
 import { ManufacturerForm } from './ManufacturerForm';
 import { RideModelForm } from './RideModelForm';
 import { 
@@ -127,6 +129,7 @@ const intensityLevels = [
 ];
 
 export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }: RideFormProps) {
+  const { isModerator } = useUserRole();
   const [submitting, setSubmitting] = useState(false);
   const [bannerImageUrl, setBannerImageUrl] = useState<string>(initialData?.banner_image_url || '');
   const [bannerImageId, setBannerImageId] = useState<string>(initialData?.banner_image_id || '');
@@ -200,20 +203,6 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
 
   const selectedCategory = watch('category');
 
-  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);
-  };
 
   const handleFormSubmit = async (data: RideFormData) => {
     setSubmitting(true);
@@ -301,10 +290,6 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
               <Input
                 id="name"
                 {...register('name')}
-                onChange={(e) => {
-                  register('name').onChange(e);
-                  handleNameChange(e);
-                }}
                 placeholder="Enter ride name"
               />
               {errors.name && (
@@ -312,17 +297,12 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
               )}
             </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="slug">URL Slug *</Label>
-              <Input
-                id="slug"
-                {...register('slug')}
-                placeholder="ride-url-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>
 
           {/* Description */}