A modern React application built with TypeScript and Vite, featuring drag-and-drop functionality and flow-based interfaces.
- Built with React 18 and TypeScript
- Drag and drop functionality using
@dnd-kit
- Flow-based interface using
reactflow
- State management with
zustand
- Modern UI with Tailwind CSS
- Icon system using
lucide-react
- Framework: React 18
- Build Tool: Vite
- Language: TypeScript
- Styling: Tailwind CSS
- State Management: Zustand
- UI Libraries:
- DND Kit for drag and drop
- React Flow for flow-based interfaces
- Lucide React for icons
- Development Tools:
- ESLint for code linting
- PostCSS for CSS processing
- TypeScript for type safety
-
Clone the repository
git clone [repository-url] cd ActionsPane
-
Install dependencies
npm install
-
Start the development server
npm run dev
-
Build for production
npm run build
npm run dev
- Start development servernpm run build
- Build for productionnpm run preview
- Preview production buildnpm run lint
- Lint code using ESLint
ActionsPane/
├── src/
│ ├── components/ # React components
│ ├── data/ # Data files
│ ├── lib/ # Utility functions and helpers
│ ├── store/ # Zustand store configurations
│ ├── App.tsx # Main application component
│ └── main.tsx # Application entry point
├── public/ # Static assets
└── ...config files # Various configuration files
vite.config.ts
- Vite configurationtsconfig.json
- TypeScript configurationtailwind.config.js
- Tailwind CSS configurationpostcss.config.js
- PostCSS configurationeslint.config.js
- ESLint configuration
The application features a comprehensive sidebar with the following main sections:
- Favorites (
mainNavItems
) - Quick access to starred items - AI (
mainNavItems
) - Artificial Intelligence related actions - Apps (
appsActionItems
) - Application-specific actions - Logic (
logicActionItems
) - Programming control flow actions - Interaction (
interactionActionItems
) - User interface and browser automation - Files (
fileActionItems
) - File system operations - Advanced (
advancedActionItems
) - System-level and administrative tasks
- Templates (
bottomNavItems
) - Pre-configured automation templates - Library (
bottomNavItems
) - Resource library and saved components - Search - Global search functionality
- Filtering (
categories
) - Category-based filtering including:- Lead management
- Sales pipeline
- Marketing campaigns
- Customer support
- Data management
- Project management
- Tickets & incidents
- DraggableItem - Drag-and-drop enabled components
- FilterDropdown - Category and type filtering
- LibraryModal - Access to saved resources
- PropertiesPanel - Item configuration
- TemplatesModal - Template management
- Sidebar - Main navigation and action selection
Contributions, issues, and feature requests are welcome!