in it to win it

6 files changed, 137 insertions, 15 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index f42c15c14..80e13875c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -676,6 +676,7 @@ pie title Minerals in my tap water
             { title: "Color",     icon:"palette",        toolTip:"Sort by document color",                     btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"color",  funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "AI Sort",     icon:"robot",        toolTip:"Have Chat GPT sort your cards for you !",   btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"chat",  funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Pile",     icon:"layer-group",        toolTip:"View the cards as a pile in the free form view !",   btnType: ButtonType.ClickButton,  expertMode: false, toolType:"pile",  funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Chat Popup", icon:"lightbulb",     toolTip:"Toggle the chat popup's visibility!", width: 50,btnType: ButtonType.ToggleButton, expertMode: false, toolType:"toggle-chat",  funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'} },
 
             { title: "Sort",    toolTip: "Manage sort order / lock status",   icon: "sort" ,        btnType: ButtonType.MultiToggleButton,                 toolType:"alignment", ignoreClick: true,
               subMenu: [
@@ -684,7 +685,7 @@ pie title Minerals in my tap water
             ]},
 
             { title: "Filter", icon:"Filter",     toolTip:"Filter cards by tags", width: 150, subMenu: this.cardGroupTools(), expertMode: false, toolType:CollectionViewType.Card,  funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} },
-
+            
 
 
             
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 7ad5cd88c..6c95bf4db 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -550,7 +550,8 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faSatellite,
                 fa.faStar,
                 fa.faCloud,
-                fa.faBolt
+                fa.faBolt,
+                fa.faLightbulb
             ]
         );
     }
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 60befebec..907a5a343 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -613,9 +613,11 @@ export class CollectionCardView extends CollectionSubView() {
         const isEmpty = this.childDocsWithoutLinks.length === 0;
         const isDesc = BoolCast(this.Document.cardSort_isDesc)
 
+        console.log(this.childDocsWithoutLinks.length + "length")
+
         if (isEmpty) {
             return (
-                <span className="no-card-span" style={{ width: `100%` }}>
+                <span className="no-card-span" style={{ width: ` ${this._props.PanelWidth()}px`, height: ` ${this._props.PanelHeight()}px` }}>
                     Sorry ! There are no cards in this group
                 </span>
             );
@@ -676,6 +678,10 @@ export class CollectionCardView extends CollectionSubView() {
     };
 
     render() {
+        const isEmpty = this.childDocsWithoutLinks.length === 0;
+        const transformValue = `scale(${1 / this.fitContentScale})`;
+        const heightValue = `${100 * this.fitContentScale}%`;
+    
         return (
             <div
                 onPointerMove={e => this.onPointerMove(e)}
@@ -688,9 +694,9 @@ export class CollectionCardView extends CollectionSubView() {
                 <div
                     className="card-wrapper"
                     style={{
-                        transform: ` scale(${1 / this.fitContentScale})`,
-                        height: `${100 * this.fitContentScale}%`,
-                        gridAutoRows: `${100/this.numRows}%`
+                        ...(!isEmpty && { transform: transformValue }),
+                        ...(!isEmpty && { height: heightValue }),
+                        gridAutoRows: `${100 / this.numRows}%`
                     }}
                     onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
                     {this.renderCards()}
@@ -698,4 +704,5 @@ export class CollectionCardView extends CollectionSubView() {
             </div>
         );
     }
+    
 }
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 2ecde0eee..6ea1751a9 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -42,6 +42,7 @@ import { CollectionViewType } from '../../documents/DocumentTypes';
 // import { InkTranscription } from '../InkTranscription';
 import { Docs } from '../../documents/Documents';
 import { CollectionSubView } from '../collections/CollectionSubView';
+import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
 
 // eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function IsNoneSelected() {
@@ -145,7 +146,7 @@ ScriptingGlobals.add(function showFreeform(attr: 'center' | 'grid' | 'snaplines'
     }
 
     // prettier-ignore
-    const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'heart' | 'star' | 'cloud' | 'bolt' | 'chat' | '1' | '2' | '3' | '4' | 'up' | 'down' | 'pile', 
+    const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'heart' | 'star' | 'cloud' | 'bolt' | 'chat' | '1' | '2' | '3' | '4' | 'up' | 'down' | 'pile' | 'toggle-chat', 
     { 
         waitForRender?: boolean; 
         checkResult: (doc: Doc) => any; 
@@ -242,6 +243,14 @@ ScriptingGlobals.add(function showFreeform(attr: 'center' | 'grid' | 'snaplines'
                 doc.cardSort_isDesc = true;
             },
         }],
+        ['toggle-chat', {
+            checkResult: (doc: Doc) => GPTPopup.Instance.visible,
+            setDoc: (doc: Doc, dv: DocumentView) => {
+                GPTPopup.Instance.setVisible(!GPTPopup.Instance.visible);
+                GPTPopup.Instance.setMode(GPTPopupMode.SORT);
+
+            },
+        }],
         ['pile', {
             checkResult: (doc: Doc) => doc._type_collection == CollectionViewType.Freeform,
             setDoc: (doc: Doc, dv: DocumentView) => {
@@ -269,7 +278,8 @@ ScriptingGlobals.add(function showFreeform(attr: 'center' | 'grid' | 'snaplines'
 
                 // if (doc.type == DocumentType.COL ) {
                     newCol && dv.ComponentView?.addDocument?.(newCol);
-                    dv.ComponentView?._props.focus(newCol, {willPan: true , willZoomCentered: true, zoomScale: 200} )
+                    // dv.ComponentView?._props.focus(newCol, {willPan: true , willZoomCentered: true, zoomScale: 200} )
+                    DocumentView.showDocument(newCol, { willZoomCentered: true })
 
                 // }
                 // doc as CollectionFreeFormView
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 042b1dea5..291f272ce 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -7,10 +7,13 @@ $highlightedText: #82e0ff;
 
 .summary-box {
     position: fixed;
-    bottom: 10px;
-    right: 10px;
+    top: 115px;
+    left: 75px;
     width: 250px;
+    height: 200px;
     min-height: 200px;
+    min-width: 180px;
+
     border-radius: 16px;
     padding: 16px;
     padding-bottom: 0;
@@ -21,6 +24,18 @@ $highlightedText: #82e0ff;
     background-color: #ffffff;
     box-shadow: 0 2px 5px #7474748d;
     color: $textgrey;
+    resize: both; /* Allows resizing */
+    overflow: auto;
+
+    .resize-handle {
+        width: 10px;
+        height: 10px;
+        background: #ccc;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        cursor: se-resize;
+      }
 
     .summary-heading {
         display: flex;
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 5a5e80dc4..71d437c3d 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -354,6 +354,84 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         }
     };
 
+    cardMenu = () => (
+        <div className="btns-wrapper-gpt">
+            <Button
+                tooltip="Have ChatGPT sort your cards for you!"
+                text="Sort Cards!"
+                onClick={this.generateSort}
+                color={StrCast(Doc.UserDoc().userVariantColor)}
+                type={Type.TERT}
+                style={{
+                    width: '90%',
+                    textAlign: 'center',
+                    color: '#ffffff',
+                    fontSize: '16px',
+                }}
+            />
+            <Button
+                tooltip="Test your knowledge with ChatGPT!"
+                text="Quiz Cards!"
+                onClick={this.generateSort}
+                color={StrCast(Doc.UserDoc().userVariantColor)}
+                type={Type.TERT}
+                style={{
+                    width: '90%',
+                    textAlign: 'center',
+                    color: '#ffffff',
+                    fontSize: '16px',
+                }}
+            />
+        </div>
+
+    )
+
+    cardActual = (opt: string) => {
+        const isSort = opt === 'sort'
+
+        if (opt === 'sort'){
+            return (
+                <>
+                            <div className="btns-wrapper-gpt">
+                                <input
+                                    className="searchBox-input"
+                                    defaultValue=""
+                                    autoComplete="off"
+                                    onChange={this.sortPromptChanged}
+                                    onKeyDown={e => {
+                                        if (e.key === 'Enter') {
+                                            this.generateSort();
+                                        }
+                                        e.stopPropagation();
+                                    }}
+                                    type="text"
+                                    placeholder= {`How do you want to sort your cards ?` }
+                                    id="search-input"
+                                    style={{ width: '100%' }}
+                                />
+                            </div>
+                            <div className="btns-wrapper-gpt">
+                                <Button
+                                    tooltip="Have ChatGPT sort your cards for you!"
+                                    text="Sort!"
+                                    onClick={this.generateSort}
+                                    color={StrCast(Doc.UserDoc().userVariantColor)}
+                                    type={Type.TERT}
+                                    style={{
+                                        width: '90%',
+                                        textAlign: 'center',
+                                        color: '#ffffff',
+                                        fontSize: '16px',
+                                    }}
+                                />
+                            </div>
+                        </>
+            )
+
+        }
+
+}
+
     sortBox = () => (
     <>
         <div>
@@ -575,12 +653,22 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
 
     render() {
         return (
-
-            <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
-                {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.mode === GPTPopupMode.DATA ? this.dataAnalysisBox() : this.mode === GPTPopupMode.IMAGE ? this.imageBox() : this.mode === GPTPopupMode.SORT ? this.sortBox() : null}
+            <div
+                className="summary-box"
+                style={{ display: this.visible ? 'flex' : 'none' }}
+            >
+                {this.mode === GPTPopupMode.SUMMARY
+                    ? this.summaryBox()
+                    : this.mode === GPTPopupMode.DATA
+                    ? this.dataAnalysisBox()
+                    : this.mode === GPTPopupMode.IMAGE
+                    ? this.imageBox()
+                    : this.mode === GPTPopupMode.SORT
+                    ? this.sortBox()
+                    : null}
+                <div className="resize-handle" />
             </div>
-
-
         );
     }
+    
 }