Added user change validation and read status

This might be better to just refetch the data with anonymous authorizations

stores/CalendarStore.ts

@@ -33,6 +33,7 @@ type DateDirectionTranslationKeys = {
 
 export const useCalendar = defineStore("calendar", () => {
   const { t } = useI18n()
+  const user = useSupabaseUser()
 
   /**
    * Static calendar config
@@ -45,14 +46,22 @@ export const useCalendar = defineStore("calendar", () => {
     "year"
   ])
 
-  const activeCalendar = ref<{ id: number; name: string; today: RPGDate } | null>(null)
+  const activeCalendar = ref<{ id: number; name: string; today: RPGDate, gmId: string | undefined } | null>(null)
 
   const isReadOnly = ref<boolean>(true)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function setReadStatus(user: any, calendar: Calendar) {
-    isReadOnly.value = (!user) || (calendar.world?.gmId !== user?.id)
+
+  function setReadStatus(gmId: string) {
+    // If the user is not logged in, or the calendar is not owned by the user, it's read-only
+    isReadOnly.value = (!user) || (gmId !== user.value?.id)
   }
 
+  // Watch for user changes
+  watch(user, () => {
+    if (activeCalendar.value) {
+      setReadStatus(activeCalendar.value.gmId!)
+    }
+  })
+
   /**
    * Month list (queried from API)
    */
@@ -66,10 +75,14 @@ export const useCalendar = defineStore("calendar", () => {
         id: calendarData.id,
         name: calendarData.name,
         today: calendarData.today,
+        gmId: calendarData.world?.gmId
       }
 
       setDefaultDate(activeCalendar.value.today)
       selectDate(activeCalendar.value.today)
+      if (calendarData.world) {
+        setReadStatus(activeCalendar.value.gmId!)
+      }
 
       if (!params.day) {
         params.day = defaultDate.value.day.toString()