paint-ui/store/recent-files-store.ts

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export interface RecentFile {
  id: string;
  name: string;
  path: string;
  timestamp: number;
  thumbnail?: string;
}

interface RecentFilesStore {
  /** List of recent files */
  recentFiles: RecentFile[];
  /** Maximum number of recent files to keep */
  maxRecent: number;

  /** Add file to recent list */
  addRecentFile: (name: string, path: string, thumbnail?: string) => void;
  /** Remove file from recent list */
  removeRecentFile: (id: string) => void;
  /** Clear all recent files */
  clearRecentFiles: () => void;
  /** Update file thumbnail */
  updateThumbnail: (id: string, thumbnail: string) => void;
}

export const useRecentFilesStore = create<RecentFilesStore>()(
  persist(
    (set, get) => ({
      recentFiles: [],
      maxRecent: 10,

      addRecentFile: (name, path, thumbnail) => {
        const id = `${path}-${Date.now()}`;
        const newFile: RecentFile = {
          id,
          name,
          path,
          timestamp: Date.now(),
          thumbnail,
        };

        set((state) => {
          // Remove duplicate if exists (same path)
          const filtered = state.recentFiles.filter((f) => f.path !== path);
          // Add new file at the beginning
          const updated = [newFile, ...filtered];
          // Keep only maxRecent files
          return {
            recentFiles: updated.slice(0, state.maxRecent),
          };
        });
      },

      removeRecentFile: (id) => {
        set((state) => ({
          recentFiles: state.recentFiles.filter((f) => f.id !== id),
        }));
      },

      clearRecentFiles: () => {
        set({ recentFiles: [] });
      },

      updateThumbnail: (id, thumbnail) => {
        set((state) => ({
          recentFiles: state.recentFiles.map((f) =>
            f.id === id ? { ...f, thumbnail } : f
          ),
        }));
      },
    }),
    {
      name: 'recent-files-storage',
    }
  )
);