refactor: Dynamic CSS-based space folder hiding

.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

@@ -487,8 +487,40 @@ export class MakeMDPluginSettingsTab extends PluginSettingTab {
       settings.settings.forEach((setting) => {
         if (setting.category === category && !setting.subCategory) {
           insertSetting(containerEl, setting);
+          if (category === "advanced" && setting.name === "spaceSubFolder") {
+            // Hide space folders toggle
+            const hidingManager = this.plugin.hidingManager;
+            const isEnabled = hidingManager?.isEnabled() ?? false;
+            const currentPattern = hidingManager?.getCurrentPattern();
+
+            const hidingSetting = new Setting(containerEl)
+              .setName("Hide space folders from UI")
+              .setDesc(
+                "Hides space folders from File Explorer, Search, and Quick Switcher. " +
+                "Uses dynamic CSS (works only when plugin is enabled). " +
+                "Status: " + (isEnabled && currentPattern ? `Active (hiding: ${currentPattern})` : "Disabled") + ". " +
+                "Note: Graph View requires manual configuration."
+              );
+
+            hidingSetting.addToggle((toggle) =>
+              toggle.setValue(isEnabled).onChange(async (value: boolean) => {
+                try {
+                  if (value) {
+                    await hidingManager?.enable(this.plugin.superstate.settings.spaceSubFolder);
+                  } else {
+                    await hidingManager?.disable();
+                  }
+                  // Refresh settings display
+                  this.display();
+                } catch (err) {
+                  console.error("Failed to toggle hiding:", err);
+                }
+              })
+            );
+          }
         }
       });
+
       settings.subCategories[category].forEach((subCategory) => {
         const subCategoryItems = settings.settings.filter((setting) => setting.category === category && setting.subCategory === subCategory);
         if (subCategoryItems.length > 0) {

src/core/hiding/DynamicCSSManager.ts

@@ -0,0 +1,119 @@
+/**
+ * DynamicCSSManager
+ * 
+ * Manages dynamic CSS injection for hiding space folders from Obsidian UI.
+ * Uses DOM <style> element instead of CSS snippet files for automatic cleanup.
+ */
+
+export class DynamicCSSManager {
+  private styleElement: HTMLStyleElement | null = null;
+  private currentPattern: string | null = null;
+
+  /**
+   * Apply CSS hiding for the given pattern
+   * @param pattern - Folder name to hide (e.g., "_space", ".space")
+   */
+  public apply(pattern: string): void {
+    // Remove existing style if any
+    this.remove();
+
+    // Create new style element
+    this.styleElement = document.createElement('style');
+    this.styleElement.id = 'makemd-dynamic-space-hiding';
+    this.styleElement.setAttribute('data-makemd-managed', 'true');
+    this.styleElement.textContent = this.buildCSS(pattern);
+
+    // Inject into DOM
+    document.head.appendChild(this.styleElement);
+
+    this.currentPattern = pattern;
+  }
+
+  /**
+   * Remove CSS hiding
+   */
+  public remove(): void {
+    if (this.styleElement) {
+      this.styleElement.remove();
+      this.styleElement = null;
+    }
+    this.currentPattern = null;
+  }
+
+  /**
+   * Check if hiding is currently active
+   */
+  public isActive(): boolean {
+    return this.styleElement !== null && document.head.contains(this.styleElement);
+  }
+
+  /**
+   * Get current pattern
+   */
+  public getCurrentPattern(): string | null {
+    return this.currentPattern;
+  }
+
+  /**
+   * Rebuild CSS with new pattern
+   * @param pattern - New folder name to hide
+   */
+  public rebuild(pattern: string): void {
+    this.apply(pattern);
+  }
+
+  /**
+   * Build CSS rules for hiding the pattern
+   * @param pattern - Folder name to hide
+   */
+  private buildCSS(pattern: string): string {
+    const escapedPattern = this.escapeForCSS(pattern);
+
+    return [
+      '/* Auto-generated by Make.md - Dynamic Space Folder Hiding */',
+      '/* DO NOT EDIT - This style is managed automatically */',
+      '',
+      '/* File Explorer */',
+      `.nav-folder-title[data-path*="${escapedPattern}"],`,
+      `.tree-item[data-path*="${escapedPattern}"],`,
+      `.tree-item-self[data-path*="${escapedPattern}"] {`,
+      '  display: none !important;',
+      '}',
+      '',
+      '/* Search Results */',
+      `.search-result-file-title[data-path*="${escapedPattern}"],`,
+      `.search-result-container[data-path*="${escapedPattern}"] {`,
+      '  display: none !important;',
+      '}',
+      '',
+      '/* Quick Switcher */',
+      `.suggestion-item[data-path*="${escapedPattern}"],`,
+      `.suggestion-content[data-path*="${escapedPattern}"] {`,
+      '  display: none !important;',
+      '}',
+      '',
+      '/* Link lists and backlinks */',
+      `.tree-item-inner[data-path*="${escapedPattern}"] {`,
+      '  display: none !important;',
+      '}',
+      '',
+      '/* Files inside space folder */',
+      `.nav-file-title[data-path*="${escapedPattern}/"] {`,
+      '  display: none !important;',
+      '}',
+      '',
+      '/* Note: Graph View requires manual configuration */',
+      '/* See documentation for Graph View setup */',
+    ].join('\n');
+  }
+
+  /**
+   * Escape special characters for CSS attribute selector
+   * @param pattern - Pattern to escape
+   */
+  private escapeForCSS(pattern: string): string {
+    // Escape special CSS characters
+    // For attribute selectors, we need to escape: " \ 
+    return pattern.replace(/["\\]/g, '\\$&');
+  }
+}

src/core/hiding/SpaceFolderHidingManager.ts

@@ -0,0 +1,118 @@
+/**
+ * SpaceFolderHidingManager
+ * 
+ * Main manager for space folder hiding functionality.
+ * Coordinates DynamicCSSManager and TrackingStore.
+ */
+
+import { DataAdapter } from 'obsidian';
+import { DynamicCSSManager } from './DynamicCSSManager';
+import { TrackingStore, HidingState } from './TrackingStore';
+
+export class SpaceFolderHidingManager {
+  private cssManager: DynamicCSSManager;
+  private tracking: TrackingStore;
+  private reindexCallback: () => Promise<void>;
+
+  constructor(
+    adapter: DataAdapter,
+    configDir: string,
+    reindexCallback: () => Promise<void>
+  ) {
+    this.cssManager = new DynamicCSSManager();
+    this.tracking = new TrackingStore(adapter, configDir);
+    this.reindexCallback = reindexCallback;
+  }
+
+  /**
+   * Initialize - load state and restore if needed
+   */
+  public async initialize(): Promise<void> {
+    const state = await this.tracking.load();
+
+    // Restore hiding if it was enabled
+    if (state.mode === 'dynamic' && state.pattern) {
+      this.cssManager.apply(state.pattern);
+    }
+  }
+
+  /**
+   * Enable hiding for the given pattern
+   */
+  public async enable(pattern: string): Promise<void> {
+    if (!pattern || pattern.trim().length === 0) {
+      throw new Error('Pattern cannot be empty');
+    }
+
+    const previousPattern = this.tracking.getPattern();
+    const needsReindex = previousPattern !== pattern;
+
+    // Apply CSS
+    this.cssManager.apply(pattern);
+
+    // Save state
+    await this.tracking.save({
+      mode: 'dynamic',
+      pattern: pattern,
+      applied_at: Date.now(),
+      css_injected: true,
+    });
+
+    // Reindex if pattern changed
+    if (needsReindex) {
+      await this.reindexCallback();
+    }
+  }
+
+  /**
+   * Disable hiding
+   */
+  public async disable(): Promise<void> {
+    // Remove CSS
+    this.cssManager.remove();
+
+    // Save state
+    await this.tracking.save({
+      mode: 'disabled',
+      pattern: null,
+      applied_at: null,
+      css_injected: false,
+    });
+  }
+
+  /**
+   * Check if hiding is enabled
+   */
+  public isEnabled(): boolean {
+    return this.cssManager.isActive();
+  }
+
+  /**
+   * Get current pattern
+   */
+  public getCurrentPattern(): string | null {
+    return this.cssManager.getCurrentPattern();
+  }
+
+  /**
+   * Get current state
+   */
+  public getState(): HidingState {
+    return this.tracking.getState();
+  }
+
+  /**
+   * Check if reapply is needed (pattern mismatch)
+   */
+  public needsReapply(currentPattern: string): boolean {
+    const activePattern = this.getCurrentPattern();
+    return this.isEnabled() && activePattern !== currentPattern;
+  }
+
+  /**
+   * Cleanup - called on plugin unload
+   */
+  public cleanup(): void {
+    this.cssManager.remove();
+  }
+}