fix(mapper): preserve mapping mode state on navigation (#49)

* feat: poc

- needs cleaning
- just me, hacking

* refactor: cleaning

* chore: update available categories

* fix: remember previous mode

* fix: clear search string after mapping

* feat: add Mixpanel tracking to revit mapper interactions (#50)

* feat: add Mixpanel tracking to revit mapper interactions

* fix: pr comments

* fix: just mode

* chore(interop-lite): rename event name prop

---------

Co-authored-by: oguzhankoral <oguzhankoral@gmail.com>

* revit mapper store

* WIP

* Fix form select base placeholder on select

* refactor: convention, not composable

* fix: deselecting objects through mapped mode

* fix: eslinting ?

* chore: remove console log

---------

Co-authored-by: oguzhankoral <oguzhankoral@gmail.com>

components/mapper/LayerMapper.vue

@@ -4,6 +4,7 @@
     <div class="space-y-2 my-2">
       <!-- Multi-select layer dropdown -->
       <FormSelectMulti
+        :key="selectedLayers.length === 0 ? 'empty' : 'hasSelection'"
         :model-value="selectedLayers"
         name="layerSelection"
         label="Select layers"
@@ -13,8 +14,9 @@
         :items="layerOptions"
         :allow-unset="false"
         by="id"
-        search
-        :search-placeholder="'Search layers...'"
+        clearable
+        :search="true"
+        :search-placeholder="''"
         :filter-predicate="layerSearchFilterPredicate"
         mount-menu-on-body
         @update:model-value="(value) => $emit('update:selectedLayers', value as LayerOption[])"

pages/revit-mapper.vue

@@ -211,7 +211,7 @@ const { selectionInfo } = storeToRefs(selectionStore)
 const { trackEvent } = useMixpanel()
 
 // === STATE ===
-const selectedMappingMode = ref<string>('Selection')
+const selectedMappingMode = ref<string | undefined>(undefined)
 const mappingModeOptions = ['Selection', 'Layer']
 const categoryOptions = ref<Category[]>([])
 const mappings = ref<CategoryMapping[]>([])
@@ -516,7 +516,7 @@ const loadData = async () => {
 
     categoryOptions.value = categories
 
-    // Mappings need to be changed human-readable labels
+    // Transform mappings to include human-readable labels
     mappings.value = rawMappings.map((mapping) => ({
       ...mapping,
       categoryLabel: getCategoryLabel(mapping.categoryValue)
@@ -528,8 +528,34 @@ const loadData = async () => {
     }))
 
     layerOptions.value = layers
+
+    // IMPORTANT: Determine initial mapping mode based on existing mappings
+    // This preserves the user's last used mode and prevents mixed state scenarios
+    if (!selectedMappingMode.value) {
+      if (rawLayerMappings.length > 0 && rawMappings.length === 0) {
+        // Only layer mappings exist - user was in Layer mode
+        selectedMappingMode.value = 'Layer'
+      } else if (rawMappings.length > 0 && rawLayerMappings.length === 0) {
+        // Only object mappings exist - user was in Selection mode
+        selectedMappingMode.value = 'Selection'
+      } else if (rawLayerMappings.length > 0 && rawMappings.length > 0) {
+        // Mixed state detected - this shouldn't happen, but default to Selection
+        // and let the conflict handling take care of it
+        selectedMappingMode.value = 'Selection'
+        console.warn(
+          'Mixed mapping state detected - both object and layer mappings exist'
+        )
+      } else {
+        // No existing mappings - default to Selection mode
+        selectedMappingMode.value = 'Selection'
+      }
+    }
   } catch (error) {
     console.error('Failed to load mapper data:', error)
+    // Fallback to Selection mode if loading fails
+    if (!selectedMappingMode.value) {
+      selectedMappingMode.value = 'Selection'
+    }
   }
 }