Remove fav bot on drop outside list

src/components/Footer/FooterBar.vue

@@ -256,8 +256,29 @@ onMounted(() => {
 
 let sortable = undefined;
 function initializeSortable() {
+  let isDropOnFavBotBar = false;
+  const onDragEnd = (event) => {
+    event.target.removeEventListener("dragend", onDragEnd);
+    if (isDropOnFavBotBar) {
+      return; // dropped on fav bot bar
+    }
+    // if not drop on fav bot bar, remove it from favorite bar
+    event.target.parentNode.removeChild(event.target);
+    store.commit("removeFavoriteBot", event.target.dataset.id);
+    rerenderFavBotLogos.value++; // trigger re-render to refresh order and shortkey
+    nextTick().then(() => {
+      sortable = undefined;
+      initializeSortable(); // re-initialize sortable instance after re-render
+    });
+  };
+
   sortable = new Sortable(favBotLogosRef.value, {
     animation: 200, // ms, animation speed moving items when sorting
+    // dragging started
+    onStart: function (favBot) {
+      isDropOnFavBotBar = false;
+      favBot.item.addEventListener("dragend", onDragEnd);
+    },
     // dragging ended
     onEnd: async function (favBot) {
       if (favBot.oldIndex === favBot.newIndex) {
@@ -271,6 +292,9 @@ function initializeSortable() {
       });
     },
   });
+  favBotLogosRef.value.addEventListener("drop", () => {
+    isDropOnFavBotBar = true;
+  });
 }
 
 defineExpose({