Updated package-lock for last commit

app/.meteor/packages

@@ -3,50 +3,44 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-accounts-password@1.6.2
-accounts-ui@1.3.1
+accounts-password@1.7.0
 random@1.2.0
 dburles:collection-helpers
 reactive-var@1.0.11
 underscore@1.0.10
 momentjs:moment
 dburles:mongo-collection-instances
-percolate:migrations
 accounts-google@1.3.3
 email@2.0.0
 meteorhacks:subs-manager
 chuangbo:marked
 meteor-base@1.4.0
 mobile-experience@1.1.0
-mongo@1.10.0
+mongo@1.10.1
 session@1.2.0
-jquery@1.11.10
 tracker@1.2.0
-logging@1.1.20
-reload@1.3.0
+logging@1.2.0
+reload@1.3.1
 ejson@1.1.1
 check@1.3.1
 standard-minifier-js@2.6.0
 shell-server@0.5.0
-seba:minifiers-autoprefixer
 templates:array
-ecmascript@0.14.3
+ecmascript@0.15.0
 es5-shim@4.8.0
 reactive-dict@1.3.0
 percolate:synced-cron
 ongoworks:speakingurl
 service-configuration@1.0.11
-google-config-ui@1.0.1
-dynamic-import@0.5.2
+dynamic-import@0.6.0
 ddp-rate-limiter@1.0.9
 rate-limit@1.0.9
-meteortesting:mocha
 mdg:validated-method
 akryum:vue-router2
 static-html
 aldeed:collection2@3.0.0
 aldeed:schema-index
-akryum:vue-component
+zer0th:meteor-vuetify-loader
 accounts-patreon
 bozhao:link-accounts
 peerlibrary:reactive-publish
@@ -54,3 +48,6 @@ simple:rest
 simple:rest-method-mixin
 mikowals:batch-insert
 peerlibrary:subscription-data
+seba:minifiers-autoprefixer
+akryum:vue-component
+akryum:vue-sass

app/.meteor/release

@@ -1 +1 @@
-METEOR@1.11.1
+METEOR@2.1

app/.meteor/versions

@@ -1,27 +1,25 @@
-accounts-base@1.7.0
+accounts-base@1.8.0
 accounts-google@1.3.3
 accounts-oauth@1.2.0
-accounts-password@1.6.2
+accounts-password@1.7.0
 accounts-patreon@0.1.0
-accounts-ui@1.3.1
-accounts-ui-unstyled@1.4.2
 akryum:npm-check@0.1.2
 akryum:vue-component@0.15.2
 akryum:vue-component-dev-client@0.4.7
 akryum:vue-component-dev-server@0.1.4
 akryum:vue-router2@0.2.3
+akryum:vue-sass@0.1.2
 aldeed:collection2@3.2.1
 aldeed:schema-index@3.0.0
 allow-deny@1.1.0
-autoupdate@1.6.0
-babel-compiler@7.5.3
+autoupdate@1.7.0
+babel-compiler@7.6.0
 babel-runtime@1.5.0
 base64@1.0.12
 binary-heap@1.0.11
-blaze@2.3.4
 blaze-tools@1.0.10
 boilerplate-generator@1.7.1
-bozhao:link-accounts@2.2.1
+bozhao:link-accounts@2.3.2
 caching-compiler@1.2.2
 caching-html-compiler@1.1.3
 callback-hook@1.3.0
@@ -32,14 +30,14 @@ coffeescript-compiler@2.4.1
 dburles:collection-helpers@1.1.0
 dburles:mongo-collection-instances@0.3.5
 ddp@1.4.0
-ddp-client@2.3.3
+ddp-client@2.4.0
 ddp-common@1.4.0
 ddp-rate-limiter@1.0.9
 ddp-server@2.3.2
 deps@1.0.12
 diff-sequence@1.1.1
-dynamic-import@0.5.3
-ecmascript@0.14.3
+dynamic-import@0.6.0
+ecmascript@0.15.0
 ecmascript-runtime@0.7.0
 ecmascript-runtime-client@0.11.0
 ecmascript-runtime-server@0.10.0
@@ -48,49 +46,40 @@ email@2.0.0
 es5-shim@4.8.0
 fetch@0.1.1
 geojson-utils@1.0.10
-google-config-ui@1.0.1
 google-oauth@1.3.0
 hot-code-push@1.0.4
 html-tools@1.0.11
 htmljs@1.0.11
-http@1.4.2
+http@1.4.3
 id-map@1.1.0
 inter-process-messaging@0.1.1
-jquery@1.11.11
 lai:collection-extensions@0.2.1_1
 launch-screen@1.2.0
-less@2.8.0
 livedata@1.0.18
-lmieulet:meteor-coverage@1.1.4
 localstorage@1.2.0
-logging@1.1.20
+logging@1.2.0
 mdg:validated-method@1.2.0
 meteor@1.9.3
 meteor-base@1.4.0
-meteorhacks:picker@1.0.3
 meteorhacks:subs-manager@1.6.4
-meteortesting:browser-tests@1.3.4
-meteortesting:mocha@1.1.5
-meteortesting:mocha-core@7.0.1
 mikowals:batch-insert@1.2.0
 minifier-css@1.5.3
 minifier-js@2.6.0
-minimongo@1.6.0
+minimongo@1.6.1
 mobile-experience@1.1.0
 mobile-status-bar@1.1.0
 modern-browsers@0.1.5
-modules@0.15.0
+modules@0.16.0
 modules-runtime@0.12.0
 momentjs:moment@2.29.1
-mongo@1.10.0
-mongo-decimal@0.1.1
+mongo@1.10.1
+mongo-decimal@0.1.2
 mongo-dev-server@1.1.0
 mongo-id@1.0.7
 npm-bcrypt@0.9.3
 npm-mongo@3.8.1
 oauth@1.3.2
 oauth2@1.3.0
-observe-sequence@1.0.16
 ongoworks:speakingurl@9.0.0
 ordered-dict@1.1.0
 patreon-oauth@0.1.0
@@ -104,18 +93,18 @@ peerlibrary:reactive-mongo@0.4.0
 peerlibrary:reactive-publish@0.10.0
 peerlibrary:server-autorun@0.8.0
 peerlibrary:subscription-data@0.8.0
-percolate:migrations@0.9.8
 percolate:synced-cron@1.3.2
 promise@0.11.2
-raix:eventemitter@0.1.3
+raix:eventemitter@1.0.0
 random@1.2.0
 rate-limit@1.0.9
+react-fast-refresh@0.1.0
 reactive-dict@1.3.0
 reactive-var@1.0.11
-reload@1.3.0
+reload@1.3.1
 retry@1.1.0
 routepolicy@1.1.0
-seba:minifiers-autoprefixer@1.2.1
+seba:minifiers-autoprefixer@2.0.1
 service-configuration@1.0.11
 session@1.2.0
 sha@1.0.9
@@ -124,19 +113,16 @@ simple:json-routes@2.1.0
 simple:rest@1.1.1
 simple:rest-method-mixin@1.0.1
 socket-stream-client@0.3.1
-spacebars@1.0.15
 spacebars-compiler@1.1.3
 srp@1.1.0
 standard-minifier-js@2.6.0
 static-html@1.2.2
 templates:array@1.0.3
-templating@1.3.2
-templating-compiler@1.3.3
-templating-runtime@1.3.2
 templating-tools@1.1.2
 tmeasday:check-npm-versions@0.3.2
 tracker@1.2.0
 underscore@1.0.10
 url@1.3.1
-webapp@1.9.1
-webapp-hashing@1.0.9
+webapp@1.10.0
+webapp-hashing@1.1.0
+zer0th:meteor-vuetify-loader@0.1.30

app/imports/api/creature/Creatures.js

@@ -35,6 +35,16 @@ let CreatureSettingsSchema = new SimpleSchema({
     type: Boolean,
     optional: true,
   },
+  // Show the tree tab
+  showTreeTab: {
+    type: Boolean,
+    optional: true,
+  },
+  // Hide the spells tab
+  hideSpellsTab: {
+    type: Boolean,
+    optional: true,
+  },
   // How much each hitDice resets on a long rest
   hitDiceResetMultiplier: {
     type: Number,

app/imports/api/creature/actions/applyAction.js

@@ -4,7 +4,7 @@ import embedInlineCalculations from '/imports/api/creature/computation/afterComp
 export default function applyAction({prop, log}){
   let content = { name: prop.name };
   if (prop.summary){
-    content.description = embedInlineCalculations(
+    content.value = embedInlineCalculations(
       prop.summary, prop.summaryCalculations
     );
   }

app/imports/api/creature/actions/applyAdjustment.js

@@ -21,7 +21,7 @@ export default function applyAdjustment({
   context.errors.forEach(e => {
     log.content.push({
       name: 'Attribute damage error',
-      error: e.message || e.toString(),
+      value: e.message || e.toString(),
     });
   });
   if (damageTargets) {
@@ -41,15 +41,15 @@ export default function applyAdjustment({
       });
       log.content.push({
         name: 'Attribute damage',
-        resultPrefix: `${prop.stat} ${prop.operation === 'set' ? 'set to' : ''}`,
-        result: `${result.isNumber ? -result.value : result.toString()}`,
+        value: `${prop.stat}${prop.operation === 'set' ? ' set to' : ''}` +
+        ` ${result.isNumber ? -result.value : result.toString()}`,
       });
     });
   } else {
     log.content.push({
       name: 'Attribute damage',
-      resultPrefix: `${prop.stat} ${prop.operation === 'set' ? 'set to' : ''}`,
-      result: `${result.isNumber ? -result.value : result.toString()}`,
+      value: `${prop.stat}${prop.operation === 'set' ? ' set to' : ''}` +
+      ` ${result.isNumber ? -result.value : result.toString()}`,
     });
   }
 }

app/imports/api/creature/actions/applyAttack.js

@@ -17,7 +17,6 @@ export default function applyAttack({
 
   log.content.push({
     name: criticalHit ? 'Critical Hit!' : 'To Hit',
-    resultPrefix: `1d20 [${value}] + ${prop.rollBonusResult} = `,
-    result,
+    value: `1d20 [${value}] + ${prop.rollBonusResult} = ` + result,
   });
 }

app/imports/api/creature/actions/applyDamage.js

@@ -42,15 +42,15 @@ export default function applyDamage({
   if (result.constructor.name === 'ErrorNode'){
     log.content.push({
       name: 'Damage error',
-      error: result.toString(),
+      value: result.toString(),
     });
     return;
   }
 
   // Memoise the damage suffix for the log
-  let suffix = (criticalHit ? ' critical ' : '') +
+  let suffix = (criticalHit ? ' critical ' : ' ') +
     prop.damageType +
-    (prop.damageType !== 'healing' ? ' damage': '');
+    (prop.damageType !== ' healing ' ? ' damage ': '');
 
   if (damageTargets && damageTargets.length) {
     // Iterate through all the targets
@@ -69,7 +69,7 @@ export default function applyDamage({
       if (result.constructor.name === 'ErrorNode' || !result.isNumber){
         log.content.push({
           name: 'Damage error',
-          error: result.toString(),
+          value: result.toString(),
         });
         return;
       }
@@ -86,26 +86,21 @@ export default function applyDamage({
         // Target is same as self, log damage as such
         log.content.push({
           name,
-          result: damageDealt,
-          details: suffix + ' to self',
+          value: damageDealt + suffix + ' to self',
         });
       } else {
         log.content.push({
           name,
-          resultPrefix: 'Dealt ',
-          result: damageDealt,
-          details: suffix + `${target.name && ' to '}${target.name}`,
+          value: 'Dealt ' + damageDealt + suffix + ` ${target.name && ' to '}${target.name}`,
         });
         // Log the damage received on that creature's log as well
         insertCreatureLog.call({
           log: {
+            creatureId: target._id,
             content: [{
               name,
-              resultPrefix: 'Recieved ',
-              result: damageDealt,
-              details: suffix,
+              value: 'Recieved ' + damageDealt + suffix,
             }],
-            creatureId: target._id,
           }
         });
       }
@@ -114,8 +109,7 @@ export default function applyDamage({
     // There are no targets, just log the result
     log.content.push({
       name: prop.damageType === 'healing' ? 'Healing' : 'Damage',
-      result: result.toString(),
-      details: suffix,
+      value: result.toString() + suffix,
     });
   }
 }

app/imports/api/creature/actions/applyRoll.js

@@ -20,7 +20,6 @@ export default function applyRoll({
   }
   log.content.push({
     name: prop.name,
-    resultPrefix: prop.variableName + ' = ' + prop.roll + ' = ',
-    result: result.toString(),
+    value: prop.variableName + ' = ' + prop.roll + ' = ' + result.toString(),
   });
 }

app/imports/api/creature/actions/applySave.js

@@ -22,8 +22,7 @@ export default function applySave({
     let dc = result.value;
     log.content.push({
       name: prop.name,
-      resultPrefix: ' DC ',
-      result: result.toString(),
+      value: ' DC ' + result.toString(),
     });
     if (prop.target === 'self'){
       let save = CreaturesProperties.findOne({
@@ -36,7 +35,8 @@ export default function applySave({
       });
       if (!save){
         log.content.push({
-          error: 'No saving throw found: ' + prop.stat,
+          name: 'Saving throw error',
+          value: 'No saving throw found: ' + prop.stat,
         });
         return;
       }
@@ -60,9 +60,7 @@ export default function applySave({
       let saveSuccess = result >= dc;
       log.content.push({
         name: 'Save',
-        resultPrefix,
-        result,
-        details: saveSuccess ? 'Passed' : 'Failed'
+        value: resultPrefix + result + (saveSuccess ? 'Passed' : 'Failed')
       });
       return !saveSuccess;
     } else {
@@ -71,7 +69,8 @@ export default function applySave({
     }
   } catch (e){
     log.content.push({
-      error: e.toString(),
+      name: 'Save error',
+      value: e.toString(),
     });
   }
 }

app/imports/api/creature/actions/applyToggle.js

@@ -21,14 +21,13 @@ export default function applyToggle({
   if (result.constructor.name === 'ErrorNode') {
     log.content.push({
       name: 'Toggle error',
-      error: result.toString(),
+      value: result.toString(),
     });
     return false;
   }
   log.content.push({
     name: prop.name || 'Toggle',
-    resultPrefix: prop.condition + ' = ',
-    result: result.toString(),
+    value: prop.condition + ' = ' + result.toString(),
   });
   return !!result.value;
 }

app/imports/api/creature/actions/castSpellWithSlot.js

@@ -65,7 +65,7 @@ const castSpellWithSlot = new ValidatedMethod({
       action: spell,
       context: {slotLevel},
       creature,
-      targets: [target],
+      targets: target ? [target] : [],
       method: this,
     });
     // Note this only recomputes the top-level creature, not the nearest one

app/imports/api/creature/actions/spendResources.js

@@ -61,7 +61,7 @@ export default function spendResources({prop, log}){
     });
     log.content.push({
       name: 'Uses left',
-      result: prop.usesResult - (prop.usesUsed || 0) - 1,
+      value: prop.usesResult - (prop.usesUsed || 0) - 1,
     });
   }
 
@@ -84,10 +84,10 @@ export default function spendResources({prop, log}){
   // Log all the spending
   if (gainLog.length) log.content.push({
     name: 'Gained',
-    description: gainLog.join('\n'),
+    value: gainLog.join('\n'),
   });
   if (spendLog.length) log.content.push({
     name: 'Spent',
-    description: spendLog.join('\n'),
+    value: spendLog.join('\n'),
   });
 }

app/imports/api/creature/computation/engine/ComputationMemo.js

@@ -7,6 +7,7 @@ export default class ComputationMemo {
   constructor(props, creature){
     this.statsByVariableName = {};
     this.constantsByVariableName = {};
+    this.constantsById = {};
     this.extraStatsByVariableName = {};
     this.statsById = {};
     this.originalPropsById = {};
@@ -77,11 +78,7 @@ export default class ComputationMemo {
   }
   addConstant(prop){
     prop = this.registerProperty(prop);
-    if (
-      !this.constantsByVariableName[prop.variableName]
-    ){
-      this.constantsByVariableName[prop.variableName] = prop
-    }
+    this.constantsById[prop._id] = prop;
   }
   registerProperty(prop){
     this.originalPropsById[prop._id] = cloneDeep(prop);

app/imports/api/creature/computation/engine/combineStat.js

@@ -112,13 +112,14 @@ function combineSkill(stat, aggregator, memo){
   let profBonus = profBonusStat && profBonusStat.value;
 
   if (typeof profBonus !== 'number' && memo.statsByVariableName['level']){
-    let level = memo.statsByVariableName['level'].value;
+    let levelProp = memo.statsByVariableName['level'];
+    let level = levelProp.value;
     profBonus = Math.ceil(level / 4) + 1;
-    if (level._id){
-      stat.dependencies = union(stat.dependencies, [level._id]);
+    if (levelProp._id){
+      stat.dependencies = union(stat.dependencies, [levelProp._id]);
     }
-    if (level.dependencies){
-      stat.dependencies = union(stat.dependencies, level.dependencies);
+    if (levelProp.dependencies){
+      stat.dependencies = union(stat.dependencies, levelProp.dependencies);
     }
   } else {
     stat.dependencies = union(

app/imports/api/creature/computation/engine/computeConstant.js

@@ -3,4 +3,10 @@ import applyToggles from '/imports/api/creature/computation/engine/applyToggles.
 export default function computeConstant(constant, memo){
   // Apply any toggles
   applyToggles(constant, memo);
+  if (constant.deactivatedByToggle) return;
+  if (
+    !memo.constantsByVariableName[constant.variableName]
+  ){
+    memo.constantsByVariableName[constant.variableName] = constant
+  }
 }

app/imports/api/creature/computation/engine/computeEndStepProperty.js

@@ -1,8 +1,11 @@
 import evaluateCalculation from '/imports/api/creature/computation/engine/evaluateCalculation.js';
 import ConstantNode from '/imports/parser/parseTree/ConstantNode.js';
+import applyToggles from '/imports/api/creature/computation/engine/applyToggles.js';
 import { union } from 'lodash';
 
 export default function computeEndStepProperty(prop, memo){
+  applyToggles(prop, memo);
+
   switch (prop.type){
     case 'action':
     case 'spell':

app/imports/api/creature/computation/engine/computeLevels.js

@@ -1,4 +1,5 @@
 import { forOwn, has, union } from 'lodash';
+import applyToggles from '/imports/api/creature/computation/engine/applyToggles.js';
 
 export default function computeLevels(memo){
   computeClassLevels(memo);
@@ -7,11 +8,13 @@ export default function computeLevels(memo){
 
 function computeClassLevels(memo){
   forOwn(memo.classLevelsById, classLevel => {
+    applyToggles(classLevel, memo);
     //  class levels are mutually dependent
     classLevel.dependencies = union(
       classLevel.dependencies,
       Object.keys(memo.classLevelsById)
     );
+    if (classLevel.deactivatedByToggle) return;
     let name = classLevel.variableName;
     let stat = memo.statsByVariableName[name];
     if (!stat){
@@ -29,7 +32,7 @@ function computeClassLevels(memo){
 
 function computeTotalLevel(memo){
   let currentLevel = memo.statsByVariableName['level'];
-  if (!currentLevel){
+  if (!currentLevel || currentLevel.deactivatedByToggle){
     currentLevel = {
       value: 0,
       dependencies: [],

app/imports/api/creature/computation/engine/computeMemo.js

@@ -8,12 +8,12 @@ import computeInlineCalculations from '/imports/api/creature/computation/engine/
 import computeConstant from '/imports/api/creature/computation/engine/computeConstant.js';
 
 export default function computeMemo(memo){
-  // Compute all constants that could be used
-  forOwn(memo.constantsByVariableName, constant => {
-    computeConstant (constant, memo);
-  });
   // Compute level
   computeLevels(memo);
+  // Compute all constants that could be used
+  forOwn(memo.constantsById, constant => {
+    computeConstant (constant, memo);
+  });
   // Compute all stats, even if they are overriden
   forOwn(memo.statsById, stat => {
     computeStat (stat, memo);

app/imports/api/creature/computation/engine/computeStat.js

@@ -22,28 +22,25 @@ export default function computeStat(stat, memo){
   // Apply any toggles
   applyToggles(stat, memo);
 
-  if (!stat.deactivatedByToggle){
-    // Compute and aggregate all the effects
-    let aggregator = new EffectAggregator(stat, memo)
-    each(stat.computationDetails.effects, (effect) => {
-      computeEffect(effect, memo);
-      if (effect._id){
-        stat.dependencies = union(
-          stat.dependencies,
-          [effect._id]
-        );
-      }
+  // Compute and aggregate all the effects
+  let aggregator = new EffectAggregator(stat, memo)
+  each(stat.computationDetails.effects, (effect) => {
+    computeEffect(effect, memo);
+    if (effect.deactivatedByToggle) return;
+    if (effect._id){
       stat.dependencies = union(
         stat.dependencies,
-        effect.dependencies
-      )
-      if (!effect.deactivatedByToggle){
-        aggregator.addEffect(effect);
-      }
-    });
-    // Conglomerate all the effects to compute the final stat values
-    combineStat(stat, aggregator, memo);
-  }
+        [effect._id]
+      );
+    }
+    stat.dependencies = union(
+      stat.dependencies,
+      effect.dependencies
+    )
+    aggregator.addEffect(effect);
+  });
+  // Conglomerate all the effects to compute the final stat values
+  combineStat(stat, aggregator, memo);
   // Mark the attribute as computed
   stat.computationDetails.computed = true;
   stat.computationDetails.busyComputing = false;

app/imports/api/creature/computation/engine/writeAlteredProperties.js

@@ -8,7 +8,10 @@ export default function writeAlteredProperties(memo){
   // Loop through all properties on the memo
   forOwn(memo.propsById, changed => {
     let schema = propertySchemasIndex[changed.type];
-    if (!schema) return;
+    if (!schema){
+      console.warn('No schema for ' + changed.type);
+      return;
+    }
     let extraIds = changed.computationDetails.idsOfSameName;
     let ids;
     if (extraIds && extraIds.length){

app/imports/api/creature/creatureProperties/methods/damagePropertiesByName.js

@@ -50,7 +50,7 @@ const damagePropertiesByName = new ValidatedMethod({
       damagePropertyWork({property, operation, value});
       lastProperty = property;
     });
-    recomputePropertyDependencies(lastProperty);
+    if (lastProperty) recomputePropertyDependencies(lastProperty);
   }
 });
 

app/imports/api/creature/creatureProperties/methods/index.js

@@ -1,4 +1,4 @@
-import '//imports/api/creature/creatureProperties/methods/adjustQuantity.js';
+import '/imports/api/creature/creatureProperties/methods/adjustQuantity.js';
 import '/imports/api/creature/creatureProperties/methods/damagePropertiesByName.js';
 import '/imports/api/creature/creatureProperties/methods/damageProperty.js';
 import '/imports/api/creature/creatureProperties/methods/dealDamage.js';

app/imports/api/creature/creatureProperties/methods/insertProperty.js

@@ -7,6 +7,7 @@ import { reorderDocs } from '/imports/api/parenting/order.js';
 import recomputeInactiveProperties from '/imports/api/creature/denormalise/recomputeInactiveProperties.js';
 import { recomputeCreatureByDoc } from '/imports/api/creature/computation/methods/recomputeCreature.js';
 import recomputeInventory from '/imports/api/creature/denormalise/recomputeInventory.js';
+import { getAncestry } from '/imports/api/parenting/parenting.js';
 
 const insertProperty = new ValidatedMethod({
   name: 'creatureProperties.insert',
@@ -16,9 +17,24 @@ const insertProperty = new ValidatedMethod({
     numRequests: 5,
     timeInterval: 5000,
   },
-  run({creatureProperty}) {
-    let rootCreature = getRootCreatureAncestor(creatureProperty);
+  run({creatureProperty, parentRef}) {
+    // get the new ancestry for the properties
+		let {parentDoc, ancestors} = getAncestry({parentRef});
+
+		// Check permission to edit
+    let rootCreature;
+		if (parentRef.collection === 'creatures'){
+      rootCreature = parentDoc;
+		} else if (parentRef.collection === 'creatureProperties'){
+      rootCreature = getRootCreatureAncestor(parentDoc);
+		} else {
+			throw `${parentRef.collection} is not a valid parent collection`
+		}
     assertEditPermission(rootCreature, this.userId);
+
+    creatureProperty.parent = parentRef;
+    creatureProperty.ancestors = ancestors;
+
 		return insertPropertyWork({
       property: creatureProperty,
       creature: rootCreature,

app/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js

@@ -27,13 +27,17 @@ const insertPropertyFromLibraryNode = new ValidatedMethod({
 		parentRef: {
 			type: RefSchema,
 		},
+    order: {
+      type: Number,
+      optional: true,
+    },
 	}).validator(),
   mixins: [RateLimiterMixin],
   rateLimit: {
     numRequests: 5,
     timeInterval: 5000,
   },
-	run({nodeId, parentRef}) {
+	run({nodeId, parentRef, order}) {
 		// get the new ancestry for the properties
 		let {parentDoc, ancestors} = getAncestry({parentRef});
 
@@ -79,10 +83,14 @@ const insertPropertyFromLibraryNode = new ValidatedMethod({
 		});
 
 		// Order the root node
-		setDocToLastOrder({
-			collection: CreatureProperties,
-			doc: node,
-		});
+    if (order === undefined){
+      setDocToLastOrder({
+        collection: CreatureProperties,
+        doc: node,
+      });
+    } else {
+      node.order = order;
+    }
 
 		// Insert the creature properties
     CreatureProperties.batchInsert(nodes);

app/imports/api/creature/log/CreatureLogs.js

@@ -58,6 +58,7 @@ function removeOldLogs(creatureId){
     sort: {date: -1},
     skip: PER_CREATURE_LOG_LIMIT,
   });
+  if (!firstExpiredLog) return;
   // Remove all logs older than the one over the limit
   CreatureLogs.remove({
     creatureId,
@@ -69,32 +70,10 @@ function logToMessageData(log){
   let embed = {
     fields: [],
   };
-  log.content.forEach(c => {
-    let field = {};
-    let descriptionField = {};
-    if (c.name) field.name = c.name;
-    let valueArray = [];
-    if (c.error) valueArray.push(`*${c.error}*`);
-    if (c.resultPrefix) valueArray.push(`${c.resultPrefix}`);
-    if (c.result) valueArray.push(`\`${c.result}\``);
-    if (c.details) valueArray.push(c.details);
-    if (valueArray.length) field.value = valueArray.join(' ');
-    if (c.description){
-      if (!field.value){
-        field.value = c.description;
-      } else {
-        descriptionField.value = c.description;
-      }
-    }
-    if (field.name || field.value){
-      if (!field.name) field.name = '\u200b';
-      if (!field.value) field.value = '\u200b';
-      embed.fields.push(field);
-    }
-    if (descriptionField.value){
-      descriptionField.name = '\u200b';
-      embed.fields.push(descriptionField);
-    }
+  log.content.forEach(field => {
+    if (!field.name) field.name = '\u200b';
+    if (!field.value) field.value = '\u200b';
+    embed.fields.push(field);
   });
   return { embeds: [embed] };
 }
@@ -109,7 +88,7 @@ function logWebhook({log, creature}){
 }
 
 const insertCreatureLog = new ValidatedMethod({
-  name: 'creatureLogs.methods.insertCreatureLog',
+  name: 'creatureLogs.methods.insert',
   mixins: [RateLimiterMixin],
   rateLimit: {
     numRequests: 5,
@@ -138,7 +117,7 @@ const insertCreatureLog = new ValidatedMethod({
 export function insertCreatureLogWork({log, creature, method}){
   // Build the new log
   if (typeof log === 'string'){
-    log = {text: log};
+    log = {content: [{value: log}]};
   }
   log.date = new Date();
   // Insert it
@@ -190,30 +169,30 @@ const logRoll = new ValidatedMethod({
       parsedResult = parse(roll);
     } catch (e){
       let error = prettifyParseError(e);
-      logContent.push({error});
+      logContent.push({name: 'Parse Error', value: error});
     }
     if (parsedResult) try {
       let rollContext = new CompilationContext();
       let compiled = parsedResult.compile(creature.variables, rollContext);
       let compiledString = compiled.toString();
       if (!equalIgnoringWhitespace(compiledString, roll)) logContent.push({
-        details: roll
+        value: roll
       });
       logContent.push({
-        details: compiledString
+        value: compiledString
       });
       let rolled = compiled.roll(creature.variables, rollContext);
       let rolledString = rolled.toString();
       if (rolledString !== compiledString) logContent.push({
-        result: rolled.toString()
+        value: rolled.toString()
       });
       let result = rolled.reduce(creature.variables, rollContext);
       let resultString = result.toString();
       if (resultString !== rolledString) logContent.push({
-        result: resultString
+        value: resultString
       });
     } catch (e){
-      logContent = [{error: 'Calculation error'}];
+      logContent = [{name: 'Calculation error'}];
     }
     const log = {
       content: logContent,

app/imports/api/creature/log/LogContentSchema.js

@@ -3,31 +3,14 @@ import ErrorSchema from '/imports/api/properties/subSchemas/ErrorSchema.js';
 import RollDetailsSchema from '/imports/api/properties/subSchemas/RollDetailsSchema.js';
 
 let LogContentSchema = new SimpleSchema({
+  // The name of the field, included in discord webhook message
   name: {
     type: String,
     optional: true,
   },
-  error: {
-    type: String,
-    optional: true,
-  },
-  resultPrefix: {
-    type: String,
-    optional: true,
-  },
-  result: {
-    type: String,
-    optional: true,
-  },
-  expandedResult: {
-    type: String,
-    optional: true,
-  },
-  details: {
-    type: String,
-    optional: true,
-  },
-  description: {
+  // The details of the field, included in discord webhook message
+  // Markdown support
+  value: {
     type: String,
     optional: true,
   },

app/imports/api/creature/v1Migration/migrateCharacter.js

@@ -0,0 +1,12 @@
+import { fetch } from 'meteor/fetch'
+
+export default function importCharacter(url){
+  // Using v1's JSON API to fetch the character data in a usable format
+  // url -> https://dicecloud.com/character/<id>/json?key=<key>
+  fetch(url)
+    .then(response => response.json())
+    .then(data => {
+      let character = data.characters[0];
+      console.log(character.name  + ' fetched successfuly')
+    });
+}

app/imports/api/library/LibraryNodes.js

@@ -11,6 +11,7 @@ import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js
 import { softRemove } from '/imports/api/parenting/softRemove.js';
 import SoftRemovableSchema from '/imports/api/parenting/SoftRemovableSchema.js';
 import { storedIconsSchema } from '/imports/api/icons/Icons.js';
+import '/imports/api/library/methods/index.js';
 
 let LibraryNodes = new Mongo.Collection('libraryNodes');
 
@@ -79,27 +80,6 @@ const insertNode = new ValidatedMethod({
   },
 });
 
-const duplicateNode = new ValidatedMethod({
-  name: 'libraryNodes.duplicate',
-	validate: new SimpleSchema({
-    _id: {
-      type: String,
-      regEx: SimpleSchema.RegEx.Id,
-    }
-  }).validator(),
-  mixins: [RateLimiterMixin],
-  rateLimit: {
-    numRequests: 5,
-    timeInterval: 5000,
-  },
-  run({_id}) {
-    let libraryNode = LibraryNodes.findOne(_id);
-    assertNodeEditPermission(libraryNode, this.userId);
-    delete libraryNode._id;
-		return LibraryNodes.insert(libraryNode);
-  },
-})
-
 const updateLibraryNode = new ValidatedMethod({
   name: 'libraryNodes.update',
   validate({_id, path}){
@@ -195,7 +175,6 @@ export default LibraryNodes;
 export {
 	LibraryNodeSchema,
 	insertNode,
-  duplicateNode,
 	updateLibraryNode,
 	pullFromLibraryNode,
 	pushToLibraryNode,

app/imports/api/library/methods/duplicateLibraryNode.js

@@ -0,0 +1,85 @@
+import { ValidatedMethod } from 'meteor/mdg:validated-method';
+import SimpleSchema from 'simpl-schema';
+import { RateLimiterMixin } from 'ddp-rate-limiter-mixin';
+import LibraryNodes from '/imports/api/library/LibraryNodes.js';
+import { assertDocEditPermission } from '/imports/api/sharing/sharingPermissions.js';
+import {
+	setLineageOfDocs,
+	renewDocIds
+} from '/imports/api/parenting/parenting.js';
+import { reorderDocs } from '/imports/api/parenting/order.js';
+
+var snackbar;
+if (Meteor.isClient){
+  snackbar = require(
+    '/imports/ui/components/snackbars/SnackbarQueue.js'
+  ).snackbar
+}
+
+const DUPLICATE_CHILDREN_LIMIT = 50;
+
+const duplicateLibraryNode = new ValidatedMethod({
+  name: 'libraryNodes.duplicate',
+	validate: new SimpleSchema({
+    _id: {
+      type: String,
+      regEx: SimpleSchema.RegEx.Id,
+    }
+  }).validator(),
+  mixins: [RateLimiterMixin],
+  rateLimit: {
+    numRequests: 5,
+    timeInterval: 5000,
+  },
+  run({_id}) {
+    let libraryNode = LibraryNodes.findOne(_id);
+    assertDocEditPermission(libraryNode, this.userId);
+    let libraryNodeId = Random.id();
+    libraryNode._id = libraryNodeId;
+
+    let nodes = LibraryNodes.find({
+			'ancestors.id': _id,
+			removed: {$ne: true},
+		}, {
+      limit: DUPLICATE_CHILDREN_LIMIT + 1,
+      sort: {order: 1},
+    }).fetch();
+
+    if (nodes.length > DUPLICATE_CHILDREN_LIMIT){
+      nodes.pop();
+      if (Meteor.isClient){
+        snackbar({
+          text: `Only the first ${DUPLICATE_CHILDREN_LIMIT} children were duplicated`,
+        });
+      }
+    }
+
+    // re-map all the ancestors
+    setLineageOfDocs({
+			docArray: nodes,
+			newAncestry : [
+        ...libraryNode.ancestors,
+        {id: libraryNodeId, collection: 'libraryNodes'}
+      ],
+			oldParent : {id: _id, collection: 'libraryNodes'},
+		});
+
+    // Give the docs new IDs without breaking internal references
+    renewDocIds({docArray: nodes});
+
+    // Order the root node
+    libraryNode.order += 0.5;
+
+		LibraryNodes.batchInsert([libraryNode, ...nodes]);
+
+    // Tree structure changed by inserts, reorder the tree
+    reorderDocs({
+      collection: LibraryNodes,
+      ancestorId: libraryNode.ancestors[0].id,
+    });
+
+    return libraryNodeId;
+  },
+});
+
+export default duplicateLibraryNode;

app/imports/api/library/methods/index.js

@@ -0,0 +1 @@
+import '/imports/api/library/methods/duplicateLibraryNode.js';

app/imports/api/properties/computedOnlyPropertySchemasIndex.js

@@ -4,21 +4,22 @@ import { ComputedOnlyAdjustmentSchema } from '/imports/api/properties/Adjustment
 import { ComputedOnlyAttackSchema } from '/imports/api/properties/Attacks.js';
 import { ComputedOnlyAttributeSchema } from '/imports/api/properties/Attributes.js';
 import { ComputedOnlyBuffSchema } from '/imports/api/properties/Buffs.js';
-// import { ClassLevelSchema } from '/imports/api/properties/ClassLevels.js';
+import { ClassLevelSchema } from '/imports/api/properties/ClassLevels.js';
+import { ConstantSchema } from '/imports/api/properties/Constants.js';
 import { ComputedOnlyContainerSchema } from '/imports/api/properties/Containers.js';
 import { ComputedOnlyDamageSchema } from '/imports/api/properties/Damages.js';
 import { DamageMultiplierSchema } from '/imports/api/properties/DamageMultipliers.js';
 import { ComputedOnlyEffectSchema } from '/imports/api/properties/Effects.js';
 import { ComputedOnlyFeatureSchema } from '/imports/api/properties/Features.js';
-// import { FolderSchema } from '/imports/api/properties/Folders.js';
+import { FolderSchema } from '/imports/api/properties/Folders.js';
 import { ComputedOnlyItemSchema } from '/imports/api/properties/Items.js';
 import { ComputedOnlyNoteSchema } from '/imports/api/properties/Notes.js';
-// import { ProficiencySchema } from '/imports/api/properties/Proficiencies.js';
+import { ProficiencySchema } from '/imports/api/properties/Proficiencies.js';
 import { ComputedOnlyRollSchema } from '/imports/api/properties/Rolls.js';
 import { ComputedOnlySavingThrowSchema } from '/imports/api/properties/SavingThrows.js';
 import { ComputedOnlySkillSchema } from '/imports/api/properties/Skills.js';
 import { ComputedOnlySlotSchema } from '/imports/api/properties/Slots.js';
-// import { SlotFillerSchema } from '/imports/api/properties/SlotFillers.js';
+import { SlotFillerSchema } from '/imports/api/properties/SlotFillers.js';
 import { ComputedOnlySpellSchema } from '/imports/api/properties/Spells.js';
 import { ComputedOnlySpellListSchema } from '/imports/api/properties/SpellLists.js';
 import { ComputedOnlyToggleSchema } from '/imports/api/properties/Toggles.js';
@@ -29,23 +30,25 @@ const propertySchemasIndex = {
   attack: ComputedOnlyAttackSchema,
   attribute: ComputedOnlyAttributeSchema,
   buff: ComputedOnlyBuffSchema,
-  // classLevel: ClassLevelSchema,
+  classLevel: ClassLevelSchema,
+  constant: ConstantSchema,
+  container: ComputedOnlyContainerSchema,
   damage: ComputedOnlyDamageSchema,
   damageMultiplier: DamageMultiplierSchema,
   effect: ComputedOnlyEffectSchema,
   feature: ComputedOnlyFeatureSchema,
-  // folder: FolderSchema,
+  folder: FolderSchema,
+  item: ComputedOnlyItemSchema,
   note: ComputedOnlyNoteSchema,
-  // proficiency: ProficiencySchema,
+  proficiency: ProficiencySchema,
   propertySlot: ComputedOnlySlotSchema,
   roll: ComputedOnlyRollSchema,
   savingThrow: ComputedOnlySavingThrowSchema,
   skill: ComputedOnlySkillSchema,
+  slotFiller: SlotFillerSchema,
   spellList: ComputedOnlySpellListSchema,
   spell: ComputedOnlySpellSchema,
   toggle: ComputedOnlyToggleSchema,
-  container: ComputedOnlyContainerSchema,
-  item: ComputedOnlyItemSchema,
   any: new SimpleSchema({}),
 };
 

app/imports/parser/parseTree/OperatorNode.js

@@ -53,6 +53,10 @@ export default class OperatorNode extends ParseNode {
   }
   toString(){
     let {left, right, operator} = this;
+    // special case of adding a negative number
+    if (operator === '+' && right.isNumber && right.value < 0){
+      return `${left.toString()} - ${-right.value}`
+    }
     return `${left.toString()} ${operator} ${right.toString()}`;
   }
   traverse(fn){

app/imports/server/config/SyncedCronConfig.js

@@ -0,0 +1,6 @@
+import { SyncedCron } from 'meteor/percolate:synced-cron';
+
+SyncedCron.config({
+  // Log job run details to console
+  log: false,
+});

app/imports/server/publications/library.js

@@ -25,38 +25,50 @@ Meteor.publish('libraries', function(){
         {owner: this.userId},
         {writers: this.userId},
         {readers: this.userId},
-        {_id: {$in: subs}},
+        { _id: {$in: subs}, public: true },
       ]
+    }, {
+      sort: {name: 1}
+    });
+  });
+});
+
+Meteor.publish('library', function(libraryId){
+  if (!libraryId) return [];
+  libraryIdSchema.validate({libraryId});
+  this.autorun(function (){
+    let userId = this.userId;
+    let library = Libraries.findOne(libraryId);
+    try { assertViewPermission(library, userId) }
+    catch(e){
+      return this.error(e);
+    }
+    return Libraries.find({
+      _id: libraryId,
     });
   });
 });
 
 let libraryIdSchema = new SimpleSchema({
-  libraryIds: {
-    type: Array,
-  },
-  'libraryIds.$':{
+  libraryId:{
     type: String,
     regEx: SimpleSchema.RegEx.Id,
   },
 });
 
-Meteor.publish('libraryNodes', function(libraryIds){
-  libraryIdSchema.validate({libraryIds});
-  if (!libraryIds.length) return [];
+Meteor.publish('libraryNodes', function(libraryId){
+  if (!libraryId) return [];
+  libraryIdSchema.validate({libraryId});
   this.autorun(function (){
     let userId = this.userId;
-    for (let i in libraryIds){
-      let libraryId = libraryIds[i];
-      let library = Libraries.findOne(libraryId);
-      try { assertViewPermission(library, userId) }
-      catch(e){
-        return this.error(e);
-      }
+    let library = Libraries.findOne(libraryId);
+    try { assertViewPermission(library, userId) }
+    catch(e){
+      return this.error(e);
     }
     return [
       LibraryNodes.find({
-        'ancestors.id': {$in: libraryIds},
+        'ancestors.id': libraryId,
       }, {
         sort: {order: 1},
       }),

app/imports/ui/components/CoinValue.vue

@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import valueToCoins from '/imports/ui/utility/valueToCoins.js';
 
 export default {

app/imports/ui/components/ColorPicker.vue

@@ -3,19 +3,19 @@
     v-model="opened"
     :close-on-content-click="false"
     transition="slide-y-transition"
-    lazy
     left
   >
-    <v-btn
-      slot="activator"
-      icon
-    >
-      <v-icon>format_paint</v-icon>
-    </v-btn>
+    <template #activator="{ on }">
+      <v-btn
+        icon
+        v-on="on"
+      >
+        <v-icon>format_paint</v-icon>
+      </v-btn>
+    </template>
     <v-card class="overflow-hidden">
       <v-card-text>
         <v-layout
-          row
           wrap
         >
           <div
@@ -72,14 +72,14 @@
       </v-card-text>
       <v-card-actions>
         <v-btn
-          flat
+          text
           @click="$emit('input')"
         >
           Clear
         </v-btn>
         <v-spacer />
         <v-btn
-          flat
+          text
           @click="opened = false"
         >
           Done
@@ -89,7 +89,7 @@
   </v-menu>
 </template>
 
-<script>
+<script lang="js">
   import isDarkColor from '/imports/ui/utility/isDarkColor.js';
   import vuetifyColors from 'vuetify/es5/util/colors';
   import { kebabToCamelCase, camelToKebabCase } from '/imports/ui/utility/swapCase.js';

app/imports/ui/components/ColumnLayout.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
   props: {
     wideColumns: Boolean,

app/imports/ui/components/IncrementButton.vue

@@ -30,7 +30,7 @@
   </v-menu>
 </template>
 
-<script>
+<script lang="js">
 import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
 
 export default {

app/imports/ui/components/IncrementMenu.vue

@@ -1,6 +1,5 @@
 <template>
   <v-layout
-    row
     align-center
     justify-center
     class="increment-menu"
@@ -44,9 +43,9 @@
     <v-btn
       :small="!flat"
       :fab="!flat"
-      :flat="flat"
+      :text="flat"
       :icon="flat"
-      class="filled"
+      class="mx-2 filled"
       @click="commitEdit"
     >
       <v-icon>done</v-icon>
@@ -54,9 +53,9 @@
     <v-btn
       :small="!flat"
       :fab="!flat"
-      :flat="flat"
+      :text="flat"
       :icon="flat"
-      class="mx-0 filled"
+      class="filled"
       @click="cancelEdit"
     >
       <v-icon>close</v-icon>
@@ -65,7 +64,7 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="js">
 	export default {
     inject: {
       context: { default: {} }

app/imports/ui/components/LabeledFab.vue

@@ -14,7 +14,7 @@
   </v-btn>
 </template>
 
-<script>
+<script lang="js">
   /*
    * Because speed dials only work well with v-btn's as children, this hacky
    * component creates a v-btn with a label.

app/imports/ui/components/MarkdownText.vue

@@ -6,7 +6,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 	import marked from 'marked';
 
 	export default {

app/imports/ui/components/ToolbarCard.vue

@@ -1,9 +1,9 @@
 <template lang="html">
   <v-card
     :hover="hasClickListener"
-    :elevation="hovering ? 8 : undefined"
     class="toolbar-card"
-    @click="$emit('click')"
+    :class="hovering ? 'elevation-8': ''"
+    @click.native="$emit('click')"
   >
     <v-toolbar
       flat
@@ -23,14 +23,16 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 	import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+  import getThemeColor from '/imports/ui/utility/getThemeColor.js';
+
 	export default {
 		props: {
 			color: {
 				type: String,
 				default(){
-					return this.$vuetify.theme.secondary;
+          return getThemeColor('secondary');
 				},
 			},
 		},
@@ -62,4 +64,7 @@
 .toolbar-card .v-toolbar__title {
   font-size: 14px;
 }
+.toolbar-card {
+  transition: box-shadow .4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
 </style>

app/imports/ui/components/TreeDetailLayout.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div
-    class="layout row"
+    class="layout"
     style="height: 100%;"
   >
     <div
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 export default {
   computed:{
     computedTreeStyle(){

app/imports/ui/components/computation/EmbedInlineComputations.vue

@@ -4,7 +4,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 import MarkdownText from '/imports/ui/components/MarkdownText.vue';
 import embedInlineCalculations from '/imports/api/creature/computation/afterComputation/embedInlineCalculations.js';
 

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

@@ -16,7 +16,7 @@
         :loading="loading"
         :error-messages="errors"
         :disabled="isDisabled"
-        box
+        filled
         v-on="on"
         @focus="focused = true"
         @blur="focused = false"
@@ -29,7 +29,7 @@
   </v-menu>
 </template>
 
-<script>
+<script lang="js">
 import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 import { format } from 'date-fns';
 

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

@@ -2,13 +2,12 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    lazy
     transition="slide-y-transition"
     min-width="290px"
     style="overflow-y: auto;"
   >
     <template #activator="{ on }">
-      <div class="layout row align-center">
+      <div class="layout align-center">
         <v-label>{{ label }}</v-label>
         <v-btn
           :loading="loading"
@@ -32,7 +31,7 @@
     </template>
     <v-card>
       <v-card-text>
-        <div class="layout row">
+        <div class="layout">
           <text-field
             ref="iconSearchField"
             label="Search icons"
@@ -51,7 +50,6 @@
           </v-btn>
         </div>
         <v-layout
-          row
           wrap
           style="max-height: 400px; overflow-y: auto;"
         >
@@ -78,7 +76,7 @@
   </v-menu>
 </template>
 
-<script>
+<script lang="js">
 import SvgIcon from '/imports/ui/components/global/SvgIcon.vue';
 import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 import { findIcons } from '/imports/api/icons/Icons.js';

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

@@ -9,7 +9,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
   import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
   export default {

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

@@ -7,7 +7,7 @@
     :menu-props="{auto: true, lazy: true}"
     :search-input.sync="searchInput"
     :disabled="isDisabled"
-    box
+    filled
     @change="customChange"
     @focus="focused = true"
     @blur="focused = false"
@@ -19,7 +19,7 @@
   </v-combobox>
 </template>
 
-<script>
+<script lang="js">
 	import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
 	export default {

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

@@ -6,7 +6,7 @@
     :value="safeValue"
     :menu-props="{auto: true, lazy: true}"
     :disabled="isDisabled"
-    box
+    filled
     @change="change"
     @focus="focused = true"
     @blur="focused = false"
@@ -18,7 +18,7 @@
   </v-select>
 </template>
 
-<script>
+<script lang="js">
 	import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
 	export default {

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

@@ -9,7 +9,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
   import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
   export default {

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

@@ -19,7 +19,7 @@
   </i>
 </template>
 
-<script>
+<script lang="js">
 const SIZE_MAP = {
   xSmall: '12px',
   small: '16px',

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

@@ -6,14 +6,14 @@
     :value="safeValue"
     :disabled="isDisabled"
     :auto-grow="autoGrow"
-    box
+    filled
     @input="input"
     @focus="focused = true"
     @blur="focused = false"
   />
 </template>
 
-<script>
+<script lang="js">
 	import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
 	export default {

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

@@ -6,7 +6,7 @@
     :error-messages="errors"
     :value="safeValue"
     :disabled="isDisabled"
-    :box="!regular"
+    :filled="!regular"
     @input="input"
     @focus="focused = true"
     @blur="focused = false"
@@ -14,7 +14,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
   import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
 
   export default {

app/imports/ui/components/propertyToolbar.vue

@@ -47,45 +47,45 @@
             </v-btn>
           </template>
           <v-list>
-            <v-list-tile
+            <v-list-item
               v-if="$listeners && $listeners.duplicate"
               @click="$emit('duplicate')"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   Duplicate
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-icon>file_copy</v-icon>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item
               v-if="$listeners && $listeners.move"
               @click="$emit('move')"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   Move
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-icon>send</v-icon>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item
               v-if="$listeners && $listeners.remove"
               @click="$emit('remove')"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   Delete
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-icon>delete</v-icon>
-              </v-list-tile-action>
-            </v-list-tile>
+              </v-list-item-action>
+            </v-list-item>
           </v-list>
         </v-menu>
       </v-layout>
@@ -118,11 +118,12 @@
   </v-toolbar>
 </template>
 
-<script>
+<script lang="js">
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import ColorPicker from '/imports/ui/components/ColorPicker.vue';
+import getThemeColor from '/imports/ui/utility/getThemeColor.js';
 
 export default {
   components: {
@@ -142,7 +143,7 @@ export default {
       return isDarkColor(this.color);
     },
     color(){
-      return this.model && this.model.color || this.$vuetify.theme.secondary;
+      return this.model && this.model.color || getThemeColor('secondary');
     },
     title(){
       let model = this.model;

app/imports/ui/components/rolls/Check.vue

@@ -2,22 +2,22 @@
   <v-card>
     <template v-if="!result">
       <v-btn-toggle v-model="advantage">
-        <v-btn flat>
+        <v-btn text>
           Advantage
         </v-btn>
-        <v-btn flat>
+        <v-btn text>
           Disadvantage
         </v-btn>
       </v-btn-toggle>
       <v-card-text>
-        <div class="layout row justify-center align-center">
+        <div class="layout justify-center align-center">
           <v-btn
             large
             fab
-            outline
+            outlined
             @click="makeRoll"
           >
-            <div class="display-1">
+            <div class="text-h4">
               {{ numberToSignedString(bonus) }}
             </div>
           </v-btn>
@@ -26,7 +26,7 @@
     </template>
     <template v-else>
       <div>
-        <div class="title">
+        <div class="text-h6">
           <span
             v-for="(roll, index) of rolls"
             :key="index"
@@ -39,7 +39,7 @@
             {{ numberToSignedString(bonus) }}
           </span>
         </div>
-        <div class="display-1">
+        <div class="text-h4">
           {{ result }}
         </div>
       </div>
@@ -47,7 +47,7 @@
   </v-card>
 </template>
 
-<script>
+<script lang="js">
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 export default {
   props: {

app/imports/ui/components/snackbars/SnackbarQueue.js

@@ -0,0 +1,16 @@
+// Modified from https://gitlab.com/tozd/vue/snackbar-que
+import Vue from 'vue';
+
+const globalState = Vue.observable({queue: []});
+let lastSnackbarId = 0;
+
+function snackbar(data) {
+  globalState.queue.push({
+    data,
+    id: ++lastSnackbarId,
+    enqueuedAt: new Date(),
+    shown: false,
+  });
+}
+
+export {snackbar, globalState}

app/imports/ui/components/snackbars/SnackbarQueue.vue

@@ -0,0 +1,128 @@
+<template lang="html">
+  <v-snackbar
+    bottom
+    left
+    v-bind="$attrs"
+    :value="isShown"
+    :timeout="timeout"
+    @input="value => isShown = value"
+  >
+    <div class="layout align-center">
+      <template v-if="snackbar && snackbar.data">
+        <div v-if="snackbar.data.text">
+          {{ snackbar.data.text }}
+        </div>
+        <template v-else-if="snackbar.data.content">
+          <log-content :model="snackbar.data.content" />
+        </template>
+        <v-spacer />
+        <v-btn
+          v-if="snackbar.data.callback"
+          color="primary"
+          text
+          @click="closeSnackbar(); snackbar.data.callback()"
+        >
+          {{ snackbar.data.callbackName }}
+        </v-btn>
+      </template>
+    </div>
+    <template #action="{ attrs }">
+      <v-btn
+        icon
+        v-bind="attrs"
+        @click="closeSnackbar"
+      >
+        <v-icon>close</v-icon>
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script lang="js">
+// Modified from https://gitlab.com/tozd/vue/snackbar-queue
+import { globalState } from '/imports/ui/components/snackbars/SnackbarQueue.js';
+import LogContent from '/imports/ui/log/LogContent.vue';
+
+export default {
+  components: {
+    LogContent,
+  },
+  props: {
+    timeout: {
+      type: Number,
+      default: 6000,
+    },
+    pause: {
+      type: Number,
+      default: 300,
+    },
+  },
+  data() {
+    return {
+      isShown: false,
+      snackbar: null,
+    };
+  },
+  watch: {
+    isShown(newValue) {
+      if (newValue === false && this.snackbar) {
+        const snackbarIndex = globalState.queue.findIndex((element) => element.id === this.snackbar.id);
+        if (snackbarIndex > -1) {
+          globalState.queue.splice(snackbarIndex, 1);
+        }
+        this.snackbar = null;
+      }
+    },
+  },
+  created() {
+    this.handle = null;
+    this.unwait = null;
+    this.showNextSnackbar();
+  },
+  methods: {
+    clearSnackbarState() {
+      if (this.handle) {
+        clearTimeout(this.handle);
+        this.handle = null;
+      }
+
+      if (this.unwait) {
+        this.unwait();
+        this.unwait = null;
+      }
+    },
+    showNextSnackbar() {
+      this.clearSnackbarState();
+
+      // Wait for the first next snackbar to be available.
+      this.unwait = this.$wait(function () {
+        // Snackbars are enqueued from oldest to newest and "find" searches array elements in
+        // same order as well, so the first one which matches is also the oldest one.
+        return globalState.queue.find((element) => element.shown === false);
+      }, function (snackbar) {
+        this.unwait = null;
+
+        snackbar.shown = true;
+
+        this.snackbar = snackbar;
+        this.isShown = true;
+
+        this.handle = setTimeout(() => {
+          this.handle = null;
+
+          this.showNextSnackbar();
+        }, this.timeout + this.pause);
+      });
+    },
+    closeSnackbar() {
+      this.clearSnackbarState();
+
+      this.isShown = false;
+
+      setTimeout(() => {
+        this.showNextSnackbar();
+      }, this.pause);
+    },
+  },
+};
+</script>

app/imports/ui/components/snackbars/Snackbars.vue

@@ -1,48 +0,0 @@
-<template lang="html">
-  <v-snackbar
-    v-if="snackbar"
-    :key="snackbar.text"
-    auto-height
-    bottom
-    :value="true"
-    :timeout="0"
-  >
-    {{ snackbar.text }}
-    <v-btn
-      v-if="snackbar.callback"
-      class="primary--text"
-      flat
-      icon
-      @click="doCallback"
-    >
-      {{ snackbar.callbackName }}
-    </v-btn>
-    <v-btn
-      v-if="snackbar.showCloseButton"
-      flat
-      icon
-      @click="$store.dispatch('closeSnackbar')"
-    >
-      <v-icon>close</v-icon>
-    </v-btn>
-  </v-snackbar>
-</template>
-
-<script>
-export default {
-  computed: {
-    snackbar(){
-      return this.$store.state.snackbars.snackbars[0];
-    }
-  },
-  methods: {
-    doCallback(){
-      this.snackbar.callback();
-      this.$store.dispatch('closeSnackbar')
-    }
-  }
-}
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/components/snackbars/snackboxStore.js

@@ -1,47 +0,0 @@
-const snackbarStore = {
-  state: {
-    snackbars: [],
-    snackbarTimout: undefined,
-  },
-  mutations: {
-    addSnackbar(state, value){
-      state.snackbars.push(value)
-    },
-    closeCurrentSnackbar (state){
-      state.snackbars.shift();
-    },
-    cancelSnackbarTimeout (state){
-      if(state.snackbarTimout){
-        clearTimeout(state.snackbarTimout);
-      }
-    },
-    setSnackbarTimout(state, value){
-      state.snackbarTimout = value;
-    },
-  },
-  actions: {
-    snackbar({dispatch, commit}, value){
-      // value = {
-      //   text,
-      //   showCloseButton,
-      //   callback,
-      //   callbackName
-      // }
-      commit('addSnackbar', value);
-      commit('setSnackbarTimout', setTimeout(() => {
-        dispatch('closeSnackbar');
-      }, 5000));
-    },
-    closeSnackbar({dispatch, commit, state}){
-      commit('closeCurrentSnackbar');
-      commit('cancelSnackbarTimeout');
-      if (state.snackbars.length){
-        commit('setSnackbarTimout', setTimeout(() => {
-          dispatch('closeSnackbar');
-        }, 5000));
-      }
-    },
-  }
-};
-
-export default snackbarStore;

app/imports/ui/components/tree/TreeNode.vue

@@ -5,7 +5,7 @@
     :data-id="`tree-node-${node._id}`"
   >
     <div
-      class="layout row align-center justify-start tree-node-title"
+      class="layout align-center justify-start tree-node-title"
       style="cursor: pointer;"
       :class="selected && 'primary--text'"
       @click.stop="$emit('selected', node._id)"
@@ -22,7 +22,7 @@
         </v-icon>
       </v-btn>
       <div
-        class="layout row align-center justify-start pr-1"
+        class="layout align-center justify-start pr-1"
         style="flex-grow: 0;"
       >
         <v-icon
@@ -70,7 +70,7 @@
   </v-sheet>
 </template>
 
-<script>
+<script lang="js">
 	/**
 	* TreeNode's are list item views of character properties. Every property which
 	* can belong to the character is shown in the tree view of the character
@@ -100,7 +100,7 @@
 		}},
 		computed: {
 			hasChildren(){
-				return this.children && this.children.length || this.lazy && !this.expanded;
+				return this.children && !!this.children.length || this.lazy && !this.expanded;
 			},
 			showExpanded(){
 				return this.expanded && (this.organize || this.hasChildren)
@@ -159,9 +159,15 @@
     transition: none !important;
   }
 	.theme--light .tree-node-title:hover {
-		background: rgba(0,0,0,.04);
+		background-color: rgba(0,0,0,.04);
 	}
-  .dummy-node {
+  .theme--dark .tree-node-title:hover {
+		background-color: rgba(255,255,255,.04);
+	}
+  .tree-node-title{
+    transition: background ease 0.3s, color ease 0.15s;
+  }
+  .tree-node-title, .dummy-node {
     height: 40px;
   }
 </style>

app/imports/ui/components/tree/TreeNodeList.vue

@@ -30,7 +30,7 @@
   </draggable>
 </template>
 
-<script>
+<script lang="js">
 	import draggable from 'vuedraggable';
 	import TreeNode from '/imports/ui/components/tree/TreeNode.vue';
 	import { isParentAllowed } from '/imports/api/parenting/parenting.js';

app/imports/ui/creature/CreatureForm.vue

@@ -39,6 +39,28 @@
           :input-value="model.settings.hideUnusedStats"
           @change="value => $emit('change', {path: ['settings','hideUnusedStats'], value: !!value})"
         />
+        <v-switch
+          label="Show spells tab"
+          :input-value="!model.settings.hideSpellsTab"
+          @change="value => {
+            $emit('change', {path: ['settings','hideSpellsTab'], value: !value});
+            $store.commit(
+              'setTabForCharacterSheet',
+              {id: model._id, tab: 0}
+            );
+          }"
+        />
+        <v-switch
+          label="Show tree tab"
+          :input-value="model.settings.showTreeTab"
+          @change="value => {
+            $emit('change', {path: ['settings','showTreeTab'], value: !!value});
+            $store.commit(
+              'setTabForCharacterSheet',
+              {id: model._id, tab: 0}
+            );
+          }"
+        />
         <text-field
           label="Hit Dice reset multiplier"
           hint="What fraction of your hit dice are reset every long rest"
@@ -82,7 +104,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import FormSection, {FormSections} from '/imports/ui/properties/forms/shared/FormSection.vue';
 
 export default {

app/imports/ui/creature/CreatureFormDialog.vue

@@ -20,7 +20,7 @@
     <v-spacer slot="actions" />
     <v-btn
       slot="actions"
-      flat
+      text
       @click="$store.dispatch('popDialogStack')"
     >
       Done
@@ -28,7 +28,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import {updateCreature} from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';

app/imports/ui/creature/CreatureListTile.vue

@@ -2,8 +2,8 @@
   lang="html"
   functional
 >
-  <v-list-tile v-bind="$attrs">
-    <v-list-tile-avatar :color="model.color || 'grey'">
+  <v-list-item v-bind="$attrs">
+    <v-list-item-avatar :color="model.color || 'grey'">
       <img
         v-if="model.avatarPicture"
         :src="model.avatarPicture"
@@ -12,25 +12,25 @@
       <template v-else>
         {{ model.initial }}
       </template>
-    </v-list-tile-avatar>
-    <v-list-tile-content>
-      <v-list-tile-title>
+    </v-list-item-avatar>
+    <v-list-item-content>
+      <v-list-item-title>
         {{ model.name }}
-      </v-list-tile-title>
-      <v-list-tile-sub-title>
+      </v-list-item-title>
+      <v-list-item-subtitle>
         {{ model.alignment }} {{ model.gender }} {{ model.race }}
-      </v-list-tile-sub-title>
-    </v-list-tile-content>
-    <v-list-tile-action v-if="selection">
+      </v-list-item-subtitle>
+    </v-list-item-content>
+    <v-list-item-action v-if="selection">
       <v-checkbox
         :input-value="selected && selected.has(model._id)"
         @change="$emit('select')"
       />
-    </v-list-tile-action>
-  </v-list-tile>
+    </v-list-item-action>
+  </v-list-item>
 </template>
 
-<script type="text/javascript">
+<script lang="js">
 export default {
   props: {
     model: {

app/imports/ui/creature/RestButton.vue

@@ -2,7 +2,7 @@
   <v-btn
     :loading="loading"
     :disabled="context.editPermission === false"
-    outline
+    outlined
     style="width: 160px;"
     @click="rest"
   >
@@ -13,7 +13,7 @@
   </v-btn>
 </template>
 
-<script>
+<script lang="js">
 import restCreature from '/imports/api/creature/restCreature.js';
 
 export default {

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

@@ -52,7 +52,6 @@
             label="Race"
           />
           <v-layout
-            row
             justify-center
             align-center
           >
@@ -225,20 +224,19 @@
             :items="hitDiceItems"
             label="Hit Dice"
           />
-          </v-text-field>
         </v-stepper-content>
       </v-stepper-items>
     </v-stepper>
     <template slot="actions">
       <v-btn
-        flat
+        text
         @click="$emit('pop')"
       >
         Cancel
       </v-btn>
       <v-btn
         v-if="step > 1"
-        flat
+        text
         @click="step--"
       >
         Back
@@ -262,7 +260,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
   import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 	const getCost = function(score){
 		const costs = {

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

@@ -22,7 +22,7 @@
     <v-spacer slot="actions" />
     <v-btn
       slot="actions"
-      flat
+      text
       @click="$store.dispatch('popDialogStack')"
     >
       Cancel
@@ -30,7 +30,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import removeCreature from '/imports/api/creature/removeCreature.js';

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

@@ -36,6 +36,7 @@
       >
         <v-tabs-items
           :value="$store.getters.tabById($route.params.id)"
+          class="card-background"
           @change="e => $store.commit(
             'setTabForCharacterSheet',
             {id: $route.params.id, tab: e}
@@ -50,13 +51,13 @@
           <v-tab-item>
             <inventory-tab :creature-id="creatureId" />
           </v-tab-item>
-          <v-tab-item>
+          <v-tab-item v-show="!creature.settings.hideSpellsTab">
             <spells-tab :creature-id="creatureId" />
           </v-tab-item>
           <v-tab-item>
             <character-tab :creature-id="creatureId" />
           </v-tab-item>
-          <v-tab-item>
+          <v-tab-item v-if="creature.settings.showTreeTab">
             <tree-tab :creature-id="creatureId" />
           </v-tab-item>
         </v-tabs-items>
@@ -65,7 +66,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   //TODO add a "no character found" screen if shown on a false address
   // or on a character the user does not have permission to view
 	import Creatures from '/imports/api/creature/Creatures.js';
@@ -77,6 +78,7 @@
   import TreeTab from '/imports/ui/creature/character/characterSheetTabs/TreeTab.vue';
   import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
   import CreatureLogs from '/imports/api/creature/log/CreatureLogs.js';
+  import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
 	export default {
 		components: {
@@ -118,13 +120,10 @@
       this.logObserver = CreatureLogs.find({
         creatureId: this.creatureId,
       }).observe({
-        added(doc){
+        added({content}){
           if (!that.$subReady.singleCharacter) return;
           if (that.$store.state.rightDrawer) return;
-          that.$store.dispatch('snackbar', {
-            text: doc.name,
-            showCloseButton: true,
-          });
+          snackbar({content});
         },
       });
     },

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

@@ -1,6 +1,6 @@
 <template lang="html">
   <v-speed-dial
-    v-if="speedDials && speedDials.length"
+    v-if="speedDials"
     v-model="fab"
     direction="bottom"
   >
@@ -10,10 +10,19 @@
         color="primary"
         fab
         data-id="insert-creature-property-fab"
+        class="insert-creature-property-fab"
         small
       >
-        <v-icon>add</v-icon>
-        <v-icon>close</v-icon>
+        <transition
+          name="fab-rotate"
+        >
+          <v-icon
+            style="transition: transform 0.2s ease-in-out"
+            :style="fab && 'transform: rotate(45deg)'"
+          >
+            add
+          </v-icon>
+        </transition>
       </v-btn>
     </template>
 
@@ -27,15 +36,83 @@
       :disabled="!editPermission"
       @click="insertPropertyOfType(type)"
     />
+    <template v-if="tabNumber === 5">
+      <labeled-fab
+        key="property"
+        color="primary"
+        data-id="insert-creature-property-btn"
+        label="New Property"
+        icon="create"
+        :disabled="!editPermission"
+        @click="insertTreeProperty"
+      />
+      <labeled-fab
+        key="property"
+        color="primary"
+        data-id="insert-creature-property-from-library-btn"
+        label="Property From Library"
+        icon="book"
+        :disabled="!editPermission"
+        @click="propertyFromLibrary"
+      />
+    </template>
   </v-speed-dial>
 </template>
 
-<script>
+<script lang="js">
   import LabeledFab from '/imports/ui/components/LabeledFab.vue';
-  import { setDocToLastOrder } from '/imports/api/parenting/order.js';
+  import { getHighestOrder } from '/imports/api/parenting/order.js';
   import insertProperty from '/imports/api/creature/creatureProperties/methods/insertProperty.js';
   import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
   import PROPERTIES from '/imports/constants/PROPERTIES.js';
+  import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
+
+  function getParentAndOrderFromSelectedTreeNode(creatureId){
+    // find the parent based on the currently selected property
+    let el = document.querySelector('.tree-tab .tree-node-title.primary--text');
+    let selectedComponent = el && el.parentElement.__vue__.$parent;
+    let parentRef, order;
+    if (selectedComponent){
+      if (selectedComponent.showExpanded){
+        parentRef = {
+          id: selectedComponent.node._id,
+          collection: 'creatureProperties',
+        };
+        order = getHighestOrder({
+          collection: CreatureProperties,
+          ancestorId: parentRef.id,
+        }) + 0.5;
+      } else {
+        parentRef = selectedComponent.node.parent;
+        order = selectedComponent.node.order + 0.5;
+      }
+    } else {
+      parentRef = {collection: 'creatures', id: creatureId};
+      order = getHighestOrder({
+        collection: CreatureProperties,
+        ancestorId: parentRef.id,
+      }) + 0.5;
+    }
+    return {parentRef, order}
+  }
+
+  function hideFab(){
+    let fab = document.querySelector('.insert-creature-property-fab');
+    if (fab) fab.style.opacity = '0';
+    return fab;
+  }
+
+  function revealFab(fab){
+    if (!fab) return;
+    // Bring back the fab with scale up animation
+    fab.style.transition = 'none';
+    fab.style.opacity = '';
+    fab.style.transform = 'scale(0)';
+    setTimeout(()=> {
+      fab.style.transform = '';
+      fab.style.transition = '';
+    }, 400);
+  }
 
   const tabs = [
     'stats',
@@ -72,6 +149,7 @@
         'inventory': ['item', 'container'],
         'spells': ['spellList', 'spell'],
         'character': ['note'],
+        'tree': [],
       };},
       properties(){
         return PROPERTIES;
@@ -79,7 +157,10 @@
     },
     methods: {
       insertPropertyOfType(type){
-        let that = this;
+        let creatureId = this.creatureId;
+        let fab = hideFab();
+
+        // Open the dialog to insert the property
         this.$store.commit('pushDialogStack', {
           component: 'creature-property-creation-dialog',
           elementId: 'insert-creature-property-type-' + type,
@@ -87,18 +168,68 @@
             forcedType: type,
           },
           callback(creatureProperty){
-            if (!creatureProperty) return;
-            creatureProperty.parent = {collection: 'creatures', id: that.creatureId};
-            creatureProperty.ancestors = [ {collection: 'creatures', id: that.creatureId}];
-            setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty});
-            let id = insertProperty.call({creatureProperty});
+            if (!creatureProperty) return 'insert-creature-property-fab';
+            revealFab(fab);
+
+            // Insert the property
+            creatureProperty.order = getHighestOrder({
+              collection: CreatureProperties,
+              ancestorId: creatureId
+            }) + 1;
+            let id = insertProperty.call({
+              creatureProperty,
+              parentRef: {collection: 'creatures', id: creatureId},
+            });
             return id;
           }
         });
-      }
+      },
+      insertTreeProperty(){
+        let creatureId = this.creatureId;
+        let fab = hideFab();
+        // Open the dialog to insert the property
+        this.$store.commit('pushDialogStack', {
+          component: 'creature-property-creation-dialog',
+          elementId: 'insert-creature-property-btn',
+          callback(creatureProperty){
+            if (!creatureProperty) return 'insert-creature-property-fab';
+            revealFab(fab);
+
+            // Get order and parent
+            let {parentRef, order } = getParentAndOrderFromSelectedTreeNode(creatureId);
+            creatureProperty.order = order;
+
+            // Insert the property
+            let id = insertProperty.call({creatureProperty, parentRef});
+            return `tree-node-${id}`;
+          }
+        });
+      },
+      propertyFromLibrary(){
+        let creatureId = this.creatureId;
+        let fab = hideFab();
+
+        this.$store.commit('pushDialogStack', {
+          component: 'creature-property-from-library-dialog',
+          elementId: 'insert-creature-property-from-library-btn',
+          callback(libraryNode){
+            if (!libraryNode) return;
+            revealFab(fab);
+
+            let nodeId = libraryNode._id;
+            let {parentRef, order } = getParentAndOrderFromSelectedTreeNode(creatureId);
+
+            let id = insertPropertyFromLibraryNode.call({nodeId, parentRef, order});
+            return `tree-node-${id}`;
+          }
+        });
+      },
     }
   }
 </script>
 
 <style lang="css" scoped>
+  .insert-creature-property-fab {
+    transition: transform 0.07s cubic-bezier(0.5, 0.2, 0.8, 0.4) 0s;
+  }
 </style>

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

@@ -5,15 +5,15 @@
     right
     clipped
   >
-    <log-tab :creature-id="$route.params.id" />
+    <character-log :creature-id="$route.params.id" />
   </v-navigation-drawer>
 </template>
 
-<script>
-import LogTab from '/imports/ui/log/CharacterLog.vue';
+<script lang="js">
+import CharacterLog from '/imports/ui/log/CharacterLog.vue';
 export default {
   components: {
-    LogTab,
+    CharacterLog,
   },
   computed: {
     drawer: {

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

@@ -1,30 +1,31 @@
 <template lang="html">
-  <v-toolbar
+  <v-app-bar
     app
     class="character-sheet-toolbar"
     :color="toolbarColor"
     :dark="isDark"
     :light="!isDark"
+    clipped-right
     extended
     tabs
     dense
   >
-    <v-toolbar-side-icon @click="toggleDrawer" />
-    <v-toolbar-title>
-      <v-fade-transition
-        mode="out-in"
-      >
-        <div :key="$store.state.pageTitle">
+    <v-app-bar-nav-icon @click="toggleDrawer" />
+    <v-fade-transition
+      mode="out-in"
+    >
+      <v-app-bar-title :key="$store.state.pageTitle">
+        <div>
           {{ $store.state.pageTitle }}
         </div>
-      </v-fade-transition>
-    </v-toolbar-title>
+      </v-app-bar-title>
+    </v-fade-transition>
     <v-spacer />
     <v-fade-transition
       mode="out-in"
     >
       <div :key="$route.meta.title">
-        <v-toolbar-items v-if="creature">
+        <template v-if="creature">
           <v-menu
             bottom
             left
@@ -40,32 +41,32 @@
               </v-btn>
             </template>
             <v-list v-if="editPermission">
-              <v-list-tile @click="deleteCharacter">
-                <v-list-tile-title>
+              <v-list-item @click="deleteCharacter">
+                <v-list-item-title>
                   <v-icon>delete</v-icon> Delete
-                </v-list-tile-title>
-              </v-list-tile>
-              <v-list-tile @click="showCharacterForm">
-                <v-list-tile-title>
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="showCharacterForm">
+                <v-list-item-title>
                   <v-icon>create</v-icon> Edit details
-                </v-list-tile-title>
-              </v-list-tile>
-              <v-list-tile @click="showShareDialog">
-                <v-list-tile-title>
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="showShareDialog">
+                <v-list-item-title>
                   <v-icon>share</v-icon> Sharing
-                </v-list-tile-title>
-              </v-list-tile>
+                </v-list-item-title>
+              </v-list-item>
             </v-list>
             <v-list v-else>
-              <v-list-tile @click="unshareWithMe">
-                <v-list-tile-title>
+              <v-list-item @click="unshareWithMe">
+                <v-list-item-title>
                   <v-icon>delete</v-icon> Unshare with me
-                </v-list-tile-title>
-              </v-list-tile>
+                </v-list-item-title>
+              </v-list-item>
             </v-list>
           </v-menu>
-          <v-toolbar-side-icon @click="toggleRightDrawer" />
-        </v-toolbar-items>
+          <v-app-bar-nav-icon @click="toggleRightDrawer" />
+        </template>
       </div>
     </v-fade-transition>
     <v-fade-transition
@@ -74,16 +75,18 @@
     >
       <div
         :key="$route.meta.title"
-        class="layout row"
+        class="layout"
       >
         <v-tabs
-          v-if="creature"
+          v-if="creature && creature.settings"
           class="flex"
           style="min-width: 0"
           centered
           grow
           max="100px"
+          :color="$vuetify.theme.themes.dark.primary"
           :value="$store.getters.tabById($route.params.id)"
+          :background-color="toolbarColor"
           @change="e => $store.commit(
             'setTabForCharacterSheet',
             {id: $route.params.id, tab: e}
@@ -98,13 +101,13 @@
           <v-tab>
             Inventory
           </v-tab>
-          <v-tab>
+          <v-tab v-show="!creature.settings.hideSpellsTab">
             Spells
           </v-tab>
           <v-tab>
             Character
           </v-tab>
-          <v-tab>
+          <v-tab v-if="creature.settings.showTreeTab">
             Tree
           </v-tab>
         </v-tabs>
@@ -115,18 +118,18 @@
         />
       </div>
     </v-fade-transition>
-  </v-toolbar>
+  </v-app-bar>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import removeCreature from '/imports/api/creature/removeCreature.js';
 import { mapMutations } from 'vuex';
-import { theme } from '/imports/ui/theme.js';
 import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 import { updateUserSharePermissions } from '/imports/api/sharing/sharing.js';
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import CharacterSheetFab from '/imports/ui/creature/character/CharacterSheetFab.vue';
+import getThemeColor from '/imports/ui/utility/getThemeColor.js';
 
 export default {
   inject: {
@@ -135,9 +138,6 @@ export default {
   components: {
     CharacterSheetFab,
   },
-  data(){return {
-    theme,
-  }},
   computed: {
     creatureId(){
       return this.$route.params.id;
@@ -146,7 +146,7 @@ export default {
       if (this.creature && this.creature.color){
         return this.creature.color;
       } else {
-        return this.$vuetify.theme.secondary;
+        return getThemeColor('secondary');
       }
     },
     isDark(){
@@ -247,6 +247,7 @@ export default {
 }
 .character-sheet-fab {
   bottom: -24px;
-  margin-right: -8px;
+  right: 8px;
+  margin-left: 16px;
 }
 </style>

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

@@ -2,7 +2,7 @@
   <div class="mini-character-sheet" />
 </template>
 
-<script>
+<script lang="js">
 export default {
 }
 </script>

app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue

@@ -11,7 +11,7 @@
             v-if="creature.picture"
             :src="creature.picture"
           />
-          <v-card-title class="title">
+          <v-card-title class="text-h6">
             {{ creature.name }}
           </v-card-title>
           <v-card-text>
@@ -37,22 +37,22 @@
         <v-card class="class-details">
           <v-card-title
             v-if="creature.variables.level"
-            class="title"
+            class="text-h6"
           >
             Level {{ creature.variables.level.value }}
           </v-card-title>
           <v-list two-line>
-            <v-list-tile>
-              <v-list-tile-content>
-                <v-list-tile-title
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title
                   v-if="
                     creature.variables.milestoneLevels &&
                       creature.variables.milestoneLevels.value
                   "
                 >
                   {{ creature.variables.milestoneLevels.value }} Milestone levels
-                </v-list-tile-title>
-                <v-list-tile-title
+                </v-list-item-title>
+                <v-list-item-title
                   v-if="
                     !(creature.variables.milestoneLevels &&
                       creature.variables.milestoneLevels.value) ||
@@ -65,42 +65,40 @@
                       creature.variables.xp.value ||
                       0
                   }} XP
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-btn
-                  flat
                   icon
                   data-id="experience-info-button"
                   @click="showExperienceList"
                 >
                   <v-icon>info</v-icon>
                 </v-btn>
-              </v-list-tile-action>
-              <v-list-tile-action>
+              </v-list-item-action>
+              <v-list-item-action>
                 <v-btn
-                  flat
                   icon
                   data-id="experience-add-button"
                   @click="addExperience"
                 >
                   <v-icon>add</v-icon>
                 </v-btn>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item
               v-for="classLevel in highestClassLevels"
               :key="classLevel._id"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   {{ classLevel.name }}
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-avatar>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-avatar>
                 {{ classLevel.level }}
-              </v-list-tile-avatar>
-            </v-list-tile>
+              </v-list-item-avatar>
+            </v-list-item>
           </v-list>
         </v-card>
       </div>
@@ -116,7 +114,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';

app/imports/ui/creature/character/characterSheetTabs/FeaturesTab.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 	import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 	import FeatureCard from '/imports/ui/properties/components/features/FeatureCard.vue';

app/imports/ui/creature/character/characterSheetTabs/InventoryTab.vue

@@ -4,53 +4,53 @@
       <div>
         <v-card>
           <v-list>
-            <v-list-tile>
-              <v-list-tile-avatar>
+            <v-list-item>
+              <v-list-item-avatar>
                 <v-icon>$vuetify.icons.injustice</v-icon>
-              </v-list-tile-avatar>
-              <v-list-tile-content>
-                <v-list-tile-title>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title>
                   Weight Carried
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
-                <v-list-tile-title>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-list-item-title>
                   {{ creature.denormalizedStats.weightCarried || 0 }} lb
-                </v-list-tile-title>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile>
-              <v-list-tile-avatar>
+                </v-list-item-title>
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-avatar>
                 <v-icon>$vuetify.icons.cash</v-icon>
-              </v-list-tile-avatar>
-              <v-list-tile-content>
-                <v-list-tile-title>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title>
                   Net worth
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
-                <v-list-tile-title>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-list-item-title>
                   <coin-value
                     :value="creature.denormalizedStats.valueTotal || 0"
                   />
-                </v-list-tile-title>
-              </v-list-tile-action>
-            </v-list-tile>
-            <v-list-tile v-if="creature.denormalizedStats.itemsAttuned">
-              <v-list-tile-avatar>
+                </v-list-item-title>
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item v-if="creature.denormalizedStats.itemsAttuned">
+              <v-list-item-avatar>
                 <v-icon>$vuetify.icons.spell</v-icon>
-              </v-list-tile-avatar>
-              <v-list-tile-content>
-                <v-list-tile-title>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title>
                   Items attuned
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
-                <v-list-tile-title>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-list-item-title>
                   {{ creature.denormalizedStats.itemsAttuned }}
-                </v-list-tile-title>
-              </v-list-tile-action>
-            </v-list-tile>
+                </v-list-item-title>
+              </v-list-item-action>
+            </v-list-item>
           </v-list>
         </v-card>
       </div>
@@ -97,7 +97,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import Creatures from '/imports/api/creature/Creatures.js';
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';

app/imports/ui/creature/character/characterSheetTabs/SpellsTab.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import SpellListCard from '/imports/ui/properties/components/spells/SpellListCard.vue';

app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue

@@ -11,10 +11,12 @@
             <rest-button
               :creature-id="creatureId"
               type="shortRest"
+              class="ma-1"
             />
             <rest-button
               :creature-id="creatureId"
               type="longRest"
+              class="ma-1"
             />
           </v-card-text>
         </v-card>
@@ -27,27 +29,26 @@
         <v-card>
           <v-list>
             <v-subheader>Buffs and conditions</v-subheader>
-            <v-list-tile
+            <v-list-item
               v-for="buff in appliedBuffs"
               :key="buff._id"
               :data-id="buff._id"
               @click="clickProperty({_id: buff._id})"
             >
-              <v-list-tile-content>
-                <v-list-tile-title>
+              <v-list-item-content>
+                <v-list-item-title>
                   {{ buff.name }}
-                </v-list-tile-title>
-              </v-list-tile-content>
-              <v-list-tile-action>
+                </v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
                 <v-btn
                   icon
-                  flat
                   @click.stop="softRemove(buff._id)"
                 >
                   <v-icon>delete</v-icon>
                 </v-btn>
-              </v-list-tile-action>
-            </v-list-tile>
+              </v-list-item-action>
+            </v-list-item>
           </v-list>
         </v-card>
       </div>
@@ -318,7 +319,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import Creatures from '/imports/api/creature/Creatures.js';
 	import softRemoveProperty from '/imports/api/creature/creatureProperties/methods/softRemoveProperty.js';
   import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';

app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue

@@ -12,6 +12,7 @@
           <v-toolbar
             flat
             dense
+            style="flex-grow: 0;"
           >
             <v-spacer />
             <v-switch
@@ -56,49 +57,15 @@
         </template>
       </tree-detail-layout>
     </v-card>
-    <v-speed-dial
-      v-model="fab"
-      fixed
-      bottom="bottom"
-      right="right"
-    >
-      <template #activator>
-        <v-btn
-          v-model="fab"
-          color="primary"
-          fab
-          data-id="insert-creature-property-fab"
-        >
-          <v-icon>add</v-icon>
-          <v-icon>close</v-icon>
-        </v-btn>
-      </template>
-      <labeled-fab
-        color="primary"
-        label="Property from library"
-        icon="book"
-        @click="propertyFromLibrary"
-      />
-      <labeled-fab
-        color="primary"
-        label="New property"
-        icon="edit"
-        @click="insertCreatureProperty"
-      />
-    </v-speed-dial>
   </div>
 </template>
 
-<script>
+<script lang="js">
   import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
   import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
   import CreaturePropertyDialog from '/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue';
-  import LabeledFab from '/imports/ui/components/LabeledFab.vue';
 
   import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
-  import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
-  import insertProperty from '/imports/api/creature/creatureProperties/methods/insertProperty.js';
-  import { setDocToLastOrder } from '/imports/api/parenting/order.js';
   import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 
   export default {
@@ -106,7 +73,6 @@
       TreeDetailLayout,
       CreaturePropertiesTree,
       CreaturePropertyDialog,
-      LabeledFab,
     },
     inject: {
       context: { default: {} }
@@ -195,36 +161,6 @@
           });
         }
       },
-      insertCreatureProperty(){
-        let that = this;
-        this.$store.commit('pushDialogStack', {
-          component: 'creature-property-creation-dialog',
-          elementId: 'insert-creature-property-fab',
-          callback(creatureProperty){
-            if (!creatureProperty) return;
-            creatureProperty.parent = {collection: 'creatures', id: that.creatureId};
-            creatureProperty.ancestors = [ {collection: 'creatures', id: that.creatureId}];
-            setDocToLastOrder({collection: CreatureProperties, doc: creatureProperty});
-            let id = insertProperty.call({creatureProperty});
-            return `tree-node-${id}`;
-          }
-        });
-      },
-      propertyFromLibrary(){
-        let that = this;
-        this.$store.commit('pushDialogStack', {
-          component: 'creature-property-from-library-dialog',
-          elementId: 'insert-creature-property-fab',
-          callback(libraryNode){
-            if (!libraryNode) return;
-            let id = insertPropertyFromLibraryNode.call({
-              nodeId: libraryNode._id,
-              parentRef: {collection: 'creatures', id: that.creatureId},
-            });
-            return `tree-node-${id}`;
-          }
-        });
-      },
       editCreatureProperty(){
         this.$store.commit('pushDialogStack', {
           component: 'creature-property-dialog',

app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue

@@ -11,7 +11,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 	import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 	import { nodesToTree } from '/imports/api/parenting/parenting.js'
 	import TreeNodeList from '/imports/ui/components/tree/TreeNodeList.vue';

app/imports/ui/creature/creatureProperties/CreaturePropertyCreationDialog.vue

@@ -11,7 +11,7 @@
   </selectable-property-dialog>
 </template>
 
-<script>
+<script lang="js">
 import SelectablePropertyDialog from '/imports/ui/properties/shared/SelectablePropertyDialog.vue';
 import CreaturePropertyInsertForm from '/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue';
 import { getPropertyName } from '/imports/constants/PROPERTIES.js';

app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue

@@ -5,6 +5,7 @@
         :model="model"
         :editing="editing"
         :flat="flat"
+        style="flex-grow: 0;"
         @duplicate="duplicate"
         @remove="remove"
         @toggle-editing="editing = !editing"
@@ -18,6 +19,7 @@
         <component
           :is="model.type + 'Form'"
           v-if="editing"
+          :key="_id"
           class="creature-property-form"
           :model="model"
           @change="change"
@@ -27,6 +29,7 @@
         <component
           :is="model.type + 'Viewer'"
           v-else-if="!editing && $options.components[model.type + 'Viewer']"
+          :key="_id"
           class="creature-property-viewer"
           :model="model"
         />
@@ -46,10 +49,10 @@
     <div
       v-if="!embedded"
       slot="actions"
-      class="layout row justify-end"
+      class="layout justify-end"
     >
       <v-btn
-        flat
+        text
         @click="$store.dispatch('popDialogStack')"
       >
         Done
@@ -58,7 +61,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
 import pushToProperty from '/imports/api/creature/creatureProperties/methods/pushToProperty.js';
@@ -79,6 +82,7 @@ import getPropertyTitle from '/imports/ui/properties/shared/getPropertyTitle.js'
 import { assertEditPermission } from '/imports/api/creature/creaturePermissions.js';
 import { get, findLast } from 'lodash';
 import equipItem from '/imports/api/creature/creatureProperties/methods/equipItem.js';
+import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
 let formIndex = {};
 for (let key in propertyFormIndex){
@@ -106,10 +110,13 @@ export default {
   },
   data(){ return {
     editing: !!this.startInEditTab,
+    // CurrentId lags behind Id by one tick so that events fired by destroying
+    // forms keyed to the old ID are applied before the new ID overwrites it
+    currentId: undefined,
   }},
   meteor: {
     model(){
-      return CreatureProperties.findOne(this._id);
+      return CreatureProperties.findOne(this.currentId);
     },
     editPermission(){
       try {
@@ -134,6 +141,16 @@ export default {
       return this.creature && this.creature._id;
     },
   },
+  watch: {
+    _id: {
+      immediate: true,
+      handler(newId){
+        this.$nextTick(() => {
+          this.currentId = newId;
+        });
+      }
+    },
+  },
   reactiveProvide: {
     name: 'context',
     include: ['creatureId', 'editPermission'],
@@ -141,7 +158,7 @@ export default {
   methods: {
     getPropertyName,
     duplicate(){
-      duplicateProperty.call({_id: this._id}, (error) => {
+      duplicateProperty.call({_id: this.currentId}, (error) => {
         if (error) {
           console.error(error);
         }
@@ -154,25 +171,25 @@ export default {
     },
     change({path, value, ack}){
       if (path && path[0] === 'equipped'){
-        equipItem.call({_id: this._id, equipped: value}, (error) =>{
+        equipItem.call({_id: this.currentId, equipped: value}, (error) =>{
           if (error) console.warn(error);
           ack && ack(error && error.reason || error);
         });
         return;
       }
-      updateCreatureProperty.call({_id: this._id, path, value}, (error) =>{
+      updateCreatureProperty.call({_id: this.currentId, path, value}, (error) =>{
         if (error) console.warn(error);
         ack && ack(error && error.reason || error);
       });
     },
     damage({operation, value, ack}){
-      damageProperty.call({_id: this._id, operation, value}, (error) =>{
+      damageProperty.call({_id: this.currentId, operation, value}, (error) =>{
         if (error) console.warn(error);
         ack && ack(error && error.reason || error);
       });
     },
     push({path, value, ack}){
-      pushToProperty.call({_id: this._id, path, value}, (error) =>{
+      pushToProperty.call({_id: this.currentId, path, value}, (error) =>{
         if (error) console.warn(error);
         ack && ack(error && error.reason || error);
       });
@@ -180,20 +197,20 @@ export default {
     pull({path, ack}){
       let itemId = get(this.model, path)._id;
       path.pop();
-      pullFromProperty.call({_id: this._id, path, itemId}, (error) =>{
+      pullFromProperty.call({_id: this.currentId, path, itemId}, (error) =>{
         if (error) console.warn(error);
         ack && ack(error && error.reason || error);
       });
     },
     remove(){
-      const _id = this._id;
+      const _id = this.currentId;
       softRemoveProperty.call({_id});
       if (this.embedded){
         this.$emit('removed');
       } else {
         this.$store.dispatch('popDialogStack');
       }
-      this.$store.dispatch('snackbar', {
+      snackbar({
         text: `Deleted ${getPropertyTitle(this.model)}`,
         callbackName: 'undo',
         callback(){

app/imports/ui/creature/creatureProperties/CreaturePropertyFromLibraryDialog.vue

@@ -12,7 +12,7 @@
     <template slot="actions">
       <v-spacer />
       <v-btn
-        flat
+        text
         color="primary"
         @click="$store.dispatch('popDialogStack', node)"
       >
@@ -22,7 +22,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 	import LibraryAndNode from '/imports/ui/library/LibraryAndNode.vue';
 	export default {

app/imports/ui/creature/creatureProperties/CreaturePropertyInsertForm.vue

@@ -25,10 +25,10 @@
     />
     <div
       slot="actions"
-      class="layout row justify-end"
+      class="layout justify-end"
     >
       <v-btn
-        flat
+        text
         :disabled="!valid"
         @click="$store.dispatch('popDialogStack', model)"
       >
@@ -38,7 +38,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';

app/imports/ui/creature/experiences/ExperienceForm.vue

@@ -11,7 +11,7 @@
         v-if="milestone"
         label="Levels"
         type="number"
-        class="base-value-field text-xs-center large-format no-flex"
+        class="base-value-field text-center large-format no-flex"
         :value="model.levels"
         :error-messages="errors.levels"
         @change="change('levels', ...arguments)"
@@ -19,7 +19,7 @@
       <text-field
         v-else
         type="number"
-        class="base-value-field text-xs-center large-format no-flex"
+        class="base-value-field text-center large-format no-flex"
         suffix="XP"
         autofocus
         :value="model.xp"
@@ -37,7 +37,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 
 export default {

app/imports/ui/creature/experiences/ExperienceInsertDialog.vue

@@ -13,10 +13,10 @@
     />
     <div
       slot="actions"
-      class="layout row justify-end"
+      class="layout justify-end"
     >
       <v-btn
-        flat
+        text
         :disabled="!valid"
         @click="insertExperience"
       >
@@ -26,7 +26,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import ExperienceForm from '/imports/ui/creature/experiences/ExperienceForm.vue';
 import { ExperienceSchema, insertExperience } from '/imports/api/creature/experience/Experiences.js';

app/imports/ui/creature/experiences/ExperienceListDialog.vue

@@ -7,7 +7,6 @@
       <v-spacer />
       <v-btn
         icon
-        flat
         data-id="experience-add-button"
         @click="addExperience"
       >
@@ -15,7 +14,6 @@
       </v-btn>
       <v-btn
         icon
-        flat
         @click="recompute"
       >
         <v-icon>refresh</v-icon>
@@ -34,10 +32,10 @@
       v-else-if="experiences.length === 0"
       class="layout column align-center justify-center fill-height"
     >
-      <v-icon style="font-size: 240px; width: 240px; height: 240px;">
+      <v-icon class="big-icon">
         $vuetify.icons.baby_face
       </v-icon>
-      <p class="headline">
+      <p class="text-h5">
         No experiences
       </p>
     </div>
@@ -46,32 +44,32 @@
         group
         mode="out"
       >
-        <v-list-tile
+        <v-list-item
           v-for="experience in experiences"
           :key="experience._id"
           :data-id="experience._id"
         >
-          <v-list-tile-action class="mr-3">
-            <v-list-tile-action-text>
+          <v-list-item-action class="mr-3">
+            <v-list-item-action-text>
               {{ formatDate(experience.date) }}
-            </v-list-tile-action-text>
-          </v-list-tile-action>
-          <v-list-tile-content>
+            </v-list-item-action-text>
+          </v-list-item-action>
+          <v-list-item-content>
             <template v-if="experience.name">
-              <v-list-tile-title>
+              <v-list-item-title>
                 {{ experience.name }}
-              </v-list-tile-title>
-              <v-list-tile-sub-title>
+              </v-list-item-title>
+              <v-list-item-subtitle>
                 {{ xpText(experience) }}
-              </v-list-tile-sub-title>
+              </v-list-item-subtitle>
             </template>
             <template v-else>
-              <v-list-tile-title>
+              <v-list-item-title>
                 {{ xpText(experience) }}
-              </v-list-tile-title>
+              </v-list-item-title>
             </template>
-          </v-list-tile-content>
-          <v-list-tile-action>
+          </v-list-item-content>
+          <v-list-item-action>
             <v-btn
               icon
               flat
@@ -80,14 +78,14 @@
             >
               <v-icon>delete</v-icon>
             </v-btn>
-          </v-list-tile-action>
-        </v-list-tile>
+          </v-list-item-action>
+        </v-list-item>
       </v-slide-x-transition>
     </v-list>
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import { format } from 'date-fns';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import Experiences, { removeExperience, recomputeExperiences } from '/imports/api/creature/experience/Experiences.js';
@@ -170,5 +168,9 @@ export default {
 }
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
+.big-icon, .big-icon * {
+  width: 240px !important;
+  height: 240px !important;
+}
 </style>

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

@@ -10,8 +10,7 @@
   </dialog-base>
 </template>
 
-<script>
-import Creatures from '/imports/api/creature/Creatures.js';
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 import Slots from '/imports/ui/creature/slots/Slots.vue'
 

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

@@ -24,7 +24,7 @@
       <v-fade-transition mode="out-in">
         <div v-if="libraryNodes && libraryNodes.length">
           <section
-            class="layout row wrap justify-between"
+            class="layout wrap justify-between"
           >
             <v-card
               v-for="node in libraryNodes"
@@ -45,7 +45,7 @@
               />
               <v-card-title primary-title>
                 <tree-node-view
-                  class="mr-2 title mb-0"
+                  class="mr-2 text-h6 mb-0"
                   :class="{'theme--dark': node._id === (selectedNode && selectedNode._id)}"
                   :hide-icon="node.picture"
                   :model="node"
@@ -63,16 +63,17 @@
               </v-card-text>
             </v-card>
           </section>
-          <div class="layout row justify-center align-stretch">
-            <v-btn
-              v-if="currentLimit < countAll"
-              :loading="!$subReady.slotFillers"
-              class="primary"
-              @click="loadMore"
-            >
-              Load More
-            </v-btn>
-          </div>
+        </div>
+        <div
+          v-else-if="countAll"
+          class="ma-4"
+        >
+          <h4 v-if="numFiltered">
+            Requirements of {{ numFiltered }} library properties were not met.
+          </h4>
+          <h4 v-else>
+            Nothing suitable was found in your libraries.
+          </h4>
         </div>
         <div
           v-else-if="$subReady.slotFillers"
@@ -117,17 +118,31 @@
           />
         </div>
       </v-fade-transition>
+      <v-fade-transition mode="out-in">
+        <div
+          v-if="currentLimit < countAll"
+          class="layout justify-center align-stretch"
+        >
+          <v-btn
+            :loading="!$subReady.slotFillers"
+            class="primary"
+            @click="loadMore"
+          >
+            Load More
+          </v-btn>
+        </div>
+      </v-fade-transition>
     </div>
     <template slot="actions">
       <v-spacer />
       <v-btn
-        flat
+        text
         @click="$store.dispatch('popDialogStack')"
       >
         Cancel
       </v-btn>
       <v-btn
-        flat
+        text
         :disabled="!selectedNode"
         @click="insert"
       >
@@ -137,7 +152,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import Creatures from '/imports/api/creature/Creatures.js';
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
@@ -167,6 +182,7 @@ export default {
   data(){return {
     selectedNode: undefined,
     searchValue: undefined,
+    numFiltered: 0,
   }},
   computed: {
     slotPropertyTypeName(){
@@ -216,7 +232,7 @@ export default {
       return Creatures.findOne(this.creatureId);
     },
     currentLimit(){
-      return this._subs['slotFillers'].data('limit') || 16;
+      return this._subs['slotFillers'].data('limit') || 20;
     },
     countAll(){
       return this._subs['slotFillers'].data('countAll');
@@ -239,6 +255,7 @@ export default {
       let nodes = LibraryNodes.find(filter, {
         sort: {name: 1, order: 1}
       }).fetch();
+      let totalNodes = nodes.length;
       // Filter out slotFillers whose condition isn't met or are too big to fit
       // the quantity to fill
       nodes = nodes.filter(node => {
@@ -259,7 +276,7 @@ export default {
         }
         return true;
       });
-      // Filter out slotFillers whose
+      this.numFiltered = totalNodes - nodes.length;
       if (nodes.length === 1) this.selectedNode = nodes[0];
       return nodes;
     },

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

@@ -5,7 +5,7 @@
       :key="slot._id"
       class="slot"
     >
-      <h3 class="layout row align-center">
+      <h3 class="layout align-center">
         {{ slot.name }}
         <v-spacer />
         <span v-if="slot.quantityExpectedResult > 1">
@@ -13,29 +13,28 @@
         </span>
       </h3>
       <v-list v-if="slot.children.length">
-        <v-list-tile
+        <v-list-item
           v-for="child in slot.children"
           :key="child._id"
           :data-id="`slot-child-${child._id}`"
           @click="clickSlotChild(child)"
         >
-          <v-list-tile-content>
+          <v-list-item-content>
             <tree-node-view
               class="slotChild"
               :model="child"
             />
-          </v-list-tile-content>
-          <v-list-tile-action>
+          </v-list-item-content>
+          <v-list-item-action>
             <v-btn
               icon
-              flat
               small
               @click.stop="remove(child)"
             >
               <v-icon>delete</v-icon>
             </v-btn>
-          </v-list-tile-action>
-        </v-list-tile>
+          </v-list-item-action>
+        </v-list-item>
       </v-list>
       <v-btn
         v-if="!slot.quantityExpectedResult || slot.spaceLeft"
@@ -51,13 +50,14 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
 import softRemoveProperty from '/imports/api/creature/creatureProperties/methods/softRemoveProperty.js';
 import restoreProperty from '/imports/api/creature/creatureProperties/methods/restoreProperty.js';
 import getPropertyTitle from '/imports/ui/properties/shared/getPropertyTitle.js';
 import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
+import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
 
 export default {
   components: {
@@ -105,7 +105,7 @@ export default {
     },
     remove(model){
       softRemoveProperty.call({_id: model._id});
-      this.$store.dispatch('snackbar', {
+      snackbar({
         text: `Deleted ${getPropertyTitle(model)}`,
         callbackName: 'undo',
         callback(){
@@ -130,7 +130,7 @@ export default {
       }).map(slot => {
         if (
           !this.showHiddenSlots &&
-          slot.quantityExpected === 0 &&
+          slot.quantityExpectedResult === 0 &&
           slot.hideWhenFull
         ){
           slot.children = []
@@ -144,11 +144,12 @@ export default {
         }
         return slot;
       }).filter(slot => !( // Hide full and ignored slots
-        !this.showHiddenSlots &&
-        slot.hideWhenFull &&
-        slot.quantityExpected > 0 &&
-        slot.totalFilled >= slot.quantityExpected ||
-        slot.ignored
+        !this.showHiddenSlots && (
+          slot.hideWhenFull &&
+          slot.quantityExpectedResult > 0 &&
+          slot.spaceLeft <= 0 ||
+          slot.ignored
+        )
       ));
     },
   },

app/imports/ui/dialogStack/DeleteConfirmationDialog.vue

@@ -11,7 +11,7 @@
         v-if="name"
         v-model="inputName"
       />
-      <div class="layout row justify-center">
+      <div class="layout justify-center">
         <v-btn
           v-show="nameMatch"
           class="primary"
@@ -24,7 +24,7 @@
     <v-spacer slot="actions" />
     <v-btn
       slot="actions"
-      flat
+      text
       @click="$store.dispatch('popDialogStack')"
     >
       Cancel
@@ -32,7 +32,7 @@
   </dialog-base>
 </template>
 
-<script>
+<script lang="js">
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 
 export default {

app/imports/ui/dialogStack/DialogBase.vue

@@ -16,7 +16,6 @@
       >
         <v-btn
           icon
-          flat
           @click="back"
         >
           <v-icon>arrow_back</v-icon>
@@ -44,7 +43,8 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="js">
+  import getThemeColor from '/imports/ui/utility/getThemeColor.js';
   import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 
 	export default {
@@ -67,7 +67,7 @@
         return isDarkColor(this.computedColor);
       },
       computedColor(){
-        return this.color || this.$vuetify.theme.secondary;
+        return this.color || getThemeColor('secondary');
       }
     },
 		methods: {

app/imports/ui/dialogStack/DialogStack.vue

@@ -41,16 +41,20 @@
   </v-layout>
 </template>
 
-<script>
+<script lang="js">
   import '/imports/ui/dialogStack/dialogStackWindowEvents.js';
   import mockElement from '/imports/ui/dialogStack/mockElement.js';
   import DialogComponentIndex from '/imports/ui/dialogStack/DialogComponentIndex.js';
+  import { VLayout } from 'vuetify/lib'
 
   const OFFSET = 16;
   const MOCK_DURATION = 400; // Keep in sync with css transition of .dialog
 
   export default {
-    components: DialogComponentIndex,
+    components: {
+      VLayout,
+      ...DialogComponentIndex,
+    },
     computed: {
       dialogs(){
         return this.$store.state.dialogStack.dialogs;
@@ -162,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;
         }
@@ -209,7 +213,7 @@
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.4);
-    z-index: 4;
+    z-index: 6;
     pointer-events: initial;
   }
   .backdrop-fade-enter-active, .backdrop-fade-leave-active {
@@ -225,7 +229,7 @@
     right: 0;
     bottom: 0;
     pointer-events: none;
-    z-index: 4;
+    z-index: 6;
   }
   .dialog-sizer {
     position: relative;
@@ -235,7 +239,7 @@
     height: 80%;
     height: calc(100% - 64px);
     max-height: 800px;
-    z-index: 5;
+    z-index: 7;
     flex: initial;
   }
   /* sm */

app/imports/ui/dialogStack/dialogStackWindowEvents.js

@@ -1,11 +1,11 @@
-import store from "/imports/ui/vuexStore.js";
+import store from '/imports/ui/vuexStore.js';
 
 if (window){
   window.onpopstate = function(event){
     let state = event.state;
     let numDialogs = store.state.dialogStack.dialogs.length;
     if (_.isFinite(state.openDialogs) && numDialogs > state.openDialogs){
-      store.commit("popDialogStackMutation", store.state.dialogStack.currentResult);
+      store.commit('popDialogStackMutation', store.state.dialogStack.currentResult);
     }
   };
 }

app/imports/ui/documentation/FunctionReference.vue

@@ -29,7 +29,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
 import functions from '/imports/parser/functions.js';
 export default {
   computed:{

app/imports/ui/icons/IconAdmin.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script>
+<script lang="js">
   import {importIcons, importIconMetadata} from '/imports/ui/icons/importIcons.js';
   import IconPicker from '/imports/ui/components/global/IconPicker.vue';
   import UploadButton from 'vuetify-upload-button';

app/imports/ui/icons/SvgIconByName.vue

@@ -4,7 +4,7 @@
   />
 </template>
 
-<script>
+<script lang="js">
 import SvgIcon from '/imports/ui/components/global/SvgIcon.vue'
 import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
 

app/imports/ui/layouts/AppLayout.vue

@@ -1,8 +1,5 @@
 <template>
-  <v-app
-    :dark="darkMode"
-    :light="!darkMode"
-  >
+  <v-app>
     <v-navigation-drawer
       v-model="drawer"
       app
@@ -12,7 +9,7 @@
     <router-view
       name="toolbar"
     />
-    <v-toolbar
+    <v-app-bar
       v-if="!$route.matched[0] || !$route.matched[0].components.toolbar"
       app
       color="secondary"
@@ -20,7 +17,7 @@
       tabs
       dense
     >
-      <v-toolbar-side-icon @click="toggleDrawer" />
+      <v-app-bar-nav-icon @click="toggleDrawer" />
       <v-toolbar-title>
         <v-fade-transition
           mode="out-in"
@@ -53,35 +50,34 @@
           />
         </div>
       </v-fade-transition>
-    </v-toolbar>
-    <v-content>
+    </v-app-bar>
+    <v-main>
       <v-fade-transition
         mode="out-in"
       >
         <router-view />
       </v-fade-transition>
-    </v-content>
+    </v-main>
     <router-view
       name="rightDrawer"
     />
     <dialog-stack />
-    <snackbars />
+    <snackbar-queue />
   </v-app>
 </template>
 
-<script>
+<script lang="js">
 	import '/imports/api/users/Users.js';
   import Sidebar from '/imports/ui/layouts/Sidebar.vue';
   import DialogStack from '/imports/ui/dialogStack/DialogStack.vue';
-	import { theme, darkTheme } from '/imports/ui/theme.js';
   import { mapMutations } from 'vuex';
-  import Snackbars from '/imports/ui/components/snackbars/Snackbars.vue';
+  import SnackbarQueue from '/imports/ui/components/snackbars/SnackbarQueue.vue';
 
   export default {
     components: {
       Sidebar,
       DialogStack,
-      Snackbars,
+      SnackbarQueue,
     },
     data(){return {
       name: 'Home',
@@ -107,10 +103,9 @@
 			darkMode: {
 				immediate: true,
 				handler(newDarkModeValue){
-					let newTheme = newDarkModeValue ? darkTheme : theme;
-					for (let key in newTheme){
-						this.$vuetify.theme[key] = newTheme[key];
-					}
+          if (typeof newDarkModeValue === 'boolean'){
+            this.$vuetify.theme.dark = newDarkModeValue;
+          }
 				},
 			},
       '$route' (to) {

app/imports/ui/layouts/Sidebar.vue

@@ -2,62 +2,64 @@
   <div class="sidebar">
     <v-layout
       v-if="!signedIn"
-      row
       justify-center
     >
       <v-btn
-        flat
+        text
         to="/sign-in"
       >
         Sign in
       </v-btn>
     </v-layout>
     <v-list>
-      <v-list-tile v-if="signedIn">
-        <v-list-tile-content>
-          <v-list-tile-title>
+      <v-list-item v-if="signedIn">
+        <v-list-item-content>
+          <v-list-item-title>
             {{ userName }}
-          </v-list-tile-title>
-        </v-list-tile-content>
-        <v-list-tile-action>
+          </v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-action>
           <v-tooltip bottom>
-            <v-btn
-              slot="activator"
-              flat
-              icon
-              to="/account"
+            <template
+              #activator="{ on }"
             >
-              <v-icon>settings</v-icon>
-            </v-btn>
+              <v-btn
+                icon
+                to="/account"
+                v-on="on"
+              >
+                <v-icon>settings</v-icon>
+              </v-btn>
+            </template>
             <span>Account Settings</span>
           </v-tooltip>
-        </v-list-tile-action>
-      </v-list-tile>
+        </v-list-item-action>
+      </v-list-item>
 
-      <v-list-tile
+      <v-list-item
         v-for="(link, i) in links"
         :key="i"
         :to="link.to"
         :href="link.href"
       >
-        <v-list-tile-action>
+        <v-list-item-action>
           <v-icon>{{ link.icon }}</v-icon>
-        </v-list-tile-action>
-        <v-list-tile-title>
+        </v-list-item-action>
+        <v-list-item-title>
           {{ link.title }}
-        </v-list-tile-title>
-      </v-list-tile>
+        </v-list-item-title>
+      </v-list-item>
       <v-divider />
     </v-list>
     <v-list
       avatar
     >
-      <v-list-tile
+      <v-list-item
         v-for="character in CreaturesWithNoParty"
         :key="character._id"
         :to="character.url"
       >
-        <v-list-tile-avatar :color="character.color || 'grey'">
+        <v-list-item-avatar :color="character.color || 'grey'">
           <img
             v-if="character.avatarPicture"
             :src="character.avatarPicture"
@@ -66,26 +68,26 @@
           <template v-else>
             {{ character.initial }}
           </template>
-        </v-list-tile-avatar>
-        <v-list-tile-title>
+        </v-list-item-avatar>
+        <v-list-item-title>
           {{ character.name }}
-        </v-list-tile-title>
-      </v-list-tile>
+        </v-list-item-title>
+      </v-list-item>
       <v-list-group
         v-for="party in parties"
         :key="party._id"
       >
-        <v-list-tile slot="activator">
-          <v-list-tile-title>
+        <v-list-item slot="activator">
+          <v-list-item-title>
             {{ party.name }}
-          </v-list-tile-title>
-        </v-list-tile>
-        <v-list-tile
+          </v-list-item-title>
+        </v-list-item>
+        <v-list-item
           v-for="character in characterDocs"
           :key="character._id"
           :to="character.url"
         >
-          <v-list-tile-avatar :color="character.color || 'grey'">
+          <v-list-item-avatar :color="character.color || 'grey'">
             <img
               v-if="character.avatarPicture"
               :src="character.avatarPicture"
@@ -94,17 +96,17 @@
             <template v-else>
               {{ character.initial }}
             </template>
-          </v-list-tile-avatar>
-          <v-list-tile-title>
+          </v-list-item-avatar>
+          <v-list-item-title>
             {{ character.name }}
-          </v-list-tile-title>
-        </v-list-tile>
+          </v-list-item-title>
+        </v-list-item>
       </v-list-group>
     </v-list>
   </div>
 </template>
 
-<script>
+<script lang="js">
   import Creatures from '/imports/api/creature/Creatures.js';
   import Parties from '/imports/api/creature/Parties.js';
 

app/imports/ui/layouts/SingleCardLayout.vue

@@ -3,7 +3,7 @@
   functional
 >
   <div
-    class="pa-4 layout column align-center"
+    class="pa-4 layout column align-center card-background"
     style="height: calc(100vh - 96px); display: flex;"
   >
     <v-card
@@ -13,3 +13,7 @@
     </v-card>
   </div>
 </template>
+
+<script lang="js">
+  export default {}
+</script>