Moved if logic into component for improved performance, inline value updating for select fields

src/components/gameMaster/mapEditor/partials/MapObjectList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800">
+  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800" v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object'">
     <div class="flex flex-col gap-2.5 p-2.5">
       <div class="relative flex">
         <img src="/assets/icons/mapEditor/search.svg" class="w-4 h-4 py-0.5 absolute top-1/2 -translate-y-1/2 left-2.5" alt="Search icon" />
@@ -7,7 +7,7 @@
         <input @mousedown.stop class="!pl-7 input-field w-full" type="text" name="search" placeholder="Search" v-model="searchQuery" />
       </div>
       <div class="flex">
-        <select class="input-field w-full" name="lists">
+        <select class="input-field w-full" name="lists" v-model="mapEditor.drawMode.value" @change="(event: any) => mapEditor.setDrawMode(event.target.value)">
           <option value="tile">Tiles</option>
           <option value="map_object">Objects</option>
         </select>

src/components/gameMaster/mapEditor/partials/TileList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800">
+  <div class="absolute border-0 border-l-2 border-solid border-gray-500 w-1/4 min-w-80 flex flex-col top-0 right-0 z-10 h-dvh bg-gray-800" v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'tile'">
     <div class="flex flex-col gap-2.5 p-2.5">
       <div class="relative flex">
         <img src="/assets/icons/mapEditor/search.svg" class="w-4 h-4 py-0.5 absolute top-1/2 -translate-y-1/2 left-2.5" alt="Search icon" />
@@ -7,7 +7,7 @@
         <input @mousedown.stop class="!pl-7 input-field w-full" type="text" name="search" placeholder="Search" v-model="searchQuery" />
       </div>
       <div class="flex">
-        <select class="input-field w-full" name="lists">
+        <select class="input-field w-full" name="lists" v-model="mapEditor.drawMode.value" @change="(event: any) => mapEditor.setDrawMode(event.target.value)">
           <option value="tile">Tiles</option>
           <option value="map_object">Objects</option>
         </select>
@@ -37,8 +37,9 @@
       </div>
       <div v-else class="h-full overflow-auto">
         <div class="p-4">
-          <button @click="closeGroup" class="btn-cyan mb-4">Back to All Tiles</button>
+          <div class="text-center mb-8">
-          <h4 class="text-lg mb-4">{{ selectedGroup.parent.name }} Group</h4>
+            <button @click="closeGroup" class="hover:text-white">Back to all tiles</button>
+          </div>
           <div class="grid grid-cols-4 gap-2 justify-items-center">
             <div class="flex flex-col items-center justify-center">
               <img

src/components/screens/MapEditor.vue

@@ -7,8 +7,8 @@
           <Map v-if="mapEditor.currentMap.value" :key="mapEditor.currentMap.value?.id" />
           <Toolbar ref="toolbar" @save="save" @clear="clear" @open-maps="mapModal?.open" @open-settings="mapSettingsModal?.open" @close-editor="mapEditor.toggleActive" />
           <MapList ref="mapModal" @open-create-map="mapSettingsModal?.open" />
-          <TileList v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'tile'" />
+          <TileList />
-          <MapObjectList v-if="mapEditor.tool.value === 'pencil' && mapEditor.drawMode.value === 'map_object'" />
+          <MapObjectList />
           <MapSettings ref="mapSettingsModal" />
           <TeleportModal ref="teleportModal" />
         </div>