Persist OpenProjectDialog preferences; add user settings service & API

- Add client-side userSettingsService to load/save open-project dialog prefs
- Add /api/user-settings endpoint to GET/PATCH user preferences (auth checked)
- Extend StorageService with user-settings blob handling: sanitize, merge, persist, load, update
- Integrate settings into OpenProjectDialog:
  - load saved tagFilter/sortOption on open, apply normalized tags
  - persist changes only when different from last saved (lastSavedPreferencesRef)
  - add settingsReady flag and avoid saving until initialized
  - wrap loadMindMaps in useCallback and minor selection/state resets
- Ensure tag normalization and sort option typing across layers

Author: tlaukkanen

src/components/editor/open-project-dialog.tsx

@@ -1,4 +1,11 @@
-import { useEffect, useMemo, useState, type ChangeEvent } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+} from "react";
 import {
   Autocomplete,
   Dialog,
@@ -29,6 +36,11 @@ import { MindMapMetadata } from "@/lib/storage";
 import { logger } from "@/services/logger";
 import { MindMapNode } from "@/model/types";
 import { useTheme } from "@/components/providers/ThemeProvider";
+import {
+  userSettingsService,
+  type OpenProjectDialogPreferences,
+  type ProjectSortOption,
+} from "@/services/user-settings-service";
 
 const normalizeTagsArray = (values: readonly unknown[]): string[] => {
   const seen = new Set<string>();
@@ -51,6 +63,9 @@ const normalizeTagsArray = (values: readonly unknown[]): string[] => {
   return normalized;
 };
 
+const areTagFiltersEqual = (a: readonly string[], b: readonly string[]) =>
+  a.length === b.length && a.every((value, index) => value === b[index]);
+
 interface OpenProjectDialogProps {
   open: boolean;
   onClose: () => void;
@@ -62,7 +77,11 @@ export function OpenProjectDialog({ open, onClose }: OpenProjectDialogProps) {
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
   const [selectedMindMapIds, setSelectedMindMapIds] = useState<string[]>([]);
   const [tagFilter, setTagFilter] = useState<string[]>([]);
-  const [sortOption, setSortOption] = useState<"name" | "lastModified">("name");
+  const [sortOption, setSortOption] = useState<ProjectSortOption>("name");
+  const [settingsReady, setSettingsReady] = useState(false);
+  const lastSavedPreferencesRef = useRef<OpenProjectDialogPreferences | null>(
+    null,
+  );
   const router = useRouter();
   const { palette } = useTheme();
 
@@ -99,19 +118,7 @@ export function OpenProjectDialog({ open, onClose }: OpenProjectDialogProps) {
     });
   }, [mindMaps, sortOption, tagFilter]);
 
-  useEffect(() => {
-    if (open) {
-      setSelectedMindMapIds([]);
-      setTagFilter([]);
-      setSortOption("name");
-      loadMindMaps();
-    } else {
-      setSelectedMindMapIds([]);
-      setTagFilter([]);
-    }
-  }, [open]);
-
-  const loadMindMaps = async () => {
+  const loadMindMaps = useCallback(async () => {
     try {
       setLoading(true);
       const response = await fetch("/api/mindmaps/list");
@@ -147,7 +154,115 @@ export function OpenProjectDialog({ open, onClose }: OpenProjectDialogProps) {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      setSelectedMindMapIds([]);
+      setSettingsReady(false);
+      setTagFilter([]);
+      setSortOption("name");
+      lastSavedPreferencesRef.current = null;
+
+      return;
+    }
+
+    let cancelled = false;
+
+    setSelectedMindMapIds([]);
+
+    const initializeSettings = async () => {
+      try {
+        const preferences =
+          await userSettingsService.getOpenProjectDialogSettings();
+
+        if (cancelled) {
+          return;
+        }
+
+        const normalizedTagFilter = normalizeTagsArray(preferences.tagFilter);
+        const resolvedSortOption: ProjectSortOption =
+          preferences.sortOption === "lastModified" ? "lastModified" : "name";
+
+        setTagFilter(normalizedTagFilter);
+        setSortOption(resolvedSortOption);
+        lastSavedPreferencesRef.current = {
+          tagFilter: [...normalizedTagFilter],
+          sortOption: resolvedSortOption,
+        };
+      } catch (error) {
+        logger.error("Error loading user settings:", error);
+
+        if (cancelled) {
+          return;
+        }
+
+        setTagFilter([]);
+        setSortOption("name");
+        lastSavedPreferencesRef.current = {
+          tagFilter: [],
+          sortOption: "name",
+        };
+      } finally {
+        if (!cancelled) {
+          setSettingsReady(true);
+          loadMindMaps();
+        }
+      }
+    };
+
+    initializeSettings();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [loadMindMaps, open]);
+
+  useEffect(() => {
+    if (!open || !settingsReady) {
+      return;
+    }
+
+    const currentPreferences: OpenProjectDialogPreferences = {
+      tagFilter,
+      sortOption,
+    };
+
+    const lastSaved = lastSavedPreferencesRef.current;
+
+    if (
+      lastSaved &&
+      lastSaved.sortOption === currentPreferences.sortOption &&
+      areTagFiltersEqual(lastSaved.tagFilter, currentPreferences.tagFilter)
+    ) {
+      return;
+    }
+
+    let cancelled = false;
+
+    const persistPreferences = async () => {
+      try {
+        await userSettingsService.saveOpenProjectDialogSettings(
+          currentPreferences,
+        );
+
+        if (!cancelled) {
+          lastSavedPreferencesRef.current = {
+            tagFilter: [...currentPreferences.tagFilter],
+            sortOption: currentPreferences.sortOption,
+          };
+        }
+      } catch (error) {
+        logger.error("Error saving user settings:", error);
+      }
+    };
+
+    persistPreferences();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, settingsReady, sortOption, tagFilter]);
 
   const handleMindMapSelect = (mindMapId: string) => {
     router.push(`/editor/${mindMapId}`);

src/lib/storage.ts

@@ -45,6 +45,17 @@ export interface MindMapMetadata {
   tags?: string[];
 }
 
+export type UserSettingsSortOption = "name" | "lastModified";
+
+export interface OpenProjectDialogSettings {
+  tagFilter?: string[];
+  sortOption?: UserSettingsSortOption;
+}
+
+export interface UserSettings {
+  openProjectDialog?: OpenProjectDialogSettings;
+}
+
 export interface ShareMapping {
   id: string;
   ownerEmail: string;
@@ -136,6 +147,155 @@ export class StorageService {
     return `public-shares/${encodeURIComponent(shareId)}.thumbnail${normalizedExtension}`;
   }
 
+  private getUserSettingsBlobName(userPath: string): string {
+    return `${userPath}/user-settings/user-settings.json`;
+  }
+
+  private sanitizeUserSettingsData(input: unknown): UserSettings {
+    const sanitized: UserSettings = {};
+
+    if (!input || typeof input !== "object") {
+      return sanitized;
+    }
+
+    const raw = input as Record<string, unknown>;
+    const rawOpenProjectDialog = raw.openProjectDialog;
+
+    if (
+      rawOpenProjectDialog &&
+      typeof rawOpenProjectDialog === "object" &&
+      !Array.isArray(rawOpenProjectDialog)
+    ) {
+      const openProjectDialog: OpenProjectDialogSettings = {};
+      const dialogRecord = rawOpenProjectDialog as Record<string, unknown>;
+
+      if (Object.prototype.hasOwnProperty.call(dialogRecord, "tagFilter")) {
+        openProjectDialog.tagFilter = sanitizeTags(dialogRecord.tagFilter);
+      }
+
+      if (
+        dialogRecord.sortOption === "name" ||
+        dialogRecord.sortOption === "lastModified"
+      ) {
+        openProjectDialog.sortOption =
+          dialogRecord.sortOption as UserSettingsSortOption;
+      }
+
+      sanitized.openProjectDialog = openProjectDialog;
+    }
+
+    return sanitized;
+  }
+
+  private mergeUserSettings(
+    current: UserSettings,
+    updates: UserSettings,
+  ): UserSettings {
+    const merged: UserSettings = { ...current };
+
+    if (updates.openProjectDialog) {
+      const mergedOpenProjectDialog: OpenProjectDialogSettings = {
+        ...current.openProjectDialog,
+      };
+
+      if (updates.openProjectDialog.tagFilter !== undefined) {
+        mergedOpenProjectDialog.tagFilter = updates.openProjectDialog.tagFilter;
+      }
+
+      if (updates.openProjectDialog.sortOption !== undefined) {
+        mergedOpenProjectDialog.sortOption =
+          updates.openProjectDialog.sortOption;
+      }
+
+      merged.openProjectDialog = mergedOpenProjectDialog;
+    }
+
+    return merged;
+  }
+
+  private async persistUserSettings(
+    userEmail: string,
+    settings: UserSettings,
+  ): Promise<UserSettings> {
+    const containerClient = await this.getContainerClient();
+    const userPath = this.sanitizeEmailForPath(userEmail);
+    const blobClient = containerClient.getBlockBlobClient(
+      this.getUserSettingsBlobName(userPath),
+    );
+
+    const sanitized = this.sanitizeUserSettingsData(settings);
+    const hasOpenProjectSettings =
+      sanitized.openProjectDialog &&
+      (sanitized.openProjectDialog.tagFilter !== undefined ||
+        sanitized.openProjectDialog.sortOption !== undefined);
+
+    if (!hasOpenProjectSettings) {
+      await blobClient.deleteIfExists();
+
+      return {};
+    }
+
+    const payload = JSON.stringify({
+      openProjectDialog: {
+        tagFilter: sanitized.openProjectDialog?.tagFilter ?? [],
+        sortOption: sanitized.openProjectDialog?.sortOption ?? "name",
+      },
+    });
+
+    await blobClient.upload(payload, Buffer.byteLength(payload), {
+      blobHTTPHeaders: { blobContentType: "application/json" },
+    });
+
+    return {
+      openProjectDialog: {
+        tagFilter: sanitized.openProjectDialog?.tagFilter ?? [],
+        sortOption: sanitized.openProjectDialog?.sortOption ?? "name",
+      },
+    };
+  }
+
+  async loadUserSettings(userEmail: string): Promise<UserSettings> {
+    const containerClient = await this.getContainerClient();
+    const userPath = this.sanitizeEmailForPath(userEmail);
+    const blobClient = containerClient.getBlockBlobClient(
+      this.getUserSettingsBlobName(userPath),
+    );
+
+    try {
+      const download = await blobClient.download();
+      const content = await streamToText(
+        download.readableStreamBody as NodeJS.ReadableStream,
+      );
+      const parsed = JSON.parse(content);
+
+      return this.sanitizeUserSettingsData(parsed);
+    } catch (error: any) {
+      if (error?.statusCode === 404) {
+        return {};
+      }
+
+      logger.error(`Error loading user settings for ${userEmail}`, error);
+
+      return {};
+    }
+  }
+
+  async updateUserSettings(
+    userEmail: string,
+    updates: UserSettings,
+  ): Promise<UserSettings> {
+    const sanitizedUpdates = this.sanitizeUserSettingsData(updates);
+
+    if (!sanitizedUpdates.openProjectDialog) {
+      return this.loadUserSettings(userEmail);
+    }
+
+    const current = await this.loadUserSettings(userEmail);
+    const merged = this.mergeUserSettings(current, sanitizedUpdates);
+
+    return this.persistUserSettings(userEmail, merged);
+  }
+
   private getThumbnailExtensionForContentType(contentType: string): string {
     switch (contentType.toLowerCase()) {
       case "image/jpeg":
@@ -338,6 +498,18 @@ export class StorageService {
       );
 
       for await (const blob of blobs) {
+        if (!blob.name.endsWith(".json")) {
+          continue;
+        }
+
+        if (blob.name.endsWith(".shares.json")) {
+          continue;
+        }
+
+        if (blob.name.includes("/user-settings/")) {
+          continue;
+        }
+
         const blobClient = containerClient.getBlobClient(blob.name);
         const properties = await blobClient.getProperties();
         let tags: string[] | undefined;