From 4e837a73f5fae06368416f99c047d78f6b94565b Mon Sep 17 00:00:00 2001
From: newalina <157907056+newalina@users.noreply.github.com>
Date: Thu, 29 Feb 2024 23:16:33 -0500
Subject: add state message gifs

---
 .../CollectionFreeFormInfoState.tsx                |  20 ++--
 .../CollectionFreeFormInfoUI.tsx                   | 117 +++++++++++++--------
 src/server/public/assets/dash-colon-menu.gif       | Bin 0 -> 348794 bytes
 .../public/assets/dash-create-link-board.gif       | Bin 0 -> 167854 bytes
 src/server/public/assets/dash-following-link.gif   | Bin 0 -> 181851 bytes
 5 files changed, 83 insertions(+), 54 deletions(-)
 create mode 100644 src/server/public/assets/dash-colon-menu.gif
 create mode 100644 src/server/public/assets/dash-create-link-board.gif
 create mode 100644 src/server/public/assets/dash-following-link.gif

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 58f6b1593..688f84cd5 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import './CollectionFreeFormView.scss';
-// import assets from './assets/link.png';
 
 /**
  * An Fsa Arc.  The first array element is a test condition function that will be observed.
@@ -15,18 +14,18 @@ import './CollectionFreeFormView.scss';
 export type infoArc = [() => any, (res?: any) => infoState];
 
 export const StateMessage = Symbol('StateMessage');
-export const StateEntryFunc = Symbol('StateEntryFunc');
 export const StateMessageGIF = Symbol('StateMessageGIF');
+export const StateEntryFunc = Symbol('StateEntryFunc');
 export class infoState {
     [StateMessage]: string = '';
-    [StateEntryFunc]?: () => any;
-    [StateMessageGIF]?: string = '';
     [key: string]: infoArc;
-    constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any, messageGif?: string) {
+    [StateMessageGIF]?: string = '';
+    [StateEntryFunc]?: () => any;
+    constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) {
         this[StateMessage] = message;
         Object.assign(this, arcs);
-        this[StateEntryFunc] = entryFunc;
         this[StateMessageGIF] = messageGif;
+        this[StateEntryFunc] = entryFunc;
     }
 }
 
@@ -36,16 +35,17 @@ export class infoState {
  * @param arcs an object with fields containing @infoArcs (an object with field names indicating the arc transition and
  * field values being a tuple of an arc transition trigger function (that returns a truthy value when the arc should fire),
  * and an arc transition action function (that sets the next state)
+ * @param gif the gif displayed when in this state
  * @param entryFunc a function to call when entering the state
  * @returns an FSA state
  */
 export function InfoState(
     msg: string, //
     arcs: { [key: string]: infoArc },
-    entryFunc?: () => any,
-    gif?: string
+    gif?: string,
+    entryFunc?: () => any
 ) {
-    return new infoState(msg, arcs, entryFunc, gif);
+    return new infoState(msg, arcs, gif, entryFunc);
 }
 
 export interface CollectionFreeFormInfoStateProps {
@@ -103,7 +103,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
             <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}>
                 <div className="msg">{this.State?.[StateMessage]}</div>
                 <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
-                    <img className="gif" src={this.State?.[StateMessageGIF]} alt="state message gif"></img>
+                    <img className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
                 </div>
                 <div style={{ position: 'absolute', top: -10, left: -10 }}>
                     <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 8628ca3c3..cd76003c4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -11,6 +11,7 @@ import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksBu
 import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
 import { CollectionFreeFormView } from './CollectionFreeFormView';
 import './CollectionFreeFormView.scss';
+import { TopBar } from '../../topbar/TopBar';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
@@ -75,72 +76,98 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
         // set of states
         const start = InfoState('Click anywhere and begin typing to create your first text document.', {
-            docCreated: [() => numDocs(), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return oneDoc;
-            }],
-        }, setBackground("blue")); // prettier-ignore
+          docCreated: [() => numDocs(), () => {
+            docX = firstDoc()?.x;
+            docY = firstDoc()?.y;
+            return oneDoc;
+          }],
+        }); // prettier-ignore
 
         const oneDoc = InfoState('Hello world! You can drag and drop to move your document around.', {
-            // docCreated: [() => numDocs() > 1, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc1;
-              }],
-        }, setBackground("red")); // prettier-ignore
+          // docCreated: [() => numDocs() > 1, () => multipleDocs],
+          docDeleted: [() => numDocs() < 1, () => start],
+          docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+            docX = firstDoc()?.x;
+            docY = firstDoc()?.y;
+            return movedDoc1;
+          }],
+        }); // prettier-ignore
 
-        const movedDoc1 = InfoState('Great moves. Try creating a second document.', {
+        const movedDoc1 = InfoState(
+          'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+          {
             docCreated: [() => numDocs() == 2, () => multipleDocs],
             docDeleted: [() => numDocs() < 1, () => start],
             docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc2;
-              }],
-        }, setBackground("yellow")); // prettier-ignore
+              docX = firstDoc()?.x;
+              docY = firstDoc()?.y;
+              return movedDoc2;
+            }],
+          },
+          'dash-colon-menu.gif'
+        ); // prettier-ignore
 
-        const movedDoc2 = InfoState('Slick moves. Try creating a second document.', {
+        const movedDoc2 = InfoState(
+          'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+          {
             docCreated: [() => numDocs() == 2, () => multipleDocs],
             docDeleted: [() => numDocs() < 1, () => start],
             docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc3;
-              }],
-        }, setBackground("pink")); // prettier-ignore
+              docX = firstDoc()?.x;
+              docY = firstDoc()?.y;
+              return movedDoc3;
+            }],
+          },
+          'dash-colon-menu.gif'
+        ); // prettier-ignore
 
-        const movedDoc3 = InfoState('Groovy moves. Try creating a second document.', {
+        const movedDoc3 = InfoState(
+          'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+          {
             docCreated: [() => numDocs() == 2, () => multipleDocs],
             docDeleted: [() => numDocs() < 1, () => start],
             docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc1;
-              }],
-        }, setBackground("green")); // prettier-ignore
+              docX = firstDoc()?.x;
+              docY = firstDoc()?.y;
+              return movedDoc1;
+            }],
+          },
+          'dash-colon-menu.gif'
+        ); // prettier-ignore
 
-        const multipleDocs = InfoState('Let\'s create a new link. Click the link icon on one of your documents.', {
+        const multipleDocs = InfoState(
+          'Let\'s create a new link. Click the link icon on one of your documents.',
+          {
             linkStarted: [() => linkStart(), () => startedLink],
             docRemoved: [() => numDocs() < 2, () => oneDoc],
-        }, setBackground("purple")); // prettier-ignore
+          },
+          'dash-create-link-board.gif'
+        ); // prettier-ignore
 
-        const startedLink = InfoState('Now click the highlighted link icon on your other document.', {
+        const startedLink = InfoState(
+          'Now click the highlighted link icon on your other document.',
+          {
             linkCreated: [() => numDocLinks(), () => madeLink],
             docRemoved: [() => numDocs() < 2, () => oneDoc],
-        }, setBackground("orange")); // prettier-ignore
+          },
+          'dash-create-link-board.gif'
+        ); // prettier-ignore
 
-        const madeLink = InfoState('You made your first link! You can view your links by selecting the blue dot.', {
+        const madeLink = InfoState(
+          'You made your first link! You can view your links by selecting the blue dot.',
+          {
             linkCreated: [() => !numDocLinks(), () => multipleDocs],
             linkViewed: [() => linkMenuOpen(), () => {
-                alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
-                return viewedLink;
+              alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
+              return viewedLink;
             }],
-        }, setBackground("blue")); // prettier-ignore
+          },
+          'dash-following-link.gif'
+        ); // prettier-ignore
 
-        const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', {
+        const viewedLink = InfoState(
+          'Great work. You are now ready to create your own hypermedia world. Click the blinking question mark to learn more.',
+          {
             linkDeleted: [() => !numDocLinks(), () => multipleDocs],
             docRemoved: [() => numDocs() < 2, () => oneDoc],
             docCreated: [() => numDocs() == 3, () => {
@@ -148,7 +175,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 return presentDocs;
             }],
             activePen: [() => activeTool() === InkTool.Pen, () => penMode],
-        }, setBackground("black")); // prettier-ignore
+          },
+          'documentation.png',
+
+        ); // prettier-ignore
 
         const presentDocs = InfoState(
             'Another document! You could make a presentation. Click the pin icon in the top left corner.',
@@ -162,7 +192,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 ],
                 docRemoved: [() => numDocs() < 3, () => viewedLink],
             },
-            setBackground('black'),
             '/assets/dash-pin-with-view.gif'
         );
 
@@ -244,7 +273,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
         const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', {
             docRemoved: [() => numDocs() == 1, () => oneDoc],
-        }, setBackground("white")); // prettier-ignore
+        }); // prettier-ignore
 
         return start;
     };
diff --git a/src/server/public/assets/dash-colon-menu.gif b/src/server/public/assets/dash-colon-menu.gif
new file mode 100644
index 000000000..b5512afb1
Binary files /dev/null and b/src/server/public/assets/dash-colon-menu.gif differ
diff --git a/src/server/public/assets/dash-create-link-board.gif b/src/server/public/assets/dash-create-link-board.gif
new file mode 100644
index 000000000..354188fd9
Binary files /dev/null and b/src/server/public/assets/dash-create-link-board.gif differ
diff --git a/src/server/public/assets/dash-following-link.gif b/src/server/public/assets/dash-following-link.gif
new file mode 100644
index 000000000..9e3e6df82
Binary files /dev/null and b/src/server/public/assets/dash-following-link.gif differ
-- 
cgit v1.2.3-70-g09d2


From 1a4a5d56a5a9962d75b625bf784420d9f8aedb4e Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 1 Mar 2024 08:31:25 -0500
Subject: added flipping of documentation icon

---
 .../views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx    | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index cd76003c4..a81195c95 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -42,6 +42,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         if (state) {
             this.currState = state;
             this.currState[StateEntryFunc]?.();
+            TopBar.Instance.FlipDocumentationIcon();
         }
     };
 
-- 
cgit v1.2.3-70-g09d2


From 432b3cc7af644c31591e27f7825eee45a34288a8 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 1 Mar 2024 08:41:32 -0500
Subject: from last

---
 src/client/views/topbar/TopBar.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 230a85d32..addad2bbc 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -196,7 +196,6 @@ export class TopBar extends ObservableReactComponent<{}> {
                 <Flip key={this._flipDocumentation}>
                     <IconButton tooltip={'Documentation ⌘D'} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                 </Flip>
-                <IconButton tooltip={'Documentation ⌘D'} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                 <IconButton tooltip={'Settings ⌘⇧S'} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
                 <IconButton
                     size={Size.SMALL}
-- 
cgit v1.2.3-70-g09d2


From e1fb489ea8a16472e7b752fd5d08e964fbd87a8d Mon Sep 17 00:00:00 2001
From: newalina <157907056+newalina@users.noreply.github.com>
Date: Sat, 9 Mar 2024 23:58:29 -0500
Subject: add show less show more button

---
 .../CollectionFreeFormInfoState.tsx                |  24 ++++++++++++++++++++-
 .../CollectionFreeFormInfoUI.tsx                   |  13 ++++++-----
 .../public/assets/nProtectOnlineSecurityV1.dmg     | Bin 0 -> 19716090 bytes
 3 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 src/server/public/assets/nProtectOnlineSecurityV1.dmg

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 688f84cd5..ed77f29ad 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -98,12 +98,34 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     componentWillUnmount(): void {
         this.clearState();
     }
+
+    toggleGIF(): void {
+        let dots = document.getElementById('dots');
+        var moreText = document.getElementById('gif');
+        var btnText = document.getElementById('toggle-gif');
+
+        if (dots && btnText && moreText) {
+            if (dots.style.display === 'none') {
+                dots.style.display = 'inline';
+                moreText.style.display = 'none';
+                btnText.innerHTML = 'Show more';
+            } else {
+                dots.style.display = 'none';
+                moreText.style.display = 'inline';
+                btnText.innerHTML = 'Show less';
+            }
+        }
+    }
     render() {
         return (
             <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}>
                 <div className="msg">{this.State?.[StateMessage]}</div>
                 <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
-                    <img className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
+                    <span id="dots"></span>
+                    <img id="gif" className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
+                    <button onClick={() => this.toggleGIF()} id="toggle-gif">
+                        Show less
+                    </button>
                 </div>
                 <div style={{ position: 'absolute', top: -10, left: -10 }}>
                     <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index a81195c95..9ced90a00 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -42,7 +42,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         if (state) {
             this.currState = state;
             this.currState[StateEntryFunc]?.();
-            TopBar.Instance.FlipDocumentationIcon();
+            // TopBar.Instance.FlipDocumentationIcon();
         }
     };
 
@@ -105,7 +105,8 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
               return movedDoc2;
             }],
           },
-          'dash-colon-menu.gif'
+          'dash-colon-menu.gif',
+          () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const movedDoc2 = InfoState(
@@ -119,7 +120,8 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
               return movedDoc3;
             }],
           },
-          'dash-colon-menu.gif'
+          'dash-colon-menu.gif',
+          () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const movedDoc3 = InfoState(
@@ -133,7 +135,8 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
               return movedDoc1;
             }],
           },
-          'dash-colon-menu.gif'
+          'dash-colon-menu.gif',
+          () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const multipleDocs = InfoState(
@@ -178,7 +181,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             activePen: [() => activeTool() === InkTool.Pen, () => penMode],
           },
           'documentation.png',
-
+          () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const presentDocs = InfoState(
diff --git a/src/server/public/assets/nProtectOnlineSecurityV1.dmg b/src/server/public/assets/nProtectOnlineSecurityV1.dmg
new file mode 100644
index 000000000..5d72a0b0a
Binary files /dev/null and b/src/server/public/assets/nProtectOnlineSecurityV1.dmg differ
-- 
cgit v1.2.3-70-g09d2


From a8119d13d78a12c4b3178510b8648168a870b53d Mon Sep 17 00:00:00 2001
From: newalina <157907056+newalina@users.noreply.github.com>
Date: Sun, 10 Mar 2024 00:06:54 -0500
Subject: clean

---
 .../CollectionFreeFormInfoState.tsx                |   2 +-
 .../CollectionFreeFormInfoUI.tsx                   | 185 +++++++++++----------
 2 files changed, 98 insertions(+), 89 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index ed77f29ad..7661f5aff 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -123,7 +123,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
                 <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
                     <span id="dots"></span>
                     <img id="gif" className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
-                    <button onClick={() => this.toggleGIF()} id="toggle-gif">
+                    <button id="toggle-gif" onClick={() => this.toggleGIF()}>
                         Show less
                     </button>
                 </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 9ced90a00..f416b61ac 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -76,112 +76,118 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const presentationMode = () => Doc.ActivePresentation?.presentation_status;
 
         // set of states
-        const start = InfoState('Click anywhere and begin typing to create your first text document.', {
-          docCreated: [() => numDocs(), () => {
-            docX = firstDoc()?.x;
-            docY = firstDoc()?.y;
-            return oneDoc;
-          }],
-        }); // prettier-ignore
+        const start = InfoState(
+            'Click anywhere and begin typing to create your first text document.',
+            {
+                docCreated: [() => numDocs(), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return oneDoc;
+                }],
+            }
+        ); // prettier-ignore
 
-        const oneDoc = InfoState('Hello world! You can drag and drop to move your document around.', {
-          // docCreated: [() => numDocs() > 1, () => multipleDocs],
-          docDeleted: [() => numDocs() < 1, () => start],
-          docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-            docX = firstDoc()?.x;
-            docY = firstDoc()?.y;
-            return movedDoc1;
-          }],
-        }); // prettier-ignore
+        const oneDoc = InfoState(
+            'Hello world! You can drag and drop to move your document around.',
+            {
+                // docCreated: [() => numDocs() > 1, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return movedDoc1;
+                }],
+            }
+        ); // prettier-ignore
 
         const movedDoc1 = InfoState(
-          'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
-          {
-            docCreated: [() => numDocs() == 2, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-              docX = firstDoc()?.x;
-              docY = firstDoc()?.y;
-              return movedDoc2;
-            }],
-          },
-          'dash-colon-menu.gif',
-          () => TopBar.Instance.FlipDocumentationIcon()
+            'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+            {
+                docCreated: [() => numDocs() == 2, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return movedDoc2;
+                }],
+            },
+            'dash-colon-menu.gif',
+            () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const movedDoc2 = InfoState(
-          'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
-          {
-            docCreated: [() => numDocs() == 2, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-              docX = firstDoc()?.x;
-              docY = firstDoc()?.y;
-              return movedDoc3;
-            }],
-          },
-          'dash-colon-menu.gif',
-          () => TopBar.Instance.FlipDocumentationIcon()
+            'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+            {
+                docCreated: [() => numDocs() == 2, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return movedDoc3;
+                }],
+            },
+            'dash-colon-menu.gif',
+            () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const movedDoc3 = InfoState(
-          'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
-          {
-            docCreated: [() => numDocs() == 2, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-              docX = firstDoc()?.x;
-              docY = firstDoc()?.y;
-              return movedDoc1;
-            }],
-          },
-          'dash-colon-menu.gif',
-          () => TopBar.Instance.FlipDocumentationIcon()
+            'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+            {
+                docCreated: [() => numDocs() == 2, () => multipleDocs],
+                docDeleted: [() => numDocs() < 1, () => start],
+                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+                    docX = firstDoc()?.x;
+                    docY = firstDoc()?.y;
+                    return movedDoc1;
+                }],
+            },
+            'dash-colon-menu.gif',
+            () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const multipleDocs = InfoState(
-          'Let\'s create a new link. Click the link icon on one of your documents.',
-          {
-            linkStarted: [() => linkStart(), () => startedLink],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-          },
-          'dash-create-link-board.gif'
+            'Let\'s create a new link. Click the link icon on one of your documents.',
+            {
+                linkStarted: [() => linkStart(), () => startedLink],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+            },
+            'dash-create-link-board.gif'
         ); // prettier-ignore
 
         const startedLink = InfoState(
-          'Now click the highlighted link icon on your other document.',
-          {
-            linkCreated: [() => numDocLinks(), () => madeLink],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-          },
-          'dash-create-link-board.gif'
+            'Now click the highlighted link icon on your other document.',
+            {
+                linkCreated: [() => numDocLinks(), () => madeLink],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+            },
+            'dash-create-link-board.gif'
         ); // prettier-ignore
 
         const madeLink = InfoState(
-          'You made your first link! You can view your links by selecting the blue dot.',
-          {
-            linkCreated: [() => !numDocLinks(), () => multipleDocs],
-            linkViewed: [() => linkMenuOpen(), () => {
-              alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
-              return viewedLink;
-            }],
-          },
-          'dash-following-link.gif'
+            'You made your first link! You can view your links by selecting the blue dot.',
+            {
+                linkCreated: [() => !numDocLinks(), () => multipleDocs],
+                linkViewed: [() => linkMenuOpen(), () => {
+                    alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
+                    return viewedLink;
+                }],
+            },
+            'dash-following-link.gif'
         ); // prettier-ignore
 
         const viewedLink = InfoState(
-          'Great work. You are now ready to create your own hypermedia world. Click the blinking question mark to learn more.',
-          {
-            linkDeleted: [() => !numDocLinks(), () => multipleDocs],
-            docRemoved: [() => numDocs() < 2, () => oneDoc],
-            docCreated: [() => numDocs() == 3, () => {
-                trail = pin().length;
-                return presentDocs;
-            }],
-            activePen: [() => activeTool() === InkTool.Pen, () => penMode],
-          },
-          'documentation.png',
-          () => TopBar.Instance.FlipDocumentationIcon()
+            'Great work. You are now ready to create your own hypermedia world. Click the ? icon in the top right corner to learn more.',
+            {
+                linkDeleted: [() => !numDocLinks(), () => multipleDocs],
+                docRemoved: [() => numDocs() < 2, () => oneDoc],
+                docCreated: [() => numDocs() == 3, () => {
+                    trail = pin().length;
+                    return presentDocs;
+                }],
+                activePen: [() => activeTool() === InkTool.Pen, () => penMode],
+            },
+            'documentation.png',
+            () => TopBar.Instance.FlipDocumentationIcon()
         ); // prettier-ignore
 
         const presentDocs = InfoState(
@@ -275,9 +281,12 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             docCreated: [() => numDocs() == 4, () => completed],
         });
 
-        const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', {
-            docRemoved: [() => numDocs() == 1, () => oneDoc],
-        }); // prettier-ignore
+        const completed = InfoState(
+            'Eager to learn more? Click the ? icon in the top right corner to read our full documentation.',
+            { docRemoved: [() => numDocs() == 1, () => oneDoc] },
+            'documentation.png',
+            () => TopBar.Instance.FlipDocumentationIcon()
+        ); // prettier-ignore
 
         return start;
     };
-- 
cgit v1.2.3-70-g09d2


From 1026f7079f14d4755d7aa0118bb83591ea719d83 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 13 Mar 2024 10:25:55 -0400
Subject: fixed getAllDirectLinks to access DocData instead of the passed Doc.

---
 src/client/util/LinkManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index dd3b9bd07..0c8d18a7a 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -162,7 +162,7 @@ export class LinkManager {
         return this.relatedLinker(anchor);
     } // finds all links that contain the given anchor
     public getAllDirectLinks(anchor?: Doc): Doc[] {
-        return anchor ? Array.from(anchor[DirectLinks]) : [];
+        return anchor ? Array.from(anchor[DocData][DirectLinks]) : [];
     } // finds all links that contain the given anchor
 
     relatedLinker = computedFn(function relatedLinker(this: any, anchor: Doc): Doc[] {
-- 
cgit v1.2.3-70-g09d2


From 9bf84a22532262f05920142b1b4932a5e832f522 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 13 Mar 2024 10:46:58 -0400
Subject: cleaned up currState in freeform ui

---
 .../collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index fcc89d662..3b1847c00 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -26,12 +26,12 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
     constructor(props: any) {
         super(props);
         makeObservable(this);
-        this.currState = this.setupStates();
+        this._currState = this.setupStates();
     }
     _originalbackground: string | undefined;
 
     @observable _currState: infoState | undefined = undefined;
-    get currState() { return this._currState!; } // prettier-ignore
+    get currState() { return this._currState; } // prettier-ignore
     set currState(val) { runInAction(() => (this._currState = val)); } // prettier-ignore
 
     componentWillUnmount(): void {
@@ -42,7 +42,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         if (state) {
             this.currState = state;
             this.currState[StateEntryFunc]?.();
-            // TopBar.Instance.FlipDocumentationIcon();
         }
     };
 
@@ -292,6 +291,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
     };
 
     render() {
-        return <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
+        return !this.currState ? null : <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
     }
 }
-- 
cgit v1.2.3-70-g09d2


From 088603bf5a56e84baa3bfd5b9a45c9196df19332 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 13 Mar 2024 17:03:11 -0400
Subject: css and other cleanup for info UI

---
 .../CollectionFreeFormInfoState.tsx                | 60 ++++++++--------------
 .../CollectionFreeFormInfoUI.tsx                   | 43 ++--------------
 .../collectionFreeForm/CollectionFreeFormView.scss | 39 +++++++-------
 3 files changed, 45 insertions(+), 97 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 7661f5aff..24aedfa56 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -18,9 +18,9 @@ export const StateMessageGIF = Symbol('StateMessageGIF');
 export const StateEntryFunc = Symbol('StateEntryFunc');
 export class infoState {
     [StateMessage]: string = '';
-    [key: string]: infoArc;
     [StateMessageGIF]?: string = '';
     [StateEntryFunc]?: () => any;
+    [key: string]: infoArc;
     constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) {
         this[StateMessage] = message;
         Object.assign(this, arcs);
@@ -58,6 +58,7 @@ export interface CollectionFreeFormInfoStateProps {
 export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> {
     _disposers: IReactionDisposer[] = [];
     @observable _hide = false;
+    @observable _expanded = false;
 
     constructor(props: any) {
         super(props);
@@ -72,22 +73,16 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     }
 
     clearState = () => this._disposers.map(disposer => disposer());
-    initState = () =>
-        (this._disposers = this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(arc => {
-            return reaction(
-                //
+    initState = () => (this._disposers = 
+        this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(
+            arc => reaction(
                 arc.test,
-                res => {
-                    if (res) {
-                        const next = arc.act(res);
-                        this._props.next(next);
-                    }
-                },
+                res => res && this._props.next(arc.act(res)),
                 { fireImmediately: true }
-            );
-        }));
+            )
+        )); // prettier-ignore
 
-    componentDidMount(): void {
+    componentDidMount() {
         this.initState();
     }
     componentDidUpdate(prevProps: Readonly<CollectionFreeFormInfoStateProps>) {
@@ -95,39 +90,24 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
         this.clearState();
         this.initState();
     }
-    componentWillUnmount(): void {
+    componentWillUnmount() {
         this.clearState();
     }
 
-    toggleGIF(): void {
-        let dots = document.getElementById('dots');
-        var moreText = document.getElementById('gif');
-        var btnText = document.getElementById('toggle-gif');
-
-        if (dots && btnText && moreText) {
-            if (dots.style.display === 'none') {
-                dots.style.display = 'inline';
-                moreText.style.display = 'none';
-                btnText.innerHTML = 'Show more';
-            } else {
-                dots.style.display = 'none';
-                moreText.style.display = 'inline';
-                btnText.innerHTML = 'Show less';
-            }
-        }
-    }
     render() {
+        const gif = this.State?.[StateMessageGIF];
         return (
-            <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}>
-                <div className="msg">{this.State?.[StateMessage]}</div>
-                <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
-                    <span id="dots"></span>
-                    <img id="gif" className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
-                    <button id="toggle-gif" onClick={() => this.toggleGIF()}>
-                        Show less
+            <div className={'collectionFreeform-' + (this._hide ? 'hidden' : 'infoUI')}>
+                <p className="collectionFreeform-infoUI-msg">
+                    {this.State?.[StateMessage]}
+                    <button className={'collectionFreeform-' + (!gif ? 'hidden' : 'infoUI-button')} onClick={action(() => (this._expanded = !this._expanded))}>
+                        {this._expanded ? 'Less...' : 'More...'}
                     </button>
+                </p>
+                <div className={'collectionFreeform-' + (!this._expanded || !gif ? 'hidden' : 'infoUI-gif-container')}>
+                    <img src={`/assets/${gif}`} alt="state message gif" />
                 </div>
-                <div style={{ position: 'absolute', top: -10, left: -10 }}>
+                <div className="collectionFreeform-infoUI-close">
                     <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />
                 </div>
             </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 3b1847c00..f8fe2bb0b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -61,6 +61,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const docNewY = () => firstDoc()?.y;
 
         const linkStart = () => DocumentLinksButton.StartLink;
+        const linkUnstart = () => !DocumentLinksButton.StartLink;
 
         const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
         const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
@@ -94,51 +95,16 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
                     docX = firstDoc()?.x;
                     docY = firstDoc()?.y;
-                    return movedDoc1;
+                    return movedDoc;
                 }],
             }
         ); // prettier-ignore
 
-        const movedDoc1 = InfoState(
-            'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+        const movedDoc = InfoState(
+            'Great moves. Try creating a second document. You can see the list of supported document types by typing a colon (\":\")',
             {
                 docCreated: [() => numDocs() == 2, () => multipleDocs],
                 docDeleted: [() => numDocs() < 1, () => start],
-                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                    docX = firstDoc()?.x;
-                    docY = firstDoc()?.y;
-                    return movedDoc2;
-                }],
-            },
-            'dash-colon-menu.gif',
-            () => TopBar.Instance.FlipDocumentationIcon()
-        ); // prettier-ignore
-
-        const movedDoc2 = InfoState(
-            'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
-            {
-                docCreated: [() => numDocs() == 2, () => multipleDocs],
-                docDeleted: [() => numDocs() < 1, () => start],
-                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                    docX = firstDoc()?.x;
-                    docY = firstDoc()?.y;
-                    return movedDoc3;
-                }],
-            },
-            'dash-colon-menu.gif',
-            () => TopBar.Instance.FlipDocumentationIcon()
-        ); // prettier-ignore
-
-        const movedDoc3 = InfoState(
-            'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
-            {
-                docCreated: [() => numDocs() == 2, () => multipleDocs],
-                docDeleted: [() => numDocs() < 1, () => start],
-                docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                    docX = firstDoc()?.x;
-                    docY = firstDoc()?.y;
-                    return movedDoc1;
-                }],
             },
             'dash-colon-menu.gif',
             () => TopBar.Instance.FlipDocumentationIcon()
@@ -156,6 +122,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const startedLink = InfoState(
             'Now click the highlighted link icon on your other document.',
             {
+                linkUnstart: [() => linkUnstart(), () => multipleDocs],
                 linkCreated: [() => numDocLinks(), () => madeLink],
                 docRemoved: [() => numDocs() < 2, () => oneDoc],
             },
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 9e7d364ea..2c94446fb 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -273,33 +273,34 @@
 
     margin: 15px;
     padding: 10px;
+    .collectionFreeform-infoUI-close {
+        position: absolute;
+        top: -10;
+        left: -10;
+    }
 
-    .msg {
+    .collectionFreeform-infoUI-msg {
+        position: relative;
+        max-width: 500;
+        margin: 10;
+    }
+    .collectionFreeform-infoUI-button {
+        border-radius: 50px;
+        font-size: 12px;
+        padding: 6;
         position: relative;
-        // display: block;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -o-user-select: none;
-        user-select: none;
     }
 
-    .gif-container {
+    .collectionFreeform-infoUI-gif-container {
         position: relative;
         margin-top: 5px;
-        // display: block;
+        pointer-events: none;
 
-        justify-content: center;
-        align-items: center;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -o-user-select: none;
-        user-select: none;
-
-        .gif {
-            background-color: transparent;
+        > img {
             height: 300px;
         }
     }
+    .collectionFreeform-hidden {
+        display: none;
+    }
 }
-- 
cgit v1.2.3-70-g09d2


From 425abe7d8e363ae07583d86bbad3184c22780198 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 14 Mar 2024 08:31:06 -0400
Subject: remove .dmg

---
 .../public/assets/nProtectOnlineSecurityV1.dmg       | Bin 19716090 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/server/public/assets/nProtectOnlineSecurityV1.dmg

(limited to 'src')

diff --git a/src/server/public/assets/nProtectOnlineSecurityV1.dmg b/src/server/public/assets/nProtectOnlineSecurityV1.dmg
deleted file mode 100644
index 5d72a0b0a..000000000
Binary files a/src/server/public/assets/nProtectOnlineSecurityV1.dmg and /dev/null differ
-- 
cgit v1.2.3-70-g09d2


From a5d81be52ec685aede35791a706e5e1cb7f40613 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 14 Mar 2024 08:45:16 -0400
Subject: fixed disabling info ui to keep it off -- use settings manager to
 turn it back on.

---
 src/client/util/SettingsManager.tsx                                   | 3 ++-
 .../collections/collectionFreeForm/CollectionFreeFormInfoState.tsx    | 4 ++--
 .../views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx | 2 +-
 .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx   | 4 ++--
 src/fields/Doc.ts                                                     | 2 ++
 5 files changed, 9 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 682704770..8594a1c92 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -483,7 +483,8 @@ export class SettingsManager extends React.Component<{}> {
                             toggleStatus={BoolCast(Doc.defaultAclPrivate)}
                             onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))}
                         />
-                        <Toggle toggleType={ToggleType.SWITCH} formLabel={'Enable Sharing UI'} color={SettingsManager.userColor} toggleStatus={BoolCast(Doc.IsSharingEnabled)} onClick={action(() => (Doc.IsSharingEnabled = !Doc.IsSharingEnabled))} />
+                        <Toggle toggleType={ToggleType.SWITCH} formLabel="Enable Sharing UI" color={SettingsManager.userColor} toggleStatus={BoolCast(Doc.IsSharingEnabled)} onClick={action(() => (Doc.IsSharingEnabled = !Doc.IsSharingEnabled))} />
+                        <Toggle toggleType={ToggleType.SWITCH} formLabel="Disable Info UI" color={SettingsManager.userColor} toggleStatus={BoolCast(Doc.IsInfoUIDisabled)} onClick={action(() => (Doc.IsInfoUIDisabled = !Doc.IsInfoUIDisabled))} />
                     </div>
                 </div>
             </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 24aedfa56..73dd7fea3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import './CollectionFreeFormView.scss';
+import { Doc } from '../../../../fields/Doc';
 
 /**
  * An Fsa Arc.  The first array element is a test condition function that will be observed.
@@ -57,7 +58,6 @@ export interface CollectionFreeFormInfoStateProps {
 @observer
 export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> {
     _disposers: IReactionDisposer[] = [];
-    @observable _hide = false;
     @observable _expanded = false;
 
     constructor(props: any) {
@@ -97,7 +97,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     render() {
         const gif = this.State?.[StateMessageGIF];
         return (
-            <div className={'collectionFreeform-' + (this._hide ? 'hidden' : 'infoUI')}>
+            <div className={'collectionFreeform-infoUI'}>
                 <p className="collectionFreeform-infoUI-msg">
                     {this.State?.[StateMessage]}
                     <button className={'collectionFreeform-' + (!gif ? 'hidden' : 'infoUI-button')} onClick={action(() => (this._expanded = !this._expanded))}>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index f8fe2bb0b..cc729decc 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -8,10 +8,10 @@ import { DocumentManager } from '../../../util/DocumentManager';
 import { LinkManager } from '../../../util/LinkManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton';
+import { TopBar } from '../../topbar/TopBar';
 import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
 import { CollectionFreeFormView } from './CollectionFreeFormView';
 import './CollectionFreeFormView.scss';
-import { TopBar } from '../../topbar/TopBar';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 9500b918a..7bfbbf3f9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1417,8 +1417,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return anchor;
     };
 
-    @action closeInfo = () => (this.Document._hideInfo = true);
-    infoUI = () => (this.Document._hideInfo || this.Document.annotationOn || this._props.renderDepth ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />);
+    @action closeInfo = () => (Doc.IsInfoUIDisabled = true);
+    infoUI = () => (Doc.IsInfoUIDisabled || this.Document.annotationOn || this._props.renderDepth ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />);
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index e47bfcbed..7060202d7 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -182,6 +182,8 @@ export class Doc extends RefField {
     public static set noviceMode(val)         { Doc.UserDoc().noviceMode = val; } // prettier-ignore
     public static get IsSharingEnabled()      { return BoolCast(Doc.UserDoc().isSharingEnabled); } // prettier-ignore
     public static set IsSharingEnabled(val)   { Doc.UserDoc().isSharingEnabled = val; } // prettier-ignore
+    public static get IsInfoUIDisabled()      { return Doc.UserDoc().isInfoUIDisabled ? true : false; } // prettier-ignore
+    public static set IsInfoUIDisabled(val)   { Doc.UserDoc().isInfoUIDisabled = val; } // prettier-ignore
     public static get defaultAclPrivate()     { return Doc.UserDoc().defaultAclPrivate; } // prettier-ignore
     public static set defaultAclPrivate(val)  { Doc.UserDoc().defaultAclPrivate = val; } // prettier-ignore
     public static get ActivePage()            { return StrCast(Doc.UserDoc().activePage); } // prettier-ignore
-- 
cgit v1.2.3-70-g09d2