Merge d51a0d415bb552ff7dc35547e06dbe83d9df4b8a into 3cc64b576429b050ea356c3c76b8bf72f4a5b9b7

f2

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",
@@ -62,13 +63,13 @@ export default function NoteColorPicker(props: NoteColorPickerProps) {
             } else {
                 attributes.removeOwnedLabelByName(note, "color");
             }
-            
+
             setCurrentColor(color);
         }
     }, [note, currentColor]);
 
     return <div className="note-color-picker">
-        
+
         <ColorCell className="color-cell-reset"
                    tooltip={t("note-color.clear-color")}
                    color={null}
@@ -81,8 +82,8 @@ export default function NoteColorPicker(props: NoteColorPickerProps) {
                 <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
             </svg>
         </ColorCell>
-        
-        
+
+
         {COLOR_PALETTE.map((color) => (
             <ColorCell key={color}
                        tooltip={t("note-color.set-color")}
@@ -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,13 +160,13 @@ function CustomColorCell(props: ColorCellProps) {
     }, [pickedColor]);
 
     return <div style={`--foreground: ${getForegroundColor(props.color)};`}
-                onClick={(e) => {
-                    // The color picker dropdown will close on Safari if the parent context menu is
+                onClick={isMobile() ? (e) => {
+                    // 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} 
+                   color={pickedColor}
                    className={clsx("custom-color-cell", {
                         "custom-color-cell-empty": (pickedColor === null)
                    })}
@@ -201,4 +201,4 @@ function tryParseColor(colorStr: string): ColorInstance | null {
     }
 
     return null;
-}
+}

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/translations/en/translation.json

@@ -385,6 +385,7 @@
     "workspace_template": "This note will appear in the selection of available template when creating new note, but only when hoisted into a workspace containing this template",
     "search_home": "new search notes will be created as children of this note",
     "workspace_search_home": "new search notes will be created as children of this note when hoisted to some ancestor of this workspace note",
+    "auto_execute_search": "Automatically executes the search defined in a saved search note and switches to the Collection Properties tab if any notes match the query",
     "inbox": "default inbox location for new notes - when you create a note using \"new note\" button in the sidebar, notes will be created as child notes in the note marked as with <code>#inbox</code> label.",
     "workspace_inbox": "default inbox location for new notes when hoisted to some ancestor of this workspace note",
     "sql_console_home": "default location of SQL console notes",

apps/client/src/widgets/attribute_widgets/attribute_detail.ts

@@ -236,6 +236,7 @@ const ATTR_HELP: Record<string, Record<string, string>> = {
         workspaceTemplate: t("attribute_detail.workspace_template"),
         searchHome: t("attribute_detail.search_home"),
         workspaceSearchHome: t("attribute_detail.workspace_search_home"),
+        autoExecuteSearch: t("attribute_detail.auto_execute_search"),
         inbox: t("attribute_detail.inbox"),
         workspaceInbox: t("attribute_detail.workspace_inbox"),
         sqlConsoleHome: t("attribute_detail.sql_console_home"),

apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx

@@ -22,7 +22,7 @@ import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
 import { getErrorMessage } from "../../services/utils";
 import "./SearchDefinitionTab.css";
 
-export default function SearchDefinitionTab({ note, ntxId, hidden }: TabContext) {
+export default function SearchDefinitionTab({ note, ntxId, hidden, noteContext }: TabContext) {
   const parentComponent = useContext(ParentComponent);
   const [ searchOptions, setSearchOptions ] = useState<{ availableOptions: SearchOption[], activeOptions: SearchOption[] }>();
   const [ error, setError ] = useState<{ message: string }>();
@@ -73,6 +73,27 @@ export default function SearchDefinitionTab({ note, ntxId, hidden }: TabContext)
     }
   });
 
+  useEffect(() => {
+    async function autoExecute() {
+      if (!note || note.type !== "search" || !note.hasLabel("autoExecuteSearch")) {
+        executionState.save("");
+        return;
+      }
+
+      const lastExecutedNoteId = executionState.load();
+      if (lastExecutedNoteId !== note.noteId) {
+        executionState.save(note.noteId);
+
+        await refreshResults();
+
+        if (noteContext?.viewScope?.viewMode === "default" && note.children.length > 0) {
+          parentComponent?.triggerCommand("toggleRibbonTabBookProperties", {});
+        }
+      }
+    }
+    autoExecute();
+  }, [note]);
+
   return (
     <div className="search-definition-widget">
       <div className="search-settings">
@@ -160,6 +181,14 @@ export default function SearchDefinitionTab({ note, ntxId, hidden }: TabContext)
   )
 }
 
+const executionState = function() {
+  let lastAutoExecutedSearchNoteId = "";
+  return {
+    load: () => lastAutoExecutedSearchNoteId,
+    save: (noteId: string) => lastAutoExecutedSearchNoteId = noteId,
+  };
+}();
+
 function BulkActionsList({ note }: { note: FNote }) {
   const [ bulkActions, setBulkActions ] = useState<RenameNoteBulkAction[]>();
 

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;

packages/commons/src/lib/attribute_names.ts

@@ -23,6 +23,7 @@ type Labels = {
     ancestorDepth: string;
     orderBy: string;
     orderDirection: string;
+    autoExecuteSearch: boolean;
 
     // Collection-specific
     viewType: string;