fix: Spaces panel overlapping safe area on mobile devices

.gitignore

@@ -2,4 +2,5 @@ node_modules
 .env
 .DS_Store
 undefined
-.vscode
+.vscode
+data.json

manifest.json

@@ -7,4 +7,4 @@
   "author": "make.md",
   "authorUrl": "https://www.make.md",
   "isDesktopOnly": false
-}
+}

package.json

@@ -4,7 +4,7 @@
   "description": "make.md",
   "main": "main.js",
   "scripts": {
-    "dev": "nnode esbuild.config.mjs",
+    "dev": "node esbuild.config.mjs",
     "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
     "preview": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs preview",
     "demo": "&& node esbuild.config.mjs demo",

src/adapters/obsidian/settings.ts

@@ -3,6 +3,8 @@ import { App, PluginSettingTab, Setting } from "obsidian";
 import t from "shared/i18n";
 import MakeMDPlugin from "../../main";
 import { MakeMDSettings } from "../../shared/types/settings";
+import React from "react";
+import { SpaceFolderHidingModal } from "core/react/components/System/SettingsSections/SpaceFolderHidingModal";
 
 type SettingObject = {
   name: keyof MakeMDSettings;
@@ -391,6 +393,11 @@ export class MakeMDPluginSettingsTab extends PluginSettingTab {
         category: 'advanced',
         type: 'text',
       },
+      {
+        name: 'autoApplySpaceFolderHiding',
+        category: 'advanced',
+        type: 'boolean',
+      },
       {
         name: 'spacesFolder',
         category: 'advanced',
@@ -487,8 +494,23 @@ export class MakeMDPluginSettingsTab extends PluginSettingTab {
       settings.settings.forEach((setting) => {
         if (setting.category === category && !setting.subCategory) {
           insertSetting(containerEl, setting);
+          if (category === "advanced" && setting.name === "spaceSubFolder") {
+            const s = new Setting(containerEl)
+              .setName("Reapply space folder hiding")
+              .setDesc("Open a popup with Dry-run preview and Apply/Undo actions for Obsidian config + CSS snippet.");
+            s.addButton((btn) =>
+              btn.setButtonText("Open").onClick(() => {
+                this.plugin.superstate.ui.openModal(
+                  "Space folder hiding",
+                  React.createElement(SpaceFolderHidingModal, { superstate: this.plugin.superstate }),
+                  window
+                );
+              })
+            );
+          }
         }
       });
+
       settings.subCategories[category].forEach((subCategory) => {
         const subCategoryItems = settings.settings.filter((setting) => setting.category === category && setting.subCategory === subCategory);
         if (subCategoryItems.length > 0) {

src/core/react/components/Explorer/PropertiesView.tsx

@@ -86,7 +86,8 @@ export const PropertiesView = (props: {
     ]).filter((f) => !columns.some((g) => g.name == f));
     const cols: SpaceTableColumn[] = fmKeys.map(
       (f) =>
-        tableData?.cols?.find((g) => g.name == f) ?? {
+        tableData?.cols?.find((g) => g.name == f) ??
+        columns.find((g) => g.name == f) ?? {
           table: "",
           name: f,
           schemaId: "",
@@ -96,7 +97,8 @@ export const PropertiesView = (props: {
     if (properties) {
       newCols.push(...cols);
       fmKeys.forEach((c) => {
-        newValues[c] = parseProperty(c, properties[c]);
+        const colType = cols.find((col) => col.name == c)?.type;
+        newValues[c] = parseProperty(c, properties[c], colType);
       });
     }
 
@@ -128,20 +130,34 @@ export const PropertiesView = (props: {
     }
   };
 
+  const pathChanged = (payload: { path: string }) => {
+    if (payload.path == pathState?.path) {
+      refreshData();
+    }
+  };
+
   useEffect(() => {
     refreshData();
     props.superstate.eventsDispatcher.addListener(
       "contextStateUpdated",
       mdbChanged
     );
+    props.superstate.eventsDispatcher.addListener(
+      "pathStateUpdated",
+      pathChanged
+    );
 
     return () => {
       props.superstate.eventsDispatcher.removeListener(
         "contextStateUpdated",
         mdbChanged
       );
+      props.superstate.eventsDispatcher.removeListener(
+        "pathStateUpdated",
+        pathChanged
+      );
     };
-  }, [props.spaces, tableData]);
+  }, [props.spaces, tableData, pathState]);
   const savePropertyValue = (value: string, f: SpaceTableColumn) => {
     if (saveProperty) {
       const property = tableData?.cols?.find((g) => g.name == f.name);

src/core/react/components/SpaceView/Contexts/DataTypeView/OptionCell.tsx

@@ -66,11 +66,11 @@ export const OptionCell = (
         .map((t, index) => ({
           ...t,
           color: editable
-            ? schemeColors
+            ? t.color?.length > 0
+              ? t.color  // Use individual option color if set
+              : schemeColors
               ? schemeColors[index % schemeColors.length]?.value ||
                 "var(--mk-color-none)"
-              : t.color?.length > 0
-              ? t.color
               : undefined
             : undefined,
           removeable: editable ? editMode >= CellEditMode.EditModeView : false,
@@ -155,7 +155,7 @@ export const OptionCell = (
     } else {
       props.saveOptions(
         serializeOptionValue(newOptions, parsedValue),
-        serializeMultiDisplayString(newValues)
+        newValues[0] ?? ""
       );
     }
   };
@@ -168,7 +168,7 @@ export const OptionCell = (
     } else {
       props.saveOptions(
         serializeOptionValue(options, parsedValue),
-        serializeMultiDisplayString(value)
+        value[0] ?? ""
       );
     }
   };

src/core/react/components/System/SettingsSections/AdvancedSettings.tsx

@@ -3,20 +3,25 @@ import i18n from "shared/i18n";
 import React, { useState, useEffect } from "react";
 import { useDebouncedSave } from "./hooks";
 import { SettingsProps } from "./types";
+import { SpaceFolderHidingModal } from "./SpaceFolderHidingModal";
 
 export const AdvancedSettings = ({ superstate }: SettingsProps) => {
   const { debouncedSave, immediateSave } = useDebouncedSave(superstate);
   const [defaultDateFormat, setDefaultDateFormat] = useState(superstate.settings.defaultDateFormat);
   const [defaultTimeFormat, setDefaultTimeFormat] = useState(superstate.settings.defaultTimeFormat);
   const [spaceSubFolder, setSpaceSubFolder] = useState(superstate.settings.spaceSubFolder);
   const [spacesFolder, setSpacesFolder] = useState(superstate.settings.spacesFolder);
+  const [autoApplySpaceFolderHiding, setAutoApplySpaceFolderHiding] = useState(
+    Boolean(superstate.settings.autoApplySpaceFolderHiding)
+  );
 
   // Sync state with superstate.settings when component mounts or settings change
   useEffect(() => {
     setDefaultDateFormat(superstate.settings.defaultDateFormat);
     setDefaultTimeFormat(superstate.settings.defaultTimeFormat);
     setSpaceSubFolder(superstate.settings.spaceSubFolder);
     setSpacesFolder(superstate.settings.spacesFolder);
+    setAutoApplySpaceFolderHiding(Boolean(superstate.settings.autoApplySpaceFolderHiding));
   }, [superstate.settings]);
   return (
     <div className="mk-setting-section">
@@ -130,6 +135,53 @@ export const AdvancedSettings = ({ superstate }: SettingsProps) => {
           </div>
         </div>
 
+        <div className="mk-setting-item">
+          <div className="mk-setting-item-info">
+            <div className="mk-setting-item-name">
+              Reapply space folder hiding
+            </div>
+            <div className="mk-setting-item-description">
+              Open a popup with a dry-run preview and Apply/Undo actions.
+            </div>
+          </div>
+          <div className="mk-setting-item-control">
+            <button
+              onClick={() => {
+                superstate.ui.openModal(
+                  "Space folder hiding",
+                  <SpaceFolderHidingModal superstate={superstate} />,
+                  window
+                );
+              }}
+            >
+              Open
+            </button>
+          </div>
+        </div>
+
+        <div className="mk-setting-item">
+          <div className="mk-setting-item-info">
+            <div className="mk-setting-item-name">
+              Auto-apply space folder hiding
+            </div>
+            <div className="mk-setting-item-description">
+              When enabled, Make.md automatically updates `.obsidian/app.json` (userIgnoreFilters) and a CSS snippet when Space Folder Name changes.
+              Off by default.
+            </div>
+          </div>
+          <div className="mk-setting-item-control">
+            <input
+              type="checkbox"
+              checked={autoApplySpaceFolderHiding}
+              onChange={(e) => {
+                setAutoApplySpaceFolderHiding(e.target.checked);
+                superstate.settings.autoApplySpaceFolderHiding = e.target.checked;
+                immediateSave();
+              }}
+            />
+          </div>
+        </div>
+
         <div className="mk-setting-item">
           <div className="mk-setting-item-info">
             <div className="mk-setting-item-name">