feat: persist recent projects with reopen UI

Recent projects now survive reloads via localStorage and are reopenable
from an Open dropdown, including project URLs over http. Adds store
helpers to remember, forget, and clear entries.

Author: giswqs

apps/geolibre-desktop/src/App.tsx

@@ -2,6 +2,7 @@ import { DesktopShell } from "./components/layout/DesktopShell";
 import { useLayoutOptions } from "./hooks/useLayoutOptions";
 import { usePlugins } from "./hooks/usePlugins";
 import { useProjectUrlLoader } from "./hooks/useProjectUrlLoader";
+import { useRecentProjectsPersistence } from "./hooks/useRecentProjectsPersistence";
 import { useThemeMode } from "./hooks/useThemeMode";
 
 export default function App() {
@@ -10,6 +11,7 @@ export default function App() {
   const projectUrlLoadState = useProjectUrlLoader();
 
   usePlugins();
+  useRecentProjectsPersistence();
   return (
     <DesktopShell
       layoutOptions={layoutOptions}

apps/geolibre-desktop/src/components/layout/TopToolbar.tsx

@@ -42,6 +42,7 @@ import {
 import {
   Database,
   FolderOpen,
+  History,
   Layers,
   Map,
   Moon,
@@ -54,7 +55,11 @@ import {
 import { useState, useSyncExternalStore } from "react";
 import { createAppAPI, usePluginRegistry } from "../../hooks/usePlugins";
 import type { ThemeMode } from "../../hooks/useThemeMode";
-import { openProjectFile, saveProjectFile } from "../../lib/tauri-io";
+import {
+  openProjectFile,
+  openRecentProjectFile,
+  saveProjectFile,
+} from "../../lib/tauri-io";
 import { resolveProjectXyzLayers } from "../../lib/xyz-url";
 import { AddDataDialog, type AddDataKind } from "./AddDataDialog";
 import { AboutDialog } from "./AboutDialog";
@@ -95,6 +100,22 @@ const PLUGIN_POSITION_ITEMS: Array<{
   { value: "bottom-right", label: "Bottom right" },
 ];
 
+function projectPathLabel(path: string): string {
+  return path.split(/[/\\]/).pop() || path;
+}
+
+function formatRecentProjectTime(openedAt: string): string {
+  const openedDate = new Date(openedAt);
+  if (Number.isNaN(openedDate.getTime())) return "";
+
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(openedDate);
+}
+
 export function TopToolbar({
   compact = false,
   mapControllerRef,
@@ -107,8 +128,12 @@ export function TopToolbar({
   const setProcessingOpen = useAppStore((s) => s.setProcessingOpen);
   const projectName = useAppStore((s) => s.projectName);
   const projectPath = useAppStore((s) => s.projectPath);
+  const recentProjects = useAppStore((s) => s.recentProjects);
   const setProjectPath = useAppStore((s) => s.setProjectPath);
   const setProjectName = useAppStore((s) => s.setProjectName);
+  const rememberRecentProject = useAppStore((s) => s.rememberRecentProject);
+  const forgetRecentProject = useAppStore((s) => s.forgetRecentProject);
+  const clearRecentProjects = useAppStore((s) => s.clearRecentProjects);
   const markSaved = useAppStore((s) => s.markSaved);
   const [controlsVisible, setControlsVisible] = useState<
     Record<ToolbarMapControl, boolean>
@@ -140,6 +165,34 @@ export function TopToolbar({
     }
   };
 
+  const handleOpenRecent = async (path: string) => {
+    let result: Awaited<ReturnType<typeof openRecentProjectFile>>;
+
+    try {
+      result = await openRecentProjectFile(path);
+    } catch (error) {
+      forgetRecentProject(path);
+      console.error("Failed to open recent project", error);
+      window.alert(
+        error instanceof Error
+          ? error.message
+          : "Could not open the recent project.",
+      );
+      return;
+    }
+
+    try {
+      loadProject(await resolveProjectXyzLayers(result.project), result.path);
+    } catch (error) {
+      console.error("Failed to load recent project", error);
+      window.alert(
+        error instanceof Error
+          ? error.message
+          : "Could not load the recent project.",
+      );
+    }
+  };
+
   const handleSave = async (): Promise<boolean> => {
     const state = useAppStore.getState();
     const defaultProjectName = state.projectName.trim() || "Untitled Project";
@@ -159,6 +212,11 @@ export function TopToolbar({
     );
     if (!path) return false;
     setProjectPath(path);
+    rememberRecentProject({
+      path,
+      name: project.name,
+      openedAt: new Date().toISOString(),
+    });
     markSaved();
     return true;
   };
@@ -244,16 +302,62 @@ export function TopToolbar({
         showLabels={showLabels}
         onSaveCurrentProject={handleSave}
       />
-      <Button
-        className={toolbarButtonClass}
-        variant="ghost"
-        size={toolbarButtonSize}
-        onClick={handleOpen}
-        aria-label="Open"
-      >
-        <FolderOpen className={toolbarIconClassName} />
-        {renderToolbarLabel("Open")}
-      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            className={toolbarButtonClass}
+            variant="ghost"
+            size={toolbarButtonSize}
+            aria-label="Open"
+          >
+            <FolderOpen className={toolbarIconClassName} />
+            {renderToolbarLabel("Open")}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-80">
+          <DropdownMenuLabel>Project</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onSelect={() => void handleOpen()}>
+            <FolderOpen className="mr-2 h-3.5 w-3.5" />
+            Open Project...
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel>Recent projects</DropdownMenuLabel>
+          {recentProjects.length === 0 ? (
+            <DropdownMenuItem disabled>No recent projects</DropdownMenuItem>
+          ) : (
+            recentProjects.map((project) => {
+              const openedAt = formatRecentProjectTime(project.openedAt);
+              return (
+                <DropdownMenuItem
+                  key={project.path}
+                  className="flex-col items-start gap-0.5"
+                  onSelect={() => void handleOpenRecent(project.path)}
+                >
+                  <span className="max-w-full truncate font-medium">
+                    {project.name || projectPathLabel(project.path)}
+                  </span>
+                  <span className="flex max-w-full items-center gap-1 text-xs text-muted-foreground">
+                    <History className="h-3 w-3 shrink-0" />
+                    <span className="truncate">
+                      {openedAt
+                        ? `${openedAt} - ${project.path}`
+                        : project.path}
+                    </span>
+                  </span>
+                </DropdownMenuItem>
+              );
+            })
+          )}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            disabled={recentProjects.length === 0}
+            onSelect={clearRecentProjects}
+          >
+            Clear Recent Projects
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
       <Button
         className={toolbarButtonClass}
         variant="ghost"

apps/geolibre-desktop/src/hooks/useRecentProjectsPersistence.ts

@@ -0,0 +1,47 @@
+import { useAppStore, type RecentProjectEntry } from "@geolibre/core";
+import { useEffect } from "react";
+
+const RECENT_PROJECTS_STORAGE_KEY = "geolibre.recentProjects";
+
+function isRecentProjectEntry(value: unknown): value is RecentProjectEntry {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value as Partial<RecentProjectEntry>;
+  return (
+    typeof candidate.path === "string" &&
+    typeof candidate.name === "string" &&
+    typeof candidate.openedAt === "string"
+  );
+}
+
+function loadRecentProjects(): RecentProjectEntry[] {
+  const stored = window.localStorage.getItem(RECENT_PROJECTS_STORAGE_KEY);
+  if (!stored) return [];
+
+  try {
+    const parsed = JSON.parse(stored) as unknown;
+    return Array.isArray(parsed) ? parsed.filter(isRecentProjectEntry) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveRecentProjects(projects: RecentProjectEntry[]) {
+  window.localStorage.setItem(
+    RECENT_PROJECTS_STORAGE_KEY,
+    JSON.stringify(projects),
+  );
+}
+
+export function useRecentProjectsPersistence() {
+  const setRecentProjects = useAppStore((state) => state.setRecentProjects);
+
+  useEffect(() => {
+    setRecentProjects(loadRecentProjects());
+
+    return useAppStore.subscribe((state, previous) => {
+      if (state.recentProjects !== previous.recentProjects) {
+        saveRecentProjects(state.recentProjects);
+      }
+    });
+  }, [setRecentProjects]);
+}

apps/geolibre-desktop/src/lib/tauri-io.ts

@@ -91,6 +91,15 @@ function isAbortError(error: unknown): boolean {
   return error instanceof DOMException && error.name === "AbortError";
 }
 
+function isHttpUrl(path: string): boolean {
+  try {
+    const url = new URL(path);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
 function fileExtension(path: string): string {
   const name = browserSafeFileName(path).toLowerCase();
   if (name.endsWith(".geoparquet")) return "geoparquet";
@@ -532,6 +541,29 @@ export async function openProjectFile(): Promise<{
   return { project, path: selected };
 }
 
+export async function openRecentProjectFile(path: string): Promise<{
+  project: GeoLibreProject;
+  path: string;
+}> {
+  if (isHttpUrl(path)) {
+    const response = await fetch(path);
+    if (!response.ok) {
+      throw new Error(
+        `Could not load project URL: HTTP ${response.status} ${response.statusText}`,
+      );
+    }
+    return { project: parseProject(await response.text()), path };
+  }
+
+  if (!isTauri()) {
+    throw new Error(
+      "Recent local projects can only be reopened in GeoLibre Desktop.",
+    );
+  }
+
+  return { project: parseProject(await readTextFile(path)), path };
+}
+
 export async function saveProjectFile(
   content: string,
   defaultName?: string,

docs/index.md

@@ -97,4 +97,4 @@ Use `toolbar=icons` when you only want icon-only toolbar buttons. `panels=hidden
 
 ## Project status
 
-GeoLibre is an active prototype. Version 0.5.0 includes the map workspace, project format, plugin API, browser vector import, DuckDB-WASM Spatial loading, advanced Add Data workflows, MBTiles desktop support, ArcGIS layers, COG and GeoTIFF raster rendering, PMTiles, Zarr, LiDAR, and Gaussian splats. See the [roadmap](roadmap.md) for planned work on SQL workflows, persisted recent projects, the Python processing sidecar, and external plugin loading.
+GeoLibre is an active prototype. Version 0.5.0 includes the map workspace, project format, plugin API, browser vector import, DuckDB-WASM Spatial loading, advanced Add Data workflows, MBTiles desktop support, ArcGIS layers, COG and GeoTIFF raster rendering, PMTiles, Zarr, LiDAR, Gaussian splats, and persisted recent projects. See the [roadmap](roadmap.md) for planned work on SQL workflows, the Python processing sidecar, and external plugin loading.

docs/roadmap.md

@@ -14,7 +14,7 @@
 - [x] In-session recent project tracking
 - [x] Feature highlight from attribute table
 - [x] Optional zoom to selected feature
-- [ ] Recent projects UI and persistence
+- [x] Recent projects UI and persistence
 
 ## v0.3: Cloud-native formats
 

packages/core/src/store.ts

@@ -56,6 +56,10 @@ export interface AppState {
   loadProject: (project: GeoLibreProject, path?: string | null) => void;
   setProjectPath: (path: string | null) => void;
   setProjectName: (name: string) => void;
+  setRecentProjects: (projects: RecentProjectEntry[]) => void;
+  rememberRecentProject: (entry: RecentProjectEntry) => void;
+  forgetRecentProject: (path: string) => void;
+  clearRecentProjects: () => void;
   markSaved: () => void;
 
   addLayer: (layer: GeoLibreLayer, beforeLayerId?: string | null) => void;
@@ -74,6 +78,30 @@ export interface AppState {
   ) => string;
 }
 
+const MAX_RECENT_PROJECTS = 10;
+
+function normalizeRecentProjects(
+  projects: RecentProjectEntry[],
+): RecentProjectEntry[] {
+  const seen = new Set<string>();
+  const normalized: RecentProjectEntry[] = [];
+
+  for (const project of projects) {
+    const path = project.path.trim();
+    if (!path || seen.has(path)) continue;
+
+    const name = project.name.trim() || path.split(/[/\\]/).pop() || path;
+    normalized.push({
+      path,
+      name,
+      openedAt: project.openedAt || new Date().toISOString(),
+    });
+    seen.add(path);
+  }
+
+  return normalized.slice(0, MAX_RECENT_PROJECTS);
+}
+
 export const useAppStore = create<AppState>((set, get) => ({
   projectName: "Untitled Project",
   projectPath: null,
@@ -144,22 +172,27 @@ export const useAppStore = create<AppState>((set, get) => ({
       identifyLayerId: null,
     });
     if (path) {
-      const entry: RecentProjectEntry = {
+      get().rememberRecentProject({
         path,
         name: project.name,
         openedAt: new Date().toISOString(),
-      };
-      set((s) => ({
-        recentProjects: [
-          entry,
-          ...s.recentProjects.filter((r) => r.path !== path),
-        ].slice(0, 10),
-      }));
+      });
     }
   },
 
   setProjectPath: (path) => set({ projectPath: path }),
   setProjectName: (name) => set({ projectName: name, isDirty: true }),
+  setRecentProjects: (projects) =>
+    set({ recentProjects: normalizeRecentProjects(projects) }),
+  rememberRecentProject: (entry) =>
+    set((s) => ({
+      recentProjects: normalizeRecentProjects([entry, ...s.recentProjects]),
+    })),
+  forgetRecentProject: (path) =>
+    set((s) => ({
+      recentProjects: s.recentProjects.filter((project) => project.path !== path),
+    })),
+  clearRecentProjects: () => set({ recentProjects: [] }),
   markSaved: () => set({ isDirty: false }),
 
   addLayer: (layer, beforeLayerId = null) =>