Switch UI components to new design system tokens

Standardizes color values and styling using the new tokens:
- Replaces hardcoded colors with semantic variables
- Updates background/text/border classes for light/dark mode
- Migrates inputs to UInput/USelect/UTextarea components
- Removes redundant style declarations

server/api/admin/events.post.js

@@ -1,12 +1,12 @@
-import Event from '../../models/event.js'
-import { connectDB } from '../../utils/mongoose.js'
-import jwt from 'jsonwebtoken'
+import Event from "../../models/event.js";
+import { connectDB } from "../../utils/mongoose.js";
+import jwt from "jsonwebtoken";
 
 export default defineEventHandler(async (event) => {
   try {
     // TODO: Temporarily disabled auth for testing - enable when authentication is set up
     // const token = getCookie(event, 'auth-token') || getHeader(event, 'authorization')?.replace('Bearer ', '')
-    
+
     // if (!token) {
     //   throw createError({
     //     statusCode: 401,
@@ -17,53 +17,60 @@ export default defineEventHandler(async (event) => {
     // const config = useRuntimeConfig()
     // const decoded = jwt.verify(token, config.jwtSecret)
 
-    const body = await readBody(event)
-    
+    const body = await readBody(event);
+
     // Validate required fields
     if (!body.title || !body.description || !body.startDate || !body.endDate) {
       throw createError({
         statusCode: 400,
-        statusMessage: 'Missing required fields'
-      })
+        statusMessage: "Missing required fields",
+      });
     }
 
-    await connectDB()
-    
+    await connectDB();
+
     const eventData = {
       ...body,
-      createdBy: 'admin@ghostguild.org', // TODO: Use actual authenticated user
+      createdBy: "admin@ghostguild.org", // TODO: Use actual authenticated user
       startDate: new Date(body.startDate),
       endDate: new Date(body.endDate),
-      registrationDeadline: body.registrationDeadline ? new Date(body.registrationDeadline) : null
-    }
-    
+      registrationDeadline: body.registrationDeadline
+        ? new Date(body.registrationDeadline)
+        : null,
+    };
+
+    // Ensure slug is not included in eventData (let the model generate it)
+    delete eventData.slug;
+
     // Handle ticket data
     if (body.tickets) {
       eventData.tickets = {
         enabled: body.tickets.enabled || false,
         public: {
           available: body.tickets.public?.available || false,
-          name: body.tickets.public?.name || 'Public Ticket',
-          description: body.tickets.public?.description || '',
+          name: body.tickets.public?.name || "Public Ticket",
+          description: body.tickets.public?.description || "",
           price: body.tickets.public?.price || 0,
           quantity: body.tickets.public?.quantity || null,
           sold: 0, // Initialize sold count
           earlyBirdPrice: body.tickets.public?.earlyBirdPrice || null,
-          earlyBirdDeadline: body.tickets.public?.earlyBirdDeadline ? new Date(body.tickets.public.earlyBirdDeadline) : null
-        }
-      }
+          earlyBirdDeadline: body.tickets.public?.earlyBirdDeadline
+            ? new Date(body.tickets.public.earlyBirdDeadline)
+            : null,
+        },
+      };
     }
-    
-    const newEvent = new Event(eventData)
 
-    const savedEvent = await newEvent.save()
-    
-    return savedEvent
+    const newEvent = new Event(eventData);
+
+    const savedEvent = await newEvent.save();
+
+    return savedEvent;
   } catch (error) {
-    console.error('Error creating event:', error)
+    console.error("Error creating event:", error);
     throw createError({
       statusCode: 500,
-      statusMessage: error.message || 'Failed to create event'
-    })
+      statusMessage: error.message || "Failed to create event",
+    });
   }
-})
+});

server/models/event.js

@@ -2,7 +2,7 @@ import mongoose from "mongoose";
 
 const eventSchema = new mongoose.Schema({
   title: { type: String, required: true },
-  slug: { type: String, required: true, unique: true },
+  slug: { type: String, unique: true }, // Auto-generated in pre-save hook
   tagline: String,
   description: { type: String, required: true },
   content: String,
@@ -133,7 +133,8 @@ function generateSlug(title) {
 // Pre-save hook to generate slug
 eventSchema.pre("save", async function (next) {
   try {
-    if (this.isNew || this.isModified("title")) {
+    // Always generate slug if it doesn't exist or if title has changed
+    if (!this.slug || this.isNew || this.isModified("title")) {
       let baseSlug = generateSlug(this.title);
       let slug = baseSlug;
       let counter = 1;