Merge branch 'main' into fix/split_pane

apps/client/src/menus/custom-items/NoteColorPicker.tsx

@@ -8,6 +8,7 @@ import Color, { ColorInstance } from "color";
 import Debouncer from "../../utils/debouncer";
 import FNote from "../../entities/fnote";
 import froca from "../../services/froca";
+import { isMobile } from "../../services/utils";
 
 const COLOR_PALETTE = [
     "#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699",
@@ -128,7 +129,6 @@ function CustomColorCell(props: ColorCellProps) {
     const colorInput = useRef<HTMLInputElement>(null);
     const colorInputDebouncer = useRef<Debouncer<string | null> | null>(null);
     const callbackRef = useRef(props.onSelect);
-    const isSafari = useRef(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
 
     useEffect(() => {
         colorInputDebouncer.current = new Debouncer(250, (color) => {
@@ -160,11 +160,11 @@ function CustomColorCell(props: ColorCellProps) {
     }, [pickedColor]);
 
     return <div style={`--foreground: ${getForegroundColor(props.color)};`}
-                onClick={(e) => {
+                onClick={isMobile() ? (e) => {
-                    // The color picker dropdown will close on Safari if the parent context menu is
+                    // The color picker dropdown will close on some browser if the parent context menu is
                     // dismissed, so stop the click propagation to prevent dismissing the menu.
-                    isSafari.current && e.stopPropagation();
+                    e.stopPropagation();
-                }}>
+                } : undefined}>
         <ColorCell {...props}
                    color={pickedColor}
                    className={clsx("custom-color-cell", {

apps/client/src/stylesheets/style.css

@@ -1316,7 +1316,7 @@ body.mobile #context-menu-container.mobile-bottom-menu {
     inset-inline-end: 0 !important;
     bottom: 0 !important;
     top: unset !important;
-    max-height: 70vh;
+    max-height: 90vh;
     overflow: auto !important;
     user-select: none;
     -webkit-user-select: none;

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

@@ -119,17 +119,6 @@ body.backdrop-effects-disabled {
     font-size: 0.9rem !important;
 }
 
-body.mobile .dropdown-menu {
-    backdrop-filter: var(--dropdown-backdrop-filter);
-    border-radius: var(--dropdown-border-radius);
-    position: relative;
-}
-
-body.mobile .dropdown-menu .dropdown-menu {
-    backdrop-filter: unset !important;
-    border-radius: unset !important;
-}
-
 body.desktop .dropdown-menu::before,
 :root .ck.ck-dropdown__panel::before,
 :root .excalidraw .popover::before,
@@ -157,17 +146,12 @@ body.desktop .dropdown-submenu .dropdown-menu::before {
     content: unset;
 }
 
-body.mobile .dropdown-submenu .dropdown-menu {
-    background: transparent !important;
-}
-
 body.desktop .dropdown-submenu .dropdown-menu {
     backdrop-filter: var(--dropdown-backdrop-filter);
     background: transparent;
 }
 
 .dropdown-item,
-body.mobile .dropdown-submenu .dropdown-toggle,
 .excalidraw .context-menu .context-menu-item {
     --menu-item-start-padding: 8px;
     --menu-item-end-padding: 22px;
@@ -201,10 +185,6 @@ body.mobile .dropdown-item:not(:last-of-type) {
     margin-bottom: 0.5em;
 }
 
-body.mobile .dropdown-submenu:hover {
-    background: transparent !important;
-}
-
 html body .dropdown-item.disabled,
 html body .dropdown-item[disabled] {
     color: var(--menu-text-color) !important;
@@ -322,13 +302,25 @@ body.desktop .dropdown-menu.static .dropdown-item.active {
 }
 
 /* #region Mobile tweaks for dropdown menus */
+body.mobile #context-menu-cover {
+    transition: background-color 150ms ease-in;
+
+    &.show {
+        background: rgba(0, 0, 0, 0.7);
+    }
+}
+
 body.mobile .dropdown-menu {
     --dropdown-menu-padding-vertical: 0.7em;
     --dropdown-menu-padding-horizontal: 1em;
+    --hover-item-background-color: var(--card-background-color);
     font-size: 1em !important;
+    backdrop-filter: var(--dropdown-backdrop-filter);
+    border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius) 0 0;
+    position: relative;
 
     .dropdown-toggle::after {
-        top: var(--dropdown-menu-padding-vertical);
+        top: 0.5em;
         right: var(--dropdown-menu-padding-horizontal);
         transform: translateX(50%) rotate(90deg);
     }
@@ -366,6 +358,37 @@ body.mobile .dropdown-menu {
     .dropdown-divider {
         visibility: hidden;
     }
+
+    .dropdown-submenu {
+        padding: 0 !important;
+        backdrop-filter: unset !important;
+
+        .dropdown-toggle {
+            padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horizontal);
+        }
+
+        .dropdown-menu {
+            --menu-background-color: rgba(0, 0, 0, 0.15);
+            border-radius: 0;
+            max-height: 0;            
+            transition: max-height 100ms ease-in;
+            display: block !important;
+
+            &.show {
+                max-height: 1000px;
+            }
+
+            .dropdown-item {
+                background: transparent;
+            }
+        }
+
+        &.submenu-open {
+            .dropdown-toggle {
+                padding-bottom: var(--dropdown-menu-padding-vertical);
+            }            
+        }
+    }
 }
 /* #endregion */
 

apps/client/src/widgets/type_widgets/Empty.tsx

@@ -10,16 +10,16 @@ import FNote from "../../entities/fnote";
 import search from "../../services/search";
 import { TypeWidgetProps } from "./type_widget";
 
-export default function Empty({ }: TypeWidgetProps) {
+export default function Empty({ ntxId }: TypeWidgetProps) {
     return (
         <>
             <WorkspaceSwitcher />
-            <NoteSearch />
+            <NoteSearch ntxId={ntxId ?? null} />
         </>
     )
 }
 
-function NoteSearch() {
+function NoteSearch({ ntxId }: { ntxId: string | null }) {
     const resultsContainerRef = useRef<HTMLDivElement>(null);
     const autocompleteRef = useRef<HTMLInputElement>(null);
 
@@ -45,7 +45,6 @@ function NoteSearch() {
                         if (!suggestion?.notePath) {
                             return false;
                         }
-                        const ntxId = autocompleteRef.current?.closest(".note-split")?.getAttribute("data-ntx-id") ?? null;
                         const activeNoteContext = appContext.tabManager.getNoteContextById(ntxId) ?? appContext.tabManager.getActiveContext();
                         if (activeNoteContext) {
                             activeNoteContext.setNote(suggestion.notePath);

apps/server/src/routes/assets.ts

@@ -27,7 +27,8 @@ async function register(app: express.Application) {
             appType: "custom",
             cacheDir: path.join(srcRoot, "../../.cache/vite"),
             base: `/${assetUrlFragment}/`,
-            root: clientDir
+            root: clientDir,
+            css: { devSourcemap: true }
         });
         app.use(`/${assetUrlFragment}/`, (req, res, next) => {
             req.url = `/${assetUrlFragment}` + req.url;