2 files changed, 37 insertions, 58 deletions

diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index f53a7d163..0e4288574 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -267,6 +267,8 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
         const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string;
         const items = DocListCast(this.dataDoc.data);
         const multiDoc = this.Document;
+        const selectedItem = StrCast(items.find(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, value: undefined, _readOnly_: true }).result)?.toolType ?? StrCast(multiDoc.toolType));
+        console.log(selectedItem);
         return (
             <MultiToggle
                 tooltip={`Toggle ${tooltip}`}
@@ -282,7 +284,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
                     tooltip: StrCast(item.toolTip),
                     val: StrCast(item.toolType),
                 }))}
-                selectedVal={StrCast(items.find(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, value: undefined, _readOnly_: true }).result)?.toolType ?? StrCast(multiDoc.toolType))}
+                selectedVal={selectedItem}
                 setSelectedVal={(val: string | number) => {
                     const itemDoc = items.find(item => item.toolType === val);
                     itemDoc && ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, value: val, _readOnly_: false });
diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx
index 70992e28a..01dca0fbb 100644
--- a/src/client/views/nodes/IconTagBox.tsx
+++ b/src/client/views/nodes/IconTagBox.tsx
@@ -1,21 +1,21 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { computed } from 'mobx';
+import { action, computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react';
-import { emptyFunction, numberRange } from '../../../Utils';
-import { Doc, StrListCast } from '../../../fields/Doc';
+import { returnFalse, setupMoveUpEvents } from '../../../ClientUtils';
+import { emptyFunction } from '../../../Utils';
+import { Doc } from '../../../fields/Doc';
 import { StrCast } from '../../../fields/Types';
 import { SnappingManager } from '../../util/SnappingManager';
 import { undoable } from '../../util/UndoManager';
 import { MainView } from '../MainView';
 import { ObservableReactComponent } from '../ObservableReactComponent';
 import { PropertiesView } from '../PropertiesView';
+import { TagItem } from '../TagsView';
 import { DocumentView } from './DocumentView';
 import './IconTagBox.scss';
-import { TagItem } from '../TagsView';
-import { returnFalse, setupMoveUpEvents } from '../../../ClientUtils';
 
 export interface IconTagProps {
     Views: DocumentView[];
@@ -30,48 +30,36 @@ export interface IconTagProps {
 export class IconTagBox extends ObservableReactComponent<IconTagProps> {
     constructor(props: IconTagProps) {
         super(props);
+        makeObservable(this);
     }
 
-    @computed get View() {
-        return this._props.Views.lastElement();
-    }
-    @computed get currentScale() {
-        return this.View?.screenToLocalScale();
-    }
+    @computed get View() { return this._props.Views.lastElement(); } // prettier-ignore
+    @computed get currentScale() { return this.View?.screenToLocalScale(); } // prettier-ignore
 
     /**
-     * Opens the filter panel in the properties menu
+     * Sets or removes the specified tag
+     * @param tag tag name (should begin with '#')
+     * @param state flag to add or remove the metadata
      */
-
-    openHotKeyMenu = () => {
-        SnappingManager.PropertiesWidth < 5 && SnappingManager.SetPropertiesWidth(0);
-        SnappingManager.SetPropertiesWidth(MainView.Instance.propertiesWidth() < 15 ? 250 : 0);
-
-        PropertiesView.Instance.CloseAll();
-        PropertiesView.Instance.openFilters = true;
-    };
-
-    /**
-     * @param buttonID
-     * @param doc
-     */
-    setIconTag = undoable((icon: string, state: boolean) => {
+    setIconTag = undoable((tag: string, state: boolean) => {
         this._props.Views.forEach(view => {
-            state && TagItem.addTagToDoc(view.dataDoc, icon);
-            !state && TagItem.removeTagFromDoc(view.dataDoc, icon);
-            view.dataDoc[icon] = state;
+            state && TagItem.addTagToDoc(view.dataDoc, tag);
+            !state && TagItem.removeTagFromDoc(view.dataDoc, tag);
         });
     }, 'toggle card tag');
 
     /**
-     * Determines whether or not the given icon is active depending on the doc's data
-     * @param doc
-     * @param icon
-     * @returns
+     * Returns a renderable version of the button Doc that is colorized to indicate
+     * whether the doc has the associated tag set on it or not.
+     * @param doc doc to test
+     * @param key metadata icon button
+     * @returns an icon for the metdata button
      */
-    getButtonIcon = (doc: Doc, icon: IconProp): JSX.Element => {
-        const isActive = TagItem.docHasTag(doc, icon.toString()); // doc[icon.toString()];
-        const color = isActive ? '#4476f7' : '#323232';
+    getButtonIcon = (doc: Doc, key: Doc): JSX.Element => {
+        const icon = StrCast(key.icon) as IconProp;
+        const tag = StrCast(key.toolType);
+        const isActive = TagItem.docHasTag(doc, tag);
+        const color = isActive ? '#4476f7' : '#323232'; // TODO should use theme colors
 
         return <FontAwesomeIcon icon={icon} style={{ color, height: '20px', width: '20px' }} />;
     };
@@ -80,37 +68,26 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
      * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups
      */
     render() {
-        const amButtons = StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length + 1;
-
-        const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles);
-
-        const iconMap = (buttonID: number) => {
-            return StrCast(Doc.UserDoc()[keys[buttonID]]) as IconProp;
-        };
-        const buttons = numberRange(amButtons - 1)
-            .filter(i => this._props.IsEditing || this.View.Document[iconMap(i).toString()] || (DocumentView.Selected.length === 1 && this.View.IsSelected))
-            .map(i => (
-                <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from the {iconMap(i).toString()} group</div>}>
+        const buttons = Doc.MyFilterHotKeys 
+            .map(key => ({ key, tag: StrCast(key.toolType) }))
+            .filter(({ tag }) => this._props.IsEditing || this.View.Document[tag] || (DocumentView.Selected.length === 1 && this.View.IsSelected))
+            .map(({ key, tag }) => (
+                <Tooltip key={tag} title={<div className="dash-tooltip">Click to add/remove this card from the {tag} group</div>}>
                     <button
-                        key={i}
                         type="button"
                         onPointerDown={e =>
                             setupMoveUpEvents(this, e, returnFalse, emptyFunction, clickEv => {
-                                const state = TagItem.docHasTag(this.View.Document, iconMap(i).toString()); // this.View.Document[iconMap(i).toString()];
-                                this.setIconTag(iconMap(i), !state);
+                                this.setIconTag(tag, !TagItem.docHasTag(this.View.Document, tag));
                                 clickEv.stopPropagation();
                             })
                         }>
-                        {this.getButtonIcon(this.View.Document, iconMap(i))}
+                        {this.getButtonIcon(this.View.Document, key)}
                     </button>
                 </Tooltip>
-            ));
+            )); // prettier-ignore
+
         return !buttons.length ? null : (
-            <div
-                className="card-button-container"
-                style={{
-                    fontSize: '50px',
-                }}>
+            <div className="card-button-container" style={{ fontSize: '50px' }}>
                 {buttons}
             </div>
         );