1 files changed, 20 insertions, 3 deletions
diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx
index c72d48ef5..8aa6bff2b 100644
--- a/src/client/views/nodes/IconTagBox.tsx
+++ b/src/client/views/nodes/IconTagBox.tsx
@@ -26,6 +26,9 @@ import { setupMoveUpEvents } from "../../../ClientUtils";
 import { returnFalse } from "../../../ClientUtils";
 import { emptyFunction } from "../../../Utils";
 import { CollectionViewType } from "../../documents/DocumentTypes";
+import { SnappingManager } from "../../util/SnappingManager";
+import { MainView } from "../MainView";
+import { PropertiesView } from "../PropertiesView";
 
 
 export interface IconTagProps {
@@ -129,7 +132,7 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
     renderButtons = (doc: Doc): JSX.Element | null => {
         // if (cardSort !== cardSortings.Custom) return null;
 
-        const amButtons = StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length
+        const amButtons = (StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length) + 1
 
         const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
 
@@ -146,7 +149,7 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
 
         // const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc);
 
-        const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6;
+        const totalWidth = (amButtons -1) * 35 + (amButtons -1) * 2 * 5 + 6;
 
         const iconMap =  (buttonID: number)  => {
             return StrCast(Doc.UserDoc()[keys[buttonID]])
@@ -169,17 +172,31 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
                 fontSize: '50px'
             }}
             >           
-                {numberRange(amButtons).map(i => (
+                {numberRange(amButtons-1).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))}
                         </button>
                     </Tooltip>
                 ))}
+
+                {/* <Tooltip title={<div className="dash-tooltip">Click to customize these icons</div>}>
+                        <button type="button" onClick={() => this.openHotKeyMenu() }>
+                            <FontAwesomeIcon icon='gear' style={{ color: '#17438a', height: '30px', width: '30px'}} />
+                        </button>
+                </Tooltip> */}
             </div>
         );
     };
 
+    openHotKeyMenu = () => {
+        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
+    }
+
       /**
      * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt
      * @param childPairIndex