Added user change validation and read status

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

components/calendar/Calendar.vue

@@ -46,15 +46,14 @@ onMounted(() => {
 
 <template>
   <div class="h-full w-full relative">
-  {{ isReadOnly }}
     <div class="h-full grid grid-rows-[auto,1fr]">
       <CalendarMenu />
 
       <component :is="currentViewComponent" />
 
       <CalendarSearch />
-      <CalendarDialogUpdateEvent />
-      <CalendarDialogDeleteEvent />
+      <CalendarDialogUpdateEvent v-if="!isReadOnly" />
+      <CalendarDialogDeleteEvent v-if="!isReadOnly" />
     </div>
   </div>
 </template>

components/calendar/CalendarEventDetails.vue

@@ -15,7 +15,7 @@ import {
 } from "@phosphor-icons/vue"
 
 const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
-const { lastActiveEvent } = storeToRefs(useCalendar())
+const { lastActiveEvent, isReadOnly } = storeToRefs(useCalendar())
 
 const props = defineProps<{
   event: CalendarEvent
@@ -151,7 +151,7 @@ function deployDeleteModal() {
       </template>
     </div>
 
-    <menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
+    <menu v-if="!isReadOnly" class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
       <UiPopover v-model:open="commandMenuOpened">
         <UiPopoverTrigger as-child>
           <UiButton size="icon" variant="outline" class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600">

components/calendar/CalendarMenu.vue

@@ -4,13 +4,14 @@ import { useCalendar } from "@/stores/CalendarStore"
 import { PhMagnifyingGlass } from "@phosphor-icons/vue"
 
 const { revealAdvancedSearch } = useCalendar()
+const { isReadOnly } = storeToRefs(useCalendar())
 </script>
 
 <template>
   <header class="pt-4 border-slate-400 dark:border-slate-700 border-b-[1px]">
     <div class="px-6 flex justify-between">
       <menu class="flex items-center gap-2">
-        <li>
+        <li v-if="!isReadOnly">
           <CalendarDialogQuickCreateEvent />
         </li>
         <li>

pages/calendars/[id].vue

@@ -11,11 +11,6 @@ const { data: catData, pending: catPending } = await useLazyFetch("/api/calendar
 
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
-
-const user = useSupabaseUser()
-
-const { setReadStatus } = useCalendar()
-setReadStatus(user.value, cal.value)
 </script>
 
 <template>

pages/my/calendars/[id].vue

@@ -23,9 +23,6 @@ const { data: catData, pending: catPending } = await useLazyFetch("/api/calendar
 
 const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
 const categories = computed<Category[]>(() => catData?.value?.data as Category[])
-
-const { setReadStatus } = useCalendar()
-setReadStatus(user.value, cal.value)
 </script>
 
 <template>

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()