1 files changed, 13 insertions, 10 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 91a7c6514..e0cee2126 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
@@ -16,6 +15,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 {
     STAR = 'star',
@@ -34,7 +34,7 @@ export class CollectionCarouselView extends CollectionSubView() {
     private _dropDisposer?: DragManager.DragDropDisposer;
     get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore
     get sideField()     { return "_" + this.fieldKey + "_usePath"; } // prettier-ignore
-    get starField()     { return "star"; } // prettier-ignore
+    get starField()     { return "#star"; } // prettier-ignore
 
     _fadeTimer: NodeJS.Timeout | undefined;
 
@@ -63,7 +63,7 @@ export class CollectionCarouselView extends CollectionSubView() {
     @computed get practiceMessage() {
         const cardCount = this.carouselItems.length;
         if (this.practiceMode) {
-            if (!Doc.hasDocFilter(this.layoutDoc, 'star') && !cardCount) {
+            if (!Doc.hasDocFilter(this.layoutDoc, 'tags', this.starField) && !cardCount) {
                 return 'Finished! Click here to view all flashcards.';
             }
         }
@@ -73,7 +73,7 @@ export class CollectionCarouselView extends CollectionSubView() {
     @computed get filterMessage() {
         const cardCount = this.carouselItems.length;
         if (!this.practiceMessage) {
-            if (Doc.hasDocFilter(this.layoutDoc, 'star') && !cardCount) {
+            if (Doc.hasDocFilter(this.layoutDoc, 'tags', this.starField) && !cardCount) {
                 return 'No starred items. Click here to view all flash cards.';
             }
             if (this.practiceMode) {
@@ -120,7 +120,10 @@ export class CollectionCarouselView extends CollectionSubView() {
     toggleStar = (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);
+        }
     };
 
     /*
@@ -272,7 +275,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                 <div>
                     <Tooltip title="star">
                         <div key="star" className="carouselView-star" onClick={this.toggleStar}>
-                            <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>
                     </Tooltip>
                     {/* <Tooltip title="add new flashcard to pile">
@@ -306,16 +309,16 @@ export class CollectionCarouselView extends CollectionSubView() {
     }
 
     togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.practiceMode ? undefined : mode);
-    toggleFilterMode = () => Doc.setDocFilter(this.Document, 'star', true, 'match', true);
+    toggleFilterMode = () => Doc.setDocFilter(this.Document, 'tags', this.starField, 'check', true);
     setColor = (mode: practiceMode | cardMode, which: string) => { return which === mode ? 'white' : 'light gray'}; //prettier-ignore
 
     @computed get menu() {
         const curDoc = this.carouselItems?.[this.carouselIndex];
         return (
             <div className="carouselView-menu">
-                <Tooltip title={Doc.hasDocFilter(this.Document, 'star') ? 'Show all cards' : 'Show only starred cards'}>
+                <Tooltip title={Doc.hasDocFilter(this.Document, 'tags', this.starField) ? 'Show all cards' : 'Show only starred cards'}>
                     <div key="back" className="carouselView-starFilter" onClick={e => this.toggleFilterMode()}>
-                        <FontAwesomeIcon icon="filter" color={Doc.hasDocFilter(this.Document, 'star') ? 'white' : 'lightgray'} size="1x" />
+                        <FontAwesomeIcon icon="filter" color={Doc.hasDocFilter(this.Document, 'tags', this.starField) ? 'white' : 'lightgray'} size="1x" />
                     </div>
                 </Tooltip>
                 <div className="carouselView-practiceModes" style={{ display: BoolCast(curDoc?._layout_isFlashcard) ? undefined : 'none' }}>
@@ -351,7 +354,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                         onClick={e => {
                             if (this.filterMessage || this.practiceMessage) {
                                 this.setPracticeMode(undefined);
-                                Doc.setDocFilter(this.layoutDoc, 'star', undefined, 'remove');
+                                Doc.setDocFilter(this.layoutDoc, 'tags', this.starField, 'remove');
                             }
                         }}>
                         {this.filterMessage || this.practiceMessage}