boutta get silly

10 files changed, 356 insertions, 226 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 80e13875c..380d16686 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -676,7 +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: "Chat Popup", icon:"lightbulb",     toolTip:"Toggle the chat popup's visibility!", width: 45 ,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 +684,8 @@ pie title Minerals in my tap water
                 { title: "Descending",   toolTip: "Sort the cards in descending order",btnType: ButtonType.ToggleButton, icon: "sort-down",toolType:"down",ignoreClick: true,  scripts: {onClick: '{ return showFreeform(this.toolType, _readOnly_);}'} },
             ]},
 
-            { 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)`} },
+            // { 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)`} },
+            
             
 
 
@@ -711,12 +712,13 @@ pie title Minerals in my tap water
     //         { title: "3rd", icon:"3rd",     toolTip:"Filter ideas", width: 80, subMenu: this.cardGroupTools("cloud"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("idea", true)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} },
     //     ]
     // }
-    static cardGroupTools(): Button[] {
+    static tagGroupTools(): Button[] {
         return [
-            { title: "Star", icon: "star", toolTip:"Click to toggle the star group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Heart", icon: "heart", toolTip:"Click to toggle the heart group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"heart", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Bolt", icon: "bolt", toolTip:"Click to toggle the bolt group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"bolt", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Cloud", icon: "cloud", toolTip:"Click to toggle the cloud group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"cloud", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Star", icon: "star", toolTip:"Click to toggle the star group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}},
+            { title: "Heart", icon: "heart", toolTip:"Click to toggle the heart group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"heart", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}},
+            { title: "Bolt", icon: "bolt", toolTip:"Click to toggle the bolt group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"bolt", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}},
+            { title: "Cloud", icon: "cloud", toolTip:"Click to toggle the cloud group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"cloud", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}},
+            { title: "Options", icon: "gear", toolTip:"Click to customize your filter panel",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"opts", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}},
 
 
             // { title: "Group 1", icon, toolTip:"Click to toggle group 1's visibility",  btnType: ButtonType.ToggleButton, width: 40,  expertMode: false, toolType:"1", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
@@ -847,7 +849,16 @@ pie title Minerals in my tap water
             // { title: "Visibility", icon:"Visibility",     toolTip:"Filter stars", width: 80, subMenu: this.cardGroupTools("star"),      expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("star", true)`, width: 100, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, 
             // // { title: "Custom",  icon:"cloud", toolTip:"Add Idea labels",         btnType: ButtonType.ToggleButton,          expertMode: false, toolType:"idea",                  funcs: {hidden:`showFreeform ("idea", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             // { title: "Visibility", icon:"Visibility",     toolTip:"Filter ideas", width: 80, subMenu: this.cardGroupTools("cloud"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("idea", true)`,width: 100, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} },
-            
+            { title: "Filter", icon:"=",     toolTip:"Filter cards by tags", btnType: ButtonType.MultiToggleButton, width: 150, ignoreClick: true,toolType:DocumentType.COL, 
+            subMenu: this.tagGroupTools(), funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)'}, 
+            // [
+            //     { title: "Star", icon: "star", toolTip:"Click to toggle the star group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"star", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            //     { title: "Heart", icon: "heart", toolTip:"Click to toggle the heart group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"heart", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            //     { title: "Bolt", icon: "bolt", toolTip:"Click to toggle the bolt group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"bolt", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            //     { title: "Cloud", icon: "cloud", toolTip:"Click to toggle the cloud group's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"cloud", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+
+            // ]
+        },
             { title: "Card",    icon: "Card",          toolTip: "Card View Tools",            subMenu: CurrentUserUtils.cardTools(),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
             // { title: "Create",   icon: "Create",         toolTip: "Assign card labels",   subMenu: CurrentUserUtils.labelTools(),  expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Web",     icon: "Web",           toolTip: "Web functions",        subMenu: CurrentUserUtils.webTools(),    expertMode: false, toolType:DocumentType.WEB,            funcs: {hidden: `!SelectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected
diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss
index 11614d627..374d6ecd3 100644
--- a/src/client/views/DocumentButtonBar.scss
+++ b/src/client/views/DocumentButtonBar.scss
@@ -153,6 +153,10 @@ $linkGap: 3px;
 
     &:hover {
         background-color: $black;
+        
+        .documentButtonBar-pinTypes {
+            display: flex;
+        }
     }
 }
 
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index a75c7098c..3d6436cb5 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -286,6 +286,42 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
     @computed
     get keywordButton() {
         const targetDoc = this.view0?.Document;
+
+        const metaBtn = (name: string, icon: IconProp) => {
+            const tooltip = `Show ${name}`;
+            return (
+                <Tooltip title={<div className="dash-tooltip">{tooltip}</div>}>
+                    <div className="documentButtonBar-pinIcon">
+                        <FontAwesomeIcon
+                            className="documentdecorations-icon"
+                            style={{ width: 20 }}
+                            key={icon.toString()}
+                            size="sm"
+                            icon={icon}
+                            // onPointerEnter={action(() => {
+                            //     this.subPin =
+                            //         (pinLayoutView ? 'Layout' : '') +
+                            //         (pinLayoutView && pinContentView ? ' &' : '') +
+                            //         (pinContentView ? ' Content View' : '') +
+                            //         (pinLayoutView && pinContentView ? '(shift+alt)' : pinLayoutView ? '(shift)' : pinContentView ? '(alt)' : '');
+                            // })}
+                            // onPointerLeave={action(() => {
+                            //     this.subPin = '';
+                            // })}
+                            onClick={e => {
+                                name === 'keywords' ? targetDoc && (targetDoc[DocData].showLabels = !targetDoc[DocData].showLabels) : 'hi'
+
+                               
+                            }}
+                        />
+                    </div>
+                </Tooltip>
+            );
+        };
+
+
+
+
         return !targetDoc ? null : (
             <Tooltip title={<div className="dash-keyword-button">Open keyword menu</div>}>
                 <div
@@ -294,6 +330,12 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
                     onClick={() => {
                         targetDoc[DocData].showLabels = !targetDoc[DocData].showLabels;
                     }}>
+
+                    <div className="documentButtonBar-pinTypes">
+                        {/* {pinBtn(true, false, 'window-maximize')}
+                        {pinBtn(false, true, 'address-card')}
+                        {pinBtn(true, true, 'id-card')} */}
+                    </div>
                     <FontAwesomeIcon className="documentdecorations-icon" icon="tag" />
                 </div>
             </Tooltip>
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index c97edd7f0..5db627d23 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -222,7 +222,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
             <div className="filterBox-treeView">
                 <div className="filterBox-select">
                     <div style={{ width: '100%' }}>
-                        <FieldsDropdown Document={this.Document} selectFunc={this.facetClick} showPlaceholder placeholder="add a filter" addedFields={['acl_Guest', LinkedTo]} />
+                        <FieldsDropdown Document={this.Document} selectFunc={this.facetClick} showPlaceholder placeholder="add a filter" addedFields={['acl_Guest', LinkedTo, 'Star', 'Heart', 'Bolt', 'Cloud']} />
                     </div>
                     {/* THE FOLLOWING CODE SHOULD BE DEVELOPER FOR BOOLEAN EXPRESSION (AND / OR) */}
                     {/* <div className="filterBox-select-bool"> 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 0d42f4099..f552540b8 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -90,7 +90,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
     @observable private _windowWidth: number = 0;
     @observable private _windowHeight: number = 0;
-    @observable private _dashUIWidth: number = 0; // width of entire main dashboard region including left menu buttons and properties panel (but not including the dashboard selector button row)
+    @observable  _dashUIWidth: number = 0; // width of entire main dashboard region including left menu buttons and properties panel (but not including the dashboard selector button row)
     @observable private _dashUIHeight: number = 0; // height of entire main dashboard region including top menu buttons
     @observable private _panelContent: string = 'none';
     @observable private _sidebarContent: any = Doc.MyLeftSidebarPanel;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 024db82a4..58bb67120 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -58,7 +58,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     private _widthUndo?: UndoManager.Batch;
 
     // eslint-disable-next-line no-use-before-define
-    public static Instance: PropertiesView | undefined;
+    public static Instance: PropertiesView; 
     constructor(props: any) {
         super(props);
         makeObservable(this);
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 907a5a343..410ddc355 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -516,7 +516,7 @@ export class CollectionCardView extends CollectionSubView() {
      */
     openChatPopup = async () => {
         GPTPopup.Instance.setVisible(true);
-        GPTPopup.Instance.setMode(GPTPopupMode.SORT);
+        GPTPopup.Instance.setMode(GPTPopupMode.CARD);
         const sortDesc = await this.childPairStringList(); // Await the promise to get the string result
         GPTPopup.Instance.setCardsDoneLoading(true); // Set dataDoneLoading to true after data is loaded
         GPTPopup.Instance.setSortDesc(sortDesc.join());
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 616633bc1..a48e3f9d9 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -1,10 +1,9 @@
 import { Colors } from 'browndash-components';
 import { action, runInAction } from 'mobx';
 import { aggregateBounds } from '../../../Utils';
-import { Doc, DocListCast, NumListCast, Opt } from '../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { InkTool } from '../../../fields/InkField';
-import { List } from '../../../fields/List';
 import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types';
 import { WebField } from '../../../fields/URLField';
 import { Gestures } from '../../../pen-gestures/GestureTypes';
@@ -42,7 +41,9 @@ import { CollectionViewType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
 import { CollectionSubView } from '../collections/CollectionSubView';
 import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
-
+import { PropertiesView } from '../PropertiesView';
+import { MainView } from '../MainView';
+import { SnappingManager } from '../../util/SnappingManager';
 // eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function IsNoneSelected() {
     return DocumentView.Selected().length <= 0;
@@ -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' | 'toggle-chat', 
+    const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'chat' | 'up' | 'down' | 'pile' | 'toggle-chat', 
     { 
         waitForRender?: boolean; 
         checkResult: (doc: Doc) => any; 
@@ -192,34 +193,34 @@ ScriptingGlobals.add(function showFreeform(attr: 'center' | 'grid' | 'snaplines'
             checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "color",
             setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort === "color" ? doc.cardSort = '' : doc.cardSort = 'color',
         }],
-        ['heart', {
-            checkResult: (doc: Doc) => isAttrFiltered('heart'),
-            setDoc: (doc: Doc, dv: DocumentView) => {
-                isAttrFiltered('heart') ? Doc.setDocFilter(doc, 'heart', true, 'remove') : Doc.setDocFilter(doc, 'heart', true, 'match');
-
-            }
-        }],
-        ['star', {
-            checkResult: (doc: Doc) => isAttrFiltered('star'),
-
-            setDoc: (doc: Doc, dv: DocumentView) => {
-                isAttrFiltered('star') ? Doc.setDocFilter(doc, 'star', true, 'remove') : Doc.setDocFilter(doc, 'star', true, 'match');
-            }
-        }],
-        ['bolt', {
-            checkResult: (doc: Doc) => isAttrFiltered('bolt'),
-            setDoc: (doc: Doc, dv: DocumentView) => {
-                isAttrFiltered('bolt') ? Doc.setDocFilter(doc, 'bolt', true, 'remove') : Doc.setDocFilter(doc, 'bolt', true, 'match');
-
-            }
-        }],
-        ['cloud', {
-            checkResult: (doc: Doc) => isAttrFiltered('cloud'),
-            setDoc: (doc: Doc, dv: DocumentView) => {
-                isAttrFiltered('cloud') ? Doc.setDocFilter(doc, 'cloud', true, 'remove') : Doc.setDocFilter(doc, 'cloud', true, 'match');
-
-            }
-        }],
+        // ['heart', {
+        //     checkResult: (doc: Doc) => isAttrFiltered('heart'),
+        //     setDoc: (doc: Doc, dv: DocumentView) => {
+        //         isAttrFiltered('heart') ? Doc.setDocFilter(doc, 'heart', true, 'remove') : Doc.setDocFilter(doc, 'heart', true, 'match');
+
+        //     }
+        // }],
+        // ['star', {
+        //     checkResult: (doc: Doc) => isAttrFiltered('star'),
+
+        //     setDoc: (doc: Doc, dv: DocumentView) => {
+        //         isAttrFiltered('star') ? Doc.setDocFilter(doc, 'star', true, 'remove') : Doc.setDocFilter(doc, 'star', true, 'match');
+        //     }
+        // }],
+        // ['bolt', {
+        //     checkResult: (doc: Doc) => isAttrFiltered('bolt'),
+        //     setDoc: (doc: Doc, dv: DocumentView) => {
+        //         isAttrFiltered('bolt') ? Doc.setDocFilter(doc, 'bolt', true, 'remove') : Doc.setDocFilter(doc, 'bolt', true, 'match');
+
+        //     }
+        // }],
+        // ['cloud', {
+        //     checkResult: (doc: Doc) => isAttrFiltered('cloud'),
+        //     setDoc: (doc: Doc, dv: DocumentView) => {
+        //         isAttrFiltered('cloud') ? Doc.setDocFilter(doc, 'cloud', true, 'remove') : Doc.setDocFilter(doc, 'cloud', true, 'match');
+
+        //     }
+        // }],
         ['chat', {
             checkResult: (doc: Doc) => {
                 
@@ -275,20 +276,9 @@ 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} )
                     DocumentView.showDocument(newCol, { willZoomCentered: true })
 
-                // }
-                // doc as CollectionFreeFormView
-                // doc as typeof CollectionSubView
-                
-                // doc._props
-
-                // CollectionFreeFormView.addDocumemnt
-        
-                // doc?.addDocument; //this._props.addDocument(newCol)
             },
         }],
     ]);
@@ -306,11 +296,40 @@ ScriptingGlobals.add(function showFreeform(attr: 'center' | 'grid' | 'snaplines'
     return undefined;
 });
 
-ScriptingGlobals.add(function cardHasLabel(label: string) {
+
+ScriptingGlobals.add(function handleTags(value?: any, checkResult?: boolean) {
     const selected = DocumentView.SelectedDocs().lastElement();
-    const labelNum = Number(label) - 1;
-    return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.cardSort_customField)] == labelNum));
-}, '');
+
+    function isAttrFiltered(attr: string) {
+        return StrListCast(selected._childFilters).some(filter => filter.includes(attr));
+    }
+
+        if (checkResult) {
+            return value=== 'opts' ? PropertiesView.Instance.openFilters : isAttrFiltered(value)
+        }
+
+        if (value != 'opts'){
+            isAttrFiltered(value) ? Doc.setDocFilter(selected, value, true, 'remove') : Doc.setDocFilter(selected, value, true, 'match');
+        }
+        else {
+            SnappingManager.PropertiesWidth < 5 && SnappingManager.SetPropertiesWidth(0);
+            SnappingManager.SetPropertiesWidth(MainView.Instance.propertiesWidth() < 15 ? Math.min(MainView.Instance._dashUIWidth - 50, 250) : 0);
+
+            PropertiesView.Instance.CloseAll()
+            PropertiesView.Instance.openFilters = true
+        }
+
+    
+        return undefined;
+    }, '');
+
+
+
+// ScriptingGlobals.add(function cardHasLabel(label: string) {
+//     const selected = DocumentView.SelectedDocs().lastElement();
+//     const labelNum = Number(label) - 1;
+//     return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.cardSort_customField)] == labelNum));
+// }, '');
 
 // ScriptingGlobals.add(function setCardSort(attr: "Time" | "Type"| "Color"| "ChatGPT"| "Custom 1"| "Custom 2"| "Custom 3", value?: any, checkResult?: boolean) {
 //     // const editorView = RichTextMenu.Instance?.TextView?.EditorView;
@@ -400,55 +419,53 @@ ScriptingGlobals.add(function cardHasLabel(label: string) {
 //     // return undefined;
 // });
 
-ScriptingGlobals.add(function setCardSort(value?: any, checkResult?: boolean) {
-    // const editorView = RichTextMenu.Instance?.TextView?.EditorView;
-    const selected = DocumentView.SelectedDocs().lastElement();
-
-    if (checkResult) {
-        // console.log(attr + "attricute")
-        // console.log(map.get(attr)?.checkResult(selected) + "check result")
-        console.log(StrCast(selected?.cardSort) + 'check');
-        const hi = StrCast(selected?.cardSort);
-        return StrCast(selected?.cardSortForDropDown) ?? 'Time';
-    }
-
-    function docFields(doc: Doc): void {
-        switch (value) {
-            case 'Custom 1':
-                doc.cardSort_customField = 'like';
-                break;
-            case 'Custom 2':
-                doc.cardSort_customField = 'star';
-                break;
-            case 'Custom 3':
-                doc.cardSort_customField = 'idea';
-                break;
-            case 'Chat GPT':
-                doc.cardSort = 'custom';
-                doc.cardSort_customField = 'chat';
-                break;
-            default:
-                break;
-        }
-
-        doc.cardSort_visibleSortGroups = new List<number>();
-    }
+// ScriptingGlobals.add(function setCardSort(value?: any, checkResult?: boolean) {
+//     // const editorView = RichTextMenu.Instance?.TextView?.EditorView;
+//     const selected = DocumentView.SelectedDocs().lastElement();
+//     if (checkResult) {
+//         // console.log(attr + "attricute")
+//         // console.log(map.get(attr)?.checkResult(selected) + "check result")
+//         console.log(StrCast(selected?.cardSort) + 'check');
+//         const hi = StrCast(selected?.cardSort);
+//         return StrCast(selected?.cardSortForDropDown) ?? 'Time';
+//     }
+//     function docFields(doc: Doc): void {
+//         switch (value) {
+//             case 'Custom 1':
+//                 doc.cardSort_customField = 'like';
+//                 break;
+//             case 'Custom 2':
+//                 doc.cardSort_customField = 'star';
+//                 break;
+//             case 'Custom 3':
+//                 doc.cardSort_customField = 'idea';
+//                 break;
+//             case 'Chat GPT':
+//                 doc.cardSort = 'custom';
+//                 doc.cardSort_customField = 'chat';
+//                 break;
+//             default:
+//                 break;
+//         }
+
+//         doc.cardSort_visibleSortGroups = new List<number>();
+//     }
 
-    // const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} };
-    DocumentView.Selected().map(dv => {
-        dv.Document.cardSortForDropDown = value;
+//     // const batch = map.get(attr)?.waitForRender ? UndoManager.StartBatch('set freeform attribute') : { end: () => {} };
+//     DocumentView.Selected().map(dv => {
+//         dv.Document.cardSortForDropDown = value;
 
-        if (value != 'Chat GPT') {
-            dv.Document.cardSort = value.trim().split(/\s+/)[0].toLowerCase();
-        }
-        docFields(dv.Document);
-    });
+//         if (value != 'Chat GPT') {
+//             dv.Document.cardSort = value.trim().split(/\s+/)[0].toLowerCase();
+//         }
+//         docFields(dv.Document);
+//     });
 
-    return undefined;
+//     return undefined;
 
-    // map.get(attr)?.setDoc?.();
-    // return undefined;
-});
+//     // map.get(attr)?.setDoc?.();
+//     // return undefined;
+// });
 
 // ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) {
 //     // const editorView = RichTextMenu.Instance?.TextView?.EditorView;
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 291f272ce..57973ef34 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -71,10 +71,12 @@ $highlightedText: #82e0ff;
     }
 
     .btns-wrapper-gpt {
-        height: 50px;
+        height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
+        flex-direction: column;
+
         transform: translateY(30px);
 
 
@@ -93,17 +95,20 @@ $highlightedText: #82e0ff;
         }
 
         
-    }
 
-    button {
-        font-size: 9px;
-        padding: 10px;
-        color: #ffffff;
-        width: 100%;
-        background-color: $button;
-        border-radius: 5px;
+        
     }
 
+    // button {
+    //     font-size: 9px;
+    //     padding: 10px;
+    //     color: #ffffff;
+    //     width: 100%;
+    //     background-color: $button;
+    //     border-radius: 5px;
+
+    // }
+
     .text-btn {
         &:hover {
             background-color: $button;
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 71d437c3d..bbd5ea630 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -4,7 +4,7 @@ import { Button, IconButton, Type } from 'browndash-components';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { CgClose } from 'react-icons/cg';
+import { CgClose, CgPathBack, CgArrowLeftO, CgCornerUpLeft } from 'react-icons/cg';
 import ReactLoading from 'react-loading';
 import { TypeAnimation } from 'react-type-animation';
 import { ClientUtils } from '../../../../ClientUtils';
@@ -33,6 +33,10 @@ export enum GPTPopupMode {
 }
 
 
+
+
+
+
 interface GPTPopupProps {}
 
 @observer
@@ -166,6 +170,15 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         this.chatSortPrompt = e.target.value;
     });
 
+
+    @observable quizAnswer: string = ""
+
+    quizAnswerChanged = action((e: React.ChangeEvent<HTMLInputElement>) => {
+        this.quizAnswer = e.target.value;
+    });
+
+
+
     @observable private regenerateCallback: (() => Promise<void>) | null = null;
 
     @action public setRegenerateCallback(callback: () => Promise<void>) {
@@ -359,81 +372,133 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
             <Button
                 tooltip="Have ChatGPT sort your cards for you!"
                 text="Sort Cards!"
-                onClick={this.generateSort}
+                onClick={() => this.setMode(GPTPopupMode.SORT)}
                 color={StrCast(Doc.UserDoc().userVariantColor)}
                 type={Type.TERT}
                 style={{
-                    width: '90%',
+                    width: '100%',
+                    height: '40%',
                     textAlign: 'center',
                     color: '#ffffff',
                     fontSize: '16px',
+                    marginBottom: '10px'
                 }}
             />
             <Button
                 tooltip="Test your knowledge with ChatGPT!"
                 text="Quiz Cards!"
-                onClick={this.generateSort}
+                onClick={() => this.setMode(GPTPopupMode.QUIZ)}
                 color={StrCast(Doc.UserDoc().userVariantColor)}
                 type={Type.TERT}
                 style={{
-                    width: '90%',
+                    width: '100%',
                     textAlign: 'center',
                     color: '#ffffff',
                     fontSize: '16px',
+                    height: '40%',
+
                 }}
             />
         </div>
-
     )
+    
+    cardActual = (opt: GPTPopupMode) => {
+        if (opt === GPTPopupMode.SORT) {
+            return (
+                !this.sortDone ? (
+                    <>
+                        <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: '100%',
+                                    textAlign: 'center',
+                                    color: '#ffffff',
+                                    fontSize: '16px',
+                                    height: '40%',
 
-    cardActual = (opt: string) => {
-        const isSort = opt === 'sort'
-
-        if (opt === 'sort'){
+                                }}
+                            />
+                        </div>
+                    </>
+                ) : (
+                    <div>
+                        <div className="content-wrapper">
+                            <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</p>
+                            <IconButton
+                                tooltip="Generate Again"
+                                onClick={() => this.setSortDone(false)}
+                                icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
+                                color={StrCast(Doc.UserDoc().userVariantColor)}
+                            />
+                        </div>
+                    </div>
+                )
+            );
+        } else if (opt === GPTPopupMode.QUIZ) {
             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>
-                        </>
-            )
-
+                    <div className="btns-wrapper-gpt">
+                        <input
+                            className="searchBox-input"
+                            defaultValue=""
+                            autoComplete="off"
+                            onChange={this.quizAnswerChanged}
+                            onKeyDown={e => {
+                                if (e.key === 'Enter') {
+                                    this.generateSort();
+                                }
+                                e.stopPropagation();
+                            }}
+                            type="text"
+                            placeholder="What is the selected card?"
+                            id="search-input"
+                            style={{ width: '100%' }}
+                        />
+                    </div>
+                    <div className="btns-wrapper-gpt">
+                        <Button
+                            tooltip="See how close you got to the right answer!"
+                            text="Check!"
+                            onClick={this.generateSort}
+                            color={StrCast(Doc.UserDoc().userVariantColor)}
+                            type={Type.TERT}
+                            style={{
+                                width: '90%',
+                                textAlign: 'center',
+                                color: '#ffffff',
+                                fontSize: '16px',
+                            }}
+                        />
+                    </div>
+                </>
+            );
         }
-
-}
-
+    };
+    
     sortBox = () => (
-    <>
         <div>
             {this.heading('SORTING')}
             <>
@@ -445,62 +510,13 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                         </div>
                     </div>
                 ) : (
-                    !this.sortDone && (
-                        <>
-                            <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>
-                        </>
-                    )
-                )}
-
-                {this.sortDone && (
-                    <div>
-                        <div className="content-wrapper">
-                            <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : `${this.sortRespText}`}</p>
-                            <IconButton
-                                tooltip="Generate Again"
-                                onClick={() => this.setSortDone(false)}
-                                icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
-                                color={StrCast(Doc.UserDoc().userVariantColor)}
-                            />
-                        </div>
-                    </div>
+                    (this.mode === GPTPopupMode.CARD ? this.cardMenu() : this.cardActual(this.mode)) // Call the functions to render JSX
                 )}
             </>
         </div>
-    </>
-);
+    );
+    
+    
 
     imageBox = () => (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
@@ -647,25 +663,60 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     heading = (headingText: string) => (
         <div className="summary-heading">
             <label className="summary-text">{headingText}</label>
-            {this.loading ? <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} /> : <IconButton color={StrCast(SettingsManager.userVariantColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={() => this.setVisible(false)} />}
+            {this.loading ? (
+                <ReactLoading type="spin" color="#bcbcbc" width={14} height={14} />
+            ) : (
+                <>
+                {(this.mode === GPTPopupMode.SORT || this.mode === GPTPopupMode.QUIZ) && (
+                        <IconButton
+                            color={StrCast(SettingsManager.userVariantColor)}
+                            tooltip="back"
+                            icon={<CgCornerUpLeft size="16px" />}
+                            onClick={() => this.mode = GPTPopupMode.CARD}
+                            style = {{right: '-55px'}}
+                        />
+                    )}
+                    <IconButton
+                        color={StrCast(SettingsManager.userVariantColor)}
+                        tooltip="close"
+                        icon={<CgClose size="16px" />}
+                        onClick={() => this.setVisible(false)}
+                    />
+                    
+                </>
+            )}
         </div>
     );
+        
 
     render() {
+        let content;
+        
+        switch (this.mode) {
+            case GPTPopupMode.SUMMARY:
+                content = this.summaryBox();
+                break;
+            case GPTPopupMode.DATA:
+                content = this.dataAnalysisBox();
+                break;
+            case GPTPopupMode.IMAGE:
+                content = this.imageBox();
+                break;
+            case GPTPopupMode.SORT:
+            case GPTPopupMode.CARD:
+            case GPTPopupMode.QUIZ:
+                content = this.sortBox();
+                break;
+            default:
+                content = null;
+        }
+    
         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}
+                {content}
                 <div className="resize-handle" />
             </div>
         );