@jxsuite/studio 0.31.0 → 0.32.0

package/src/recent-projects.ts

@@ -1,13 +1,12 @@
 /// <reference lib="dom" />
-interface RecentProject {
-  name: string;
-  root: string;
-  timestamp: number;
-}
+import { getPlatform, hasPlatform } from "./platform";
+import type { RecentProjectEntry } from "./types";
 
 interface RecentFile {
   path: string;
   name: string;
+  /** The project root the file belongs to, so recents can be scoped to the open project. */
+  root: string;
   timestamp: number;
 }
 
@@ -16,55 +15,154 @@ const FILES_STORAGE_KEY = "jx-studio-recent-files";
 const MAX_RECENT = 8;
 const MAX_RECENT_FILES = 10;
 
-/** @returns {RecentProject[]} */
-export function getRecentProjects() {
+/**
+ * In-memory mirror of the backend recent-projects store, hydrated once at startup. Render is
+ * synchronous, so reads come from here (or directly from localStorage on the dev server) rather
+ * than awaiting the backend.
+ */
+let cache: RecentProjectEntry[] = [];
+
+/**
+ * The active backend store, or null when none is available (dev server). Desktop and chromium
+ * persist a user-level file shared across all projects/windows; the dev server falls back to
+ * per-origin localStorage, which already survives reloads.
+ */
+function backend(): StudioRecentStore | null {
+  if (!hasPlatform()) {
+    return null;
+  }
+  const platform = getPlatform();
+  return platform.getRecentProjects && platform.saveRecentProjects
+    ? (platform as StudioRecentStore)
+    : null;
+}
+
+interface StudioRecentStore {
+  getRecentProjects: () => Promise<RecentProjectEntry[]>;
+  saveRecentProjects: (projects: RecentProjectEntry[]) => Promise<void>;
+}
+
+function loadFromLocalStorage(): RecentProjectEntry[] {
   try {
     const raw = localStorage.getItem(STORAGE_KEY);
     if (!raw) {
       return [];
     }
-    return (JSON.parse(raw) as RecentProject[]).toSorted((a, b) => b.timestamp - a.timestamp);
+    const parsed = JSON.parse(raw) as RecentProjectEntry[];
+    return Array.isArray(parsed) ? parsed : [];
   } catch {
     return [];
   }
 }
 
+/** The current list from whichever store is active (cache for backend, localStorage otherwise). */
+function currentList(): RecentProjectEntry[] {
+  return backend() ? cache : loadFromLocalStorage();
+}
+
+/** Persist a new list to the active store and keep the in-memory cache in sync. */
+function commit(list: RecentProjectEntry[]): void {
+  cache = list;
+  const store = backend();
+  if (store) {
+    void store.saveRecentProjects(list);
+  } else {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
+    } catch {
+      /* Storage unavailable — best effort */
+    }
+  }
+}
+
+/**
+ * Load the recent-projects list into the in-memory cache. Call once after the platform is
+ * registered; a no-op (other than priming the cache) on the dev server, where reads hit
+ * localStorage directly.
+ */
+export async function hydrateRecentProjects(): Promise<void> {
+  const store = backend();
+  if (!store) {
+    return;
+  }
+  try {
+    cache = await store.getRecentProjects();
+  } catch {
+    cache = [];
+  }
+}
+
+/** @returns {RecentProjectEntry[]} Newest-first */
+export function getRecentProjects(): RecentProjectEntry[] {
+  return currentList().toSorted((a, b) => b.timestamp - a.timestamp);
+}
+
 /**
  * @param {string} name
  * @param {string} root
  */
 export function addRecentProject(name: string, root: string) {
-  const projects = getRecentProjects().filter((p) => p.root !== root);
+  const projects = currentList().filter((p) => p.root !== root);
   projects.unshift({ name, root, timestamp: Date.now() });
   if (projects.length > MAX_RECENT) {
     projects.length = MAX_RECENT;
   }
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(projects));
+  commit(projects);
+}
+
+/** Drop a single project from the recent list (used by the UI remove action + auto-prune). */
+export function removeRecentProject(root: string) {
+  commit(currentList().filter((p) => p.root !== root));
 }
 
 export function clearRecentProjects() {
-  localStorage.removeItem(STORAGE_KEY);
+  cache = [];
+  const store = backend();
+  if (store) {
+    void store.saveRecentProjects([]);
+  } else {
+    localStorage.removeItem(STORAGE_KEY);
+  }
 }
 
-/** @returns {RecentFile[]} */
-export function getRecentFiles() {
+function loadRecentFiles(): RecentFile[] {
   try {
     const raw = localStorage.getItem(FILES_STORAGE_KEY);
     if (!raw) {
       return [];
     }
-    return (JSON.parse(raw) as RecentFile[]).toSorted((a, b) => b.timestamp - a.timestamp);
+    const parsed = JSON.parse(raw) as RecentFile[];
+    return Array.isArray(parsed) ? parsed : [];
   } catch {
     return [];
   }
 }
 
-/** @param {{ path: string; name: string }} file */
-export function trackRecentFile(file: { path: string; name: string }) {
-  const recent = getRecentFiles().filter((f) => f.path !== file.path);
-  recent.unshift({ name: file.name, path: file.path, timestamp: Date.now() });
-  if (recent.length > MAX_RECENT_FILES) {
-    recent.length = MAX_RECENT_FILES;
+/**
+ * Recently-opened files, newest-first. Pass a project `root` to scope the list to that project (the
+ * Quick Access modal does this so it only ever shows files from the open project).
+ *
+ * @param {string} [root]
+ * @returns {RecentFile[]}
+ */
+export function getRecentFiles(root?: string) {
+  const all = loadRecentFiles().toSorted((a, b) => b.timestamp - a.timestamp);
+  return root == null ? all : all.filter((f) => f.root === root);
+}
+
+/** @param {{ path: string; name: string; root: string }} file */
+export function trackRecentFile(file: { path: string; name: string; root: string }) {
+  const all = loadRecentFiles().filter((f) => !(f.root === file.root && f.path === file.path));
+  all.unshift({ name: file.name, path: file.path, root: file.root, timestamp: Date.now() });
+  // Cap per project so a busy project can't evict another project's history.
+  const perRoot = new Map<string, number>();
+  const kept: RecentFile[] = [];
+  for (const f of all.toSorted((a, b) => b.timestamp - a.timestamp)) {
+    const n = (perRoot.get(f.root) ?? 0) + 1;
+    perRoot.set(f.root, n);
+    if (n <= MAX_RECENT_FILES) {
+      kept.push(f);
+    }
   }
-  localStorage.setItem(FILES_STORAGE_KEY, JSON.stringify(recent));
+  localStorage.setItem(FILES_STORAGE_KEY, JSON.stringify(kept));
 }

package/src/studio.ts

@@ -106,7 +106,7 @@ import { initCssData } from "./panels/style-utils";
 import { updateForcedPseudoPreview } from "./panels/pseudo-preview";
 import { initPanelEvents } from "./panels/panel-events";
 import { initQuickSearch } from "./panels/quick-search";
-import { addRecentProject } from "./recent-projects";
+import { addRecentProject, hydrateRecentProjects, removeRecentProject } from "./recent-projects";
 import { initWelcome } from "./panels/welcome-screen";
 import { openNewProjectModal } from "./new-project/new-project-modal";
 import type { DocumentStackEntry, GitDiffState } from "./types";
@@ -338,7 +338,7 @@ toolbarPanel.mount(toolbarEl, {
 });
 
 initLayers();
-initQuickSearch();
+initQuickSearch({ openRecentProject: (root: string) => openRecentProject(root) });
 
 tabStrip.mount(document.querySelector("#tab-strip") as HTMLElement);
 
@@ -662,6 +662,14 @@ if (_projectParam) {
   ensureFsSync();
 }
 
+// Hydrate the recent-projects list from the backend store (desktop/chromium), then refresh the
+// Toolbar dropdown + welcome screen, both of which read it synchronously.
+// oxlint-disable-next-line unicorn/prefer-top-level-await -- deliberate fire-and-forget: hydration must not block initial render
+void hydrateRecentProjects().then(() => {
+  toolbarPanel.render();
+  render();
+});
+
 // ─── Left panel: delegated to panels/left-panel.js ───────────────────────────
 
 function renderLeftPanel() {
@@ -748,6 +756,11 @@ async function openRecentProject(root: string) {
     ensureFsSync();
     void maybePromptJxsuiteUpdate(root);
   } catch (error) {
+    // The project likely moved or was deleted — drop the stale entry so it stops cluttering the
+    // List, and refresh the dropdown + welcome screen.
+    removeRecentProject(root);
+    toolbarPanel.render();
+    render();
     statusMessage(`Error: ${errorMessage(error)}`);
   }
 }

package/src/types.ts

@@ -232,6 +232,22 @@ export interface StudioPlatform {
   setWindowProject?: (root: string) => Promise<{ deduped: boolean; config: ProjectConfig | null }>;
   /** The project root this window's backend is currently bound to. */
   getProjectRoot?: () => Promise<{ root: string | null }>;
+  // ─── Recent projects (backend-persisted; undefined on dev-server) ───────────
+  /**
+   * Read the user-level recent-projects list from a backend store shared across all
+   * projects/windows. Platforms without a native backend (dev server) omit it and the studio falls
+   * back to localStorage.
+   */
+  getRecentProjects?: () => Promise<RecentProjectEntry[]>;
+  /** Persist the full recent-projects list to the backend store. */
+  saveRecentProjects?: (projects: RecentProjectEntry[]) => Promise<void>;
+}
+
+/** A recently-opened project, keyed by its re-openable `root` (platform-specific). */
+export interface RecentProjectEntry {
+  name: string;
+  root: string;
+  timestamp: number;
 }
 
 // ─── Studio Types ───────────────────────────────────────────────────────────

package/src/ui/media-picker.ts

@@ -10,7 +10,7 @@ import { html, render as litRender, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { ref } from "lit-html/directives/ref.js";
 import { getPlatform } from "../platform";
-import { debouncedStyleCommit } from "../store";
+import { debouncedStyleCommit, renderOnly } from "../store";
 import { getLayerSlot } from "./layers";
 
 // ─── Media file cache ────────────────────────────────────────────────────────
@@ -88,6 +88,10 @@ async function loadMediaCache() {
     m.path = m.path.replace(/^\/public\//, "/");
   }
   mediaCacheLoaded = true;
+  // Re-render the host panels so the Browse button (gated on mediaCache.length) appears once the
+  // Async listing resolves — including when an image value is already set, so the current image can
+  // Be replaced. Mirrors loadLayoutEntries()'s renderOnly() in head-panel.
+  renderOnly("leftPanel", "rightPanel");
 }
 
 /** Force media cache reload (e.g. after upload). */

package/src/utils/studio-utils.ts

@@ -168,6 +168,9 @@ export function findContentTypeSchema(
   if (!documentPath || !projectConfig?.contentTypes) {
     return null;
   }
+  // Content-type `source` prefixes are always forward-slash. The desktop platform can hand us
+  // OS-native backslash paths on Windows, so normalize before prefix matching.
+  const docPath = documentPath.replaceAll("\\", "/");
   for (const [name, def] of Object.entries(
     projectConfig.contentTypes as Record<string, ContentTypeDef>,
   )) {
@@ -177,7 +180,7 @@ export function findContentTypeSchema(
     const src = def.source.replace(/^\.\//, "").replace(/\/$/, "");
     const hasExt = src.includes(".") && !src.endsWith("/");
     if (hasExt) {
-      if (documentPath === src || documentPath.endsWith(`/${src}`)) {
+      if (docPath === src || docPath.endsWith(`/${src}`)) {
         return { name, schema: def.schema };
       }
     } else {
@@ -187,7 +190,7 @@ export function findContentTypeSchema(
           : (formatByName(def.format)?.extensions[0] ??
             defaultContentFormat()?.extensions[0] ??
             ".json");
-      if (documentPath.startsWith(`${src}/`) && documentPath.endsWith(ext)) {
+      if (docPath.startsWith(`${src}/`) && docPath.endsWith(ext)) {
         return { name, schema: def.schema };
       }
     }