Added library node insert button to library page, no automatic parenting

app/imports/ui/components/ColorPicker.vue

@@ -3,7 +3,6 @@
     v-model="opened"
     :close-on-content-click="false"
     transition="slide-y-transition"
-    lazy
     left
   >
     <template #activator="{ on }">

app/imports/ui/components/global/IconPicker.vue

@@ -2,7 +2,6 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    lazy
     transition="slide-y-transition"
     min-width="290px"
     style="overflow-y: auto;"

app/imports/ui/dialogStack/DialogStack.vue

@@ -166,7 +166,7 @@
         let source = this.getTopElementByDataId(elementId);
         if (!source){
           console.warn(`Can't find source for ${elementId}`);
-          this.hiddenElement.style.opacity = null;
+          if (this.hiddenElement) this.hiddenElement.style.opacity = null;
           done();
           return;
         }

app/imports/ui/library/InsertLibraryNodeButton.vue

@@ -0,0 +1,68 @@
+<template lang="html">
+  <v-btn
+    fab
+    small
+    color="primary"
+    data-id="insert-library-node-button"
+    @click="insertLibraryNode"
+  >
+    <v-icon>add</v-icon>
+  </v-btn>
+</template>
+
+<script lang="js">
+import { getAncestry } from  '/imports/api/parenting/parenting.js';
+import { setDocToLastOrder } from '/imports/api/parenting/order.js';
+import LibraryNodes, { insertNode } from '/imports/api/library/LibraryNodes.js';
+import { getUserTier } from '/imports/api/users/patreon/tiers.js';
+
+export default {
+  props: {
+    libraryId: {
+      type: String,
+      required: true,
+    },
+    parentId: {
+      type: String,
+      default: undefined,
+    },
+    parentCollection: {
+      type: String,
+      default: undefined,
+    },
+  },
+  methods: {
+    insertLibraryNode(){
+      let libraryId = this.libraryId;
+      let tier = getUserTier(Meteor.userId())
+      if (tier && tier.paidBenefits){
+        let parentRef = {
+          id: this.parentId || libraryId,
+          collection: this.parentCollection || 'libraries',
+        };
+        let {ancestors} = getAncestry({parentRef});
+        this.$store.commit('pushDialogStack', {
+          component: 'library-node-creation-dialog',
+          elementId: 'insert-library-node-button',
+          callback(libraryNode){
+            if (!libraryNode) return;
+            libraryNode.parent = parentRef;
+            libraryNode.ancestors = ancestors;
+            setDocToLastOrder({collection: LibraryNodes, doc: libraryNode});
+            let libraryNodeId = insertNode.call(libraryNode);
+            return `tree-node-${libraryNodeId}`;
+          }
+        });
+      } else {
+        this.$store.commit('pushDialogStack', {
+          component: 'tier-too-low-dialog',
+          elementId: 'insert-library-node-button',
+        });
+      }
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/library/LibraryAndNode.vue

@@ -25,6 +25,11 @@
           class="mx-3"
           style="flex-grow: 0; height: 32px;"
         />
+        <insert-library-node-button
+          v-if="libraryId"
+          style="bottom: -32px"
+          :library-id="libraryId"
+        />
       </v-toolbar>
       <div
         v-if="libraryId"
@@ -68,6 +73,7 @@ import LibraryNodeDialog from '/imports/ui/library/LibraryNodeDialog.vue';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
 import Libraries from '/imports/api/library/Libraries.js';
 import LibraryContentsContainer from '/imports/ui/library/LibraryContentsContainer.vue';
+import InsertLibraryNodeButton from '/imports/ui/library/InsertLibraryNodeButton.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js';
@@ -78,6 +84,7 @@ export default {
     LibraryBrowser,
     LibraryNodeDialog,
     LibraryContentsContainer,
+    InsertLibraryNodeButton,
   },
   props: {
     selection: Boolean,

app/imports/ui/library/LibraryBrowser.vue

@@ -73,12 +73,9 @@
 
 <script lang="js">
 import LibraryContentsContainer from '/imports/ui/library/LibraryContentsContainer.vue';
-import { setDocToLastOrder } from '/imports/api/parenting/order.js';
-import LibraryNodes, { insertNode } from '/imports/api/library/LibraryNodes.js';
 import Libraries, { insertLibrary } from '/imports/api/library/Libraries.js';
 import { getUserTier } from '/imports/api/users/patreon/tiers.js';
 import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js';
-import { getAncestry } from  '/imports/api/parenting/parenting.js';
 
 export default {
   components: {
@@ -150,34 +147,6 @@ export default {
         data: {_id},
       });
     },
-    insertLibraryNode(libraryId){
-      if (this.paidBenefits){
-        let parentRef;
-        if (this.organizeMode && this.selectedNodeId){
-          parentRef = {collection: 'libraryNodes', id: this.selectedNodeId}
-        } else {
-          parentRef = {collection: 'libraries', id: libraryId};
-        }
-        let {ancestors} = getAncestry({parentRef});
-        this.$store.commit('pushDialogStack', {
-          component: 'library-node-creation-dialog',
-          elementId: `insert-node-${libraryId}`,
-          callback(libraryNode){
-            if (!libraryNode) return;
-            libraryNode.parent = parentRef;
-            libraryNode.ancestors = ancestors;
-            setDocToLastOrder({collection: LibraryNodes, doc: libraryNode});
-            let libraryNodeId = insertNode.call(libraryNode);
-            return `tree-node-${libraryNodeId}`;
-          }
-        });
-      } else {
-        this.$store.commit('pushDialogStack', {
-          component: 'tier-too-low-dialog',
-          elementId: `insert-node-${libraryId}`,
-        });
-      }
-    },
   },
 }
 </script>