3 files changed, 17 insertions, 36 deletions
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index a3c8fc383..e34b66963 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -40,38 +40,17 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey /*, sel
         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.title = newHotKey;
-        },
-    }));
+        toggleActive() { this.isActive = !this.isActive; },
+        deactivate()   { this.isActive = false; },
+        startEditing() { this.isEditing = true; },
+        stopEditing()  { this.isEditing = false; },
+        setHotKey(newHotKey: string) { this.myHotKey.title = newHotKey; },
+    })); // prettier-ignore
 
     const panelRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement>(null);
 
-    const handleClick = () => {
-        state.toggleActive();
-    };
-
-    const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
-
-    /**
-     * Removes a hotkey from list
-     */
-    const removeHotKey = () => {
-        Doc.RemFromFilterHotKeys(hotKey);
-    };
+    const handleClick = () => state.toggleActive();
 
     /**
      * Updates the list of hotkeys based on the users input. replaces the old title with the new one and then assigns this new
@@ -99,9 +78,7 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey /*, sel
 
     useEffect(() => {
         document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
+        return () => document.removeEventListener('mousedown', handleClickOutside);
     }, []);
 
     const iconOpts = ['star', 'heart', 'bolt', 'satellite', 'palette', 'robot', 'lightbulb', 'highlighter', 'book', 'chalkboard'] as IconProp[];
@@ -172,7 +149,7 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey /*, sel
                 className="hotKey-close"
                 onClick={(e: React.MouseEvent) => {
                     e.stopPropagation();
-                    removeHotKey();
+                    Doc.RemFromFilterHotKeys(hotKey);
                 }}>
                 <FontAwesomeIcon icon={'x' as IconProp} color={SnappingManager.userColor} />
             </button>
diff --git a/src/client/views/TagsView.tsx b/src/client/views/TagsView.tsx
index 2f30edb80..f44fd1d03 100644
--- a/src/client/views/TagsView.tsx
+++ b/src/client/views/TagsView.tsx
@@ -85,7 +85,7 @@ export class TagItem extends ObservableReactComponent<TagItemProps> {
     public static allDocsWithTag = (tag: string) => DocListCast(TagItem.findTagCollectionDoc(tag)?.[DocData].docs);
 
     public static docHasTag = (doc: Doc, tag: string) => {
-        return StrListCast(doc.tags).includes(tag);
+        return StrListCast(doc?.tags).includes(tag);
     };
     /**
      * Adds a tag to the metadata of this document and adds the Doc to the corresponding tag collection Doc (or creates it)
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 4609be374..974cd3e36 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -14,6 +14,7 @@ import { FieldViewProps } from '../nodes/FieldView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import './CollectionCarouselView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
+import { TagItem } from '../TagsView';
 
 enum cardMode {
     PRACTICE = 'practice',
@@ -28,7 +29,7 @@ enum practiceVal {
 export class CollectionCarouselView extends CollectionSubView() {
     private _dropDisposer?: DragManager.DragDropDisposer;
     get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore
-    get starField()     { return "star"; } // prettier-ignore
+    get starField()     { return "#star"; } // prettier-ignore
 
     _fadeTimer: NodeJS.Timeout | undefined;
     _resetter: IReactionDisposer | undefined;
@@ -108,7 +109,10 @@ export class CollectionCarouselView extends CollectionSubView() {
     star = (e: React.MouseEvent) => {
         e.stopPropagation();
         const curDoc = this.carouselItems[this.carouselIndex];
-        curDoc && (curDoc[this.starField] = curDoc[this.starField] ? undefined : true);
+        if (curDoc) {
+            if (TagItem.docHasTag(curDoc, this.starField)) TagItem.removeTagFromDoc(curDoc, this.starField);
+            else TagItem.addTagToDoc(curDoc, this.starField);
+        }
     };
 
     /*
@@ -241,7 +245,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                     <FontAwesomeIcon icon="chevron-right" size="2x" />
                 </div>
                 <div key="star" className="carouselView-star" onClick={this.star}>
-                    <FontAwesomeIcon icon="star" color={this.carouselItems?.[this.carouselIndex][this.starField] ? 'yellow' : 'gray'} size="1x" />
+                    <FontAwesomeIcon icon="star" color={TagItem.docHasTag(this.carouselItems?.[this.carouselIndex], this.starField) ? 'yellow' : 'gray'} size="1x" />
                 </div>
                 <div key="remove" className="carouselView-remove" onClick={e => this.setPracticeVal(e, practiceVal.MISSED)} style={{ visibility: this.layoutDoc.filterOp === cardMode.PRACTICE ? 'visible' : 'hidden' }}>
                     <FontAwesomeIcon icon="xmark" color="red" size="1x" />