geodata easter egg: debugging weird template reactivity issue for the bottom menu

* state: simply string rendering of the reactive value works,
  but only at the top of the menu
* doesn't work when used on the level of the menu-items (also not as a conditional variable)

packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
-import { IsGeodataActiveInj, ReadonlyInj, ref, useNuxtApp, useSmartsheetStoreOrThrow, viewIcons } from '#imports'
+import { IsGeodataActiveInj, ReadonlyInj, ref, useGlobal, useNuxtApp, useSmartsheetStoreOrThrow, viewIcons } from '#imports'
 
 const isGeodataActive = inject(IsGeodataActiveInj, ref(false))
 
@@ -12,6 +12,8 @@ const emits = defineEmits<Emits>()
 
 const readOnly = inject(ReadonlyInj)
 
+const { includeM2M } = useGlobal()
+
 const { $e } = useNuxtApp()
 
 const { isSqlView } = useSmartsheetStoreOrThrow()
@@ -23,6 +25,7 @@ function onOpenModal(type: ViewTypes, title = '') {
 </script>
 
 <template>
+  {{ geodataToggleState.show }}
   <a-menu :selected-keys="[]" class="flex flex-col">
     <div>
       <h3 class="px-3 text-xs font-semibold flex items-center gap-4 text-gray-500">
@@ -117,14 +120,14 @@ function onOpenModal(type: ViewTypes, title = '') {
           </div>
         </a-tooltip>
       </a-menu-item>
-
-      isGeodataActive: {{ isGeodataActive }} readOnly: {{ readOnly }}
+      <div v-if="geodataToggleState.show">SHOW</div>
       <a-menu-item
-        v-if="readOnly"
         key="map"
         class="group !flex !items-center !my-0 !h-2.5rem nc-create-map-view"
         @click="onOpenModal(ViewTypes.MAP)"
       >
+        {{ geodataToggleState.show }}
+
         <a-tooltip :mouse-enter-delay="1" placement="left">
           <template #title>
             {{ $t('msg.info.addView.map') }}

packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
-import { IsGeodataActiveInj, inject, provide } from '#imports'
+import { IsGeodataActiveInj, ReadonlyInj, useGlobal } from '#imports'
+// import { geodataToggleState } from ''
+
 
 // const { t } = useI18n()
 
 // const { api } = useApi()
-const GeoDataToggleRef = ref(false)
+// const { includeM2M } = useGlobal()
+// const GeoDataToggleRef = ref(true)
 // provide(IsGeodataActiveInj, GeoDataToggleRef)
-provide(ReadonlyInj, GeoDataToggleRef)
+// provide(ReadonlyInj, GeoDataToggleRef)
 
 async function toggleGeodataFeature() {
-  GeoDataToggleRef.value = !GeoDataToggleRef.value
-  console.log(GeoDataToggleRef.value)
+  geodataToggleState.show = !geodataToggleState.show
+  // console.log(GeoDataToggleRef.value)
 }
 
 // watch(FOO?.value, () => {
@@ -23,7 +26,7 @@ async function toggleGeodataFeature() {
     <template #title>
       <span> Toggle GeoData </span>
     </template>
-    <div style="{{fontSize: '5px';}}">I: {{ GeoDataToggleRef }}</div>
+    <!-- <div style="{{fontSize: '5px';}}"></div> -->
     <mdi-map-marker class="cursor-pointer" @click="toggleGeodataFeature" />
   </a-tooltip>
 </template>

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -1,8 +1,11 @@
+import { reactive } from 'vue';
 import type { ComputedRef, Ref } from 'vue'
 import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
 import { ref, useInjectionState, useMetas } from '#imports'
 import type { Row } from '~/lib'
 
+export const geodataToggleState = reactive({ show: false })
+
 const formatData = (list: Row[]) =>
   list.map((row) => ({
     row: { ...row },
@@ -103,6 +106,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       mapMetaData,
       geoDataFieldColumn,
       insertRow,
+      geodataToggleState,
     }
   },
 )