feat(book_properties): group map style into vector & raster

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

@@ -1967,7 +1967,9 @@
     "hide-weekends": "Hide weekends",
     "display-week-numbers": "Display week numbers",
     "map-style": "Map style:",
-    "max-nesting-depth": "Max nesting depth:"
+    "max-nesting-depth": "Max nesting depth:",
+    "raster": "Raster",
+    "vector": "Vector"
   },
   "table_context_menu": {
     "delete_row": "Delete row"

apps/client/src/widgets/ribbon_widgets/book_properties.ts

@@ -59,7 +59,9 @@ const TPL = /*html*/`
         <span style="white-space: nowrap">${t("book_properties.view_type")}:&nbsp; &nbsp;</span>
 
         <select class="view-type-select form-select form-select-sm">
-            ${Object.entries(VIEW_TYPE_MAPPINGS).map(([type, label]) => `
+            ${Object.entries(VIEW_TYPE_MAPPINGS)
+                .filter(([type]) => type !== "raster")
+                .map(([type, label]) => `
                 <option value="${type}">${label}</option>
             `).join("")}
         </select>
@@ -215,16 +217,17 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
                 const $select = $("<select>", {
                     class: "form-select form-select-sm"
                 });
-                const actualValue = note.getLabelValue(property.bindToLabel) ?? property.defaultValue;
+                const actualValue = note.getLabelValue(property.bindToLabel) ?? property.defaultValue ?? "";
                 for (const option of property.options) {
-                    const $option = $("<option>", {
+                    if ("items" in option) {
-                        value: option.value,
+                        const $optGroup = $("<optgroup>", { label: option.name });
-                        text: option.label
+                        for (const item of option.items) {
-                    });
+                            buildComboBoxItem(item, actualValue).appendTo($optGroup);
-                    if (actualValue === option.value) {
+                        }
-                        $option.prop("selected", true);
+                        $optGroup.appendTo($select);
+                    } else {
+                        buildComboBoxItem(option, actualValue).appendTo($select);
                     }
-                    $select.append($option);
                 }
                 $select.on("change", () => {
                     const value = $select.val();
@@ -246,3 +249,14 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
 
 
 }
+
+function buildComboBoxItem({ value, label }: { value: string, label: string }, actualValue: string) {
+    const $option = $("<option>", {
+        value,
+        text: label
+    });
+    if (actualValue === value) {
+        $option.prop("selected", true);
+    }
+    return $option;
+}

apps/client/src/widgets/ribbon_widgets/book_properties_config.ts

@@ -31,6 +31,16 @@ interface NumberProperty {
     min?: number;
 }
 
+interface ComboBoxItem {
+    value: string;
+    label: string;
+}
+
+interface ComboBoxGroup {
+    name: string;
+    items: ComboBoxItem[];
+}
+
 interface ComboBoxProperty {
     type: "combobox",
     label: string;
@@ -39,7 +49,7 @@ interface ComboBoxProperty {
      * The default value is used when the label is not set.
      */
     defaultValue?: string;
-    options: { value: string; label: string }[];
+    options: (ComboBoxItem | ComboBoxGroup)[];
 }
 
 export type BookProperty = CheckBoxProperty | ButtonProperty | NumberProperty | ComboBoxProperty;
@@ -108,10 +118,26 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
                 type: "combobox",
                 bindToLabel: "mapStyle",
                 defaultValue: DEFAULT_MAP_LAYER_NAME,
-                options: Object.entries(MAP_LAYERS).map(([id, layer]) => ({
+                options: [
-                    value: id,
+                    {
-                    label: layer.name
+                        name: t("book_properties_config.raster"),
-                }))
+                        items: Object.entries(MAP_LAYERS)
+                            .filter(([_, layer]) => layer.type === "raster")
+                            .map(([id, layer]) => ({
+                                value: id,
+                                label: layer.name
+                            }))
+                    },
+                    {
+                        name: t("book_properties_config.vector"),
+                        items: Object.entries(MAP_LAYERS)
+                            .filter(([_, layer]) => layer.type === "vector")
+                            .map(([id, layer]) => ({
+                                value: id,
+                                label: layer.name
+                            }))
+                    }
+                ]
             }
         ]
     },

apps/client/src/widgets/view_widgets/geo_view/map_layer.ts

@@ -22,28 +22,28 @@ export const MAP_LAYERS: Record<string, VectorLayer | RasterLayer> = {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     },
     "versatiles-colorful": {
-        name: "VersaTiles Colorful (vector)",
+        name: "VersaTiles Colorful",
         type: "vector",
         style: async () => (await import("./styles/colorful/en.json")).default
     },
     "versatiles-eclipse": {
-        name: "VersaTiles Eclipse (vector)",
+        name: "VersaTiles Eclipse",
         type: "vector",
         style: async () => (await import("./styles/eclipse/en.json")).default,
         isDarkTheme: true
     },
     "versatiles-graybeard": {
-        name: "VersaTiles Graybeard (vector)",
+        name: "VersaTiles Graybeard",
         type: "vector",
         style: async () => (await import("./styles/graybeard/en.json")).default
     },
     "versatiles-neutrino": {
-        name: "VersaTiles Neutrino (vector)",
+        name: "VersaTiles Neutrino",
         type: "vector",
         style: async () => (await import("./styles/neutrino/en.json")).default
     },
     "versatiles-shadow": {
-        name: "VersaTiles Shadow (vector)",
+        name: "VersaTiles Shadow",
         type: "vector",
         style: async () => (await import("./styles/shadow/en.json")).default,
         isDarkTheme: true