updated carousel to show same filter as in context menu bar.

4 files changed, 39 insertions, 10 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 3e7921a08..03975a5e7 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -981,12 +981,10 @@ pie title Minerals in my tap water
         doc.fontColor ?? (doc.fontColor = "black");
         doc.fontHighlight ?? (doc.fontHighlight = "");
         doc.defaultAclPrivate ?? (doc.defaultAclPrivate = false);
-        doc.savedFilters ?? (doc.savedFilters = new List<Doc>());
         doc.userBackgroundColor ?? (doc.userBackgroundColor = Colors.DARK_GRAY);
         doc.userVariantColor ?? (doc.userVariantColor = Colors.MEDIUM_BLUE);
         doc.userColor ?? (doc.userColor = Colors.LIGHT_GRAY);
         doc.userTheme ?? (doc.userTheme = ColorScheme.Dark);
-        doc.filterDocCount = 0;
         doc.treeView_FreezeChildren = "remove|add";
         doc.activePage = doc.activeDashboard === undefined ? 'home': doc.activePage;
 
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 3545afcee..16f6aa40b 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -318,7 +318,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                         : childFilters?.().filter(f => ClientUtils.IsRecursiveFilter(f) && f !== ClientUtils.noDragDocsFilter).length || childFiltersByRanges?.().length
                         ? 'orange' // 'inheritsFilter'
                         : undefined;
-                return !showFilterIcon ? null : (
+                return !showFilterIcon || props?.hideFilterStatus ? null : (
                     <div className="styleProvider-filter">
                         <Dropdown
                             type={Type.TERT}
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 43ab4462b..b6c3744e6 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -4,7 +4,7 @@ import { IReactionDisposer, action, computed, makeObservable, observable, reacti
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { StopEvent, returnOne, returnZero } from '../../../ClientUtils';
-import { Doc, Opt } from '../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
@@ -16,6 +16,7 @@ import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import './CollectionCarouselView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
 import { TagItem } from '../TagsView';
+import { tickStep } from 'd3';
 
 enum cardMode {
     STAR = 'star',
@@ -180,9 +181,9 @@ export class CollectionCarouselView extends CollectionSubView() {
                 NativeHeight={returnZero}
                 fitWidth={undefined}
                 showTags={true}
+                hideFilterStatus={true}
                 containerViewPath={this.childContainerViewPath}
                 setContentViewBox={undefined}
-                ScreenToLocalTransform={this.childScreenToLocalXf}
                 onDoubleClickScript={this.onContentDoubleClick}
                 onClickScript={this.onContentClick}
                 isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive}
@@ -311,16 +312,45 @@ export class CollectionCarouselView extends CollectionSubView() {
     toggleFilterMode = () => Doc.setDocFilter(this.Document, 'tags', this.starField, 'check', true);
     setColor = (mode: practiceMode | cardMode, which: string) => (which === mode ? 'white' : 'light gray');
 
+    @computed get filterDoc() {
+        return DocListCast(Doc.MyContextMenuBtns.data).find(doc => doc.title === 'Filter');
+    }
+    filterHeight = () => NumCast(this.filterDoc?.height);
+    filterWidth = () => (!this.filterDoc ? 1 : (this.filterHeight() * NumCast(this.filterDoc._width)) / NumCast(this.filterDoc._height));
     @computed get menu() {
         const curDoc = this.carouselItems?.[this.carouselIndex];
         return (
             <div className="carouselView-menu">
-                {/* NOTE: this should really show the same filter as in the workspace View menu, not just something hardwire for 'star' */}
-                <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, 'tags', this.starField) ? 'white' : 'lightgray'} size="1x" />
+                {!this.filterDoc ? (null) : (
+                    <div style={{ height: this.filterHeight(), width: this.filterHeight() }}>
+                        <DocumentView
+                            {...this._props}
+                            Document={this.filterDoc}
+                            TemplateDataDocument={undefined}
+                            LayoutTemplate={this._props.childLayoutTemplate}
+                            LayoutTemplateString={this._props.childLayoutString}
+                            renderDepth={this._props.renderDepth + 1}
+                            NativeWidth={returnZero}
+                            NativeHeight={returnZero}
+                            fitWidth={undefined}
+                            showTags={false}
+                            hideFilterStatus={true}
+                            containerViewPath={this.childContainerViewPath}
+                            setContentViewBox={undefined}
+                            onDoubleClickScript={this.onContentDoubleClick}
+                            onClickScript={this.onContentClick}
+                            isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive}
+                            isContentActive={this.isChildContentActive}
+                            hideCaptions={true}
+                            childFilters={this.childDocFilters}
+                            hideDecorations={BoolCast(this.layoutDoc.layout_hideDecorations)}
+                            addDocument={this._props.addDocument}
+                            ScreenToLocalTransform={this.contentScreentToLocalXf}
+                            PanelWidth={this.filterWidth}
+                            PanelHeight={this.filterHeight}
+                        />
                     </div>
-                </Tooltip>
+                )}
                 <div className="carouselView-practiceModes" style={{ display: BoolCast(curDoc?._layout_isFlashcard) ? undefined : 'none' }}>
                     <Tooltip title="Practice flashcards using GPT">
                         <div key="back" className="carouselView-quiz" onClick={e => this.togglePracticeMode(practiceMode.QUIZ)}>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 884220722..b85cb22bb 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -68,6 +68,7 @@ export interface DocumentViewProps extends FieldViewSharedProps {
     contentPointerEvents?: Property.PointerEvents | undefined; // pointer events allowed for content of a document view.  eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents
     dontCenter?: 'x' | 'y' | 'xy';
     showTags?: boolean;
+    hideFilterStatus?: boolean;
     childHideDecorationTitle?: boolean;
     childHideResizeHandles?: boolean;
     childDragAction?: dropActionType; // allows child documents to be dragged out of collection without holding the embedKey or dragging the doc decorations title bar.