Submatter/apps/web/lib/stores/sidebar-store.ts

import { create } from "zustand";

type ExpandedNodeMap = Record<string, boolean>;

export type SidebarItem = {
  id: string;
  label: string;
  type: "post" | "draft" | "channel" | "dm";
  preview?: string;
  count?: number;
  selected?: boolean;
};

type SidebarState = {
  favorites: SidebarItem[];
  channels: SidebarItem[];
  dms: SidebarItem[];
  expandedSections: Record<string, boolean>;
  isCollapsed: boolean;
  expandedNodes: ExpandedNodeMap;
  toggleSection: (section: "favorites" | "channels" | "dms") => void;
  setExpandedSection: (section: "favorites" | "channels" | "dms", expanded: boolean) => void;
  getExpandedSection: (section: "favorites" | "channels" | "dms") => boolean;
  toggleCollapse: () => void;
  isSidebarNodeExpanded: (nodeId: string) => boolean;
  toggleNode: (nodeId: string) => void;
  setNodeExpanded: (nodeId: string, expanded: boolean) => void;
  toggle: () => void;
};

export const useSidebarStore = create<SidebarState>((set, get) => ({
  favorites: [
    { id: "fav-1", label: "All Posts", type: "post", count: 5 },
    { id: "fav-2", label: "Drafts", type: "draft", count: 3 },
  ],
  channels: [
    { id: "chan-1", label: "Model Provider Registry", type: "channel", count: 10 },
    { id: "chan-2", label: "Task Tracker", type: "channel", count: 8 },
  ],
  dms: [
    { id: "dm-1", label: "Alice", type: "dm", preview: "Hi there!" },
    { id: "dm-2", label: "Bob & Carol", type: "dm", preview: "Planning next sprint" },
  ],
  expandedSections: {
    favorites: true,
    channels: true,
    dms: true,
  },
  isCollapsed: false,
  expandedNodes: {},

  toggleSection: (section: "favorites" | "channels" | "dms") =>
    set((state) => ({
      expandedSections: {
        ...state.expandedSections,
        [section]: !state.expandedSections[section],
      },
    })),

  setExpandedSection: (section: "favorites" | "channels" | "dms", expanded: boolean) =>
    set((state) => ({
      expandedSections: {
        ...state.expandedSections,
        [section]: expanded,
      },
    })),

  getExpandedSection: (section: "favorites" | "channels" | "dms") => {
    const state = get();
    return state.expandedSections[section];
  },

  toggleCollapse: () => set((state) => ({ isCollapsed: !state.isCollapsed })),

  isSidebarNodeExpanded: (nodeId: string) => {
    const state = get();
    return state.expandedNodes[nodeId] ?? false;
  },

  toggleNode: (nodeId: string) =>
    set((state) => ({
      expandedNodes: {
        ...state.expandedNodes,
        [nodeId]: !state.expandedNodes[nodeId],
      },
    })),

  setNodeExpanded: (nodeId: string, expanded: boolean) =>
    set((state) => ({
      expandedNodes: {
        ...state.expandedNodes,
        [nodeId]: expanded,
      },
    })),

  toggle: () => set((state) => ({ isCollapsed: !state.isCollapsed })),
}));