hm

5 files changed, 100 insertions, 12 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index c453fd793..b4aa1c90c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -495,6 +495,12 @@ export class DocumentOptions {
     hoverBackgroundColor?: string; // background color of a label when hovered
     userBackgroundColor?: STRt = new StrInfo('background color associated with a Dash user (seen in header fields of shared documents)');
     userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)');
+
+    card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time');
+    card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type');
+    card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color');
+
+
 }
 
 export const DocOptions = new DocumentOptions();
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 15c3ddad6..cb10f0658 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -719,6 +719,14 @@ pie title Minerals in my tap water
             { title: "Center",    icon: "align-center",        toolTip: "Center Align Stack",  btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"center",     funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
         ]
     }
+    static cardTools(): Button[] {
+        return [
+            { title: "Time",   icon:"hourglass-half", toolTip:"Sort by most recent document creation",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"time",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+
+        ]
+    }
     static viewTools(): Button[] {
         return [
             { title: "Snap",      icon: "th",                  toolTip: "Show Snap Lines",     btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines",  funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
@@ -727,6 +735,7 @@ pie title Minerals in my tap water
             { title: "Clusters",  icon: "braille",             toolTip: "Show Doc Clusters",   btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"clusters",   funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
             { title: "Cards",     icon: "brain",               toolTip: "Flashcards",          btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"flashcards", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
             { title: "Arrange",   icon:"arrow-down-short-wide",toolTip:"Toggle Auto Arrange",  btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"arrange",    funcs: {hidden: 'IsNoviceMode()'}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
+
         ]
     }
     static textTools():Button[] {
@@ -811,6 +820,7 @@ pie title Minerals in my tap water
             { title: "Doc",     icon: "Doc",           toolTip: "Freeform Doc tools",   subMenu: CurrentUserUtils.freeTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode, true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "View",    icon: "View",          toolTip: "View tools",           subMenu: CurrentUserUtils.viewTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Stack",   icon: "View",          toolTip: "Stacking tools",       subMenu: CurrentUserUtils.stackTools(),  expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+            { title: "Card",    icon: "Sort",          toolTip: "Card sort",            subMenu: CurrentUserUtils.cardTools(),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Web",     icon: "Web",           toolTip: "Web functions",        subMenu: CurrentUserUtils.webTools(),    expertMode: false, toolType:DocumentType.WEB,            funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected
             { title: "Video",   icon: "Video",         toolTip: "Video functions",      subMenu: CurrentUserUtils.videoTools(),  expertMode: false, toolType:DocumentType.VID,            funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected
             { title: "Schema",  icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(),expertMode: false,toolType:CollectionViewType.Schema,funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Schema is selected
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 56d28ee5d..e6ae57911 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -526,6 +526,8 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faZ,
                 fa.faArrowsUpToLine,
                 fa.faArrowsDownToLine,
+                fa.faPalette,
+                fa.faHourglassHalf
             ]
         );
     }
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index d0a796218..ab7aac267 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -159,14 +159,18 @@ export class CollectionCardView extends CollectionSubView() {
     };
 
     @computed get sortedDocsType() {
-        // This field is set to 'type' to sort documents by their type
-        // const typeField = 'type';
-
-        // Whether to sort in descending order
+        
         const desc = BoolCast(this.layoutDoc.sortDesc);
 
+        let sorted = []
+
+        for (let i=0; i< this.childLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list
+            sorted[i] = this.childLayoutPairs[i]
+        }
+
+
         // Copy and sort documents by type
-        const docs = this.childLayoutPairs.sort((docA, docB) => {
+        const docs = sorted.sort((docA, docB) => {
             const typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
             const typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
 
@@ -177,10 +181,15 @@ export class CollectionCardView extends CollectionSubView() {
             if (desc) out *= -1; // Reverse the sort order if descending is true
             return out;
         });
+        
 
         return { docs };
     }
 
+    
+
+   
+
     @observable docRefs = new ObservableMap<Doc, DocumentView>();
 
     @computed get contentSorted() {
@@ -213,9 +222,10 @@ export class CollectionCardView extends CollectionSubView() {
         // Map sorted documents to their rendered components
         return sortedDocs.map((childPair, index) => {
             // const childPair = { layout: doc, data: doc }; 
-            const isSelected = this.isSelected(index);
             const isHovered = this.hoveredNodeIndex === index;
-            const inactiveIndex = this.sortedDocsType.docs.indexOf(childPair);
+            const inactiveIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
+            const isSelected = SelectionManager.IsSelected(childPair.layout);
+
 
 
 
@@ -234,7 +244,7 @@ export class CollectionCardView extends CollectionSubView() {
                         height: this.panelHeight(childPair.layout)(),
                         transform: `
                             rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg)
-                            translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
+                            translateY(${isHovered ? this.translateHover(inactiveIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
                             translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
                             scale(${isSelected ? 1.25 : 1})
                         `,
@@ -250,7 +260,7 @@ export class CollectionCardView extends CollectionSubView() {
         // const currentIndex = NumCast(this.layoutDoc._carousel_index);
         const amCards = this.inactiveDocs().length;
         console.log(amCards + "lol")
-        const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents
+        // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents
 
         // const myInactives =
         const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
@@ -328,6 +338,18 @@ export class CollectionCardView extends CollectionSubView() {
         return 0;
     }
 
+    @computed get renderCardsSort(){
+        if (BoolCast(this._props.Document.card_sort_type) == true){
+            return this.contentSorted
+        }
+
+        else{
+            return this.content
+        }
+    }
+
+    
+
     render() {
         return (
             <div
@@ -345,7 +367,7 @@ export class CollectionCardView extends CollectionSubView() {
                         height: `${100 * this.fitContentScale}%`,
                     }}
                     onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
-                    {this.contentSorted}
+                    {this.renderCardsSort}
                 </div>
 
                 {/* <Card  className={`custom-modal-position step-${step}`}>
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 3fdc9a488..ffb1d751d 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -102,10 +102,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
     selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
 });
 
-ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce', checkResult?: boolean, persist?: boolean) {
+ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', checkResult?: boolean, persist?: boolean) {
     const selected = SelectionManager.Docs.lastElement();
     // prettier-ignore
-    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
+    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
         ['grid', {
             checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false),
             setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
@@ -135,6 +135,19 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid
             checkResult: (doc:Doc) => BoolCast(Doc.UserDoc().defaultToFlashcards, false),
             setDoc: (doc:Doc,dv:DocumentView) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards,
         }],
+        ['time', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_time = !doc.card_sort_time,
+        }],
+        ['docType', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_type = !doc.card_sort_type,
+        }],
+        ['color', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_color = !doc.card_sort_color,
+        }],
+
    ]);
 
     if (checkResult) {
@@ -145,6 +158,39 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid
     setTimeout(() => batch.end(), 100);
 });
 
+// ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) {
+//     // const editorView = RichTextMenu.Instance?.TextView?.EditorView;
+//     const selected = SelectionManager.Docs.lastElement();
+//     // prettier-ignore
+//     const map: Map<'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
+//         ['time', {
+//             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+//             setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "time",
+//         }],
+//         ['docType', {
+//             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+//             setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "type",
+//         }],
+//         ['color', {
+//             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+//             setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "color",
+//         }],
+//         // ['custom', {
+//         //     checkResult: () => RichTextMenu.Instance.textAlign,
+//         //     setDoc: () => value && editorView?.state ? RichTextMenu.Instance.align(editorView, editorView.dispatch, value):(Doc.UserDoc().textAlign = value),
+//         // }]
+//         // ,
+//     ]);
+
+//     if (checkResult) {
+//         return map.get(attr)?.checkResult(selected);
+//     }
+
+//     console.log('hey')
+//     SelectionManager.Views.map(dv => map.get(attr)?.setDoc(dv.layoutDoc, dv));
+//     console.log('success')
+// });
+
 ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highlight' | 'fontSize' | 'alignment', value: any, checkResult?: boolean) {
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     const selected = SelectionManager.Docs.lastElement();
@@ -182,6 +228,8 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh
     map.get(attr)?.setDoc?.();
 });
 
+
+
 type attrname = 'noAutoLink' | 'dictation' | 'bold' | 'italics' | 'elide' | 'underline' | 'left' | 'center' | 'right' | 'vcent' | 'bullet' | 'decimal';
 type attrfuncs = [attrname, { checkResult: () => boolean; toggle: () => any }];