liberty

6 files changed, 324 insertions, 195 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 0d8955ced..1a7c0f6e1 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -714,6 +714,17 @@ pie title Minerals in my tap water
     //     ]
     // }
     static tagGroupTools(): Button[] {
+        if (!Doc.UserDoc().activeDashboard){
+            Doc.UserDoc().myFilterHotKeyTitles = new List<string>(['Star', 'Heart', 'Bolt', 'Cloud' ])
+
+            Doc.UserDoc()['Star'] = 'star'
+            Doc.UserDoc()['Heart'] = 'heart'
+            Doc.UserDoc()['Bolt'] = 'bolt'
+            Doc.UserDoc()['Cloud'] = 'cloud'
+        
+        }
+
+
         // hack: if there's no dashboard, create default filters.  otherwise, just make sure that the Options button is preserved
         return (Doc.UserDoc().activeDashboard ? [] : [
             { title: "Star", isSystem: false, 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_);}'}},
@@ -730,7 +741,7 @@ pie title Minerals in my tap water
             // { title: "", icon, toolTip:"Click to toggle group 6's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"6", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             // { title: "", icon, toolTip:"Click to toggle group 7's visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"7", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
         ]).concat([
-            { title: "Options", isSystem: true,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: "Options", isSystem: true,icon: "gear", toolTip:"Click to customize your filter panel", btnType: ButtonType.ClickButton,  expertMode: false, toolType:"opts", funcs: {}, scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}'}}
         ])
     }
     static viewTools(): Button[] {
@@ -1045,6 +1056,7 @@ pie title Minerals in my tap water
         doc.filterDocCount = 0;
         doc.treeView_FreezeChildren = "remove|add";
         doc.activePage = doc.activeDashboard === undefined ? 'home': doc.activePage;
+
         this.setupLinkDocs(doc, linkDatabaseId);
         this.setupSharedDocs(doc, sharingDocumentId);  // sets up the right sidebar collection for mobile upload documents and sharing
         this.setupDefaultIconTemplates(doc);  // creates a set of icon templates triggered by the document deoration icon
diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index 1877cc78b..0b9076f3b 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -235,28 +235,62 @@
     width: 100%; //width: 25px;
     border-radius: 5px;
     // margin-right: 20px;
-    margin-bottom: 8px;
+    margin-top: 8px;
     border-color: #d3d3d3;
     border-style: solid;
     border-width: thin;
     transition: all 0.3s ease-out;
+    display: flex;
+    flex-direction: row;
+    padding: 5px; /* Adjust the padding value as needed */
+
 
     &:hover{
         border-color: #e9e9e9;
-        background-color: #878484
+        background-color: #6d6c6c
     }
 
 
 
-    &.active {
-        background-color: #878484;
+    // &.active {
+    //     background-color: #6d6c6c;
+
+
+
+    //     .icon-panel{
+    //         display: flex
+    //     }
+    // }
 
+    .hotKey-icon, .hotKey-close{
+        background-color: transparent;
+        border-radius: 10%;
+        padding: 5px;
 
 
-        .icon-panel{
-            display: flex
+        &:hover{
+            background-color: #616060;
         }
     }
+
+    .hotKey-close{
+        right: 30px;
+        position: fixed;  
+        padding-top: 10px;
+  
+}
+
+    .hotkey-title{
+        top: 6px;
+        position: relative;
+    }
+
+    .hotkey-title-input{
+        background-color: transparent;
+        border: none;
+        border-color: transparent;
+        outline: none;
+    }
 }
 
 .hotKeyButtons {
@@ -287,7 +321,26 @@
 }
 
 .icon-panel {
-    bottom: -14px;
+    // bottom: -14px;
+    position: absolute;
+    z-index: 10000;
+    // background-color: #616060;
+    // background-color: #323232;
+    border-color: black;
+    border-style: solid;
+    border-width: medium;
+    border-radius: 10%;
+    background-color: #323232;
+
+    .icon-panel-button{
+        background-color: #323232;
+        border-radius: 10%;
+
+
+        &:hover{
+            background-color:#7a7878
+        }
+    }
 
 
 
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index e5f9fdb51..17c5cb173 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -41,6 +41,7 @@ import { Tooltip } from '@mui/material';
 import { useLocalObservable } from 'mobx-react';
 import { useRef } from 'react';
 import { useEffect } from 'react';
+import { useState } from 'react';
 
 
 interface filterProps {
@@ -240,157 +241,74 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
         return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2));
     };
 
-    addHotkey() {
+    addHotkey(hotKey: string) {
         const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
         const filter = DocCast(buttons.Filter);
         const filter2 = DocCast(filter);
         const but2 = Doc.UserDoc().myContextMenuBtns;
 
-        console.log(DocCast(filter).data);
-
-        //[idToDoc("0bec0963-95ac-4978-8606-8af4c7b9badd"),idToDoc("f740e910-bf83-4ee3-b13a-1e63c49dd254"),idToDoc("61db82b0-025a-4cb9-937b-97b1290e8f1a"),idToDoc("1046859f-34ac-4421-bc07-ee2f2cf812e2"),idToDoc("badaff47-3c3a-4b78-a7d6-f2cbc8e45ba0")]
-
-        // const newCol = Docs.Create.CarouselDocument(DocListCast(doc[Doc.LayoutFieldKey(doc)]), {
-        //     _width: 250,
-        //     _height: 200,
-        //     _layout_fitWidth: false,
-        //     _layout_autoHeight: true,
-        // });
-
-        // CurrentUserUtils.setupContextMenuButtons()
-
-        // const hm = Docs.Create.FontIconDocument()
-
-        // DocumentView.getDocumentView(filter2)?.ComponentView?.addDocument?.(hm)
-
-        // console.log(DocumentView.getDocumentView(filter2) + "hiiiii")
-
-        // DocumentView.getDocumentView(DocCast(buttons['Card']))?.ComponentView?.addDocument?.(hm)
-
-        //         const hi = CurrentUserUtils.contextMenuTools()
 
         const newKey: Button = {
-            title: 'Bob',
-            icon: 'cloud',
-            toolTip: "Click to toggle the cloud group's visibility",
+            title: hotKey,
+            icon: 'bolt',
+            toolTip: `Click to toggle the ${hotKey}'s group's visibility`,
             btnType: ButtonType.ToggleButton,
             expertMode: false,
-            toolType: 'cloud',
+            toolType: 'bolt',
             funcs: {},
             scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' },
         };
 
         //         const heyy = [...hi, newKey]
 
-        Doc.UserDoc().myFilterHotKeyTitles = new List<string>(['hi hi', 'supppp'])
+        const currHotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
 
-        Doc.UserDoc()['hi hi'] = 'heart'
-        Doc.UserDoc()['supppp'] = 'star'
+        Doc.UserDoc().myFilterHotKeyTitles = new List<string>(currHotKeys.concat(hotKey))
 
-        //         CurrentUserUtils.setupContextMenuButtons(Doc.UserDoc());
+        Doc.UserDoc()[hotKey] = 'bolt'
+        // Doc.UserDoc()['supppp'] = 'star'
 
-        //         Doc.UserDoc().hi = Docs.Create.FontIconDocument(
-        //            { title: '',
-        //                 icon: 'map-pin',
 
-        //                 backgroundColor: '#ACCEF7',
-        //                 layout_hideAllLinks: true,
-        //                 _width: 15,
-        //                 _height: 15,
-        //                 _xPadding: 0,
-        //    }
-        //         )
+        const newBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter);
+        newBtn.isSystem = newBtn[DocData].isSystem = undefined;
 
-        //         // buttons['Filter']
+        const subDocs = DocListCast(filter.data)
+        const opts = subDocs[subDocs.length-1]
+        Doc.AddDocToList(filter, 'data', newBtn, opts, true);
 
-        // const reqdCtxtOpts: DocumentOptions = {
-        //     title: 'Filter',
-        //     undoIgnoreFields: new List<string>(['width', 'linearView_IsOpen']),
-        //     flexGap: 0,
-        //     childDragAction: dropActionType.embed,
-        //     childDontRegisterViews: true,
-        //     linearView_IsOpen: true,
-        //     ignoreClick: true,
-        //     linearView_Expandable: false,
-        //     _height: 35,
-        // };
-        const ctxtMenuBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter);
-        ctxtMenuBtn.isSystem = ctxtMenuBtn[DocData].isSystem = undefined;
-        Doc.AddDocToList(filter, 'data', ctxtMenuBtn);
-        // // // DocUtils.AssignOpts(buttons, reqdCtxtOpts, ctxtMenuBtns);
-
-        //  DocUtils.AssignOpts(DocCast(buttons['Filter']), reqdCtxtOpts, [ctxtMenuBtns]);
+        
 
-        // newCol && dv.ComponentView?.addDocument?.(newCol);
+        // console.log(filter[DocData].data + 'ok')
+        // // console.log(filter[DocData][0] + 'help')
+        // console.log(filter[DocData] + 'good grief')
 
-        // console.log(but2 + "omgg")
+        // console.log(DocCast(DocCast(filter.data))[0])
+        // this.removeHotKey()
 
-        // doc.cardSort_activeIcons = new List<string>(list.includes(icon) ? list.filter(d => d !== icon) : [...list, icon]);
+        // console.log(DocCast(filter.data) + 'HI')
+        // console.log(DocListCast(filter.data) + 'WOOOOO')
+        // console.log(DocCast(filter.data)[0] + 'hm :(')
 
-        // Doc.UserDoc().myContextMenuBtns = new List<Doc>([...buttons, newKey as Doc])
     }
 
+    
+
     hotKeyButtons() {
         const selected = DocumentView.SelectedDocs().lastElement();
 
-        function isAttrFiltered(attr: string) {
-            if (selected && selected._childFilters != undefined && selected.type === DocumentType.COL) {
-                return StrListCast(selected._childFilters).some(filter => filter.includes(attr));
-            } else {
-                return false;
-            }
-            // return selected._childFilters ? StrListCast(selected._childFilters).some(filter => filter.includes(attr)) : false;
-        }
+        // console.log(StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + "hiii")
 
         const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles);
 
-        console.log(hotKeys + 'hiihihi');
-
-        const hi = ['star', 'heart', 'bolt'];
-
-        
-
-
-        //selecting a button should make t so that the the icon on the top filter panel becomes said icon
-
+        // hotKeys.forEach(l => console.log(l + "render"))
+    
+        // Selecting a button should make it so that the icon on the top filter panel becomes said icon
         const buttons = hotKeys.map((hotKey, i) => (
-            // <div key={i} className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''} ` }
-            
-            // onClick={undoable((e: React.MouseEvent) => {
-
-            //     // if (e.target === e.currentTarget){
-            //         isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match');
-            //     // }
-            // }, hotKey)}
-
-            // // style = {{backgroundColor: `${isAttrFiltered(hotKey) ? '#878484' : SettingsManager.userBackgroundColor}`}}
-            
-            
-            // >
-                {/* <Toggle
-                    toggleStatus={isAttrFiltered(hotKey)}
-                    tooltip={'toggle filter'}
-                    text={hotKey}
-                    color={SettingsManager.userColor}
-                    icon={<FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any}/>}
-                    iconPlacement="left"
-                    align="flex-start"
-                    fillWidth
-                    toggleType={ToggleType.BUTTON}
-                    onClick={undoable(() => {
-                        isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match');
-                    }, hotKey)}
-                /> */}
-                <>
-
-                    <Tooltip key={i} title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}>
-                        <HotKeyIconButton hotKey = {hotKey} />
-
-                    </Tooltip>
-
-                   </> 
+            <Tooltip key={hotKey} title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}>
+                <HotKeyIconButton hotKey={hotKey} selected = {selected}/>
+            </Tooltip>
         ));
-
+    
         return buttons;
     }
 
@@ -465,7 +383,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
                 <div>
                     <div className="filterBox-select">
                         <div style={{ width: '100%' }}>
-                            <FieldsDropdown Document={this.Document} selectFunc={this.addHotkey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo, 'Star', 'Heart', 'Bolt', 'Cloud']} />
+                            <FieldsDropdown Document={this.Document} selectFunc={this.addHotkey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo]} />
                         </div>
                     </div>
                 </div>
@@ -590,28 +508,87 @@ interface HotKeyButtonProps {
 const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, selected}) => {
     const state = useLocalObservable(() => ({
         isActive: false,
+        isEditing: false,
+        myHotKey: hotKey,
+
         toggleActive() {
             this.isActive = !this.isActive;
         },
         deactivate() {
             this.isActive = false;
+        },
+        startEditing() {
+            this.isEditing = true;
+        },
+        stopEditing() {
+            this.isEditing = false;
+        },
+        setHotKey(newHotKey: string) {
+            this.myHotKey = newHotKey;
         }
     }));
 
     const panelRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
 
     const handleClick = () => {
         state.toggleActive();
-
-        console.log(state.isActive + "hmmm")
+        // console.log(state.isActive + "hmmm")
     };
 
+    const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
+
+    const myHotKeyDoc = () => {
+        const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
+        const filter = DocCast(buttons.Filter);
+        const hotKeyDocs = DocListCast(filter.data)
+        return hotKeyDocs.filter(k => StrCast(k.title) === hotKey)[0]
+
+    }
+
+    const removeHotKey = () => {
+        const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
+        const filter = DocCast(buttons.Filter);
+
+        Doc.RemoveDocFromList(filter, 'data', myHotKeyDoc());
+
+
+
+
+
+        // console.log((DocListCast(filter.data)[0].title) + "emmanuel")
+
+
+        // console.log(DocCast(filter.data) + 'HI')
+        // console.log(DocCast(filter.data)[0] + 'hm :(')
+
+    }
     const handleClickOutside = (event: MouseEvent) => {
         if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
             state.deactivate();
+            if (state.isEditing) {
+                state.stopEditing();
+
+                updateFromInput()
+
+
+
+                // Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.map(k => k === hotKey ? state.myHotKey : k));
+                // Doc.UserDoc()[state.myHotKey] = StrCast(Doc.UserDoc()[hotKey])
+
+            }
         }
     };
 
+    const updateFromInput = () => {
+        const hi = myHotKeyDoc()
+        Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.map(k => k === hotKey ? state.myHotKey : k));
+        Doc.UserDoc()[state.myHotKey] = StrCast(Doc.UserDoc()[hotKey])
+        hi.title = state.myHotKey
+        hi.toolTip = `Click to toggle the ${state.myHotKey}'s group's visibility`     
+    }
+
+
     useEffect(() => {
         document.addEventListener('mousedown', handleClickOutside);
         return () => {
@@ -619,73 +596,96 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
         };
     }, []);
 
-    const iconOpts = ['star', 'heart', 'bolt'];
+    const iconOpts = ['star', 'heart', 'bolt', 'satellite', 'palette', 'robot', 'lightbulb', 'highlighter', 'book', 'chalkboard' ];
 
     const iconPanel = iconOpts.map((icon, i) => (
-        <button key={i} onClick={() => Doc.UserDoc()[hotKey] = icon}>
-            <FontAwesomeIcon icon={icon as any} />
-        </button>
-    ));
+        <button key={i} onClick={(e: React.MouseEvent) => {
+            e.stopPropagation;
+            Doc.UserDoc()[hotKey] = icon;
+            const hi = myHotKeyDoc()
+            hi.icon = icon
 
-    const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
 
-    return (
-        <>
+            
+            }} className='icon-panel-button'>
+            <FontAwesomeIcon icon={icon as any} color = {SnappingManager.userColor}/>
+        </button>
+    ));
 
-        <div className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''} ` }
-                    
-                    onClick={undoable((e: React.MouseEvent) => {
+    function isAttrFiltered(attr: string) {
+        if (selected && selected._childFilters !== undefined && selected.type === DocumentType.COL) {
+            return StrListCast(selected._childFilters).some(filter => filter.includes(attr));
+        } else {
+            return false;
+        }
+    }
 
-                        // if (e.target === e.currentTarget){
-                            isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match');
-                        // }
-                    }, hotKey)}
 
-                    // style = {{backgroundColor: `${isAttrFiltered(hotKey) ? '#878484' : SettingsManager.userBackgroundColor}`}}
-                    
-                    
+    return (
+        <div className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''}`} 
+            onClick={(e) => {
+                e.stopPropagation();
+                state.startEditing();
+                setTimeout(() => inputRef.current?.focus(), 0);
+            }}
+        >
+            <div className={`hotKey-icon-button ${state.isActive ? 'active' : ''}`} ref={panelRef}>
+                <Tooltip title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}>
+                    <button
+                        type="button"
+                        className='hotKey-icon'
+                        onClick={(e: React.MouseEvent) => {
+                            e.stopPropagation(); 
+                            handleClick();
+                        }}
                     >
-        <div className={`hotKey-icon-button ${state.isActive ? 'active' : ''}`} ref={panelRef}>
-            <Tooltip title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}>
-                <button
-                    type="button"
-                    onClick={(e: React.MouseEvent) => {
-                        console.log('hiii')
-                        e.stopPropagation(); 
-                        handleClick();
-
+                        <FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any} size="2xl" color={SnappingManager.userColor}/>
+                    </button>
+                </Tooltip>
+                {state.isActive && (
+                    <div className="icon-panel">
+                        {iconPanel}
+                    </div>
+                )}
+            </div>
+            {state.isEditing ? (
+                <input
+                    ref={inputRef}
+                    type="text"
+                    value={state.myHotKey.toUpperCase()}
+                    onChange={(e) => state.setHotKey(e.target.value)}
+                    onBlur={() => {
+                        state.stopEditing();
+                        updateFromInput()
                     }}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            state.stopEditing();
+                            updateFromInput()
 
-                >
-                    <FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any} size="2xl"/>
-                </button>
-            </Tooltip>
-            {state.isActive && (
-                <div className="icon-panel" >
-                    {iconPanel}
-                </div>
+                        }
+                    }}
+                    className='hotkey-title-input'
+                />
+            ) : (
+                <p className='hotkey-title'>{hotKey.toUpperCase()}</p>
             )}
-
-            
-        </div>
-
-        <p>     {hotKey.toUpperCase()}    </p>
-
-
-        <button onClick={(e: React.MouseEvent) => { 
-            e.stopPropagation(); 
-            Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.filter(k => k !== hotKey)); 
-        }}>
-            <FontAwesomeIcon icon={'x' as any} />
-        </button>
-
+            <button className='hotKey-close' onClick={(e: React.MouseEvent) => { 
+                e.stopPropagation(); 
+                const hi = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
+                // hi.forEach((str) => {
+                //     console.log(str + "before");
+                // });
+                Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.filter(k => k !== hotKey)); 
+                removeHotKey()
+
+                // hi.forEach((str) => {
+                //     console.log(str + "after");
+                // });
+
+            }}>
+                <FontAwesomeIcon icon={'x' as any} color={SnappingManager.userColor}/>
+            </button>
         </div>
-
-
-        </>
-
-        
     );
-});
-
-
+})
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 736cc2354..52f01e239 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -95,7 +95,14 @@ export class CollectionCardView extends CollectionSubView() {
     };
 
     componentDidMount(): void {
+
         this.Document.childFilters_boolean = 'OR'
+        this.childDocsWithoutLinks.forEach(c => {
+            c[DocData].showIconTags = true
+            
+        });
+
+        
         this._disposers.sort = reaction(
             () => ({ cardSort: this.cardSort }),
             ({ cardSort}) => (cardSort === cardSortings.Chat ? this.openChatPopup() : GPTPopup.Instance.setVisible(false))
@@ -672,7 +679,7 @@ export class CollectionCardView extends CollectionSubView() {
                                 }}
                     onMouseEnter={() => this.setHoveredNodeIndex(index)}>
                     {this.displayDoc(doc, childScreenToLocal)}
-                    {this.renderButtons(doc, this.cardSort)}
+                    {/* {this.renderButtons(doc, this.cardSort)} */}
                 </div>
             );
         });
diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx
index 73360b684..cdf2075cb 100644
--- a/src/client/views/nodes/IconTagBox.tsx
+++ b/src/client/views/nodes/IconTagBox.tsx
@@ -16,6 +16,15 @@ import { BoolCast } from "../../../fields/Types";
 import { DocCast } from "../../../fields/Types";
 import './IconTagBox.scss';
 import { AclAdmin, AclAugment, AclEdit, DocData } from '../../../fields/DocSymbols';
+import { StrListCast } from "../../../fields/Doc";
+import { StrCast } from "../../../fields/Types";
+import { DocListCast } from "../../../fields/Doc";
+import { List } from "../../../fields/List";
+import { action } from "mobx";
+import { DragManager } from "../../util/DragManager";
+import { setupMoveUpEvents } from "../../../ClientUtils";
+import { returnFalse } from "../../../ClientUtils";
+import { emptyFunction } from "../../../Utils";
 
 
 export interface IconTagProps {
@@ -61,6 +70,53 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
         this._props.doc[DocData].tagHeight = 36*this.currentScale;
     }
 
+    // createCollection = () => {
+    //     // Get the documents that contain the keyword.
+    //     const selected = DocListCast(this.getKeywordCollectionDocs()!);
+    //     const newEmbeddings = selected.map(doc => Doc.MakeEmbedding(doc));
+
+    //     // Create a new collection and set up configurations.
+    //     const newCollection = ((doc: Doc) => {
+    //         const docData = doc[DocData];
+    //         docData.data = new List<Doc>(newEmbeddings);
+    //         docData.title = this._props.keyword;
+    //         doc._freeform_panX = doc._freeform_panY = 0;
+    //         return doc;
+    //     })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true));
+    //     newEmbeddings.forEach(embed => (embed.embedContainer = newCollection));
+    //     newCollection._width = 900;
+    //     newCollection._height = 900;
+    //     newCollection.layout_fitWidth = true;
+
+    //     // Add the collection to the keyword document's list of associated smart collections.
+    //     this._props.keywordDoc.collections = new List<Doc>([...DocListCast(this._props.keywordDoc.collections), newCollection]);
+    //     newCollection[DocData].data_labels = new List<string>([this._props.keyword]);
+    //     newCollection[DocData][`${this._props.keyword}`] = true;
+    //     newCollection[DocData].showLabels = true;
+    //     return newCollection;
+    // };
+
+    // @action
+    // handleDragStart = (e: React.PointerEvent) => {
+    //     if (this._props.isEditing) {
+    //         const clone = this.ref.current?.cloneNode(true) as HTMLElement;
+    //         if (!clone) return;
+
+    //         setupMoveUpEvents(
+    //             this,
+    //             e,
+    //             () => {
+    //                 const dragData = new DragManager.DocumentDragData([this.createCollection()]);
+    //                 DragManager.StartDocumentDrag([this.ref.current!], dragData, e.clientX, e.clientY, {});
+    //                 return true;
+    //             },
+    //             returnFalse,
+    //             emptyFunction
+    //         );
+    //         e.preventDefault();
+    //     }
+    // };
+
     /**
      * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups
      * @param doc
@@ -70,7 +126,10 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
     renderButtons = (doc: Doc): JSX.Element | null => {
         // if (cardSort !== cardSortings.Custom) return null;
 
-        const amButtons = 4
+        const amButtons = StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length
+
+        const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
+
 
         // const amButtons = Math.max(
         //     4,
@@ -86,11 +145,9 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
 
         const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6;
 
-        const iconMap: { [key: number]: any } = {
-            0: 'star',
-            1: 'heart',
-            2: 'cloud',
-            3: 'bolt'
+        const iconMap =  (buttonID: number)  => {
+            return StrCast(Doc.UserDoc()[keys[buttonID]])
+
         };
 
 
@@ -108,9 +165,9 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
             }}
             >           
                 {numberRange(amButtons).map(i => (
-                    <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from the {iconMap[i]} group</div>}>
-                        <button key = {i} type="button" onClick={() => this.toggleButton(doc, iconMap[i] )}>
-                            {this.getButtonIcon(doc, iconMap[i])}
+                    <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from the {iconMap(i)} group</div>}>
+                        <button key = {i} type="button" onClick={() => this.toggleButton(doc, iconMap(i) )}>
+                            {this.getButtonIcon(doc, iconMap(i))}
                         </button>
                     </Tooltip>
                 ))}
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index a41c33a4d..d216cc421 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -484,7 +484,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                                     e.stopPropagation();
                                 }}
                                 type="text"
-                                placeholder={`${isSort ? 'How do you want to sort your cards?' : 'What is the selected card?'}`}
+                                placeholder={`${isSort ? 'How do you want to sort your cards?' : 'Define the selected card?'}`}
                                 id="search-input"
                                 style={{ width: '100%' }}
                             />