Added event colors

src/components/calendar/CalendarEvent.vue

@@ -12,7 +12,16 @@ defineProps<{
   <Popover>
     <PopoverTrigger as-child>
       <button
-        class="text-xs text-white px-2 py-1 bg-pink-700 block w-full text-left rounded-sm hover:bg-pink-800 whitespace-nowrap overflow-hidden text-ellipsis"
+        class="text-xs text-white px-2 py-1 block w-full text-left rounded-sm whitespace-nowrap overflow-hidden text-ellipsis"
+        :class="{
+          'bg-slate-600 hover:bg-slate-700': !event.category,
+          'bg-green-700 hover:bg-green-800': event.category === 'birth',
+          'bg-stone-600 hover:bg-stone-800': event.category === 'death',
+          'bg-red-600 hover:bg-red-800': event.category === 'catastrophe',
+          'bg-pink-600 hover:bg-pink-800': event.category === 'natural-disaster',
+          'bg-blue-600 hover:bg-blue-800': event.category === 'legal',
+          'bg-amber-700 hover:bg-amber-800': event.category === 'player'
+        }"
       >
         {{ event.title }}
       </button>

src/components/calendar/CalendarMenu.vue

@@ -11,6 +11,7 @@ import {
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { useCalendar } from '@/stores/calendar'
 import Button from '../ui/button/Button.vue'
+import CalendarSwitch from './CalendarSwitch.vue'
 
 const {
   currentConfig,
@@ -33,6 +34,9 @@ const defaultDateFormatted = computed(() => getFormattedDateTitle(defaultDate, t
         <div class="md:col-span-9">
           <div class="flex items-center gap-6">
             <menu class="flex items-center gap-2">
+              <li>
+                <CalendarSwitch />
+              </li>
               <li>
                 <TooltipProvider :delayDuration="250">
                   <Tooltip>

src/components/calendar/CalendarSwitch.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import Button from '../ui/button/Button.vue'
+import { useCalendar } from '@/stores/calendar'
+import { computed } from 'vue'
+
+const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
+
+const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      <Button size="sm" variant="secondary">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
+          <path
+            d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z"
+          />
+        </svg>
+
+        {{ viewTypeTitle }}
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuLabel>Mode d'affichage</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        v-for="option in viewTypeOptions"
+        :key="option"
+        @click="setViewType(option)"
+      >
+        {{ getViewTypeTitle(option) }}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>