feat(geomap): support hiding labels

apps/client/src/translations/en/translation.json

@@ -1591,7 +1591,8 @@
     "description": "Description",
     "reload_app": "Reload app to apply changes",
     "set_all_to_default": "Set all shortcuts to the default",
-    "confirm_reset": "Do you really want to reset all keyboard shortcuts to the default?"
+    "confirm_reset": "Do you really want to reset all keyboard shortcuts to the default?",
+    "no_results": "No shortcuts found matching '{{filter}}'"
   },
   "spellcheck": {
     "title": "Spell Check",
@@ -2103,7 +2104,8 @@
     "raster": "Raster",
     "vector_light": "Vector (Light)",
     "vector_dark": "Vector (Dark)",
-    "show-scale": "Show scale"
+    "show-scale": "Show scale",
+    "show-labels": "Show marker names"
   },
   "table_context_menu": {
     "delete_row": "Delete row"

apps/client/src/widgets/collections/geomap/index.tsx

@@ -22,7 +22,7 @@ import { ViewModeProps } from "../interface";
 import { createNewNote, moveMarker } from "./api";
 import openContextMenu, { openMapContextMenu } from "./context_menu";
 import Map from "./map";
-import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
+import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS, MapLayer } from "./map_layer";
 import Marker, { GpxTrack } from "./marker";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
@@ -45,10 +45,11 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
     const [ state, setState ] = useState(State.Normal);
     const [ coordinates, setCoordinates ] = useState(viewConfig?.view?.center);
     const [ zoom, setZoom ] = useState(viewConfig?.view?.zoom);
-    const [ layerName ] = useNoteLabel(note, "map:style");
     const [ hasScale ] = useNoteLabelBoolean(note, "map:scale");
+    const [ hideLabels ] = useNoteLabelBoolean(note, "map:hideLabels");
     const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
     const [ notes, setNotes ] = useState<FNote[]>([]);
+    const layerData = useLayerData(note);
     const spacedUpdate = useSpacedUpdate(() => {
         if (viewConfig) {
             saveConfig(viewConfig);
@@ -152,7 +153,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
                 apiRef={apiRef} containerRef={containerRef}
                 coordinates={coordinates}
                 zoom={zoom}
-                layerName={layerName ?? DEFAULT_MAP_LAYER_NAME}
+                layerData={layerData}
                 viewportChanged={(coordinates, zoom) => {
                     if (!viewConfig) viewConfig = {};
                     viewConfig.view = { center: coordinates, zoom };
@@ -162,13 +163,35 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
                 onContextMenu={onContextMenu}
                 scale={hasScale}
             >
-                {notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)}
+                {notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} hideLabels={hideLabels} />)}
             </Map>}
             <GeoMapTouchBar state={state} map={apiRef.current} />
         </div>
     );
 }
 
+function useLayerData(note: FNote) {
+    const [ layerName ] = useNoteLabel(note, "map:style");
+    // Memo is needed because it would generate unnecessary reloads due to layer change.
+    const layerData = useMemo(() => {
+        // Custom layers.
+        if (layerName?.startsWith("http")) {
+            return {
+                name: "Custom",
+                type: "raster",
+                url: layerName,
+                attribution: ""
+            } satisfies MapLayer;
+        }
+
+        // Built-in layers.
+        const layerData = MAP_LAYERS[layerName ?? ""] ?? MAP_LAYERS[DEFAULT_MAP_LAYER_NAME];
+        return layerData;
+    }, [ layerName ]);
+
+    return layerData;
+}
+
 function ToggleReadOnlyButton({ note }: { note: FNote }) {
     const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
 
@@ -179,22 +202,26 @@ function ToggleReadOnlyButton({ note }: { note: FNote }) {
     />;
 }
 
-function NoteWrapper({ note, isReadOnly }: { note: FNote, isReadOnly: boolean }) {
+function NoteWrapper({ note, isReadOnly, hideLabels }: {
+    note: FNote,
+    isReadOnly: boolean,
+    hideLabels: boolean
+}) {
     const mime = useNoteProperty(note, "mime");
     const [ location ] = useNoteLabel(note, LOCATION_ATTRIBUTE);
 
     if (mime === "application/gpx+xml") {
-        return <NoteGpxTrack note={note} />;
+        return <NoteGpxTrack note={note} hideLabels={hideLabels} />;
     }
 
     if (location) {
         const latLng = location?.split(",", 2).map((el) => parseFloat(el)) as [ number, number ] | undefined;
         if (!latLng) return;
-        return <NoteMarker note={note} editable={!isReadOnly} latLng={latLng} />;
+        return <NoteMarker note={note} editable={!isReadOnly} latLng={latLng} hideLabels={hideLabels} />;
     }
 }
 
-function NoteMarker({ note, editable, latLng }: { note: FNote, editable: boolean, latLng: [number, number] }) {
+function NoteMarker({ note, editable, latLng, hideLabels }: { note: FNote, editable: boolean, latLng: [number, number], hideLabels: boolean }) {
     // React to changes
     const [ color ] = useNoteLabel(note, "color");
     const [ iconClass ] = useNoteLabel(note, "iconClass");
@@ -202,8 +229,9 @@ function NoteMarker({ note, editable, latLng }: { note: FNote, editable: boolean
 
     const title = useNoteProperty(note, "title");
     const icon = useMemo(() => {
-        return buildIcon(note.getIcon(), note.getColorClass() ?? undefined, title, note.noteId, archived);
-    }, [ iconClass, color, title, note.noteId, archived]);
+        const titleOrNone = hideLabels ? undefined : title;
+        return buildIcon(note.getIcon(), note.getColorClass() ?? undefined, titleOrNone, note.noteId, archived);
+    }, [ iconClass, color, title, note.noteId, archived, hideLabels ]);
 
     const onClick = useCallback(() => {
         appContext.triggerCommand("openInPopup", { noteIdOrPath: note.noteId });
@@ -235,7 +263,7 @@ function NoteMarker({ note, editable, latLng }: { note: FNote, editable: boolean
     />;
 }
 
-function NoteGpxTrack({ note }: { note: FNote }) {
+function NoteGpxTrack({ note, hideLabels }: { note: FNote, hideLabels?: boolean }) {
     const [ xmlString, setXmlString ] = useState<string>();
     const blob = useNoteBlob(note);
 
@@ -256,7 +284,7 @@ function NoteGpxTrack({ note }: { note: FNote }) {
 
     const options = useMemo<GPXOptions>(() => ({
         markers: {
-            startIcon: buildIcon(note.getIcon(), note.getColorClass(), note.title),
+            startIcon: buildIcon(note.getIcon(), note.getColorClass(), hideLabels ? undefined : note.title),
             endIcon: buildIcon("bxs-flag-checkered"),
             wptIcons: {
                 "": buildIcon("bx bx-pin")
@@ -265,7 +293,7 @@ function NoteGpxTrack({ note }: { note: FNote }) {
         polyline_options: {
             color: note.getLabelValue("color") ?? "blue"
         }
-    }), [ color, iconClass ]);
+    }), [ color, iconClass, hideLabels ]);
     return xmlString && <GpxTrack gpxXmlString={xmlString} options={options} />;
 }
 

apps/client/src/widgets/collections/geomap/map.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useImperativeHandle, useRef, useState } from "preact/hooks";
 import L, { control, LatLng, Layer, LeafletMouseEvent } from "leaflet";
 import "leaflet/dist/leaflet.css";
-import { MAP_LAYERS } from "./map_layer";
+import { MAP_LAYERS, type MapLayer } from "./map_layer";
 import { ComponentChildren, createContext, RefObject } from "preact";
 import { useElementSize, useSyncedRef } from "../../react/hooks";
 
@@ -12,7 +12,7 @@ interface MapProps {
     containerRef?: RefObject<HTMLDivElement>;
     coordinates: LatLng | [number, number];
     zoom: number;
-    layerName: string;
+    layerData: MapLayer;
     viewportChanged: (coordinates: LatLng, zoom: number) => void;
     children: ComponentChildren;
     onClick?: (e: LeafletMouseEvent) => void;
@@ -21,7 +21,7 @@ interface MapProps {
     scale: boolean;
 }
 
-export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale, apiRef, containerRef: _containerRef, onZoom }: MapProps) {
+export default function Map({ coordinates, zoom, layerData, viewportChanged, children, onClick, onContextMenu, scale, apiRef, containerRef: _containerRef, onZoom }: MapProps) {
     const mapRef = useRef<L.Map>(null);
     const containerRef = useSyncedRef<HTMLDivElement>(_containerRef);
 
@@ -49,8 +49,6 @@ export default function Map({ coordinates, zoom, layerName, viewportChanged, chi
     const [ layer, setLayer ] = useState<Layer>();
     useEffect(() => {
         async function load() {
-            const layerData = MAP_LAYERS[layerName];
-
             if (layerData.type === "vector") {
                 const style = (typeof layerData.style === "string" ? layerData.style : await layerData.style());
                 await import("@maplibre/maplibre-gl-leaflet");
@@ -68,7 +66,7 @@ export default function Map({ coordinates, zoom, layerName, viewportChanged, chi
         }
 
         load();
-    }, [ layerName ]);
+    }, [ layerData ]);
 
     // Attach layer to the map.
     useEffect(() => {
@@ -139,7 +137,7 @@ export default function Map({ coordinates, zoom, layerName, viewportChanged, chi
     return (
         <div
             ref={containerRef}
-            className={`geo-map-container ${MAP_LAYERS[layerName].isDarkTheme ? "dark" : ""}`}
+            className={`geo-map-container ${layerData.isDarkTheme ? "dark" : ""}`}
         >
             <ParentMap.Provider value={mapRef.current}>
                 {children}

apps/client/src/widgets/collections/geomap/map_layer.ts

@@ -1,20 +1,17 @@
-export interface MapLayer {
-    name: string;
-    isDarkTheme?: boolean;
-}
-
-interface VectorLayer extends MapLayer {
+export type MapLayer = ({
     type: "vector";
     style: string | (() => Promise<{}>)
-}
-
-interface RasterLayer extends MapLayer {
+} | {
     type: "raster";
     url: string;
     attribution: string;
-}
+}) & {
+    // Common properties
+    name: string;
+    isDarkTheme?: boolean;
+};
 
-export const MAP_LAYERS: Record<string, VectorLayer | RasterLayer> = {
+export const MAP_LAYERS: Record<string, MapLayer> = {
     "openstreetmap": {
         name: "OpenStreetMap",
         type: "raster",

apps/client/src/widgets/note_bars/CollectionProperties.tsx

@@ -226,8 +226,8 @@ function CheckBoxPropertyView({ note, property }: { note: FNote, property: Check
         <FormListToggleableItem
             icon={property.icon}
             title={property.label}
-            currentValue={value}
-            onChange={setValue}
+            currentValue={ property.reverseValue ? !value : value }
+            onChange={newValue => setValue(property.reverseValue ? !newValue : newValue)}
         />
     );
 }

apps/client/src/widgets/ribbon/collection-properties-config.tsx

@@ -20,6 +20,8 @@ export interface CheckBoxProperty {
     label: string;
     bindToLabel: FilterLabelsByType<boolean>;
     icon?: string;
+    /** When true, the checkbox will be checked when the label value is false. Useful when the label represents a "hide" action, without exposing double negatives to the user. */
+    reverseValue?: boolean;
 }
 
 export interface ButtonProperty {
@@ -156,6 +158,13 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
                 icon: "bx bx-ruler",
                 type: "checkbox",
                 bindToLabel: "map:scale"
+            },
+            {
+                label: t("book_properties_config.show-labels"),
+                icon: "bx bx-label",
+                type: "checkbox",
+                bindToLabel: "map:hideLabels",
+                reverseValue: true
             }
         ]
     },

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

@@ -1,16 +1,7 @@
-.type-contentWidget .note-detail {
-    height: 100%;
-}
-
-.note-detail-content-widget {
-    height: 100%;
-}
-
 .note-detail-content-widget-content {
     padding: 15px;
-    height: 100%;
 }
 
 .note-detail.full-height .note-detail-content-widget-content {
     padding: 0;
-}
+}

apps/client/src/widgets/type_widgets/options/shortcuts.css

@@ -0,0 +1,40 @@
+.shortcuts-options-section {
+    > header {
+        position: sticky;
+        top: 0;
+        left: 0;
+        right: 0;
+        background: var(--main-background-color);
+        padding-block: 0.5em;
+        border-bottom: 1px solid var(--main-border-color);
+    }
+
+    > footer {
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: var(--main-background-color);
+        padding-block: 0.5em;
+        border-top: 1px solid var(--main-border-color);
+        display: flex;
+        justify-content: space-between;
+    }
+
+    table {
+        width: 100%;
+
+        th {
+            width: 25%;
+        }
+
+        .separator {
+            background-color: var(--accented-background-color);
+            font-weight: bold;
+
+            &:first-of-type {
+                padding-top: 1em;
+            }
+        }
+    }
+}

apps/client/src/widgets/type_widgets/options/shortcuts.tsx

@@ -2,7 +2,6 @@ import { ActionKeyboardShortcut, KeyboardShortcut, OptionNames } from "@triliumn
 import { t } from "../../../services/i18n";
 import { arrayEqual, reloadFrontendApp } from "../../../services/utils";
 import Button from "../../react/Button";
-import FormGroup from "../../react/FormGroup";
 import FormText from "../../react/FormText";
 import FormTextBox from "../../react/FormTextBox";
 import RawHtml from "../../react/RawHtml";
@@ -12,6 +11,8 @@ import server from "../../../services/server";
 import options from "../../../services/options";
 import dialog from "../../../services/dialog";
 import { useTriliumEvent } from "../../react/hooks";
+import "./shortcuts.css";
+import NoItems from "../../react/NoItems";
 
 export default function ShortcutSettings() {
     const [ keyboardShortcuts, setKeyboardShortcuts ] = useState<KeyboardShortcut[]>([]);
@@ -70,29 +71,29 @@ export default function ShortcutSettings() {
         options.saveMany(optionsToSet);
     }, [ keyboardShortcuts ]);
 
+    const filterLowerCase = filter?.toLowerCase() ?? "";
+    const filteredKeyboardShortcuts = filter ? keyboardShortcuts.filter((action) => filterKeyboardAction(action, filterLowerCase)) : keyboardShortcuts;
+
     return (
         <OptionsSection
             className="shortcuts-options-section"
-            style={{ display: "flex", flexDirection: "column", height: "100%" }}
             noCard
         >
             <FormText>
-                {t("shortcuts.multiple_shortcuts")}
+                {t("shortcuts.multiple_shortcuts")}{" "}
                 <RawHtml html={t("shortcuts.electron_documentation")} />
             </FormText>
 
-            <FormGroup name="keyboard-shortcut-filter">
+            <header>
                 <FormTextBox
                     placeholder={t("shortcuts.type_text_to_filter")}
-                    currentValue={filter} onChange={(value) => setFilter(value.toLowerCase())}
+                    currentValue={filter} onChange={(value) => setFilter(value)}
                 />
-            </FormGroup>
+            </header>
 
-            <div style={{overflow: "auto", flexGrow: 1, flexShrink: 1}}>
-                <KeyboardShortcutTable keyboardShortcuts={keyboardShortcuts} filter={filter} />
-            </div>
+            <KeyboardShortcutTable filteredKeyboardActions={filteredKeyboardShortcuts} filter={filter} />
 
-            <div style={{ display: "flex", justifyContent: "space-between", margin: "15px 15px 0 15px"}}>
+            <footer>
                 <Button
                     text={t("shortcuts.reload_app")}
                     onClick={reloadFrontendApp}
@@ -102,12 +103,17 @@ export default function ShortcutSettings() {
                     text={t("shortcuts.set_all_to_default")}
                     onClick={resetShortcuts}
                 />
-            </div>
+            </footer>
         </OptionsSection>
     )
 }
 
-function filterKeyboardAction(action: ActionKeyboardShortcut, filter: string) {
+function filterKeyboardAction(action: KeyboardShortcut, filter: string) {
+    // Hide separators when filtering is active.
+    if ("separator" in action) {
+        return !filter;
+    }
+
     return action.actionName.toLowerCase().includes(filter) ||
         (action.friendlyName && action.friendlyName.toLowerCase().includes(filter)) ||
         (action.defaultShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
@@ -115,7 +121,7 @@ function filterKeyboardAction(action: ActionKeyboardShortcut, filter: string) {
         (action.description && action.description.toLowerCase().includes(filter));
 }
 
-function KeyboardShortcutTable({ filter, keyboardShortcuts }: { filter?: string, keyboardShortcuts: KeyboardShortcut[] }) {
+function KeyboardShortcutTable({ filteredKeyboardActions, filter }: { filteredKeyboardActions: KeyboardShortcut[], filter: string | undefined }) {
     return (
         <table class="keyboard-shortcut-table" cellPadding="10">
             <thead>
@@ -127,16 +133,17 @@ function KeyboardShortcutTable({ filter, keyboardShortcuts }: { filter?: string,
                 </tr>
             </thead>
             <tbody>
-                {keyboardShortcuts.map(action => (
+                {filteredKeyboardActions.length > 0
+                 ? filteredKeyboardActions.map(action => (
                     <tr>
-                        {"separator" in action ? ( !filter &&
+                        {"separator" in action ?
                             <td class="separator" colspan={4} style={{
                                 backgroundColor: "var(--accented-background-color)",
                                 fontWeight: "bold"
                             }}>
                                 {action.separator}
                             </td>
-                        ) : ( (!filter || filterKeyboardAction(action, filter)) &&
+                        : (
                             <>
                                 <td>{action.friendlyName}</td>
                                 <td>
@@ -147,7 +154,17 @@ function KeyboardShortcutTable({ filter, keyboardShortcuts }: { filter?: string,
                             </>
                         )}
                     </tr>
-                ))}
+                ))
+                : (
+                    <tr>
+                        <td colspan={4} class="text-center">
+                            <NoItems
+                                icon="bx bx-filter-alt"
+                                text={t("shortcuts.no_results", { filter })}
+                            />
+                        </td>
+                    </tr>
+                )}
             </tbody>
         </table>
     );

packages/commons/src/lib/attribute_names.ts

@@ -48,6 +48,7 @@ type Labels = {
     "calendar:initialDate": string;
     "map:style": string;
     "map:scale": boolean;
+    "map:hideLabels": boolean;
     "board:groupBy": string;
     maxNestingDepth: number;
     includeArchived: boolean;