paint-ui/store/color-store.ts

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

interface ColorStore {
  /** Primary color (foreground) */
  primaryColor: string;
  /** Secondary color (background) */
  secondaryColor: string;
  /** Recent colors history */
  recentColors: string[];
  /** Custom color swatches */
  customSwatches: string[];

  /** Set primary color */
  setPrimaryColor: (color: string) => void;
  /** Set secondary color */
  setSecondaryColor: (color: string) => void;
  /** Swap primary and secondary colors */
  swapColors: () => void;
  /** Add color to recent history */
  addToRecent: (color: string) => void;
  /** Add custom swatch */
  addCustomSwatch: (color: string) => void;
  /** Remove custom swatch */
  removeCustomSwatch: (color: string) => void;
  /** Clear recent colors */
  clearRecent: () => void;
}

const MAX_RECENT_COLORS = 20;
const MAX_CUSTOM_SWATCHES = 20;

export const useColorStore = create<ColorStore>()(
  persist(
    (set, get) => ({
      primaryColor: '#000000',
      secondaryColor: '#ffffff',
      recentColors: [],
      customSwatches: [],

      setPrimaryColor: (color) => {
        set({ primaryColor: color });
        get().addToRecent(color);
      },

      setSecondaryColor: (color) => {
        set({ secondaryColor: color });
      },

      swapColors: () => {
        const { primaryColor, secondaryColor } = get();
        set({
          primaryColor: secondaryColor,
          secondaryColor: primaryColor,
        });
      },

      addToRecent: (color) => {
        set((state) => {
          const recent = state.recentColors.filter((c) => c !== color);
          recent.unshift(color);
          return {
            recentColors: recent.slice(0, MAX_RECENT_COLORS),
          };
        });
      },

      addCustomSwatch: (color) => {
        set((state) => {
          if (state.customSwatches.includes(color)) return state;
          return {
            customSwatches: [...state.customSwatches, color].slice(
              -MAX_CUSTOM_SWATCHES
            ),
          };
        });
      },

      removeCustomSwatch: (color) => {
        set((state) => ({
          customSwatches: state.customSwatches.filter((c) => c !== color),
        }));
      },

      clearRecent: () => {
        set({ recentColors: [] });
      },
    }),
    {
      name: 'color-storage',
    }
  )
);