@eventcatalogtest/studio/stores/sidebar-store.ts

A drag and drop UI for distributed systems that keeps your diagrams where they belong – in your repo

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

export type SidebarTab = 'components' | 'canvas' | 'catalog';

interface SelectedComponent {
  nodeType: string;
  label: string;
  data: any;
  iconComponent?: any;
  iconColor?: string;
}

interface SidebarStore {
  isOpen: boolean;
  activeTab: SidebarTab;
  showMinimap: boolean;
  showComments: boolean;
  showFeedbackPanel: boolean;
  dontWarnOnDelete: boolean;
  floatingPanels: {
    components: boolean;
    canvas: boolean;
    catalog: boolean;
  };
  selectedComponent: SelectedComponent | null;
  toggleSidebar: () => void;
  setSidebarOpen: (open: boolean) => void;
  setActiveTab: (tab: SidebarTab) => void;
  toggleMinimap: () => void;
  setMinimapOpen: (open: boolean) => void;
  toggleComments: () => void;
  setCommentsVisible: (visible: boolean) => void;
  toggleFeedbackPanel: () => void;
  setFeedbackPanelOpen: (open: boolean) => void;
  setDontWarnOnDelete: (dontWarn: boolean) => void;
  toggleFloatingPanel: (panel: SidebarTab) => void;
  setFloatingPanelOpen: (panel: SidebarTab, open: boolean) => void;
  setSelectedComponent: (component: SelectedComponent | null) => void;
}

export const useSidebarStore = create<SidebarStore>()(
  persist(
    (set) => ({
      isOpen: true, // Default open
      activeTab: 'components', // Default to components tab
      showMinimap: true, // Default show minimap
      showComments: true, // Default show comments
      showFeedbackPanel: false, // Default hide feedback panel
      dontWarnOnDelete: false, // Default show warnings
      floatingPanels: {
        components: false,
        canvas: false,
        catalog: false,
      },
      selectedComponent: null,
      toggleSidebar: () => set((state) => ({ isOpen: !state.isOpen })),
      setSidebarOpen: (open: boolean) => set({ isOpen: open }),
      setActiveTab: (tab: SidebarTab) => set({ activeTab: tab }),
      toggleMinimap: () => set((state) => ({ showMinimap: !state.showMinimap })),
      setMinimapOpen: (open: boolean) => set({ showMinimap: open }),
      toggleComments: () => set((state) => ({ showComments: !state.showComments })),
      setCommentsVisible: (visible: boolean) => set({ showComments: visible }),
      toggleFeedbackPanel: () => set((state) => ({ showFeedbackPanel: !state.showFeedbackPanel })),
      setFeedbackPanelOpen: (open: boolean) => set({ showFeedbackPanel: open }),
      setDontWarnOnDelete: (dontWarn: boolean) => set({ dontWarnOnDelete: dontWarn }),
      toggleFloatingPanel: (panel: SidebarTab) => set((state) => {
        const isCurrentlyOpen = state.floatingPanels[panel];
        if (isCurrentlyOpen) {
          // Close the current panel
          return {
            floatingPanels: {
              ...state.floatingPanels,
              [panel]: false,
            },
          };
        } else {
          // Close all panels and open the requested one
          return {
            floatingPanels: {
              components: false,
              canvas: false,
              catalog: false,
              [panel]: true,
            },
          };
        }
      }),
      setFloatingPanelOpen: (panel: SidebarTab, open: boolean) => set((state) => {
        if (open) {
          // Close all other panels and open the requested one
          return {
            floatingPanels: {
              components: false,
              canvas: false,
              catalog: false,
              [panel]: true,
            },
          };
        } else {
          // Just close the requested panel
          return {
            floatingPanels: {
              ...state.floatingPanels,
              [panel]: false,
            },
          };
        }
      }),
      setSelectedComponent: (component: SelectedComponent | null) => set({ selectedComponent: component }),
    }),
    {
      name: 'sidebar-storage',
      storage: createJSONStorage(() => localStorage),
    }
  )
);