Merge branch 'main' into feat/ui/general-improvements

apps/client/src/stylesheets/theme-next/notes/text.css

@@ -647,10 +647,10 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
     font-weight: 600;
 }
 
-.ck-content hr {
-    margin: 5px 0;
-    height: 1px;
-    background-color: var(--main-border-color);
+:root .ck-content hr {
+    margin-block: 5px;
+    height: 0;
+    border: thin solid var(--main-border-color);
     opacity: 1;
 }
 

apps/client/src/stylesheets/theme-next/shell.css

@@ -372,10 +372,6 @@ body[dir=ltr] #launcher-container {
 .calendar-dropdown-widget .calendar-header [data-calendar-input="month"] {
     --input-background-color: transparent;
     --menu-background-color: transparent;
-
-    text-align: center;
-    font-size: 1.4em;
-    font-weight: 300;
 }
 
 .calendar-dropdown-widget .calendar-header input:not(:focus) {
@@ -425,8 +421,6 @@ body[dir=ltr] #launcher-container {
 }
 
 .calendar-dropdown-widget .calendar-week span {
-    font-size: 0.85em;
-    font-weight: 500;
     color: var(--calendar-weekday-labels-color);
 }
 
@@ -689,9 +683,10 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     padding-inline-start: 12px;
 }
 
-#left-pane span.fancytree-node.fancytree-active {
+#left-pane span.fancytree-node.fancytree-active,
+#left-pane span.fancytree-node.fancytree-active:hover {
     position: relative;
-    background: transparent !important;
+    background: transparent;
     color: var(--custom-color, var(--left-pane-item-selected-color));
 }
 
@@ -704,6 +699,14 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     }
 }
 
+/*
+ * .fancytree-node pseudo-elements:
+ *
+ *      - ::before: the active tree item decorator.
+ *      - ::after:  the selected tree item background. A pseudo-element is used instead of the
+ *                  element's background color, to allow alpha compositing for the hover state.
+ */
+
 #left-pane span.fancytree-node.fancytree-active::before {
     position: absolute;
     content: "";
@@ -718,6 +721,24 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     z-index: -1;
 }
 
+#left-pane span.fancytree-node.fancytree-selected {
+    --left-pane-item-selected-shadow-size: 4px;
+
+    position: relative;
+    background-color: transparent;
+    border-radius: 0;
+}
+
+#left-pane span.fancytree-node.fancytree-selected::after {
+    display: block;
+    position: absolute;
+    z-index: -2;
+    content: "";
+    inset: 0;
+    background: var(--selection-background-color);
+    animation: left-pane-item-select 100ms ease-out;
+}
+
 #left-pane span.fancytree-node.protected > span.fancytree-custom-icon {
     position: relative;
     filter: unset !important;
@@ -780,7 +801,8 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i
     opacity: 0.5;
 }
 
-#left-pane .tree-item-button {
+#left-pane .tree-item-button,
+#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon {
     margin-inline-end: 6px;
     border: unset;
     border-radius: 50%;
@@ -791,7 +813,8 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i
         box-shadow 200ms ease-out;
 }
 
-#left-pane .tree-item-button:hover {
+#left-pane .tree-item-button:hover,
+#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon:hover {
     background: var(--left-pane-item-action-button-hover-background);
     box-shadow: var(--left-pane-item-action-button-hover-shadow);
     transition:
@@ -799,10 +822,47 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i
         box-shadow 100ms ease-in;
 }
 
-#left-pane span.fancytree-node.fancytree-active .tree-item-button:hover {
+#left-pane span.fancytree-node.fancytree-active .tree-item-button:hover,
+#left-pane span.fancytree-node.fancytree-active.fancy-tree-selected .fancytree-custom-icon:hover {
     box-shadow: var(--left-pane-item-selected-action-button-hover-shadow);
 }
 
+/* Selected item bulk action button */
+
+@keyframes bulk-action-button-blink {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: .3;
+    }
+}
+
+#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    margin: 0;
+
+}
+
+#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon::before {
+    border: 0;
+    font-size: .65em;
+}
+
+#left-pane span.fancytree-node.fancytree-selected:hover .fancytree-custom-icon:not(:hover)::before {
+    animation: bulk-action-button-blink 500ms linear infinite alternate;
+}
+
+#left-pane span.fancytree-node.fancytree-selected.protected .fancytree-custom-icon::after {
+    /* Protected note indicator */
+    display: none;
+}
+
+
 #context-menu-container {
     /* The context menu of the tree */
     --menu-item-icon-vert-offset: -1px;

apps/client/src/stylesheets/tree.css

@@ -185,7 +185,7 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
 
 span.fancytree-active {
     color: var(--active-item-text-color);
-    background-color: var(--active-item-background-color) !important;
+    background-color: var(--active-item-background-color);
     border-color: transparent; /* invisible border */
     border-radius: 5px;
 }
@@ -195,20 +195,15 @@ span.fancytree-active .fancytree-title {
     border: 0;
 }
 
-span.fancytree-selected {
-    border-color: var(--main-border-color) !important;
-    border-radius: 5px;
-}
-
-span.fancytree-selected .fancytree-title {
-    text-decoration: underline;
-    font-style: italic;
+span.fancytree-node.fancytree-selected {
+    background-color: var(--selection-background-color);
+    border-radius: 0;
 }
 
 span.fancytree-selected .fancytree-custom-icon::before {
     font-family: "boxicons";
-    content: "\eb43";
-    border: 1px solid var(--main-border-color);
+    content: "\ef05";
+    border: 1px solid var(--main-text-color);
     border-radius: 3px;
 }
 

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

@@ -14,7 +14,7 @@
   height: 100%;
   display: flex;
   gap: 1em;
-  padding-inline: 12px;
+  margin-inline: var(--content-margin-inline);
   padding-block: 4px;
   align-items: flex-start;
   overflow-x: auto;

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

@@ -52,7 +52,7 @@
     --fc-border-color: var(--main-border-color);
     --fc-neutral-bg-color: var(--launcher-pane-background-color);
     --fc-list-event-hover-bg-color: var(--left-pane-item-hover-background);
-    padding: 0 12px;
+    padding: 0 var(--content-margin-inline);
 }
 
 .calendar-container .fc-list-sticky .fc-list-day > * {

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

@@ -13,6 +13,7 @@
 
 .table-view-container {
     height: 100%;
+    margin-inline-start: var(--content-margin-inline);
 }
 
 .search-result-widget-content .table-view {

apps/client/src/widgets/containers/root_container.ts

@@ -13,8 +13,6 @@ import FlexContainer from "./flex_container.js";
  *
  * For convenience, the root container has a few class selectors that can be used to target some global state:
  *
- * - `#root-container.light-theme`, indicates whether the current color scheme is light.
- * - `#root-container.dark-theme`, indicates whether the current color scheme is dark.
  * - `#root-container.virtual-keyboard-opened`, on mobile devices if the virtual keyboard is open.
  * - `#root-container.horizontal-layout`, if the current layout is horizontal.
  * - `#root-container.vertical-layout`, if the current layout is horizontal.
@@ -36,7 +34,6 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
             window.visualViewport?.addEventListener("resize", () => this.#onMobileResize());
         }
 
-        this.#initTheme();
         this.#setDeviceSpecificClasses();
         this.#setMaxContentWidth();
         this.#setMotion();
@@ -70,20 +67,6 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         }
     }
 
-    #initTheme() {
-        const colorSchemeChangeObserver = matchMedia("(prefers-color-scheme: dark)")
-        colorSchemeChangeObserver.addEventListener("change", () => this.#updateColorScheme());
-        
-        this.#updateColorScheme();
-    }
-
-    #updateColorScheme() {
-        const colorScheme = readCssVar(document.body, "theme-style").asString();
-        
-        document.body.classList.toggle("light-theme", colorScheme === "light");
-        document.body.classList.toggle("dark-theme", colorScheme === "dark");
-    }
-
     #onMobileResize() {
         const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
         const windowHeight = Math.max(window.innerHeight, this.originalWindowHeight); // inner height changes when keyboard is opened, we need to compare with the original height to detect it.

apps/client/src/widgets/launch_bar/CalendarWidget.css

@@ -35,7 +35,7 @@
 .calendar-dropdown-widget .calendar-header {
     align-items: center;
     display: flex;
-    padding: 0 0.5rem 0.5rem 0.5rem;
+    padding: 0 0.5rem 1rem 0.5rem;
 }
 
 .calendar-dropdown-widget .calendar-header>div {
@@ -65,8 +65,14 @@
     border: 0;
     border-inline-start: unset;
     background-color: var(--menu-background-color);
-    font-weight: bold;
+    font-weight: 400;
     outline: 0;
+    font-weight: 300;
+    font-size: 1.4em;
+}
+
+.calendar-dropdown-widget .calendar-header .dropdown-toggle {
+    justify-content: center;
 }
 
 .calendar-dropdown-widget .calendar-header .dropdown-toggle::after {
@@ -82,18 +88,20 @@
 .calendar-dropdown-widget .calendar-week span {
     flex-direction: column;
     flex: 0 0 12.5%;
-    font-size: 1rem;
-    font-weight: bold;
     max-width: 12.5%;
     padding-top: 5px;
     padding-bottom: 5px;
     text-align: center;
     text-transform: uppercase;
+    font-size: .85em;
+    font-weight: 500;
 }
 
 .calendar-dropdown-widget .calendar-body {
     display: flex;
     flex-wrap: wrap;
+    min-height: 250px;
+    align-items: center;
 }
 
 .calendar-dropdown-widget .calendar-week-number {

apps/client/src/widgets/layout/NoteTitleActions.css

@@ -4,10 +4,11 @@ body.experimental-feature-new-layout {
     }
 
     .title-actions {
-        --title-actions-padding-start: 12px;
-        --title-actions-padding-end: 8px;
+        --title-actions-padding-start: var(--content-margin-inline);
+        --title-actions-padding-end: var(--content-margin-inline);
 
         display: flex;
+        width: 100%;
         max-width: var(--max-content-width);
         flex-direction: column;
         gap: 0.5em;

apps/client/src/widgets/layout/NoteTypeSwitcher.css

@@ -11,7 +11,6 @@
 
     position: relative;
     top: 5px;
-    padding: .25em 0;
     display: flex;
     align-items: center;
     overflow-x: auto;

apps/client/src/widgets/search_result.css

@@ -4,8 +4,8 @@
     contain: none !important;
 }
 
-.search-result-widget .note-list {
-    padding: 10px;
+.search-result-widget .note-list-wrapper {
+    margin-inline: var(--content-margin-inline);
 }
 
 .note-split.type-search .scrolling-container {

apps/client/src/widgets/type_widgets/ProtectedSession.css

@@ -3,4 +3,8 @@
     margin-inline: 40px;
     flex-direction: column;
     justify-content: center;
+
+    label {
+        margin-bottom: 8px;
+    }
 }

apps/client/src/widgets/type_widgets/helpers/SetupForm.css

@@ -19,4 +19,12 @@
     .tn-link {
         margin-top: 1em;
     }
+
+    label {
+        margin-bottom: 8px;
+    }
+
+    .input-group {
+        margin: 0;
+    }
 }

apps/server/package.json

@@ -62,7 +62,7 @@
     "@types/serve-favicon": "2.5.7",
     "@types/serve-static": "2.2.0",
     "@types/stream-throttle": "0.1.4",
-    "@types/supertest": "7.2.0",
+    "@types/supertest": "6.0.3",
     "@types/tmp": "0.2.6",
     "@types/turndown": "5.0.6",
     "@types/ws": "8.18.1",

pnpm-lock.yaml

@@ -620,8 +620,8 @@ importers:
         specifier: 0.1.4
         version: 0.1.4
       '@types/supertest':
-        specifier: 7.2.0
-        version: 7.2.0
+        specifier: 6.0.3
+        version: 6.0.3
       '@types/tmp':
         specifier: 0.2.6
         version: 0.2.6
@@ -6049,8 +6049,8 @@ packages:
   '@types/supercluster@7.1.3':
     resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==}
 
-  '@types/supertest@7.2.0':
-    resolution: {integrity: sha512-uh2Lv57xvggst6lCqNdFAmDSvoMG7M/HDtX4iUCquxQ5EGPtaPM5PL5Hmi7LCvOG8db7YaCPNJEeoI8s/WzIQw==}
+  '@types/supertest@6.0.3':
+    resolution: {integrity: sha512-8WzXq62EXFhJ7QsH3Ocb/iKQ/Ty9ZVWnVzoTKc9tyyFRRF3a74Tk2+TLFgaFFw364Ere+npzHKEJ6ga2LzIL7w==}
 
   '@types/tabulator-tables@6.3.1':
     resolution: {integrity: sha512-qL05wGXVy0yfWcF8LCE9+9uSeUIpeKdgpm8YmOAPTjLd3FaoZziPOhVxIiLzEhLTFfOvbuwnaWDm4v4i87diRQ==}
@@ -16415,8 +16415,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-editor-multi-root@47.4.0':
     dependencies:
@@ -16439,8 +16437,6 @@ snapshots:
       '@ckeditor/ckeditor5-table': 47.4.0
       '@ckeditor/ckeditor5-utils': 47.4.0
       ckeditor5: 47.4.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-emoji@47.4.0':
     dependencies:
@@ -21545,7 +21541,7 @@ snapshots:
     dependencies:
       '@types/geojson': 7946.0.16
 
-  '@types/supertest@7.2.0':
+  '@types/supertest@6.0.3':
     dependencies:
       '@types/methods': 1.1.4
       '@types/superagent': 8.1.9
@@ -28091,7 +28087,7 @@ snapshots:
 
   minipass-fetch@5.0.0:
     dependencies:
-      minipass: 7.1.3
+      minipass: 7.1.2
       minipass-sized: 1.0.3
       minizlib: 3.1.0
     optionalDependencies:
@@ -31041,7 +31037,7 @@ snapshots:
 
   ssri@13.0.0:
     dependencies:
-      minipass: 7.1.3
+      minipass: 7.1.2
 
   ssri@8.0.1:
     dependencies: