Merge branch 'master' into master-cleanup

25 files changed, 1637 insertions, 1454 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 088593871..0bb6ce27f 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -191,6 +191,10 @@ export class DocumentOptions {
     childDontRegisterViews?: boolean;
     childHideLinkButton?: boolean; // hide link buttons on all children
     hideLinkButton?: boolean; // whether the blue link counter button should be hidden
+    hideDecorationTitle?: boolean;
+    hideOpenButton?: boolean;
+    hideResizeHandles?: boolean;
+    hideDocumentButtonBar?: boolean;
     hideAllLinks?: boolean; // whether all individual blue anchor dots should be hidden
     isTemplateForField?: string; // the field key for which the containing document is a rendering template
     isTemplateDoc?: boolean;
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b1329e349..60bfc165b 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -381,6 +381,7 @@ export class CurrentUserUtils {
                     dontUndo: true,
                     title,
                     target,
+                    dontRegisterView: true,
                     hidden: hidden ? ComputedField.MakeFunction("IsNoviceMode()") as any : undefined,
                     _dropAction: "alias",
                     _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
@@ -399,6 +400,7 @@ export class CurrentUserUtils {
                 _chromeHidden: true,
                 backgroundColor: Colors.DARK_GRAY,
                 boxShadow: "rgba(0,0,0,0)",
+                dontRegisterView: true,
                 dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
                 ignoreClick: true,
                 _gridGap: 0,
@@ -719,7 +721,7 @@ export class CurrentUserUtils {
             ];
             doc.dockedBtns = CurrentUserUtils.linearButtonList({
                 title: "docked buttons", _height: 40, flexGap: 0, linearViewFloating: true,
-                linearViewIsExpanded: true, linearViewExpandable: true, ignoreClick: true
+                childDontRegisterViews: true, linearViewIsExpanded: true, linearViewExpandable: true, ignoreClick: true
             }, btnDescs.map(desc => doc[`dockedBtn-${desc.title}`] as Doc ?? (doc[`dockedBtn-${desc.title}`] = dockBtn({ title: desc.title, ...desc.opts() }))));
         }
     }
@@ -833,12 +835,13 @@ export class CurrentUserUtils {
         });
         if (doc.contextMenuBtns === undefined) {
             doc.contextMenuBtns = CurrentUserUtils.linearButtonList(
-                { title: "menu buttons", flexGap: 0, linearViewIsExpanded: true, ignoreClick: true, linearViewExpandable: false, _height: 35 },
+                { title: "menu buttons", flexGap: 0, childDontRegisterViews: true,  linearViewIsExpanded: true, ignoreClick: true, linearViewExpandable: false, _height: 35 },
                 CurrentUserUtils.contextMenuTools(doc).map(params =>
                     !params.subMenu ?
                         btnFunc(params) :
                         CurrentUserUtils.linearButtonList({
                             title: params.title,
+                            childDontRegisterViews: true,
                             linearViewSubMenu: true, flexGap: 0, ignoreClick: true,
                             linearViewExpandable: true, icon: params.title, _height: 30,
                             linearViewIsExpanded: params.expanded ? !(ComputedField.MakeFunction(params.expanded) as any) : undefined,
@@ -854,6 +857,7 @@ export class CurrentUserUtils {
                         btnFunc(params) :
                         CurrentUserUtils.linearButtonList({
                             title: params.title,
+                            childDontRegisterViews: true,
                             linearViewSubMenu: true, flexGap: 0, ignoreClick: true,
                             linearViewExpandable: true, icon: params.title, _height: 30,
                             linearViewIsExpanded: params.expanded ? !(ComputedField.MakeFunction(params.expanded) as any) : undefined,
@@ -919,7 +923,7 @@ export class CurrentUserUtils {
                     title: "My SharedDocs", childDropAction: "alias", system: true, contentPointerEvents: "all", childLimitHeight: 0, _yMargin: 50, _gridGap: 15,
                     _showTitle: "title", treeViewHideTitle: true, ignoreClick: true, _lockedPosition: true, "acl-Public": SharingPermissions.Augment, "_acl-Public": SharingPermissions.Augment,
                     _chromeHidden: true, boxShadow: "0 0",
-                    explainer: "This is where documents or dashboards that other users have shared with you will appear. To share a document or dashboard right click and select 'Share'"
+                    dontRegisterView: true, explainer: "This is where documents or dashboards that other users have shared with you will appear. To share a document or dashboard right click and select 'Share'"
                 }, sharingDocumentId + "outer", sharingDocumentId);
                 (sharedDocs as Doc)["acl-Public"] = (sharedDocs as Doc)[DataSym]["acl-Public"] = SharingPermissions.Augment;
             }
@@ -931,7 +935,6 @@ export class CurrentUserUtils {
                 sharedDocs.childContextMenuScripts = new List<ScriptField>([addToDashboards!,]);
                 sharedDocs.childContextMenuLabels = new List<string>(["Add to Dashboards",]);
                 sharedDocs.childContextMenuIcons = new List<string>(["user-plus",]);
-
             }
             doc.mySharedDocs = new PrefetchProxy(sharedDocs as Doc);
         }
@@ -944,7 +947,7 @@ export class CurrentUserUtils {
             doc.myImportDocs = new PrefetchProxy(Docs.Create.StackingDocument([], {
                 title: "My Imports", _forceActive: true, buttonMenu: true, buttonMenuDoc: newImportButton, ignoreClick: true, _showTitle: "title", _stayInCollection: true, _hideContextMenu: true, childLimitHeight: 0,
                 childDropAction: "copy", _autoHeight: true, _yMargin: 50, _gridGap: 15, boxShadow: "0 0", _lockedPosition: true, system: true, _chromeHidden: true,
-                explainer: "This is where documents that are Imported into Dash will go."
+                dontRegisterView: true, explainer: "This is where documents that are Imported into Dash will go."
             }));
         }
     }
@@ -953,7 +956,7 @@ export class CurrentUserUtils {
     static setupSearchSidebar(doc: Doc) {
         if (doc.mySearchPanel === undefined) {
             doc.mySearchPanel = new PrefetchProxy(Docs.Create.SearchDocument({
-                backgroundColor: "dimgray", ignoreClick: true, _searchDoc: true,
+                dontRegisterView: true, backgroundColor: "dimgray", ignoreClick: true, _searchDoc: true,
                 childDropAction: "alias", _lockedPosition: true, _viewType: CollectionViewType.Schema, title: "Search Panel", system: true
             })) as any as Doc;
         }
@@ -1093,6 +1096,7 @@ export class CurrentUserUtils {
                     Docs.newAccount = !(field instanceof Doc);
                     await Docs.Prototypes.initialize();
                     const userDoc = Docs.newAccount ? new Doc(userDocumentId, true) : field as Doc;
+                    Docs.newAccount &&(userDoc.activePage = "home");
                     const updated = this.updateUserDocument(Doc.SetUserDoc(userDoc), sharingDocumentId, linkDatabaseId);
                     (await DocListCastAsync(Cast(Doc.UserDoc().myLinkDatabase, Doc, null)?.data))?.forEach(async link => { // make sure anchors are loaded to avoid incremental updates to computedFn's in LinkManager
                         const a1 = await Cast(link?.anchor1, Doc, null);
@@ -1110,6 +1114,9 @@ export class CurrentUserUtils {
 
     public static openDashboard = (userDoc: Doc, doc: Doc, fromHistory = false) => {
         CurrentUserUtils.MainDocId = doc[Id];
+        if (!DocListCast(CurrentUserUtils.MyDashboards.data).includes(doc)) {
+            Doc.AddDocToList(CurrentUserUtils.MyDashboards, "data", doc);
+        }
 
         if (doc) {  // this has the side-effect of setting the main container since we're assigning the active/guest dashboard
             !("presentationView" in doc) && (doc.presentationView = new List<Doc>([Docs.Create.TreeDocument([], { title: "Presentation" })]));
@@ -1183,37 +1190,42 @@ export class CurrentUserUtils {
         input.click();
     }
 
-    public static async snapshotDashboard(userDoc: Doc) {
+    public static CaptureDashboardThumbnail() {
         const docView = CollectionDockingView.Instance.props.DocumentView?.();
         const content = docView?.ContentDiv;
         if (docView && content) {
             const _width = Number(getComputedStyle(content).width.replace("px",""));
             const _height = Number(getComputedStyle(content).height.replace("px",""));
-            CollectionFreeFormView.UpdateIcon(
+            return CollectionFreeFormView.UpdateIcon(
                 docView.layoutDoc[Id] + "-icon" + (new Date()).getTime(),
                 content,
                 _width, _height,
-                _width, _height, 0,
+                _width, _height, 0, 1, true, docView.layoutDoc[Id] + "-icon", 
                 (iconFile, _nativeWidth, _nativeHeight) => {
                     const img = Docs.Create.ImageDocument(new ImageField(iconFile), { title: docView.rootDoc.title+"-icon", _width, _height, _nativeWidth, _nativeHeight});
                     const proto = Cast(img.proto, Doc, null)!;
                     proto["data-nativeWidth"] = _width;
                     proto["data-nativeHeight"] = _height;
-                    docView.dataDoc.thumb = img;
+                    Doc.GetProto(CurrentUserUtils.ActiveDashboard).thumb = img;
                 });
         }
 
+    }
+
+    public static async snapshotDashboard(userDoc: Doc) {
         const copy = await CollectionDockingView.Copy(CurrentUserUtils.ActiveDashboard);
         Doc.AddDocToList(Cast(userDoc.myDashboards, Doc, null), "data", copy);
         CurrentUserUtils.openDashboard(userDoc, copy);
     }
 
+    public static closeActiveDashboard = () => {
+          Doc.UserDoc().activeDashboard = undefined;
+    }
+
     public static createNewDashboard = async (userDoc: Doc, id?: string) => {
         const presentation = Doc.MakeCopy(userDoc.emptyPresentation as Doc, true);
         const dashboards = await Cast(userDoc.myDashboards, Doc) as Doc;
         const dashboardCount = DocListCast(dashboards.data).length + 1;
-        const emptyPane = Cast(userDoc.emptyPane, Doc, null);
-        emptyPane["dragFactory-count"] = NumCast(emptyPane["dragFactory-count"]) + 1;
         const freeformOptions: DocumentOptions = {
             x: 0,
             y: 400,
@@ -1221,7 +1233,7 @@ export class CurrentUserUtils {
             _height: 1000,
             _fitWidth: true,
             _backgroundGridShow: true,
-            title: `Untitled Tab ${NumCast(emptyPane["dragFactory-count"])}`,
+            title: `Untitled Tab 1`,
         };
         const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
         const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, "row");
@@ -1230,11 +1242,12 @@ export class CurrentUserUtils {
         // switching the tabs from the datadoc to the regular doc
         const dashboardTabs = DocListCast(dashboardDoc[DataSym].data);
         dashboardDoc.data = new List<Doc>(dashboardTabs);
+        dashboardDoc["pane-count"] = 1;
 
         userDoc.activePresentation = presentation;
 
         Doc.AddDocToList(dashboards, "data", dashboardDoc);
-        CurrentUserUtils.openDashboard(userDoc, dashboardDoc);
+      //   CurrentUserUtils.openDashboard(userDoc, dashboardDoc);
     }
 
     public static GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number, noMargins?: boolean, annotationOn?: Doc, maxHeight?: number, backgroundColor?: string) {
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 9f8c49081..dbfba8992 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -455,7 +455,7 @@ export namespace DragManager {
             if (dragData instanceof DocumentDragData) {
                 dragData.userDropAction = e.ctrlKey && e.altKey ? "copy" : e.ctrlKey ? "alias" : dragData.defaultDropAction;
             }
-            if (((e.target as any)?.className === "lm_tabs" || e?.shiftKey) && dragData.draggedDocuments.length === 1) {
+            if (((e.target as any)?.className === "lm_tabs" || (e.target as any)?.className === "lm_header" || e?.shiftKey) && dragData.draggedDocuments.length === 1) {
                 if (!startWindowDragTimer) {
                     startWindowDragTimer = setTimeout(async () => {
                         startWindowDragTimer = undefined;
diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
new file mode 100644
index 000000000..67587dd2b
--- /dev/null
+++ b/src/client/views/DashboardView.scss
@@ -0,0 +1,48 @@
+.dashboard-view {
+      padding: 50px;
+      display: flex;
+      flex-direction: row;
+
+      .left-menu {
+            display: flex;
+            flex-direction: column;
+            width: 300px;
+      }
+
+      .all-dashboards {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            overflow-y: scroll;
+      }
+}
+
+.text-button {
+      padding: 10px 0;
+      &:hover {
+            font-weight: 500;
+      }
+
+      &.selected {
+            font-weight: 700;
+      }
+}
+
+.dashboard-container {
+      border-radius: 10px;
+      width: 250px;
+      border: solid .5px grey;
+      display: flex;
+      flex-direction: column;
+      margin: 0 30px 30px 30px;
+      overflow: hidden;
+
+      &:hover {
+            border: solid 1.5px grey;  
+      }
+
+      .title {
+            margin: 10px;
+            font-weight: 500;
+      }
+}
\ No newline at end of file
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
new file mode 100644
index 000000000..efc1644fe
--- /dev/null
+++ b/src/client/views/DashboardView.tsx
@@ -0,0 +1,69 @@
+import { action, observable } from "mobx";
+import { extname } from 'path';
+import { observer } from "mobx-react";
+import * as React from 'react';
+import { Doc, DocListCast } from "../../fields/Doc";
+import { Id } from "../../fields/FieldSymbols";
+import { Cast, ImageCast, StrCast } from "../../fields/Types";
+import { CurrentUserUtils } from "../util/CurrentUserUtils";
+import { UndoManager } from "../util/UndoManager";
+import "./DashboardView.scss"
+
+enum DashboardGroup {
+      MyDashboards, SharedDashboards
+}
+
+@observer
+export class DashboardView extends React.Component {
+
+      //TODO: delete dashboard, share dashboard, etc.
+
+      @observable
+      private selectedDashboardGroup = DashboardGroup.MyDashboards;
+
+      @action
+      selectDashboardGroup = (group: DashboardGroup) => {
+            this.selectedDashboardGroup = group
+      }
+
+      newDashboard = async () => {
+            const batch = UndoManager.StartBatch("new dash");
+            await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
+            batch.end();
+      }
+
+      clickDashboard = async (e: React.MouseEvent, dashboard: Doc) => {
+            if (e.detail === 2) {
+                  Doc.UserDoc().activeDashboard = dashboard;
+                  Doc.UserDoc().activePage = "dashboard";
+            }
+      }
+
+      getDashboards = () => {
+            const allDashbaords = DocListCast(CurrentUserUtils.MyDashboards.data);
+            // TODO: filter the dashboards
+            // return allDashbaords.filter(...)
+            return allDashbaords
+      }
+
+      render() {
+            return <div className="dashboard-view">
+                  <div className="left-menu">
+                        <div className="text-button" onClick={this.newDashboard}>New</div>
+                        <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`}onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards) }>My Dashboards</div>
+                        <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.SharedDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards) }>Shared Dashboards</div>
+                  </div>
+                  <div className="all-dashboards">
+                        {this.getDashboards().map((dashboard) => {
+                              const href = ImageCast((dashboard.thumb as Doc)?.data)?.url.href;
+                              return <div className="dashboard-container" key={dashboard[Id]} onClick={e => this.clickDashboard(e, dashboard)}>
+                                    <img src={href ?? "https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU="}></img>
+                                    <div className="title"> {StrCast(dashboard.title)} </div>
+                              </div>
+
+                        })}
+
+                  </div>
+            </div>
+      }
+}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 29e088143..b666b5977 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -33,548 +33,549 @@ import React = require("react");
 
 @observer
 export class DocumentDecorations extends React.Component<{ PanelWidth: number, PanelHeight: number, boundsLeft: number, boundsTop: number }, { value: string }> {
-    static Instance: DocumentDecorations;
-    private _resizeHdlId = "";
-    private _keyinput = React.createRef<HTMLInputElement>();
-    private _resizeBorderWidth = 16;
-    private _linkBoxHeight = 20 + 3; // link button height + margin
-    private _titleHeight = 20;
-    private _resizeUndo?: UndoManager.Batch;
-    private _offX = 0; _offY = 0;  // offset from click pt to inner edge of resize border
-    private _snapX = 0; _snapY = 0; // last snapped location of resize border
-    private _dragHeights = new Map<Doc, { start: number, lowest: number }>();
-    private _inkDragDocs: { doc: Doc, x: number, y: number, width: number, height: number }[] = [];
-
-    @observable private _accumulatedTitle = "";
-    @observable private _titleControlString: string = "#title";
-    @observable private _edtingTitle = false;
-    @observable private _hidden = false;
-    @observable public AddToSelection = false; // if Shift is pressed, then this should be set so that clicking on the selection background is ignored so overlapped documents can be added to the selection set.
-    @observable public Interacting = false;
-    @observable public pushIcon: IconProp = "arrow-alt-circle-up";
-    @observable public pullIcon: IconProp = "arrow-alt-circle-down";
-    @observable public pullColor: string = "white";
-
-    constructor(props: any) {
-        super(props);
-        DocumentDecorations.Instance = this;
-        reaction(() => SelectionManager.Views().slice(), action(docs => this._edtingTitle = false));
-    }
-
-    @computed
-    get Bounds() {
-        const views = SelectionManager.Views();
-        return views.filter(dv => dv.props.renderDepth > 0).map(dv => dv.getBounds()).reduce((bounds, rect) =>
-            !rect ? bounds :
-                {
-                    x: Math.min(rect.left, bounds.x),
-                    y: Math.min(rect.top, bounds.y),
-                    r: Math.max(rect.right, bounds.r),
-                    b: Math.max(rect.bottom, bounds.b),
-                    c: views.length === 1 ? rect.center : undefined
-                },
-            { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE, c: undefined as ({ X: number, Y: number } | undefined) });
-    }
-
-    @action
-    titleBlur = () => {
-        this._edtingTitle = false;
-        if (this._accumulatedTitle.startsWith("#") || this._accumulatedTitle.startsWith("=")) {
-            this._titleControlString = this._accumulatedTitle;
-        } else if (this._titleControlString.startsWith("#")) {
-            const titleFieldKey = this._titleControlString.substring(1);
-            UndoManager.RunInBatch(() => titleFieldKey && SelectionManager.Views().forEach(d => {
-                if (titleFieldKey === "title") {
-                    d.dataDoc["title-custom"] = !this._accumulatedTitle.startsWith("-");
-                    if (StrCast(d.rootDoc.title).startsWith("@") && !this._accumulatedTitle.startsWith("@")) {
-                        Doc.RemoveDocFromList(Doc.UserDoc(), "myPublishedDocs", d.rootDoc);
-                    }
-                    if (!StrCast(d.rootDoc.title).startsWith("@") && this._accumulatedTitle.startsWith("@")) {
-                        Doc.AddDocToList(Doc.UserDoc(), "myPublishedDocs", d.rootDoc);
-                    }
-                }
-                //@ts-ignore
-                const titleField = (+this._accumulatedTitle === this._accumulatedTitle ? +this._accumulatedTitle : this._accumulatedTitle);
-                Doc.SetInPlace(d.rootDoc, titleFieldKey, titleField, true);
-
-                if (d.rootDoc.syncLayoutFieldWithTitle) {
-                    const title = titleField.toString();
-                    const curKey = Doc.LayoutFieldKey(d.rootDoc);
-                    if (curKey !== title && d.dataDoc[title] === undefined) {
-                        d.rootDoc.layout = FormattedTextBox.LayoutString(title);
-                        setTimeout(() => {
-                            const val = d.dataDoc[curKey];
-                            d.dataDoc[curKey] = undefined;
-                            d.dataDoc[title] = val;
-                        });
-                    }
-                }
-            }), "title blur");
-        }
-    }
-
-    titleEntered = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
-            e.stopPropagation();
-            (e.target as any).blur();
-        }
-    }
-
-    @action onTitleDown = (e: React.PointerEvent): void => {
-        setupMoveUpEvents(this, e, e => this.onBackgroundMove(true, e), (e) => { }, action((e) => {
-            !this._edtingTitle && (this._accumulatedTitle = this._titleControlString.startsWith("#") ? this.selectionTitle : this._titleControlString);
-            this._edtingTitle = true;
-            this._keyinput.current && setTimeout(this._keyinput.current.focus);
-        }));
-    }
-
-    onBackgroundDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), emptyFunction, emptyFunction);
-
-    @action
-    onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => {
-        const dragDocView = SelectionManager.Views()[0];
-        const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 };
-        const dragData = new DragManager.DocumentDragData(SelectionManager.Views().map(dv => dv.props.Document), dragDocView.props.dropAction);
-        dragData.offset = dragDocView.props.ScreenToLocalTransform().transformDirection(e.x - left, e.y - top);
-        dragData.moveDocument = dragDocView.props.moveDocument;
-        dragData.isDocDecorationMove = true;
-        dragData.canEmbed = dragTitle;
-        this._hidden = this.Interacting = true;
-        DragManager.StartDocumentDrag(SelectionManager.Views().map(dv => dv.ContentDiv!), dragData, e.x, e.y, {
-            dragComplete: action(e => {
-                dragData.canEmbed && SelectionManager.DeselectAll();
-                this._hidden = this.Interacting = false;
-            }),
-            hideSource: true
-        });
-        return true;
-    }
-
-    _deleteAfterIconify = false;
-    _iconifyBatch: UndoManager.Batch | undefined;
-    onCloseClick = (forceDeleteOrIconify: boolean | undefined) => {
-        if (this.canDelete) {
+      static Instance: DocumentDecorations;
+      private _resizeHdlId = "";
+      private _keyinput = React.createRef<HTMLInputElement>();
+      private _resizeBorderWidth = 16;
+      private _linkBoxHeight = 20 + 3; // link button height + margin
+      private _titleHeight = 20;
+      private _resizeUndo?: UndoManager.Batch;
+      private _offX = 0; _offY = 0;  // offset from click pt to inner edge of resize border
+      private _snapX = 0; _snapY = 0; // last snapped location of resize border
+      private _dragHeights = new Map<Doc, { start: number, lowest: number }>();
+      private _inkDragDocs: { doc: Doc, x: number, y: number, width: number, height: number }[] = [];
+
+      @observable private _accumulatedTitle = "";
+      @observable private _titleControlString: string = "#title";
+      @observable private _edtingTitle = false;
+      @observable private _hidden = false;
+      @observable public AddToSelection = false; // if Shift is pressed, then this should be set so that clicking on the selection background is ignored so overlapped documents can be added to the selection set.
+      @observable public Interacting = false;
+      @observable public pushIcon: IconProp = "arrow-alt-circle-up";
+      @observable public pullIcon: IconProp = "arrow-alt-circle-down";
+      @observable public pullColor: string = "white";
+
+      constructor(props: any) {
+            super(props);
+            DocumentDecorations.Instance = this;
+            reaction(() => SelectionManager.Views().slice(), action(docs => this._edtingTitle = false));
+      }
+
+      @computed
+      get Bounds() {
+            const views = SelectionManager.Views();
+            return views.filter(dv => dv.props.renderDepth > 0).map(dv => dv.getBounds()).reduce((bounds, rect) =>
+                  !rect ? bounds :
+                        {
+                              x: Math.min(rect.left, bounds.x),
+                              y: Math.min(rect.top, bounds.y),
+                              r: Math.max(rect.right, bounds.r),
+                              b: Math.max(rect.bottom, bounds.b),
+                              c: views.length === 1 ? rect.center : undefined
+                        },
+                  { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE, c: undefined as ({ X: number, Y: number } | undefined) });
+      }
+
+      @action
+      titleBlur = () => {
+            this._edtingTitle = false;
+            if (this._accumulatedTitle.startsWith("#") || this._accumulatedTitle.startsWith("=")) {
+                  this._titleControlString = this._accumulatedTitle;
+            } else if (this._titleControlString.startsWith("#")) {
+                  const titleFieldKey = this._titleControlString.substring(1);
+                  UndoManager.RunInBatch(() => titleFieldKey && SelectionManager.Views().forEach(d => {
+                        if (titleFieldKey === "title") {
+                              d.dataDoc["title-custom"] = !this._accumulatedTitle.startsWith("-");
+                              if (StrCast(d.rootDoc.title).startsWith("@") && !this._accumulatedTitle.startsWith("@")) {
+                                    Doc.RemoveDocFromList(Doc.UserDoc(), "myPublishedDocs", d.rootDoc);
+                              }
+                              if (!StrCast(d.rootDoc.title).startsWith("@") && this._accumulatedTitle.startsWith("@")) {
+                                    Doc.AddDocToList(Doc.UserDoc(), "myPublishedDocs", d.rootDoc);
+                              }
+                        }
+                        //@ts-ignore
+                        const titleField = (+this._accumulatedTitle === this._accumulatedTitle ? +this._accumulatedTitle : this._accumulatedTitle);
+                        Doc.SetInPlace(d.rootDoc, titleFieldKey, titleField, true);
+
+                        if (d.rootDoc.syncLayoutFieldWithTitle) {
+                              const title = titleField.toString();
+                              const curKey = Doc.LayoutFieldKey(d.rootDoc);
+                              if (curKey !== title && d.dataDoc[title] === undefined) {
+                                    d.rootDoc.layout = FormattedTextBox.LayoutString(title);
+                                    setTimeout(() => {
+                                          const val = d.dataDoc[curKey];
+                                          d.dataDoc[curKey] = undefined;
+                                          d.dataDoc[title] = val;
+                                    });
+                              }
+                        }
+                  }), "title blur");
+            }
+      }
+
+      titleEntered = (e: React.KeyboardEvent) => {
+            if (e.key === "Enter") {
+                  e.stopPropagation();
+                  (e.target as any).blur();
+            }
+      }
+
+      @action onTitleDown = (e: React.PointerEvent): void => {
+            setupMoveUpEvents(this, e, e => this.onBackgroundMove(true, e), (e) => { }, action((e) => {
+                  !this._edtingTitle && (this._accumulatedTitle = this._titleControlString.startsWith("#") ? this.selectionTitle : this._titleControlString);
+                  this._edtingTitle = true;
+                  this._keyinput.current && setTimeout(this._keyinput.current.focus);
+            }));
+      }
+
+      onBackgroundDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), emptyFunction, emptyFunction);
+
+      @action
+      onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => {
+            const dragDocView = SelectionManager.Views()[0];
+            const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 };
+            const dragData = new DragManager.DocumentDragData(SelectionManager.Views().map(dv => dv.props.Document), dragDocView.props.dropAction);
+            dragData.offset = dragDocView.props.ScreenToLocalTransform().transformDirection(e.x - left, e.y - top);
+            dragData.moveDocument = dragDocView.props.moveDocument;
+            dragData.isDocDecorationMove = true;
+            dragData.canEmbed = dragTitle;
+            this._hidden = this.Interacting = true;
+            DragManager.StartDocumentDrag(SelectionManager.Views().map(dv => dv.ContentDiv!), dragData, e.x, e.y, {
+                  dragComplete: action(e => {
+                        dragData.canEmbed && SelectionManager.DeselectAll();
+                        this._hidden = this.Interacting = false;
+                  }),
+                  hideSource: true
+            });
+            return true;
+      }
+
+      _deleteAfterIconify = false;
+      _iconifyBatch: UndoManager.Batch | undefined;
+      onCloseClick = (forceDeleteOrIconify: boolean | undefined) => {
+
             const views = SelectionManager.Views().slice().filter(v => v);
             if (forceDeleteOrIconify === false && this._iconifyBatch) return;
             this._deleteAfterIconify = forceDeleteOrIconify || this._iconifyBatch ? true : false;
             if (!this._iconifyBatch) {
-                this._iconifyBatch = UndoManager.StartBatch("iconifying");
+                  this._iconifyBatch = UndoManager.StartBatch("iconifying");
             } else {
-                forceDeleteOrIconify = false; // can't force immediate close in the middle of iconifying -- have to wait until iconifying completes
+                  forceDeleteOrIconify = false; // can't force immediate close in the middle of iconifying -- have to wait until iconifying completes
             }
             var iconifyingCount = views.length;
             const finished = action((force?: boolean) => {
-                if ((force || --iconifyingCount === 0) && this._iconifyBatch) {
-                    if (this._deleteAfterIconify) {
-                        views.forEach(iconView => iconView.props.removeDocument?.(iconView.props.Document));
-                        SelectionManager.DeselectAll();
-                    }
-                    this._iconifyBatch?.end();
-                    this._iconifyBatch = undefined;
-                }
+                  if ((force || --iconifyingCount === 0) && this._iconifyBatch) {
+                        if (this._deleteAfterIconify) {
+                              views.forEach(iconView => iconView.props.removeDocument?.(iconView.props.Document));
+                              SelectionManager.DeselectAll();
+                        }
+                        this._iconifyBatch?.end();
+                        this._iconifyBatch = undefined;
+                  }
             });
             if (forceDeleteOrIconify) finished(forceDeleteOrIconify);
             else if (!this._deleteAfterIconify) views.forEach(dv => dv.iconify(finished));
-        }
-    }
-    onMaximizeDown = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, () => {
-            DragManager.StartWindowDrag?.(e, [SelectionManager.Views().slice(-1)[0].rootDoc]);
-            return true;
-        }, emptyFunction, this.onMaximizeClick, false, false);
-    }
-
-    onMaximizeClick = (e: any): void => {
-        const selectedDocs = SelectionManager.Views();
-        if (selectedDocs.length) {
-            if (e.ctrlKey) {    // open an alias in a new tab with Ctrl Key
-                const bestAlias = DocListCast(selectedDocs[0].props.Document.aliases).find(doc => !doc.context && doc.author === Doc.CurrentUserEmail);
-                CollectionDockingView.AddSplit(bestAlias ?? Doc.MakeAlias(selectedDocs[0].props.Document), "right");
-            } else if (e.shiftKey) {   // open centered in a new workspace with Shift Key
-                const alias = Doc.MakeAlias(selectedDocs[0].props.Document);
-                alias.context = undefined;
-                alias.x = -alias[WidthSym]() / 2;
-                alias.y = -alias[HeightSym]() / 2;
-                CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([alias], { title: "Tab for " + alias.title }), "right");
-            } else if (e.altKey) {    // open same document in new tab
-                CollectionDockingView.ToggleSplit(selectedDocs[0].props.Document, "right");
-            } else {
-                var openDoc = selectedDocs[0].props.Document;
-                if (openDoc.layoutKey === "layout_icon") {
-                    openDoc = DocListCast(openDoc.aliases).find(alias => !alias.context) ?? Doc.MakeAlias(openDoc);
-                    Doc.deiconifyView(openDoc);
-                }
-                LightboxView.SetLightboxDoc(openDoc, undefined, selectedDocs.slice(1).map(view => view.props.Document));
-            }
-        }
-        SelectionManager.DeselectAll();
-    }
-
-    onIconifyClick = (): void => {
-        SelectionManager.Views().forEach(dv => dv?.iconify());
-        SelectionManager.DeselectAll();
-    }
-
-    onSelectorClick = () => SelectionManager.Views()?.[0]?.props.ContainingCollectionView?.props.select(false);
-
-    onRadiusDown = (e: React.PointerEvent): void => {
-        this._resizeUndo = UndoManager.StartBatch("DocDecs set radius");
-        setupMoveUpEvents(this, e, (e, down) => {
-            const dist = Math.sqrt((e.clientX - down[0]) * (e.clientX - down[0]) + (e.clientY - down[1]) * (e.clientY - down[1]));
-            SelectionManager.Views().map(dv => dv.props.Document).map(doc => doc.layout instanceof Doc ? doc.layout : doc.isTemplateForField ? doc : Doc.GetProto(doc)).
-                map(d => d.borderRounding = `${Math.max(0, dist < 3 ? 0 : dist)}px`);
-            return false;
-        }, (e) => this._resizeUndo?.end(), (e) => { });
-    }
-
-    @action
-    onRotateDown = (e: React.PointerEvent): void => {
-        const rotateUndo = UndoManager.StartBatch("rotatedown");
-        const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke);
-        const centerPoint = !selectedInk.length ? { X: this.Bounds.x, Y: this.Bounds.y } : { X: this.Bounds.c?.X ?? (this.Bounds.x + this.Bounds.r) / 2, Y: this.Bounds.c?.Y ?? (this.Bounds.y + this.Bounds.b) / 2 };
-        setupMoveUpEvents(this, e,
-            (e: PointerEvent, down: number[], delta: number[]) => {
-                const previousPoint = { X: e.clientX, Y: e.clientY };
-                const movedPoint = { X: e.clientX - delta[0], Y: e.clientY - delta[1] };
-                const angle = InkStrokeProperties.angleChange(previousPoint, movedPoint, centerPoint);
-                if (selectedInk.length) {
-                    angle && InkStrokeProperties.Instance.rotateInk(selectedInk, -angle, centerPoint);
-                } else {
-                    SelectionManager.Views().forEach(dv => dv.rootDoc._jitterRotation = NumCast(dv.rootDoc._jitterRotation) - angle * 180 / Math.PI);
-                }
-                return false;
-            },
-            () => {
-                rotateUndo?.end();
-                UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
-            },
-            emptyFunction);
-    }
-
-    @action
-    onPointerDown = (e: React.PointerEvent): void => {
-        DragManager.docsBeingDragged = SelectionManager.Views().map(dv => dv.rootDoc);
-        this._inkDragDocs = DragManager.docsBeingDragged
-            .filter(doc => doc.type === DocumentType.INK)
-            .map(doc => {
-                if (InkStrokeProperties.Instance._lock) {
-                    Doc.SetNativeHeight(doc, NumCast(doc._height));
-                    Doc.SetNativeWidth(doc, NumCast(doc._width));
-                }
-                return ({ doc, x: NumCast(doc.x), y: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) });
-            });
 
-        setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction);
-        this.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
-        this._resizeHdlId = e.currentTarget.className;
-        const bounds = e.currentTarget.getBoundingClientRect();
-        this._offX = this._resizeHdlId.toLowerCase().includes("left") ? bounds.right - e.clientX : bounds.left - e.clientX;
-        this._offY = this._resizeHdlId.toLowerCase().includes("top") ? bounds.bottom - e.clientY : bounds.top - e.clientY;
-        this._resizeUndo = UndoManager.StartBatch("DocDecs resize");
-        this._snapX = e.pageX;
-        this._snapY = e.pageY;
-        const ffviewSet = new Set<CollectionFreeFormView>();
-        SelectionManager.Views().forEach(docView => {
-            const ffview = docView.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
-            ffview && ffviewSet.add(ffview);
-            this._dragHeights.set(docView.layoutDoc, { start: NumCast(docView.rootDoc._height), lowest: NumCast(docView.rootDoc._height) });
-        });
-        Array.from(ffviewSet).map(ffview => ffview.setupDragLines(false));
-    }
-
-    onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => {
-        const first = SelectionManager.Views()[0];
-        let thisPt = { x: e.clientX - this._offX, y: e.clientY - this._offY };
-        var fixedAspect = Doc.NativeAspect(first.layoutDoc);
-        InkStrokeProperties.Instance._lock && SelectionManager.Views().filter(dv => dv.rootDoc.type === DocumentType.INK)
-            .forEach(dv => fixedAspect = Doc.NativeAspect(dv.rootDoc));
-
-        const resizeHdl = this._resizeHdlId.split(" ")[0];
-        if (fixedAspect && (resizeHdl === "documentDecorations-bottomRightResizer" || resizeHdl === "documentDecorations-topLeftResizer")) { // need to generalize for bl and tr drag handles
-            const project = (p: number[], a: number[], b: number[]) => {
-                const atob = [b[0] - a[0], b[1] - a[1]];
-                const atop = [p[0] - a[0], p[1] - a[1]];
-                const len = atob[0] * atob[0] + atob[1] * atob[1];
-                let dot = atop[0] * atob[0] + atop[1] * atob[1];
-                const t = dot / len;
-                dot = (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
-                return [a[0] + atob[0] * t, a[1] + atob[1] * t];
-            };
-            const tl = first.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-            const drag = project([e.clientX + this._offX, e.clientY + this._offY], tl, [tl[0] + fixedAspect, tl[1] + 1]);
-            thisPt = DragManager.snapDragAspect(drag, fixedAspect);
-        } else {
-            thisPt = DragManager.snapDrag(e, -this._offX, -this._offY, this._offX, this._offY);
-        }
-
-        move[0] = thisPt.x - this._snapX;
-        move[1] = thisPt.y - this._snapY;
-        this._snapX = thisPt.x;
-        this._snapY = thisPt.y;
-        let dragBottom = false, dragRight = false, dragBotRight = false;
-        let dX = 0, dY = 0, dW = 0, dH = 0;
-        switch (this._resizeHdlId.split(" ")[0]) {
-            case "": break;
-            case "documentDecorations-topLeftResizer":
-                dX = -1;
-                dY = -1;
-                dW = -move[0];
-                dH = -move[1];
-                break;
-            case "documentDecorations-topRightResizer":
-                dW = move[0];
-                dY = -1;
-                dH = -move[1];
-                break;
-            case "documentDecorations-topResizer":
-                dY = -1;
-                dH = -move[1];
-                dragBottom = true;
-                break;
-            case "documentDecorations-bottomLeftResizer":
-                dX = -1;
-                dW = -move[0];
-                dH = move[1];
-                break;
-            case "documentDecorations-bottomRightResizer":
-                dW = move[0];
-                dH = move[1];
-                dragBotRight = true;
-                break;
-            case "documentDecorations-bottomResizer":
-                dH = move[1];
-                dragBottom = true;
-                break;
-            case "documentDecorations-leftResizer":
-                dX = -1;
-                dW = -move[0];
-                break;
-            case "documentDecorations-rightResizer":
-                dW = move[0];
-                dragRight = true;
-                break;
-        }
-
-        SelectionManager.Views().forEach(action((docView: DocumentView) => {
-            if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions();
-            if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) {
-                const doc = Document(docView.rootDoc);
-                const nwidth = docView.nativeWidth;
-                const nheight = docView.nativeHeight;
-                const docheight = doc._height || 0;
-                const docwidth = doc._width || 0;
-                const width = docwidth;
-                let height = (docheight || (nheight / nwidth * width));
-                height = !height || isNaN(height) ? 20 : height;
-                const scale = docView.props.ScreenToLocalTransform().Scale;
-                const modifyNativeDim = (e.ctrlKey || doc.forceReflow) && doc.nativeDimModifiable;
-                if (nwidth && nheight) {
-                    if (nwidth / nheight !== width / height && !dragBottom) {
-                        height = nheight / nwidth * width;
-                    }
-                    if (modifyNativeDim && !dragBottom) { // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction
-                        if (Math.abs(dW) > Math.abs(dH)) dH = dW * nheight / nwidth;
-                        else dW = dH * nwidth / nheight;
-                    }
-                }
-                let actualdW = Math.max(width + (dW * scale), 20);
-                let actualdH = Math.max(height + (dH * scale), 20);
-                const fixedAspect = (nwidth && nheight && !doc._fitWidth);
-                if (fixedAspect) {
-                    if ((Math.abs(dW) > Math.abs(dH) && (!dragBottom || !modifyNativeDim)) || dragRight) {
-                        if (dragRight && modifyNativeDim) {
-                            doc._nativeWidth = actualdW / (doc._width || 1) * Doc.NativeWidth(doc);
-                        } else {
-                            if (!doc._fitWidth) {
-                                actualdH = nheight / nwidth * actualdW;
-                                doc._height = actualdH;
-                            }
-                            else if (!modifyNativeDim || dragBotRight) doc._height = actualdH;
+      }
+      onMaximizeDown = (e: React.PointerEvent) => {
+            setupMoveUpEvents(this, e, () => {
+                  DragManager.StartWindowDrag?.(e, [SelectionManager.Views().slice(-1)[0].rootDoc]);
+                  return true;
+            }, emptyFunction, this.onMaximizeClick, false, false);
+      }
+
+      onMaximizeClick = (e: any): void => {
+            const selectedDocs = SelectionManager.Views();
+            if (selectedDocs.length) {
+                  if (e.ctrlKey) {    // open an alias in a new tab with Ctrl Key
+                        const bestAlias = DocListCast(selectedDocs[0].props.Document.aliases).find(doc => !doc.context && doc.author === Doc.CurrentUserEmail);
+                        CollectionDockingView.AddSplit(bestAlias ?? Doc.MakeAlias(selectedDocs[0].props.Document), "right");
+                  } else if (e.shiftKey) {   // open centered in a new workspace with Shift Key
+                        const alias = Doc.MakeAlias(selectedDocs[0].props.Document);
+                        alias.context = undefined;
+                        alias.x = -alias[WidthSym]() / 2;
+                        alias.y = -alias[HeightSym]() / 2;
+                        CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([alias], { title: "Tab for " + alias.title }), "right");
+                  } else if (e.altKey) {    // open same document in new tab
+                        CollectionDockingView.ToggleSplit(selectedDocs[0].props.Document, "right");
+                  } else {
+                        var openDoc = selectedDocs[0].props.Document;
+                        if (openDoc.layoutKey === "layout_icon") {
+                              openDoc = DocListCast(openDoc.aliases).find(alias => !alias.context) ?? Doc.MakeAlias(openDoc);
+                              Doc.deiconifyView(openDoc);
                         }
-                        doc._width = actualdW;
-                    }
-                    else {
-                        if (dragBottom && (modifyNativeDim ||
-                            (docView.layoutDoc.nativeHeightUnfrozen && docView.layoutDoc._fitWidth))) { // frozen web pages, PDFs, and some RTFS have frozen nativewidth/height.  But they are marked to allow their nativeHeight to be explicitly modified with fitWidth and vertical resizing. (ie, with fitWidth they can't grow horizontally to match a vertical resize so it makes more sense to change their nativeheight even if the ctrl key isn't used)
-                            doc._nativeHeight = actualdH / (doc._height || 1) * Doc.NativeHeight(doc);
-                            doc._autoHeight = false;
+                        LightboxView.SetLightboxDoc(openDoc, undefined, selectedDocs.slice(1).map(view => view.props.Document));
+                  }
+            }
+            SelectionManager.DeselectAll();
+      }
+
+      onIconifyClick = (): void => {
+            SelectionManager.Views().forEach(dv => dv?.iconify());
+            SelectionManager.DeselectAll();
+      }
+
+      onSelectorClick = () => SelectionManager.Views()?.[0]?.props.ContainingCollectionView?.props.select(false);
+
+      onRadiusDown = (e: React.PointerEvent): void => {
+            this._resizeUndo = UndoManager.StartBatch("DocDecs set radius");
+            setupMoveUpEvents(this, e, (e, down) => {
+                  const dist = Math.sqrt((e.clientX - down[0]) * (e.clientX - down[0]) + (e.clientY - down[1]) * (e.clientY - down[1]));
+                  SelectionManager.Views().map(dv => dv.props.Document).map(doc => doc.layout instanceof Doc ? doc.layout : doc.isTemplateForField ? doc : Doc.GetProto(doc)).
+                        map(d => d.borderRounding = `${Math.max(0, dist < 3 ? 0 : dist)}px`);
+                  return false;
+            }, (e) => this._resizeUndo?.end(), (e) => { });
+      }
+
+      @action
+      onRotateDown = (e: React.PointerEvent): void => {
+            const rotateUndo = UndoManager.StartBatch("rotatedown");
+            const selectedInk = SelectionManager.Views().filter(i => i.ComponentView instanceof InkingStroke);
+            const centerPoint = !selectedInk.length ? { X: this.Bounds.x, Y: this.Bounds.y } : { X: this.Bounds.c?.X ?? (this.Bounds.x + this.Bounds.r) / 2, Y: this.Bounds.c?.Y ?? (this.Bounds.y + this.Bounds.b) / 2 };
+            setupMoveUpEvents(this, e,
+                  (e: PointerEvent, down: number[], delta: number[]) => {
+                        const previousPoint = { X: e.clientX, Y: e.clientY };
+                        const movedPoint = { X: e.clientX - delta[0], Y: e.clientY - delta[1] };
+                        const angle = InkStrokeProperties.angleChange(previousPoint, movedPoint, centerPoint);
+                        if (selectedInk.length) {
+                              angle && InkStrokeProperties.Instance.rotateInk(selectedInk, -angle, centerPoint);
                         } else {
-                            if (!doc._fitWidth) {
-                                actualdW = nwidth / nheight * actualdH;
-                                doc._width = actualdW;
-                            }
-                            else if (!modifyNativeDim || dragBotRight) doc._width = actualdW;
+                              SelectionManager.Views().forEach(dv => dv.rootDoc._jitterRotation = NumCast(dv.rootDoc._jitterRotation) - angle * 180 / Math.PI);
                         }
-                        if (!modifyNativeDim) {
-                            actualdH = Math.min(nheight / nwidth * NumCast(doc._width), actualdH);
-                            doc._height = actualdH;
+                        return false;
+                  },
+                  () => {
+                        rotateUndo?.end();
+                        UndoManager.FilterBatches(["data", "x", "y", "width", "height"]);
+                  },
+                  emptyFunction);
+      }
+
+      @action
+      onPointerDown = (e: React.PointerEvent): void => {
+            DragManager.docsBeingDragged = SelectionManager.Views().map(dv => dv.rootDoc);
+            this._inkDragDocs = DragManager.docsBeingDragged
+                  .filter(doc => doc.type === DocumentType.INK)
+                  .map(doc => {
+                        if (InkStrokeProperties.Instance._lock) {
+                              Doc.SetNativeHeight(doc, NumCast(doc._height));
+                              Doc.SetNativeWidth(doc, NumCast(doc._width));
                         }
-                        else doc._height = actualdH;
-                    }
-                } else {
-                    dH && (doc._height = actualdH);
-                    dW && (doc._width = actualdW);
-                    dH && (doc._autoHeight = false);
-                }
-                doc.x = (doc.x || 0) + dX * (actualdW - docwidth);
-                doc.y = (doc.y || 0) + dY * (actualdH - docheight);
-                doc._lastModified = new DateField();
-            }
-            const val = this._dragHeights.get(docView.layoutDoc);
-            if (val) this._dragHeights.set(docView.layoutDoc, { start: val.start, lowest: Math.min(val.lowest, NumCast(docView.layoutDoc._height)) });
-        }));
-        return false;
-    }
-
-    @action
-    onPointerUp = (e: PointerEvent): void => {
-        this._resizeHdlId = "";
-        this.Interacting = false;
-        this._resizeUndo?.end();
-        SnappingManager.clearSnapLines();
-
-        // detect autoHeight gesture and apply
-        SelectionManager.Views().map(docView => ({ doc: docView.layoutDoc, hgts: this._dragHeights.get(docView.layoutDoc) }))
-            .filter(pair => pair.hgts && pair.hgts.lowest < pair.hgts.start && pair.hgts.lowest <= 20)
-            .forEach(pair => pair.doc._autoHeight = true);
-        //need to change points for resize, or else rotation/control points will fail.
-        this._inkDragDocs.map(oldbds => ({ oldbds, inkPts: Cast(oldbds.doc.data, InkField)?.inkData || [] }))
-            .forEach(({ oldbds: { doc, x, y, width, height }, inkPts }) => {
-                Doc.GetProto(doc).data = new InkField(inkPts.map(ipt =>  // (new x — oldx) + newWidth * (oldxpoint /oldWidth)
-                ({
-                    X: (NumCast(doc.x) - x) + NumCast(doc.width) * ipt.X / width,
-                    Y: (NumCast(doc.y) - y) + NumCast(doc.height) * ipt.Y / height
-                })));
-                Doc.SetNativeWidth(doc, undefined);
-                Doc.SetNativeHeight(doc, undefined);
+                        return ({ doc, x: NumCast(doc.x), y: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) });
+                  });
+
+            setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction);
+            this.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
+            this._resizeHdlId = e.currentTarget.className;
+            const bounds = e.currentTarget.getBoundingClientRect();
+            this._offX = this._resizeHdlId.toLowerCase().includes("left") ? bounds.right - e.clientX : bounds.left - e.clientX;
+            this._offY = this._resizeHdlId.toLowerCase().includes("top") ? bounds.bottom - e.clientY : bounds.top - e.clientY;
+            this._resizeUndo = UndoManager.StartBatch("DocDecs resize");
+            this._snapX = e.pageX;
+            this._snapY = e.pageY;
+            const ffviewSet = new Set<CollectionFreeFormView>();
+            SelectionManager.Views().forEach(docView => {
+                  const ffview = docView.props.CollectionFreeFormDocumentView?.().props.CollectionFreeFormView;
+                  ffview && ffviewSet.add(ffview);
+                  this._dragHeights.set(docView.layoutDoc, { start: NumCast(docView.rootDoc._height), lowest: NumCast(docView.rootDoc._height) });
             });
-    }
-
-    @computed
-    get selectionTitle(): string {
-        if (SelectionManager.Views().length === 1) {
-            const selected = SelectionManager.Views()[0];
-            if (selected.ComponentView?.getTitle?.()) {
-                return selected.ComponentView.getTitle();
+            Array.from(ffviewSet).map(ffview => ffview.setupDragLines(false));
+      }
+
+      onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => {
+            const first = SelectionManager.Views()[0];
+            let thisPt = { x: e.clientX - this._offX, y: e.clientY - this._offY };
+            var fixedAspect = Doc.NativeAspect(first.layoutDoc);
+            InkStrokeProperties.Instance._lock && SelectionManager.Views().filter(dv => dv.rootDoc.type === DocumentType.INK)
+                  .forEach(dv => fixedAspect = Doc.NativeAspect(dv.rootDoc));
+
+            const resizeHdl = this._resizeHdlId.split(" ")[0];
+            if (fixedAspect && (resizeHdl === "documentDecorations-bottomRightResizer" || resizeHdl === "documentDecorations-topLeftResizer")) { // need to generalize for bl and tr drag handles
+                  const project = (p: number[], a: number[], b: number[]) => {
+                        const atob = [b[0] - a[0], b[1] - a[1]];
+                        const atop = [p[0] - a[0], p[1] - a[1]];
+                        const len = atob[0] * atob[0] + atob[1] * atob[1];
+                        let dot = atop[0] * atob[0] + atop[1] * atob[1];
+                        const t = dot / len;
+                        dot = (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
+                        return [a[0] + atob[0] * t, a[1] + atob[1] * t];
+                  };
+                  const tl = first.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+                  const drag = project([e.clientX + this._offX, e.clientY + this._offY], tl, [tl[0] + fixedAspect, tl[1] + 1]);
+                  thisPt = DragManager.snapDragAspect(drag, fixedAspect);
+            } else {
+                  thisPt = DragManager.snapDrag(e, -this._offX, -this._offY, this._offX, this._offY);
             }
-            if (this._titleControlString.startsWith("=")) {
-                return ScriptField.MakeFunction(this._titleControlString.substring(1), { doc: Doc.name })!.script.run({ self: selected.rootDoc, this: selected.layoutDoc }, console.log).result?.toString() || "";
+
+            move[0] = thisPt.x - this._snapX;
+            move[1] = thisPt.y - this._snapY;
+            this._snapX = thisPt.x;
+            this._snapY = thisPt.y;
+            let dragBottom = false, dragRight = false, dragBotRight = false;
+            let dX = 0, dY = 0, dW = 0, dH = 0;
+            switch (this._resizeHdlId.split(" ")[0]) {
+                  case "": break;
+                  case "documentDecorations-topLeftResizer":
+                        dX = -1;
+                        dY = -1;
+                        dW = -move[0];
+                        dH = -move[1];
+                        break;
+                  case "documentDecorations-topRightResizer":
+                        dW = move[0];
+                        dY = -1;
+                        dH = -move[1];
+                        break;
+                  case "documentDecorations-topResizer":
+                        dY = -1;
+                        dH = -move[1];
+                        dragBottom = true;
+                        break;
+                  case "documentDecorations-bottomLeftResizer":
+                        dX = -1;
+                        dW = -move[0];
+                        dH = move[1];
+                        break;
+                  case "documentDecorations-bottomRightResizer":
+                        dW = move[0];
+                        dH = move[1];
+                        dragBotRight = true;
+                        break;
+                  case "documentDecorations-bottomResizer":
+                        dH = move[1];
+                        dragBottom = true;
+                        break;
+                  case "documentDecorations-leftResizer":
+                        dX = -1;
+                        dW = -move[0];
+                        break;
+                  case "documentDecorations-rightResizer":
+                        dW = move[0];
+                        dragRight = true;
+                        break;
+            }
+
+            SelectionManager.Views().forEach(action((docView: DocumentView) => {
+                  if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions();
+                  if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) {
+                        const doc = Document(docView.rootDoc);
+                        const nwidth = docView.nativeWidth;
+                        const nheight = docView.nativeHeight;
+                        const docheight = doc._height || 0;
+                        const docwidth = doc._width || 0;
+                        const width = docwidth;
+                        let height = (docheight || (nheight / nwidth * width));
+                        height = !height || isNaN(height) ? 20 : height;
+                        const scale = docView.props.ScreenToLocalTransform().Scale;
+                        const modifyNativeDim = (e.ctrlKey || doc.forceReflow) && doc.nativeDimModifiable;
+                        if (nwidth && nheight) {
+                              if (nwidth / nheight !== width / height && !dragBottom) {
+                                    height = nheight / nwidth * width;
+                              }
+                              if (modifyNativeDim && !dragBottom) { // ctrl key enables modification of the nativeWidth or nativeHeight durin the interaction
+                                    if (Math.abs(dW) > Math.abs(dH)) dH = dW * nheight / nwidth;
+                                    else dW = dH * nwidth / nheight;
+                              }
+                        }
+                        let actualdW = Math.max(width + (dW * scale), 20);
+                        let actualdH = Math.max(height + (dH * scale), 20);
+                        const fixedAspect = (nwidth && nheight && !doc._fitWidth);
+                        if (fixedAspect) {
+                              if ((Math.abs(dW) > Math.abs(dH) && (!dragBottom || !modifyNativeDim)) || dragRight) {
+                                    if (dragRight && modifyNativeDim) {
+                                          doc._nativeWidth = actualdW / (doc._width || 1) * Doc.NativeWidth(doc);
+                                    } else {
+                                          if (!doc._fitWidth) {
+                                                actualdH = nheight / nwidth * actualdW;
+                                                doc._height = actualdH;
+                                          }
+                                          else if (!modifyNativeDim || dragBotRight) doc._height = actualdH;
+                                    }
+                                    doc._width = actualdW;
+                              }
+                              else {
+                                    if (dragBottom && (modifyNativeDim ||
+                                          (docView.layoutDoc.nativeHeightUnfrozen && docView.layoutDoc._fitWidth))) { // frozen web pages, PDFs, and some RTFS have frozen nativewidth/height.  But they are marked to allow their nativeHeight to be explicitly modified with fitWidth and vertical resizing. (ie, with fitWidth they can't grow horizontally to match a vertical resize so it makes more sense to change their nativeheight even if the ctrl key isn't used)
+                                          doc._nativeHeight = actualdH / (doc._height || 1) * Doc.NativeHeight(doc);
+                                          doc._autoHeight = false;
+                                    } else {
+                                          if (!doc._fitWidth) {
+                                                actualdW = nwidth / nheight * actualdH;
+                                                doc._width = actualdW;
+                                          }
+                                          else if (!modifyNativeDim || dragBotRight) doc._width = actualdW;
+                                    }
+                                    if (!modifyNativeDim) {
+                                          actualdH = Math.min(nheight / nwidth * NumCast(doc._width), actualdH);
+                                          doc._height = actualdH;
+                                    }
+                                    else doc._height = actualdH;
+                              }
+                        } else {
+                              dH && (doc._height = actualdH);
+                              dW && (doc._width = actualdW);
+                              dH && (doc._autoHeight = false);
+                        }
+                        doc.x = (doc.x || 0) + dX * (actualdW - docwidth);
+                        doc.y = (doc.y || 0) + dY * (actualdH - docheight);
+                        doc._lastModified = new DateField();
+                  }
+                  const val = this._dragHeights.get(docView.layoutDoc);
+                  if (val) this._dragHeights.set(docView.layoutDoc, { start: val.start, lowest: Math.min(val.lowest, NumCast(docView.layoutDoc._height)) });
+            }));
+            return false;
+      }
+
+      @action
+      onPointerUp = (e: PointerEvent): void => {
+            this._resizeHdlId = "";
+            this.Interacting = false;
+            this._resizeUndo?.end();
+            SnappingManager.clearSnapLines();
+
+            // detect autoHeight gesture and apply
+            SelectionManager.Views().map(docView => ({ doc: docView.layoutDoc, hgts: this._dragHeights.get(docView.layoutDoc) }))
+                  .filter(pair => pair.hgts && pair.hgts.lowest < pair.hgts.start && pair.hgts.lowest <= 20)
+                  .forEach(pair => pair.doc._autoHeight = true);
+            //need to change points for resize, or else rotation/control points will fail.
+            this._inkDragDocs.map(oldbds => ({ oldbds, inkPts: Cast(oldbds.doc.data, InkField)?.inkData || [] }))
+                  .forEach(({ oldbds: { doc, x, y, width, height }, inkPts }) => {
+                        Doc.GetProto(doc).data = new InkField(inkPts.map(ipt =>  // (new x — oldx) + newWidth * (oldxpoint /oldWidth)
+                        ({
+                              X: (NumCast(doc.x) - x) + NumCast(doc.width) * ipt.X / width,
+                              Y: (NumCast(doc.y) - y) + NumCast(doc.height) * ipt.Y / height
+                        })));
+                        Doc.SetNativeWidth(doc, undefined);
+                        Doc.SetNativeHeight(doc, undefined);
+                  });
+      }
+
+      @computed
+      get selectionTitle(): string {
+            if (SelectionManager.Views().length === 1) {
+                  const selected = SelectionManager.Views()[0];
+                  if (selected.ComponentView?.getTitle?.()) {
+                        return selected.ComponentView.getTitle();
+                  }
+                  if (this._titleControlString.startsWith("=")) {
+                        return ScriptField.MakeFunction(this._titleControlString.substring(1), { doc: Doc.name })!.script.run({ self: selected.rootDoc, this: selected.layoutDoc }, console.log).result?.toString() || "";
+                  }
+                  if (this._titleControlString.startsWith("#")) {
+                        return Field.toString(selected.props.Document[this._titleControlString.substring(1)] as Field) || "-unset-";
+                  }
+                  return this._accumulatedTitle;
             }
-            if (this._titleControlString.startsWith("#")) {
-                return Field.toString(selected.props.Document[this._titleControlString.substring(1)] as Field) || "-unset-";
+            return SelectionManager.Views().length > 1 ? "-multiple-" : "-unset-";
+      }
+
+      @computed get hasIcons() {
+            return SelectionManager.Views().some(docView => docView.rootDoc.layoutKey === "layout_icon");
+      }
+
+      render() {
+            const bounds = this.Bounds;
+            const seldoc = SelectionManager.Views().slice(-1)[0];
+            if (SnappingManager.GetIsDragging() || bounds.r - bounds.x < 1 || bounds.x === Number.MAX_VALUE || !seldoc || this._hidden || isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) {
+                  return (null);
             }
-            return this._accumulatedTitle;
-        }
-        return SelectionManager.Views().length > 1 ? "-multiple-" : "-unset-";
-    }
-
-    @computed get canDelete() {
-        return SelectionManager.Views().some(docView => {
-            if (docView.rootDoc.stayInCollection) return false;
-            const collectionAcl = docView.props.ContainingCollectionView ? GetEffectiveAcl(docView.props.ContainingCollectionDoc?.[DataSym]) : AclEdit;
-            //return (!docView.rootDoc._stayInCollection || docView.rootDoc.isInkMask) &&
-            return (collectionAcl === AclAdmin || collectionAcl === AclEdit || GetEffectiveAcl(docView.rootDoc) === AclAdmin);
-        });
-    }
-    @computed get hasIcons() {
-        return SelectionManager.Views().some(docView => docView.rootDoc.layoutKey === "layout_icon");
-    }
-
-    render() {
-        const bounds = this.Bounds;
-        const seldoc = SelectionManager.Views().slice(-1)[0];
-        if (SnappingManager.GetIsDragging() || bounds.r - bounds.x < 1 || bounds.x === Number.MAX_VALUE || !seldoc || this._hidden || isNaN(bounds.r) || isNaN(bounds.b) || isNaN(bounds.x) || isNaN(bounds.y)) {
-            return (null);
-        }
-        const hideResizers = seldoc.props.hideResizeHandles || seldoc.rootDoc.hideResizeHandles || seldoc.rootDoc._isGroup;
-        const hideTitle = seldoc.props.hideDecorationTitle || seldoc.rootDoc.hideDecorationTitle;
-        const canOpen = SelectionManager.Views().some(docView => !docView.props.Document._stayInCollection && !docView.props.Document.isGroup && !docView.props.Document.hideOpenButton);
-        const canDelete = this.canDelete;
-        const topBtn = (key: string, icon: string, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: any) => void), title: string) => (
-            <Tooltip key={key} title={<div className="dash-tooltip">{title}</div>} placement="top">
-                <div className={`documentDecorations-${key}Button`} onContextMenu={e => e.preventDefault()}
-                    onPointerDown={pointerDown ?? (e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(e => click!(e))))} >
-                    <FontAwesomeIcon icon={icon as any} />
-                </div>
-            </Tooltip>);
-
-        const colorScheme = StrCast(CurrentUserUtils.ActiveDashboard?.colorScheme);
-        const titleArea = hideTitle ? <div className="documentDecorations-title" onPointerDown={this.onTitleDown} key="title" /> :
-            this._edtingTitle ?
-                <input ref={this._keyinput} className={`documentDecorations-title${colorScheme}`}
-                    type="text" name="dynbox" autoComplete="on"
-                    value={this._accumulatedTitle}
-                    onBlur={e => this.titleBlur()}
-                    onChange={action(e => this._accumulatedTitle = e.target.value)}
-                    onKeyDown={this.titleEntered} /> :
-                <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown} >
-                    <span className={`documentDecorations-titleSpan${colorScheme}`}>{`${this.selectionTitle}`}</span>
-                </div>;
-
-
-        const leftBounds = this.props.boundsLeft;
-        const topBounds = LightboxView.LightboxDoc ? 0 : this.props.boundsTop;
-        bounds.x = Math.max(leftBounds, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2;
-        bounds.y = Math.max(topBounds, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight;
-        const borderRadiusDraggerWidth = 15;
-        bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth));
-        bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight));
-
-        const useRotation = seldoc.ComponentView instanceof InkingStroke || seldoc.ComponentView instanceof ImageBox;
-        const resizerScheme = colorScheme ? "documentDecorations-resizer" + colorScheme : "";
-
-        const rotation = NumCast(seldoc.rootDoc._jitterRotation);
-
-        return (<div className={`documentDecorations${colorScheme}`}>
-            <div className="documentDecorations-background" style={{
-                transform: `rotate(${rotation}deg)`,
-                transformOrigin: "top  left",
-                width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
-                height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px",
-                left: bounds.x - this._resizeBorderWidth / 2,
-                top: bounds.y - this._resizeBorderWidth / 2,
-                pointerEvents: DocumentDecorations.Instance.AddToSelection || this.Interacting ? "none" : "all",
-                display: SelectionManager.Views().length <= 1 ? "none" : undefined
-            }} onPointerDown={this.onBackgroundDown} onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} />
-            {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <>
-                <div className="documentDecorations-container" key="container" style={{
-                    transform: ` translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`,
-                    transformOrigin: `8px 26px`,
-                    width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
-                    height: (bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight) + "px",
-                }}>
-                    {!canDelete ? <div /> : topBtn("close", this.hasIcons ? "times" : "window-maximize", undefined, e => this.onCloseClick(this.hasIcons ? true : undefined), "Close")}
-                    {titleArea}
-                    {!canOpen ? (null) : topBtn("open", "external-link-alt", this.onMaximizeDown, undefined, "Open in Tab (ctrl: as alias, shift: in new collection)")}
-                    {hideResizers ? (null) :
-                        <>
-                            <div key="tl" className={`documentDecorations-topLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="t" className={`documentDecorations-topResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="tr" className={`documentDecorations-topRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="l" className={`documentDecorations-leftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="c" className={`documentDecorations-centerCont ${resizerScheme}`}></div>
-                            <div key="r" className={`documentDecorations-rightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="bl" className={`documentDecorations-bottomLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="b" className={`documentDecorations-bottomResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-                            <div key="br" className={`documentDecorations-bottomRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
-
-                            {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) :
-                                topBtn("selector", "arrow-alt-circle-up", undefined, this.onSelectorClick, "tap to select containing document")}
-                            <div key="rot" className={`documentDecorations-${useRotation ? "rotation" : "borderRadius"}`}
-                                onPointerDown={useRotation ? this.onRotateDown : this.onRadiusDown}
-                                onContextMenu={e => e.preventDefault()}>{useRotation && "⟲"}</div>
-                        </>
-                    }
-                    {seldoc?.Document.type === DocumentType.FONTICON ? (null) :
-                        <div className="link-button-container" key="links"
-                            style={{
-                                transform: ` translate(${- this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `,
-                            }}>
-                            <DocumentButtonBar views={SelectionManager.Views} />
-                        </div>}
-                </div >
-            </>}
-        </div >
-        );
-    }
+            // hide the decorations if the parent chooses to hide it or if the document itself hides it
+            const hideResizers = seldoc.props.hideResizeHandles || seldoc.rootDoc.hideResizeHandles || seldoc.rootDoc._isGroup;
+            const hideTitle = seldoc.props.hideDecorationTitle || seldoc.rootDoc.hideDecorationTitle;
+            const hideDocumentButtonBar = seldoc.props.hideDocumentButtonBar || seldoc.rootDoc.hideDocumentButtonBar;
+            // if multiple documents have been opened at the same time, then don't show open button
+            const hideOpenButton = seldoc.props.hideOpenButton || seldoc.rootDoc.hideOpenButton ||
+                  SelectionManager.Views().some(docView => docView.props.Document._stayInCollection || docView.props.Document.isGroup || docView.props.Document.hideOpenButton);
+            const hideDeleteButton = seldoc.props.hideDeleteButton || seldoc.rootDoc.hideDeleteButton ||
+                  SelectionManager.Views().some(docView => {
+                        const collectionAcl = docView.props.ContainingCollectionView ? GetEffectiveAcl(docView.props.ContainingCollectionDoc?.[DataSym]) : AclEdit;
+                        return docView.rootDoc.stayInCollection || (collectionAcl !== AclAdmin && collectionAcl !== AclEdit && GetEffectiveAcl(docView.rootDoc) !== AclAdmin);
+                  });
+            const topBtn = (key: string, icon: string, pointerDown: undefined | ((e: React.PointerEvent) => void), click: undefined | ((e: any) => void), title: string) => (
+                  <Tooltip key={key} title={<div className="dash-tooltip">{title}</div>} placement="top">
+                        <div className={`documentDecorations-${key}Button`} onContextMenu={e => e.preventDefault()}
+                              onPointerDown={pointerDown ?? (e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(e => click!(e))))} >
+                              <FontAwesomeIcon icon={icon as any} />
+                        </div>
+                  </Tooltip>);
+
+            const colorScheme = StrCast(CurrentUserUtils.ActiveDashboard?.colorScheme);
+            const titleArea = hideTitle ? (null) :
+                  this._edtingTitle ?
+                        <input ref={this._keyinput} className={`documentDecorations-title${colorScheme}`}
+                              type="text" name="dynbox" autoComplete="on"
+                              value={this._accumulatedTitle}
+                              onBlur={e => this.titleBlur()}
+                              onChange={action(e => this._accumulatedTitle = e.target.value)}
+                              onKeyDown={this.titleEntered} /> :
+                        <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown} >
+                              <span className={`documentDecorations-titleSpan${colorScheme}`}>{`${this.selectionTitle}`}</span>
+                        </div>;
+
+
+            const leftBounds = this.props.boundsLeft;
+            const topBounds = LightboxView.LightboxDoc ? 0 : this.props.boundsTop;
+            bounds.x = Math.max(leftBounds, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2;
+            bounds.y = Math.max(topBounds, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight;
+            const borderRadiusDraggerWidth = 15;
+            bounds.r = Math.max(bounds.x, Math.max(leftBounds, Math.min(window.innerWidth, bounds.r + borderRadiusDraggerWidth + this._resizeBorderWidth / 2) - this._resizeBorderWidth / 2 - borderRadiusDraggerWidth));
+            bounds.b = Math.max(bounds.y, Math.max(topBounds, Math.min(window.innerHeight, bounds.b + this._resizeBorderWidth / 2 + this._linkBoxHeight) - this._resizeBorderWidth / 2 - this._linkBoxHeight));
+
+            const useRotation = seldoc.ComponentView instanceof InkingStroke || seldoc.ComponentView instanceof ImageBox;
+            const resizerScheme = colorScheme ? "documentDecorations-resizer" + colorScheme : "";
+
+            const rotation = NumCast(seldoc.rootDoc._jitterRotation);
+
+            return (<div className={`documentDecorations${colorScheme}`}>
+                  <div className="documentDecorations-background" style={{
+                        transform: `rotate(${rotation}deg)`,
+                        transformOrigin: "top  left",
+                        width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
+                        height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px",
+                        left: bounds.x - this._resizeBorderWidth / 2,
+                        top: bounds.y - this._resizeBorderWidth / 2,
+                        pointerEvents: DocumentDecorations.Instance.AddToSelection || this.Interacting ? "none" : "all",
+                        display: SelectionManager.Views().length <= 1 ? "none" : undefined
+                  }} onPointerDown={this.onBackgroundDown} onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} />
+                  {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <>
+                        <div className="documentDecorations-container" key="container" style={{
+                              transform: ` translate(${bounds.x - this._resizeBorderWidth / 2}px, ${bounds.y - this._resizeBorderWidth / 2 - this._titleHeight}px) rotate(${rotation}deg)`,
+                              transformOrigin: `8px 26px`,
+                              width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
+                              height: (bounds.b - bounds.y + this._resizeBorderWidth + this._titleHeight) + "px",
+                        }}>
+                              {hideDeleteButton ? <div /> : topBtn("close", this.hasIcons ? "times" : "window-maximize", undefined, e => this.onCloseClick(this.hasIcons ? true : undefined), "Close")}
+                              {titleArea}
+                              {hideOpenButton ? (null) : topBtn("open", "external-link-alt", this.onMaximizeDown, undefined, "Open in Tab (ctrl: as alias, shift: in new collection)")}
+                              {hideResizers ? (null) :
+                                    <>
+                                          <div key="tl" className={`documentDecorations-topLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="t" className={`documentDecorations-topResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="tr" className={`documentDecorations-topRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="l" className={`documentDecorations-leftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="c" className={`documentDecorations-centerCont ${resizerScheme}`}></div>
+                                          <div key="r" className={`documentDecorations-rightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="bl" className={`documentDecorations-bottomLeftResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="b" className={`documentDecorations-bottomResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+                                          <div key="br" className={`documentDecorations-bottomRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} />
+
+                                          {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) :
+                                                topBtn("selector", "arrow-alt-circle-up", undefined, this.onSelectorClick, "tap to select containing document")}
+                                          <div key="rot" className={`documentDecorations-${useRotation ? "rotation" : "borderRadius"}`}
+                                                onPointerDown={useRotation ? this.onRotateDown : this.onRadiusDown}
+                                                onContextMenu={e => e.preventDefault()}>{useRotation && "⟲"}</div>
+                                    </>
+                              }
+
+                              {hideDocumentButtonBar ? (null) :
+                                    <div className="link-button-container" key="links"
+                                          style={{
+                                                transform: ` translate(${- this._resizeBorderWidth / 2 + 10}px, ${this._resizeBorderWidth + bounds.b - bounds.y + this._titleHeight}px) `,
+                                          }}>
+                                          <DocumentButtonBar views={SelectionManager.Views} />
+                                    </div>}
+                        </div >
+                  </>}
+            </div >
+            );
+      }
 }
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 517fe097c..49c2dcf34 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -10,6 +10,7 @@ import { CurrentUserUtils } from "../util/CurrentUserUtils";
 import { LinkManager } from "../util/LinkManager";
 import { RecordingApi } from "../util/RecordingApi";
 import { CollectionView } from "./collections/CollectionView";
+import { DashboardView } from './DashboardView';
 import { MainView } from "./MainView";
 
 AssignAllExtensions();
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 9516ea017..5fd76c388 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -37,6 +37,7 @@ import { CollectionView, CollectionViewType } from './collections/CollectionView
 import "./collections/TreeView.scss";
 import { ComponentDecorations } from './ComponentDecorations';
 import { ContextMenu } from './ContextMenu';
+import { DashboardView } from './DashboardView';
 import { DictationOverlay } from './DictationOverlay';
 import { DocumentDecorations } from './DocumentDecorations';
 import { GestureOverlay } from './GestureOverlay';
@@ -660,12 +661,20 @@ export class MainView extends React.Component {
             {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
             {DocumentLinksButton.LinkEditorDocView ? <LinkMenu clearLinkEditor={action(() => DocumentLinksButton.LinkEditorDocView = undefined)} docView={DocumentLinksButton.LinkEditorDocView} /> : (null)}
             {LinkDocPreview.LinkInfo ? <LinkDocPreview {...LinkDocPreview.LinkInfo} /> : (null)}
-            <div style={{ position: "relative", display: LightboxView.LightboxDoc ? "none" : undefined, zIndex: 1999 }} >
-                <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} />
-            </div>
-            <GestureOverlay >
-                {this.mainDashboardArea}
-            </GestureOverlay>
+            
+            {((page:string) => {
+                switch (page) {
+                    case "dashboard":
+                    default:return <>
+                            <div style={{ position: "relative", display: LightboxView.LightboxDoc ? "none" : undefined, zIndex: 1999 }} >
+                                    <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} />
+                            </div> 
+                            <GestureOverlay> {this.mainDashboardArea}   </GestureOverlay>
+                        </>;
+                    case "home":  return <DashboardView/>;
+                } })(StrCast(Doc.UserDoc().activePage))
+            }
+            
             <PreviewCursor />
             <TaskCompletionBox />
             <ContextMenu />
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 18abcda72..ab5dc74c9 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -1,3 +1,4 @@
+import { docs } from "googleapis/build/src/apis/docs";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { computedFn } from "mobx-utils";
@@ -188,7 +189,6 @@ export class OverlayView extends React.Component {
                 offsetx = NumCast(d.x) - e.clientX;
                 offsety = NumCast(d.y) - e.clientY;
             };
-
             return <div className="overlayView-doc" ref={dref} key={d[Id]} onPointerDown={onPointerDown} style={{ top: d.type === 'presentation' ? 0 : undefined, width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.x}px, ${d.y}px)` }}>
                 <DocumentView
                     Document={d}
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index a790a0475..4119fb5ba 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -412,6 +412,8 @@ export class CollectionDockingView extends CollectionSubView() {
     }
 
     tabDestroyed = (tab: any) => {
+        Doc.AddDocToList(CurrentUserUtils.MyHeaderBarDoc, "data", tab.DashDoc);
+        Doc.AddDocToList(CurrentUserUtils.MyRecentlyClosed, "data", tab.DashDoc, undefined, true, true);
         const dview = CollectionDockingView.Instance.props.Document;
         const fieldKey = CollectionDockingView.Instance.props.fieldKey;
         Doc.RemoveDocFromList(dview, fieldKey, tab.DashDoc);
@@ -428,10 +430,10 @@ export class CollectionDockingView extends CollectionSubView() {
     stackCreated = (stack: any) => {
         stack.header?.element.on('mousedown', (e: any) => {
             if (e.target === stack.header?.element[0] && e.button === 2) {
-                const emptyPane = CurrentUserUtils.EmptyPane;
-                emptyPane["dragFactory-count"] = NumCast(emptyPane["dragFactory-count"]) + 1;
+                const dashboard= CurrentUserUtils.ActiveDashboard;
+                dashboard["pane-count"] = NumCast(dashboard["pane-count"]) + 1;
                 const docToAdd = Docs.Create.FreeformDocument([], {
-                    _width: this.props.PanelWidth(), _height: this.props.PanelHeight(), _backgroundGridShow: true, _fitWidth: true, title: `Untitled Tab ${NumCast(emptyPane["dragFactory-count"])}`,
+                    _width: this.props.PanelWidth(), _height: this.props.PanelHeight(), _backgroundGridShow: true, _fitWidth: true, title: `Untitled Tab ${NumCast(dashboard["pane-count"])}`,
                 });
                 this.props.Document.isShared && inheritParentAcls(this.props.Document, docToAdd);
                 CollectionDockingView.AddSplit(docToAdd, "", stack);
@@ -455,10 +457,10 @@ export class CollectionDockingView extends CollectionSubView() {
             .off('click') //unbind the current click handler
             .click(action(() => {
                 // stack.config.fixed = !stack.config.fixed;  // force the stack to have a fixed size
-                const emptyPane = CurrentUserUtils.EmptyPane;
-                emptyPane["dragFactory-count"] = NumCast(emptyPane["dragFactory-count"]) + 1;
+                const dashboard = CurrentUserUtils.ActiveDashboard;
+                dashboard["pane-count"] = NumCast(dashboard["pane-count"]) + 1;
                 const docToAdd = Docs.Create.FreeformDocument([], {
-                    _width: this.props.PanelWidth(), _height: this.props.PanelHeight(), _fitWidth: true, _backgroundGridShow: true, title: `Untitled Tab ${NumCast(emptyPane["dragFactory-count"])}`
+                    _width: this.props.PanelWidth(), _height: this.props.PanelHeight(), _fitWidth: true, _backgroundGridShow: true, title: `Untitled Tab ${NumCast(dashboard["pane-count"])}`
                 });
                 this.props.Document.isShared && inheritParentAcls(this.props.Document, docToAdd);
                 CollectionDockingView.AddSplit(docToAdd, "", stack);
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 2f002736d..73572299a 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -30,11 +30,10 @@
         width: 90%;
         margin: 5px;
         font-size: 11px;
-        background-color: $light-blue;
         color: $medium-blue;
         padding: 10px;
-        border-radius: 10px;
-        border: solid 2px $medium-blue;
+        border-radius: 5px;
+        border: solid .5px $medium-blue;
     }
 }
 
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 142013d1a..022b9fa24 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -115,20 +115,12 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                         }
                     }));
                 };
-
-                closeWrap.className = "lm_iconWrap";
-                closeWrap.id = "lm_closeWrap";
-                closeWrap.onclick = (e: MouseEvent) => {
-                    tab.header.parent.contentItem.remove();
-                    Doc.AddDocToList(CurrentUserUtils.MyHeaderBarDoc, "data", tab.DashDoc);
-                    Doc.AddDocToList(CurrentUserUtils.MyRecentlyClosed, "data", tab.DashDoc, undefined, true, true);
-                };
+                
                 const docIcon = <FontAwesomeIcon onPointerDown={dragBtnDown} icon={iconType} />;
-                const closeIcon = <FontAwesomeIcon icon={"times"} />;
+                const closeIcon = <FontAwesomeIcon icon={"eye"} />;
                 ReactDOM.render(docIcon, iconWrap);
                 ReactDOM.render(closeIcon, closeWrap);
                 tab.reactComponents = [iconWrap, closeWrap];
-                // tab.element[0].append(closeWrap);
                 tab.element[0].prepend(iconWrap);
                 tab._disposers.layerDisposer = reaction(() => ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }),
                     ({ layer, color }) => {
@@ -580,4 +572,4 @@ export class TabMinimapView extends React.Component<TabMinimapViewProps> {
                 </div>
             </div>;
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index f4d2d55d5..99f74b8a2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1500,15 +1500,22 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             }
         }
         if (oldDiv instanceof HTMLCanvasElement) {
-            const canvas = oldDiv;
-            const img = document.createElement('img'); // create a Image Element
-            img.src = canvas.toDataURL();   //image source
-            img.style.width = canvas.style.width;
-            img.style.height = canvas.style.height;
-            const newCan = newDiv as HTMLCanvasElement;
-            const parEle = newCan.parentElement as HTMLElement;
-            parEle.removeChild(newCan);
-            parEle.appendChild(img);
+            if (oldDiv.className === "collectionFreeFormView-grid") {
+                const newCan = newDiv as HTMLCanvasElement;
+                const parEle = newCan.parentElement as HTMLElement;
+                parEle.removeChild(newCan);
+                parEle.appendChild(document.createElement('div'))
+            } else {
+                const canvas = oldDiv;
+                const img = document.createElement('img'); // create a Image Element
+                img.src = canvas.toDataURL();   //image source
+                img.style.width = canvas.style.width;
+                img.style.height = canvas.style.height;
+                const newCan = newDiv as HTMLCanvasElement;
+                const parEle = newCan.parentElement as HTMLElement;
+                parEle.removeChild(newCan);
+                parEle.appendChild(img);
+            }
         }
     }
 
@@ -1516,15 +1523,23 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         this.layoutDoc[Id] + "-icon" + (new Date()).getTime(),
         this.props.docViewPath().lastElement().ContentDiv!,
         this.layoutDoc[WidthSym](), this.layoutDoc[HeightSym](), 
-        this.props.PanelWidth(), this.props.PanelHeight(), 0, 
+        this.props.PanelWidth(), this.props.PanelHeight(), 0, 1, false, "",
         (iconFile, nativeWidth, nativeHeight) => {
-                    this.dataDoc.icon = new ImageField(iconFile);
-                    this.dataDoc["icon-nativeWidth"] = nativeWidth;
-                    this.dataDoc["icon-nativeHeight"] = nativeHeight;
+            this.dataDoc.icon = new ImageField(iconFile);
+            this.dataDoc["icon-nativeWidth"] = nativeWidth;
+            this.dataDoc["icon-nativeHeight"] = nativeHeight;
         });
 
-    public static UpdateIcon(filename:string, docViewContent:HTMLElement, width: number, height: number, 
-        panelWidth:number, panelHeight: number, scrollTop:number, cb:(iconFile:string, nativeWidth:number, nativeHeight:number) => any) {
+    public static UpdateIcon(
+        filename:string, docViewContent:HTMLElement, 
+        width: number, height: number, 
+        panelWidth:number, panelHeight: number, 
+        scrollTop:number, 
+        realNativeHeight: number,
+        noSuffix: boolean,
+        replaceRootFilename: string| undefined,
+        cb:(iconFile:string, nativeWidth:number, nativeHeight:number) => any) 
+    {
         const newDiv = docViewContent.cloneNode(true) as HTMLDivElement;
         newDiv.style.width = width.toString();
         newDiv.style.height = height.toString();
@@ -1532,19 +1547,17 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const htmlString = new XMLSerializer().serializeToString(newDiv);
         const nativeWidth = width;
         const nativeHeight = height;
-        CreateImage(
+        return CreateImage(
             Utils.prepend(""),
             document.styleSheets,
             htmlString,
             nativeWidth,
             nativeWidth * panelHeight / panelWidth,
-            scrollTop
+            scrollTop * panelHeight  / realNativeHeight
         ).then
-            ((data_url: any) => {
-                VideoBox.convertDataUri(data_url, filename).then(
-                    returnedfilename => setTimeout(() => {
-                        cb(returnedfilename as string, nativeWidth, nativeHeight);
-                    }, 500));
+            (async (data_url: any) => {
+                const returnedFilename = await VideoBox.convertDataUri(data_url, filename, noSuffix, replaceRootFilename);
+                cb(returnedFilename as string, nativeWidth, nativeHeight);
             })
             .catch(function (error: any) {
                 console.error('oops, something went wrong!', error);
@@ -1773,7 +1786,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             isAnnotationOverlay={this.isAnnotationOverlay}>
             <div className="marqueeView-div" ref={this._marqueeRef} style={{ opacity: this.props.dontRenderDocuments ? 0 : undefined }}>
                 {this.layoutDoc._backgroundGridShow ?
-                    <CollectionFreeFormBackgroundGrid
+                    <div><CollectionFreeFormBackgroundGrid  // bcz : UGHH  don't know why, but if we don't wrap in a div, then PDF's don't render whenn taking snapshot of a dashboard and the background grid is on!!?
                         PanelWidth={this.props.PanelWidth}
                         PanelHeight={this.props.PanelHeight}
                         panX={this.panX}
@@ -1783,7 +1796,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         isAnnotationOverlay={this.isAnnotationOverlay}
                         cachedCenteringShiftX={this.cachedCenteringShiftX}
                         cachedCenteringShiftY={this.cachedCenteringShiftY}
-                    /> : (null)}
+                    /></div> : (null)}
                 <CollectionFreeFormViewPannableContents
                     isAnnotationOverlay={this.isAnnotationOverlay}
                     isAnnotationOverlayScrollable={this.props.isAnnotationOverlayScrollable}
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index c0a33a5e0..9b1cb1601 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -153,6 +153,7 @@ export class CollectionLinearView extends CollectionSubView() {
                 PanelWidth={nested ? doc[WidthSym] : this.dimension}
                 PanelHeight={nested || doc._height ? doc[HeightSym] : this.dimension}
                 renderDepth={this.props.renderDepth + 1}
+                dontRegisterView={BoolCast(this.rootDoc.childDontRegisterViews)}
                 focus={emptyFunction}
                 styleProvider={this.props.styleProvider}
                 docViewPath={returnEmptyDoclist}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2a518bb57..60d16f044 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -164,6 +164,9 @@ export interface DocumentViewProps extends DocumentViewSharedProps {
     hideResizeHandles?: boolean; // whether to suppress DocumentDecorations when this document is selected
     hideTitle?: boolean;  // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
     hideDecorationTitle?: boolean;  // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
+    hideDocumentButtonBar?: boolean;
+    hideOpenButton?: boolean;
+    hideDeleteButton?: boolean;
     treeViewDoc?: Doc;
     isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events
     isContentActive: () => boolean | undefined; // whether document contents should handle pointer events
@@ -761,7 +764,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             DocListCast(this.Document.links).length && appearanceItems.splice(0, 0, { description: `${this.layoutDoc.hideLinkButton ? "Show" : "Hide"} Link Button`, event: action(() => this.layoutDoc.hideLinkButton = !this.layoutDoc.hideLinkButton), icon: "eye" });
             !appearance && cm.addItem({ description: "UI Controls...", subitems: appearanceItems, icon: "compass" });
 
-            if (!Doc.IsSystem(this.rootDoc) && this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Tree) {
+            if (!Doc.IsSystem(this.rootDoc) && this.rootDoc._viewType !== CollectionViewType.Docking && this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Tree) {
                 !Doc.UserDoc().noviceMode && appearanceItems.splice(0, 0, { description: `${!this.layoutDoc._showAudio ? "Show" : "Hide"} Audio Button`, event: action(() => this.layoutDoc._showAudio = !this.layoutDoc._showAudio), icon: "microphone" });
                 const existingOnClick = cm.findByDescription("OnClick...");
                 const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : [];
@@ -831,10 +834,10 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
 
             const help = cm.findByDescription("Help...");
             const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
-            !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "add:right"), icon: "layer-group" });
-            helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument("/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }), "add:right"), icon: "keyboard" });
-            !Doc.UserDoc().novice && helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" });
-            !Doc.UserDoc().novice && helpItems.push({ description: "Print DataDoc in Console", event: () => console.log(this.props.Document[DataSym]), icon: "hand-point-right" });
+            helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "add:right"), icon: "layer-group" });
+            !Doc.UserDoc().noviceMode && helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument("/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }), "add:right"), icon: "keyboard" });
+            !Doc.UserDoc().noviceMode && helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" });
+            !Doc.UserDoc().noviceMode && helpItems.push({ description: "Print DataDoc in Console", event: () => console.log(this.props.Document[DataSym]), icon: "hand-point-right" });
             cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" });
         }
 
@@ -1201,6 +1204,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @observable public docView: DocumentViewInternal | undefined | null;
 
+    showContextMenu(pageX:number, pageY:number) { return this.docView?.onContextMenu(undefined, pageX, pageY); }
     get Document() { return this.props.Document; }
     get topMost() { return this.props.renderDepth === 0; }
     get rootDoc() { return this.docView?.rootDoc || this.Document; }
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index 28834a202..e3708d7b9 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -206,7 +206,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps>() {
             facetValues.strings.map(val => {
                 const num = val ? Number(val) : Number.NaN;
                 if (Number.isNaN(num)) {
-                    num && nonNumbers++;
+                    val && nonNumbers++;
                 } else {
                     minVal = Math.min(num, minVal);
                     maxVal = Math.max(num, maxVal);
diff --git a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
index db7dcb09d..bdf0f9d64 100644
--- a/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
+++ b/src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx
@@ -45,11 +45,9 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi
 
 
     _stack: CollectionStackingView | null | undefined;
-
-    // Collection stacking view for documents in the infowindow of a map marker
-    @computed get renderChildDocs() {
-        return;
-    }
+    childFitWidth = (doc:Doc) => doc.type === DocumentType.RTF;
+    addDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, "data", d), true as boolean);
+    removeDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, "data", d), true as boolean);
     render() {
         return <InfoWindow anchor={this.props.markerMap[this.props.place[Id]]} onCloseClick={this.handleInfoWindowClose} >
             <div className="mapbox-infowindow">
@@ -73,10 +71,10 @@ export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & Vi
                         rootSelected={returnFalse}
                         childHideResizeHandles={returnTrue}
                         childHideDecorationTitle={returnTrue}
-                        childFitWidth={doc => doc.type === DocumentType.RTF}
+                        childFitWidth={this.childFitWidth}
                         // childDocumentsActive={returnFalse}
-                        removeDocument={(doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, "data", d), true as boolean)}
-                        addDocument={(doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, "data", d), true as boolean)}
+                        removeDocument={this.removeDoc}
+                        addDocument={this.addDoc}
                         renderDepth={this.props.renderDepth + 1}
                         viewType={CollectionViewType.Stacking}
                         pointerEvents={returnAll}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index f2ca6c96e..4eb07fd8d 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -26,6 +26,7 @@ import { ImageBox } from './ImageBox';
 import "./PDFBox.scss";
 import { VideoBox } from './VideoBox';
 import React = require("react");
+import { CollectionFreeFormView } from '../collections/collectionFreeForm';
 
 @observer
 export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() {
@@ -147,34 +148,23 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
 
     updateIcon = () => {
-        return; // currently we render pdf icons as text labels
+        // currently we render pdf icons as text labels
         const docViewContent = this.props.docViewPath().lastElement().ContentDiv!;
-        const newDiv = docViewContent.cloneNode(true) as HTMLDivElement;
-        newDiv.style.width = (this.layoutDoc[WidthSym]()).toString();
-        newDiv.style.height = (this.layoutDoc[HeightSym]()).toString();
-        this.replaceCanvases(docViewContent, newDiv);
-        const htmlString = this._pdfViewer?._mainCont.current && new XMLSerializer().serializeToString(newDiv);
-        const nativeWidth = this.layoutDoc[WidthSym]();
-        const nativeHeight = this.layoutDoc[HeightSym]();
-
-        CreateImage(
-            "",
-            document.styleSheets,
-            htmlString,
-            nativeWidth,
-            nativeWidth * this.props.PanelHeight() / this.props.PanelWidth(),
-            NumCast(this.layoutDoc._scrollTop) * this.props.PanelHeight() / NumCast(this.rootDoc[this.fieldKey + "-nativeHeight"])
-        ).then
-            ((data_url: any) => {
-                VideoBox.convertDataUri(data_url, this.layoutDoc[Id] + "-icon" + (new Date()).getTime(), true, this.layoutDoc[Id] + "-icon").then(
-                    returnedfilename => setTimeout(action(() => {
-                        this.dataDoc.icon = new ImageField(returnedfilename);
-                        this.dataDoc["icon-nativeWidth"] = nativeWidth;
-                        this.dataDoc["icon-nativeHeight"] = nativeHeight;
-                    }), 500));
-            })
-            .catch(function (error: any) {
-                console.error('oops, something went wrong!', error);
+        const filename = this.layoutDoc[Id] + "-icon" + (new Date()).getTime();
+        this._pdfViewer?._mainCont.current && CollectionFreeFormView.UpdateIcon(
+            filename, docViewContent, 
+            this.layoutDoc[WidthSym](), this.layoutDoc[HeightSym](), 
+            this.props.PanelWidth(), this.props.PanelHeight(),  
+            NumCast(this.layoutDoc._scrollTop),
+            NumCast(this.rootDoc[this.fieldKey + "-nativeHeight"], 1), 
+            true,  
+            this.layoutDoc[Id] + "-icon",
+            (iconFile:string, nativeWidth:number, nativeHeight:number) => {
+                setTimeout(() => {
+                    this.dataDoc.icon = new ImageField(iconFile);
+                    this.dataDoc["icon-nativeWidth"] = nativeWidth;
+                    this.dataDoc["icon-nativeHeight"] = nativeHeight;
+                }, 500);
             });
     }
 
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 159271223..10393624b 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -16,47 +16,46 @@ import { Id } from "../../../../fields/FieldSymbols";
 @observer
 export class RecordingBox extends ViewBoxBaseComponent() {
 
-      public static LayoutString(fieldKey: string) { return FieldView.LayoutString(RecordingBox, fieldKey); }
-
-      private _ref: React.RefObject<HTMLDivElement> = React.createRef();
-
-      constructor(props: any) {
-            super(props);
-      }
-
-      componentDidMount() {
-            console.log("set native width and height")
-            Doc.SetNativeWidth(this.dataDoc, 1280);
-            Doc.SetNativeHeight(this.dataDoc, 720);
-      }
-
-      @observable result: Upload.FileInformation | undefined = undefined
-      @observable videoDuration: number | undefined = undefined
-
-      @action
-      setVideoDuration = (duration: number) => {
-            this.videoDuration = duration
-      }
-
-      @action
-      setResult = (info: Upload.FileInformation, trackScreen: boolean) => {
-            this.result = info
-            this.dataDoc.type = DocumentType.VID;
-            this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
-
-            this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
-            this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client);
-            this.dataDoc[this.fieldKey + "-recorded"] = true;
-            // stringify the presenation and store it
-            if (trackScreen) {
-                  this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(RecordingApi.Instance.clear());
-            }
-      }
-
-      render() {
-            // console.log("Proto[Is]: ", this.rootDoc.proto?.[Id])
-            return <div className="recordingBox" ref={this._ref}>
-                  {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={this.rootDoc.proto?.[Id]} />}
-            </div>;
-      }
+    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(RecordingBox, fieldKey); }
+
+    private _ref: React.RefObject<HTMLDivElement> = React.createRef();
+
+    constructor(props: any) {
+        super(props);
+    }
+
+    componentDidMount() {
+        console.log("set native width and height")
+        Doc.SetNativeWidth(this.dataDoc, 1280);
+        Doc.SetNativeHeight(this.dataDoc, 720);
+    }
+
+    @observable result: Upload.FileInformation | undefined = undefined
+    @observable videoDuration: number | undefined = undefined
+
+    @action
+    setVideoDuration = (duration: number) => {
+        this.videoDuration = duration
+    }
+
+    @action
+    setResult = (info: Upload.FileInformation, trackScreen: boolean) => {
+        this.result = info
+        this.dataDoc.type = DocumentType.VID;
+        this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
+
+        this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
+        this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client);
+        this.dataDoc[this.fieldKey + "-recorded"] = true;
+        // stringify the presenation and store it
+        if (trackScreen) {
+            this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(RecordingApi.Instance.clear());
+        }
+    }
+
+    render() {
+        return <div className="recordingBox" ref={this._ref}>
+            {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={Doc.GetProto(this.rootDoc)[Id]} />}
+        </div>;
+    }
 }
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 87716e9cc..b95335792 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -9,269 +9,274 @@ import { Networking } from '../../../Network';
 import { Upload } from '../../../../server/SharedMediaTypes';
 
 import { RecordingApi } from '../../../util/RecordingApi';
+import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
 
 interface MediaSegment {
-      videoChunks: any[],
-      endTime: number
+    videoChunks: any[],
+    endTime: number
 }
 
 interface IRecordingViewProps {
-      setResult: (info: Upload.FileInformation, trackScreen: boolean) => void
-      setDuration: (seconds: number) => void
-      id: string
+    setResult: (info: Upload.FileInformation, trackScreen: boolean) => void
+    setDuration: (seconds: number) => void
+    id: string
 }
 
 const MAXTIME = 100000;
 
 export function RecordingView(props: IRecordingViewProps) {
 
-      const [recording, setRecording] = useState(false);
-      const recordingTimerRef = useRef<number>(0);
-      const [recordingTimer, setRecordingTimer] = useState(0); // unit is 0.01 second
-      const [playing, setPlaying] = useState(false);
-      const [progress, setProgress] = useState(0);
-
-      const [videos, setVideos] = useState<MediaSegment[]>([]);
-      const videoRecorder = useRef<MediaRecorder | null>(null);
-      const videoElementRef = useRef<HTMLVideoElement | null>(null);
-
-      const [finished, setFinished] = useState<boolean>(false)
-      const [trackScreen, setTrackScreen] = useState<boolean>(true)
-
-
-
-      const DEFAULT_MEDIA_CONSTRAINTS = {
-            video: {
-                  width: 1280,
-                  height: 720,
-            },
-            audio: {
-                  echoCancellation: true,
-                  noiseSuppression: true,
-                  sampleRate: 44100
-            }
-      }
-
-      useEffect(() => {
-
-            if (finished) {
-                  props.setDuration(recordingTimer * 100)
-                  let allVideoChunks: any = []
-                  videos.forEach((vid) => {
-                        console.log(vid.videoChunks)
-                        allVideoChunks = allVideoChunks.concat(vid.videoChunks)
-                  })
-
-                  const videoFile = new File(allVideoChunks, "video.mkv", { type: allVideoChunks[0].type, lastModified: Date.now() });
-
-                  Networking.UploadFilesToServer(videoFile)
-                        .then((data) => {
-                              const result = data[0].result
-                              if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
-                                    props.setResult(result, trackScreen)
-                              } else {
-                                    alert("video conversion failed");
-                              }
-                        })
-
-            }
-
-
-      }, [finished])
-
-      useEffect(() => {
-            // check if the browser supports media devices on first load
-            if (!navigator.mediaDevices) {
-                  console.log('This browser does not support getUserMedia.')
-            }
-            console.log('This device has the correct media devices.')
-      }, [])
-
-      useEffect(() => {
-            // get access to the video element on every render
-            videoElementRef.current = document.getElementById(`video-${props.id}`) as HTMLVideoElement;
-      })
-
-      useEffect(() => {
-            let interval: any = null;
-            if (recording) {
-                  interval = setInterval(() => {
-                        setRecordingTimer(unit => unit + 1);
-                  }, 10);
-            } else if (!recording && recordingTimer !== 0) {
-                  clearInterval(interval);
-            }
-            return () => clearInterval(interval);
-      }, [recording])
-
-      useEffect(() => {
-            setVideoProgressHelper(recordingTimer)
-            recordingTimerRef.current = recordingTimer;
-      }, [recordingTimer])
-
-      const setVideoProgressHelper = (progress: number) => {
-            const newProgress = (progress / MAXTIME) * 100;
-            setProgress(newProgress)
-      }
-      const startShowingStream = async (mediaConstraints = DEFAULT_MEDIA_CONSTRAINTS) => {
-            const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints)
-
-            videoElementRef.current!.src = ""
-            videoElementRef.current!.srcObject = stream
-            videoElementRef.current!.muted = true
-
-            return stream
-      }
-
-      const record = async () => {
-            const stream = await startShowingStream();
-            videoRecorder.current = new MediaRecorder(stream)
-
-            // temporary chunks of video
-            let videoChunks: any = []
-
-            videoRecorder.current.ondataavailable = (event: any) => {
-                  if (event.data.size > 0) {
-                        videoChunks.push(event.data)
-                  }
-            }
-
-            videoRecorder.current.onstart = (event: any) => {
-                  setRecording(true);
-                  trackScreen && RecordingApi.Instance.start();
-            }
-
-            videoRecorder.current.onstop = () => {
-                  // if we have a last portion
-                  if (videoChunks.length > 1) {
-                        // append the current portion to the video pieces
-                        setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
-                  }
-
-                  // reset the temporary chunks
-                  videoChunks = []
-                  setRecording(false);
-                  setFinished(true);
-                  trackScreen && RecordingApi.Instance.pause();
+    const [recording, setRecording] = useState(false);
+    const recordingTimerRef = useRef<number>(0);
+    const [recordingTimer, setRecordingTimer] = useState(0); // unit is 0.01 second
+    const [playing, setPlaying] = useState(false);
+    const [progress, setProgress] = useState(0);
+
+    const [videos, setVideos] = useState<MediaSegment[]>([]);
+    const videoRecorder = useRef<MediaRecorder | null>(null);
+    const videoElementRef = useRef<HTMLVideoElement | null>(null);
+
+    const [finished, setFinished] = useState<boolean>(false)
+    const [trackScreen, setTrackScreen] = useState<boolean>(true)
+
+
+
+    const DEFAULT_MEDIA_CONSTRAINTS = {
+        video: {
+            width: 1280,
+            height: 720,
+        },
+        audio: {
+            echoCancellation: true,
+            noiseSuppression: true,
+            sampleRate: 44100
+        }
+    }
+
+    useEffect(() => {
+
+        if (finished) {
+            props.setDuration(recordingTimer * 100)
+            let allVideoChunks: any = []
+            videos.forEach((vid) => {
+                console.log(vid.videoChunks)
+                allVideoChunks = allVideoChunks.concat(vid.videoChunks)
+            })
+
+            const videoFile = new File(allVideoChunks, "video.mkv", { type: allVideoChunks[0].type, lastModified: Date.now() });
+
+            Networking.UploadFilesToServer(videoFile)
+                .then((data) => {
+                    const result = data[0].result
+                    if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
+                        props.setResult(result, trackScreen)
+                    } else {
+                        alert("video conversion failed");
+                    }
+                })
+
+        }
+
+
+    }, [finished])
+
+    useEffect(() => {
+        // check if the browser supports media devices on first load
+        if (!navigator.mediaDevices) {
+            console.log('This browser does not support getUserMedia.')
+        }
+        console.log('This device has the correct media devices.')
+    }, [])
+
+    useEffect(() => {
+        // get access to the video element on every render
+        videoElementRef.current = document.getElementById(`video-${props.id}`) as HTMLVideoElement;
+    })
+
+    useEffect(() => {
+        let interval: any = null;
+        if (recording) {
+            interval = setInterval(() => {
+                setRecordingTimer(unit => unit + 1);
+            }, 10);
+        } else if (!recording && recordingTimer !== 0) {
+            clearInterval(interval);
+        }
+        return () => clearInterval(interval);
+    }, [recording])
+
+    useEffect(() => {
+        setVideoProgressHelper(recordingTimer)
+        recordingTimerRef.current = recordingTimer;
+    }, [recordingTimer])
+
+    const setVideoProgressHelper = (progress: number) => {
+        const newProgress = (progress / MAXTIME) * 100;
+        setProgress(newProgress)
+    }
+    const startShowingStream = async (mediaConstraints = DEFAULT_MEDIA_CONSTRAINTS) => {
+        const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints)
+
+        videoElementRef.current!.src = ""
+        videoElementRef.current!.srcObject = stream
+        videoElementRef.current!.muted = true
+
+        return stream
+    }
+
+    const record = async () => {
+        const stream = await startShowingStream();
+        videoRecorder.current = new MediaRecorder(stream)
+
+        // temporary chunks of video
+        let videoChunks: any = []
+
+        videoRecorder.current.ondataavailable = (event: any) => {
+            if (event.data.size > 0) {
+                videoChunks.push(event.data)
             }
-
-            // recording paused
-            videoRecorder.current.onpause = (event: any) => {
-                  // append the current portion to the video pieces
-                  setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
-
-                  // reset the temporary chunks
-                  videoChunks = []
-                  setRecording(false);
-                  trackScreen && RecordingApi.Instance.pause();
-            }
-
-            videoRecorder.current.onresume = async (event: any) => {
-                  await startShowingStream();
-                  setRecording(true);
-                  trackScreen && RecordingApi.Instance.resume();
+        }
+
+        videoRecorder.current.onstart = (event: any) => {
+            setRecording(true);
+            trackScreen && RecordingApi.Instance.start();
+        }
+
+        videoRecorder.current.onstop = () => {
+            // if we have a last portion
+            if (videoChunks.length > 1) {
+                // append the current portion to the video pieces
+                setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
             }
 
-            videoRecorder.current.start(200)
-      }
-
-
-      const stop = () => {
-            if (videoRecorder.current) {
-                  if (videoRecorder.current.state !== "inactive") {
-                        videoRecorder.current.stop();
-                        // recorder.current.stream.getTracks().forEach((track: any) => track.stop())
-                  }
+            // reset the temporary chunks
+            videoChunks = []
+            setRecording(false);
+            setFinished(true);
+            trackScreen && RecordingApi.Instance.pause();
+        }
+
+        // recording paused
+        videoRecorder.current.onpause = (event: any) => {
+            // append the current portion to the video pieces
+            setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
+
+            // reset the temporary chunks
+            videoChunks = []
+            setRecording(false);
+            trackScreen && RecordingApi.Instance.pause();
+        }
+
+        videoRecorder.current.onresume = async (event: any) => {
+            await startShowingStream();
+            setRecording(true);
+            trackScreen && RecordingApi.Instance.resume();
+        }
+
+        videoRecorder.current.start(200)
+    }
+
+
+    const stop = () => {
+        if (videoRecorder.current) {
+            if (videoRecorder.current.state !== "inactive") {
+                videoRecorder.current.stop();
+                // recorder.current.stream.getTracks().forEach((track: any) => track.stop())
             }
-      }
+        }
+    }
 
-      const pause = () => {
-            if (videoRecorder.current) {
-                  if (videoRecorder.current.state === "recording") {
-                        videoRecorder.current.pause();
-                  }
+    const pause = () => {
+        if (videoRecorder.current) {
+            if (videoRecorder.current.state === "recording") {
+                videoRecorder.current.pause();
             }
-      }
+        }
+    }
 
-      const startOrResume = () => {
+    const startOrResume = (e: React.PointerEvent) => {
+        // the code to start or resume does not get triggered if we start dragging the button
+        setupMoveUpEvents({}, e, returnTrue, returnFalse, e => {
             if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
-                  record();
+                record();
             } else if (videoRecorder.current.state === "paused") {
-                  videoRecorder.current.resume();
+                videoRecorder.current.resume();
             }
-      }
-
-      const clearPrevious = () => {
-            const numVideos = videos.length
-            setRecordingTimer(numVideos == 1 ? 0 : videos[numVideos - 2].endTime)
-            setVideoProgressHelper(numVideos == 1 ? 0 : videos[numVideos - 2].endTime)
-            setVideos(videos.filter((_, idx) => idx !== numVideos - 1));
-      }
-
-      const handleOnTimeUpdate = () => {
-            if (playing) {
-                  setVideoProgressHelper(videoElementRef.current!.currentTime)
-            }
-      };
-
-      const millisecondToMinuteSecond = (milliseconds: number) => {
-            const toTwoDigit = (digit: number) => {
-                  return String(digit).length == 1 ? "0" + digit : digit
-            }
-            const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
-            const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
-            return toTwoDigit(minutes) + " : " + toTwoDigit(seconds);
-      }
-
-      return (
-            <div className="recording-container">
-                  <div className="video-wrapper">
-                        <video id={`video-${props.id}`}
-                              autoPlay
-                              muted
-                              onTimeUpdate={handleOnTimeUpdate}
-                        />
-                        <div className="recording-sign">
-                              <span className="dot" />
-                              <p className="timer">{millisecondToMinuteSecond(recordingTimer * 10)}</p>
+            return true; // cancels propagation to documentView to avoid selecting it.
+        }, false, false);
+    }
+
+    const clearPrevious = () => {
+        const numVideos = videos.length
+        setRecordingTimer(numVideos == 1 ? 0 : videos[numVideos - 2].endTime)
+        setVideoProgressHelper(numVideos == 1 ? 0 : videos[numVideos - 2].endTime)
+        setVideos(videos.filter((_, idx) => idx !== numVideos - 1));
+    }
+
+    const handleOnTimeUpdate = () => {
+        if (playing) {
+            setVideoProgressHelper(videoElementRef.current!.currentTime)
+        }
+    };
+
+    const millisecondToMinuteSecond = (milliseconds: number) => {
+        const toTwoDigit = (digit: number) => {
+            return String(digit).length == 1 ? "0" + digit : digit
+        }
+        const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
+        return toTwoDigit(minutes) + " : " + toTwoDigit(seconds);
+    }
+
+    return (
+        <div className="recording-container">
+            <div className="video-wrapper">
+                <video id={`video-${props.id}`}
+                    autoPlay
+                    muted
+                    onTimeUpdate={handleOnTimeUpdate}
+                />
+                <div className="recording-sign">
+                    <span className="dot" />
+                    <p className="timer">{millisecondToMinuteSecond(recordingTimer * 10)}</p>
+                </div>
+                <div className="controls">
+
+                    <div className="controls-inner-container">
+                        <div className="record-button-wrapper">
+                            {recording ?
+                                <button className="stop-button" onPointerDown={pause} /> :
+                                <button className="record-button" onPointerDown={startOrResume} />
+                            }
                         </div>
-                        <div className="controls">
-
-                              <div className="controls-inner-container">
-                                    <div className="record-button-wrapper">
-                                          {recording ?
-                                                <button className="stop-button" onClick={pause} /> :
-                                                <button className="record-button" onClick={startOrResume} />
-                                          }
-                                    </div>
 
-                                    {!recording && (videos.length > 0 ?
+                        {!recording && (videos.length > 0 ?
 
-                                          <div className="options-wrapper video-edit-wrapper">
-                                                {/* <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons" }}>
+                            <div className="options-wrapper video-edit-wrapper">
+                                {/* <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons" }}>
                                                       <MdBackspace onClick={clearPrevious} />
                                                 </IconContext.Provider> */}
-                                                <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}>
-                                                      <FaCheckCircle onClick={stop} />
-                                                </IconContext.Provider>
-                                          </div>
-
-                                          : <div className="options-wrapper track-screen-wrapper">
-                                                <label className="track-screen">
-                                                      <input type="checkbox" checked={trackScreen} onChange={(e) => { setTrackScreen(e.target.checked) }} />
-                                                      <span className="checkmark"></span>
-                                                      Track Screen
-                                                </label>
-                                          </div>)}
-
-                              </div>
-
-                              <ProgressBar
-                                    progress={progress}
-                                    marks={videos.map((elt) => elt.endTime / MAXTIME * 100)}
-                              // playSegment={playSegment}
-                              />
-                        </div>
-                  </div>
-            </div>)
+                                <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}>
+                                    <FaCheckCircle onClick={stop} />
+                                </IconContext.Provider>
+                            </div>
+
+                            : <div className="options-wrapper track-screen-wrapper">
+                                <label className="track-screen">
+                                    <input type="checkbox" checked={trackScreen} onChange={(e) => { setTrackScreen(e.target.checked) }} />
+                                    <span className="checkmark"></span>
+                                    Track Screen
+                                </label>
+                            </div>)}
+
+                    </div>
+
+                    <ProgressBar
+                        progress={progress}
+                        marks={videos.map((elt) => elt.endTime / MAXTIME * 100)}
+                    // playSegment={playSegment}
+                    />
+                </div>
+            </div>
+        </div>)
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index da65e7919..1dd6fef9b 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -336,13 +336,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (bestTarget)  this._navTimer = PresBox.navigateToDoc(bestTarget, activeItem, false);
     }
 
+    // navigates to the bestTarget document by making sure it is on screen,
+    // then it applies the view specs stored in activeItem to 
     @action
     static navigateToDoc(bestTarget:Doc, activeItem:Doc, jumpToDoc:boolean)  {
-        if (jumpToDoc) {
-            const srcContext = Cast(bestTarget.context, Doc, null) ?? Cast(Cast(bestTarget.annotationOn, Doc, null)?.context, Doc, null);
-            const openInTab = (doc: Doc, finished?: () => void) => CollectionDockingView.AddSplit(doc, "right");
-            DocumentManager.Instance.jumpToDocument(bestTarget, true, openInTab, srcContext ? [srcContext]:[], undefined, undefined, undefined,undefined, undefined, true, NumCast(activeItem.presZoom)); // documents open in new tab instead of on right    
-        }
         if (bestTarget.type === DocumentType.PDF || bestTarget.type === DocumentType.WEB || bestTarget.type === DocumentType.RTF || bestTarget._viewType === CollectionViewType.Stacking) {
             bestTarget._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 0.5s';
             bestTarget._scrollTop = activeItem.presPinViewScroll;
@@ -2581,5 +2578,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 }
 
 ScriptingGlobals.add(function navigateToDoc(bestTarget:Doc, activeItem:Doc) {
-    PresBox.navigateToDoc(bestTarget, activeItem, true);
+    const srcContext = Cast(bestTarget.context, Doc, null) ?? Cast(Cast(bestTarget.annotationOn, Doc, null)?.context, Doc, null);
+    const openInTab = (doc: Doc, finished?: () => void) => {CollectionDockingView.AddSplit(doc, "right"); finished?.(); };
+    DocumentManager.Instance.jumpToDocument(bestTarget, true, openInTab, srcContext ? [srcContext]:[], 
+        undefined, undefined, undefined, () => PresBox.navigateToDoc(bestTarget, activeItem, true), undefined, true, NumCast(activeItem.presZoom));
 });
\ No newline at end of file
diff --git a/src/client/views/nodes/trails/PresElementBox.scss b/src/client/views/nodes/trails/PresElementBox.scss
index 19644dd78..969f034a8 100644
--- a/src/client/views/nodes/trails/PresElementBox.scss
+++ b/src/client/views/nodes/trails/PresElementBox.scss
@@ -5,155 +5,157 @@ $slide-background: #d5dce2;
 $slide-active: #5B9FDD;
 
 .presItem-container {
-    cursor: grab;
-    display: grid;
-    grid-template-columns: 20px auto;
-    font-family: Roboto;
-    letter-spacing: normal;
-    position: relative;
-    pointer-events: all;
-    width: 100%;
-    height: 100%;
-    font-weight: 400;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    align-items: center;
+      cursor: grab;
+      display: flex;
+      grid-template-columns: 20px auto;
+      font-family: Roboto;
+      letter-spacing: normal;
+      position: relative;
+      pointer-events: all;
+      width: 100%;
+      height: 100%;
+      font-weight: 400;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      align-items: center;
 
-    .presItem-number {
-        margin-top: 3.5px;
-        font-size: 12px;
-        font-weight: 700;
-        text-align: center;
-        justify-self: center;
-        align-self: flex-start;
-        position: relative;
-        display: inline-block;
-        overflow: hidden;
-    }
+      //     .presItem-number {
+      //         margin-top: 3.5px;
+      //         font-size: 12px;
+      //         font-weight: 700;
+      //         text-align: center;
+      //         justify-self: center;
+      //         align-self: flex-start;
+      //         position: relative;
+      //         display: inline-block;
+      //         overflow: hidden;
+      //     }
 
 }
 
 .presItem-slide {
-    position: relative;
-    background-color: #d5dce2;
-    border-radius: 5px;
-    height: calc(100% - 7px);
-    width: 100%;
-    display: grid;
-    grid-template-rows: 16px 10px auto;
-    grid-template-columns: max-content max-content max-content max-content auto;
-
-    .presItem-name {
-        min-width: 20px;
-        z-index: 300;
-        top: 2px;
-        align-self: center;
-        font-size: 11px;
-        font-family: Roboto;
-        font-weight: 500;
-        position: relative;
-        padding-left: 10px;
-        padding-right: 10px;
-        letter-spacing: normal;
-        width: max-content;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: pre;
-    }
+      position: relative;
+      height: 100%;
+      width: 100%;
+      border-bottom: .5px solid grey;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      grid-template-rows: 16px 10px auto;
+      grid-template-columns: max-content max-content max-content max-content auto;
 
-    .presItem-docName {
-        min-width: 20px;
-        z-index: 300;
-        align-self: center;
-        font-size: 9px;
-        font-family: Roboto;
-        font-weight: 300;
-        position: relative;
-        padding-left: 10px;
-        padding-right: 10px;
-        letter-spacing: normal;
-        width: max-content;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: pre;
-        grid-row: 2;
-        grid-column: 1/6;
-    }
+      .presItem-name {
+            display: flex;
+            min-width: 20px;
+            z-index: 300;
+            top: 2px;
+            align-self: center;
+            font-size: 11px;
+            font-family: Roboto;
+            font-weight: 500;
+            position: relative;
+            padding-left: 10px;
+            padding-right: 10px;
+            letter-spacing: normal;
+            width: max-content;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: pre;
+      }
 
-    .presItem-time {
-        align-self: center;
-        position: relative;
-        padding-right: 10px;
-        top: 1px;
-        font-size: 10;
-        font-weight: 300;
-        font-family: Roboto;
-        z-index: 300;
-        letter-spacing: normal;
-    }
+      .presItem-docName {
+            min-width: 20px;
+            z-index: 300;
+            align-self: center;
+            font-size: 9px;
+            font-family: Roboto;
+            font-weight: 300;
+            position: relative;
+            padding-left: 10px;
+            padding-right: 10px;
+            letter-spacing: normal;
+            width: max-content;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: pre;
+            grid-row: 2;
+            grid-column: 1/6;
+      }
 
-    .presItem-embedded {
-        overflow: hidden;
-        grid-row: 3;
-        grid-column: 1/8;
-        position: relative;
-        display: flex;
-        width: auto;
-        justify-content: center;
-        margin: auto;
-        margin-bottom: 2px;
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
-    }
+      .presItem-time {
+            align-self: center;
+            position: relative;
+            padding-right: 10px;
+            top: 1px;
+            font-size: 10;
+            font-weight: 300;
+            font-family: Roboto;
+            z-index: 300;
+            letter-spacing: normal;
+      }
 
-    .presItem-embeddedMask {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        border-radius: 3px;
-        top: 0;
-        left: 0;
-        z-index: 1;
-        overflow: hidden;
-    }
+      .presItem-embedded {
+            overflow: hidden;
+            grid-row: 3;
+            grid-column: 1/8;
+            position: relative;
+            display: flex;
+            width: auto;
+            justify-content: center;
+            margin: auto;
+            margin-bottom: 2px;
+            border-bottom-left-radius: 5px;
+            border-bottom-right-radius: 5px;
+      }
 
+      .presItem-embeddedMask {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            border-radius: 3px;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            overflow: hidden;
+      }
 
-    .presItem-slideButtons {
-        display: flex;
-        grid-column: 7;
-        grid-row: 1/3;
-        width: max-content;
-        justify-self: right;
-        justify-content: flex-end;
 
-        .slideButton {
-            cursor: pointer;
-            position: relative;
-            border-radius: 100px;
-            z-index: 300;
-            width: 18px;
-            height: 18px;
+      .presItem-slideButtons {
             display: flex;
-            font-size: 12px;
-            justify-self: center;
-            align-self: center;
-            background-color: rgba(0, 0, 0, 0.5);
-            color: white;
-            justify-content: center;
-            align-items: center;
-            transition: 0.2s;
-            margin-right: 3px;
-        }
+            grid-column: 7;
+            grid-row: 1/3;
+            width: max-content;
+            justify-self: right;
+            justify-content: flex-end;
 
-        .slideButton:hover {
-            background-color: rgba(0, 0, 0, 1);
-            transform: scale(1.2);
-        }
-    }
+            .slideButton {
+                  cursor: pointer;
+                  position: relative;
+                  border-radius: 100px;
+                  z-index: 300;
+                  width: 18px;
+                  height: 18px;
+                  display: flex;
+                  font-size: 12px;
+                  justify-self: center;
+                  align-self: center;
+                  background-color: rgba(0, 0, 0, 0.5);
+                  color: white;
+                  justify-content: center;
+                  align-items: center;
+                  transition: 0.2s;
+                  margin-right: 3px;
+            }
+
+            .slideButton:hover {
+                  background-color: rgba(0, 0, 0, 1);
+                  transform: scale(1.2);
+            }
+      }
 }
 
 // .presItem-slide:hover {
@@ -237,38 +239,38 @@ $slide-active: #5B9FDD;
 }
 
 .presItem-multiDrag {
-    font-family: Roboto;
-    font-weight: 600;
-    color: white;
-    text-align: center;
-    justify-content: center;
-    align-content: center;
-    width: 100px;
-    height: 30px;
-    position: absolute;
-    background-color: $dark-blue;
-    z-index: 4000;
-    border-radius: 10px;
-    box-shadow: black 0.4vw 0.4vw 0.8vw;
-    line-height: 30px;
+      font-family: Roboto;
+      font-weight: 600;
+      color: white;
+      text-align: center;
+      justify-content: center;
+      align-content: center;
+      width: 100px;
+      height: 30px;
+      position: absolute;
+      background-color: $dark-blue;
+      z-index: 4000;
+      border-radius: 10px;
+      box-shadow: black 0.4vw 0.4vw 0.8vw;
+      line-height: 30px;
 }
 
 .presItem-miniSlide {
-    font-weight: 700;
-    font-size: 12;
-    grid-column: 1/8;
-    align-self: center;
-    justify-self: center;
-    background-color: #d5dce2;
-    width: 26px;
-    text-align: center;
-    height: 26px;
-    line-height: 28px;
-    border-radius: 100%;
+      font-weight: 700;
+      font-size: 12;
+      grid-column: 1/8;
+      align-self: center;
+      justify-self: center;
+      background-color: #d5dce2;
+      width: 26px;
+      text-align: center;
+      height: 26px;
+      line-height: 28px;
+      border-radius: 100%;
 }
 
 .presItem-miniSlide.active {
-    box-shadow: 0 0 0px 1.5px $dark-blue;
+      box-shadow: 0 0 0px 1.5px $dark-blue;
 }
 
 .expandButton {
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index ba0193e4b..50df00612 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -2,11 +2,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from "@material-ui/core";
 import { action, computed, IReactionDisposer, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, Opt } from "../../../../fields/Doc";
+import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../../fields/Doc";
 import { Id } from "../../../../fields/FieldSymbols";
 import { BoolCast, Cast, NumCast, StrCast } from "../../../../fields/Types";
 import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from "../../../../Utils";
-import { DocUtils } from "../../../documents/Documents";
+import { Docs, DocUtils } from "../../../documents/Documents";
 import { DocumentType } from "../../../documents/DocumentTypes";
 import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
 import { DocumentManager } from "../../../util/DocumentManager";
@@ -24,6 +24,7 @@ import { PresBox } from "./PresBox";
 import "./PresElementBox.scss";
 import { PresMovement } from "./PresEnums";
 import React = require("react");
+import { List } from "../../../../fields/List";
 /**
  * This class models the view a document added to presentation will have in the presentation.
  * It involves some functionality for its buttons and options.
@@ -259,11 +260,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @undoBatch
     removeItem = action((e: React.MouseEvent) => {
+      e.stopPropagation();
         this.props.removeDocument?.(this.rootDoc);
         if (PresBox.Instance._selectedArray.has(this.rootDoc)) {
             PresBox.Instance._selectedArray.delete(this.rootDoc);
         }
-        e.stopPropagation();
+        this.removeAllRecordingInOverlay() 
     });
 
     // set the value/title of the individual pres element
@@ -305,177 +307,208 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     }
 
-    @computed
-    get toolbarWidth(): number {
-        const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox);
-        let width: number = NumCast(this.presBox._width);
-        if (presBoxDocView) width = presBoxDocView.props.PanelWidth();
-        if (width === 0) width = 300;
-        return width;
-    }
+      @computed get recordingIsInOverlay() {
+            let isInOverlay = false
+            DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => {
+                  if (doc.slides === this.rootDoc) {
+                        isInOverlay = true
+                        return
+                  }
+            })
+            return isInOverlay
+      }
 
-    @computed get mainItem() {
-        const isSelected: boolean = PresBox.Instance._selectedArray.has(this.rootDoc);
-        const toolbarWidth: number = this.toolbarWidth;
-        const showMore: boolean = this.toolbarWidth >= 300;
-        const miniView: boolean = this.toolbarWidth <= 110;
-        const presBox: Doc = this.presBox; //presBox
-        const presBoxColor: string = StrCast(presBox._backgroundColor);
-        const presColorBool: boolean = presBoxColor ? (presBoxColor !== Colors.WHITE && presBoxColor !== "transparent") : false;
-        const targetDoc: Doc = this.targetDoc;
-        const activeItem: Doc = this.rootDoc;
-        const isGroup: boolean = BoolCast(targetDoc._isGroup);
-        return (
-            <div className={`presItem-container`}
-                key={this.props.Document[Id] + this.indexInPres}
-                ref={this._itemRef}
-                style={{
-                    opacity: this._dragging ? 0.3 : 1
-                }}
-                onClick={e => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    PresBox.Instance.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
-                }}
-                onDoubleClick={action(e => {
-                    if (isGroup) {
-                        this.rootDoc.presExpandGroup = !this.rootDoc.presExpandGroup;
-                    } else {
-                        this.toggleProperties();
-                        PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true);
-                    }
-                })}
-                onPointerOver={this.onPointerOver}
-                onPointerLeave={this.onPointerLeave}
-                onPointerDown={this.headerDown}
-                onPointerUp={this.headerUp}
-            >
-                {miniView ?
-                    // when width is LESS than 110 px 
-                    <div className={`presItem-miniSlide ${isSelected ? "active" : ""}`} ref={miniView ? this._dragRef : null}>
-                        {`${this.indexInPres + 1}.`}
-                    </div>
-                    :
-                    // when width is MORE than 110 px 
-                    <div className="presItem-number">
-                        {`${this.indexInPres + 1}.`}
-                    </div>}
-                {isGroup ?
-                    <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "activeGroup" : "group"}`}
+      removeAllRecordingInOverlay = () => {
+            DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => {
+                  if (doc.slides === this.rootDoc) {
+                        Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc);
+                  }
+            })
+      }
+
+      @undoBatch
+      @action
+      hideRecording = (e: React.MouseEvent) => {
+            e.stopPropagation()
+            this.removeAllRecordingInOverlay()
+      }
+
+      @undoBatch
+      @action
+      showRecording = (activeItem: Doc) => {
+            this.removeAllRecordingInOverlay()
+            if (activeItem.recording) {
+                  // if we already have an existing recording
+                  Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, Cast(activeItem.recording, Doc, null));
+
+            }
+      }
+
+      @undoBatch
+      @action
+      startRecording = (activeItem: Doc) => {
+            // Remove every recording that already exists in overlay view
+            DocListCast((Doc.UserDoc().myOverlayDocs as Doc).data).forEach((doc) => {
+                  if (doc.slides !== null) {
+                        Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocs as Doc), undefined, doc);
+                  }
+            })
+
+            if (activeItem.recording) {
+                  // if we already have an existing recording
+                  Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, Cast(activeItem.recording, Doc, null));
+
+            } else {
+                  // if we dont have any recording
+                  const recording = Docs.Create.WebCamDocument("", {
+                        _width: 400, _height: 200,
+                        // hideDocumentButtonBar: true,
+                        hideDecorationTitle: true,
+                        hideOpenButton: true,
+                        // hideDeleteButton: true,
+                        cloneFieldFilter: new List<string>(["system"])
+                  });
+
+                  // attach the recording to the slide, and attach the slide to the recording
+                  recording.slides = activeItem
+                  activeItem.recording = recording
+
+                  // make recording box appear in the bottom right corner of the screen
+                  recording.x = window.innerWidth - recording[WidthSym]() - 20;
+                  recording.y = window.innerHeight - recording[HeightSym]() - 20;
+                  Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, recording);
+            }
+      }
+
+      @computed
+      get toolbarWidth(): number {
+            const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox);
+            let width: number = NumCast(this.presBox._width);
+            if (presBoxDocView) width = presBoxDocView.props.PanelWidth();
+            if (width === 0) width = 300;
+            return width;
+      }
+
+      @computed get mainItem() {
+            const isSelected: boolean = PresBox.Instance?._selectedArray.has(this.rootDoc);
+            const toolbarWidth: number = this.toolbarWidth;
+            const showMore: boolean = this.toolbarWidth >= 300;
+            const miniView: boolean = this.toolbarWidth <= 110;
+            const presBox: Doc = this.presBox; //presBox
+            const presBoxColor: string = StrCast(presBox._backgroundColor);
+            const presColorBool: boolean = presBoxColor ? (presBoxColor !== Colors.WHITE && presBoxColor !== "transparent") : false;
+            const targetDoc: Doc = this.targetDoc;
+            const activeItem: Doc = this.rootDoc;
+            return (
+                  <div className={`presItem-container`}
+                        key={this.props.Document[Id] + this.indexInPres}
+                        ref={this._itemRef}
                         style={{
-                            backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
-                            boxShadow: presBoxColor && presBoxColor !== "white" && presBoxColor !== "transparent" ? isSelected ? "0 0 0px 1.5px" + presBoxColor : undefined : undefined
-                        }}>
-                        <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105, cursor: isSelected ? 'text' : 'grab' }}>
-                            <EditableView
-                                ref={this._titleRef}
-                                editing={!isSelected ? false : undefined}
-                                contents={activeItem.title}
-                                overflow={'ellipsis'}
-                                GetValue={() => StrCast(activeItem.title)}
-                                SetValue={this.onSetValue}
-                            />
-                        </div>
-                        <div className={"presItem-slideButtons"}>
-                            <Tooltip title={<><div className="dash-tooltip">{"Update view"}</div></>}>
-                                <div className="slideButton"
-                                    onClick={() => this.updateView(targetDoc, activeItem)}
-                                    style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
-                            </Tooltip>
-                            {this.indexInPres === 0 ? (null) : <Tooltip title={<><div className="dash-tooltip">{activeItem.groupWithUp ? "Ungroup" : "Group with up"}</div></>}>
-                                <div className="slideButton"
-                                    onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp}
-                                    style={{
-                                        zIndex: 1000 - this.indexInPres,
-                                        fontWeight: 700,
-                                        backgroundColor: activeItem.groupWithUp ? presColorBool ? presBoxColor : Colors.MEDIUM_BLUE : undefined,
-                                        height: activeItem.groupWithUp ? 53 : 18,
-                                        transform: activeItem.groupWithUp ? "translate(0, -17px)" : undefined
-                                    }}>
-                                    <div style={{ transform: activeItem.groupWithUp ? "rotate(180deg) translate(0, -17.5px)" : "rotate(0deg)" }}>
-                                        <FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} />
-                                    </div>
-                                </div>
-                            </Tooltip>}
-                            <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
-                                <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} />
-                            </div></Tooltip>
-                            <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
-                                className={"slideButton"}
-                                onClick={this.removeItem}>
-                                <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
-                            </div></Tooltip>
-                            <div className="group"></div>
-                        </div>
-                        <div className="presItem-groupSlideContainer" style={{ top: 28, height: 'calc(100% - 28px)' }}>
-                            {this.rootDoc.presExpandGroup ? this.renderGroupSlides : (null)}
-                        </div>
-                        <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div>
-                        <div className="expandButton"
-                            onClick={e => {
-                                if (isGroup) {
-                                    this.rootDoc.presExpandGroup = !this.rootDoc.presExpandGroup;
-                                }
-                            }}
-                        >
-                            <FontAwesomeIcon icon={"caret-down"} style={{ transform: this.rootDoc.presExpandGroup ? "rotate(180deg)" : "rotate(0deg)" }} />
-                        </div>
-                    </div>
-                    : (null)}
-                {miniView || isGroup ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}
-                    style={{
-                        backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
-                        boxShadow: presBoxColor && presBoxColor !== "white" && presBoxColor !== "transparent" ? isSelected ? "0 0 0px 1.5px" + presBoxColor : undefined : undefined
-                    }}>
-                    <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - (this.presBox._viewType === CollectionViewType.Stacking ? 195 : 220)) : toolbarWidth - (this.presBox._viewType === CollectionViewType.Stacking ? 105 : 145), cursor: isSelected ? 'text' : 'grab' }}>
-                        <EditableView
-                            ref={this._titleRef}
-                            editing={!isSelected ? false : undefined}
-                            contents={activeItem.title}
-                            overflow={'ellipsis'}
-                            GetValue={() => StrCast(activeItem.title)}
-                            SetValue={this.onSetValue}
-                        />
-                    </div>
-                    <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip>
-                    <div className={"presItem-slideButtons"}>
-                        <Tooltip title={<><div className="dash-tooltip">{"Update view"}</div></>}>
-                            <div className="slideButton"
-                                onClick={() => this.updateView(targetDoc, activeItem)}
-                                style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
-                        </Tooltip>
-                        {this.indexInPres === 0 ? (null) : <Tooltip title={<><div className="dash-tooltip">{activeItem.groupWithUp ? "Ungroup" : "Group with up"}</div></>}>
-                            <div className="slideButton"
-                                onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp}
-                                style={{
-                                    zIndex: 1000 - this.indexInPres,
-                                    fontWeight: 700,
-                                    backgroundColor: activeItem.groupWithUp ? presColorBool ? presBoxColor : Colors.MEDIUM_BLUE : undefined,
-                                    height: activeItem.groupWithUp ? 53 : 18,
-                                    transform: activeItem.groupWithUp ? "translate(0, -17px)" : undefined
-                                }}>
-                                <div style={{ transform: activeItem.groupWithUp ? "rotate(180deg) translate(0, -17.5px)" : "rotate(0deg)" }}>
-                                    <FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} />
-                                </div>
-                            </div>
-                        </Tooltip>}
-                        <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
-                            <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} />
-                        </div></Tooltip>
-                        <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
-                            className={"slideButton"}
-                            onClick={this.removeItem}>
-                            <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
-                        </div></Tooltip>
-                    </div>
-                    <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div>
-                    {this.renderEmbeddedInline}
-                </div>}
-            </div >);
-    }
+                              backgroundColor: presColorBool ? isSelected ? "rgba(250,250,250,0.3)" : "transparent" : isSelected ? Colors.LIGHT_BLUE : "transparent",
+                              opacity: this._dragging ? 0.3 : 1
+                        }}
+                        onClick={e => {
+                              e.stopPropagation();
+                              e.preventDefault();
+                              PresBox.Instance.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
+                              this.showRecording(activeItem);
+                        }}
+                        onDoubleClick={action(e => {
+                              this.toggleProperties();
+                              PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true);
+                        })}
+                        onPointerOver={this.onPointerOver}
+                        onPointerLeave={this.onPointerLeave}
+                        onPointerDown={this.headerDown}
+                        onPointerUp={this.headerUp}
+                  >
+                        {/* {miniView ?
+                              // when width is LESS than 110 px 
+                              <div className={`presItem-miniSlide ${isSelected ? "active" : ""}`} ref={miniView ? this._dragRef : null}>
+                                    {`${this.indexInPres + 1}.`}
+                              </div>
+                              :
+                              // when width is MORE than 110 px 
+                              <div className="presItem-number">
+                                    {`${this.indexInPres + 1}.`}
+                              </div>} */}
+                        {/* <div className="presItem-number">
+                              {`${this.indexInPres + 1}.`}
+                        </div> */}
+                        {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}
+                              style={{
+                                    backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
+                                    boxShadow: presBoxColor && presBoxColor !== "white" && presBoxColor !== "transparent" ? isSelected ? "0 0 0px 1.5px" + presBoxColor : undefined : undefined
+                              }}>
+                              <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105, cursor: isSelected ? 'text' : 'grab' }}>
+                                    <div>{`${this.indexInPres + 1}.  `}</div>
+                                    <EditableView
+                                          ref={this._titleRef}
+                                          editing={!isSelected ? false : undefined}
+                                          contents={activeItem.title}
+                                          overflow={'ellipsis'}
+                                          GetValue={() => StrCast(activeItem.title)}
+                                          SetValue={this.onSetValue}
+                                    />
+                              </div>
+                              {/* <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> */}
+                              {/* <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> */}
+                              <div className={"presItem-slideButtons"}>
+                                    <Tooltip title={<><div className="dash-tooltip">{"Update view"}</div></>}>
+                                          <div className="slideButton"
+                                                onClick={() => this.updateView(targetDoc, activeItem)}
+                                                style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
+                                    </Tooltip>
 
-    render() {
-        return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : this.mainItem;
-    }
+                                    {this.recordingIsInOverlay ?
+                                          <Tooltip title={<><div className="dash-tooltip">{"Hide Recording"}</div></>}>
+                                                <div className="slideButton"
+                                                      onClick={this.hideRecording}
+                                                      style={{ fontWeight: 700 }}>
+                                                      <FontAwesomeIcon icon={"video-slash"} onPointerDown={e => e.stopPropagation()} />
+                                                </div>
+                                          </Tooltip> :
+                                          <Tooltip title={<><div className="dash-tooltip">{"Start recording"}</div></>}>
+                                                <div className="slideButton"
+                                                      onClick={() => this.startRecording(activeItem)}
+                                                      style={{ fontWeight: 700 }}>
+                                                      <FontAwesomeIcon icon={"video"} onPointerDown={e => e.stopPropagation()} />
+                                                </div>
+                                          </Tooltip>
+                                    }
+
+
+                                    {/* {this.indexInPres === 0 ? (null) : <Tooltip title={<><div className="dash-tooltip">{activeItem.groupWithUp ? "Ungroup" : "Group with up"}</div></>}>
+                                          <div className="slideButton"
+                                                onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp}
+                                                style={{
+                                                      zIndex: 1000 - this.indexInPres,
+                                                      fontWeight: 700,
+                                                      backgroundColor: activeItem.groupWithUp ? presColorBool ? presBoxColor : Colors.MEDIUM_BLUE : undefined,
+                                                      height: activeItem.groupWithUp ? 53 : 18,
+                                                      transform: activeItem.groupWithUp ? "translate(0, -17px)" : undefined
+                                                }}>
+                                                <div style={{ transform: activeItem.groupWithUp ? "rotate(180deg) translate(0, -17.5px)" : "rotate(0deg)" }}>
+                                                      <FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} />
+                                                </div>
+                                          </div>
+                                    </Tooltip>} */}
+                                <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
+                                    <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} />
+                                </div></Tooltip>
+                                    <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
+                                          className={"slideButton"}
+                                          onClick={this.removeItem}>
+                                          <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
+                                    </div></Tooltip>
+                              </div>
+                              {/* <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 195) : toolbarWidth - 105 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div> */}
+                              {this.renderEmbeddedInline}
+                        </div>}
+                  </div >);
+      }
+
+      render() {
+            return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : this.mainItem;
+      }
 }
\ No newline at end of file
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index 923f1892e..c5b340514 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -1,29 +1,44 @@
 @import "../global/globalCssVariables";
 
+
 .topbar-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    position: relative;
-    font-size: 10px;
-    line-height: 1;
-    overflow-y: auto;
-    overflow-x: visible;
-    background: $dark-gray;
-    overflow: visible;
-    z-index: 1000;
-
-    .topbar-bar {
-        height: $topbar-height;
-        display: grid;
-        grid-auto-columns: 33.3% 33.3% 33.3%;
-        align-items: center;
-        background-color: $dark-gray;
-
-        .topBar-icon {
+      display: flex;
+      flex-direction: column;
+      font-size: 10px;
+      line-height: 1;
+      overflow-y: auto;
+      overflow-x: visible;
+      background: $dark-gray;
+      overflow: visible;
+      z-index: 1000;
+      height: $topbar-height;
+      background-color: $dark-gray;
+
+      .topbar-inner-container {
+            display: flex;
+            flex-direction: row;
+            position: relative;
+            display: grid;
+            grid-auto-columns: 33.3% 33.3% 33.3%;
+            align-items: center;
+
+            // &:first-child {
+            //       height: 20px;
+            // }
+      }
+
+      .topbar-button-text {
+            color: $white;
+            padding: 10px;
+            size: 15;
+
+            &:hover {
+                  font-weight: 500;
+            }
+      }
+
+      .topbar-button-icon {
             cursor: pointer;
-            font-size: 12.5px;
-            font-family: 'Roboto';
             width: fit-content;
             display: flex;
             justify-content: center;
@@ -31,21 +46,22 @@
             align-items: center;
             justify-self: center;
             align-self: center;
-            border-radius: $standard-border-radius;
             padding: 5px;
             transition: linear 0.2s;
-            color: $black;
-            background-color: $light-gray;
+            color: $white;
 
             &:hover {
-                background-color: darken($color: $light-gray, $amount: 20);
+                  background-color: darken($color: $light-gray, $amount: 20);
             }
-        }
+      }
 
+      .topbar-title {
+            color: $white;
+            font-size: 17;
+            font-weight: 500;
+      }
 
-
-
-        .topbar-center {
+      .topbar-center {
             grid-column: 2;
             display: inline-flex;
             justify-content: center;
@@ -53,42 +69,23 @@
             gap: 5px;
 
             .topbar-dashboards {
-                display: flex;
-                flex-direction: row;
-                gap: 5px;
-            }
-
-            .topbar-lozenge-dashboard {
-                display: flex;
-
-
-
-                .topbar-dashSelect {
-                    border: none;
-                    background-color: $dark-gray;
-                    color: $white;
-                    font-family: 'Roboto';
-                    font-size: 17;
-                    font-weight: 500;
-
-                    &:hover {
-                        cursor: pointer;
-                    }
-                }
+                  display: flex;
+                  flex-direction: row;
+                  gap: 5px;
             }
-        }
+      }
 
 
-        .topbar-right {
+      .topbar-right {
             grid-column: 3;
             position: relative;
             display: flex;
             justify-content: flex-end;
             gap: 5px;
             margin-right: 5px;
-        }
+      }
 
-        .topbar-left {
+      .topbar-left {
             grid-column: 1;
             color: black;
             font-family: 'Roboto';
@@ -98,123 +95,122 @@
             gap: 5px;
 
             .topBar-icon:hover {
-                background-color: $close-red;
+                  background-color: $close-red;
             }
 
             .topbar-lozenge-user,
             .topbar-lozenge {
-                height: 23;
-                font-size: 12;
-                color: white;
-                font-family: 'Roboto';
-                font-weight: 400;
-                padding: 4px;
-                align-self: center;
-                margin-left: 7px;
-                display: flex;
-                align-items: center;
-
-                .topbar-dashSelect {
-                    border: none;
-                    background-color: transparent;
-                    color: black;
-                    font-family: 'Roboto';
-                    font-size: 17;
-                    font-weight: 500;
-
-                    &:hover {
-                        cursor: pointer;
-                    }
-                }
+                  height: 23;
+                  font-size: 12;
+                  color: white;
+                  font-family: 'Roboto';
+                  font-weight: 400;
+                  padding: 4px;
+                  align-self: center;
+                  margin-left: 7px;
+                  display: flex;
+                  align-items: center;
+
+                  .topbar-dashSelect {
+                        border: none;
+                        background-color: transparent;
+                        color: black;
+                        font-family: 'Roboto';
+                        font-size: 17;
+                        font-weight: 500;
+
+                        &:hover {
+                              cursor: pointer;
+                        }
+                  }
             }
 
             .topbar-logoff {
-                border-radius: 3px;
-                background: olivedrab;
-                color: white;
-                display: none;
-                margin-left: 5px;
-                padding: 1px 2px 1px 2px;
-                cursor: pointer;
+                  border-radius: 3px;
+                  background: olivedrab;
+                  color: white;
+                  display: none;
+                  margin-left: 5px;
+                  padding: 1px 2px 1px 2px;
+                  cursor: pointer;
             }
 
             .topbar-logoff {
-                background: red;
+                  background: red;
             }
 
             .topbar-lozenge-user:hover {
-                .topbar-logoff {
-                    display: inline-block;
-                }
+                  .topbar-logoff {
+                        display: inline-block;
+                  }
             }
-        }
+      }
 
-        .topbar-barChild {
+      .topbar-barChild {
 
             &.topbar-collection {
-                flex: 0 1 auto;
-                margin-left: 2px;
-                margin-right: 2px
+                  flex: 0 1 auto;
+                  margin-left: 2px;
+                  margin-right: 2px
             }
 
             &.topbar-input {
-                margin: 5px;
-                border-radius: 20px;
-                border: $dark-gray;
-                display: block;
-                width: 130px;
-                -webkit-transition: width 0.4s;
-                transition: width 0.4s;
-                /* align-self: stretch; */
-                outline: none;
-
-                &:focus {
-                    width: 500px;
-                    outline: none;
-                }
+                  margin: 5px;
+                  border-radius: 20px;
+                  border: $dark-gray;
+                  display: block;
+                  width: 130px;
+                  -webkit-transition: width 0.4s;
+                  transition: width 0.4s;
+                  /* align-self: stretch; */
+                  outline: none;
+
+                  &:focus {
+                        width: 500px;
+                        outline: none;
+                  }
             }
 
             &.topbar-filter {
-                align-self: stretch;
+                  align-self: stretch;
 
-                button {
-                    transform: none;
-
-                    &:hover {
+                  button {
                         transform: none;
-                    }
-                }
+
+                        &:hover {
+                              transform: none;
+                        }
+                  }
             }
 
             &.topbar-submit {
-                margin-left: 2px;
-                margin-right: 2px
+                  margin-left: 2px;
+                  margin-right: 2px
             }
 
             &.topbar-close {
-                color: $white;
-                max-height: $topbar-height;
+                  color: $white;
+                  max-height: $topbar-height;
             }
-        }
-    }
+      }
 }
 
 .topbar-results {
-    display: flex;
-    flex-direction: column;
-    top: 300px;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: visible;
-
-    .no-result {
-        width: 500px;
-        background: $light-gray;
-        padding: 10px;
-        height: 50px;
-        text-transform: uppercase;
-        text-align: left;
-        font-weight: bold;
-    }
+      display: flex;
+      flex-direction: column;
+      top: 300px;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: visible;
+
+      .no-result {
+            width: 500px;
+            background: $light-gray;
+            padding: 10px;
+            height: 50px;
+            text-transform: uppercase;
+            text-align: left;
+            font-weight: bold;
+      }
 }
\ No newline at end of file
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index e486bcb52..0db3950a2 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -3,13 +3,18 @@ import { Tooltip } from "@material-ui/core";
 import { action } from "mobx";
 import { observer } from "mobx-react";
 import * as React from 'react';
-import { Doc, DocListCast } from '../../../fields/Doc';
+import { AclAdmin, Doc, DocListCast } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
-import { StrCast } from '../../../fields/Types';
+import { Cast, StrCast } from '../../../fields/Types';
+import { GetEffectiveAcl } from "../../../fields/util";
 import { Utils } from '../../../Utils';
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
+import { DocumentManager } from "../../util/DocumentManager";
+import { SelectionManager } from "../../util/SelectionManager";
 import { SettingsManager } from "../../util/SettingsManager";
+import { SharingManager } from "../../util/SharingManager";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
+import { ContextMenu } from "../ContextMenu";
 import { Borders, Colors } from "../global/globalEnums";
 import { MainView } from "../MainView";
 import "./TopBar.scss";
@@ -20,64 +25,63 @@ import "./TopBar.scss";
  */
 @observer
 export class TopBar extends React.Component {
-    render() {
-        const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
-        return (
-            //TODO:glr Add support for light / dark mode
-            <div style={{ pointerEvents: "all" }} className="topbar-container">
-                <div className="topbar-bar" style={{ background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }}>
-                    <div className="topbar-left">
-                        <div className="topbar-lozenge-user">
-                            {`${Doc.CurrentUserEmail}`}
+      navigateToHome = () => {
+            CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => {
+                Doc.UserDoc().activePage = "home";
+                CurrentUserUtils.closeActiveDashboard(); // bcz: if we do this, we need some other way to keep track, for user convenience, of the last dashboard in use
+            });
+      }
+      render() {
+            const activeDashboard = Cast(Doc.UserDoc().activeDashboard, Doc, null)
+            return (
+                  //TODO:glr Add support for light / dark mode
+                  <div style={{ pointerEvents: "all", background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }} className="topbar-container">
+                        <div className="topbar-inner-container">
+                              <div className="topbar-left">
+                                    {activeDashboard ? <div className="topbar-button-text" onClick={e => {
+                                    ContextMenu.Instance.addItem({ description: "Logout", event: () => window.location.assign(Utils.prepend("/logout")), icon: "edit" });
+                                    ContextMenu.Instance.displayMenu(e.clientX +5, e.clientY + 10);
+                                    }}>{Doc.CurrentUserEmail}</div> : (null)}
+                              </div>
+                              <div className="topbar-center" >
+                                    <div className="topbar-title" onClick={() => SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}>
+                                          {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
+                                    </div>
+                                    <div className="topbar-button-icon" onClick={e => {
+                                        const dashView = DocumentManager.Instance.getDocumentView(activeDashboard);
+                                        ContextMenu.Instance.addItem({ description: "Open Dashboard View", event: this.navigateToHome, icon: "edit" });
+                                        ContextMenu.Instance.addItem({ description: "Snapshot Dashboard", event: async () => {
+                                            const batch = UndoManager.StartBatch("snapshot");
+                                            await CurrentUserUtils.snapshotDashboard(Doc.UserDoc());
+                                            batch.end();
+                                        }, icon: "edit" });
+                                        dashView?.showContextMenu(e.clientX+20, e.clientY+30);
+                                    }}>
+                                    <FontAwesomeIcon color="white" size="lg" icon="bars" />
+                                    </div>
+                                    <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
+                                        <div className="topbar-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}>
+                                            <FontAwesomeIcon color={MainView.Instance._exploreMode ? "red":"white"} icon="eye"  size="lg" />
+                                        </div>
+                                    </Tooltip>
+                              </div>
+                              <div className="topbar-right" >
+                                    <div className="topbar-button-text" onClick={() => {SharingManager.Instance.open(undefined, activeDashboard)}}>
+                                        {/* TODO: if this is my dashboard, display share
+                                        if this is a shared dashboard, display "view original or view annotated" */}
+                                        { Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author ===  Doc.CurrentUserEmail ?  "Share": "view original" }
+                                    </div>
+                                    <div className="topbar-button-icon" onClick={() => window.open(
+                                          "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
+                                          <FontAwesomeIcon icon="question-circle" />
+                                    </div>
+                                    <div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}>
+                                          <FontAwesomeIcon icon="cog" />
+                                    </div>
+                              </div>
                         </div>
-                        <div className="topbar-icon" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
-                            {"Log out"}
-                        </div>
-                    </div>
-                    <div className="topbar-center" >
-                        <div className="topbar-lozenge-dashboard">
-                            <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))}
-                                value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}
-                                style={{ color: Colors.WHITE }}>
-                                {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
-                            </select>
-                        </div>
-                        <div className="topbar-dashboards">
-                            <Tooltip title={<div className="dash-tooltip">Create a new dashboard </div>} placement="bottom"><div className="topbar-icon" onClick={async () => {
-                                const batch = UndoManager.StartBatch("new dash");
-                                await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
-                                batch.end();
-                            }}>
-                                New<FontAwesomeIcon icon="plus" />
-                            </div>
-                            </Tooltip>
-                            <Tooltip title={<div className="dash-tooltip">Work on a copy of the dashboard layout</div>} placement="bottom">
-                                <div className="topbar-icon" onClick={async () => {
-                                    const batch = UndoManager.StartBatch("snapshot");
-                                    await CurrentUserUtils.snapshotDashboard(Doc.UserDoc());
-                                    batch.end();
-                                }}>
-                                    Snapshot<FontAwesomeIcon icon="camera" />
-                                </div>
-                            </Tooltip>
-                            <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
-                                <div className="topbar-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}>
-                                    Explore<FontAwesomeIcon icon="map" />
-                                </div>
-                            </Tooltip>
-                        </div>
-                    </div>
-                    <div className="topbar-right" >
-                        <div className="topbar-icon" onClick={() => window.open(
-                            "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
-                            {"Help"}<FontAwesomeIcon icon="question-circle" />
-                        </div>
-                        <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
-                            {"Settings"}<FontAwesomeIcon icon="cog" />
-                        </div>
-                    </div>
-                </div>
-            </div >
-        );
-    }
+                  </div>
+                        
+            );
+      }
 }
\ No newline at end of file