18 files changed, 1172 insertions, 642 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c7cdf8545..2d95d081e 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -4,7 +4,7 @@ import { Utils } from "../../Utils";
 import { DocServer } from "../DocServer";
 import { Docs, DocumentOptions, DocUtils } from "../documents/Documents";
 import { UndoManager } from "./UndoManager";
-import { Doc, DocListCast, DocListCastAsync } from "../../fields/Doc";
+import { Doc, DocListCast, DocListCastAsync, DataSym } from "../../fields/Doc";
 import { List } from "../../fields/List";
 import { listSpec } from "../../fields/Schema";
 import { ScriptField, ComputedField } from "../../fields/ScriptField";
@@ -22,6 +22,7 @@ import { DocumentType } from "../documents/DocumentTypes";
 import { SchemaHeaderField } from "../../fields/SchemaHeaderField";
 import { DimUnit } from "../views/collections/collectionMulticolumn/CollectionMulticolumnView";
 import { LabelBox } from "../views/nodes/LabelBox";
+import { LinkManager } from "./LinkManager";
 
 export class CurrentUserUtils {
     private static curr_id: string;
@@ -43,7 +44,7 @@ export class CurrentUserUtils {
             const queryTemplate = Docs.Create.MulticolumnDocument(
                 [
                     Docs.Create.SearchDocument({ _viewType: CollectionViewType.Schema, ignoreClick: true, forceActive: true, lockedPosition: true, title: "query", _height: 200 }),
-                    Docs.Create.FreeformDocument([], { title: "data", _height: 100, _LODdisable: true })
+                    Docs.Create.FreeformDocument([], { title: "data", _height: 100 })
                 ],
                 { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true }
             );
@@ -54,6 +55,25 @@ export class CurrentUserUtils {
                 removeDropProperties: new List<string>(["dropAction"]), title: "query view", icon: "question-circle"
             });
         }
+        // Prototype for mobile button (not sure if 'Advanced Item Prototypes' is ideal location)
+        if (doc["template-mobile-button"] === undefined) {
+            const queryTemplate = this.mobileButton({
+                title: "NEW MOBILE BUTTON",
+                onClick: undefined,
+            },
+                [this.ficon({
+                    ignoreClick: true,
+                    icon: "mobile",
+                    backgroundColor: "rgba(0,0,0,0)"
+                }),
+                this.mobileTextContainer({},
+                    [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]);
+            doc["template-mobile-button"] = CurrentUserUtils.ficon({
+                onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
+                dragFactory: new PrefetchProxy(queryTemplate) as any as Doc,
+                removeDropProperties: new List<string>(["dropAction"]), title: "mobile button", icon: "mobile"
+            });
+        }
 
         if (doc["template-button-slides"] === undefined) {
             const slideTemplate = Docs.Create.MultirowDocument(
@@ -72,29 +92,29 @@ export class CurrentUserUtils {
         }
 
         if (doc["template-button-description"] === undefined) {
-            const descriptionTemplate = Docs.Create.TextDocument(" ", { title: "header", _height: 100 }, "header"); // text needs to be a space to allow templateText to be created
-            Doc.GetProto(descriptionTemplate).layout =
+            const descriptionTemplate = Doc.MakeDelegate(Docs.Create.TextDocument(" ", { title: "header", _height: 100 }, "header")); // text needs to be a space to allow templateText to be created
+            descriptionTemplate[DataSym].layout =
                 "<div>" +
                 "    <FormattedTextBox {...props} height='{this._headerHeight||75}px' background='{this._headerColor||`orange`}' fieldKey={'header'}/>" +
                 "    <FormattedTextBox {...props} position='absolute' top='{(this._headerHeight||75)*scale}px' height='calc({100/scale}% - {this._headerHeight||75}px)' fieldKey={'text'}/>" +
                 "</div>";
-            descriptionTemplate.isTemplateDoc = makeTemplate(descriptionTemplate, true, "descriptionView");
+            (descriptionTemplate.proto as Doc).isTemplateDoc = makeTemplate(descriptionTemplate.proto as Doc, true, "descriptionView");
 
             doc["template-button-description"] = CurrentUserUtils.ficon({
-                onDragStart: ScriptField.MakeFunction('makeDelegate(this.dragFactory)'),
+                onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
                 dragFactory: new PrefetchProxy(descriptionTemplate) as any as Doc,
                 removeDropProperties: new List<string>(["dropAction"]), title: "description view", icon: "window-maximize"
             });
         }
 
         if (doc["template-button-link"] === undefined) {  // set _backgroundColor to transparent to prevent link dot from obscuring document it's attached to.
-            const linkTemplate = Docs.Create.TextDocument(" ", { title: "header", _height: 100 }, "header"); // text needs to be a space to allow templateText to be created
+            const linkTemplate = Doc.MakeDelegate(Docs.Create.TextDocument(" ", { title: "header", _height: 100 }, "header")); // text needs to be a space to allow templateText to be created
             Doc.GetProto(linkTemplate).layout =
                 "<div>" +
                 "    <FormattedTextBox {...props} height='{this._headerHeight||75}px' background='{this._headerColor||`lightGray`}' fieldKey={'header'}/>" +
                 "    <FormattedTextBox {...props} position='absolute' top='{(this._headerHeight||75)*scale}px' height='calc({100/scale}% - {this._headerHeight||75}px)' fieldKey={'text'}/>" +
                 "</div>";
-            linkTemplate.isTemplateDoc = makeTemplate(linkTemplate, true, "linkView");
+            (linkTemplate.proto as Doc).isTemplateDoc = makeTemplate(linkTemplate.proto as Doc, true, "linkView");
 
             const rtf2 = {
                 doc: {
@@ -127,7 +147,7 @@ export class CurrentUserUtils {
             linkTemplate.header = new RichTextField(JSON.stringify(rtf2), "");
 
             doc["template-button-link"] = CurrentUserUtils.ficon({
-                onDragStart: ScriptField.MakeFunction('makeDelegate(this.dragFactory)'),
+                onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
                 dragFactory: new PrefetchProxy(linkTemplate) as any as Doc,
                 removeDropProperties: new List<string>(["dropAction"]), title: "link view", icon: "window-maximize"
             });
@@ -192,7 +212,7 @@ export class CurrentUserUtils {
             details.text = new RichTextField(JSON.stringify(detailedTemplate), buxtonFieldKeys.join(" "));
 
             const shared = { _chromeStatus: "disabled", _autoHeight: true, _xMargin: 0 };
-            const detailViewOpts = { title: "detailView", _width: 300, _fontFamily: "Arial", _fontSize: 12 };
+            const detailViewOpts = { title: "detailView", _width: 300, _fontFamily: "Arial", _fontSize: "12pt" };
             const descriptionWrapperOpts = { title: "descriptions", _height: 300, _columnWidth: -1, treeViewHideTitle: true, _pivotField: "title" };
 
             const descriptionWrapper = MasonryDocument([details, short, long], { ...shared, ...descriptionWrapperOpts });
@@ -219,6 +239,7 @@ export class CurrentUserUtils {
             doc["template-button-slides"] as Doc,
             doc["template-button-description"] as Doc,
             doc["template-button-query"] as Doc,
+            doc["template-mobile-button"] as Doc,
             doc["template-button-detail"] as Doc,
             doc["template-button-link"] as Doc,
             doc["template-button-switch"] as Doc];
@@ -325,6 +346,14 @@ export class CurrentUserUtils {
             iconRtfView.isTemplateDoc = makeTemplate(iconRtfView, true, "icon_" + DocumentType.RTF);
             doc["template-icon-view-rtf"] = new PrefetchProxy(iconRtfView);
         }
+        if (doc["template-icon-view-button"] === undefined) {
+            const iconBtnView = Docs.Create.FontIconDocument({
+                title: "icon_" + DocumentType.BUTTON, _nativeHeight: 30, _nativeWidth: 30,
+                _width: 30, _height: 30, isTemplateDoc: true, onDoubleClick: ScriptField.MakeScript("deiconifyView(self)")
+            });
+            iconBtnView.isTemplateDoc = makeTemplate(iconBtnView, true, "icon_" + DocumentType.BUTTON);
+            doc["template-icon-view-button"] = new PrefetchProxy(iconBtnView);
+        }
         if (doc["template-icon-view-img"] === undefined) {
             const iconImageView = Docs.Create.ImageDocument("http://www.cs.brown.edu/~bcz/face.gif", {
                 title: "data", _width: 50, isTemplateDoc: true, onDoubleClick: ScriptField.MakeScript("deiconifyView(self)")
@@ -338,12 +367,12 @@ export class CurrentUserUtils {
             doc["template-icon-view-col"] = new PrefetchProxy(iconColView);
         }
         if (doc["template-icons"] === undefined) {
-            doc["template-icons"] = new PrefetchProxy(Docs.Create.TreeDocument([doc["template-icon-view"] as Doc, doc["template-icon-view-img"] as Doc,
+            doc["template-icons"] = new PrefetchProxy(Docs.Create.TreeDocument([doc["template-icon-view"] as Doc, doc["template-icon-view-img"] as Doc, doc["template-icon-view-button"] as Doc,
             doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc, doc["template-icon-view-pdf"] as Doc], { title: "icon templates", _height: 75 }));
         } else {
             const templateIconsDoc = Cast(doc["template-icons"], Doc, null);
-            const requiredTypes = [doc["template-icon-view"] as Doc, doc["template-icon-view-img"] as Doc,
-            doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc, doc["template-icon-view-pdf"] as Doc];
+            const requiredTypes = [doc["template-icon-view"] as Doc, doc["template-icon-view-img"] as Doc, doc["template-icon-view-button"] as Doc,
+            doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc];
             DocListCastAsync(templateIconsDoc.data).then(async curIcons => {
                 await Promise.all(curIcons!);
                 requiredTypes.map(ntype => Doc.AddDocToList(templateIconsDoc, "data", ntype));
@@ -353,7 +382,7 @@ export class CurrentUserUtils {
     }
 
     static creatorBtnDescriptors(doc: Doc): {
-        title: string, label: string, icon: string, drag?: string, ignoreClick?: boolean,
+        title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean,
         click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc
     }[] {
         if (doc.emptyPresentation === undefined) {
@@ -370,37 +399,51 @@ export class CurrentUserUtils {
         if (doc.emptyScript === undefined) {
             doc.emptyScript = Docs.Create.ScriptingDocument(undefined, { _width: 200, _height: 250, title: "script" });
         }
+        if (doc.emptyScreenshot === undefined) {
+            doc.emptyScreenshot = Docs.Create.ScreenshotDocument("", { _width: 400, _height: 200, title: "screen snapshot" });
+        }
+        if (doc.emptyAudio === undefined) {
+            doc.emptyAudio = Docs.Create.AudioDocument(nullAudio, { _width: 200, title: "ready to record audio" });
+        }
+        if (doc.emptyImage === undefined) {
+            doc.emptyImage = Docs.Create.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { _width: 250, _nativeWidth: 250, title: "an image of a cat" });
+        }
+        if (doc.emptyButton === undefined) {
+            doc.emptyButton = Docs.Create.ButtonDocument({ _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, title: "Button" });
+        }
         if (doc.emptyDocHolder === undefined) {
-            doc.emptyDocHolder = Docs.Create.DocumentDocument(
-                ComputedField.MakeFunction("selectedDocs(this,this.excludeCollections,[_last_])?.[0]") as any,
-                { _width: 250, _height: 250, title: "container" });
+            // doc.emptyDocHolder = Docs.Create.DocumentDocument(
+            //     ComputedField.MakeFunction("selectedDocs(this,this.excludeCollections,[_last_])?.[0]") as any,
+            //     { _width: 250, _height: 250, title: "container" });
         }
         if (doc.emptyWebpage === undefined) {
             doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
         }
+        if (doc.activeMobileMenu === undefined) {
+            this.setupActiveMobileMenu(doc);
+        }
         return [
-            { title: "Drag a comparison box", label: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
-            { title: "Drag a collection", label: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
-            { title: "Drag a web page", label: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
-            { title: "Drag a cat image", label: "Img", icon: "cat", ignoreClick: true, drag: 'Docs.Create.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { _width: 250, _nativeWidth:250, title: "an image of a cat" })' },
-            { title: "Drag a screenshot", label: "Grab", icon: "photo-video", ignoreClick: true, drag: 'Docs.Create.ScreenshotDocument("", { _width: 400, _height: 200, title: "screen snapshot" })' },
-            { title: "Drag a webcam", label: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
-            { title: "Drag a audio recorder", label: "Audio", icon: "microphone", ignoreClick: true, drag: `Docs.Create.AudioDocument("${nullAudio}", { _width: 200, title: "ready to record audio" })` },
-            { title: "Drag a clickable button", label: "Btn", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.ButtonDocument({ _width: 150, _height: 50, _xPadding:10, _yPadding: 10, title: "Button" })' },
-            { title: "Drag a presentation view", label: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory,true)`, dragFactory: doc.emptyPresentation as Doc },
-            { title: "Drag a search box", label: "Query", icon: "search", ignoreClick: true, drag: 'Docs.Create.SearchDocument({ _width: 200, title: "an image of a cat" })' },
-            { title: "Drag a scripting box", label: "Script", icon: "terminal", ignoreClick: true, drag: 'Docs.Create.ScriptingDocument(undefined, { _width: 200, _height: 250 title: "untitled script" })' },
-            { title: "Drag an import folder", label: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
-            { title: "Drag a mobile view", label: "Phone", icon: "phone", ignoreClick: true, drag: 'Doc.UserDoc().activeMobile' },
-            { title: "Drag an instance of the device collection", label: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
+            { title: "Drag a comparison box", toolTip: "columns", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
+            { title: "Drag a collection", toolTip: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
+            { title: "Drag a web page", toolTip: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
+            { title: "Drag a cat image", toolTip: "Img", icon: "cat", ignoreClick: true, drag: 'Docs.Create.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { _width: 250, _nativeWidth:250, title: "an image of a cat" })' },
+            { title: "Drag a screenshot", toolTip: "Grab", icon: "photo-video", ignoreClick: true, drag: 'Docs.Create.ScreenshotDocument("", { _width: 400, _height: 200, title: "screen snapshot" })' },
+            { title: "Drag a webcam", toolTip: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
+            { title: "Drag a audio recorder", toolTip: "Audio", icon: "microphone", ignoreClick: true, drag: `Docs.Create.AudioDocument("${nullAudio}", { _width: 200, title: "ready to record audio" })` },
+            { title: "Drag a clickable button", toolTip: "Btn", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.ButtonDocument({ _width: 150, _height: 50, _xPadding:10, _yPadding: 10, title: "Button" })' },
+            { title: "Drag a presentation view", toolTip: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory,true)`, dragFactory: doc.emptyPresentation as Doc },
+            { title: "Drag a search box", toolTip: "Query", icon: "search", ignoreClick: true, drag: 'Docs.Create.SearchDocument({ _width: 200, title: "an image of a cat" })' },
+            { title: "Drag a scripting box", toolTip: "Script", icon: "terminal", ignoreClick: true, drag: 'Docs.Create.ScriptingDocument(undefined, { _width: 200, _height: 250 title: "untitled script" })' },
+            { title: "Drag an import folder", toolTip: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
+            { title: "Drag a mobile view", toolTip: "Phone", icon: "phone", ignoreClick: true, drag: 'Doc.UserDoc().activeMobile' },
+            { title: "Drag an instance of the device collection", toolTip: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
             // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
             // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
             // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
             // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
             // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
-            { title: "Drag a document previewer", label: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc },
-            { title: "Toggle a Calculator REPL", label: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
-            { title: "Connect a Google Account", label: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
+            { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc },
+            { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
         ];
 
     }
@@ -417,11 +460,11 @@ export class CurrentUserUtils {
             }
         }
         const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title));
-        const creatorBtns = buttons.map(({ title, label, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
+        const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
             _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100,
             icon,
             title,
-            label,
+            toolTip,
             ignoreClick,
             dropAction: "copy",
             onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined,
@@ -445,25 +488,71 @@ export class CurrentUserUtils {
         return doc.myItemCreators as Doc;
     }
 
-    static setupMobileButtons(doc: Doc, buttons?: string[]) {
-        const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
-            { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" },
-            { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
-            { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
-            { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
-            { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
-            // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "red", activeInkPen: doc },
-            { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" },
-            // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" },
-        ];
-        return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({
-            _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
-            onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
-            ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activeInkPen: data.activeInkPen,
-            backgroundColor: data.backgroundColor, removeDropProperties: new List<string>(["dropAction"]), dragFactory: data.dragFactory,
+    // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu
+    static setupActiveMobileMenu(doc: Doc) {
+        if (doc.activeMobileMenu === undefined) {
+            doc.activeMobileMenu = this.setupMobileMenu();
+        }
+        return doc.activeMobileMenu as Doc;
+    }
+
+    // Sets up mobileMenu stacking document
+    static setupMobileMenu() {
+        const menu = new PrefetchProxy(Docs.Create.StackingDocument(this.setupMobileButtons(), {
+            _width: 980, ignoreClick: true, lockedPosition: false, _chromeStatus: "disabled", title: "home", _yMargin: 100
         }));
+        return menu;
     }
 
+    // SEts up mobile buttons for inside mobile menu
+    static setupMobileButtons(doc?: Doc, buttons?: string[]) {
+        const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [
+            { title: "WORKSPACES", icon: "bars", click: 'switchToMobileLibrary()', backgroundColor: "lightgrey", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " },
+            { title: "UPLOAD", icon: "upload", click: 'openMobileUploads()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." },
+            { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploadCollection()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." },
+            { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey", info: "Use your phone to record, dictate and then upload audio onto Dash Web." },
+            { title: "PRESENTATION", icon: "desktop", click: 'switchToMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." },
+            { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey", info: "Change your password, log out, or manage your account security." }
+        ];
+        // returns a list of mobile buttons
+        return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data =>
+            this.mobileButton({
+                title: data.title,
+                lockedPosition: true,
+                onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
+                _backgroundColor: data.backgroundColor
+            },
+                [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])])
+        );
+    }
+
+    // sets up the main document for the mobile button
+    static mobileButton = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MulticolumnDocument(docs, {
+        ...opts,
+        dropAction: undefined, removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15,
+        borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled"
+    }) as any as Doc
+
+    // sets up the text container for the information contained within the mobile button
+    static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MultirowDocument(docs, {
+        ...opts,
+        dropAction: undefined, removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25,
+        backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", ignoreClick: true
+    }) as any as Doc
+
+    // Sets up the title of the button
+    static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => Docs.Create.TextDocument(buttonTitle, {
+        ...opts,
+        dropAction: undefined, title: buttonTitle, _fontSize: "37pt", _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)"
+    }) as any as Doc
+
+    // Sets up the description of the button
+    static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => Docs.Create.TextDocument(buttonInfo, {
+        ...opts,
+        dropAction: undefined, title: "info", _fontSize: "25pt", _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2,
+    }) as any as Doc
+
+
     static setupThumbButtons(doc: Doc) {
         const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, clipboard?: Doc, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
             { title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
@@ -497,31 +586,12 @@ export class CurrentUserUtils {
         return Cast(userDoc.thumbDoc, Doc);
     }
 
-    static setupMobileDoc(userDoc: Doc) {
-        return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), {
-            _columnWidth: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _autoHeight: true, _yMargin: 5
-        });
-    }
-
-    static setupMobileInkingDoc(userDoc: Doc) {
-        return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" });
+    static setupLibrary(userDoc: Doc) {
+        return CurrentUserUtils.setupWorkspaces(userDoc);
     }
 
-    static setupMobileUploadDoc(userDoc: Doc) {
-        // const addButton = Docs.Create.FontIconDocument({ onDragStart: ScriptField.MakeScript('addWebToMobileUpload()'), title: "Add Web Doc to Upload Collection", icon: "plus", backgroundColor: "black" })
-        const webDoc = Docs.Create.WebDocument("https://www.britannica.com/biography/Miles-Davis", {
-            title: "Upload Images From the Web", _chromeStatus: "enabled", lockedPosition: true
-        });
-        const uploadDoc = Docs.Create.StackingDocument([], {
-            title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true
-        });
-        return Docs.Create.StackingDocument([webDoc, uploadDoc], {
-            _width: screen.width, lockedPosition: true, _chromeStatus: "disabled", title: "Upload", _autoHeight: true, _yMargin: 80, backgroundColor: "lightgray"
-        });
-    }
-
-    // setup the Creator button which will display the creator panel.  This panel will include the drag creators and the color picker. 
-    // when clicked, this panel will be displayed in the target container (ie, sidebarContainer)  
+    // setup the Creator button which will display the creator panel.  This panel will include the drag creators and the color picker.
+    // when clicked, this panel will be displayed in the target container (ie, sidebarContainer)
     static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) {
         // setup a masonry view of all he creators
         const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
@@ -546,10 +616,10 @@ export class CurrentUserUtils {
                 _width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack", forceActive: true
             })) as any as Doc;
             doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({
-                _width: 35, _height: 25, title: "Tools", _fontSize: 10,
+                _width: 35, _height: 25, title: "Tools", _fontSize: "10pt",
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
                 sourcePanel: toolsStack,
-                onDragStart: ScriptField.MakeFunction('getAlias(this.dragFactory, true)'),
+                onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
                 dragFactory: toolsStack,
                 removeDropProperties: new List<string>(["lockedPosition"]),
                 stayInCollection: true,
@@ -611,25 +681,25 @@ export class CurrentUserUtils {
                 lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
             })) as any as Doc;
             doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({
-                _width: 50, _height: 25, title: "Library", _fontSize: 10, targetDropAction: "same",
+                _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same",
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
                 sourcePanel: libraryStack,
-                onDragStart: ScriptField.MakeFunction('getAlias(this.dragFactory, true)'),
+                onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
                 dragFactory: libraryStack,
                 removeDropProperties: new List<string>(["lockedPosition"]),
                 stayInCollection: true,
                 targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
-                onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel;")
+                onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel")
             }));
         }
         return doc["tabs-button-library"] as Doc;
     }
 
-    // setup the Search button which will display the search panel.  
+    // setup the Search button which will display the search panel.
     static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) {
         if (doc["tabs-button-search"] === undefined) {
             doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
-                _width: 50, _height: 25, title: "Search", _fontSize: 10,
+                _width: 50, _height: 25, title: "Search", _fontSize: "10pt",
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
                 sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, title: "sidebar search stack", })) as any as Doc,
                 searchFileTypes: new List<string>([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
@@ -658,8 +728,8 @@ export class CurrentUserUtils {
         const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
         const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
         if (doc["search-panel"] === undefined) {
-            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({_width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc;
-    }
+            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ _width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc;
+        }
         // Finally, setup the list of buttons to display in the sidebar
         if (doc["tabs-buttons"] === undefined) {
             doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], {
@@ -668,45 +738,37 @@ export class CurrentUserUtils {
             }));
             (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn });
         }
-        
-        
 
-            // new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], {
-            //     _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode",
-            //     title: "sidebar btn row stack", backgroundColor: "dimGray",
-            // }));
-        
+
+
+        // new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], {
+        //     _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode",
+        //     title: "sidebar btn row stack", backgroundColor: "dimGray",
+        // }));
+
 
     }
 
     static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, {
-        ...opts,
-        _gridGap: 5, _xMargin: 5, _yMargin: 5, _height: 42, _width: 100, boxShadow: "0 0", forceActive: true,
+        ...opts, _gridGap: 5, _xMargin: 5, _yMargin: 5, _height: 42, _width: 100, boxShadow: "0 0", forceActive: true,
         dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
         backgroundColor: "black", treeViewPreventOpen: true, lockedPosition: true, _chromeStatus: "disabled", linearViewIsExpanded: true
     })) as any as Doc
 
     static ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({
-        ...opts,
-        dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100
+        ...opts, dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100
     })) as any as Doc
 
     /// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window
     static setupDockedButtons(doc: Doc) {
-        if (doc["dockedBtn-pen"] === undefined) {
-            doc["dockedBtn-pen"] = CurrentUserUtils.ficon({
-                onClick: ScriptField.MakeScript("activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)"),
-                author: "systemTemplates", title: "ink mode", icon: "pen-nib", ischecked: ComputedField.MakeFunction(`sameDocs(this.activeInkPen,  this)`), activeInkPen: doc
-            });
-        }
         if (doc["dockedBtn-undo"] === undefined) {
-            doc["dockedBtn-undo"] = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("undo()"), title: "undo button", icon: "undo-alt" });
+            doc["dockedBtn-undo"] = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("undo()"), toolTip: "click to undo", title: "undo", icon: "undo-alt" });
         }
         if (doc["dockedBtn-redo"] === undefined) {
-            doc["dockedBtn-redo"] = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("redo()"), title: "redo button", icon: "redo-alt" });
+            doc["dockedBtn-redo"] = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("redo()"), toolTip: "click to redo", title: "redo", icon: "redo-alt" });
         }
         if (doc.dockedBtns === undefined) {
-            doc.dockedBtns = CurrentUserUtils.blist({ title: "docked buttons", ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc, doc["dockedBtn-pen"] as Doc]);
+            doc.dockedBtns = CurrentUserUtils.blist({ title: "docked buttons", ignoreClick: true }, [doc["dockedBtn-undo"] as Doc, doc["dockedBtn-redo"] as Doc]);
         }
     }
     // sets up the default set of documents to be shown in the Overlay layer
@@ -731,25 +793,27 @@ export class CurrentUserUtils {
         }
     }
 
+    // Right sidebar is where mobile uploads are contained
     static setupRightSidebar(doc: Doc) {
         if (doc.rightSidebarCollection === undefined) {
-            doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Right Sidebar" }));
+            doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" }));
         }
     }
 
+
     static setupClickEditorTemplates(doc: Doc) {
         if (doc["clickFuncs-child"] === undefined) {
+            // to use this function, select it from the context menu of a collection.  then edit the onChildClick script.  Add two Doc variables: 'target' and 'thisContainer', then assign 'target' to some target collection.  After that, clicking on any document in the initial collection will open it in the target 
             const openInTarget = Docs.Create.ScriptingDocument(ScriptField.MakeScript(
-                "docCast(thisContainer.target).then((target) => {" +
-                "     target && docCast(this.source).then((source) => { " +
-                "           target.proto.data = new List([source || this]); " +
-                "      }); " +
-                "})",
-                { target: Doc.name }), { title: "Click to open in target", _width: 300, _height: 200, targetScriptKey: "onChildClick" });
+                "docCast(thisContainer.target).then((target) => target && (target.proto.data = new List([self]))) ",
+                { thisContainer: Doc.name }), {
+                title: "Click to open in target", _width: 300, _height: 200,
+                targetScriptKey: "onChildClick",
+            });
 
             const openDetail = Docs.Create.ScriptingDocument(ScriptField.MakeScript(
                 "openOnRight(self.doubleClickView)",
-                { target: Doc.name }), { title: "Double click to open doubleClickView", _width: 300, _height: 200, targetScriptKey: "onChildDoubleClick" });
+                {}), { title: "Double click to open doubleClickView", _width: 300, _height: 200, targetScriptKey: "onChildDoubleClick" });
 
             doc["clickFuncs-child"] = Docs.Create.TreeDocument([openInTarget, openDetail], { title: "on Child Click function templates" });
         }
@@ -761,14 +825,22 @@ export class CurrentUserUtils {
                 title: "onClick", "onClick-rawScript": "console.log('click')",
                 isTemplateDoc: true, isTemplateForField: "onClick", _width: 300, _height: 200
             }, "onClick");
+            const onChildClick = Docs.Create.ScriptingDocument(undefined, {
+                title: "onChildClick", "onChildClick-rawScript": "console.log('child click')",
+                isTemplateDoc: true, isTemplateForField: "onChildClick", _width: 300, _height: 200
+            }, "onChildClick");
             const onDoubleClick = Docs.Create.ScriptingDocument(undefined, {
                 title: "onDoubleClick", "onDoubleClick-rawScript": "console.log('double click')",
                 isTemplateDoc: true, isTemplateForField: "onDoubleClick", _width: 300, _height: 200
             }, "onDoubleClick");
+            const onChildDoubleClick = Docs.Create.ScriptingDocument(undefined, {
+                title: "onChildDoubleClick", "onChildDoubleClick-rawScript": "console.log('child double click')",
+                isTemplateDoc: true, isTemplateForField: "onChildDoubleClick", _width: 300, _height: 200
+            }, "onChildDoubleClick");
             const onCheckedClick = Docs.Create.ScriptingDocument(undefined, {
                 title: "onCheckedClick", "onCheckedClick-rawScript": "console.log(heading + checked + containingTreeView)", "onCheckedClick-params": new List<string>(["heading", "checked", "containingTreeView"]), isTemplateDoc: true, isTemplateForField: "onCheckedClick", _width: 300, _height: 200
             }, "onCheckedClick");
-            doc.clickFuncs = Docs.Create.TreeDocument([onClick, onDoubleClick, onCheckedClick], { title: "onClick funcs" });
+            doc.clickFuncs = Docs.Create.TreeDocument([onClick, onChildClick, onDoubleClick, onCheckedClick], { title: "onClick funcs" });
         }
         PromiseValue(Cast(doc.clickFuncs, Doc)).then(func => func && PromiseValue(func.data).then(DocListCast));
 
@@ -782,18 +854,20 @@ export class CurrentUserUtils {
         doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)");
         doc.activeInkWidth = StrCast(doc.activeInkWidth, "1");
         doc.activeInkBezier = StrCast(doc.activeInkBezier, "0");
-        doc.activeFillColor = StrCast(doc.activeFillColor, "none");
-        doc.activeArrowStart = StrCast(doc.activeArrowStart, "none");
-        doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none");
+        doc.activeFillColor = StrCast(doc.activeFillColor, "");
+        doc.activeArrowStart = StrCast(doc.activeArrowStart, "");
+        doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "");
         doc.activeDash = StrCast(doc.activeDash, "0");
-        doc.fontSize = NumCast(doc.fontSize, 12);
-        doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // 
-        doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // 
+        doc.fontSize = StrCast(doc.fontSize, "12pt");
+        doc.fontFamily = StrCast(doc.fontFamily, "Arial");
+        doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
+        doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
         Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
         this.setupDefaultIconTemplates(doc);  // creates a set of icon templates triggered by the document deoration icon
         this.setupDocTemplates(doc); // sets up the template menu of templates
         this.setupRightSidebar(doc);  // sets up the right sidebar collection for mobile upload documents and sharing
-        this.setupOverlays(doc);  // documents in overlay layer 
+        this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile
+        this.setupOverlays(doc);  // documents in overlay layer
         this.setupDockedButtons(doc);  // the bottom bar of font icons
         this.setupDefaultPresentation(doc); // presentation that's initially triggered
         await this.setupSidebarButtons(doc); // the pop-out left sidebar of tools/panels
@@ -832,9 +906,10 @@ export class CurrentUserUtils {
     }
 }
 
-Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); },
-    "initializes the Mobile inking document", "(userDoc: Doc)");
-Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); },
-    "initializes the Mobile upload document", "(userDoc: Doc)");
 Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); },
-    "creates a new workspace when called");
\ No newline at end of file
+    "creates a new workspace when called");
+
+Scripting.addGlobal(function links(doc: any) { return new List(LinkManager.Instance.getAllRelatedLinks(doc)); },
+    "returns all the links to the document or its annotations", "(doc: any)");
+Scripting.addGlobal(function directLinks(doc: any) { return new List(LinkManager.Instance.getAllDirectLinks(doc)); },
+    "returns all the links directly to the document", "(doc: any)");
diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts
index 28b1ca6cf..540540642 100644
--- a/src/client/util/DictationManager.ts
+++ b/src/client/util/DictationManager.ts
@@ -121,7 +121,7 @@ export namespace DictationManager {
 
         const listenImpl = (options?: Partial<ListeningOptions>) => {
             if (!recognizer) {
-                console.log(unsupported);
+                console.log("DictationManager:" + unsupported);
                 return unsupported;
             }
             if (isListening) {
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 1fa5faeb3..523dbfca0 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -9,6 +9,7 @@ import { LinkManager } from './LinkManager';
 import { Scripting } from './Scripting';
 import { SelectionManager } from './SelectionManager';
 import { DocumentType } from '../documents/DocumentTypes';
+import { TraceMobx } from '../../fields/util';
 
 export type CreateViewFunc = (doc: Doc, followLinkLocation: string, finished?: () => void) => void;
 
@@ -104,8 +105,9 @@ export class DocumentManager {
 
     @computed
     public get LinkedDocumentViews() {
+        TraceMobx();
         const pairs = DocumentManager.Instance.DocumentViews.reduce((pairs, dv) => {
-            const linksList = LinkManager.Instance.getAllRelatedLinks(dv.props.Document);
+            const linksList = DocListCast(dv.props.Document.links);
             pairs.push(...linksList.reduce((pairs, link) => {
                 const linkToDoc = link && LinkManager.Instance.getOppositeAnchor(link, dv.props.Document);
                 linkToDoc && DocumentManager.Instance.getDocumentViews(linkToDoc).map(docView1 => {
@@ -146,22 +148,22 @@ export class DocumentManager {
         };
         const docView = getFirstDocView(targetDoc, originatingDoc);
         let annotatedDoc = await Cast(targetDoc.annotationOn, Doc);
-        if (annotatedDoc && !linkDoc?.isPushpin) {
+        if (annotatedDoc && !targetDoc?.isPushpin) {
             const first = getFirstDocView(annotatedDoc);
             if (first) {
                 annotatedDoc = first.props.Document;
-                if (docView) {
-                    docView.props.focus(annotatedDoc, false);
-                }
+                docView?.props.focus(annotatedDoc, false);
             }
         }
         if (docView) {  // we have a docView already and aren't forced to create a new one ... just focus on the document.  TODO move into view if necessary otherwise just highlight?
-            if (linkDoc?.isPushpin) docView.props.Document.hidden = !docView.props.Document.hidden;
+            if (originatingDoc?.isPushpin) {
+                docView.props.Document.hidden = !docView.props.Document.hidden;
+            }
             else {
                 docView.props.Document.hidden && (docView.props.Document.hidden = undefined);
                 docView.props.focus(docView.props.Document, willZoom, undefined, focusAndFinish);
+                highlight();
             }
-            highlight();
         } else {
             const contextDocs = docContext ? await DocListCastAsync(docContext.data) : undefined;
             const contextDoc = contextDocs?.find(doc => Doc.AreProtosEqual(doc, targetDoc)) ? docContext : undefined;
@@ -216,25 +218,27 @@ export class DocumentManager {
         const backLinkWithoutTargetView = secondDocs.find(d => DocumentManager.Instance.getDocumentViews(d.anchor1 as Doc).length === 0);
         const linkWithoutTargetDoc = traverseBacklink === undefined ? fwdLinkWithoutTargetView || backLinkWithoutTargetView : traverseBacklink ? backLinkWithoutTargetView : fwdLinkWithoutTargetView;
         const linkDocList = linkWithoutTargetDoc ? [linkWithoutTargetDoc] : (traverseBacklink === undefined ? firstDocs.concat(secondDocs) : traverseBacklink ? secondDocs : firstDocs);
-        const linkDoc = linkDocList.length && linkDocList[0];
-        if (linkDoc) {
-            const target = (doc === linkDoc.anchor1 ? linkDoc.anchor2 : doc === linkDoc.anchor2 ? linkDoc.anchor1 :
-                (Doc.AreProtosEqual(doc, linkDoc.anchor1 as Doc) ? linkDoc.anchor2 : linkDoc.anchor1)) as Doc;
-            const targetTimecode = (doc === linkDoc.anchor1 ? Cast(linkDoc.anchor2_timecode, "number") :
-                doc === linkDoc.anchor2 ? Cast(linkDoc.anchor1_timecode, "number") :
-                    (Doc.AreProtosEqual(doc, linkDoc.anchor1 as Doc) ? Cast(linkDoc.anchor2_timecode, "number") : Cast(linkDoc.anchor1_timecode, "number")));
-            if (target) {
-                const containerDoc = (await Cast(target.annotationOn, Doc)) || target;
-                containerDoc.currentTimecode = targetTimecode;
-                const targetContext = await target?.context as Doc;
-                const targetNavContext = !Doc.AreProtosEqual(targetContext, currentContext) ? targetContext : undefined;
-                DocumentManager.Instance.jumpToDocument(target, zoom, (doc, finished) => createViewFunc(doc, StrCast(linkDoc.followLinkLocation, "onRight"), finished), targetNavContext, linkDoc, undefined, doc, finished);
+        const followLinks = linkDocList.length ? (doc.isPushpin ? linkDocList : [linkDocList[0]]) : [];
+        followLinks.forEach(async linkDoc => {
+            if (linkDoc) {
+                const target = (doc === linkDoc.anchor1 ? linkDoc.anchor2 : doc === linkDoc.anchor2 ? linkDoc.anchor1 :
+                    (Doc.AreProtosEqual(doc, linkDoc.anchor1 as Doc) ? linkDoc.anchor2 : linkDoc.anchor1)) as Doc;
+                const targetTimecode = (doc === linkDoc.anchor1 ? Cast(linkDoc.anchor2_timecode, "number") :
+                    doc === linkDoc.anchor2 ? Cast(linkDoc.anchor1_timecode, "number") :
+                        (Doc.AreProtosEqual(doc, linkDoc.anchor1 as Doc) ? Cast(linkDoc.anchor2_timecode, "number") : Cast(linkDoc.anchor1_timecode, "number")));
+                if (target) {
+                    const containerDoc = (await Cast(target.annotationOn, Doc)) || target;
+                    containerDoc.currentTimecode = targetTimecode;
+                    const targetContext = await target?.context as Doc;
+                    const targetNavContext = !Doc.AreProtosEqual(targetContext, currentContext) ? targetContext : undefined;
+                    DocumentManager.Instance.jumpToDocument(target, zoom, (doc, finished) => createViewFunc(doc, StrCast(linkDoc.followLinkLocation, "onRight"), finished), targetNavContext, linkDoc, undefined, doc, finished);
+                } else {
+                    finished?.();
+                }
             } else {
                 finished?.();
             }
-        } else {
-            finished?.();
-        }
+        });
     }
 }
 Scripting.addGlobal(function DocFocus(doc: any) { DocumentManager.Instance.getDocumentViews(Doc.GetProto(doc)).map(view => view.props.focus(doc, true)); });
\ No newline at end of file
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 2ceafff30..4b1860b5c 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -7,7 +7,7 @@ import { listSpec } from "../../fields/Schema";
 import { SchemaHeaderField } from "../../fields/SchemaHeaderField";
 import { ScriptField } from "../../fields/ScriptField";
 import { Cast, NumCast, ScriptCast, StrCast } from "../../fields/Types";
-import { emptyFunction } from "../../Utils";
+import { emptyFunction, returnTrue } from "../../Utils";
 import { Docs, DocUtils } from "../documents/Documents";
 import * as globalCssVariables from "../views/globalCssVariables.scss";
 import { UndoManager } from "./UndoManager";
@@ -83,6 +83,7 @@ export namespace DragManager {
         hideSource?: boolean;  // hide source document during drag
         offsetX?: number;      // offset of top left of source drag visual from cursor
         offsetY?: number;
+        noAutoscroll?: boolean;
     }
 
     // event called when the drag operation results in a drop action
@@ -223,15 +224,18 @@ export namespace DragManager {
     }
 
     // drag a button template and drop a new button 
-    export function StartButtonDrag(eles: HTMLElement[], script: string, title: string, vars: { [name: string]: Field }, params: string[], initialize: (button: Doc) => void, downX: number, downY: number, options?: DragOptions) {
+    export function
+        StartButtonDrag(eles: HTMLElement[], script: string, title: string, vars: { [name: string]: Field }, params: string[], initialize: (button: Doc) => void, downX: number, downY: number, options?: DragOptions) {
         const finishDrag = (e: DragCompleteEvent) => {
-            const bd = Docs.Create.ButtonDocument({ _width: 150, _height: 50, title, onClick: ScriptField.MakeScript(script) });
+            const bd = Docs.Create.ButtonDocument({ toolTip: title, z: 1, _width: 150, _height: 50, title, onClick: ScriptField.MakeScript(script) });
             params.map(p => Object.keys(vars).indexOf(p) !== -1 && (Doc.GetProto(bd)[p] = new PrefetchProxy(vars[p] as Doc))); // copy all "captured" arguments into document parameterfields
             initialize?.(bd);
             Doc.GetProto(bd)["onClick-paramFieldKeys"] = new List<string>(params);
             e.docDragData && (e.docDragData.droppedDocuments = [bd]);
             return e;
         };
+        options = options ?? {};
+        options.noAutoscroll = true;  // these buttons are being dragged on the overlay layer, so scrollin the underlay is not appropriate
         StartDrag(eles, new DragManager.DocumentDragData([]), downX, downY, options, finishDrag);
     }
 
@@ -323,7 +327,7 @@ export namespace DragManager {
             dragLabel = document.createElement("div");
             dragLabel.className = "dragManager-dragLabel";
             dragLabel.style.zIndex = "100001";
-            dragLabel.style.fontSize = "10";
+            dragLabel.style.fontSize = "10pt";
             dragLabel.style.position = "absolute";
             // dragLabel.innerText = "press 'a' to embed on drop"; // bcz: need to move this to a status bar
             dragDiv.appendChild(dragLabel);
@@ -407,6 +411,7 @@ export namespace DragManager {
         const yFromTop = downY - elesCont.top;
         const xFromRight = elesCont.right - downX;
         const yFromBottom = elesCont.bottom - downY;
+        let scrollAwaiter: Opt<NodeJS.Timeout>;
         const moveHandler = (e: PointerEvent) => {
             e.preventDefault(); // required or dragging text menu link item ends up dragging the link button as native drag/drop
             if (dragData instanceof DocumentDragData) {
@@ -427,6 +432,59 @@ export namespace DragManager {
                 }, dragData.droppedDocuments);
             }
 
+            const target = document.elementFromPoint(e.x, e.y);
+
+            if (target && !options?.noAutoscroll && !dragData.draggedDocuments?.some((d: any) => d._noAutoscroll)) {
+                const autoScrollHandler = () => {
+                    target.dispatchEvent(
+                        new CustomEvent<React.DragEvent>("dashDragAutoScroll", {
+                            bubbles: true,
+                            detail: {
+                                shiftKey: e.shiftKey,
+                                altKey: e.altKey,
+                                metaKey: e.metaKey,
+                                ctrlKey: e.ctrlKey,
+                                clientX: e.clientX,
+                                clientY: e.clientY,
+                                dataTransfer: new DataTransfer,
+                                button: e.button,
+                                buttons: e.buttons,
+                                getModifierState: e.getModifierState,
+                                movementX: e.movementX,
+                                movementY: e.movementY,
+                                pageX: e.pageX,
+                                pageY: e.pageY,
+                                relatedTarget: e.relatedTarget,
+                                screenX: e.screenX,
+                                screenY: e.screenY,
+                                detail: e.detail,
+                                view: e.view ? e.view : new Window,
+                                nativeEvent: new DragEvent("dashDragAutoScroll"),
+                                currentTarget: target,
+                                target: target,
+                                bubbles: true,
+                                cancelable: true,
+                                defaultPrevented: true,
+                                eventPhase: e.eventPhase,
+                                isTrusted: true,
+                                preventDefault: () => "not implemented for this event" ? false : false,
+                                isDefaultPrevented: () => "not implemented for this event" ? false : false,
+                                stopPropagation: () => "not implemented for this event" ? false : false,
+                                isPropagationStopped: () => "not implemented for this event" ? false : false,
+                                persist: emptyFunction,
+                                timeStamp: e.timeStamp,
+                                type: "dashDragAutoScroll"
+                            }
+                        })
+                    );
+
+                    scrollAwaiter && clearTimeout(scrollAwaiter);
+                    SnappingManager.GetIsDragging() && (scrollAwaiter = setTimeout(autoScrollHandler, 25));
+                };
+                scrollAwaiter && clearTimeout(scrollAwaiter);
+                scrollAwaiter = setTimeout(autoScrollHandler, 250);
+            }
+
             const { thisX, thisY } = snapDrag(e, xFromLeft, yFromTop, xFromRight, yFromBottom);
 
             const moveX = thisX - lastX;
diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts
index f9837298d..d0acf14c3 100644
--- a/src/client/util/DropConverter.ts
+++ b/src/client/util/DropConverter.ts
@@ -57,7 +57,7 @@ export function convertDropDataToButtons(data: DragManager.DocumentDragData) {
     data?.draggedDocuments.map((doc, i) => {
         let dbox = doc;
         // bcz: isButtonBar is intended to allow a collection of linear buttons to be dropped and nested into another collection of buttons... it's not being used yet, and isn't very elegant
-        if (doc.type === DocumentType.FONTICON) {
+        if (doc.type === DocumentType.FONTICON || StrCast(Doc.Layout(doc).layout).includes("FontIconBox")) {
             dbox = Doc.MakeAlias(doc);
         } else if (!doc.onDragStart && !doc.isButtonBar) {
             const layoutDoc = doc.layout instanceof Doc && doc.layout.isTemplateForField ? doc.layout : doc;
diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index 544a79e98..51e4fa9e2 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -1,23 +1,47 @@
-@import "../views/globalCssVariables";
-
 .group-interface {
-    background-color: whitesmoke !important;
-    color: grey;
-    width: 450px;
+    width: 380px;
     height: 300px;
 
     .dialogue-box {
-        width: 450;
-        height: 300;
+        .group-create {
+            display: flex;
+            flex-direction: column;
+            height: 90%;
+            justify-content: space-between;
+            margin-left: 5px;
+
+            input {
+                border-radius: 5px;
+                padding: 8px;
+                min-width: 100%;
+                border: 1px solid hsl(0, 0%, 80%);
+                outline: none;
+                height: 30;
+
+                &:focus {
+                    border: 2.5px solid #2684FF;
+                }
+            }
+
+            p {
+                font-size: 20px;
+                text-align: left;
+                color: black;
+            }
+
+            button {
+                align-self: flex-end;
+            }
+        }
     }
 
+
     button {
-        background: $lighter-alt-accent;
+        align-self: center;
         outline: none;
         border-radius: 5px;
         border: 0px;
-        color: #fcfbf7;
-        text-transform: uppercase;
+        text-transform: none;
         letter-spacing: 2px;
         font-size: 75%;
         padding: 10px;
@@ -36,12 +60,6 @@
         border-radius: 10px;
     }
 
-    button {
-        width: 100%;
-        align-self: center;
-        background: $darker-alt-accent;
-    }
-
     .delete-button {
         background: rgb(227, 86, 86);
     }
@@ -55,33 +73,33 @@
     }
 
     .group-heading {
-        letter-spacing: .5em;
-    }
-
-
-    .group-body {
         display: flex;
-        justify-content: space-between;
-        max-height: 80%;
+        align-items: center;
+        margin-bottom: 25px;
 
-        .group-create {
-            display: flex;
-            flex-direction: column;
-            flex-basis: 30%;
-            margin-left: 5px;
+        p {
+            font-size: 20px;
+            text-align: left;
+            margin-right: 15px;
+            color: black;
+        }
+    }
 
-            input {
-                border-radius: 5px;
-                border: none;
-                padding: 4px;
-                min-width: 100%;
-                margin: 4px 0 4px 0;
-            }
+    .main-container {
+        display: flex;
+        flex-direction: column;
 
+        .sort-groups {
+            text-align: left;
+            margin-left: 5;
+            cursor: pointer;
         }
 
-        .group-content {
-            padding-left: 1em;
+        .group-body {
+            justify-content: space-between;
+            height: 220;
+            background-color: #e8e8e8;
+
             padding-right: 1em;
             justify-content: space-around;
             text-align: left;
@@ -91,17 +109,18 @@
 
             .group-row {
                 display: flex;
-                position: relative;
                 margin-bottom: 5px;
-                min-height: 40px;
-                border: 1px solid;
-                border-radius: 10px;
+                min-height: 30px;
                 align-items: center;
 
                 .group-name {
-                    position: relative;
                     max-width: 65%;
-                    left: 10;
+                    margin: 0 10;
+                    color: black;
+                }
+
+                .group-info {
+                    cursor: pointer;
                 }
 
                 button {
@@ -112,10 +131,6 @@
                 }
             }
 
-            ::placeholder {
-                color: $intermediate-color;
-            }
-
             input {
                 border-radius: 5px;
                 border: none;
@@ -126,11 +141,4 @@
 
         }
     }
-
-    h1 {
-        color: $dark-color;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        font-size: 120%;
-    }
 }
\ No newline at end of file
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 7c68fc2a0..72fba5c1b 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -3,7 +3,7 @@ import { observable, action, runInAction, computed } from "mobx";
 import { SelectionManager } from "./SelectionManager";
 import MainViewModal from "../views/MainViewModal";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, Opt } from "../../fields/Doc";
+import { Doc, DocListCast, Opt, DocListCastAsync } from "../../fields/Doc";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -12,10 +12,13 @@ import { Utils } from "../../Utils";
 import * as RequestPromise from "request-promise";
 import Select from 'react-select';
 import "./GroupManager.scss";
-import { StrCast } from "../../fields/Types";
+import { StrCast, Cast } from "../../fields/Types";
 import GroupMemberView from "./GroupMemberView";
+import { setGroups } from "../../fields/util";
+import { DocServer } from "../DocServer";
+import { TaskCompletionBox } from "../views/nodes/TaskCompletedBox";
 
-library.add(fa.faWindowClose);
+library.add(fa.faPlus, fa.faTimes, fa.faInfoCircle);
 
 export interface UserOptions {
     label: string;
@@ -32,26 +35,58 @@ export default class GroupManager extends React.Component<{}> {
     @observable private users: string[] = []; // list of users populated from the database.
     @observable private selectedUsers: UserOptions[] | null = null; // list of users selected in the "Select users" dropdown.
     @observable currentGroup: Opt<Doc>; // the currently selected group.
+    @observable private createGroupModalOpen: boolean = false;
     private inputRef: React.RefObject<HTMLInputElement> = React.createRef(); // the ref for the input box.
+    private createGroupButtonRef: React.RefObject<HTMLButtonElement> = React.createRef();
+    private currentUserGroups: string[] = [];
+    @observable private buttonColour: "#979797" | "black" = "#979797";
+    @observable private groupSort: "ascending" | "descending" | "none" = "none";
+
+
 
     constructor(props: Readonly<{}>) {
         super(props);
         GroupManager.Instance = this;
     }
 
-    // sets up the list of users
     componentDidMount() {
-        this.populateUsers().then(resolved => runInAction(() => this.users = resolved));
+        this.populateUsers();
+        this.populateGroups();
     }
 
     /**
-     * Fetches the list of users stored on the database and @returns a list of the emails.
+     * Fetches the list of users stored on the database.
      */
     populateUsers = async () => {
-        const userList: User[] = JSON.parse(await RequestPromise.get(Utils.prepend("/getUsers")));
-        const currentUserIndex = userList.findIndex(user => user.email === Doc.CurrentUserEmail);
-        currentUserIndex !== -1 && userList.splice(currentUserIndex, 1);
-        return userList.map(user => user.email);
+        runInAction(() => this.users = []);
+        const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
+        const raw = JSON.parse(userList) as User[];
+        const evaluating = raw.map(async user => {
+            // const isCandidate = user.email !== Doc.CurrentUserEmail;
+            // if (isCandidate) {
+            const userDocument = await DocServer.GetRefField(user.userDocumentId);
+            if (userDocument instanceof Doc) {
+                const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
+                runInAction(() => {
+                    if (notificationDoc instanceof Doc) {
+                        this.users.push(user.email);
+                    }
+                });
+            }
+            // }
+        });
+        return Promise.all(evaluating);
+    }
+
+    populateGroups = () => {
+        DocListCastAsync(this.GroupManagerDoc?.data).then(groups => {
+            groups?.forEach(group => {
+                const members: string[] = JSON.parse(StrCast(group.members));
+                if (members.includes(Doc.CurrentUserEmail)) this.currentUserGroups.push(StrCast(group.groupName));
+            });
+
+            setGroups(this.currentUserGroups);
+        });
     }
 
     /**
@@ -68,6 +103,8 @@ export default class GroupManager extends React.Component<{}> {
     open = () => {
         SelectionManager.DeselectAll();
         this.isOpen = true;
+        this.populateUsers();
+        this.populateGroups();
     }
 
     /**
@@ -77,6 +114,8 @@ export default class GroupManager extends React.Component<{}> {
     close = () => {
         this.isOpen = false;
         this.currentGroup = undefined;
+        // this.users = [];
+        this.createGroupModalOpen = false;
     }
 
     /**
@@ -89,7 +128,8 @@ export default class GroupManager extends React.Component<{}> {
     /**
      * @returns a list of all group documents.
      */
-    private getAllGroups(): Doc[] {
+    // private ?
+    getAllGroups(): Doc[] {
         const groupDoc = this.GroupManagerDoc;
         return groupDoc ? DocListCast(groupDoc.data) : [];
     }
@@ -98,7 +138,8 @@ export default class GroupManager extends React.Component<{}> {
      * @returns a group document based on the group name.
      * @param groupName 
      */
-    private getGroup(groupName: string): Doc | undefined {
+    // private?
+    getGroup(groupName: string): Doc | undefined {
         const groupDoc = this.getAllGroups().find(group => group.groupName === groupName);
         return groupDoc;
     }
@@ -123,6 +164,11 @@ export default class GroupManager extends React.Component<{}> {
         );
     }
 
+    getGroupMembers(group: string | Doc): string[] {
+        if (group instanceof Doc) return JSON.parse(StrCast(group.members)) as string[];
+        else return JSON.parse(StrCast(this.getGroup(group)!.members)) as string[];
+    }
+
     /**
      * @returns the members of the admin group.
      */
@@ -150,6 +196,10 @@ export default class GroupManager extends React.Component<{}> {
         groupDoc.groupName = groupName;
         groupDoc.owners = JSON.stringify([Doc.CurrentUserEmail]);
         groupDoc.members = JSON.stringify(memberEmails);
+        if (memberEmails.includes(Doc.CurrentUserEmail)) {
+            this.currentUserGroups.push(groupName);
+            setGroups(this.currentUserGroups);
+        }
         this.addGroup(groupDoc);
     }
 
@@ -172,8 +222,16 @@ export default class GroupManager extends React.Component<{}> {
     deleteGroup(group: Doc): boolean {
         if (group) {
             if (this.GroupManagerDoc && this.hasEditAccess(group)) {
+                // TODO look at this later
+                // SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
                 Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group);
-                SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
+                SharingManager.Instance.removeGroup(group);
+                const members: string[] = JSON.parse(StrCast(group.members));
+                if (members.includes(Doc.CurrentUserEmail)) {
+                    const index = this.currentUserGroups.findIndex(groupName => groupName === group.groupName);
+                    index !== -1 && this.currentUserGroups.splice(index, 1);
+                    setGroups(this.currentUserGroups);
+                }
                 if (group === this.currentGroup) {
                     runInAction(() => this.currentGroup = undefined);
                 }
@@ -193,6 +251,7 @@ export default class GroupManager extends React.Component<{}> {
             const memberList: string[] = JSON.parse(StrCast(groupDoc.members));
             !memberList.includes(email) && memberList.push(email);
             groupDoc.members = JSON.stringify(memberList);
+            SharingManager.Instance.shareWithAddedMember(groupDoc, email);
         }
     }
 
@@ -205,8 +264,11 @@ export default class GroupManager extends React.Component<{}> {
         if (this.hasEditAccess(groupDoc)) {
             const memberList: string[] = JSON.parse(StrCast(groupDoc.members));
             const index = memberList.indexOf(email);
-            index !== -1 && memberList.splice(index, 1);
-            groupDoc.members = JSON.stringify(memberList);
+            if (index !== -1) {
+                const user = memberList.splice(index, 1)[0];
+                groupDoc.members = JSON.stringify(memberList);
+                SharingManager.Instance.removeMember(groupDoc, email);
+            }
         }
     }
 
@@ -243,104 +305,133 @@ export default class GroupManager extends React.Component<{}> {
         this.createGroupDoc(this.inputRef.current.value, this.selectedUsers?.map(user => user.value));
         this.selectedUsers = null;
         this.inputRef.current.value = "";
+        this.buttonColour = "#979797";
+
+        const { left, width, top } = this.createGroupButtonRef.current!.getBoundingClientRect();
+        TaskCompletionBox.popupX = left - 2 * width;
+        TaskCompletionBox.popupY = top;
+        TaskCompletionBox.textDisplayed = "Group created!";
+        TaskCompletionBox.taskCompleted = true;
+        setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2000);
+
     }
 
-    /**
-     * A getter that @returns the interface rendered to view an individual group.
-     */
-    private get editingInterface() {
-        const members: string[] = this.currentGroup ? JSON.parse(StrCast(this.currentGroup.members)) : [];
-        const options: UserOptions[] = this.currentGroup ? this.options.filter(option => !(JSON.parse(StrCast(this.currentGroup!.members)) as string[]).includes(option.value)) : [];
-        return (!this.currentGroup ? null :
-            <div className="editing-interface">
-                <div className="editing-header">
-                    <b>{this.currentGroup.groupName}</b>
-                    <div className={"close-button"} onClick={action(() => this.currentGroup = undefined)}>
-                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+    private get groupCreationModal() {
+        const contents = (
+            <div className="group-create">
+                <div className="group-heading" style={{ marginBottom: 0 }}>
+                    <p><b>New Group</b></p>
+                    <div className={"close-button"} onClick={action(() => this.createGroupModalOpen = false)}>
+                        <FontAwesomeIcon icon={fa.faTimes} color={"black"} size={"lg"} />
                     </div>
-
-                    {this.hasEditAccess(this.currentGroup) ?
-                        <div className="group-buttons">
-                            <div className="add-member-dropdown">
-                                <Select
-                                    // isMulti={true}
-                                    isSearchable={true}
-                                    options={options}
-                                    onChange={selectedOption => this.addMemberToGroup(this.currentGroup!, (selectedOption as UserOptions).value)}
-                                    placeholder={"Add members"}
-                                    value={null}
-                                    closeMenuOnSelect={true}
-                                />
-                            </div>
-                            <button onClick={() => this.deleteGroup(this.currentGroup!)}>Delete group</button>
-                        </div> :
-                        null}
-                </div>
-                <div className="editing-contents">
-                    {members.map(member => (
-                        <div className="editing-row">
-                            <div className="user-email">
-                                {member}
-                            </div>
-                            {this.hasEditAccess(this.currentGroup!) ? <button onClick={() => this.removeMemberFromGroup(this.currentGroup!, member)}> Remove </button> : null}
-                        </div>
-                    ))}
                 </div>
+                <input
+                    className="group-input"
+                    ref={this.inputRef}
+                    onKeyDown={this.handleKeyDown}
+                    type="text"
+                    placeholder="Group name"
+                    onChange={action(() => this.buttonColour = this.inputRef.current?.value ? "black" : "#979797")} />
+                <Select
+                    isMulti={true}
+                    isSearchable={true}
+                    options={this.options}
+                    onChange={this.handleChange}
+                    placeholder={"Select users"}
+                    value={this.selectedUsers}
+                    closeMenuOnSelect={false}
+                    styles={{
+                        dropdownIndicator: (base, state) => ({
+                            ...base,
+                            transition: '0.5s all ease',
+                            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
+                        }),
+                        multiValue: (base) => ({
+                            ...base,
+                            maxWidth: "50%",
+
+                            '&:hover': {
+                                maxWidth: "unset"
+                            }
+                        })
+                    }}
+                />
+                <button
+                    ref={this.createGroupButtonRef}
+                    onClick={this.createGroup}
+                    style={{ background: this.buttonColour }}
+                    disabled={this.buttonColour === "#979797"}
+                >
+                    Create
+                </button>
             </div>
         );
 
+        return (
+            <MainViewModal
+                isDisplayed={this.createGroupModalOpen}
+                interactive={true}
+                contents={contents}
+                dialogueBoxStyle={{ width: "90%", height: "70%" }}
+                closeOnExternalClick={action(() => this.createGroupModalOpen = false)}
+            />
+        );
     }
 
     /**
      * A getter that @returns the main interface for the GroupManager.
      */
     private get groupInterface() {
+
+        const sortGroups = (d1: Doc, d2: Doc) => {
+            const g1 = StrCast(d1.groupName);
+            const g2 = StrCast(d2.groupName);
+
+            return g1 < g2 ? -1 : g1 === g2 ? 0 : 1;
+        };
+
+        let groups = this.getAllGroups();
+        groups = this.groupSort === "ascending" ? groups.sort(sortGroups) : this.groupSort === "descending" ? groups.sort(sortGroups).reverse() : groups;
+
         return (
             <div className="group-interface">
-                {/* <MainViewModal
-                    contents={this.editingInterface}
-                    isDisplayed={this.currentGroup ? true : false}
-                    interactive={true}
-                    dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
-                    overlayDisplayedOpacity={this.overlayOpacity}
-                /> */}
+                {this.groupCreationModal}
                 {this.currentGroup ?
                     <GroupMemberView
                         group={this.currentGroup}
-                        onCloseButtonClick={() => this.currentGroup = undefined}
+                        onCloseButtonClick={action(() => this.currentGroup = undefined)}
                     />
                     : null}
                 <div className="group-heading">
-                    <h1>Groups</h1>
+                    <p><b>Manage Groups</b></p>
+                    <button onClick={action(() => this.createGroupModalOpen = true)}>
+                        <FontAwesomeIcon icon={fa.faPlus} size={"sm"} /> Create Group
+                    </button>
                     <div className={"close-button"} onClick={this.close}>
-                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+                        <FontAwesomeIcon icon={fa.faTimes} color={"black"} size={"lg"} />
                     </div>
                 </div>
-                <div className="group-body">
-                    <div className="group-create">
-                        <button onClick={this.createGroup}>Create group</button>
-                        <input ref={this.inputRef} onKeyDown={this.handleKeyDown} type="text" placeholder="Group name" />
-                        <Select
-                            isMulti={true}
-                            isSearchable={true}
-                            options={this.options}
-                            onChange={this.handleChange}
-                            placeholder={"Select users"}
-                            value={this.selectedUsers}
-                            closeMenuOnSelect={false}
-                        />
+                <div className="main-container">
+                    <div
+                        className="sort-groups"
+                        onClick={action(() => this.groupSort = this.groupSort === "ascending" ? "descending" : this.groupSort === "descending" ? "none" : "ascending")}>
+                        Name {this.groupSort === "ascending" ? "↑" : this.groupSort === "descending" ? "↓" : ""} {/* → */}
                     </div>
-                    <div className="group-content">
-                        {this.getAllGroups().map(group =>
-                            <div className="group-row">
-                                <div className="group-name">{group.groupName}</div>
-                                <button onClick={action(() => this.currentGroup = group)}>
-                                    {this.hasEditAccess(group) ? "Edit" : "View"}
-                                </button>
+                    <div className="group-body">
+                        {groups.map(group =>
+                            <div
+                                className="group-row"
+                                key={StrCast(group.groupName)}
+                            >
+                                <div className="group-name" >{group.groupName}</div>
+                                <div className="group-info" onClick={action(() => this.currentGroup = group)}>
+                                    <FontAwesomeIcon icon={fa.faInfoCircle} color={"#e8e8e8"} size={"sm"} style={{ backgroundColor: "#1e89d7", borderRadius: "100%", border: "1px solid #1e89d7" }} />
+                                </div>
                             </div>
                         )}
                     </div>
                 </div>
+
             </div>
         );
     }
@@ -351,8 +442,9 @@ export default class GroupManager extends React.Component<{}> {
                 contents={this.groupInterface}
                 isDisplayed={this.isOpen}
                 interactive={true}
-                dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
-                overlayDisplayedOpacity={this.overlayOpacity}
+                dialogueBoxStyle={{ zIndex: 1002 }}
+                overlayStyle={{ zIndex: 1001 }}
+                closeOnExternalClick={this.close}
             />
         );
     }
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
index 7833c485f..c609c5c7b 100644
--- a/src/client/util/GroupMemberView.scss
+++ b/src/client/util/GroupMemberView.scss
@@ -1,18 +1,17 @@
-@import "../views/globalCssVariables";
-
 .editing-interface {
-    background-color: whitesmoke !important;
-    color: grey;
     width: 100%;
     height: 100%;
 
+    hr {
+        margin-top: 20;
+    }
+
     button {
-        background: $darker-alt-accent;
         outline: none;
         border-radius: 5px;
         border: 0px;
         color: #fcfbf7;
-        text-transform: uppercase;
+        text-transform: none;
         letter-spacing: 2px;
         font-size: 75%;
         padding: 10px;
@@ -32,34 +31,69 @@
     .editing-header {
         margin-bottom: 5;
 
+        .group-title {
+            font-weight: bold;
+            font-size: 15;
+            text-align: center;
+            border: none;
+            outline: none;
+            color: black;
+            margin-top: -5;
+            height: 20;
+            text-overflow: ellipsis;
+
+            &:hover {
+                text-overflow: visible;
+                overflow-x: auto;
+            }
+        }
+
+        .sort-emails {
+            float: left;
+            margin: -18 0 0 5;
+            cursor: pointer;
+        }
+
         .group-buttons {
             display: flex;
             margin-top: 5;
+            margin-bottom: 25;
 
             .add-member-dropdown {
-                width: 100%;
+                width: 65%;
                 margin: 0 5;
+
+                input {
+                    height: 30;
+                }
             }
         }
     }
 
     .editing-contents {
         overflow-y: auto;
-        // max-height: 67%;
-        height: 67%;
+        height: 65%;
         width: 100%;
+        color: black;
+        margin-top: -15px;
 
         .editing-row {
             display: flex;
             align-items: center;
-            // border: 1px solid;
-            // border-radius: 10px;
+            margin-bottom: 10px;
+            position: relative;
 
             .user-email {
-                // position: relative;
                 min-width: 65%;
                 word-break: break-all;
                 padding: 0 5;
+                text-align: left;
+            }
+
+            .remove-button {
+                position: absolute;
+                right: 10;
+                cursor: pointer;
             }
         }
     }
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index b2d75158e..f20670c4e 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -4,14 +4,14 @@ import { observer } from "mobx-react";
 import GroupManager, { UserOptions } from "./GroupManager";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { StrCast } from "../../fields/Types";
-import { action } from "mobx";
+import { action, observable } from "mobx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import Select from "react-select";
-import { Doc, Opt } from "../../fields/Doc";
+import { Doc } from "../../fields/Doc";
 import "./GroupMemberView.scss";
 
-library.add(fa.faWindowClose);
+library.add(fa.faTimes, fa.faTrashAlt);
 
 interface GroupMemberViewProps {
     group: Doc;
@@ -21,17 +21,26 @@ interface GroupMemberViewProps {
 @observer
 export default class GroupMemberView extends React.Component<GroupMemberViewProps> {
 
+    @observable private memberSort: "ascending" | "descending" | "none" = "none";
+
     private get editingInterface() {
-        const members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : [];
+        let members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : [];
+        members = this.memberSort === "ascending" ? members.sort() : this.memberSort === "descending" ? members.sort().reverse() : members;
+
         const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : [];
+
         return (!this.props.group ? null :
             <div className="editing-interface">
                 <div className="editing-header">
-                    <b>{this.props.group.groupName}</b>
+                    <input
+                        className="group-title"
+                        value={StrCast(this.props.group.groupName)}
+                        onChange={e => this.props.group.groupName = e.currentTarget.value}
+                    >
+                    </input>
                     <div className={"memberView-closeButton"} onClick={action(this.props.onCloseButtonClick)}>
-                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+                        <FontAwesomeIcon icon={fa.faTimes} color={"black"} size={"lg"} />
                     </div>
-
                     {GroupManager.Instance.hasEditAccess(this.props.group) ?
                         <div className="group-buttons">
                             <div className="add-member-dropdown">
@@ -42,19 +51,39 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
                                     placeholder={"Add members"}
                                     value={null}
                                     closeMenuOnSelect={true}
+                                    styles={{
+                                        dropdownIndicator: (base, state) => ({
+                                            ...base,
+                                            transition: '0.5s all ease',
+                                            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
+                                        })
+                                    }}
                                 />
                             </div>
                             <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
                         </div> :
                         null}
+                    <div
+                        className="sort-emails"
+                        onClick={action(() => this.memberSort = this.memberSort === "ascending" ? "descending" : this.memberSort === "descending" ? "none" : "ascending")}>
+                        Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
+                    </div>
                 </div>
+                <hr />
                 <div className="editing-contents">
                     {members.map(member => (
-                        <div className="editing-row">
+                        <div
+                            className="editing-row"
+                            key={member}
+                        >
                             <div className="user-email">
                                 {member}
                             </div>
-                            {GroupManager.Instance.hasEditAccess(this.props.group) ? <button onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}> Remove </button> : null}
+                            {GroupManager.Instance.hasEditAccess(this.props.group) ?
+                                <div className={"remove-button"} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
+                                    <FontAwesomeIcon icon={fa.faTrashAlt} size={"sm"} />
+                                </div>
+                                : null}
                         </div>
                     ))}
                 </div>
@@ -68,6 +97,8 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp
             isDisplayed={true}
             interactive={true}
             contents={this.editingInterface}
+            dialogueBoxStyle={{ width: 400, height: 250 }}
+            closeOnExternalClick={this.props.onCloseButtonClick}
         />;
     }
 
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index edeb461e0..04a750f93 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -27,7 +27,7 @@ export namespace InteractionUtils {
     export interface MultiTouchEventDisposer { (): void; }
 
     /**
-     * 
+     *
      * @param element - element to turn into a touch target
      * @param startFunc - event handler, typically Touchable.onTouchStart (classes that inherit touchable can pass in this.onTouchStart)
      */
@@ -94,10 +94,20 @@ export namespace InteractionUtils {
     export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number,
         color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string,
         dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) {
+
         let pts: { X: number; Y: number; }[] = [];
         if (shape) { //if any of the shape are true
             pts = makePolygon(shape, points);
         }
+        else if (points.length >= 5 && points[3].X === points[4].X) {
+            for (var i = 0; i < points.length - 3; i += 4) {
+                const array = [[points[i].X, points[i].Y], [points[i + 1].X, points[i + 1].Y], [points[i + 2].X, points[i + 2].Y], [points[i + 3].X, points[i + 3].Y]];
+                for (var t = 0; t < 1; t += 0.01) {
+                    const point = beziercurve(t, array);
+                    pts.push({ X: point[0], Y: point[1] });
+                }
+            }
+        }
         else if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y === points[0].Y) {
             //pointer is up (first and last points are the same)
             const newPoints = points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]);
@@ -111,7 +121,17 @@ export namespace InteractionUtils {
                 }
             }
         } else {
-            pts = points;
+            pts = points.slice();
+            // bcz: Ugh... this is ugly, but shapes apprently have an extra point added that is = (p[0].x,p[0].y+1) as some sort of flag.  need to remove it here.
+            if (pts.length > 2 && pts[pts.length - 2].X === pts[0].X && pts[pts.length - 2].Y === pts[0].Y) {
+                pts.pop();
+            }
+        }
+        if (isNaN(scalex)) {
+            scalex = 1;
+        }
+        if (isNaN(scaley)) {
+            scaley = 1;
         }
         const strpts = pts.reduce((acc: string, pt: { X: number, Y: number }) => acc +
             `${(pt.X - left - width / 2) * scalex + width / 2},
@@ -119,24 +139,23 @@ export namespace InteractionUtils {
         const dashArray = String(Number(width) * Number(dash));
         const defGuid = Utils.GenerateGuid();
         const arrowDim = Math.max(0.5, 8 / Math.log(Math.max(2, strokeWidth)));
-        return (<svg fill={fill === "none" ? color : fill}> {/* setting the svg fill sets the arrowhead fill */}
+        return (<svg fill={color}> {/* setting the svg fill sets the arrowStart fill */}
             {nodefs ? (null) : <defs>
                 {arrowStart !== "dot" && arrowEnd !== "dot" ? (null) : <marker id={`dot${defGuid}`} orient="auto" overflow="visible">
                     <circle r={1} fill="context-stroke" />
                 </marker>}
-                {arrowStart !== "arrowHead" && arrowEnd !== "arrowHead" ? (null) : <marker id={`arrowHead${defGuid}`} orient="auto" overflow="visible" refX="1.6" refY="0" markerWidth="10" markerHeight="7">
+                {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) : <marker id={`arrowStart${defGuid}`} orient="auto" overflow="visible" refX="1.6" refY="0" markerWidth="10" markerHeight="7">
                     <polygon points={`${arrowDim} ${-Math.max(1, arrowDim / 2)}, ${arrowDim} ${Math.max(1, arrowDim / 2)}, -1 0`} />
                 </marker>}
-                {arrowStart !== "arrowEnd" && arrowEnd !== "arrowEnd" ? (null) : <marker id={`arrowEnd${defGuid}`} orient="auto" overflow="visible" refX="1.6" refY="0" markerWidth="10" markerHeight="7">
+                {arrowStart !== "arrow" && arrowEnd !== "arrow" ? (null) : <marker id={`arrowEnd${defGuid}`} orient="auto" overflow="visible" refX="1.6" refY="0" markerWidth="10" markerHeight="7">
                     <polygon points={`${2 - arrowDim} ${-Math.max(1, arrowDim / 2)}, ${2 - arrowDim} ${Math.max(1, arrowDim / 2)}, 3 0`} />
                 </marker>}
             </defs>}
-
             <polyline
                 points={strpts}
                 style={{
                     filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
-                    fill,
+                    fill: fill ? fill : "transparent",
                     opacity: strokeWidth !== width ? 0.5 : undefined,
                     pointerEvents: pevents as any,
                     stroke: color ?? "rgb(0, 0, 0)",
@@ -145,25 +164,13 @@ export namespace InteractionUtils {
                     strokeLinecap: "round",
                     strokeDasharray: dashArray
                 }}
-                markerStart={`url(#${arrowStart + defGuid})`}
-                markerEnd={`url(#${arrowEnd + defGuid})`}
+                markerStart={`url(#${arrowStart + "Start" + defGuid})`}
+                markerEnd={`url(#${arrowEnd + "End" + defGuid})`}
             />
 
         </svg>);
     }
 
-    // export function makeArrow() {
-    //     return (
-    //         InkOptionsMenu.Instance.getColors().map(color => {
-    //             const id1 = "arrowHeadTest" + color;
-    //             console.log(color);
-    //             <marker id={id1} orient="auto" overflow="visible" refX="0" refY="1" markerWidth="10" markerHeight="7">
-    //                 <polygon points="0 0, 3 1, 0 2" fill={"#" + color} />
-    //             </marker>;
-    //         })
-    //     );
-    // }
-
     export function makePolygon(shape: string, points: { X: number, Y: number }[]) {
         if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) {
             //pointer is up (first and last points are the same)
@@ -213,10 +220,28 @@ export namespace InteractionUtils {
                 points.push({ X: left, Y: top });
                 return points;
             case "triangle":
+                // points.push({ X: left, Y: bottom });
+                // points.push({ X: right, Y: bottom });
+                // points.push({ X: (right + left) / 2, Y: top });
+                // points.push({ X: left, Y: bottom });
+
+                points.push({ X: left, Y: bottom });
                 points.push({ X: left, Y: bottom });
+
+                points.push({ X: right, Y: bottom });
+                points.push({ X: right, Y: bottom });
+                points.push({ X: right, Y: bottom });
                 points.push({ X: right, Y: bottom });
+
+                points.push({ X: (right + left) / 2, Y: top });
+                points.push({ X: (right + left) / 2, Y: top });
                 points.push({ X: (right + left) / 2, Y: top });
+                points.push({ X: (right + left) / 2, Y: top });
+
+                points.push({ X: left, Y: bottom });
                 points.push({ X: left, Y: bottom });
+
+
                 return points;
             case "circle":
                 const centerX = (right + left) / 2;
@@ -252,6 +277,7 @@ export namespace InteractionUtils {
             //     points.push({ X: x2, Y: y2 });
             //     return points;
             case "line":
+
                 points.push({ X: left, Y: top });
                 points.push({ X: right, Y: bottom });
                 return points;
@@ -278,8 +304,8 @@ export namespace InteractionUtils {
 
     /**
      * Returns euclidean distance between two points
-     * @param pt1 
-     * @param pt2 
+     * @param pt1
+     * @param pt2
      */
     export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number {
         return Math.sqrt(Math.pow(pt1.clientX - pt2.clientX, 2) + Math.pow(pt1.clientY - pt2.clientY, 2));
@@ -378,7 +404,6 @@ export namespace InteractionUtils {
         //                 let dist12 = TwoPointEuclidist(pt1, pt2);
         //                 let dist23 = TwoPointEuclidist(pt2, pt3);
         //                 let dist13 = TwoPointEuclidist(pt1, pt3);
-        //                 console.log(`distances: ${dist12}, ${dist23}, ${dist13}`);
         //                 let dist12close = dist12 < leniency;
         //                 let dist23close = dist23 < leniency;
         //                 let dist13close = dist13 < leniency;
@@ -410,4 +435,4 @@ export namespace InteractionUtils {
         //     }
         // }
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 749fabfcc..223f0e7ef 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -1,8 +1,7 @@
-import { Doc, DocListCast } from "../../fields/Doc";
+import { Doc, DocListCast, Opt } from "../../fields/Doc";
 import { List } from "../../fields/List";
 import { listSpec } from "../../fields/Schema";
 import { Cast, StrCast } from "../../fields/Types";
-import { Scripting } from "./Scripting";
 
 /* 
  * link doc: 
@@ -23,9 +22,13 @@ import { Scripting } from "./Scripting";
 export class LinkManager {
 
     private static _instance: LinkManager;
+
+    public static currentLink: Opt<Doc>;
+
     public static get Instance(): LinkManager {
         return this._instance || (this._instance = new this());
     }
+
     private constructor() {
     }
 
@@ -57,12 +60,17 @@ export class LinkManager {
     }
 
     // finds all links that contain the given anchor
-    public getAllRelatedLinks(anchor: Doc): Doc[] {
+    public getAllDirectLinks(anchor: Doc): Doc[] {
         const related = LinkManager.Instance.getAllLinks().filter(link => {
             const protomatch1 = Doc.AreProtosEqual(anchor, Cast(link.anchor1, Doc, null));
             const protomatch2 = Doc.AreProtosEqual(anchor, Cast(link.anchor2, Doc, null));
             return protomatch1 || protomatch2 || Doc.AreProtosEqual(link, anchor);
         });
+        return related;
+    }
+    // finds all links that contain the given anchor
+    public getAllRelatedLinks(anchor: Doc): Doc[] {
+        const related = LinkManager.Instance.getAllDirectLinks(anchor);
         DocListCast(anchor[Doc.LayoutFieldKey(anchor) + "-annotations"]).map(anno => {
             related.push(...LinkManager.Instance.getAllRelatedLinks(anno));
         });
@@ -199,7 +207,4 @@ export class LinkManager {
         if (Doc.AreProtosEqual(anchor, a2)) return a1;
         if (Doc.AreProtosEqual(anchor, linkDoc)) return linkDoc;
     }
-}
-
-Scripting.addGlobal(function links(doc: any) { return new List(LinkManager.Instance.getAllRelatedLinks(doc)); },
-    "creates a link to inputted document", "(doc: any)");
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/client/util/ScriptManager.ts b/src/client/util/ScriptManager.ts
index 785e63d9a..94806a7ba 100644
--- a/src/client/util/ScriptManager.ts
+++ b/src/client/util/ScriptManager.ts
@@ -32,24 +32,17 @@ export class ScriptManager {
     }
 
     public addScript(scriptDoc: Doc): boolean {
-
-        console.log("in add script method");
-
         const scriptList = this.getAllScripts();
         scriptList.push(scriptDoc);
         if (ScriptManager.Instance.ScriptManagerDoc) {
             ScriptManager.Instance.ScriptManagerDoc.data = new List<Doc>(scriptList);
             ScriptManager.addScriptToGlobals(scriptDoc);
-            console.log("script added");
             return true;
         }
         return false;
     }
 
     public deleteScript(scriptDoc: Doc): boolean {
-
-        console.log("in delete script method");
-
         if (scriptDoc.name) {
             Scripting.removeGlobal(StrCast(scriptDoc.name));
         }
@@ -70,7 +63,6 @@ export class ScriptManager {
         Scripting.removeGlobal(StrCast(scriptDoc.name));
 
         const params = Cast(scriptDoc["data-params"], listSpec("string"), []);
-        console.log(params);
         const paramNames = params.reduce((o: string, p: string) => {
             if (params.indexOf(p) === params.length - 1) {
                 o = o + p.split(":")[0].trim();
@@ -82,8 +74,6 @@ export class ScriptManager {
 
         const f = new Function(paramNames, StrCast(scriptDoc.script));
 
-        console.log(scriptDoc.script);
-
         Object.defineProperty(f, 'name', { value: StrCast(scriptDoc.name), writable: false });
 
         let parameters = "(";
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index 09e2aa56b..cb0a4bea0 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -10,8 +10,6 @@ export { ts };
 // @ts-ignore
 import * as typescriptlib from '!!raw-loader!./type_decls.d';
 import { Doc, Field } from '../../fields/Doc';
-import { Cast } from "../../fields/Types";
-import { listSpec } from "../../fields/Schema";
 
 export interface ScriptSucccess {
     success: true;
@@ -95,10 +93,10 @@ export namespace Scripting {
     export function removeGlobal(name: string) {
         if (getGlobals().includes(name)) {
             delete _scriptingGlobals[name];
-            if (_scriptingDescriptions[name]){
+            if (_scriptingDescriptions[name]) {
                 delete _scriptingDescriptions[name];
             }
-            if (_scriptingParams[name]){
+            if (_scriptingParams[name]) {
                 delete _scriptingParams[name];
             }
             return true;
@@ -123,11 +121,11 @@ export namespace Scripting {
         return _scriptingGlobals;
     }
 
-    export function getDescriptions(){
+    export function getDescriptions() {
         return _scriptingDescriptions;
     }
 
-    export function getParameters(){
+    export function getParameters() {
         return _scriptingParams;
     }
 }
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 024532f90..20d881961 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -14,6 +14,7 @@ export namespace SelectionManager {
         SelectedDocuments: ObservableMap<DocumentView, boolean> = new ObservableMap();
         @action
         SelectDoc(docView: DocumentView, ctrlPressed: boolean): void {
+
             // if doc is not in SelectedDocuments, add it
             if (!manager.SelectedDocuments.get(docView)) {
                 if (!ctrlPressed) {
@@ -21,7 +22,6 @@ export namespace SelectionManager {
                 }
 
                 manager.SelectedDocuments.set(docView, true);
-                // console.log(manager.SelectedDocuments);
                 docView.props.whenActiveChanged(true);
             } else if (!ctrlPressed && Array.from(manager.SelectedDocuments.entries()).length > 1) {
                 Array.from(manager.SelectedDocuments.keys()).map(dv => dv !== docView && dv.props.whenActiveChanged(false));
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index fa2609ca2..c1627e69f 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -52,11 +52,12 @@
     .settings-body {
         display: flex;
         justify-content: space-between;
+        margin-top: -10;
 
         .settings-type {
             display: flex;
             flex-direction: column;
-            flex-basis: 30%;
+            flex-basis: 45%;
 
         }
 
@@ -105,6 +106,7 @@
         text-transform: uppercase;
         letter-spacing: 2px;
         font-size: 120%;
+        margin-top: 0;
     }
 
     .container {
@@ -134,4 +136,25 @@
 
 
     }
+}
+
+@media only screen and (max-device-width: 480px) {
+    .settings-interface {
+        width: 80vw;
+        height: 400px;
+    }
+
+    .settings-interface .settings-body .settings-content input {
+        font-size: 30;
+    }
+
+    .settings-interface button {
+        width: 100%;
+        font-size: 30px;
+        background: #b2cef8;
+    }
+
+    .settings-interface .settings-heading {
+        font-size: 25;
+    }
 }
\ No newline at end of file
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 9888cce48..fbdceb43e 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -9,20 +9,27 @@ import "./SettingsManager.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Networking } from "../Network";
 import { CurrentUserUtils } from "./CurrentUserUtils";
-import { Utils } from "../../Utils";
+import { Utils, addStyleSheet, addStyleSheetRule, removeStyleSheetRule } from "../../Utils";
 import { Doc } from "../../fields/Doc";
+import GroupManager from "./GroupManager";
+import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
+import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
+import { togglePlaygroundMode } from "../../fields/util";
+import { DocServer } from "../DocServer";
 
-library.add(fa.faWindowClose);
+library.add(fa.faTimes);
 
 @observer
 export default class SettingsManager extends React.Component<{}> {
     public static Instance: SettingsManager;
+    static _settingsStyle = addStyleSheet();
     @observable private isOpen = false;
     @observable private dialogueBoxOpacity = 1;
     @observable private overlayOpacity = 0.4;
     @observable private settingsContent = "password";
     @observable private errorText = "";
     @observable private successText = "";
+    @observable private playgroundMode = false;
     private curr_password_ref = React.createRef<HTMLInputElement>();
     private new_password_ref = React.createRef<HTMLInputElement>();
     private new_confirm_ref = React.createRef<HTMLInputElement>();
@@ -83,6 +90,24 @@ export default class SettingsManager extends React.Component<{}> {
     noviceToggle = (event: any) => {
         Doc.UserDoc().noviceMode = !Doc.UserDoc().noviceMode;
     }
+    @action
+    googleAuthorize = (event: any) => {
+        GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true);
+    }
+    @action
+    hypothesisAuthorize = (event: any) => {
+        HypothesisAuthenticationManager.Instance.fetchAccessToken(true);
+    }
+
+    @action
+    togglePlaygroundMode = () => {
+        //togglePlaygroundMode();
+        this.playgroundMode = !this.playgroundMode;
+        if (this.playgroundMode) DocServer.Control.makeReadOnly();
+        else DocServer.Control.makeEditable();
+
+        addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" });
+    }
 
     private get settingsInterface() {
         return (
@@ -90,13 +115,17 @@ export default class SettingsManager extends React.Component<{}> {
                 <div className="settings-heading">
                     <h1>settings</h1>
                     <div className={"close-button"} onClick={this.close}>
-                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+                        <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
                     </div>
                 </div>
                 <div className="settings-body">
                     <div className="settings-type">
                         <button onClick={this.onClick} value="password">reset password</button>
-                        <button onClick={this.noviceToggle} value="data">{`toggle ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}</button>
+                        <button onClick={this.noviceToggle} value="data">{`Set ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}</button>
+                        <button onClick={this.togglePlaygroundMode}>{`${this.playgroundMode ? "Disable" : "Enable"} playground mode`}</button>
+                        <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
+                        <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
+                        <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
                         <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
                             {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
                         </button>
@@ -132,8 +161,7 @@ export default class SettingsManager extends React.Component<{}> {
                 contents={this.settingsInterface}
                 isDisplayed={this.isOpen}
                 interactive={true}
-                dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
-                overlayDisplayedOpacity={this.overlayOpacity}
+                closeOnExternalClick={this.close}
             />
         );
     }
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index fcbc05f8a..130785672 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -1,29 +1,112 @@
-@import "../views/globalCssVariables";
-
 .sharing-interface {
-    display: flex;
-    flex-direction: column;
-    width: 730px;
-
-    .dialogue-box {
-        width: 450;
-        height: 300;
-    }
+    width: 600px;
+    height: 360px;
 
     .overlay {
         transform: translate(-20px, -20px);
     }
 
+    select {
+        text-align: justify;
+        text-align-last: end
+    }
+
     .sharing-contents {
         display: flex;
+        flex-direction: column;
+
+        .close-button {
+            position: absolute;
+            right: 1em;
+            top: 1em;
+            cursor: pointer;
+            z-index: 999;
+        }
+
+        .share-setup {
+            display: flex;
+            margin-bottom: 20px;
+            align-items: center;
+            height: 36;
+
+            .user-search {
+                width: 90%;
+
+                input {
+                    height: 30;
+                }
+            }
+
+            .permissions-select {
+                z-index: 1;
+                margin-left: -100;
+                border: none;
+                outline: none;
+                text-align: justify; // for Edge
+                text-align-last: end;
+            }
+
+            .share-button {
+                height: 105%;
+                margin-left: 2%;
+                background-color: #979797;
+            }
+        }
+
+        .main-container {
+            display: flex;
+            margin-top: -10px;
+
+            .individual-container,
+            .group-container {
+                width: 50%;
+                display: flex;
+                flex-direction: column;
+
+                .user-sort {
+                    text-align: left;
+                    margin-left: 10;
+                    cursor: pointer;
+                }
+
+                .share-title {
+                    margin-top: 20px;
+                    margin-bottom: 20px;
+                }
+
+                .groups-list,
+                .users-list {
+                    font-style: italic;
+                    background: #e8e8e8;
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    overflow-y: scroll;
+                    overflow-x: hidden;
+                    text-align: left;
+                    display: flex;
+                    align-content: center;
+                    align-items: center;
+                    text-align: center;
+                    justify-content: center;
+                    color: black;
+                    height: 250px;
+                    margin: 0 2;
+
+
+                    .none {
+                        font-style: italic;
+
+                    }
+                }
+            }
+        }
 
         button {
-            background: $darker-alt-accent;
             outline: none;
             border-radius: 5px;
             border: 0px;
             color: #fcfbf7;
-            text-transform: uppercase;
+            text-transform: none;
             letter-spacing: 2px;
             font-size: 75%;
             padding: 0 10;
@@ -31,37 +114,6 @@
             transition: transform 0.2s;
             height: 25;
         }
-
-        .individual-container,
-        .group-container {
-            width: 50%;
-
-            .share-groups,
-            .share-individual {
-                margin-top: 20px;
-                margin-bottom: 20px;
-            }
-
-            .groups-list,
-            .users-list {
-                font-style: italic;
-                background: white;
-                border: 1px solid black;
-                padding-left: 10px;
-                padding-right: 10px;
-                overflow-y: scroll;
-                overflow-x: hidden;
-                text-align: left;
-                display: flex;
-                align-content: center;
-                align-items: center;
-                text-align: center;
-                justify-content: center;
-                color: red;
-                height: 150px;
-                margin: 0 2;
-            }
-        }
     }
 
     .focus-span {
@@ -69,11 +121,10 @@
     }
 
     p {
-        font-size: 15px;
+        font-size: 20px;
         text-align: left;
-        font-style: italic;
-        padding: 0;
         margin: 0 0 20px 0;
+        color: black;
     }
 
     .hr-substitute {
@@ -108,30 +159,41 @@
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        width: 700px;
-        min-width: 700px;
-        max-width: 700px;
+        width: 100%;
         text-align: left;
         font-style: normal;
         font-size: 14;
         font-weight: normal;
         padding: 0;
-        align-items: baseline;
+        align-items: center;
+
+        .group-info {
+            cursor: pointer;
+        }
+
+        &:hover .padding {
+            white-space: unset;
+        }
 
         .padding {
             padding: 0 10px 0 0;
             color: black;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            max-width: 40%;
         }
 
         .permissions-dropdown {
-            outline: none;
+            border: none;
             height: 25;
+            background-color: #e8e8e8;
         }
 
         .edit-actions {
             display: flex;
             position: absolute;
-            right: 51.5%;
+            right: -10;
         }
 
     }
@@ -171,18 +233,4 @@
             padding-top: 12px;
         }
     }
-
-    .close-button {
-        border-radius: 5px;
-        margin-top: 20px;
-        padding: 10px 0;
-        background: aliceblue;
-        transition: 0.5s ease all;
-        border: 1px solid;
-        border-color: aliceblue;
-    }
-
-    .close-button:hover {
-        border-color: black;
-    }
 }
\ No newline at end of file
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 127ee33ce..0d8b33fbe 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -1,62 +1,43 @@
 import { observable, runInAction, action } from "mobx";
 import * as React from "react";
 import MainViewModal from "../views/MainViewModal";
-import { Doc, Opt, DocCastAsync } from "../../fields/Doc";
+import { Doc, Opt, DocListCastAsync } from "../../fields/Doc";
 import { DocServer } from "../DocServer";
 import { Cast, StrCast } from "../../fields/Types";
 import * as RequestPromise from "request-promise";
 import { Utils } from "../../Utils";
 import "./SharingManager.scss";
-import { Id } from "../../fields/FieldSymbols";
 import { observer } from "mobx-react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { library } from '@fortawesome/fontawesome-svg-core';
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import { DocumentView } from "../views/nodes/DocumentView";
 import { SelectionManager } from "./SelectionManager";
 import { DocumentManager } from "./DocumentManager";
 import { CollectionView } from "../views/collections/CollectionView";
 import { DictationOverlay } from "../views/DictationOverlay";
-import GroupManager from "./GroupManager";
+import GroupManager, { UserOptions } from "./GroupManager";
 import GroupMemberView from "./GroupMemberView";
-
-library.add(fa.faCopy);
+import Select from "react-select";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { List } from "../../fields/List";
+import { distributeAcls, SharingPermissions } from "../../fields/util";
+import { TaskCompletionBox } from "../views/nodes/TaskCompletedBox";
 
 export interface User {
     email: string;
     userDocumentId: string;
 }
 
-export enum SharingPermissions {
-    None = "Not Shared",
-    View = "Can View",
-    Add = "Can Add",
-    Edit = "Can Edit"
+interface GroupOptions {
+    label: string;
+    options: UserOptions[];
 }
 
-const ColorMapping = new Map<string, string>([
-    [SharingPermissions.None, "red"],
-    [SharingPermissions.View, "maroon"],
-    [SharingPermissions.Add, "blue"],
-    [SharingPermissions.Edit, "green"]
-]);
-
-const HierarchyMapping = new Map<string, string>([
-    [SharingPermissions.None, "0"],
-    [SharingPermissions.View, "1"],
-    [SharingPermissions.Add, "2"],
-    [SharingPermissions.Edit, "3"],
-
-    ["0", SharingPermissions.None],
-    ["1", SharingPermissions.View],
-    ["2", SharingPermissions.Add],
-    ["3", SharingPermissions.Edit]
-
-]);
+// const SharingKey = "sharingPermissions";
+// const PublicKey = "publicLinkPermissions";
+// const DefaultColor = "black";
 
-const SharingKey = "sharingPermissions";
-const PublicKey = "publicLinkPermissions";
-const DefaultColor = "black";
+const groupType = "!groupType/";
+const indType = "!indType/";
 
 interface ValidatedUser {
     user: User;
@@ -70,17 +51,22 @@ export default class SharingManager extends React.Component<{}> {
     public static Instance: SharingManager;
     @observable private isOpen = false;
     @observable private users: ValidatedUser[] = [];
-    @observable private groups: Doc[] = [];
     @observable private targetDoc: Doc | undefined;
     @observable private targetDocView: DocumentView | undefined;
-    @observable private copied = false;
+    // @observable private copied = false;
     @observable private dialogueBoxOpacity = 1;
     @observable private overlayOpacity = 0.4;
-    @observable private groupToView: Opt<Doc>;
+    @observable private selectedUsers: UserOptions[] | null = null;
+    @observable private permissions: SharingPermissions = SharingPermissions.Edit;
+    @observable private individualSort: "ascending" | "descending" | "none" = "none";
+    @observable private groupSort: "ascending" | "descending" | "none" = "none";
+    private shareDocumentButtonRef: React.RefObject<HTMLButtonElement> = React.createRef();
 
-    private get linkVisible() {
-        return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
-    }
+
+
+    // private get linkVisible() {
+    //     return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
+    // }
 
     public open = (target: DocumentView) => {
         SelectionManager.DeselectAll();
@@ -89,32 +75,23 @@ export default class SharingManager extends React.Component<{}> {
             this.targetDoc = target.props.Document;
             DictationOverlay.Instance.hasActiveModal = true;
             this.isOpen = true;
-            if (!this.sharingDoc) {
-                this.sharingDoc = new Doc;
-            }
+            this.permissions = SharingPermissions.Edit;
         }));
 
-        runInAction(() => this.groups = GroupManager.Instance.getAllGroupsCopy());
     }
 
     public close = action(() => {
         this.isOpen = false;
         this.users = [];
+        this.selectedUsers = null;
+
         setTimeout(action(() => {
-            this.copied = false;
+            // this.copied = false;
             DictationOverlay.Instance.hasActiveModal = false;
             this.targetDoc = undefined;
         }), 500);
     });
 
-    private get sharingDoc() {
-        return this.targetDoc ? Cast(this.targetDoc[SharingKey], Doc) as Doc : undefined;
-    }
-
-    private set sharingDoc(value: Doc | undefined) {
-        this.targetDoc && (this.targetDoc[SharingKey] = value);
-    }
-
     constructor(props: {}) {
         super(props);
         SharingManager.Instance = this;
@@ -142,98 +119,118 @@ export default class SharingManager extends React.Component<{}> {
 
     setInternalGroupSharing = (group: Doc, permission: string) => {
         const members: string[] = JSON.parse(StrCast(group.members));
-        const users: ValidatedUser[] = this.users.filter(user => members.includes(user.user.email));
+        const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
 
-        const sharingDoc = this.sharingDoc!;
-        if (permission === SharingPermissions.None) {
-            const metadata = sharingDoc[StrCast(group.groupName)];
-            if (metadata) sharingDoc[StrCast(group.groupName)] = undefined;
-        }
-        else {
-            sharingDoc[StrCast(group.groupName)] = permission;
-        }
+        const target = this.targetDoc!;
+        const ACL = `ACL-${StrCast(group.groupName)}`;
+        // fix this - not needed (here and setinternalsharing and removegroup)
+        // target[ACL] = permission;
+        // Doc.GetProto(target)[ACL] = permission;
+
+        distributeAcls(ACL, permission as SharingPermissions, this.targetDoc!);
+
+        group.docsShared ? DocListCastAsync(group.docsShared).then(resolved => Doc.IndexOf(target, resolved!) === -1 && (group.docsShared as List<Doc>).push(target)) : group.docsShared = new List<Doc>([target]);
 
-        users.forEach(user => {
-            this.setInternalSharing(user, permission, group);
+        users.forEach(({ notificationDoc }) => {
+            DocListCastAsync(notificationDoc[storage]).then(resolved => {
+                if (permission !== SharingPermissions.None) Doc.IndexOf(target, resolved!) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
+                else Doc.IndexOf(target, resolved!) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target);
+            });
         });
     }
 
-    setInternalSharing = async (recipient: ValidatedUser, state: string, group: Opt<Doc>) => {
-        const { user, notificationDoc } = recipient;
-        const target = this.targetDoc!;
-        const manager = this.sharingDoc!;
-        const key = user.userDocumentId;
-
-        let metadata = await DocCastAsync(manager[key]);
-        const permissions: { [key: string]: number } = metadata?.permissions ? JSON.parse(StrCast(metadata.permissions)) : {};
-        permissions[StrCast(group ? group.groupName : Doc.CurrentUserEmail)] = parseInt(HierarchyMapping.get(state)!);
-        const max = Math.max(...Object.values(permissions));
-
-        // let max = 0;
-        // const keys: string[] = [];
-        // for (const [key, value] of Object.entries(permissions)) {
-        //     if (value === max && max !== 0) {
-        //         keys.push(key);
-        //     }
-        //     else if (value > max) {
-        //         keys.splice(0, keys.length);
-        //         keys.push(key);
-        //         max = value;
-        //     }
-        // }
-
-        switch (max) {
-            case 0:
-                if (metadata) {
-                    const sharedAlias = (await DocCastAsync(metadata.sharedAlias))!;
-                    Doc.RemoveDocFromList(notificationDoc, storage, sharedAlias);
-                    manager[key] = undefined;
-                }
-                break;
-
-            case 1: case 2: case 3:
-                if (!metadata) {
-                    metadata = new Doc;
-                    const sharedAlias = Doc.MakeAlias(target);
-                    Doc.AddDocToList(notificationDoc, storage, sharedAlias);
-                    metadata.sharedAlias = sharedAlias;
-                    manager[key] = metadata;
-                }
-                metadata.permissions = JSON.stringify(permissions);
-                // metadata.usersShared = JSON.stringify(keys);
-                break;
-        }
+    shareWithAddedMember = (group: Doc, emailId: string) => {
+        const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!;
 
-        if (metadata) metadata.maxPermission = HierarchyMapping.get(`${max}`);
+        if (group.docsShared) {
+            DocListCastAsync(group.docsShared).then(docsShared => {
+                docsShared?.forEach(doc => {
+                    DocListCastAsync(user.notificationDoc[storage]).then(resolved => Doc.IndexOf(doc, resolved!) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc));
+                });
+            });
+        }
     }
 
-    private setExternalSharing = (state: string) => {
-        const sharingDoc = this.sharingDoc;
-        if (!sharingDoc) {
-            return;
+    removeMember = (group: Doc, emailId: string) => {
+        const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!;
+
+        if (group.docsShared) {
+            DocListCastAsync(group.docsShared).then(docsShared => {
+                docsShared?.forEach(doc => {
+                    DocListCastAsync(user.notificationDoc[storage]).then(resolved => Doc.IndexOf(doc, resolved!) !== -1 && Doc.RemoveDocFromList(user.notificationDoc, storage, doc));
+                });
+            });
         }
-        sharingDoc[PublicKey] = state;
     }
 
-    private get sharingUrl() {
-        if (!this.targetDoc) {
-            return undefined;
+    removeGroup = (group: Doc) => {
+        if (group.docsShared) {
+            DocListCastAsync(group.docsShared).then(resolved => {
+                resolved?.forEach(doc => {
+                    const ACL = `ACL-${StrCast(group.groupName)}`;
+                    // doc[ACL] = doc[DataSym][ACL] = "Not Shared";
+
+                    distributeAcls(ACL, SharingPermissions.None, doc);
+
+                    const members: string[] = JSON.parse(StrCast(group.members));
+                    const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
+
+                    users.forEach(({ notificationDoc }) => Doc.RemoveDocFromList(notificationDoc, storage, doc));
+                });
+
+            });
         }
-        const baseUrl = Utils.prepend("/doc/" + this.targetDoc[Id]);
-        return `${baseUrl}?sharing=true`;
     }
 
-    copy = action(() => {
-        if (this.sharingUrl) {
-            Utils.CopyText(this.sharingUrl);
-            this.copied = true;
+    // @action
+    setInternalSharing = (recipient: ValidatedUser, permission: string) => {
+        const { user, notificationDoc } = recipient;
+        const target = this.targetDoc!;
+        const key = user.email.replace('.', '_');
+        const ACL = `ACL-${key}`;
+
+        distributeAcls(ACL, permission as SharingPermissions, this.targetDoc!);
+
+        if (permission !== SharingPermissions.None) {
+            DocListCastAsync(notificationDoc[storage]).then(resolved => {
+                Doc.IndexOf(target, resolved!) === -1 && Doc.AddDocToList(notificationDoc, storage, target);
+            });
         }
-    });
+        else {
+            DocListCastAsync(notificationDoc[storage]).then(resolved => {
+                Doc.IndexOf(target, resolved!) !== -1 && Doc.RemoveDocFromList(notificationDoc, storage, target);
+            });
+        }
+    }
+
+
+    // private setExternalSharing = (permission: string) => {
+    //     const sharingDoc = this.sharingDoc;
+    //     if (!sharingDoc) {
+    //         return;
+    //     }
+    //     sharingDoc[PublicKey] = permission;
+    // }
+
+    // private get sharingUrl() {
+    //     if (!this.targetDoc) {
+    //         return undefined;
+    //     }
+    //     const baseUrl = Utils.prepend("/doc/" + this.targetDoc[Id]);
+    //     return `${baseUrl}?sharing=true`;
+    // }
+
+    // copy = action(() => {
+    //     if (this.sharingUrl) {
+    //         Utils.CopyText(this.sharingUrl);
+    //         this.copied = true;
+    //     }
+    // });
 
     private get sharingOptions() {
         return Object.values(SharingPermissions).map(permission => {
             return (
-                <option key={permission} value={permission}>
+                <option key={permission} value={permission} selected={permission === SharingPermissions.Edit}>
                     {permission}
                 </option>
             );
@@ -270,33 +267,151 @@ export default class SharingManager extends React.Component<{}> {
         );
     }
 
-    private computePermissions = (userKey: string) => {
-        const sharingDoc = this.sharingDoc;
-        if (!sharingDoc) {
-            return SharingPermissions.None;
-        }
-        const metadata = sharingDoc[userKey] as Doc | string;
-        if (!metadata) {
-            return SharingPermissions.None;
+    @action
+    handleUsersChange = (selectedOptions: any) => {
+        this.selectedUsers = selectedOptions as UserOptions[];
+    }
+
+    @action
+    handlePermissionsChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        this.permissions = event.currentTarget.value as SharingPermissions;
+    }
+
+    @action
+    share = () => {
+        if (this.selectedUsers) {
+            this.selectedUsers.forEach(user => {
+                if (user.value.includes(indType)) {
+                    this.setInternalSharing(this.users.find(u => u.user.email === user.label)!, this.permissions);
+                }
+                else {
+                    this.setInternalGroupSharing(GroupManager.Instance.getGroup(user.label)!, this.permissions);
+                }
+            });
+
+            const { left, width, top, height } = this.shareDocumentButtonRef.current!.getBoundingClientRect();
+            TaskCompletionBox.popupX = left - 1.5 * width;
+            TaskCompletionBox.popupY = top - height;
+            TaskCompletionBox.textDisplayed = "Document shared!";
+            TaskCompletionBox.taskCompleted = true;
+            setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2000);
+
+            this.selectedUsers = null;
         }
-        return StrCast(metadata instanceof Doc ? metadata.maxPermission : metadata, SharingPermissions.None);
+    }
+
+    sortUsers = (u1: ValidatedUser, u2: ValidatedUser) => {
+        const { email: e1 } = u1.user;
+        const { email: e2 } = u2.user;
+        return e1 < e2 ? -1 : e1 === e2 ? 0 : 1;
+    }
+
+    sortGroups = (group1: Doc, group2: Doc) => {
+        const g1 = StrCast(group1.groupName);
+        const g2 = StrCast(group2.groupName);
+        return g1 < g2 ? -1 : g1 === g2 ? 0 : 1;
     }
 
     private get sharingInterface() {
-        const existOtherUsers = this.users.length > 0;
-        const existGroups = this.groups.length > 0;
+        const groupList = GroupManager.Instance?.getAllGroups() || [];
+
+        const sortedUsers = this.users.sort(this.sortUsers)
+            .map(({ user: { email } }) => ({ label: email, value: indType + email }));
+        const sortedGroups = groupList.sort(this.sortGroups)
+            .map(({ groupName }) => ({ label: StrCast(groupName), value: groupType + StrCast(groupName) }));
+
+        const options: GroupOptions[] = GroupManager.Instance ?
+            [
+                {
+                    label: 'Individuals',
+                    options: sortedUsers
+                },
+                {
+                    label: 'Groups',
+                    options: sortedGroups
+                }
+            ]
+            : [];
+
+        const users = this.individualSort === "ascending" ? this.users.sort(this.sortUsers) : this.individualSort === "descending" ? this.users.sort(this.sortUsers).reverse() : this.users;
+        const groups = this.groupSort === "ascending" ? groupList.sort(this.sortGroups) : this.groupSort === "descending" ? groupList.sort(this.sortGroups).reverse() : groupList;
+
+        const userListContents: (JSX.Element | null)[] = users.map(({ user, notificationDoc }) => {
+            const userKey = user.email.replace('.', '_');
+            const permissions = StrCast(this.targetDoc?.[`ACL-${userKey}`], SharingPermissions.None);
+
+            return permissions === SharingPermissions.None || user.email === this.targetDoc?.author ? null : (
+                <div
+                    key={userKey}
+                    className={"container"}
+                >
+                    <span className={"padding"}>{user.email}</span>
+                    <div className="edit-actions">
+                        <select
+                            className={"permissions-dropdown"}
+                            value={permissions}
+                            onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value)}
+                        >
+                            {this.sharingOptions}
+                        </select>
+                    </div>
+                </div>
+            );
+        });
 
-        // const manager = this.sharingDoc!;
+        userListContents.unshift(
+            (
+                <div
+                    key={"owner"}
+                    className={"container"}
+                >
+                    <span className={"padding"}>{this.targetDoc?.author}</span>
+                    <div className="edit-actions">
+                        <div className={"permissions-dropdown"}>
+                            Owner
+                        </div>
+                    </div>
+                </div>
+            )
+        );
+
+        const groupListContents = groups.map(group => {
+            const permissions = StrCast(this.targetDoc?.[`ACL-${StrCast(group.groupName)}`], SharingPermissions.None);
+
+            return permissions === SharingPermissions.None ? null : (
+                <div
+                    key={StrCast(group.groupName)}
+                    className={"container"}
+                >
+                    <div className={"padding"}>{group.groupName}</div>
+                    <div className="group-info" onClick={action(() => GroupManager.Instance.currentGroup = group)}>
+                        <FontAwesomeIcon icon={fa.faInfoCircle} color={"#e8e8e8"} size={"sm"} style={{ backgroundColor: "#1e89d7", borderRadius: "100%", border: "1px solid #1e89d7" }} />
+                    </div>
+                    <div className="edit-actions">
+                        <select
+                            className={"permissions-dropdown"}
+                            value={permissions}
+                            onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}
+                        >
+                            {this.sharingOptions}
+                        </select>
+                    </div>
+                </div>
+            );
+        });
+
+        const displayUserList = !userListContents?.every(user => user === null);
+        const displayGroupList = !groupListContents?.every(group => group === null);
 
         return (
             <div className={"sharing-interface"}>
-                {this.groupToView ?
+                {GroupManager.Instance?.currentGroup ?
                     <GroupMemberView
-                        group={this.groupToView}
-                        onCloseButtonClick={action(() => this.groupToView = undefined)}
+                        group={GroupManager.Instance.currentGroup}
+                        onCloseButtonClick={action(() => GroupManager.Instance.currentGroup = undefined)}
                     /> :
                     null}
-                <p className={"share-link"}>Manage the public link to {this.focusOn("this document...")}</p>
+                {/* <p className={"share-link"}>Manage the public link to {this.focusOn("this document...")}</p>
                 {!this.linkVisible ? (null) :
                     <div className={"link-container"}>
                         <div className={"link-box"} onClick={this.copy}>{this.sharingUrl}</div>
@@ -325,86 +440,81 @@ export default class SharingManager extends React.Component<{}> {
                         {this.sharingOptions}
                     </select>
                 </div>
-                <div className={"hr-substitute"} />
+                <div className={"hr-substitute"} /> */}
                 <div className="sharing-contents">
-                    <div className={"individual-container"}>
-                        <p className={"share-individual"}>Privately share {this.focusOn("this document")} with an individual...</p>
-                        <div className={"users-list"} style={{ display: existOtherUsers ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
-                            {!existOtherUsers ? "There are no other users in your database." :
-                                this.users.map(({ user, notificationDoc }) => { // can't use async here
-                                    const userKey = user.userDocumentId;
-                                    const permissions = this.computePermissions(userKey);
-                                    const color = ColorMapping.get(permissions);
-
-                                    // console.log(manager);
-                                    // const metadata = manager[userKey] as Doc;
-                                    // const usersShared = StrCast(metadata?.usersShared, "");
-                                    // console.log(usersShared)
-
-
-                                    return (
+                    <p className={"share-title"}><b>Share </b>{this.focusOn(StrCast(this.targetDoc?.title, "this document"))}</p>
+                    <div className={"close-button"} onClick={this.close}>
+                        <FontAwesomeIcon icon={"times"} color={"black"} size={"lg"} />
+                    </div>
+                    {this.targetDoc?.author !== Doc.CurrentUserEmail ? null
+                        :
+                        <div className="share-setup">
+                            <Select
+                                className={"user-search"}
+                                placeholder={"Enter user or group name..."}
+                                isMulti
+                                closeMenuOnSelect={false}
+                                options={options}
+                                onChange={this.handleUsersChange}
+                                value={this.selectedUsers}
+                            />
+                            <select className="permissions-select" onChange={this.handlePermissionsChange}>
+                                {this.sharingOptions}
+                            </select>
+                            <button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
+                                Share
+                            </button>
+                        </div>
+                    }
+                    <div className="main-container">
+                        <div className={"individual-container"}>
+                            <div
+                                className="user-sort"
+                                onClick={action(() => this.individualSort = this.individualSort === "ascending" ? "descending" : this.individualSort === "descending" ? "none" : "ascending")}>
+                                Individuals {this.individualSort === "ascending" ? "↑" : this.individualSort === "descending" ? "↓" : ""} {/* → */}
+                            </div>
+                            <div className={"users-list"} style={{ display: !displayUserList ? "flex" : "block" }}>{/*200*/}
+                                {
+                                    !displayUserList ?
                                         <div
-                                            key={userKey}
-                                            className={"container"}
+                                            className={"none"}
                                         >
-                                            <span className={"padding"}>{user.email}</span>
-                                            {/* <div className={"shared-by"}>{usersShared}</div> */}
-                                            <div className="edit-actions">
-                                                <select
-                                                    className={"permissions-dropdown"}
-                                                    value={permissions}
-                                                    style={{ color, borderColor: color }}
-                                                    onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value, undefined)}
-                                                >
-                                                    {this.sharingOptions}
-                                                </select>
-                                            </div>
+                                            There are no users this document has been shared with.
                                         </div>
-                                    );
-                                })
-                            }
+                                        :
+                                        userListContents
+                                }
+                            </div>
                         </div>
-                    </div>
-                    <div className={"group-container"}>
-                        <p className={"share-groups"}>Privately share {this.focusOn("this document")} with a group...</p>
-                        <div className={"groups-list"} style={{ display: existGroups ? "block" : "flex", minHeight: existOtherUsers ? undefined : 150 }}>{/*200*/}
-                            {!existGroups ? "There are no groups in your database." :
-                                this.groups.map(group => {
-                                    const permissions = this.computePermissions(StrCast(group.groupName));
-                                    const color = ColorMapping.get(permissions);
-                                    return (
+                        <div className={"group-container"}>
+                            <div
+                                className="user-sort"
+                                onClick={action(() => this.groupSort = this.groupSort === "ascending" ? "descending" : this.groupSort === "descending" ? "none" : "ascending")}>
+                                Groups {this.groupSort === "ascending" ? "↑" : this.groupSort === "descending" ? "↓" : ""} {/* → */}
+
+                            </div>
+                            <div className={"groups-list"} style={{ display: !displayGroupList ? "flex" : "block" }}>{/*200*/}
+                                {
+                                    !displayGroupList ?
                                         <div
-                                            key={StrCast(group.groupName)}
-                                            className={"container"}
+                                            className={"none"}
                                         >
-                                            <span className={"padding"}>{group.groupName}</span>
-                                            <div className="edit-actions">
-                                                <select
-                                                    className={"permissions-dropdown"}
-                                                    value={permissions}
-                                                    style={{ color, borderColor: color }}
-                                                    onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}
-                                                >
-                                                    {this.sharingOptions}
-                                                </select>
-                                                <button onClick={action(() => this.groupToView = group)}>Edit</button>
+                                            There are no groups this document has been shared with.
                                             </div>
-                                        </div>
-                                    );
-                                })
-
-                            }
+                                        :
+                                        groupListContents
+                                }
 
+                            </div>
                         </div>
                     </div>
+
                 </div>
-                <div className={"close-button"} onClick={this.close}>Done</div>
             </div>
         );
     }
 
     render() {
-        // console.log(this.sharingDoc);
         return (
             <MainViewModal
                 contents={this.sharingInterface}
@@ -412,6 +522,7 @@ export default class SharingManager extends React.Component<{}> {
                 interactive={true}
                 dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
                 overlayDisplayedOpacity={this.overlayOpacity}
+                closeOnExternalClick={this.close}
             />
         );
     }