changes to menu layouts

12 files changed, 167 insertions, 71 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7f6ab50d8..6b56fb443 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -74,6 +74,7 @@ export interface DocumentOptions {
     dropAction?: dropActionType;
     backgroundLayout?: string;
     chromeStatus?: string;
+    columnWidth?: number;
     fontSize?: number;
     curPage?: number;
     currentTimecode?: number;
@@ -83,6 +84,7 @@ export interface DocumentOptions {
     dockingConfig?: string;
     autoHeight?: boolean;
     dbDoc?: Doc;
+    icon?: string;
     // [key: string]: Opt<Field>;
 }
 
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 557b3e366..9d239d0bf 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -9,6 +9,7 @@ import { DictationManager } from "../util/DictationManager";
 import SharingManager from "../util/SharingManager";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 import { Cast, PromiseValue } from "../../new_fields/Types";
+import { ScriptField } from "../../new_fields/ScriptField";
 
 const modifiers = ["control", "meta", "shift", "alt"];
 type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise<KeyControlInfo>;
@@ -162,12 +163,31 @@ export default class KeyManager {
                     }
                 }
                 break;
+            case "c":
+                if (MainView.Instance.flyoutWidth > 0) {
+                    MainView.Instance.flyoutWidth = 0;
+                    PromiseValue(Cast(CurrentUserUtils.UserDocument.Library, Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv }));
+                } else {
+                    MainView.Instance.flyoutWidth = 400;
+                    PromiseValue(Cast(CurrentUserUtils.UserDocument.Create, Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv }));
+                }
+                break;
+            case "l":
+                if (MainView.Instance.flyoutWidth > 0) {
+                    MainView.Instance.flyoutWidth = 0;
+                } else {
+                    MainView.Instance.flyoutWidth = 400;
+                    PromiseValue(Cast(CurrentUserUtils.UserDocument.Library, Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv }));
+                }
+                break;
             case "f":
-                stopPropagation = false;
-                preventDefault = false;
-                MainView.Instance.isSearchVisible = !MainView.Instance.isSearchVisible;
-                MainView.Instance.flyoutWidth = MainView.Instance.isSearchVisible ? 400 : 0;
-                PromiseValue(Cast(CurrentUserUtils.UserDocument.searchBox, Doc)).then(pv => pv && (pv.treeViewOpen = (MainView.Instance.flyoutWidth > 0)));
+                if (MainView.Instance.flyoutWidth > 0) {
+                    MainView.Instance.flyoutWidth = 0;
+                    PromiseValue(Cast(CurrentUserUtils.UserDocument.Library, Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv }));
+                } else {
+                    MainView.Instance.flyoutWidth = 400;
+                    PromiseValue(Cast(CurrentUserUtils.UserDocument.Search, Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv }));
+                }
                 break;
             case "o":
                 let target = SelectionManager.SelectedDocuments()[0];
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 3bd898ac0..a91a2b69e 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -38,11 +38,6 @@ let swapDocs = async () => {
     if (info.id !== "__guest__") {
         // a guest will not have an id registered
         await CurrentUserUtils.loadUserDocument(info);
-        // updates old user documents to prevent chrome on tree view.
-        (await Cast(CurrentUserUtils.UserDocument.workspaces, Doc))!.chromeStatus = "disabled";
-        (await Cast(CurrentUserUtils.UserDocument.recentlyClosed, Doc))!.chromeStatus = "disabled";
-        (await Cast(CurrentUserUtils.UserDocument.sidebar, Doc))!.chromeStatus = "disabled";
-        CurrentUserUtils.UserDocument.chromeStatus = "disabled";
         await swapDocs();
     }
     document.getElementById('root')!.addEventListener('wheel', event => {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 1ec21f638..6f60de1c4 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -15,7 +15,7 @@ import { listSpec } from '../../new_fields/Schema';
 import { BoolCast, Cast, FieldValue, StrCast, PromiseValue } from '../../new_fields/Types';
 import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils';
 import { RouteStore } from '../../server/RouteStore';
-import { emptyFunction, returnEmptyString, returnOne, returnTrue, Utils } from '../../Utils';
+import { emptyFunction, returnEmptyString, returnOne, returnTrue, returnFalse, Utils } from '../../Utils';
 import { DocServer } from '../DocServer';
 import { Docs, DocumentOptions } from '../documents/Documents';
 import { ClientUtils } from '../util/ClientUtils';
@@ -40,6 +40,8 @@ import { PreviewCursor } from './PreviewCursor';
 import { FilterBox } from './search/FilterBox';
 import { OverlayView } from './OverlayView';
 import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager';
+import { CollectionStackingView } from './collections/CollectionStackingView';
+import { ScriptField } from '../../new_fields/ScriptField';
 
 @observer
 export class MainView extends React.Component {
@@ -459,33 +461,63 @@ export class MainView extends React.Component {
     @computed
     get flyout() {
         let sidebar: FieldResult<Field>;
-        if (!this.userDoc || !((sidebar = this.userDoc.sidebar) instanceof Doc)) {
+        if (!this.userDoc || !((sidebar = this.userDoc.sidebarContainer) instanceof Doc)) {
             return (null);
         }
-        return <DocumentView
-            Document={this.isSearchVisible ? Cast(CurrentUserUtils.UserDocument.searchBox, Doc) as Doc : sidebar}
-            DataDoc={undefined}
-            addDocument={undefined}
-            addDocTab={this.addDocTabFunc}
-            pinToPres={emptyFunction}
-            removeDocument={undefined}
-            ruleProvider={undefined}
-            onClick={undefined}
-            ScreenToLocalTransform={Transform.Identity}
-            ContentScaling={returnOne}
-            PanelWidth={this.flyoutWidthFunc}
-            PanelHeight={this.getPHeight}
-            renderDepth={0}
-            focus={emptyFunction}
-            backgroundColor={returnEmptyString}
-            parentActive={returnTrue}
-            whenActiveChanged={emptyFunction}
-            bringToFront={emptyFunction}
-            ContainingCollectionView={undefined}
-            ContainingCollectionDoc={undefined}
-            zoomToScale={emptyFunction}
-            getScale={returnOne}>
-        </DocumentView>;
+        (Cast(CurrentUserUtils.UserDocument.libraryButtons, Doc) as Doc).columnWidth = this.flyoutWidthFunc() / 3 - 30;
+        return <div style={{ display: "flex", flexDirection: "column", position: "absolute", width: "100%", height: "100%" }}>
+            <div style={{ position: "relative", height: "85px", width: "100%" }}>
+                <DocumentView
+                    Document={Cast(CurrentUserUtils.UserDocument.libraryButtons, Doc) as Doc}
+                    DataDoc={undefined}
+                    addDocument={undefined}
+                    addDocTab={this.addDocTabFunc}
+                    pinToPres={emptyFunction}
+                    removeDocument={undefined}
+                    ruleProvider={undefined}
+                    onClick={undefined}
+                    ScreenToLocalTransform={Transform.Identity}
+                    ContentScaling={returnOne}
+                    PanelWidth={this.flyoutWidthFunc}
+                    PanelHeight={this.getPHeight}
+                    renderDepth={0}
+                    focus={emptyFunction}
+                    backgroundColor={returnEmptyString}
+                    parentActive={returnTrue}
+                    whenActiveChanged={emptyFunction}
+                    bringToFront={emptyFunction}
+                    ContainingCollectionView={undefined}
+                    ContainingCollectionDoc={undefined}
+                    zoomToScale={emptyFunction}
+                    getScale={returnOne}>
+                </DocumentView>
+            </div>
+            <div style={{ position: "relative", height: "calc(100% - 80px)", width: "100%" }}>
+                <DocumentView
+                    Document={this.isSearchVisible ? Cast(CurrentUserUtils.UserDocument.searchBox, Doc) as Doc : sidebar}
+                    DataDoc={undefined}
+                    addDocument={undefined}
+                    addDocTab={this.addDocTabFunc}
+                    pinToPres={emptyFunction}
+                    removeDocument={undefined}
+                    ruleProvider={undefined}
+                    onClick={undefined}
+                    ScreenToLocalTransform={Transform.Identity}
+                    ContentScaling={returnOne}
+                    PanelWidth={this.flyoutWidthFunc}
+                    PanelHeight={this.getPHeight}
+                    renderDepth={0}
+                    focus={emptyFunction}
+                    backgroundColor={returnEmptyString}
+                    parentActive={returnTrue}
+                    whenActiveChanged={emptyFunction}
+                    bringToFront={emptyFunction}
+                    ContainingCollectionView={undefined}
+                    ContainingCollectionDoc={undefined}
+                    zoomToScale={emptyFunction}
+                    getScale={returnOne}>
+                </DocumentView>
+            </div></div>;
     }
 
     @computed
@@ -493,7 +525,7 @@ export class MainView extends React.Component {
         if (!this.userDoc) {
             return (<div>{this.dockingContent}</div>);
         }
-        let sidebar = this.userDoc.sidebar;
+        let sidebar = this.userDoc.sidebarContainer;
         if (!(sidebar instanceof Doc)) {
             return (null);
         }
@@ -585,16 +617,16 @@ export class MainView extends React.Component {
         // let googlePhotosSearch = () => GooglePhotosClientUtils.CollectionFromSearch(Docs.Create.MasonryDocument, { included: [GooglePhotosClientUtils.ContentCategories.LANDSCAPES] });
 
         let btns: [React.RefObject<HTMLDivElement>, IconName, string, () => Doc | Promise<Doc>][] = [
-            [React.createRef<HTMLDivElement>(), "object-group", "Add Collection", addColNode],
-            [React.createRef<HTMLDivElement>(), "tv", "Add Presentation Trail", addPresNode],
-            [React.createRef<HTMLDivElement>(), "globe-asia", "Add Website", addWebNode],
-            [React.createRef<HTMLDivElement>(), "bolt", "Add Button", addButtonDocument],
-            [React.createRef<HTMLDivElement>(), "file", "Add Document Dragger", addDragboxNode],
+            //[React.createRef<HTMLDivElement>(), "object-group", "Add Collection", addColNode],
+            //[React.createRef<HTMLDivElement>(), "tv", "Add Presentation Trail", addPresNode],
+            //[React.createRef<HTMLDivElement>(), "globe-asia", "Add Website", addWebNode],
+            //[React.createRef<HTMLDivElement>(), "bolt", "Add Button", addButtonDocument],
+            //[React.createRef<HTMLDivElement>(), "file", "Add Document Dragger", addDragboxNode],
             // [React.createRef<HTMLDivElement>(), "object-group", "Test Google Photos Search", googlePhotosSearch],
-            [React.createRef<HTMLDivElement>(), "cloud-upload-alt", "Import Directory", addImportCollectionNode], //remove at some point in favor of addImportCollectionNode
+            //[React.createRef<HTMLDivElement>(), "cloud-upload-alt", "Import Directory", addImportCollectionNode], //remove at some point in favor of addImportCollectionNode
             //[React.createRef<HTMLDivElement>(), "play", "Add Youtube Searcher", addYoutubeSearcher],
         ];
-        if (!ClientUtils.RELEASE) btns.unshift([React.createRef<HTMLDivElement>(), "cat", "Add Cat Image", addImageNode]);
+        //if (!ClientUtils.RELEASE) btns.unshift([React.createRef<HTMLDivElement>(), "cat", "Add Cat Image", addImageNode]);
 
         return < div id="add-nodes-menu" style={{ left: (this.flyoutTranslate ? this.flyoutWidth : 0) + 20, bottom: 20 }} >
 
@@ -603,7 +635,7 @@ export class MainView extends React.Component {
 
             <div id="add-options-content">
                 <ul id="add-options-list">
-                    <li key="search"><button className="add-button round-button" title="Search" onClick={this.toggleSearch}><FontAwesomeIcon icon="search" size="sm" /></button></li>
+                    {/* <li key="search"><button className="add-button round-button" title="Search" onClick={this.toggleSearch}><FontAwesomeIcon icon="search" size="sm" /></button></li> */}
                     <li key="undo"><button className="add-button round-button" title="Undo" style={{ opacity: UndoManager.CanUndo() ? 1 : 0.5, transition: "0.4s ease all" }} onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button></li>
                     <li key="redo"><button className="add-button round-button" title="Redo" style={{ opacity: UndoManager.CanRedo() ? 1 : 0.5, transition: "0.4s ease all" }} onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button></li>
                     {btns.map(btn =>
@@ -612,7 +644,7 @@ export class MainView extends React.Component {
                                 <FontAwesomeIcon icon={btn[1]} size="sm" />
                             </button>
                         </div></li>)}
-                    <li key="undoTest"><button className="add-button round-button" title="Click if undo isn't working" onClick={() => UndoManager.TraceOpenBatches()}><FontAwesomeIcon icon="exclamation" size="sm" /></button></li>
+                    {/* <li key="undoTest"><button className="add-button round-button" title="Click if undo isn't working" onClick={() => UndoManager.TraceOpenBatches()}><FontAwesomeIcon icon="exclamation" size="sm" /></button></li> */}
                     <li key="color"><button className="add-button round-button" title="Select Color" style={{ zIndex: 1000 }} onClick={() => this.toggleColorPicker()}><div className="toolbar-color-button" style={{ backgroundColor: InkingControl.Instance.selectedColor }} >
                         <div className="toolbar-color-picker" onClick={this.onColorClick} style={this._colorPickerDisplay ? { color: "black", display: "block" } : { color: "black", display: "none" }}>
                             <SketchPicker color={InkingControl.Instance.selectedColor} onChange={InkingControl.Instance.switchColor} />
@@ -648,9 +680,7 @@ export class MainView extends React.Component {
     @observable isSearchVisible = false;
     @action.bound
     toggleSearch = () => {
-        this.isSearchVisible = !MainView.Instance.isSearchVisible;
-        MainView.Instance.flyoutWidth = MainView.Instance.isSearchVisible ? 400 : 0;
-        PromiseValue(Cast(CurrentUserUtils.UserDocument.searchBox, Doc)).then(pv => pv && (pv.treeViewOpen = (MainView.Instance.flyoutWidth > 0)));
+        PromiseValue(Cast(CurrentUserUtils.UserDocument.Search, Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv }));
     }
 
     @computed private get dictationOverlay() {
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 6251d7114..1709b9c99 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -353,7 +353,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
             </div > : (null);
         const background = this._background; //to account for observables in Measure
         const collapsed = this.collapsed;
-        let chromeStatus = this.props.parent.props.ContainingCollectionDoc && this.props.parent.props.ContainingCollectionDoc.chromeStatus;
+        let chromeStatus = this.props.parent.props.Document.chromeStatus;
         return (
             <Measure offset onResize={this.handleResize}>
                 {({ measureRef }) => {
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 815b28586..7e54b0f29 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -335,11 +335,11 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                 </div>
             </div> : (null);
         for (let i = 0; i < cols; i++) templatecols += `${style.columnWidth / style.numGroupColumns}px `;
-        let chromeStatus = this.props.parent.props.ContainingCollectionDoc && this.props.parent.props.ContainingCollectionDoc.chromeStatus;
+        let chromeStatus = this.props.parent.props.Document.chromeStatus;
         return (
             <div className="collectionStackingViewFieldColumn" key={heading} style={{ width: `${100 / ((uniqueHeadings.length + ((chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ? 1 : 0)) || 1)}%`, background: this._background }}
                 ref={this.createColumnDropRef} onPointerEnter={this.pointerEntered} onPointerLeave={this.pointerLeave}>
-                {headingView}
+                {this.props.parent.Document.hideHeadings ? (null) : headingView}
                 {
                     this.collapsed ? (null) :
                         <div>
diff --git a/src/client/views/nodes/ButtonBox.scss b/src/client/views/nodes/ButtonBox.scss
index 75a790667..e8a3d1479 100644
--- a/src/client/views/nodes/ButtonBox.scss
+++ b/src/client/views/nodes/ButtonBox.scss
@@ -13,6 +13,8 @@
     border-radius: inherit;
     text-align: center;
     display: table;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .buttonBox-mainButtonCenter {
     height: 100%;
diff --git a/src/client/views/nodes/DragBox.tsx b/src/client/views/nodes/DragBox.tsx
index 6c3db18c4..8429382e3 100644
--- a/src/client/views/nodes/DragBox.tsx
+++ b/src/client/views/nodes/DragBox.tsx
@@ -52,7 +52,7 @@ export class DragBox extends DocComponent<FieldViewProps, DragDocument>(DragDocu
             e.stopPropagation();
             e.preventDefault();
             let res = onDragStart && onDragStart.script.run({ this: this.props.Document }).result;
-            let doc = (res as Doc) ||  Docs.Create.FreeformDocument([], { nativeWidth: undefined, nativeHeight: undefined, width: 150, height: 100, title: "freeform" });
+            let doc = (res as Doc) || Docs.Create.FreeformDocument([], { nativeWidth: undefined, nativeHeight: undefined, width: 150, height: 100, title: "freeform" });
             DragManager.StartDocumentDrag([this._mainCont.current!], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY);
         }
         e.stopPropagation();
@@ -93,7 +93,7 @@ export class DragBox extends DocComponent<FieldViewProps, DragDocument>(DragDocu
 
     render() {
         return (<div className="dragBox-outerDiv" onContextMenu={this.onContextMenu} onPointerDown={this.onDragStart} ref={this._mainCont}>
-            <FontAwesomeIcon className="dragBox-icon" icon="folder" size="lg" color="white" />
+            <FontAwesomeIcon className="dragBox-icon" icon={this.props.Document.icon as any} size="lg" color="white" />
         </div>);
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx
index f3adade58..4971f61b7 100644
--- a/src/client/views/nodes/IconBox.tsx
+++ b/src/client/views/nodes/IconBox.tsx
@@ -26,6 +26,8 @@ library.add(faFilm, faTag, faTextHeight);
 export class IconBox extends React.Component<FieldViewProps> {
     public static LayoutString() { return FieldView.LayoutString(IconBox); }
 
+    @observable _panelWidth: number = 0;
+    @observable _panelHeight: number = 0;
     @computed get layout(): string { const field = Cast(this.props.Document[this.props.fieldKey], IconField); return field ? field.icon : "<p>Error loading icon data</p>"; }
     @computed get minimizedIcon() { return IconBox.DocumentIcon(this.layout); }
 
@@ -69,8 +71,6 @@ export class IconBox extends React.Component<FieldViewProps> {
             cm.addItem({ description: "Use Target Title", event: () => IconBox.AutomaticTitle(this.props.Document), icon: "text-height" });
         }
     }
-    @observable _panelWidth: number = 0;
-    @observable _panelHeight: number = 0;
     render() {
         let label = this.props.Document.hideLabel ? "" : this.props.Document.title;
         return (
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index bdeb57d5c..cff397407 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -60,7 +60,7 @@ export class IconBar extends React.Component {
         return (
             <div className="icon-bar">
                 {FilterBox.Instance._allIcons.map((type: string) =>
-                    <IconButton type={type} />
+                    <IconButton key={type.toString()} type={type} />
                 )}
             </div>
         );
diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss
index d1853177e..4a3107676 100644
--- a/src/client/views/search/IconButton.scss
+++ b/src/client/views/search/IconButton.scss
@@ -35,7 +35,7 @@
         text-align: center;
         height: 15px;
         margin-top: 5px;
-        opacity: 0;
+        opacity: 1;
         -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index f9e3dc479..e1bb91838 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -12,6 +12,7 @@ import { listSpec } from "../../../new_fields/Schema";
 import { Cast, StrCast, PromiseValue } from "../../../new_fields/Types";
 import { Utils } from "../../../Utils";
 import { RouteStore } from "../../RouteStore";
+import { ScriptField } from "../../../new_fields/ScriptField";
 
 export class CurrentUserUtils {
     private static curr_id: string;
@@ -97,24 +98,70 @@ export class CurrentUserUtils {
             curPresentation.boxShadow = "0 0";
             doc.curPresentation = curPresentation;
         }
-        if (doc.searchBox === undefined) {
+
+        if (doc.Library === undefined) {
+            let Search = Docs.Create.ButtonDocument({ width: 50, height: 35, title: "Search" });
+            let Library = Docs.Create.ButtonDocument({ width: 50, height: 35, title: "Library" });
+            let Create = Docs.Create.ButtonDocument({ width: 35, height: 35, title: "Create" });
+            if (doc.sidebarContainer === undefined) {
+                doc.sidebarContainer = new Doc();
+                (doc.sidebarContainer as Doc).chromeStatus = "disabled";
+            }
+
+            const library = Docs.Create.TreeDocument([doc.workspaces as Doc, doc, doc.recentlyClosed as Doc], { title: "Library" });
+            library.forceActive = true;
+            library.lockedPosition = true;
+            library.gridGap = 5;
+            library.xMargin = 5;
+            library.yMargin = 5;
+            library.boxShadow = "1 1 3";
+            library.workspaceLibrary = true; // flag that this is the document that shows the Notifications button when documents are shared
+            Library.targetContainer = doc.sidebarContainer;
+            Library.library = library;
+            Library.onClick = ScriptField.MakeScript("this.targetContainer.proto = this.library");
+
             const searchBox = Docs.Create.QueryDocument({ title: "Searching" });
             searchBox.boxShadow = "0 0";
             searchBox.ignoreClick = true;
-            doc.searchBox = searchBox;
-        }
+            Search.searchBox = searchBox;
+            Search.targetContainer = doc.sidebarContainer;
+            Search.onClick = ScriptField.MakeScript("this.targetContainer.proto = this.searchBox");
 
-        if (doc.sidebar === undefined) {
-            const sidebar = Docs.Create.TreeDocument([doc.workspaces as Doc, doc, doc.recentlyClosed as Doc], { title: "Sidebar" });
-            sidebar.forceActive = true;
-            sidebar.lockedPosition = true;
-            sidebar.gridGap = 5;
-            sidebar.xMargin = 5;
-            sidebar.yMargin = 5;
-            sidebar.boxShadow = "1 1 3";
-            sidebar.workspaceLibrary = true; // flag that this is the document that shows the Notifications button when documents are shared
-            doc.sidebar = sidebar;
+            let createCollection = Docs.Create.DragboxDocument({ width: 35, height: 35, title: "Collection", icon: "folder" });
+            let createWebPage = Docs.Create.DragboxDocument({ width: 35, height: 35, title: "Web Page", icon: "globe-asia" });
+            createWebPage.onDragStart = ScriptField.MakeFunction('Docs.Create.WebDocument("https://en.wikipedia.org/wiki/Hedgehog", { width: 300, height: 300, title: "New Webpage" })');
+            let createCatImage = Docs.Create.DragboxDocument({ width: 35, height: 35, title: "Image", icon: "cat" });
+            createCatImage.onDragStart = ScriptField.MakeFunction('Docs.Create.ImageDocument(imgurl, { width: 200, title: "an image of a cat" })');
+            let createButton = Docs.Create.DragboxDocument({ width: 35, height: 35, title: "Button", icon: "bolt" });
+            createButton.onDragStart = ScriptField.MakeFunction('Docs.Create.ButtonDocument({ width: 150, height: 50, title: "Button" })');
+            let createPresentation = Docs.Create.DragboxDocument({ width: 35, height: 35, title: "Presentation", icon: "tv" });
+            createPresentation.onDragStart = ScriptField.MakeFunction('Doc.UserDoc().curPresentation = Docs.Create.PresDocument(new List<Doc>(), { width: 200, height: 500, title: "a presentation trail" })');
+            let createFolderImport = Docs.Create.DragboxDocument({ width: 35, height: 35, title: "Import Folder", icon: "cloud-upload-alt" });
+            createFolderImport.onDragStart = ScriptField.MakeFunction('Docs.Create.DirectoryImportDocument({ title: "Directory Import", width: 400, height: 400 })');
+            const creators = Docs.Create.MasonryDocument([createCollection, createWebPage, createCatImage, createButton, createPresentation, createFolderImport], { width: 500, height: 50, columnWidth: 35, chromeStatus: "disabled", title: "buttons" });
+            Create.targetContainer = doc.sidebarContainer;
+            Create.creators = creators;
+            Create.onClick = ScriptField.MakeScript("this.targetContainer.proto = this.creators");
+
+            const buttons = Docs.Create.StackingDocument([Search, Library, Create], { width: 500, height: 80, chromeStatus: "disabled", title: "buttons" });
+            buttons.sectionFilter = "title";
+            buttons.boxShadow = "0 0";
+            buttons.ignoreClick = true;
+            buttons.hideHeadings = true;
+            doc.libraryButtons = buttons;
+
+            doc.Library = Library;
+            doc.Create = Create;
+            doc.Search = Search;
+            (Library.onClick as ScriptField).script.run({ this: Library });
+            //(doc.sidebarContainer as Doc).proto = library;
         }
+        PromiseValue(Cast(doc.libraryButtons, Doc)).then(libraryButtons => {
+            if (libraryButtons) {
+                libraryButtons.backgroundColor = "lightgrey";
+            }
+        });
+
         PromiseValue(Cast(doc.sidebar, Doc)).then(sidebar => {
             if (sidebar) {
                 sidebar.backgroundColor = "lightgrey";