1 files changed, 59 insertions, 55 deletions
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 7362a65ae..f50ca6349 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -451,77 +451,81 @@ export class CollectionCardView extends CollectionSubView() {
         GPTPopup.Instance.onSortComplete = (sortResult: string) => this.processGptOutput(sortResult);
     };
 
-    /**
+  /**
      * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups
-     * @param childPairIndex
      * @param doc
+     * @param cardSort
      * @returns
      */
-    renderButtons = (doc: Doc, cardSort: cardSortings) => {
-        if (cardSort !== cardSortings.Custom) return '';
-        const amButtons = Math.max(4, this.childDocs?.reduce((set, d) => this.cardSort_customField && set.add(NumCast(d[this.cardSort_customField])), new Set<number>()).size ?? 0);
-        const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc);
-        const totalWidth = amButtons * 72 + amButtons * 2 * 5 + 6;
-        return (
-            <div className="card-button-container" style={{ width: `${totalWidth}px`, fontSize: '50px' }} >
-                {numberRange(amButtons).map(i => (
-                    // eslint-disable-next-line jsx-a11y/control-has-associated-label
-                    <Tooltip title={<div key = {i} className="dash-tooltip">Click to add/ remove this card from group {i +1}</div>}>
+  renderButtons = (doc: Doc, cardSort: cardSortings): JSX.Element | null => {
+    if (cardSort !== cardSortings.Custom) return null;
+
+    const amButtons = Math.max(4, this.childDocs?.reduce((set, d) => {
+        if (this.cardSort_customField) {
+            set.add(NumCast(d[this.cardSort_customField]));
+        }
+        return set;
+    }, new Set<number>()).size ?? 0);
+
+    const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc);
+    const totalWidth = amButtons * 72 + amButtons * 2 * 5 + 6;
+
+    return (
+        <div className="card-button-container" style={{ width: `${totalWidth}px`, fontSize: '50px' }}>
+            {numberRange(amButtons).map(i => (
+                <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from group {i + 1}</div>}>
+                    <button type="button" onClick={() => this.toggleButton(i, doc)}>
+                        {this.getButtonIcon(activeButtonIndex === i)}
+                    </button>
+                </Tooltip>
+            ))}
+        </div>
+    );
+};
 
-                        <button key={i} type="button" 
-                        // style={{ backgroundColor: activeButtonIndex === i ? '#4476f7' : '#323232' }} 
-                        onClick={() => this.toggleButton(i, doc)}>
-                            {this.getButtonIcons(activeButtonIndex === i)}
-                        </button>
+    getButtonIcon = (isActive: boolean): JSX.Element => {
+        const iconMap: { [key: string]: any } = {
+            like: 'heart',
+            chat: 'robot',
+            idea: 'cloud'
+        };
 
-                    </Tooltip>
+        const icon = iconMap[this.cardSort_customField ?? ''] || 'star';
+        const color = isActive ? '#4476f7' : '#323232';
 
-                ))}
-            </div>
-        );
+        return <FontAwesomeIcon icon={icon} size='lg' style={{ color }} />;
     };
 
-    getButtonIcons = (isActive: boolean) => {
-        switch (this.cardSort_customField) {
-            case 'like':
-                return <FontAwesomeIcon icon = 'heart' size= 'lg' style = {{color: isActive ? '#4476f7' : '#323232'}}/>;
-            case 'chat':
-                return <FontAwesomeIcon icon = 'robot' size= 'lg' style = {{color: isActive ? '#4476f7' : '#323232'}}/>;
-            case 'idea':
-                return <FontAwesomeIcon icon = 'cloud' size= 'lg' style = {{color: isActive ? '#4476f7' : '#323232'}}/>;
-            default:
-                return <FontAwesomeIcon icon = 'star' size= 'lg' style = {{color: isActive ? '#4476f7' : '#323232'}}/>;
-        }
+
+
+        @action
+    onDragStart = (index: number) => {
+        this.draggedIndex = index;
     };
 
     @action
-onDragStart = (index: number) => {
-    this.draggedIndex = index;
-};
+    onDragOver = (index: number) => {
+        if (this.draggedIndex !== index) {
+            this.overIndex = index;
+        }
+    };
 
-@action
-onDragOver = (index: number) => {
-    if (this.draggedIndex !== index) {
-        this.overIndex = index;
-    }
-};
+    @action
+    onDrop = () => {
+        if (this.draggedIndex !== -1 && this.overIndex !== -1) {
+            const draggedDoc = this.sortedDocs[this.draggedIndex];
+            this.sortedDocs.splice(this.draggedIndex, 1);
+            this.sortedDocs.splice(this.overIndex, 0, draggedDoc);
+            this.draggedIndex = -1;
+            this.overIndex = -1;
+        }
+    };
 
-@action
-onDrop = () => {
-    if (this.draggedIndex !== -1 && this.overIndex !== -1) {
-        const draggedDoc = this.sortedDocs[this.draggedIndex];
-        this.sortedDocs.splice(this.draggedIndex, 1);
-        this.sortedDocs.splice(this.overIndex, 0, draggedDoc);
+    @action
+    onDragEnd = () => {
         this.draggedIndex = -1;
         this.overIndex = -1;
-    }
-};
-
-@action
-onDragEnd = () => {
-    this.draggedIndex = -1;
-    this.overIndex = -1;
-};
+    };
     /**
      * Actually renders all the cards
      */