feat: adds quick action to add module to recently focused group

Provides the user a quick way to add modules to groups. A new indicator in the top right of the
group shows which group is focused, ready to accept gallery modules when double clicked

fixes #496

src/components/GalleryItem.vue

@@ -122,11 +122,7 @@ export default {
     },
 
     async doubleClick() {
-      if (this.$store.state.focus.type !== "group") {
-        return;
-      }
-
-      const groupId = this.$store.state.focus.id;
+      const groupId = this.$store.state["ui-groups"].lastFocused;
       if (!groupId) {
         return;
       }

src/components/Group.vue

@@ -172,6 +172,11 @@
           @keypress.enter="endTitleEditable"
         />
       </div>
+      <figure
+        class="group__focusIndicator"
+        v-show="lastFocusedGroup"
+        title="Focused Group"
+      ></figure>
       <Container
         drag-handle-selector=".handle"
         orientation="horizontal"
@@ -365,6 +370,10 @@ export default {
       );
     },
 
+    lastFocusedGroup() {
+      return this.$store.state["ui-groups"].lastFocused === this.groupId;
+    },
+
     enabled: {
       get() {
         return this.group.enabled;
@@ -494,6 +503,8 @@ export default {
           type: "group"
         });
       }
+
+      this.$store.commit("ui-groups/SET_LAST_FOCUSED", this.groupId);
     },
 
     removeModule(moduleId) {
@@ -507,6 +518,10 @@ export default {
       this.$modV.store.dispatch("modules/removeActiveModule", {
         moduleId
       });
+
+      if (this.focused) {
+        this.$store.commit("ui-groups/CLEAR_LAST_FOCUSED");
+      }
     },
 
     toggleTitleEditable() {
@@ -594,6 +609,7 @@ export default {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .group__enabledCheckbox {
@@ -671,6 +687,16 @@ export default {
   max-width: 120px;
 }
 
+.group__focusIndicator {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
 .group__controls {
   background: #363636;
   color: white;

src/ui-store/modules/ui-groups.js

@@ -1,5 +1,6 @@
 const state = {
-  pinned: []
+  pinned: [],
+  lastFocused: null
 };
 
 const mutations = {
@@ -17,6 +18,14 @@ const mutations = {
     if (index > -1) {
       state.splice(index, 1);
     }
+  },
+
+  SET_LAST_FOCUSED(state, id) {
+    state.lastFocused = id;
+  },
+
+  CLEAR_LAST_FOCUSED(state) {
+    state.lastFocused = null;
   }
 };