From 0cb56f4cd1bf33e8982903c775adc2af11d44266 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Mon, 18 Sep 2023 17:16:01 -0300
Subject: [PATCH] Use new per-widget editing control on `MiniWidgetBar`

With this new approach, we are able to remove mini-widgets from the `MiniWidgetBar` in an intuitive and transparent way.

The user can basically drag mini-widgets out of the container while in edit-mode, instead of having to get out of edit-mode and click on the widget edit button.
---
 src/components/MiniWidgetContainer.vue    |  7 +++++++
 src/components/widgets/MiniWidgetsBar.vue | 20 ++++----------------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/MiniWidgetContainer.vue b/src/components/MiniWidgetContainer.vue
index 07fd654a0..85e703460 100644
--- a/src/components/MiniWidgetContainer.vue
+++ b/src/components/MiniWidgetContainer.vue
@@ -10,6 +10,8 @@
       @start="showWidgetTrashArea = true"
       @end="showWidgetTrashArea = false"
       @add="refreshWidgetsHashs"
+      @choose="(event) => emit('chooseMiniWidget', event)"
+      @unchoose="(event) => emit('unchooseMiniWidget', event)"
     >
       <div
         v-for="item in container.widgets"
@@ -65,6 +67,11 @@ import type { MiniWidget, MiniWidgetContainer } from '@/types/miniWidgets'
 
 import MiniWidgetInstantiator from './MiniWidgetInstantiator.vue'
 
+const emit = defineEmits<{
+  (e: 'chooseMiniWidget', value: unknown): void
+  (e: 'unchooseMiniWidget', value: unknown): void
+}>()
+
 // eslint-disable-next-line jsdoc/require-jsdoc
 interface Props {
   /**
diff --git a/src/components/widgets/MiniWidgetsBar.vue b/src/components/widgets/MiniWidgetsBar.vue
index 7e9044780..10e4467e8 100644
--- a/src/components/widgets/MiniWidgetsBar.vue
+++ b/src/components/widgets/MiniWidgetsBar.vue
@@ -1,27 +1,19 @@
 <template>
-  <div ref="widgetBar" class="flex flex-col items-center justify-center w-full h-full p-2 rounded-md bg-slate-600/50">
+  <div class="flex flex-col items-center justify-center w-full h-full p-2 rounded-md bg-slate-600/50">
     <MiniWidgetContainer
       :container="widget.options.miniWidgetsContainer"
       :wrap="true"
-      :allow-editing="allowEditing || widgetStore.editingMode"
+      :allow-editing="widgetStore.editingMode"
+      @choose-mini-widget="widget.managerVars.allowMoving = false"
+      @unchoose-mini-widget="widget.managerVars.allowMoving = true"
     />
-    <button
-      v-if="hovering || allowEditing"
-      :class="{ 'text-slate-700': !allowEditing }"
-      class="absolute top-0 right-0 m-1 transition-all text-slate-100"
-      @click="allowEditing = !allowEditing"
-    >
-      <FontAwesomeIcon icon="fa-solid fa-pen" />
-    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useElementHover } from '@vueuse/core'
 import { v4 as uuid } from 'uuid'
 import { toRefs } from 'vue'
 import { onBeforeMount } from 'vue'
-import { ref } from 'vue'
 
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
@@ -37,10 +29,6 @@ const props = defineProps<{
 const widget = toRefs(props).widget
 
 const widgetStore = useWidgetManagerStore()
-const allowEditing = ref(false)
-
-const widgetBar = ref()
-const hovering = useElementHover(widgetBar)
 
 onBeforeMount(() => {
   // Set initial widget options if they don't exist