pin with view added to marquee menu and pres trails options added

5 files changed, 66 insertions, 55 deletions

diff --git a/src/.DS_Store b/src/.DS_Store
index 299b902c6..02618014e 100644
--- a/src/.DS_Store
+++ b/src/.DS_Store
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 4e432e6fa..dfae3fce1 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -394,7 +394,7 @@ export class CurrentUserUtils {
     }[] {
         if (doc.emptyPresentation === undefined) {
             doc.emptyPresentation = Docs.Create.PresDocument(new List<Doc>(),
-                { title: "Presentation", _viewType: CollectionViewType.Stacking, _width: 400, _height: 500, targetDropAction: "alias", _chromeStatus: "replaced", boxShadow: "0 0", system: true });
+                { title: "Untitled Presentation", _viewType: CollectionViewType.Stacking, _width: 400, _height: 500, targetDropAction: "alias", _chromeStatus: "replaced", boxShadow: "0 0", system: true });
         }
         if (doc.emptyCollection === undefined) {
             doc.emptyCollection = Docs.Create.FreeformDocument([],
@@ -441,8 +441,7 @@ export class CurrentUserUtils {
             //  { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
             { toolTip: "Tap to create an audio recorder in a new pane, drag for an audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc, noviceMode: true },
             { toolTip: "Tap to create a button in a new pane, drag for a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true },
-
-            { toolTip: "Tap to create a presentation in a new pane, drag for a presentation", title: "Trails", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true },
+            { toolTip: "Tap to create a presentation in a new pane, drag for a presentation", title: "Trails", icon: "pres-trail", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true },
             { toolTip: "Tap to create a search box in a new pane, drag for a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc },
             { toolTip: "Tap to create a scripting box in a new pane, drag for a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
             // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
@@ -512,7 +511,7 @@ export class CurrentUserUtils {
         return [
             { title: "Sharing", icon: "users", click: 'selectMainMenu(self)', watchedDocuments: doc["sidebar-sharing"] as Doc },
             { title: "Workspace", icon: "desktop", click: 'selectMainMenu(self)' },
-            { title: "Pres. Trails", icon: "desktop", click: 'selectMainMenu(self)' },
+            { title: "Pres. Trails", icon: "pres-trail", click: 'selectMainMenu(self)' },
             { title: "Catalog", icon: "file", click: 'selectMainMenu(self)' },
             { title: "Archive", icon: "archive", click: 'selectMainMenu(self)' },
             { title: "Import", icon: "upload", click: 'selectMainMenu(self)' },
@@ -748,25 +747,39 @@ export class CurrentUserUtils {
         return doc.myWorkspaces as any as Doc;
     }
 
-    static setupPresentations(doc: Doc) {
-        doc.myPresentations === undefined;
+    static async addToPresList(doc: Doc, pres: Doc) {
+        await doc.myPresentations;
         if (doc.myPresentations === undefined) {
-            doc.myPresentations = new PrefetchProxy(Docs.Create.SchemaDocument([], [], {
-                title: "Pres. Trails", _height: 1000, _fitWidth: true, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false,
-                childDropAction: "alias", targetDropAction: "same", _stayInCollection: true, treeViewOpen: true, system: true
+            doc.myPresentations = new PrefetchProxy(Docs.Create.TreeDocument([], {
+                title: "PRESENTATION TRAILS", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, treeViewOpen: true, system: true
+            }));
+        }
+        const myPresentations = doc.myPresentations as Doc;
+        doc.activePresentation = pres;
+        Doc.AddDocToList(myPresentations, "data", pres);
+    }
+
+    static async setupPresentations(doc: Doc) {
+        await doc.myPresentations;
+        if (doc.myPresentations === undefined) {
+            doc.myPresentations = new PrefetchProxy(Docs.Create.TreeDocument([], {
+                title: "PRESENTATION TRAILS", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, treeViewOpen: true, system: true
             }));
         }
 
         if (doc["sidebar-presentations"] === undefined) {
+            const newPresentations = ScriptField.MakeScript(`createNewPresentation()`);
+            (doc.myPresentations as Doc).contextMenuScripts = new List<ScriptField>([newPresentations!]);
+            (doc.myPresentations as Doc).contextMenuLabels = new List<string>(["Create New Presentation"]);
             const presentations = doc.myPresentations as Doc;
 
             doc["sidebar-presentations"] = new PrefetchProxy(Docs.Create.TreeDocument([presentations], {
-                title: "sidebar-presentations",
                 treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
                 treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
                 lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same", system: true
             })) as any as Doc;
         }
+        return doc.myPresentations as any as Doc;
     }
 
     static setupCatalog(doc: Doc) {
@@ -1026,9 +1039,10 @@ export class CurrentUserUtils {
     }
 }
 
+Scripting.addGlobal(function createNewPresentation() { return MainView.Instance.createNewPresentation(); },
+    "creates a new presentation when called");
 Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); },
     "creates a new workspace when called");
-
 Scripting.addGlobal(function links(doc: any) { return new List(LinkManager.Instance.getAllRelatedLinks(doc)); },
     "returns all the links to the document or its annotations", "(doc: any)");
 Scripting.addGlobal(function directLinks(doc: any) { return new List(LinkManager.Instance.getAllDirectLinks(doc)); },
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 73138dcd8..1df8f6eb7 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -65,6 +65,7 @@ import { Networking } from '../Network';
 import * as rp from 'request-promise';
 import { LinkManager } from '../util/LinkManager';
 import RichTextMenu from './nodes/formattedText/RichTextMenu';
+import { PrefetchProxy } from '../../fields/Proxy';
 
 @observer
 export class MainView extends React.Component {
@@ -253,10 +254,24 @@ export class MainView extends React.Component {
     }
 
     @action
+    createNewPresentation = async () => {
+        await this.userDoc.myPresentations;
+        if (this.userDoc.myPresentations === undefined) {
+            this.userDoc.myPresentations = new PrefetchProxy(Docs.Create.TreeDocument([], {
+                title: "PRESENTATION TRAILS", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, treeViewOpen: true, system: true
+            }));
+        }
+        const pres = Docs.Create.PresDocument(new List<Doc>(),
+            { title: "Untitled Presentation", _viewType: CollectionViewType.Stacking, _width: 400, _height: 500, targetDropAction: "alias", _chromeStatus: "replaced", boxShadow: "0 0", system: true });
+        CollectionDockingView.AddRightSplit(pres);
+        Doc.UserDoc().activePresentation = pres;
+        const myPresentations = Doc.UserDoc().myPresentations as Doc;
+        Doc.AddDocToList(myPresentations, "data", pres);
+    }
+
+    @action
     createNewWorkspace = async (id?: string) => {
         const myCatalog = Doc.UserDoc().myCatalog as Doc;
-        const myPresentations = Doc.UserDoc().myPresentations as Doc;
-        const presentation = Doc.MakeCopy(Doc.UserDoc().emptyPresentation as Doc, true);
         const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
         const workspaceCount = DocListCast(workspaces.data).length + 1;
         const freeformOptions: DocumentOptions = {
@@ -269,9 +284,6 @@ export class MainView extends React.Component {
         const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
         const workspaceDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600, path: [myCatalog] }], { title: `Workspace ${workspaceCount}` }, id, "row");
         Doc.AddDocToList(myCatalog, "data", freeformDoc);
-        Doc.AddDocToList(myCatalog, "data", presentation);
-        Doc.AddDocToList(myPresentations, "data", presentation);
-        Doc.UserDoc().activePresentation = presentation;
         const toggleTheme = ScriptField.MakeScript(`self.darkScheme = !self.darkScheme`);
         const toggleComic = ScriptField.MakeScript(`toggleComicMode()`);
         const copyWorkspace = ScriptField.MakeScript(`copyWorkspace()`);
@@ -550,8 +562,8 @@ export class MainView extends React.Component {
                     SearchBox.Instance.newsearchstring = "";
                     SearchBox.Instance.enter(undefined);
                     break;
-
                 // panelDoc = Doc.UserDoc()["sidebar-catalog"] as Doc ?? undefined; break;
+                case "Pres. Trails": panelDoc = Doc.UserDoc()["sidebar-presentations"] as Doc ?? undefined; break;
                 case "Archive": panelDoc = Doc.UserDoc()["sidebar-recentlyClosed"] as Doc ?? undefined; break;
                 case "Settings": SettingsManager.Instance.open(); break;
                 case "Import": panelDoc = Doc.UserDoc()["sidebar-import"] as Doc ?? undefined; break;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 744648e24..761d88989 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -719,43 +719,24 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     @undoBatch
     @action
     public static PinDoc(doc: Doc, unpin = false) {
-        if (SelectionManager.SelectedDocuments().length > 1) {
-            SelectionManager.SelectedDocuments().forEach((docView: DocumentView, i: number) => {
-                if (unpin) DockedFrameRenderer.UnpinDoc(docView.props.Document);
-                else {
-                    console.log('adding multiple docs to trails');
-                    const curPres = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
-                    if (curPres) {
-                        const pinDoc = Doc.MakeAlias(docView.props.Document);
-                        pinDoc.presentationTargetDoc = docView.props.Document;
-                        pinDoc.presZoomButton = true;
-                        pinDoc.context = curPres;
-                        Doc.AddDocToList(curPres, "data", pinDoc);
-                        if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
-                        if (!DocumentManager.Instance.getDocumentView(curPres)) {
-                            CollectionDockingView.AddRightSplit(curPres);
-                        }
-                        DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null));
-                    }
-                }
-            });
-        } else {
-            if (unpin) DockedFrameRenderer.UnpinDoc(doc);
-            else {
-                //add this new doc to props.Document
-                const curPres = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
-                if (curPres) {
-                    const pinDoc = Doc.MakeAlias(doc);
-                    pinDoc.presentationTargetDoc = doc;
-                    pinDoc.presZoomButton = true;
-                    pinDoc.context = curPres;
-                    Doc.AddDocToList(curPres, "data", pinDoc);
-                    if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
-                    if (!DocumentManager.Instance.getDocumentView(curPres)) {
-                        CollectionDockingView.AddRightSplit(curPres);
-                    }
-                    DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null));
+        if (unpin) DockedFrameRenderer.UnpinDoc(doc);
+        else {
+            //add this new doc to props.Document
+            const curPres = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+            if (curPres) {
+                const pinDoc = Doc.MakeAlias(doc);
+                pinDoc.presentationTargetDoc = doc;
+                pinDoc.presZoomButton = true;
+                pinDoc.context = curPres;
+                Doc.AddDocToList(curPres, "data", pinDoc);
+                if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
+                if (!DocumentManager.Instance.getDocumentView(curPres)) {
+                    CollectionDockingView.AddRightSplit(curPres);
                 }
+                DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null));
+                const myPresentations = Doc.UserDoc().myPresentations as Doc;
+                const presData = DocListCast(myPresentations.data);
+                if (!presData.includes(curPres)) Doc.AddDocToList(myPresentations, "data", curPres);
             }
         }
     }
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index fd71876b0..bc5abb0a4 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -64,14 +64,18 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         const color = StrCast(this.layoutDoc.color, this._foregroundColor);
         const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc, this.props.renderDepth)));
         const shape = StrCast(this.layoutDoc.iconShape, "round");
-
+        const icon = StrCast(this.dataDoc.icon, "user") as any;
+        const presTrailsIcon = <img
+            style={{ width: shape === 'round' ? 25 : 30, height: shape === 'round' ? 25 : 30, filter: color === 'white' ? 'invert(100%)' : 'invert(0%)', transform: shape === 'round' ? 'translate(-5px, -7px)' : undefined }}
+            id={"pres-icon"}
+            src={`/assets/${"presTrails.png"}`} />;
         const button = <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
             style={{
                 boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined,
                 backgroundColor: this.layoutDoc.iconShape === "square" ? backgroundColor : "",
             }}>
             <div className="menuButton-wrap">
-                {<FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={StrCast(this.dataDoc.icon, "user") as any} color={color}
+                {icon === 'pres-trail' ? presTrailsIcon : <FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={icon} color={color}
                     size={this.layoutDoc.iconShape === "square" ? "sm" : "lg"} />}
                 {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
                 {this.props.Document.watchedDocuments ? <FontIconBadge collection={Cast(this.props.Document.watchedDocuments, Doc, null)} /> : (null)}