Merge 3e2b053bf0 into 3a5f3bd450

applications/inventory-app/README.md

@@ -1,3 +0,0 @@
-# inventory
-
-This app is managed in the main project-athena repo for Vircadia. Please see the unpublished scripts folder for its source and make PRs against that for any changes.

applications/inventory-app/app.js

@@ -0,0 +1,187 @@
+"use strict";
+
+var inventory = [];
+var inbox = [];
+var nearbyUsers = [];
+
+var currentFolder = [];
+
+function sendEvent(command, data) {
+    EventBridge.emitWebEvent(JSON.stringify({app:"inventory",command:command,data:data}));
+}
+
+function folderSorter(a, b) {
+    var aIsFolder = ("items" in a);
+    var bIsFolder = ("items" in b);
+    if (aIsFolder && !bIsFolder) return -1;
+    if (!aIsFolder && bIsFolder) return 1;
+    return a["name"].localeCompare(b["name"]);
+}
+
+function changeFolder(folderPath) {
+    currentFolder = inventory;
+    // change buttons up top
+    const directoryDiv = document.getElementsByClassName("directory")[0];
+    directoryDiv.innerHTML = "";
+    var folderButton = document.createElement("button");
+    folderButton.className = "item";
+    folderButton.appendChild(document.createTextNode("ROOT"));
+    folderButton.onclick = function() {changeFolder([]);};
+    directoryDiv.appendChild(folderButton);
+    for (var i = 0; i < folderPath.length; i++) {
+        const currentPath = folderPath.slice(0, i+1);
+        folderButton = document.createElement("button");
+        folderButton.class = "item";
+        folderButton.appendChild(document.createTextNode(folderPath[i]));
+        folderButton.onclick = function() {changeFolder(currentPath);};
+        directoryDiv.appendChild(folderButton);
+        // path traversal
+        for (var j = 0; j < currentFolder.length; j++) {
+            if (currentFolder[j]["name"] === folderPath[i]) {
+                currentFolder = currentFolder[j]["items"];
+                break;
+            }
+        }
+    }
+    // change items down low
+    const itemListingsDiv = document.getElementById("item-listings");
+    itemListingsDiv.innerHTML = "";
+    const itemListingTemplate = document.getElementById("item-listing-template");
+    const folderListingTemplate = document.getElementById("folder-listing-template");
+    for (var i = 0; i < currentFolder.length; i++) {
+        const currentItem = currentFolder[i];
+        const itemIsFolder = "items" in currentItem;
+        const itemName = currentItem["name"];
+        const listing = (itemIsFolder ? folderListingTemplate : itemListingTemplate).getElementsByClassName("item-listing")[0].cloneNode(true);
+        const itemNameBar = listing.getElementsByClassName("title")[0];
+        if (itemIsFolder) {
+            itemNameBar.onclick = function() {changeFolder(folderPath.concat([itemName]));};
+        }
+        itemNameBar.appendChild(document.createTextNode(itemName));
+        itemListingsDiv.appendChild(listing);
+    }
+}
+
+function newItem(folder, name, type, url) {
+    folder.push({name:name,type:type,url:url});
+    folder.sort(folderSorter);
+    sendEvent("web-to-script-inventory", inventory);
+    refreshInventoryView();
+}
+
+function newFolder(folder, name) {
+    folder.push({name:name,items:[]});
+    folder.sort(folderSorter);
+    sendEvent("web-to-script-inventory", inventory);
+    refreshInventoryView();
+}
+
+function removeItemOrFolder(folder, index) {
+    for (var itemToShift = index + 1; itemToShift < folder.length; itemToShift++) {
+        folder[itemToShift - 1] = folder[itemToShift];
+    }
+    folder.pop();
+    sendEvent("web-to-script-inventory", inventory);
+    refreshInventoryView();
+    return;
+}
+
+function refreshInventoryView() {
+/*    const folderList = document.getElementById("folder-select-list");
+    folderList.innerHTML = "";
+    var child = document.createElement("option");
+    child.appendChild(document.createTextNode("/"));
+    folderList.appendChild(child);
+    const view = document.getElementById("inventory");
+    view.innerHTML = "";
+    child = document.createElement("button");
+    child.appendChild(document.createTextNode("new folder"));
+    child.onclick = function(){showNewFolder(inventory)};
+    view.appendChild(child);
+    child = document.createElement("button");
+    child.appendChild(document.createTextNode("new item"));
+    child.onclick = function(){showNewItem(inventory)};
+    view.appendChild(child);
+    for (var i = 0; i < inventory.length; i++) {
+        if ("items" in inventory[i]) {
+            view.appendChild(createFolderDiv(inventory, i, "/" + inventory[i]["name"] + "/"));
+        } else {
+            view.appendChild(createItemDiv(inventory, i));
+        }
+    }*/
+    changeFolder([]);
+}
+
+
+
+function deleteInboxItem(index) {
+    for (var itemToShift = index + 1; itemToShift < inbox.length; itemToShift++) {
+        inbox[itemToShift - 1] = inbox[itemToShift];
+    }
+    inbox.pop();
+    sendEvent("web-to-script-update-receiving-item-queue", inbox);
+    refreshInboxView();
+    return;
+}
+
+function refreshInboxView() {
+    const inboxDiv = document.getElementById("inbox");
+    inboxDiv.innerHTML = "";
+    if (inbox.length > 0) {
+        const contents = document.createElement("div");
+        contents.style.display = "none";
+        var child = document.createElement("p");
+        child.appendChild(document.createTextNode(inbox.length + " item(s) in inbox"));
+        inboxDiv.appendChild(child);
+        child = document.createElement("button");
+        child.appendChild(document.createTextNode("show/hide"));
+        child.onclick = function() {
+            contents.style.display = contents.style.display === "block" ? "none" : "block";
+        };
+        inboxDiv.appendChild(child);
+        for (var index = 0; index < inbox.length; index++) {
+            contents.appendChild(createInboxDiv(index));
+        }
+        inboxDiv.appendChild(contents);
+    }
+}
+
+
+
+function refreshNearbyUsers(userList) {
+    document.getElementById("share-list").innerHTML = "";
+    for (var i = 0; i < userList.length; i++) {
+        var child = document.createElement("option");
+        child.appendChild(document.createTextNode(userList[i].name));
+        document.getElementById("share-list").appendChild(child);
+    }
+}
+
+EventBridge.scriptEventReceived.connect(function(message) {
+    const parsed_message = JSON.parse(message);
+    if (parsed_message["app"] === "inventory") {
+        switch (parsed_message["command"]) {
+            case "script-to-web-inventory":
+                inventory = parsed_message["data"];
+                if (typeof inventory !== "object") { // if data is empty, then inventory becomes an empty string instead of an array.
+                    inventory = [];
+                }
+                refreshInventoryView();
+                break;
+            case "script-to-web-receiving-item-queue":
+                //inbox = parsed_message["data"];
+                //refreshInboxView();
+                break;
+            case "script-to-web-nearby-users":
+                nearbyUsers = parsed_message["data"];
+                if (typeof nearbyUsers === "object") {
+                    refreshNearbyUsers(parsed_message["data"]);
+                }
+                break;
+            //default:
+                //alert(message);
+        }
+    }
+});
+
+window.onload = function() {sendEvent("ready", {});}

applications/inventory-app/dist/css/app.a93e8b1f.css

@@ -1 +0,0 @@
-.draggable-card{background-color:#272727;margin:5px 0}.draggable-card .handle{width:40px!important}.top-level-folder{background-color:#272727}.top-level-folder .v-list-group__header__prepend-icon{background-color:rgba(0,0,0,.3);width:50px;height:50px;margin:5px 5px 7px 0!important;padding:5px 18px 5px 8px}.top-level-folder .handle{width:40px!important}.top-level-folder .folder-icon{margin-right:10px}.top-level-folder .folder-button{font-size:.795rem!important}.v-list-group .column-item{max-width:100%!important;margin-top:5px;margin-bottom:5px}.v-list-group .draggable-card{background-color:rgba(0,0,0,.3);padding-right:16px;padding-left:0!important}.v-list-group .draggable-card .handle{margin-right:16px}.app-version{text-align:center;color:hsla(0,0%,100%,.6);font-weight:lighter}.handle{background-color:rgba(0,0,0,.3)}.inventoryApp::-webkit-scrollbar{width:0!important}

applications/inventory-app/dist/index.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>Inventory</title><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css><link href=css/app.a93e8b1f.css rel=preload as=style><link href=css/chunk-vendors.8540aa41.css rel=preload as=style><link href=js/app.a3555a80.js rel=preload as=script><link href=js/chunk-vendors.a0f21a27.js rel=preload as=script><link href=css/chunk-vendors.8540aa41.css rel=stylesheet><link href=css/app.a93e8b1f.css rel=stylesheet></head><body><noscript><strong>We're sorry but Inventory doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.a0f21a27.js></script><script src=js/app.a3555a80.js></script></body></html>

applications/inventory-app/icons/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M141-160q-24 0-42-18.5T81-220v-520q0-23 18-41.5t42-18.5h280l60 60h340q23 0 41.5 18.5T881-680v460q0 23-18.5 41.5T821-160H141Zm0-580v520h680v-460H456l-60-60H141Zm0 0v520-520Z"/></svg>

applications/inventory-app/icons/gear.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="40"
+   viewBox="0 -960 800 800"
+   width="40"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="gear.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     showgrid="false"
+     inkscape:zoom="21.395833"
+     inkscape:cx="19.957157"
+     inkscape:cy="20.003895"
+     inkscape:window-width="2560"
+     inkscape:window-height="1366"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="m 308,-160 -20,-126 q -19,-7 -40,-19 -21,-12 -37,-25 L 93,-276 0,-440 108,-519 q -2,-9 -2.5,-20.5 -0.5,-11.5 -0.5,-20.5 0,-9 0.5,-20.5 0.5,-11.5 2.5,-20.5 l -108,-79 93,-164 118,54 q 16,-13 37,-25 21,-12 40,-18 l 20,-127 h 184 l 20,126 q 19,7 40.5,18.5 21.5,11.5 36.5,25.5 l 118,-54 93,164 -108,77 q 2,10 2.5,21.5 0.5,11.5 0.5,21.5 0,10 -0.5,21 -0.5,11 -2.5,21 l 108,78 -93,164 -118,-54 q -16,13 -36.5,25.5 Q 532,-292 512,-286 l -20,126 z m 92,-270 q 54,0 92,-38 38,-38 38,-92 0,-54 -38,-92 -38,-38 -92,-38 -54,0 -92,38 -38,38 -38,92 0,54 38,92 38,38 92,38 z m 0,-60 q -29,0 -49.5,-20.5 Q 330,-531 330,-560 q 0,-29 20.5,-49.5 20.5,-20.5 49.5,-20.5 29,0 49.5,20.5 20.5,20.5 20.5,49.5 0,29 -20.5,49.5 Q 429,-490 400,-490 Z m 0,-70 z m -44,340 h 88 l 14,-112 q 33,-8 62.5,-25 29.5,-17 53.5,-41 l 106,46 40,-72 -94,-69 q 4,-17 6.5,-33.5 2.5,-16.5 2.5,-33.5 0,-17 -2,-33.5 -2,-16.5 -7,-33.5 l 94,-69 -40,-72 -106,46 q -23,-26 -52,-43.5 -29,-17.5 -64,-22.5 l -14,-112 h -88 l -14,112 q -34,7 -63.5,24 -29.5,17 -52.5,42 l -106,-46 -40,72 94,69 q -4,17 -6.5,33.5 -2.5,16.5 -2.5,33.5 0,17 2.5,33.5 2.5,16.5 6.5,33.5 l -94,69 40,72 106,-46 q 24,24 53.5,41 29.5,17 62.5,25 z"
+     id="path2" />
+</svg>

applications/inventory-app/icons/inventory.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="40"
+   viewBox="0 -960 800 800"
+   width="40"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="inventory.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     showgrid="false"
+     inkscape:zoom="21.395833"
+     inkscape:cx="19.957157"
+     inkscape:cy="20.003895"
+     inkscape:window-width="1920"
+     inkscape:window-height="1050"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M 40,-222 V -714 Q 26,-716 13,-734 0,-752 0,-773 v -127 q 0,-23 18,-41.5 18,-18.5 42,-18.5 h 680 q 23,0 41.5,18.5 18.5,18.5 18.5,41.5 v 127 q 0,21 -13,39 -13,18 -27,20 v 492 q 0,23 -18.5,42.5 Q 723,-160 700,-160 H 100 Q 76,-160 58,-179.5 40,-199 40,-222 Z m 60,-491 v 493 h 600 v -493 z m 640,-60 V -900 H 60 v 127 z m -460,270 h 240 v -60 H 280 Z m -180,283 v -493 z"
+     id="path2"
+     style="fill:#ffffff" />
+</svg>

applications/inventory-app/icons/mail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm340-302L140-685v465h680v-465L480-462Zm0-60 336-218H145l335 218ZM140-685v-55 520-465Z"/></svg>

applications/inventory-app/icons/mail_unread.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h434q-3 15-4 30t1 30H145l335 218 151-98q10 9 21 16.673 11 7.673 23 13.327L480-462 140-685v465h680v-360q16.794-4.783 31.397-13.391Q866-602 880-613v393q0 24-18 42t-42 18H140Zm0-580v520-520Zm619.882 90Q714-650 682-682.118q-32-32.117-32-78Q650-806 682.118-838q32.117-32 78-32Q806-870 838-837.882q32 32.117 32 78Q870-714 837.882-682q-32.117 32-78 32Z"/></svg>

applications/inventory-app/index.css

@@ -0,0 +1,175 @@
+body {
+  background-color: black;
+  display: flex;
+  margin: 0;
+  flex-direction: column;
+  height: 100vh;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+body .header {
+  width: 100%;
+  height: 40px;
+}
+body .header button {
+  background-color: white;
+  width: 75px;
+  height: 100%;
+  color: black;
+  padding: 0.25rem;
+  box-sizing: border-box;
+  transition: width ease-in-out 0.1s;
+}
+body .header button .icon-container {
+  width: 100%;
+  height: 100%;
+}
+body .header button .icon-container img {
+  width: auto;
+  height: 100%;
+}
+body .header button.active {
+  background-color: #6667ab;
+  width: 100px;
+}
+body .header button.active img {
+  filter: invert(1);
+}
+body .body {
+  width: 100%;
+  flex-grow: 1;
+  background-color: #111111;
+}
+body .body .page {
+  padding: 0.5rem;
+}
+body .body .page .directory {
+  color: white;
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+  width: 100%;
+}
+body .body .page .directory .item {
+  padding: 0.25rem;
+  box-sizing: border-box;
+  color: white;
+  background-color: #4d4d4d;
+  margin-right: 0.2rem;
+  border-radius: 2px;
+  border-bottom: 1px solid white;
+  display: flex;
+}
+body .body .page .item-listing {
+  background-color: #4d4d4d;
+  border-radius: 5px;
+  min-height: 40px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  transition: background-color ease-in-out 0.1s;
+  cursor: pointer;
+}
+body .body .page .item-listing .icon {
+  height: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+  display: flex;
+  width: 50px;
+}
+body .body .page .item-listing .icon img {
+  height: 30px;
+  margin: auto;
+}
+body .body .page .item-listing .title {
+  flex-grow: 1;
+  margin: auto auto auto 10px;
+  color: white;
+  padding-left: 10px;
+}
+body .body .page .item-listing .action-buttons {
+  height: 40px;
+  width: 40px;
+}
+body .body .page .item-listing .action-buttons button {
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+}
+body .body .page .item-listing .action-buttons button img {
+  width: 100%;
+  height: 100%;
+}
+body .body .page .item-listing.active {
+  border-radius: 5px 5px 0 0;
+}
+body .body .page .item-settings,
+body .body .page .item-share-info {
+  width: 100%;
+  height: 40px;
+  background-color: #313131;
+  margin-bottom: 0.25rem;
+  border-radius: 0 0 5px 5px;
+  display: flex;
+  flex-direction: row;
+}
+body .body .page .item-settings button,
+body .body .page .item-share-info button {
+  width: 120px;
+  height: 30px;
+  margin: auto;
+}
+body .body .page .item-share-info {
+  display: flex;
+  flex-direction: column;
+  color: white;
+  padding: 1rem;
+  box-sizing: border-box;
+  height: inherit;
+}
+body .body .page .item-share-info .value {
+  margin-left: 0.5rem;
+  margin-bottom: 0.5rem;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+body .body .page .item-share-info .horizontal-button-layout {
+  display: flex;
+}
+body .body .page .item-share-info button.good {
+  background-color: green;
+  color: white;
+}
+body .body .page .folder {
+  background-color: #17415e;
+}
+body .body .page .item-listing:not(.share):hover {
+  background-color: #313131;
+}
+body .footer {
+  width: 100%;
+  height: 40px;
+  color: white;
+  text-align: center;
+  display: flex;
+}
+body .footer span {
+  margin: auto;
+}
+
+button {
+  cursor: pointer;
+  border: 0;
+  transition: filter ease-in-out 0.1s;
+}
+
+button:hover {
+  filter: brightness(60%);
+}
+
+.hidden {
+  display: none !important;
+}

applications/inventory-app/index.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Inventory</title>
+    <link href="index.css" rel="stylesheet" type="text/css" />
+    <script src="app.js"></script>
+  </head>
+  <body>
+    <div class="header">
+      <button data-target_page="inventory" class="active">
+        <div class="icon-container">
+          <img src="./icons/inventory.png" />
+        </div>
+      </button>
+
+      <button data-target_page="item-share">
+        <div class="icon-container">
+          <img src="./icons/mail.png" />
+        </div>
+      </button>
+    </div>
+    <div class="body">
+      <div id="inventory-page" class="page">
+        <div class="directory"></div>
+
+        <div id="item-listings">
+          <div id="uuid" class="item-listing folder active">
+            <div class="icon">
+              <img src="./icons/folder.png" />
+            </div>
+
+            <div class="title">My awesome folder title</div>
+            <div class="action-buttons">
+              <button data-action="open-settings"><img src="./icons/gear.png" /></button>
+            </div>
+          </div>
+          <div data-target="" class="item-settings">
+            <button><span>Change Folder</span></button>
+            <button><span>Edit Item</span></button>
+            <button><span>Delete Item</span></button>
+          </div>
+
+          <div class="item-listing">
+            <div class="icon">
+              <img src="./icons/folder.png" />
+            </div>
+
+            <div class="title">test</div>
+          </div>
+        </div>
+      </div>
+      <div id="share-page" class="page hidden"></div>
+    </div>
+    <!-- <div class="footer"><span>Overte Inventory</span></div> -->
+
+    <div id="item-listing-template" style="display:none;">
+      <div class="item-listing">
+        <div class="icon">
+          <img src="./icons/folder.png" />
+        </div>
+
+        <div class="title"></div>
+        <div class="action-buttons">
+          <button data-action="open-settings"><img src="./icons/gear.png" /></button>
+        </div>
+      </div>
+    </div>
+
+    <div id="folder-listing-template" style="display:none;">
+      <div class="item-listing folder">
+        <div class="icon">
+          <img src="./icons/folder.png" />
+        </div>
+
+        <div class="title"></div>
+        <div class="action-buttons">
+          <button data-action="open-settings"><img src="./icons/gear.png" /></button>
+        </div>
+      </div>
+    </div>
+
+    <div id="item-settings-template" style="display:none;">
+      <div data-target="" class="item-settings">
+        <button><span>Change Folder</span></button>
+        <button><span>Edit Item</span></button>
+        <button><span>Delete Item</span></button>
+      </div>
+    </div>
+
+    <div id="share-listing-template" style="display:none;">
+      <div id="uuid" class="item-listing share active">
+        <div class="title"></div>
+      </div>
+      <div data-target="" class="item-share-info">
+        <div class="title">From:</div>
+        <div class="value"></div>
+        <div class="title">Name:</div>
+        <div class="value"></div>
+        <div class="horizontal-button-layout">
+          <button class="good"><span>Accept</span></button>
+          <button><span>Decline</span></button>
+        </div>
+      </div>
+    </div>
+
+    <!-- <div id="inbox" class="folder"></div>
+    <div id="inventory" class="folder"></div>
+
+    <div id="confirm-overlay" class="overlay">
+      <div class="dialog">
+        <p id="confirm-prompt"></p>
+        <button type="button" id="confirm-button">yes</button><button type="button" onclick="hideConfirm();">no</button>
+      </div>
+    </div>
+    <div id="new-folder-overlay" class="overlay">
+      <div class="dialog">
+        <p>Create new folder</p>
+        <label for="new-folder-name">Name</label><input type="text" id="new-folder-name" /><br />
+        <button type="button" id="new-folder-button">Create</button
+        ><button type="button" onclick="hideNewFolder();">Cancel</button>
+      </div>
+    </div>
+    <div id="new-item-overlay" class="overlay">
+      <div class="dialog">
+        <p id="new-item-prompt"></p>
+        <label for="new-item-name">Name</label><input type="text" id="new-item-name" /><br />
+        <label for="new-item-type">Type</label
+        ><select name="new-item-type" id="new-item-type">
+          <option>SCRIPT</option>
+          <option>MODEL</option>
+          <option>AVATAR</option>
+          <option>PLACE</option>
+          <option>JSON</option>
+          <option>UNKNOWN</option></select
+        ><br />
+        <label for="new-item-url">URL</label><input type="text" id="new-item-url" /><br />
+        <button type="button" id="new-item-button">Create</button
+        ><button type="button" onclick="hideNewItem();">Cancel</button>
+      </div>
+    </div>
+    <div id="alert-overlay" class="overlay" style="z-index: 2">
+      <div class="dialog">
+        <p id="alert-message"></p>
+        <button type="button" onclick="hideAlert();">Ok</button>
+      </div>
+    </div>
+    <div id="folder-select-overlay" class="overlay">
+      <div class="dialog">
+        <p id="folder-select-prompt"></p>
+        <label for="folder-select-list">Folder</label
+        ><select name="folder-select-list" id="folder-select-list"></select
+        ><br />
+        <button type="button" id="folder-select-button">Select</button
+        ><button type="button" onclick="hideFolderSelect();">Cancel</button>
+      </div>
+    </div>
+    <div id="share-overlay" class="overlay">
+      <div class="dialog">
+        <p>Send to:</p>
+        <label for="share-list">User</label
+        ><select name="share-list" id="share-list"></select
+        ><br />
+        <button type="button" id="share-button">Select</button
+        ><button type="button" onclick="hideShare();">Cancel</button>
+      </div>
+    </div> -->
+  </body>
+</html>

applications/inventory-app/index.scss

@@ -0,0 +1,201 @@
+body {
+  background-color: black;
+  display: flex;
+  margin: 0;
+  flex-direction: column;
+  height: 100vh;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+
+  .header {
+    width: 100%;
+    height: 40px;
+
+    button {
+      background-color: white;
+      width: 75px;
+      height: 100%;
+      color: black;
+      padding: 0.25rem;
+      box-sizing: border-box;
+      transition: width ease-in-out 0.1s;
+
+      .icon-container {
+        width: 100%;
+        height: 100%;
+        img {
+          width: auto;
+          height: 100%;
+        }
+      }
+    }
+
+    button.active {
+      background-color: #6667ab;
+      width: 100px;
+
+      img {
+        filter: invert(1);
+      }
+    }
+  }
+
+  .body {
+    width: 100%;
+    flex-grow: 1;
+    background-color: #111111;
+
+    .page {
+      padding: 0.5rem;
+
+      .directory {
+        color: white;
+        margin-bottom: 0.5rem;
+        display: flex;
+        flex-direction: row;
+        overflow-x: auto;
+        width: 100%;
+
+        .item {
+          padding: 0.25rem;
+          box-sizing: border-box;
+          color: white;
+          background-color: #4d4d4d;
+          // background-color: transparent;
+          margin-right: 0.2rem;
+          border-radius: 2px;
+          border-bottom: 1px solid white;
+          display: flex;
+        }
+      }
+
+      .item-listing {
+        background-color: #4d4d4d;
+        border-radius: 5px;
+        min-height: 40px;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        transition: background-color ease-in-out 0.1s;
+        cursor: pointer;
+
+        .icon {
+          height: 100%;
+          padding: 5px;
+          box-sizing: border-box;
+          display: flex;
+          width: 50px;
+
+          img {
+            height: 30px;
+            margin: auto;
+          }
+        }
+
+        .title {
+          flex-grow: 1;
+          margin: auto auto auto 10px;
+          color: white;
+          // border-left: 2px solid darkgray;
+          padding-left: 10px;
+        }
+
+        .action-buttons {
+          height: 40px;
+          width: 40px;
+
+          button {
+            width: 100%;
+            height: 100%;
+            padding: 5px;
+
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+
+      .item-listing.active {
+        border-radius: 5px 5px 0 0;
+      }
+
+      .item-settings,
+      .item-share-info {
+        width: 100%;
+        height: 40px;
+        background-color: #313131;
+        margin-bottom: 0.25rem;
+        border-radius: 0 0 5px 5px;
+        display: flex;
+        flex-direction: row;
+
+        button {
+          width: 120px;
+          height: 30px;
+          margin: auto;
+        }
+      }
+
+      .item-share-info {
+        display: flex;
+        flex-direction: column;
+        color: white;
+        padding: 1rem;
+        box-sizing: border-box;
+        height: inherit;
+        .value {
+          margin-left: 0.5rem;
+          margin-bottom: 0.5rem;
+          overflow: hidden;
+          word-wrap: break-word;
+        }
+
+        .horizontal-button-layout {
+          display: flex;
+        }
+        button.good {
+          background-color: green;
+          color: white;
+        }
+      }
+
+      .folder {
+        background-color: #17415e;
+      }
+
+      .item-listing:not(.share):hover {
+        background-color: #313131;
+      }
+    }
+  }
+
+  .footer {
+    width: 100%;
+    height: 40px;
+    color: white;
+    text-align: center;
+    display: flex;
+
+    span {
+      margin: auto;
+    }
+  }
+}
+
+button {
+  cursor: pointer;
+  border: 0;
+  transition: filter ease-in-out 0.1s;
+}
+
+button:hover {
+  filter: brightness(60%);
+}
+
+.hidden {
+  display: none !important;
+}