Cobbled together some semblance of an item library UI

app/Model/Library/Library.js

@@ -2,14 +2,38 @@ Libraries = new Mongo.Collection("library");
 
 Schemas.Library = new SimpleSchema({
 	name:    {type: String},
-	owner:   {type: String, regEx: SimpleSchema.RegEx.Id},
-	readers: {type: [String], regEx: SimpleSchema.RegEx.Id, defaultValue: []},
-	writers: {type: [String], regEx: SimpleSchema.RegEx.Id, defaultValue: []},
-	public:  {type: Boolean, defaultValue: false},
+	owner:   {type: String, regEx: SimpleSchema.RegEx.Id, index: 1},
+	readers: {type: [String], regEx: SimpleSchema.RegEx.Id, defaultValue: [], index: 1},
+	writers: {type: [String], regEx: SimpleSchema.RegEx.Id, defaultValue: [], index: 1},
+	public:  {type: Boolean, defaultValue: false, index: 1},
 });
 
 Libraries.attachSchema(Schemas.Library);
 
+Libraries.after.remove(function(userId, library) {
+	LibraryItems.remove({library: library._id});
+	LibrarySpells.remove({library: library._id});
+});
+
+Meteor.methods({
+	removeLibrary: function(libraryId) {
+		let library = Libraries.findOne(libraryId);
+    let userId = Meteor.userId();
+
+		if (!library) return;
+		if (library.owner === userId){
+			Libraries.remove(libraryId);
+		} else {
+			if (_.contains(library.readers, userId)){
+				Libraries.update(libraryId, {$pull: {"readers": userId}});
+			}
+			if (_.contains(library.writers, userId)){
+				Libraries.update(libraryId, {$pull: {"writers": userId}});
+			}
+		}
+	},
+});
+
 Libraries.allow({
 	insert(userId, doc) {
 		return userId && doc.owner === userId;
@@ -18,16 +42,14 @@ Libraries.allow({
 		return canEdit(userId, doc);
 	},
 	remove(userId, doc) {
-		return canEdit(userId, doc);
+		return userId && doc.owner === userId;
 	},
 	fetch: ["owner", "writers"],
 });
 
 Libraries.deny({
-	// For now, only admins can manage libraries
 	insert(userId, doc){
-		var user = Meteor.users.findOne(userId);
-		return !user || !_.contains(user.roles, "admin");
+		return !Meteor.users.findOne(userId);
 	},
 	update(userId, doc, fields, modifier) {
 		// Can't change owners

app/Model/Library/LibraryAttacks.js

@@ -1,7 +1,7 @@
 Schemas.LibraryAttacks = new SimpleSchema({
 	name: {
 		type: String,
-		defaultValue: "New Attack",
+		optional: true,
 		trim: false,
 	},
 	details: {

app/Model/Library/LibraryEffects.js

@@ -9,7 +9,6 @@ Schemas.LibraryEffects = new SimpleSchema({
 		defaultValue: "add",
 		allowedValues: [
 			"base",
-			"proficiency",
 			"add",
 			"mul",
 			"min",

app/Model/Library/LibraryItems.js

@@ -42,3 +42,50 @@ LibraryItems.allow({
 	},
 	fetch: ["library"],
 });
+
+Meteor.methods({
+	updateLibraryItemEffect: function({itemId, effectIndex, field, value, unsetField}){
+		let libraryId = LibraryItems.findOne(itemId).library;
+		let userId = Meteor.userId();
+		if (!Libraries.canEdit(userId, libraryId)) return;
+		let modifier = {
+			$set: {
+				[`effects.${effectIndex}.${field}`]: value,
+			}
+		};
+		if (unsetField){
+			modifier.$unset = {
+				[`effects.${effectIndex}.${unsetField}`]: 1,
+			}
+		}
+		LibraryItems.update(itemId, modifier);
+	},
+	removeLibraryItemEffect: function({itemId, effectIndex}){
+		let libraryId = LibraryItems.findOne(itemId).library;
+		let userId = Meteor.userId();
+		if (!Libraries.canEdit(userId, libraryId)) return;
+		LibraryItems.update(itemId, {$unset : {
+			[`effects.${effectIndex}`] : 1,
+		}});
+		LibraryItems.update(itemId, {$pull : {"effects" : null}});
+	},
+	updateLibraryItemAttack: function({itemId, attackIndex, field, value}){
+		let libraryId = LibraryItems.findOne(itemId).library;
+		let userId = Meteor.userId();
+		if (!Libraries.canEdit(userId, libraryId)) return;
+		LibraryItems.update(itemId, {
+			$set: {
+				[`attacks.${attackIndex}.${field}`]: value,
+			}
+		});
+	},
+	removeLibraryItemAttack: function({itemId, attackIndex}){
+		let libraryId = LibraryItems.findOne(itemId).library;
+		let userId = Meteor.userId();
+		if (!Libraries.canEdit(userId, libraryId)) return;
+		LibraryItems.update(itemId, {$unset : {
+			[`attacks.${attackIndex}`] : 1,
+		}});
+		LibraryItems.update(itemId, {$pull : {"attacks" : null}});
+	},
+})

app/Model/Users/Users.js

@@ -3,6 +3,10 @@ Schemas.UserProfile = new SimpleSchema({
 		type: String,
 		optional: true,
 	},
+	librarySubscriptions: {
+		type: [String],
+		defaultValue: [],
+	},
 });
 
 Schemas.User = new SimpleSchema({

app/Routes/Routes.js

@@ -121,7 +121,7 @@ Router.map(function() {
 	this.route("library", {
 		path: "/library",
 		waitOn: function(){
-			return subsManager.subscribe("standardLibraries");
+			return subsManager.subscribe("customLibraries");
 		},
 		onAfterAction: function() {
 			document.title = appName + " - Library";

app/client/views/character/inventory/itemLibraryDialog/itemLibraryDialog.html

@@ -48,6 +48,25 @@
 							{{/unless}}
 						</iron-collapse>
 					{{/each}}
+					{{#each customLibraries}}
+						<div class="paper-font-body2 category-header clickable">
+							<iron-icon icon="chevron-right" class="{{#if isOpen _id}}open{{/if}}">
+							</iron-icon>
+							{{name}}
+						</div>
+						<iron-collapse opened={{isOpen _id}}>
+							<table style="width: 100%">
+								<tbody>
+									{{#each item in (itemsInLibrary _id)}}
+										{{>libraryItem item=item selected=(isSelected item)}}
+									{{/each}}
+								</tbody>
+							</table>
+							{{#unless ready _id}}
+								<paper-spinner active></paper-spinner>
+							{{/unless}}
+						</iron-collapse>
+					{{/each}}
 				{{/if}}
 			</div>
 		</div>

app/client/views/character/inventory/itemLibraryDialog/itemLibraryDialog.js

@@ -7,6 +7,13 @@ const categories = [
 	{name: "Tools", key: "tools"},
 ];
 
+const categoryKeys = [
+	"weapons",
+	"armor",
+	"adventuringGear",
+	"tools",
+];
+
 Template.itemLibraryDialog.onCreated(function(){
 	this.selectedItem = new ReactiveVar();
 	this.searchTerm = new ReactiveVar();
@@ -14,10 +21,17 @@ Template.itemLibraryDialog.onCreated(function(){
 	this.readyDict = new ReactiveDict();
 	this.searchReady = new ReactiveVar();
 	librarySubs.subscribe("standardLibraries");
+	librarySubs.subscribe("customLibraries");
+
 	this.autorun(() => {
 		// Subscribe to all open categories
 		_.each(this.categoriesOpen.get(), (key) => {
-			var handle = librarySubs.subscribe("standardLibraryItems", key);
+			let handle;
+			if (_.contains(categoryKeys, key)){
+				handle = librarySubs.subscribe("standardLibraryItems", key);
+			} else {
+				handle = librarySubs.subscribe("libraryItems", key);
+			}
 			this.autorun(() => {
 				this.readyDict.set(key, handle.ready());
 			});
@@ -70,12 +84,29 @@ Template.itemLibraryDialog.helpers({
 		const searchTerm = Template.instance().searchTerm.get();
 		if (!searchTerm) return;
 		return LibraryItems.find({
-			library: "SRDLibraryGA3XWsd",
 			name: {
 				$regex: new RegExp(".*" + searchTerm + ".*", "gi")
 			},
 		});
 	},
+	customLibraries(){
+		let userId = Meteor.userId();
+    return Libraries.find({
+      $or: [
+  			{readers: userId},
+  			{writers: userId},
+  			{owner: userId},
+  		],
+    });
+	},
+	itemsInLibrary(libraryId){
+		return LibraryItems.find({
+			library: libraryId,
+		}, {
+			sort: {name: 1},
+		});
+	},
+
 });
 
 Template.itemLibraryDialog.events({
@@ -93,7 +124,7 @@ Template.itemLibraryDialog.events({
 	},
 	"click .category-header": function(event, template){
 		let cats = template.categoriesOpen.get();
-		const key = this.key;
+		const key = this.key || this._id;
 		// Toggle whether this key is in the array or not
 		if (_.contains(cats, key)){
 			cats = _.without(cats, key);

app/client/views/library/itemLibrary/itemLibrary.html

@@ -1,5 +1,29 @@
 <template name="itemLibrary">
-	{{#each items}}
-		{{> libraryItem}}
+	{{#each libraries}}
+		<div class="paper-font-subhead library-header layout horizontal center" data-id={{_id}} style="height: 40px;">
+			<iron-icon icon="chevron-right" class="{{#if isOpen _id}}open{{/if}}">
+			</iron-icon>
+			<div class="flex">{{name}}</div>
+			{{#if isOpen _id}}
+				<div class="relative">
+					<paper-icon-button icon="create" class="editLibrary"></paper-icon-button>
+					{{#simpleTooltip}}Edit Library{{/simpleTooltip}}
+				</div>
+				<div class="relative">
+					<paper-icon-button icon="add" class="addItem"></paper-icon-button>
+					{{#simpleTooltip}}Add Item{{/simpleTooltip}}
+				</div>
+			{{/if}}
+		</div>
+		<iron-collapse opened={{isOpen _id}}>
+			{{#each libraryItems}}
+				<paper-item class="short item-name" data-id={{_id}}>
+					{{name}}
+				</paper-item>
+			{{/each}}
+			{{#unless ready _id}}
+				<paper-spinner active></paper-spinner>
+			{{/unless}}
+		</iron-collapse>
 	{{/each}}
 </template>

app/client/views/library/itemLibrary/itemLibrary.js

@@ -1,7 +1,94 @@
+const librarySubs = new SubsManager();
+
+Template.itemLibrary.onCreated(function(){
+  this.selectedTab = new ReactiveVar("0");
+  this.librariesOpen = new ReactiveVar([]);
+  this.readyDict = new ReactiveDict();
+  this.autorun(() => {
+    // Subscribe to all open libraries
+    _.each(this.librariesOpen.get(), (libraryId) => {
+      var handle = librarySubs.subscribe("libraryItems", libraryId);
+      this.autorun(() => {
+        this.readyDict.set(libraryId, handle.ready());
+      });
+    });
+  });
+});
+
 Template.itemLibrary.helpers({
-	items(){
-		return Items.find({charId: {$in: [
-			"SRDLibrary",
-		]}});
+  selectedTab(){
+    return Template.instance().selectedTab.get();
+  },
+  libraries(){
+    let userId = Meteor.userId();
+    return Libraries.find({
+      $or: [
+  			{readers: userId},
+  			{writers: userId},
+  			{owner: userId},
+  		],
+    });
+  },
+  libraryItems(){
+    return LibraryItems.find({
+      library: this._id
+    },{
+      sort: {name: 1}
+    });
+  },
+  ready(libraryId){
+    return Template.instance().readyDict.get(libraryId);
+  },
+  isOpen(libraryId){
+		const librariesOpen = Template.instance().librariesOpen.get();
+		return _.contains(librariesOpen, libraryId);
 	},
 });
+
+Template.itemLibrary.events({
+  "click .library-header": function(event, template){
+		let libs = template.librariesOpen.get();
+		const libraryId = this._id;
+		// Toggle whether this key is in the array or not
+		if (_.contains(libs, libraryId)){
+			libs = _.without(libs, libraryId);
+		} else {
+			libs.push(libraryId);
+		}
+		template.librariesOpen.set(libs);
+	},
+  "click .editLibrary": function(event, instance){
+    event.stopPropagation();
+		var libraryId = this._id;
+		pushDialogStack({
+			template: "libraryDialog",
+			data:     {libraryId},
+			element: event.currentTarget.parentElement.parentElement,
+			returnElement: () => instance.find(`.library-header[data-id='${libraryId}']`),
+		});
+	},
+  "click .addItem": function(event, instance){
+    event.stopPropagation();
+		var libraryId = this._id;
+    var itemId = LibraryItems.insert({
+			name: "New Library Item",
+			library: libraryId,
+		});
+		pushDialogStack({
+			template: "libraryItemDialog",
+			data:     {itemId},
+			element: event.currentTarget,
+			returnElement: () => instance.find(`.item-name[data-id='${itemId}']`),
+		});
+	},
+  "click .item-name": function(event, instance){
+    event.stopPropagation();
+		var itemId = this._id;
+		pushDialogStack({
+			template: "libraryItemDialog",
+			data:     {itemId},
+			element: event.currentTarget,
+			returnElement: () => instance.find(`.item-name[data-id='${itemId}']`),
+		});
+	},
+})

app/client/views/library/itemLibrary/libraryItemDialog/libraryItemDialog.html

@@ -0,0 +1,88 @@
+<template name="libraryItemDialog">
+  <div class="fit base-dialog layout vertical">
+		<app-toolbar>
+      <paper-icon-button id="backButton"
+							   icon="arrow-back">
+			</paper-icon-button>
+			<div main-title>{{item.name}}</div>
+			<paper-icon-button id="deleteButton"
+							   role="button"
+							   tabindex="0"
+							   icon="delete">
+			</paper-icon-button>
+		</app-toolbar>
+		<div class="form flex scroll-y" style="position: relative;">
+      <paper-input id="libraryItemLibraryNameInput" class="fullwidth" label="Library name (optional)" value={{item.libraryName}}></paper-input>
+      <paper-input id="libraryItemNameInput" class="fullwidth" label="Item name" value={{item.name}}></paper-input>
+      <div class="layout horizontal center wrap">
+        <paper-input id="libraryItemPluralInput" class="flex" label="Plural name" value={{item.plural}}></paper-input>
+        <paper-input id="libraryItemQuantityInput" class="flex" label="Quantity" type="number" value={{item.quantity}}></paper-input>
+        <paper-checkbox id="incrementCheckbox" class="flex" checked={{item.settings.showIncrement}}>
+          Show Increment
+        </paper-checkbox>
+      </div>
+      <div class="layout horizontal center wrap">
+        <paper-input id="libraryItemValueInput" class="flex" label="Value" type="number" value={{item.value}}></paper-input>
+        <paper-input id="libraryItemWeightInput" class="flex" label="Weight" type="number" value={{item.weight}}></paper-input>
+        <paper-checkbox id="attunementCheckbox" class="flex" checked={{item.requiresAttunement}}>
+          Requires Attunement
+        </paper-checkbox>
+      </div>
+      <paper-textarea id="libraryItemDescriptionInput" label="Description" value={{item.description}}></paper-textarea>
+      <div style="margin-top: 8px;">
+        <div class="paper-font-subhead">Effects</div>
+        {{#each indexedEffects}}
+          <div class="effect layout horizontal center wrap">
+            <paper-dropdown-menu label="Operation" class="operationMenu">
+  						<paper-listbox class="dropdown-content"  selected={{operationIndex operation}}>
+                <paper-item label="Base Value" name="base"> Base Value </paper-item>
+                <paper-item label="Add" name="add"> Add </paper-item>
+                <paper-item label="Multiply" name="mul"> Multiply </paper-item>
+                <paper-item label="Min" name="min"> Min </paper-item>
+                <paper-item label="Max" name="max"> Max </paper-item>
+                <paper-item label="Advantage" name="advantage"> Advantage </paper-item>
+                <paper-item label="Disadvantage" name="disadvantage"> Disadvantage </paper-item>
+                <paper-item label="PassiveAdd" name="passiveAdd"> PassiveAdd </paper-item>
+                <paper-item label="Fail" name="fail"> Fail </paper-item>
+  							<paper-item label="Conditional" name="conditional"> Conditional </paper-item>
+  						</paper-listbox>
+  					</paper-dropdown-menu>
+            <paper-input class="LibraryItemEffectStat flex" label="Attribute" value={{stat}}></paper-input>
+            <paper-input class="LibraryItemEffectValue flex" label="Value" value={{calculationOrValue}}></paper-input>
+            <paper-icon-button icon="delete" class="deleteEffect"></paper-icon-button>
+          </div>
+        {{/each}}
+        <paper-button id="addEffect" class="red-button">Add Effect</paper-button>
+      </div>
+      <div style="margin-top: 8px;">
+        <div class="paper-font-subhead">Attacks</div>
+        {{#each indexedAttacks}}
+          <div class="effect layout horizontal center wrap">
+            <paper-input class="LibraryItemAttackBonusInput flex" label="Attack Bonus" value={{attackBonus}}></paper-input>
+            <paper-input class="LibraryItemAttackDamageInput flex" label="Damage" value={{damage}}></paper-input>
+            <paper-input class="LibraryItemAttackDetailsInput flex" label="Details" value={{details}}></paper-input>
+            <paper-dropdown-menu label="Damage Type" class="damageTypeMenu">
+  						<paper-listbox class="dropdown-content"  selected={{damageTypeIndex damageType}}>
+                <paper-item label="Bludgeoning" name="bludgeoning"> Bludgeoning </paper-item>
+                <paper-item label="Piercing" name="piercing"> Piercing </paper-item>
+                <paper-item label="Slashing" name="slashing"> Slashing </paper-item>
+                <paper-item label="Acid" name="acid"> Acid </paper-item>
+                <paper-item label="Cold" name="cold"> Cold </paper-item>
+                <paper-item label="Fire" name="fire"> Fire </paper-item>
+                <paper-item label="Force" name="force"> Force </paper-item>
+                <paper-item label="Lightning" name="lightning"> Lightning </paper-item>
+                <paper-item label="Necrotic" name="necrotic"> Necrotic </paper-item>
+                <paper-item label="Poison" name="poison"> Poison </paper-item>
+                <paper-item label="Psychic" name="psychic"> Psychic </paper-item>
+                <paper-item label="Radiant" name="radiant"> Radiant </paper-item>
+                <paper-item label="Thunder" name="thunder"> Thunder </paper-item>
+  						</paper-listbox>
+  					</paper-dropdown-menu>
+            <paper-icon-button icon="delete" class="deleteAttack"></paper-icon-button>
+          </div>
+        {{/each}}
+        <paper-button id="addAttack" class="red-button">Add Attack</paper-button>
+      </div>
+    </div>
+	</div>
+</template>

app/client/views/library/itemLibrary/libraryItemDialog/libraryItemDialog.js

@@ -0,0 +1,204 @@
+Template.libraryItemDialog.helpers({
+  item(){
+    return LibraryItems.findOne(this.itemId);
+  },
+  calculationOrValue(){
+    return this.calculation || this.value;
+  },
+  indexedEffects(){
+    let item = LibraryItems.findOne(this.itemId);
+    if (!item) return;
+    return _.map(item.effects, (effect, index) => {
+      if (!effect) return;
+      effect.index = index;
+      return effect;
+    });
+  },
+  indexedAttacks(){
+    let item = LibraryItems.findOne(this.itemId);
+    if (!item) return;
+    return _.map(item.attacks, (attack, index) => {
+      if (!attack) return;
+      attack.index = index;
+      return attack;
+    });
+  },
+  operationIndex(operation){
+    const ref = {
+      base: 0,
+      add: 1,
+      mul: 2,
+      min: 3,
+      max: 4,
+      advantage: 5,
+      disadvantage: 6,
+      passiveAdd: 7,
+      fail: 8,
+      conditional: 9,
+    };
+    return ref[operation];
+  },
+  damageTypeIndex(damageType){
+    const ref = {
+      bludgeoning: 0,
+      piercing: 1,
+      slashing: 2,
+      acid: 3,
+      cold: 4,
+      fire: 5,
+      force: 6,
+      lightning: 7,
+      necrotic: 8,
+      poison: 9,
+      psychic: 10,
+      radiant: 11,
+      thunder: 12,
+    };
+    return ref[damageType];
+  }
+});
+
+const bind = function(field){
+  return _.debounce(function(event){
+		const input = event.currentTarget;
+		var value = input.value;
+		LibraryItems.update(this.itemId, {
+			$set: {[field]: value}
+		}, {
+			removeEmptyStrings: false,
+			trimStrings: false,
+		});
+	}, 300);
+};
+
+Template.libraryItemDialog.events({
+  "click #backButton": function(){
+		popDialogStack();
+	},
+  "click #deleteButton": function(){
+    LibraryItems.remove(this.itemId);
+		popDialogStack();
+	},
+  "input #libraryItemLibraryNameInput": bind("libraryName"),
+  "input #libraryItemNameInput": bind("name"),
+  "input #libraryItemPluralInput": bind("plural"),
+  "input #libraryItemQuantityInput": bind("quantity"),
+  "input #libraryItemValueInput": bind("value"),
+  "input #libraryItemWeightInput": bind("weight"),
+  "change #attunementCheckbox": function(event){
+		LibraryItems.update(this.itemId, {
+      $set: {requiresAttunement: event.currentTarget.checked}
+    });
+	},
+  "change #incrementCheckbox": function(event){
+		LibraryItems.update(this.itemId, {
+      $set: {"settings.showIncrement": event.currentTarget.checked}
+    });
+	},
+  "input #libraryItemDescriptionInput": bind("description"),
+
+  // Effects
+  "click #addEffect": function(event, template){
+    LibraryItems.update(template.data.itemId, {
+      $push: {
+        effects: {operation: "add"}
+      }
+    });
+  },
+  "iron-select .operationMenu": function(event, template){
+    var detail = event.originalEvent.detail;
+    var opName = detail.item.getAttribute("name");
+    if (opName == this.operation) return;
+    Meteor.call("updateLibraryItemEffect", {
+      itemId: template.data.itemId,
+      effectIndex: this.index,
+      field: "operation",
+      value: opName,
+    });
+  },
+  "input .LibraryItemEffectStat": _.debounce(function(event, template){
+    Meteor.call("updateLibraryItemEffect", {
+      itemId: template.data.itemId,
+      effectIndex: this.index,
+      field: "stat",
+      value: event.currentTarget.value,
+    });
+  }, 300),
+  "input .LibraryItemEffectValue": _.debounce(function(event, template){
+    let value = event.currentTarget.value;
+    if (value && _.isFinite(+value)){
+      Meteor.call("updateLibraryItemEffect", {
+        itemId: template.data.itemId,
+        effectIndex: this.index,
+        field: "value",
+        unsetField: "calculation",
+        value,
+      });
+    } else {
+      Meteor.call("updateLibraryItemEffect", {
+        itemId: template.data.itemId,
+        effectIndex: this.index,
+        field: "calculation",
+        unsetField: "value",
+        value,
+      });
+    }
+  }, 300),
+  "click .deleteEffect": function (event, template) {
+    Meteor.call("removeLibraryItemEffect", {
+      itemId: template.data.itemId,
+      effectIndex: this.index,
+    });
+  },
+
+  // Attacks
+  "click #addAttack": function(event, template){
+    LibraryItems.update(template.data.itemId, {
+      $push: {
+        attacks: {damageType: "slashing"}
+      }
+    });
+  },
+  "iron-select .damageTypeMenu": function(event, template){
+    var detail = event.originalEvent.detail;
+    var damageType = detail.item.getAttribute("name");
+    if (damageType == this.damageType) return;
+    Meteor.call("updateLibraryItemAttack", {
+      itemId: template.data.itemId,
+      attackIndex: this.index,
+      field: "damageType",
+      value: damageType,
+    });
+  },
+  "input .LibraryItemAttackBonusInput": _.debounce(function(event, template){
+    Meteor.call("updateLibraryItemAttack", {
+      itemId: template.data.itemId,
+      attackIndex: this.index,
+      field: "attackBonus",
+      value: event.currentTarget.value,
+    });
+  }, 300),
+  "input .LibraryItemAttackDamageInput": _.debounce(function(event, template){
+    Meteor.call("updateLibraryItemAttack", {
+      itemId: template.data.itemId,
+      attackIndex: this.index,
+      field: "damage",
+      value: event.currentTarget.value,
+    });
+  }, 300),
+  "input .LibraryItemAttackDetailsInput": _.debounce(function(event, template){
+    Meteor.call("updateLibraryItemAttack", {
+      itemId: template.data.itemId,
+      attackIndex: this.index,
+      field: "details",
+      value: event.currentTarget.value,
+    });
+  }, 300),
+
+  "click .deleteAttack": function (event, template) {
+    Meteor.call("removeLibraryItemAttack", {
+      itemId: template.data.itemId,
+      attackIndex: this.index,
+    });
+  },
+});

app/client/views/library/library.css

@@ -0,0 +1,19 @@
+.library .item-name {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	cursor: pointer;
+}
+
+.library .library-header {
+  font-weight: 500;
+	cursor: pointer;
+}
+
+.library .library-header iron-icon {
+	transition: transform 0.3s ease;
+}
+
+.library .library-header iron-icon.open {
+	transform: rotate(90deg);
+}

app/client/views/library/library.html

@@ -1,26 +1,32 @@
 <template name="library">
-	<div class="fit layout vertical character-sheet">
+	<div class="fit layout vertical library">
 		<app-header fixed effects="waterfall">
 			<app-toolbar class="medium-tall app-grey white-text">
 				<div top-item class="layout horizontal center">
 					<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
-					<div class="flex">
-						Library
+					<div class="flex layout horizontal center" style="height: 40px; margin-left: 8px;">
+						Item Library
 					</div>
 				</div>
+				<!--
 				<div bottom-item>
-					<paper-tabs id="characterSheetTabs" selected={{selectedTab}} class="app-grey white-text">
+					<paper-tabs id="libraryTabs" selected={{selectedTab}} class="app-grey white-text">
 						<paper-tab name="items">Items</paper-tab>
 						<paper-tab name="spells">Spells</paper-tab>
 					</paper-tabs>
 				</div>
+				-->
 			</app-toolbar>
 		</app-header>
 		<div class="flex" style="position: relative;">
-			<iron-pages id="tabPages" class="fit" selected={{selectedTab}}>
+			<!-- <iron-pages id="tabPages" class="fit" selected={{selectedTab}}> -->
 				<div name="items" class="tab-page fit">{{> itemLibrary}}</div>
-				<div name="spells" class="tab-page fit">{{! {{> spellLibrary}} }}</div>
-			</iron-pages>
+				<!-- <div name="spells" class="tab-page fit">{{! {{> spellLibrary}} }}</div>
+			</iron-pages> -->
+		</div>
+		<div class="floatyButton">
+			<paper-fab id="addLibrary" icon="add"></paper-fab>
+			{{#simpleTooltip}}Add Library{{/simpleTooltip}}
 		</div>
 	</div>
 </template>

app/client/views/library/library.js

@@ -0,0 +1,29 @@
+const librarySubs = new SubsManager();
+
+Template.library.onCreated(function(){
+  this.selectedTab = new ReactiveVar("0");
+});
+
+Template.library.helpers({
+  selectedTab(){
+    return Template.instance().selectedTab.get();
+  },
+});
+
+Template.library.events({
+  "iron-select #libraryTabs": function(event, instance){
+		instance.selectedTab.set(event.target.selected);
+	},
+  "click #addLibrary": function(event, instance){
+		var libraryId = Libraries.insert({
+			name: "New Library",
+			owner: Meteor.userId(),
+		});
+		pushDialogStack({
+			template: "libraryDialog",
+			data:     {libraryId},
+			element: event.currentTarget,
+			returnElement: () => instance.find(`.library-header[data-id='${libraryId}']`),
+		});
+	},
+})

app/client/views/library/libraryDialog/libraryDialog.html

@@ -0,0 +1,58 @@
+<template name="libraryDialog">
+  <div class="fit base-dialog layout vertical">
+		<app-toolbar>
+			<div main-title>{{library.name}}</div>
+			<paper-icon-button id="deleteButton"
+							   role="button"
+							   tabindex="0"
+							   icon="delete">
+			</paper-icon-button>
+		</app-toolbar>
+		<div class="form flex scroll-y" style="position: relative;">
+			<paper-input id="libraryNameInput" class="fullwidth" label="Name" value={{library.name}}></paper-input>
+      <div class="layout horizontal center wrap">
+          <paper-input class="flex" id="userNameOrEmailInput" label="Share with username or email" floatinglabel></paper-input>
+          <paper-button id="shareButton"
+                  class="red-button"
+                  style="width: 80px; height: 37px; margin-top: 16px;"
+                  raised
+                  disabled={{shareButtonDisabled}}>Share</paper-button>
+          <paper-radio-group id="accessLevelMenu" selected="read">
+            <paper-radio-button name="read">View Only</paper-radio-button>
+            <paper-radio-button name="write">Can Edit</paper-radio-button>
+          </paper-radio-group>
+        </div>
+        <p style="color: red;">{{userFindError}}</p>
+        <div>
+          {{#if readers.length}}
+            <div class="paper-font-subhead">
+              Can View
+            </div>
+            {{#each id in readers}}
+              <div class="layout horizontal center">
+                {{#with id=id}}
+                  <paper-icon-button class="deleteShare" icon="delete">
+                  </paper-icon-button>
+                {{/with}}
+                <div class="flex">{{username id}}</div>
+              </div>
+            {{/each}}
+          {{/if}}
+          {{#if writers.length}}
+            <div class="paper-font-subhead">
+              Can Edit
+            </div>
+            {{#each id in writers}}
+              <div class="layout horizontal center">
+                {{#with id=id}}
+                  <paper-icon-button class="deleteShare" icon="delete">
+                  </paper-icon-button>
+                {{/with}}
+                <div class="flex">{{username id}}</div>
+              </div>
+            {{/each}}
+          {{/if}}
+        </div>
+      </div>
+	</div>
+</template>

app/client/views/library/libraryDialog/libraryDialog.js

@@ -0,0 +1,95 @@
+Template.libraryDialog.onCreated(function(){
+	this.userId = new ReactiveVar();
+	this.autorun(() => {
+		var library = Libraries.findOne(Template.currentData().libraryId, {
+			fields: {readers: 1, writers: 1, owner: 1}
+		});
+		if (!library) return;
+		this.subscribe("userNames", _.union(library.readers, library.writers, [library.owner]));
+	});
+});
+
+Template.libraryDialog.helpers({
+  library(){
+    return Libraries.findOne(this.libraryId);
+  },
+  readers: function(){
+		var library = Libraries.findOne(this.libraryId, {fields: {readers: 1}});
+		return library && library.readers;
+	},
+	writers: function(){
+		var library = Libraries.findOne(this.libraryId, {fields: {writers: 1}});
+		return library && library.writers
+	},
+	username: function(id){
+		const user = Meteor.users.findOne(id);
+		return user && user.username || "user: " + id;
+	},
+	shareButtonDisabled: function(){
+		return !Template.instance().userId.get();
+	},
+	userFindError: function(){
+		if (!Template.instance().userId.get()){
+			return "User not found";
+		}
+	},
+});
+
+Template.libraryDialog.events({
+  "input #libraryNameInput": _.debounce(function(event){
+		const input = event.currentTarget;
+		var name = input.value;
+		if (!name){
+			input.invalid = true;
+			input.errorMessage = "Name is required";
+		} else {
+			input.invalid = false;
+			Libraries.update(this.libraryId, {
+				$set: {name}
+			}, {
+				removeEmptyStrings: false,
+				trimStrings: false,
+			});
+		}
+	}, 300),
+  "click #deleteButton": function(){
+    Meteor.call("removeLibrary", this.libraryId);
+    popDialogStack();
+  },
+  "input #userNameOrEmailInput":
+	function(event, instance){
+		var userName = instance.find("#userNameOrEmailInput").value;
+		instance.userId.set(undefined);
+		Meteor.call("getUserId", userName, function(err, result) {
+			if (err){
+				console.error(err);
+			} else {
+				console.log(result);
+				instance.userId.set(result);
+			}
+		});
+	},
+  "click #shareButton": function(event, instance){
+		var self = this;
+		var permission = instance.find("#accessLevelMenu").selected;
+		if (!permission) throw "no permission set";
+		var userId = instance.userId.get();
+		if (!userId) return;
+		if (permission === "write"){
+			Libraries.update(self.libraryId, {
+				$addToSet: {writers: userId},
+				$pull: {readers: userId},
+			});
+		} else {
+			Libraries.update(self.libraryId, {
+				$addToSet: {readers: userId},
+				$pull: {writers: userId},
+			});
+		}
+	},
+  "click .deleteShare": function(event, instance) {
+		Libraries.update(instance.data.libraryId, {
+			$pull: {writers: this.id, readers: this.id}
+		});
+	},
+});

app/server/publications/library.js

@@ -23,3 +23,18 @@ Meteor.publish("standardLibrarySpells", function(level){
 		sort: {name: 1},
 	});
 });
+
+Meteor.publish("customLibraries", function(){
+	userId = this.userId;
+	return Libraries.find({
+		$or: [
+			{readers: userId},
+			{writers: userId},
+			{owner: userId},
+		],
+	});
+});
+
+Meteor.publish("libraryItems", function(libraryId){
+	return LibraryItems.find({library: libraryId});
+});

app/server/publications/user.js

@@ -4,5 +4,6 @@ Meteor.publish("user", function(){
 		username: 1,
 		profile: 1,
 		apiKey: 1,
+		librarySubscriptions: 1,
 	}});
 });