Merge a1c03143342078c68301cc7bc51a68ce4840c5dc into 64662d5215ea01f6634fd72b5ff7a77dbc7e9e7d

apps/client/src/widgets/collections/calendar/index.css

@@ -49,30 +49,6 @@
     z-index: 50;
 }
 
-.calendar-container a.fc-event {
-    text-decoration: none;
-}
-
-.calendar-container a.fc-event.archived {
-    opacity: .65;
-}
-
-.calendar-container a.fc-event.archived::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-
-    --c1: transparent;
-    --c2: var(--callendar-coll-event-archived-sripe-color);
-
-    background: repeating-linear-gradient(45deg, var(--c1), var(--c1) 8px,
-                                          var(--c2) 8px, var(--c2) 16px) !important;
-}
-
 .calendar-container .fc-button {
     padding: 0.2em 0.5em;
 }
@@ -113,15 +89,38 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
 
 /* #region Events */
 
-.calendar-view a.fc-timegrid-event,
-.calendar-view a.fc-daygrid-event,
-.fc-daygrid-dot-event .fc-event-title {
-    font-weight: 500;
+/*
+ * week, month, year views
+ */
+
+ .calendar-container a.fc-event {
+    text-decoration: none;
 }
 
-.calendar-view a.fc-timegrid-event:focus-visible,
-.calendar-view a.fc-daygrid-event:focus-visible {
-    outline: none;
+.calendar-container a.fc-event.archived {
+    opacity: .65;
+}
+
+.calendar-container a.fc-event.archived::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+
+    --c1: transparent;
+    --c2: var(--callendar-coll-event-archived-sripe-color);
+
+    background: repeating-linear-gradient(45deg, var(--c1), var(--c1) 8px,
+                                          var(--c2) 8px, var(--c2) 16px);
+}
+
+.calendar-view a.fc-timegrid-event,
+.calendar-view a.fc-daygrid-event,
+.calendar-view .fc-daygrid-dot-event .fc-event-title {
+    font-weight: 500;
 }
 
 .calendar-view a.fc-timegrid-event,
@@ -137,6 +136,20 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
     padding-left: 8px;
 }
 
+.calendar-view .fc-timegrid-event.with-hue,
+.calendar-view .fc-daygrid-event.with-hue {
+    --fc-event-text-color: var(--custom-color);
+
+    --fc-event-bg-color: hsl(var(--custom-color-hue),
+                    var(--calendar-coll-event-background-saturation),
+                    var(--calendar-coll-event-background-lightness)) !important;
+}
+
+.calendar-view a.fc-timegrid-event:focus-visible,
+.calendar-view a.fc-daygrid-event:focus-visible {
+    outline: none;
+}
+
 .calendar-view a.fc-timegrid-event.fc-event-selected,
 .calendar-view a.fc-timegrid-event.fc-event:focus,
 .calendar-view a.fc-daygrid-event.fc-event-selected,
@@ -153,21 +166,26 @@ body.desktop:not(.zen) .calendar-view .calendar-header {
     opacity: 1;
 }
 
-.calendar-view .fc-timegrid-event.with-hue,
-.calendar-view .fc-daygrid-event.with-hue {
-    --fc-event-text-color: var(--custom-color);
-
-    --fc-event-bg-color: hsl(var(--custom-color-hue),
-                    var(--calendar-coll-event-background-saturation),
-                    var(--calendar-coll-event-background-lightness)) !important;
+.calendar-view .fc-daygrid-event-dot {
+    display: none;
 }
 
+
 .calendar-view .fc-event-time {
     opacity: .75;
 }
 
-.fc-daygrid-event-dot {
-    display: none;
+/* 
+ * List view
+ */
+
+.fc-list-table tr.fc-event.archived {
+    opacity: .5;
+}
+
+.fc-list-table .fc-list-event-dot {
+    /* Apply note colors to the list item dots */
+    --fc-event-border-color: var(--custom-color);
 }
 
 /* #endregion */

apps/server/src/services/tree.spec.ts

@@ -1,11 +1,11 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { note, NoteBuilder } from "../test/becca_mocking.js";
+import {beforeEach, describe, expect, it, vi} from "vitest";
+import {note, NoteBuilder} from "../test/becca_mocking.js";
 import becca from "../becca/becca.js";
 import BBranch from "../becca/entities/bbranch.js";
 import BNote from "../becca/entities/bnote.js";
 import tree from "./tree.js";
 import cls from "./cls.js";
-import { buildNote } from "../test/becca_easy_mocking.js";
+import {buildNote} from "../test/becca_easy_mocking.js";
 
 describe("Tree", () => {
     let rootNote!: NoteBuilder;
@@ -48,6 +48,23 @@ describe("Tree", () => {
             };
         });
     });
+    it("sorts notes by title (base case)", () => {
+
+            const note = buildNote({
+                children: [
+                    {title: "1"},
+                    {title: "2"},
+                    {title: "3"},
+                ],
+                "#sorted": "",
+            });
+            cls.init(() => {
+                tree.sortNotesIfNeeded(note.noteId);
+            });
+            const orderedTitles = note.children.map((child) => child.title);
+            expect(orderedTitles).toStrictEqual(["1", "2", "3"]);
+        }
+    )
 
     it("custom sort order is idempotent", () => {
         rootNote.label("sorted", "order");
@@ -56,13 +73,15 @@ describe("Tree", () => {
         for (let i = 0; i <= 5; i++) {
             rootNote.child(note(String(i)).label("order", String(i)));
         }
+        rootNote.child(note("top").label("top"));
+        rootNote.child(note("bottom").label("bottom"));
 
         // Add a few values which have no defined order.
         for (let i = 6; i < 10; i++) {
             rootNote.child(note(String(i)));
         }
 
-        const expectedOrder = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" ];
+        const expectedOrder = ["top", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "bottom"];
 
         // Sort a few times to ensure that the resulting order is the same.
         for (let i = 0; i < 5; i++) {
@@ -78,12 +97,12 @@ describe("Tree", () => {
     it("pins to the top and bottom", () => {
         const note = buildNote({
             children: [
-                { title: "bottom", "#bottom": "" },
-                { title: "5" },
-                { title: "3" },
-                { title: "2" },
-                { title: "1" },
-                { title: "top", "#top": "" }
+                {title: "bottom", "#bottom": ""},
+                {title: "5"},
+                {title: "3"},
+                {title: "2"},
+                {title: "1"},
+                {title: "top", "#top": ""}
             ],
             "#sorted": ""
         });
@@ -91,18 +110,18 @@ describe("Tree", () => {
             tree.sortNotesIfNeeded(note.noteId);
         });
         const orderedTitles = note.children.map((child) => child.title);
-        expect(orderedTitles).toStrictEqual([ "top", "1", "2", "3", "5", "bottom" ]);
+        expect(orderedTitles).toStrictEqual(["top", "1", "2", "3", "5", "bottom"]);
     });
 
     it("pins to the top and bottom in reverse order", () => {
         const note = buildNote({
             children: [
-                { title: "bottom", "#bottom": "" },
-                { title: "1" },
-                { title: "2" },
-                { title: "3" },
-                { title: "5" },
-                { title: "top", "#top": "" }
+                {title: "bottom", "#bottom": ""},
+                {title: "1"},
+                {title: "2"},
+                {title: "3"},
+                {title: "5"},
+                {title: "top", "#top": ""}
             ],
             "#sorted": "",
             "#sortDirection": "desc"
@@ -111,6 +130,50 @@ describe("Tree", () => {
             tree.sortNotesIfNeeded(note.noteId);
         });
         const orderedTitles = note.children.map((child) => child.title);
-        expect(orderedTitles).toStrictEqual([ "top", "5", "3", "2", "1", "bottom" ]);
+        expect(orderedTitles).toStrictEqual(["top", "5", "3", "2", "1", "bottom"]);
     });
+
+    it("keeps folder notes on top when #sortFolderFirst is set, but not above #top", () => {
+        const note = buildNote({
+            children: [
+                {title: "bottom", "#bottom": ""},
+                {title: "1"},
+                {title: "2"},
+                {title: "p1", children: [{title: "1.1"}, {title: "1.2"}]},
+                {title: "p2", children: [{title: "2.1"}, {title: "2.2"}]},
+                {title: "3"},
+                {title: "5"},
+                {title: "top", "#top": ""}
+            ],
+            "#sorted": "",
+            "#sortFoldersFirst": ""
+        });
+        cls.init(() => {
+            tree.sortNotesIfNeeded(note.noteId);
+        });
+        const orderedTitles = note.children.map((child) => child.title);
+        expect(orderedTitles).toStrictEqual(["top", "p1", "p2", "1", "2", "3", "5", "bottom"]);
+    });
+
+    it("sorts notes accordingly when #sortNatural is set", () => {
+            const note = buildNote({
+                children: [
+                    {title: "bottom", "#bottom": ""},
+                    {title: "1"},
+                    {title: "2"},
+                    {title: "10"},
+                    {title: "20"},
+                    {title: "3"},
+                    {title: "top", "#top": ""}
+                ],
+                "#sorted": "",
+                "#sortNatural": ""
+            });
+            cls.init(() => {
+                tree.sortNotesIfNeeded(note.noteId);
+            });
+            const orderedTitles = note.children.map((child) => child.title);
+            expect(orderedTitles).toStrictEqual(["top", "1", "2", "3", "10", "20", "bottom"]);
+        }
+    )
 });

apps/server/src/services/tree.ts

@@ -98,15 +98,6 @@ function sortNotes(parentNoteId: string, customSortBy: string = "title", reverse
         }
 
         notes.sort((a, b) => {
-            if (foldersFirst) {
-                const aHasChildren = a.hasChildren();
-                const bHasChildren = b.hasChildren();
-
-                if ((aHasChildren && !bHasChildren) || (!aHasChildren && bHasChildren)) {
-                    // exactly one note of the two is a directory, so the sorting will be done based on this status
-                    return aHasChildren ? -1 : 1;
-                }
-            }
 
             function fetchValue(note: BNote, key: string) {
                 let rawValue: string | null;
@@ -154,6 +145,16 @@ function sortNotes(parentNoteId: string, customSortBy: string = "title", reverse
                 return compare(bottomBEl, bottomAEl) * (reverse ? -1 : 1);
             }
 
+            if (foldersFirst) {
+                const aHasChildren = a.hasChildren();
+                const bHasChildren = b.hasChildren();
+
+                if ((aHasChildren && !bHasChildren) || (!aHasChildren && bHasChildren)) {
+                    // exactly one note of the two is a directory, so the sorting will be done based on this status
+                    return aHasChildren ? -1 : 1;
+                }
+            }
+
             const customAEl = fetchValue(a, customSortBy) ?? fetchValue(a, "title") as string;
             const customBEl = fetchValue(b, customSortBy) ?? fetchValue(b, "title")  as string;
 

docs/User Guide/User Guide/Collections/Calendar.md

@@ -63,7 +63,7 @@ For each note of the calendar, the following attributes can be used:
 | `#startTime` | The time the event starts at. If this value is missing, then the event is considered a full-day event. The format is `HH:MM` (hours in 24-hour format and minutes). |
 | `#endTime` | Similar to `startTime`, it mentions the time at which the event ends (in relation with `endDate` if present, or `startDate`). |
 | `#color` | Displays the event with a specified color (named such as `red`, `gray` or hex such as `#FF0000`). This will also change the color of the note in other places such as the note tree. |
-| `#calendar:color` | Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. |
+| `#calendar:color` | Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. (*Deprecated*) |
 | `#iconClass` | If present, the icon of the note will be displayed to the left of the event title. |
 | `#calendar:title` | Changes the title of an event to point to an attribute of the note other than the title, can either a label or a relation (without the `#` or `~` symbol). See _Use-cases_ for more information. |
 | `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this:      <br>  <br>![](9_Calendar_image.png)     <br>  <br>`#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"`    <br>  <br>It can also be used with relations, case in which it will display the title of the target note:     <br>  <br>`~assignee=@My assignee #calendar:displayedAttributes="assignee"` |

packages/ckeditor5-math/package.json

@@ -25,7 +25,6 @@
   ],
   "devDependencies": {
     "@ckeditor/ckeditor5-dev-build-tools": "43.1.0",
-    "@ckeditor/ckeditor5-dev-utils": "43.1.0",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.0.1",
     "@typescript-eslint/eslint-plugin": "~8.48.0",