overhauled color selection system

ui/src/components/calendar/CreateCalendarEvent.vue

@@ -22,6 +22,15 @@ import {
 import { Input } from "@/components/ui/input"
 import Textarea from "../ui/textarea/Textarea.vue"
 import { CalendarEvent } from "@shared/types/calendar"
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select'
 
 
 
@@ -95,7 +104,7 @@ function makeInitialValues() {
         endDate: toLocalDateString(end),
         endTime: toLocalTimeString(end),
         location: "",
-        color: "#3b82f6",
+        color: "#6890ee",
         description: "",
         id: null as number | null,
     }
@@ -144,6 +153,18 @@ const emit = defineEmits<{
     (e: 'reload'): void
 }>()
 const formRef = ref(null);
+
+const colorOptions = [
+    { name: "Blue", hex: "#6890ee" },
+    { name: "Purple", hex: "#a25fce" },
+    { name: "Orange", hex: "#fba037" },
+    { name: "Green", hex: "#6cd265" },
+    { name: "Red", hex: "#ff5959" },
+];
+
+function getColorName(hex: string) {
+    return colorOptions.find(c => c.hex === hex)?.name ?? hex
+}
 </script>
 
 <template>
@@ -174,13 +195,36 @@ const formRef = ref(null);
                         </div>
 
                         <!-- Color -->
-                        <div class="w-[60px]">
+                        <div class="w-[120px]">
                             <FormField v-slot="{ componentField }" name="color">
                                 <FormItem>
                                     <FormLabel>Color</FormLabel>
                                     <FormControl>
-                                        <Input type="color" class="h-[38px] p-1 cursor-pointer"
+                                        <Select :modelValue="componentField.modelValue"
-                                            v-bind="componentField" />
+                                            @update:modelValue="componentField.onChange">
+                                            <SelectTrigger>
+                                                <SelectValue asChild>
+                                                    <template #default="{ selected }">
+                                                        <div class="flex items-center gap-2 w-[70px]">
+                                                            <span class="inline-block size-4 rounded"
+                                                                :style="{ background: componentField.modelValue }">
+                                                            </span>
+                                                            <span>{{ getColorName(componentField.modelValue) }}</span>
+                                                        </div>
+                                                    </template>
+                                                </SelectValue>
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem v-for="opt in colorOptions" :key="opt.hex" :value="opt.hex">
+                                                    <div class="flex items-center gap-2">
+                                                        <span class="inline-block size-4 rounded"
+                                                            :style="{ background: opt.hex }"></span>
+                                                        <span>{{ opt.name }}</span>
+                                                    </div>
+                                                </SelectItem>
+                                            </SelectContent>
+                                        </Select>
+
                                     </FormControl>
                                     <FormMessage />
                                 </FormItem>