npm update, removed spacing around zone editor toolbar for better UX, added search logic in objects list

src/components/utilities/zoneEditor/Objects.vue

@@ -7,7 +7,14 @@
           <div class="w-full flex gap-1.5 flex-row">
             <div>
               <label class="mb-1.5 font-titles hidden" for="search">Search...</label>
-              <input @mousedown.stop class="input-cyan" type="text" name="search" placeholder="Search" />
+              <input
+                @mousedown.stop
+                class="input-cyan"
+                type="text"
+                name="search"
+                placeholder="Search"
+                v-model="searchQuery"
+              />
             </div>
             <div>
               <label class="mb-1.5 font-titles hidden" for="z-index">Z-index</label>
@@ -19,7 +26,7 @@
       <template #modalBody>
         <div class="m-[15px]">
           <div class="flex justify-between flex-wrap gap-2.5 items-center">
-            <div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="max-w-[25%] inline-block">
+            <div v-for="(object, index) in filteredObjects" :key="index" class="max-w-[25%] inline-block">
               <img
                 class="border-2 border-solid max-w-full"
                 :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
@@ -41,7 +48,7 @@
 
 <script setup lang="ts">
 import config from '@/config'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useSocketStore } from '@/stores/socket'
 import Modal from '@/components/utilities/Modal.vue'
@@ -50,6 +57,16 @@ import type { Object } from '@/types'
 const socket = useSocketStore()
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
+const searchQuery = ref('')
+
+const filteredObjects = computed(() => {
+  if (!searchQuery.value) {
+    return zoneEditorStore.objectList
+  }
+  return zoneEditorStore.objectList.filter(object =>
+    object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+})
 
 onMounted(async () => {
   isModalOpen.value = true
@@ -57,4 +74,4 @@ onMounted(async () => {
     zoneEditorStore.setObjectList(response)
   })
 })
-</script>
+</script>

src/components/utilities/zoneEditor/Toolbar.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex justify-center m-2.5">
-    <div class="toolbar fixed top-5 rounded flex bg-gray-300 bg-opacity-80 border-2 border-solid border-cyan text-gray-50 p-1.5 pl-2.5 min-w-[90%] h-10">
+  <div class="flex justify-center">
+    <div class="toolbar fixed top-0 left-0 right-0 flex bg-gray-300 bg-opacity-80 solid border-solid border-b-2 border-b-cyan border-t-0 border-r-0 border-l-0 text-gray-50 p-1.5 px-3 p min-w-[90%] h-10">
       <div class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan-50 gap-2.5': zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
           <img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -139,6 +139,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
       id: Math.random(),
       zoneId: zoneEditorStore.zone.id,
       zone: zoneEditorStore.zone,
+      type: 'BLOCK',
       position_x: tile.x,
       position_y: tile.y
     })