Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into grid_view_secondary

16 files changed, 1137 insertions, 212 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 76c1fc9f7..4276e04e4 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -43,7 +43,7 @@ export class CurrentUserUtils {
             const queryTemplate = Docs.Create.MulticolumnDocument(
                 [
                     Docs.Create.QueryDocument({ 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 +54,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(
@@ -136,9 +155,9 @@ export class CurrentUserUtils {
         if (doc["template-button-switch"] === undefined) {
             const { FreeformDocument, MulticolumnDocument, TextDocument } = Docs.Create;
 
-            const yes = FreeformDocument([], { title: "yes", _height: 35, _width: 50, _LODdisable: true, _dimUnit: DimUnit.Pixel, _dimMagnitude: 40 });
+            const yes = FreeformDocument([], { title: "yes", _height: 35, _width: 50, _dimUnit: DimUnit.Pixel, _dimMagnitude: 40 });
             const name = TextDocument("name", { title: "name", _height: 35, _width: 70, _dimMagnitude: 1 });
-            const no = FreeformDocument([], { title: "no", _height: 100, _width: 100, _LODdisable: true });
+            const no = FreeformDocument([], { title: "no", _height: 100, _width: 100 });
             const labelTemplate = {
                 doc: {
                     type: "doc", content: [{
@@ -193,10 +212,10 @@ export class CurrentUserUtils {
 
             const shared = { _chromeStatus: "disabled", _autoHeight: true, _xMargin: 0 };
             const detailViewOpts = { title: "detailView", _width: 300, _fontFamily: "Arial", _fontSize: 12 };
-            const descriptionWrapperOpts = { title: "descriptions", _height: 300, columnWidth: -1, treeViewHideTitle: true, _pivotField: "title" };
+            const descriptionWrapperOpts = { title: "descriptions", _height: 300, _columnWidth: -1, treeViewHideTitle: true, _pivotField: "title" };
 
             const descriptionWrapper = MasonryDocument([details, short, long], { ...shared, ...descriptionWrapperOpts });
-            descriptionWrapper.sectionHeaders = new List<SchemaHeaderField>([
+            descriptionWrapper._columnHeaders = new List<SchemaHeaderField>([
                 new SchemaHeaderField("[A Short Description]", "dimGray", undefined, undefined, undefined, false),
                 new SchemaHeaderField("[Long Description]", "dimGray", undefined, undefined, undefined, true),
                 new SchemaHeaderField("[Details]", "dimGray", undefined, undefined, undefined, true),
@@ -219,13 +238,14 @@ 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];
         if (doc["template-buttons"] === undefined) {
             doc["template-buttons"] = new PrefetchProxy(Docs.Create.MasonryDocument(requiredTypes, {
                 title: "Advanced Item Prototypes", _xMargin: 0, _showTitle: "title",
-                _autoHeight: true, _width: 500, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+                _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
                 dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
             }));
         } else {
@@ -306,21 +326,17 @@ export class CurrentUserUtils {
     // setup templates for different document types when they are iconified from Document Decorations
     static setupDefaultIconTemplates(doc: Doc) {
         if (doc["template-icon-view"] === undefined) {
-            const iconView = Docs.Create.TextDocument("", {
-                title: "icon", _width: 150, _height: 30, isTemplateDoc: true, onDoubleClick: ScriptField.MakeScript("deiconifyView(self)")
+            const iconView = Docs.Create.LabelDocument({
+                title: "icon", textTransform: "unset", letterSpacing: "unset", layout: LabelBox.LayoutString("title"), _backgroundColor: "dimGray",
+                _width: 150, _height: 70, _xPadding: 10, _yPadding: 10, isTemplateDoc: true, onDoubleClick: ScriptField.MakeScript("deiconifyView(self)")
             });
-            Doc.GetProto(iconView).icon = new RichTextField('{"doc":{"type":"doc","content":[{"type":"paragraph","attrs":{"align":null,"color":null,"id":null,"indent":null,"inset":null,"lineSpacing":null,"paddingBottom":null,"paddingTop":null},"content":[{"type":"dashField","attrs":{"fieldKey":"title","docid":""}}]}]},"selection":{"type":"text","anchor":2,"head":2},"storedMarks":[]}', "");
+            //  Docs.Create.TextDocument("", {
+            //     title: "icon", _width: 150, _height: 30, isTemplateDoc: true, onDoubleClick: ScriptField.MakeScript("deiconifyView(self)")
+            // });
+            // Doc.GetProto(iconView).icon = new RichTextField('{"doc":{"type":"doc","content":[{"type":"paragraph","attrs":{"align":null,"color":null,"id":null,"indent":null,"inset":null,"lineSpacing":null,"paddingBottom":null,"paddingTop":null},"content":[{"type":"dashField","attrs":{"fieldKey":"title","docid":""}}]}]},"selection":{"type":"text","anchor":2,"head":2},"storedMarks":[]}', "");
             iconView.isTemplateDoc = makeTemplate(iconView);
             doc["template-icon-view"] = new PrefetchProxy(iconView);
         }
-        if (doc["template-icon-view-pdf"] === undefined) {
-            const iconPdfView = Docs.Create.LabelDocument({
-                title: "icon_" + DocumentType.PDF, textTransform: "unset", letterSpacing: "unset", layout: LabelBox.LayoutString("title"), _backgroundColor: "dimGray",
-                _width: 150, _height: 70, _xPadding: 10, _yPadding: 10, isTemplateDoc: true, onDoubleClick: ScriptField.MakeScript("deiconifyView(self)")
-            });
-            iconPdfView.isTemplateDoc = makeTemplate(iconPdfView, true, "icon_" + DocumentType.PDF);
-            doc["template-icon-view-pdf"] = new PrefetchProxy(iconPdfView);
-        }
         if (doc["template-icon-view-rtf"] === undefined) {
             const iconRtfView = Docs.Create.LabelDocument({
                 title: "icon_" + DocumentType.RTF, textTransform: "unset", letterSpacing: "unset", layout: LabelBox.LayoutString("text"),
@@ -347,7 +363,7 @@ export class CurrentUserUtils {
         } 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];
+            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));
@@ -362,11 +378,17 @@ export class CurrentUserUtils {
     }[] {
         if (doc.emptyPresentation === undefined) {
             doc.emptyPresentation = Docs.Create.PresDocument(new List<Doc>(),
-                { title: "Presentation", _viewType: CollectionViewType.Stacking, targetDropAction: "alias", _LODdisable: true, _chromeStatus: "replaced", _showTitle: "title", boxShadow: "0 0" });
+                { title: "Presentation", _viewType: CollectionViewType.Stacking, targetDropAction: "alias", _chromeStatus: "replaced", _showTitle: "title", boxShadow: "0 0" });
         }
         if (doc.emptyCollection === undefined) {
             doc.emptyCollection = Docs.Create.FreeformDocument([],
-                { _nativeWidth: undefined, _nativeHeight: undefined, _LODdisable: true, _width: 150, _height: 100, title: "freeform" });
+                { _nativeWidth: undefined, _nativeHeight: undefined, _width: 150, _height: 100, title: "freeform" });
+        }
+        if (doc.emptyComparison === undefined) {
+            doc.emptyComparison = Docs.Create.ComparisonDocument({ title: "compare", _width: 300, _height: 300 });
+        }
+        if (doc.emptyScript === undefined) {
+            doc.emptyScript = Docs.Create.ScriptingDocument(undefined, { _width: 200, _height: 250, title: "script" });
         }
         if (doc.emptyDocHolder === undefined) {
             doc.emptyDocHolder = Docs.Create.DocumentDocument(
@@ -374,10 +396,13 @@ export class CurrentUserUtils {
                 { _width: 250, _height: 250, title: "container" });
         }
         if (doc.emptyWebpage === undefined) {
-            doc.emptyWebpage = Docs.Create.WebDocument("", { title: "New Webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
+            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", ignoreClick: true, drag: 'Docs.Create.ComparisonDocument()' },
+            { 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" })' },
@@ -387,9 +412,9 @@ export class CurrentUserUtils {
             { 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.QueryDocument({ _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 a scripting box", label: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
             { 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 a mobile view", label: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
             { title: "Drag an instance of the device collection", label: "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 },
@@ -434,7 +459,7 @@ export class CurrentUserUtils {
         if (dragCreatorSet === undefined) {
             doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, {
                 title: "Basic Item Creators", _showTitle: "title", _xMargin: 0,
-                _autoHeight: true, _width: 500, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+                _autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
                 dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
             }));
         } else {
@@ -443,25 +468,72 @@ 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) {
+            console.log("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: 37, _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: 25, _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 },
@@ -495,31 +567,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);
@@ -605,6 +658,7 @@ export class CurrentUserUtils {
         if (doc["tabs-button-library"] === undefined) {
             const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], {
                 title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+                treeViewTruncateTitleWidth: 150,
                 lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
             })) as any as Doc;
             doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({
@@ -622,7 +676,7 @@ export class CurrentUserUtils {
         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({
@@ -657,8 +711,8 @@ export class CurrentUserUtils {
 
         // Finally, setup the list of buttons to display in the sidebar
         if (doc["tabs-buttons"] === undefined) {
-            doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([searchBtn, libraryBtn, toolsBtn], {
-                _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", hideHeadings: true, ignoreClick: true, _chromeStatus: "view-mode",
+            doc["tabs-buttons"] = 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",
             }));
             (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn });
@@ -707,17 +761,19 @@ export class CurrentUserUtils {
         if (doc.activePresentation === undefined) {
             doc.activePresentation = Docs.Create.PresDocument(new List<Doc>(), {
                 title: "Presentation", _viewType: CollectionViewType.Stacking, targetDropAction: "alias",
-                _LODdisable: true, _chromeStatus: "replaced", _showTitle: "title", boxShadow: "0 0"
+                _chromeStatus: "replaced", _showTitle: "title", boxShadow: "0 0"
             });
         }
     }
 
+    // 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) {
             const openInTarget = Docs.Create.ScriptingDocument(ScriptField.MakeScript(
@@ -762,20 +818,26 @@ export class CurrentUserUtils {
         doc.activeInkPen = doc;
         doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)");
         doc.activeInkWidth = StrCast(doc.activeInkWidth, "1");
-        doc.activeInkBezier = StrCast(doc.activeInkBezier, "");
+        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.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["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
         doc.globalLinkDatabase = Docs.Prototypes.MainLinkDocument();
         doc.globalScriptDatabase = Docs.Prototypes.MainScriptDocument();
+        doc.globalGroupDatabase = Docs.Prototypes.MainGroupDocument();
 
         // setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet
         doc["dockedBtn-undo"] && reaction(() => UndoManager.undoStack.slice(), () => Doc.GetProto(doc["dockedBtn-undo"] as Doc).opacity = UndoManager.CanUndo() ? 1 : 0.4, { fireImmediately: true });
@@ -808,9 +870,5 @@ 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");
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 78c05f572..1fa5faeb3 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -130,7 +130,7 @@ export class DocumentManager {
         willZoom: boolean,     // whether to zoom doc to take up most of screen
         createViewFunc = DocumentManager.addRightSplit, // how to create a view of the doc if it doesn't exist
         docContext?: Doc,  // context to load that should contain the target
-        linkId?: string,   // link that's being followed
+        linkDoc?: Doc,   // link that's being followed
         closeContextIfNotFound: boolean = false, // after opening a context where the document should be, this determines whether the context should be closed if the Doc isn't actually there
         originatingDoc: Opt<Doc> = undefined, // doc that initiated the display of the target odoc
         finished?: () => void
@@ -140,13 +140,13 @@ export class DocumentManager {
         const highlight = () => {
             const finalDocView = getFirstDocView(targetDoc);
             if (finalDocView) {
-                finalDocView.layoutDoc.scrollToLinkID = linkId;
+                finalDocView.layoutDoc.scrollToLinkID = linkDoc?.[Id];
                 Doc.linkFollowHighlight(finalDocView.props.Document);
             }
         };
         const docView = getFirstDocView(targetDoc, originatingDoc);
         let annotatedDoc = await Cast(targetDoc.annotationOn, Doc);
-        if (annotatedDoc) {
+        if (annotatedDoc && !linkDoc?.isPushpin) {
             const first = getFirstDocView(annotatedDoc);
             if (first) {
                 annotatedDoc = first.props.Document;
@@ -156,7 +156,11 @@ export class DocumentManager {
             }
         }
         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?
-            docView.props.focus(docView.props.Document, willZoom, undefined, focusAndFinish);
+            if (linkDoc?.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();
         } else {
             const contextDocs = docContext ? await DocListCastAsync(docContext.data) : undefined;
@@ -170,7 +174,7 @@ export class DocumentManager {
                 const targetDocContextView = getFirstDocView(targetDocContext);
                 targetDocContext._scrollY = 0;  // this will force PDFs to activate and load their annotations / allow scrolling
                 if (targetDocContextView) { // we found a context view and aren't forced to create a new one ... focus on the context first..
-                    targetDocContext.panTransformType = "Ease";
+                    targetDocContext._viewTransition = "transform 500ms";
                     targetDocContextView.props.focus(targetDocContextView.props.Document, willZoom);
 
                     // now find the target document within the context
@@ -195,7 +199,7 @@ export class DocumentManager {
                         const finalDocView = getFirstDocView(targetDoc);
                         const finalDocContextView = getFirstDocView(targetDocContext);
                         setTimeout(() =>  // if not, wait a bit to see if the context can be loaded (e.g., a PDF). wait interval heurisitic tries to guess how we're animating based on what's just become visible
-                            this.jumpToDocument(targetDoc, willZoom, createViewFunc, undefined, linkId, true, undefined, finished), // pass true this time for closeContextIfNotFound
+                            this.jumpToDocument(targetDoc, willZoom, createViewFunc, undefined, linkDoc, true, undefined, finished), // pass true this time for closeContextIfNotFound
                             finalDocView ? 0 : finalDocContextView ? 250 : 2000); // so call jump to doc again and if the doc isn't found, it will be created.
                     }, 0);
                 }
@@ -224,7 +228,7 @@ export class DocumentManager {
                 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[Id], undefined, doc, finished);
+                DocumentManager.Instance.jumpToDocument(target, zoom, (doc, finished) => createViewFunc(doc, StrCast(linkDoc.followLinkLocation, "onRight"), finished), targetNavContext, linkDoc, undefined, doc, finished);
             } else {
                 finished?.();
             }
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 417ddf989..2ceafff30 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -19,8 +19,6 @@ export function SetupDrag(
     docFunc: () => Doc | Promise<Doc> | undefined,
     moveFunc?: DragManager.MoveFunction,
     dropAction?: dropActionType,
-    treeViewId?: string,
-    dontHideOnDrop?: boolean,
     dragStarted?: () => void
 ) {
     const onRowMove = async (e: PointerEvent) => {
@@ -34,8 +32,6 @@ export function SetupDrag(
             const dragData = new DragManager.DocumentDragData([doc]);
             dragData.dropAction = dropAction;
             dragData.moveDocument = moveFunc;
-            dragData.treeViewId = treeViewId;
-            dragData.dontHideOnDrop = dontHideOnDrop;
             DragManager.StartDocumentDrag([_reference.current!], dragData, e.x, e.y);
             dragStarted?.();
         }
@@ -128,7 +124,7 @@ export namespace DragManager {
         draggedDocuments: Doc[];
         droppedDocuments: Doc[];
         dragDivName?: string;
-        treeViewId?: string;
+        treeViewDoc?: Doc;
         dontHideOnDrop?: boolean;
         offset: number[];
         dropAction: dropActionType;
@@ -206,7 +202,6 @@ export namespace DragManager {
             dropDoc instanceof Doc && DocUtils.MakeLinkToActiveAudio(dropDoc);
             return dropDoc;
         };
-        const batch = UndoManager.StartBatch("dragging");
         const finishDrag = (e: DragCompleteEvent) => {
             const docDragData = e.docDragData;
             if (docDragData && !docDragData.droppedDocuments.length) {
@@ -220,7 +215,6 @@ export namespace DragManager {
                     const remProps = (dragData?.removeDropProperties || []).concat(Array.from(dragProps));
                     remProps.map(prop => drop[prop] = undefined);
                 });
-                batch.end();
             }
             return e;
         };
@@ -319,6 +313,7 @@ export namespace DragManager {
     export let docsBeingDragged: Doc[] = [];
     export let CanEmbed = false;
     export function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) {
+        const batch = UndoManager.StartBatch("dragging");
         eles = eles.filter(e => e);
         CanEmbed = false;
         if (!dragDiv) {
@@ -453,6 +448,7 @@ export namespace DragManager {
             document.removeEventListener("pointermove", moveHandler, true);
             document.removeEventListener("pointerup", upHandler);
             SnappingManager.clearSnapLines();
+            batch.end();
         });
 
         AbortDrag = () => {
diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
new file mode 100644
index 000000000..544a79e98
--- /dev/null
+++ b/src/client/util/GroupManager.scss
@@ -0,0 +1,136 @@
+@import "../views/globalCssVariables";
+
+.group-interface {
+    background-color: whitesmoke !important;
+    color: grey;
+    width: 450px;
+    height: 300px;
+
+    .dialogue-box {
+        width: 450;
+        height: 300;
+    }
+
+    button {
+        background: $lighter-alt-accent;
+        outline: none;
+        border-radius: 5px;
+        border: 0px;
+        color: #fcfbf7;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 75%;
+        padding: 10px;
+        margin: 10px;
+        transition: transform 0.2s;
+        margin: 2px;
+    }
+}
+
+.group-interface {
+    display: flex;
+    flex-direction: column;
+
+    .overlay {
+        transform: translate(-20px, -20px);
+        border-radius: 10px;
+    }
+
+    button {
+        width: 100%;
+        align-self: center;
+        background: $darker-alt-accent;
+    }
+
+    .delete-button {
+        background: rgb(227, 86, 86);
+    }
+
+    .close-button {
+        position: absolute;
+        right: 1em;
+        top: 1em;
+        cursor: pointer;
+        z-index: 999;
+    }
+
+    .group-heading {
+        letter-spacing: .5em;
+    }
+
+
+    .group-body {
+        display: flex;
+        justify-content: space-between;
+        max-height: 80%;
+
+        .group-create {
+            display: flex;
+            flex-direction: column;
+            flex-basis: 30%;
+            margin-left: 5px;
+
+            input {
+                border-radius: 5px;
+                border: none;
+                padding: 4px;
+                min-width: 100%;
+                margin: 4px 0 4px 0;
+            }
+
+        }
+
+        .group-content {
+            padding-left: 1em;
+            padding-right: 1em;
+            justify-content: space-around;
+            text-align: left;
+
+            overflow-y: auto;
+            width: 100%;
+
+            .group-row {
+                display: flex;
+                position: relative;
+                margin-bottom: 5px;
+                min-height: 40px;
+                border: 1px solid;
+                border-radius: 10px;
+                align-items: center;
+
+                .group-name {
+                    position: relative;
+                    max-width: 65%;
+                    left: 10;
+                }
+
+                button {
+                    position: absolute;
+                    width: 30%;
+                    right: 2;
+                    margin-top: 0;
+                }
+            }
+
+            ::placeholder {
+                color: $intermediate-color;
+            }
+
+            input {
+                border-radius: 5px;
+                border: none;
+                padding: 4px;
+                min-width: 100%;
+                margin: 2px 0;
+            }
+
+        }
+    }
+
+    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
new file mode 100644
index 000000000..7c68fc2a0
--- /dev/null
+++ b/src/client/util/GroupManager.tsx
@@ -0,0 +1,360 @@
+import * as React from "react";
+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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as fa from '@fortawesome/free-solid-svg-icons';
+import { library } from "@fortawesome/fontawesome-svg-core";
+import SharingManager, { User } from "./SharingManager";
+import { Utils } from "../../Utils";
+import * as RequestPromise from "request-promise";
+import Select from 'react-select';
+import "./GroupManager.scss";
+import { StrCast } from "../../fields/Types";
+import GroupMemberView from "./GroupMemberView";
+
+library.add(fa.faWindowClose);
+
+export interface UserOptions {
+    label: string;
+    value: string;
+}
+
+@observer
+export default class GroupManager extends React.Component<{}> {
+
+    static Instance: GroupManager;
+    @observable isOpen: boolean = false; // whether the GroupManager is to be displayed or not.
+    @observable private dialogueBoxOpacity: number = 1; // opacity of the dialogue box div of the MainViewModal.
+    @observable private overlayOpacity: number = 0.4; // opacity of the overlay div of the MainViewModal.
+    @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.
+    private inputRef: React.RefObject<HTMLInputElement> = React.createRef(); // the ref for the input box.
+
+    constructor(props: Readonly<{}>) {
+        super(props);
+        GroupManager.Instance = this;
+    }
+
+    // sets up the list of users
+    componentDidMount() {
+        this.populateUsers().then(resolved => runInAction(() => this.users = resolved));
+    }
+
+    /**
+     * Fetches the list of users stored on the database and @returns a list of the emails.
+     */
+    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);
+    }
+
+    /**
+     * @returns the options to be rendered in the dropdown menu to add users and create a group.
+     */
+    @computed get options() {
+        return this.users.map(user => ({ label: user, value: user }));
+    }
+
+    /**
+     * Makes the GroupManager visible.
+     */
+    @action
+    open = () => {
+        SelectionManager.DeselectAll();
+        this.isOpen = true;
+    }
+
+    /**
+     * Hides the GroupManager.
+    */
+    @action
+    close = () => {
+        this.isOpen = false;
+        this.currentGroup = undefined;
+    }
+
+    /**
+     * @returns the database of groups.
+     */
+    get GroupManagerDoc(): Doc | undefined {
+        return Doc.UserDoc().globalGroupDatabase as Doc;
+    }
+
+    /**
+     * @returns a list of all group documents.
+     */
+    private getAllGroups(): Doc[] {
+        const groupDoc = this.GroupManagerDoc;
+        return groupDoc ? DocListCast(groupDoc.data) : [];
+    }
+
+    /**
+     * @returns a group document based on the group name.
+     * @param groupName 
+     */
+    private getGroup(groupName: string): Doc | undefined {
+        const groupDoc = this.getAllGroups().find(group => group.groupName === groupName);
+        return groupDoc;
+    }
+
+    /**
+     * @returns a readonly copy of a single group document
+     */
+    getGroupCopy(groupName: string): Doc | undefined {
+        const groupDoc = this.getGroup(groupName);
+        if (groupDoc) {
+            const { members, owners } = groupDoc;
+            return Doc.assign(new Doc, { groupName, members: StrCast(members), owners: StrCast(owners) });
+        }
+        return undefined;
+    }
+    /**
+     * @returns a readonly copy of the list of group documents
+     */
+    getAllGroupsCopy(): Doc[] {
+        return this.getAllGroups().map(({ groupName, owners, members }) =>
+            Doc.assign(new Doc, { groupName: (StrCast(groupName)), owners: (StrCast(owners)), members: (StrCast(members)) })
+        );
+    }
+
+    /**
+     * @returns the members of the admin group.
+     */
+    get adminGroupMembers(): string[] {
+        return this.getGroup("admin") ? JSON.parse(StrCast(this.getGroup("admin")!.members)) : "";
+    }
+
+    /**
+     * @returns a boolean indicating whether the current user has access to edit group documents.
+     * @param groupDoc 
+     */
+    hasEditAccess(groupDoc: Doc): boolean {
+        if (!groupDoc) return false;
+        const accessList: string[] = JSON.parse(StrCast(groupDoc.owners));
+        return accessList.includes(Doc.CurrentUserEmail) || this.adminGroupMembers?.includes(Doc.CurrentUserEmail);
+    }
+
+    /**
+     * Helper method that sets up the group document.
+     * @param groupName 
+     * @param memberEmails 
+     */
+    createGroupDoc(groupName: string, memberEmails: string[] = []) {
+        const groupDoc = new Doc;
+        groupDoc.groupName = groupName;
+        groupDoc.owners = JSON.stringify([Doc.CurrentUserEmail]);
+        groupDoc.members = JSON.stringify(memberEmails);
+        this.addGroup(groupDoc);
+    }
+
+    /**
+     * Helper method that adds a group document to the database of group documents and @returns whether it was successfully added or not.
+     * @param groupDoc 
+     */
+    addGroup(groupDoc: Doc): boolean {
+        if (this.GroupManagerDoc) {
+            Doc.AddDocToList(this.GroupManagerDoc, "data", groupDoc);
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Deletes a group from the database of group documents and @returns whether the group was deleted or not.
+     * @param group 
+     */
+    deleteGroup(group: Doc): boolean {
+        if (group) {
+            if (this.GroupManagerDoc && this.hasEditAccess(group)) {
+                Doc.RemoveDocFromList(this.GroupManagerDoc, "data", group);
+                SharingManager.Instance.setInternalGroupSharing(group, "Not Shared");
+                if (group === this.currentGroup) {
+                    runInAction(() => this.currentGroup = undefined);
+                }
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Adds a member to a group.
+     * @param groupDoc 
+     * @param email 
+     */
+    addMemberToGroup(groupDoc: Doc, email: string) {
+        if (this.hasEditAccess(groupDoc)) {
+            const memberList: string[] = JSON.parse(StrCast(groupDoc.members));
+            !memberList.includes(email) && memberList.push(email);
+            groupDoc.members = JSON.stringify(memberList);
+        }
+    }
+
+    /**
+     * Removes a member from the group.
+     * @param groupDoc 
+     * @param email 
+     */
+    removeMemberFromGroup(groupDoc: Doc, email: string) {
+        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);
+        }
+    }
+
+    /**
+     * Handles changes in the users selected in the "Select users" dropdown.
+     * @param selectedOptions 
+     */
+    @action
+    handleChange = (selectedOptions: any) => {
+        this.selectedUsers = selectedOptions as UserOptions[];
+    }
+
+    /**
+     * Creates the group when the enter key has been pressed (when in the input).
+     * @param e 
+     */
+    handleKeyDown = (e: React.KeyboardEvent) => {
+        e.key === "Enter" && this.createGroup();
+    }
+
+    /**
+     * Handles the input of required fields in the setup of a group and resets the relevant variables.
+     */
+    @action
+    createGroup = () => {
+        if (!this.inputRef.current?.value) {
+            alert("Please enter a group name");
+            return;
+        }
+        if (this.getAllGroups().find(group => group.groupName === this.inputRef.current!.value)) { // why do I need a null check here?
+            alert("Please select a unique group name");
+            return;
+        }
+        this.createGroupDoc(this.inputRef.current.value, this.selectedUsers?.map(user => user.value));
+        this.selectedUsers = null;
+        this.inputRef.current.value = "";
+    }
+
+    /**
+     * 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"} />
+                    </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>
+            </div>
+        );
+
+    }
+
+    /**
+     * A getter that @returns the main interface for the GroupManager.
+     */
+    private get groupInterface() {
+        return (
+            <div className="group-interface">
+                {/* <MainViewModal
+                    contents={this.editingInterface}
+                    isDisplayed={this.currentGroup ? true : false}
+                    interactive={true}
+                    dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+                    overlayDisplayedOpacity={this.overlayOpacity}
+                /> */}
+                {this.currentGroup ?
+                    <GroupMemberView
+                        group={this.currentGroup}
+                        onCloseButtonClick={() => this.currentGroup = undefined}
+                    />
+                    : null}
+                <div className="group-heading">
+                    <h1>Groups</h1>
+                    <div className={"close-button"} onClick={this.close}>
+                        <FontAwesomeIcon icon={fa.faWindowClose} 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>
+                    <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>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <MainViewModal
+                contents={this.groupInterface}
+                isDisplayed={this.isOpen}
+                interactive={true}
+                dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+                overlayDisplayedOpacity={this.overlayOpacity}
+            />
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
new file mode 100644
index 000000000..7833c485f
--- /dev/null
+++ b/src/client/util/GroupMemberView.scss
@@ -0,0 +1,68 @@
+@import "../views/globalCssVariables";
+
+.editing-interface {
+    background-color: whitesmoke !important;
+    color: grey;
+    width: 100%;
+    height: 100%;
+
+    button {
+        background: $darker-alt-accent;
+        outline: none;
+        border-radius: 5px;
+        border: 0px;
+        color: #fcfbf7;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 75%;
+        padding: 10px;
+        margin: 10px;
+        transition: transform 0.2s;
+        margin: 2px;
+    }
+
+    .memberView-closeButton {
+        position: absolute;
+        right: 1em;
+        top: 1em;
+        cursor: pointer;
+        z-index: 1000;
+    }
+
+    .editing-header {
+        margin-bottom: 5;
+
+        .group-buttons {
+            display: flex;
+            margin-top: 5;
+
+            .add-member-dropdown {
+                width: 100%;
+                margin: 0 5;
+            }
+        }
+    }
+
+    .editing-contents {
+        overflow-y: auto;
+        // max-height: 67%;
+        height: 67%;
+        width: 100%;
+
+        .editing-row {
+            display: flex;
+            align-items: center;
+            // border: 1px solid;
+            // border-radius: 10px;
+
+            .user-email {
+                // position: relative;
+                min-width: 65%;
+                word-break: break-all;
+                padding: 0 5;
+            }
+        }
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
new file mode 100644
index 000000000..b2d75158e
--- /dev/null
+++ b/src/client/util/GroupMemberView.tsx
@@ -0,0 +1,75 @@
+import * as React from "react";
+import MainViewModal from "../views/MainViewModal";
+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 { 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 "./GroupMemberView.scss";
+
+library.add(fa.faWindowClose);
+
+interface GroupMemberViewProps {
+    group: Doc;
+    onCloseButtonClick: () => void;
+}
+
+@observer
+export default class GroupMemberView extends React.Component<GroupMemberViewProps> {
+
+    private get editingInterface() {
+        const members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.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>
+                    <div className={"memberView-closeButton"} onClick={action(this.props.onCloseButtonClick)}>
+                        <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+                    </div>
+
+                    {GroupManager.Instance.hasEditAccess(this.props.group) ?
+                        <div className="group-buttons">
+                            <div className="add-member-dropdown">
+                                <Select
+                                    isSearchable={true}
+                                    options={options}
+                                    onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)}
+                                    placeholder={"Add members"}
+                                    value={null}
+                                    closeMenuOnSelect={true}
+                                />
+                            </div>
+                            <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
+                        </div> :
+                        null}
+                </div>
+                <div className="editing-contents">
+                    {members.map(member => (
+                        <div className="editing-row">
+                            <div className="user-email">
+                                {member}
+                            </div>
+                            {GroupManager.Instance.hasEditAccess(this.props.group) ? <button onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}> Remove </button> : null}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+
+    }
+
+    render() {
+        return <MainViewModal
+            isDisplayed={true}
+            interactive={true}
+            contents={this.editingInterface}
+        />;
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx
index af6c57e68..77f13e9f4 100644
--- a/src/client/util/Import & Export/DirectoryImportBox.tsx
+++ b/src/client/util/Import & Export/DirectoryImportBox.tsx
@@ -161,7 +161,7 @@ export class DirectoryImportBox extends React.Component<FieldViewProps> {
                 importContainer = Docs.Create.SchemaDocument(headers, docs, options);
             }
             runInAction(() => this.phase = 'External: uploading files to Google Photos...');
-            importContainer.singleColumn = false;
+            importContainer._columnsStack = false;
             await GooglePhotos.Export.CollectionToAlbum({ collection: importContainer });
             Doc.AddDocToList(Doc.GetProto(parent.props.Document), "data", importContainer);
             !this.persistent && this.props.removeDocument && this.props.removeDocument(doc);
diff --git a/src/client/util/InteractionUtils.scss b/src/client/util/InteractionUtils.scss
new file mode 100644
index 000000000..6707157d4
--- /dev/null
+++ b/src/client/util/InteractionUtils.scss
@@ -0,0 +1,4 @@
+.halo {
+    opacity: 0.2;
+    stroke: black;
+}
\ No newline at end of file
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
index df792c9c0..02b444cd3 100644
--- a/src/client/util/InteractionUtils.tsx
+++ b/src/client/util/InteractionUtils.tsx
@@ -1,6 +1,8 @@
 import React = require("react");
 import * as beziercurve from 'bezier-curve';
 import * as fitCurve from 'fit-curve';
+import "./InteractionUtils.scss";
+import { Utils } from "../../Utils";
 
 export namespace InteractionUtils {
     export const MOUSETYPE = "mouse";
@@ -25,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)
      */
@@ -89,15 +91,17 @@ export namespace InteractionUtils {
         return myTouches;
     }
 
-    export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: number, strokeWidth: number, bezier: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean) {
+    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 > 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)
-            points.pop();
             const newPoints = points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]);
+            newPoints.pop();
 
             const bezierCurves = fitCurve(newPoints, parseInt(bezier));
             for (const curve of bezierCurves) {
@@ -111,25 +115,55 @@ export namespace InteractionUtils {
         }
         const strpts = pts.reduce((acc: string, pt: { X: number, Y: number }) => acc +
             `${(pt.X - left - width / 2) * scalex + width / 2},
-             ${(pt.Y - top - width / 2) * scaley + width / 2} `, "");
+         ${(pt.Y - top - width / 2) * scaley + width / 2} `, "");
+        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 */}
+            {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">
+                    <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">
+                    <polygon points={`${2 - arrowDim} ${-Math.max(1, arrowDim / 2)}, ${2 - arrowDim} ${Math.max(1, arrowDim / 2)}, 3 0`} />
+                </marker>}
+            </defs>}
 
-        return (
             <polyline
                 points={strpts}
                 style={{
-                    filter: drawHalo ? "url(#dangerShine)" : undefined,
-                    fill: "none",
+                    filter: drawHalo ? "url(#inkSelectionHalo)" : undefined,
+                    fill,
                     opacity: strokeWidth !== width ? 0.5 : undefined,
                     pointerEvents: pevents as any,
                     stroke: color ?? "rgb(0, 0, 0)",
                     strokeWidth: strokeWidth,
                     strokeLinejoin: "round",
-                    strokeLinecap: "round"
+                    strokeLinecap: "round",
+                    strokeDasharray: dashArray
                 }}
+                markerStart={`url(#${arrowStart + defGuid})`}
+                markerEnd={`url(#${arrowEnd + 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)
@@ -199,24 +233,24 @@ export namespace InteractionUtils {
                 }
                 points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top });
                 return points;
-            case "arrow":
-                const x1 = left;
-                const y1 = top;
-                const x2 = right;
-                const y2 = bottom;
-                const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2)));
-                const L2 = L1 / 5;
-                const angle = 0.785398;
-                const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle));
-                const y3 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) - (x1 - x2) * Math.sin(angle));
-                const x4 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle));
-                const y4 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) + (x1 - x2) * Math.sin(angle));
-                points.push({ X: x1, Y: y1 });
-                points.push({ X: x2, Y: y2 });
-                points.push({ X: x3, Y: y3 });
-                points.push({ X: x4, Y: y4 });
-                points.push({ X: x2, Y: y2 });
-                return points;
+            // case "arrow":
+            //     const x1 = left;
+            //     const y1 = top;
+            //     const x2 = right;
+            //     const y2 = bottom;
+            //     const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2)));
+            //     const L2 = L1 / 5;
+            //     const angle = 0.785398;
+            //     const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle));
+            //     const y3 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) - (x1 - x2) * Math.sin(angle));
+            //     const x4 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle));
+            //     const y4 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) + (x1 - x2) * Math.sin(angle));
+            //     points.push({ X: x1, Y: y1 });
+            //     points.push({ X: x2, Y: y2 });
+            //     points.push({ X: x3, Y: y3 });
+            //     points.push({ X: x4, Y: y4 });
+            //     points.push({ X: x2, Y: y2 });
+            //     return points;
             case "line":
                 points.push({ X: left, Y: top });
                 points.push({ X: right, Y: bottom });
@@ -244,8 +278,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));
@@ -376,4 +410,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 47b2541bd..749fabfcc 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -41,24 +41,17 @@ export class LinkManager {
     }
 
     public addLink(linkDoc: Doc): boolean {
-        const linkList = LinkManager.Instance.getAllLinks();
-        linkList.push(linkDoc);
         if (LinkManager.Instance.LinkManagerDoc) {
-            LinkManager.Instance.LinkManagerDoc.data = new List<Doc>(linkList);
+            Doc.AddDocToList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc);
             return true;
         }
         return false;
     }
 
     public deleteLink(linkDoc: Doc): boolean {
-        const linkList = LinkManager.Instance.getAllLinks();
-        const index = LinkManager.Instance.getAllLinks().indexOf(linkDoc);
-        if (index > -1) {
-            linkList.splice(index, 1);
-            if (LinkManager.Instance.LinkManagerDoc) {
-                LinkManager.Instance.LinkManagerDoc.data = new List<Doc>(linkList);
-                return true;
-            }
+        if (LinkManager.Instance.LinkManagerDoc && linkDoc instanceof Doc) {
+            Doc.RemoveDocFromList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc);
+            return true;
         }
         return false;
     }
@@ -70,6 +63,9 @@ export class LinkManager {
             const protomatch2 = Doc.AreProtosEqual(anchor, Cast(link.anchor2, Doc, null));
             return protomatch1 || protomatch2 || Doc.AreProtosEqual(link, anchor);
         });
+        DocListCast(anchor[Doc.LayoutFieldKey(anchor) + "-annotations"]).map(anno => {
+            related.push(...LinkManager.Instance.getAllRelatedLinks(anno));
+        });
         return related;
     }
 
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 5679c0a14..1ac68480e 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -74,7 +74,7 @@ export namespace SearchUtil {
         const docs = ids.map((id: string) => docMap[id]).map(doc => doc as Doc);
         for (let i = 0; i < ids.length; i++) {
             const testDoc = docs[i];
-            if (testDoc instanceof Doc && testDoc.type !== DocumentType.KVP && (options.allowAliases || theDocs.findIndex(d => Doc.AreProtosEqual(d, testDoc)) === -1)) {
+            if (testDoc instanceof Doc && testDoc.type !== DocumentType.KVP && (options.allowAliases || testDoc.proto === undefined || theDocs.findIndex(d => Doc.AreProtosEqual(d, testDoc)) === -1)) {
                 theDocs.push(testDoc);
                 theLines.push([]);
             }
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index eb905d237..024532f90 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -3,6 +3,8 @@ import { Doc } from "../../fields/Doc";
 import { DocumentView } from "../views/nodes/DocumentView";
 import { computedFn } from "mobx-utils";
 import { List } from "../../fields/List";
+import { Scripting } from "./Scripting";
+import { DocumentManager } from "./DocumentManager";
 
 export namespace SelectionManager {
 
@@ -10,17 +12,12 @@ export namespace SelectionManager {
 
         @observable IsDragging: boolean = false;
         SelectedDocuments: ObservableMap<DocumentView, boolean> = new ObservableMap();
-        clearSelection() {
-            if (window.getSelection) { window.getSelection()?.removeAllRanges(); }
-            else if (document.getSelection()) { document.getSelection()?.empty(); }
-        }
         @action
         SelectDoc(docView: DocumentView, ctrlPressed: boolean): void {
             // if doc is not in SelectedDocuments, add it
             if (!manager.SelectedDocuments.get(docView)) {
                 if (!ctrlPressed) {
                     this.DeselectAll();
-                    this.clearSelection();
                 }
 
                 manager.SelectedDocuments.set(docView, true);
@@ -86,3 +83,9 @@ export namespace SelectionManager {
     }
 }
 
+
+Scripting.addGlobal(function selectDoc(doc: any) {
+    const view = DocumentManager.Instance.getDocumentView(doc);
+    view && SelectionManager.SelectDoc(view, false);
+    //Doc.UserDoc().activeSelection = new List([doc]); 
+});
\ No newline at end of file
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 6513cb223..13c65042c 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -41,6 +41,7 @@
         position: absolute;
         right: 1em;
         top: 1em;
+        cursor: pointer;
     }
 
     .settings-heading {
@@ -133,4 +134,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/SharingManager.scss b/src/client/util/SharingManager.scss
index dec9f751a..fcbc05f8a 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -1,13 +1,75 @@
+@import "../views/globalCssVariables";
+
 .sharing-interface {
     display: flex;
     flex-direction: column;
+    width: 730px;
+
+    .dialogue-box {
+        width: 450;
+        height: 300;
+    }
+
+    .overlay {
+        transform: translate(-20px, -20px);
+    }
+
+    .sharing-contents {
+        display: flex;
+
+        button {
+            background: $darker-alt-accent;
+            outline: none;
+            border-radius: 5px;
+            border: 0px;
+            color: #fcfbf7;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            font-size: 75%;
+            padding: 0 10;
+            margin: 0 5;
+            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 {
         text-decoration: underline;
     }
 
     p {
-        font-size: 20px;
+        font-size: 15px;
         text-align: left;
         font-style: italic;
         padding: 0;
@@ -36,33 +98,10 @@
         }
     }
 
-    .share-individual {
-        margin-top: 20px;
-        margin-bottom: 20px;
-    }
-
-    .users-list {
-        font-style: italic;
-        background: white;
-        border: 1px solid black;
-        padding-left: 10px;
-        padding-right: 10px;
-        max-height: 200px;
-        overflow: scroll;
-        height: -webkit-fill-available;
-        text-align: left;
-        display: flex;
-        align-content: center;
-        align-items: center;
-        text-align: center;
-        justify-content: center;
-        color: red;
-    }
-
     .container {
-        display: block;
+        display: flex;
         position: relative;
-        margin-top: 10px;
+        margin-top: 5px;
         margin-bottom: 10px;
         font-size: 22px;
         -webkit-user-select: none;
@@ -74,18 +113,27 @@
         max-width: 700px;
         text-align: left;
         font-style: normal;
-        font-size: 15;
+        font-size: 14;
         font-weight: normal;
         padding: 0;
+        align-items: baseline;
 
         .padding {
-            padding: 0 0 0 20px;
+            padding: 0 10px 0 0;
             color: black;
         }
 
         .permissions-dropdown {
             outline: none;
+            height: 25;
         }
+
+        .edit-actions {
+            display: flex;
+            position: absolute;
+            right: 51.5%;
+        }
+
     }
 
     .no-users {
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index dc67145fc..127ee33ce 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -17,6 +17,8 @@ import { SelectionManager } from "./SelectionManager";
 import { DocumentManager } from "./DocumentManager";
 import { CollectionView } from "../views/collections/CollectionView";
 import { DictationOverlay } from "../views/DictationOverlay";
+import GroupManager from "./GroupManager";
+import GroupMemberView from "./GroupMemberView";
 
 library.add(fa.faCopy);
 
@@ -28,17 +30,30 @@ export interface User {
 export enum SharingPermissions {
     None = "Not Shared",
     View = "Can View",
-    Comment = "Can Comment",
+    Add = "Can Add",
     Edit = "Can Edit"
 }
 
 const ColorMapping = new Map<string, string>([
     [SharingPermissions.None, "red"],
     [SharingPermissions.View, "maroon"],
-    [SharingPermissions.Comment, "blue"],
+    [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";
@@ -55,11 +70,13 @@ 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 dialogueBoxOpacity = 1;
     @observable private overlayOpacity = 0.4;
+    @observable private groupToView: Opt<Doc>;
 
     private get linkVisible() {
         return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false;
@@ -76,6 +93,8 @@ export default class SharingManager extends React.Component<{}> {
                 this.sharingDoc = new Doc;
             }
         }));
+
+        runInAction(() => this.groups = GroupManager.Instance.getAllGroupsCopy());
     }
 
     public close = action(() => {
@@ -121,26 +140,71 @@ export default class SharingManager extends React.Component<{}> {
         return Promise.all(evaluating);
     }
 
-    setInternalSharing = async (recipient: ValidatedUser, state: string) => {
+    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 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;
+        }
+
+        users.forEach(user => {
+            this.setInternalSharing(user, permission, group);
+        });
+    }
+
+    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;
-        if (state === SharingPermissions.None) {
-            const metadata = (await DocCastAsync(manager[key]));
-            if (metadata) {
-                const sharedAlias = (await DocCastAsync(metadata.sharedAlias))!;
-                Doc.RemoveDocFromList(notificationDoc, storage, sharedAlias);
-                manager[key] = undefined;
-            }
-        } else {
-            const sharedAlias = Doc.MakeAlias(target);
-            Doc.AddDocToList(notificationDoc, storage, sharedAlias);
-            const metadata = new Doc;
-            metadata.permissions = state;
-            metadata.sharedAlias = sharedAlias;
-            manager[key] = metadata;
+
+        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;
         }
+
+        if (metadata) metadata.maxPermission = HierarchyMapping.get(`${max}`);
     }
 
     private setExternalSharing = (state: string) => {
@@ -211,17 +275,27 @@ export default class SharingManager extends React.Component<{}> {
         if (!sharingDoc) {
             return SharingPermissions.None;
         }
-        const metadata = sharingDoc[userKey] as Doc;
+        const metadata = sharingDoc[userKey] as Doc | string;
         if (!metadata) {
             return SharingPermissions.None;
         }
-        return StrCast(metadata.permissions, SharingPermissions.None);
+        return StrCast(metadata instanceof Doc ? metadata.maxPermission : metadata, SharingPermissions.None);
     }
 
     private get sharingInterface() {
         const existOtherUsers = this.users.length > 0;
+        const existGroups = this.groups.length > 0;
+
+        // const manager = this.sharingDoc!;
+
         return (
             <div className={"sharing-interface"}>
+                {this.groupToView ?
+                    <GroupMemberView
+                        group={this.groupToView}
+                        onCloseButtonClick={action(() => this.groupToView = undefined)}
+                    /> :
+                    null}
                 <p className={"share-link"}>Manage the public link to {this.focusOn("this document...")}</p>
                 {!this.linkVisible ? (null) :
                     <div className={"link-container"}>
@@ -252,31 +326,77 @@ export default class SharingManager extends React.Component<{}> {
                     </select>
                 </div>
                 <div className={"hr-substitute"} />
-                <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 : 200 }}>
-                    {!existOtherUsers ? "There are no other users in your database." :
-                        this.users.map(({ user, notificationDoc }) => {
-                            const userKey = user.userDocumentId;
-                            const permissions = this.computePermissions(userKey);
-                            const color = ColorMapping.get(permissions);
-                            return (
-                                <div
-                                    key={userKey}
-                                    className={"container"}
-                                >
-                                    <select
-                                        className={"permissions-dropdown"}
-                                        value={permissions}
-                                        style={{ color, borderColor: color }}
-                                        onChange={e => this.setInternalSharing({ user, notificationDoc }, e.currentTarget.value)}
-                                    >
-                                        {this.sharingOptions}
-                                    </select>
-                                    <span className={"padding"}>{user.email}</span>
-                                </div>
-                            );
-                        })
-                    }
+                <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 (
+                                        <div
+                                            key={userKey}
+                                            className={"container"}
+                                        >
+                                            <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>
+                                        </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
+                                            key={StrCast(group.groupName)}
+                                            className={"container"}
+                                        >
+                                            <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>
+                                            </div>
+                                        </div>
+                                    );
+                                })
+
+                            }
+
+                        </div>
+                    </div>
                 </div>
                 <div className={"close-button"} onClick={this.close}>Done</div>
             </div>
@@ -284,6 +404,7 @@ export default class SharingManager extends React.Component<{}> {
     }
 
     render() {
+        // console.log(this.sharingDoc);
         return (
             <MainViewModal
                 contents={this.sharingInterface}