Used tree node views in slot fill selection

app/imports/ui/creature/character/CharacterSheet.vue

@@ -121,7 +121,6 @@
         added(doc){
           if (!that.$subReady.singleCharacter) return;
           if (that.$store.state.rightDrawer) return;
-          if (that.$store.state.snackbars.snackbars.some(o => o._id === doc._id)) return;
           that.$store.dispatch('snackbar', {
             text: doc.text,
             showCloseButton: true,

app/imports/ui/creature/slots/SlotFillDialog.vue

@@ -19,7 +19,8 @@
               style="max-width: 500px;"
               hover
               ripple
-              :class="{'primary theme--dark': node._id === (selectedNode && selectedNode._id)}"
+              :class="{'primary': node._id === (selectedNode && selectedNode._id)}"
+              :dark="node._id === (selectedNode && selectedNode._id)"
               @click="selectedNode = node"
             >
               <v-img
@@ -31,14 +32,13 @@
               <v-card-title primary-title>
                 <div>
                   <h3 class="title mb-0">
-                    <property-icon
+                    <tree-node-view
-                      v-if="!node.picture"
                       class="mr-2"
                       :class="{'theme--dark': node._id === (selectedNode && selectedNode._id)}"
+                      :hide-icon="node.picture"
                       :model="node"
                       :color="node.color"
                     />
-                    {{ getTitle(node) }}
                   </h3>
                   <div v-if="node.description">
                     {{ node.description }}
@@ -108,14 +108,14 @@ import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import { parse, CompilationContext } from '/imports/parser/parser.js';
 import PROPERTIES from '/imports/constants/PROPERTIES.js';
-import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
+import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
 
 export default {
   components: {
 		DialogBase,
     ColumnLayout,
-    PropertyIcon,
+    TreeNodeView,
 	},
   props:{
     slotId: {

app/imports/ui/properties/treeNodeViews/AdjustmentTreeNode.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="layout row align-center justify-start">
     <property-icon
+      v-if="!hideIcon"
       class="mr-2"
       :model="model"
       :class="selected && 'primary--text'"

app/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="layout row align-center justify-start">
     <property-icon
+      v-if="!hideIcon"
       class="mr-2"
       :model="model"
       :color="model.color"

app/imports/ui/properties/treeNodeViews/DamageTreeNode.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="layout row align-center justify-start">
     <v-icon
+      v-if="!hideIcon"
       class="mr-2"
       :color="model.color"
       :class="selected && 'primary--text'"

app/imports/ui/properties/treeNodeViews/DefaultTreeNode.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="layout row align-center justify-start">
     <property-icon
+      v-if="!hideIcon"
       class="mr-2"
       :model="model"
       :color="model.color"

app/imports/ui/properties/treeNodeViews/EffectTreeNode.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="layout row align-center justify-start">
     <v-icon
+      v-if="!hideIcon"
       class="mr-2"
       :class="selected && 'primary--text'"
       :color="model.color"

app/imports/ui/properties/treeNodeViews/ItemTreeNode.vue

@@ -1,13 +1,14 @@
 <template lang="html">
   <div class="layout row align-center justify-start">
     <property-icon
+      v-if="!hideIcon"
       class="mr-2"
       :model="model"
       :color="model.color"
       :class="selected && 'primary--text'"
     />
     <v-icon
-      v-if="model.equipped"
+      v-if="model.equipped && !hideIcon"
       class="mr-2"
       :class="selected && 'primary--text'"
       small

app/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js

@@ -11,6 +11,7 @@ export default {
       default: () => ({}),
     },
     selected: Boolean,
+    hideIcon: Boolean,
   },
   computed: {
     title(){