refactor(admin): improve drag and drop with section highlighting and property inheritance #1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add dynamic component type definitions in lib/types/about-page-components.ts - Implement data migration utilities in lib/utils/data-migration.ts - Create migration scripts for converting legacy to dynamic structure - Support backward compatibility with existing about page data - Add comprehensive TypeScript interfaces for component system
- Add drag-and-drop editing with component palette and property editor - Upgrade AboutEditor to dynamic visual editor with real-time preview - Upgrade AboutPreview to support dynamic component rendering - Implement Zustand state management with undo/redo functionality - Add core components: ComponentRenderer, PropertyEditor, ComponentPalette - Add React 18 compatible drag-and-drop with StrictModeDroppable - Install react-beautiful-dnd and @radix-ui/react-separator dependencies - Maintain backward compatibility with existing translation data - Support multi-language editing and responsive device preview - Add demo projects to .gitignore to exclude from version control - Fix all ESLint code quality issues and TypeScript type errors
- Add DynamicAboutRenderer component for frontend dynamic rendering - Update about page to support both legacy and dynamic component formats - Maintain backward compatibility with existing translation structure - Add automatic data migration from legacy to dynamic format - Preserve all existing functionality including URL paths and SEO - Ensure smooth user transition without noticeable changes - Fix admin content page type imports and remove duplicate interfaces - Add comprehensive component rendering for all supported types - Support responsive layouts and device-specific rendering - Integrate with existing theme system and user authentication
- Fix react-beautiful-dnd configuration issues with required boolean props
- Add isCombineEnabled={false} to all StrictModeDroppable components
- Add isDropDisabled prop (false for drop zones, true for component palette)
- Add ignoreContainerClipping={false} for proper container handling
- Ensure all drag-and-drop functionality works correctly
- Complete Phase 4: Advanced Features & Performance integration
- Fix preview canvas scrolling when split view is enabled - Fix editor canvas scrolling when preview is disabled - Change desktop preview min-height from min-h-screen to min-h-0 - Add overflow-hidden to prevent page-level scrolling conflicts
Migrate drag and drop functionality from deprecated react-beautiful-dnd to modern @dnd-kit library to resolve technical debt and improve React 18 compatibility. Key changes: - Replace react-beautiful-dnd with @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities - Create DndContextWrapper and unified dnd-components with Droppable, Draggable, Sortable - Update about-editor-store to use DragEndEvent instead of DropResult - Implement arrayMove for sortable functionality within containers - Remove StrictModeDroppable wrapper (no longer needed with @dnd-kit) - Update component-palette and about-editor to use new drag system Benefits: - React 18 StrictMode compatibility out of the box - Better TypeScript support and modern API - Improved performance with built-in optimizations - Active maintenance and future-proof architecture
Replace modern design system with classic stone color scheme to match original project styling. Remove Card components in favor of stone-themed div structures. Key changes: - Remove Card, CardHeader, CardContent, CardTitle imports - Replace with stone color palette (stone-50 to stone-900) - Update about-editor: sections, containers, and sortable components - Update component-palette: category headers and component previews - Update property-editor: array items and main container - Maintain dark/light mode compatibility with stone variants - Preserve all drag-and-drop and interactive functionality Visual improvements: - Header: bg-white dark:bg-stone-800 - Left panel: bg-stone-50 dark:bg-stone-900 - Components: border-stone-200 dark:border-stone-700 - Hover states: hover:bg-stone-50 dark:hover:bg-stone-700 - Text: text-stone-900 dark:text-stone-100
- Replace left sidebar property panel with right-click context menu - Fix input rebound issue by preventing data flow conflicts - Implement dynamic component data retrieval for real-time updates - Remove property-editor.tsx and create context-menu.tsx - Optimize layout by reducing left panel width to 256px for component palette only BREAKING CHANGES: - Property editing now uses right-click context menu instead of left sidebar - Layout reduced from 320px to 256px left panel width
- Remove non-functional upper Save/Reset buttons from content management page - Keep only the working lower Save/Reset buttons - Clean up unused handleSave/handleReset functions in about-editor - Remove unused icon imports (Save, RotateCcw) from about-editor - Maintain all existing functionality while eliminating code duplication
- Revert useEffect changes that monitored currentTranslation - Remove complex isLoading state management that caused loops - Restore stable editing functionality with simple data flow - Keep working preview sync with 100ms debounce delay - Reset button functionality temporarily disabled to prevent loops Fixes editing interface "flickering" and infinite update cycles
…tection - Enhanced SortableContainer with improved visual feedback and data passing - Reduced drag activation distance from 8px to 5px for better responsiveness - Added support for dropping components on section drop zones to create new sections - Improved component insertion logic with proper index handling - Added comprehensive debug logging for troubleshooting drag operations - Enhanced visual states for dragging (opacity, scaling) and drop targets
- Add component cloning that follows mouse during drag from palette - Implement visual feedback for valid/invalid drop zones with color changes - Create smooth return animation for components dropped in invalid areas - Add appear animation with pulse effect for successfully placed components - Enhance drag overlay with rotation and improved styling - Add drop zone validation to prevent invalid placements - Improve component selection and highlighting after successful drops
Replace complex useDroppable dual-zone system with native event listeners using rectangle collision detection. This fixes section highlighting issues when dragging components over existing content areas while maintaining all existing drop functionality with significantly reduced code complexity.
…property inheritance
… animations" This reverts commit 73680f9.
…sues - Fix section delete button functionality by connecting deleteSection action - Resolve drag-and-drop conflicts between palette and existing components - Fix component reordering state persistence using position-based detection - Add comprehensive DnD event logging for debugging - Implement conditional rendering to prevent palette/component event conflicts Technical changes: - Add isDraggingFromPalette state management in DndContext - Render Sortable components as plain divs during palette dragging (hooks compliance) - Replace container ID parsing with direct component position detection - Add deleteSection import and implementation in about-editor
…ality - Add component preview support to DragOverlay for better visual feedback - Fix container ID parsing issue that prevented drops into empty sections - Improve drag-and-drop debugging with comprehensive logging Key improvements: - Components now show actual appearance when dragged (not just ID) - Empty sections can now receive components from palette correctly - Enhanced ID parsing handles hyphenated section IDs properly - Added detailed logging for debugging drag-and-drop operations Technical changes: - Add preview prop to Sortable interface and implementation - Generate component preview with proper styling for drag overlay - Fix targetContainerId parsing with slice-based approach - Add comprehensive logging at each step of drop process
… drops When dragging components from palette to canvas sections, the drag overlay still showed "return to palette" animation even on successful drops. Changes: - DndContextWrapper now tracks drop success and animates accordingly - handleDragEnd in about-editor-store returns boolean success status - SortableContainer shows green success feedback on successful drops - Successful drops fade out in place, failed drops return to origin This provides clear visual confirmation that drag operations succeeded.
Fixed "Rendered fewer hooks than expected" error by moving useMemo hook before conditional returns in Sortable component. Added comprehensive right-click menu improvements with event delegation and fallback handling.
- Replace @dnd-kit container ID parsing with component location lookup - Add support for dropping components onto empty section containers - Fix cross-section component movement that was failing due to container format mismatch - Enhanced error handling and logging for drag operations
…line editing - Add Delete key support for removing selected components - Implement double-click inline editing for component content properties - Add keyboard shortcuts (Ctrl+Enter to save, Escape to cancel editing) - Improve focus management for better keyboard interaction - Update UI colors from blue to stone theme for consistency - Remove success status animations for cleaner interface - Fix event bubbling issues in inline editing mode
- Reset button now properly syncs with editor state using Zustand store - Clears undo/redo stacks when resetting to original data state - Ensures both page-level state and editor state are consistent - Handles dynamic format migration for about translations - Reset button now works like undo button but restores to file state
- Replace button variants from primary/secondary/outline to solid/outline - Implement stone color system for consistent design language - Solid variant: stone-900 background with white text - Outline variant: transparent background with stone border - Match homepage button sizing (px-8 py-3, text-base) - Add hover scale effect and smooth transitions - Update context menu with new variant options - Support dark mode with appropriate color adjustments - Remove unused Button import for cleaner code
- Change existing button components from "primary" to "solid" variant - Update all 10 language files for consistency with new button system - Ensure existing "Start Exploring" buttons display with solid styling
- Apply homepage stone color system and animations to about page - Add Framer Motion animations with staggered reveal effects - Implement gradient text for large headings (H1, H2) - Update paragraph styling with homepage font sizes and colors - Use homepage background colors and responsive design - Maintain unified visual experience across all pages - Support desktop/tablet/mobile preview modes
- Update ButtonProps interface to support optional secondaryButton - Modify button component renderer with dual button layout - Add gap-4 spacing to match homepage button style - Update context menu with secondary button editing controls - Add/remove secondary button functionality with proper validation - Support individual variant and action settings per button - Maintain backward compatibility with single button components
- Merge upstream drag-drop improvements branch - Resolve conflicts by keeping local admin/content implementations - Preserve dual button functionality and inline editing features - Maintain homepage-style animations and component enhancements
- Increase min-width from 6rem to 8rem (128px) - Ensure short text buttons match longer button width - Fix visual inconsistency between dual buttons - Maintain automatic expansion for longer content
- Clean up after merge conflict resolution - Remove unused import from useTheme hook - Remove unused isDark destructured variable
- Change h-screen back to h-[calc(100vh-3rem)] to account for admin header - Fixes page scrolling issue introduced during upstream merge - Admin layout has fixed header with ~3rem height that needs to be excluded - Restores original behavior where only component containers scroll, not the whole page
- Move toolbar buttons (Undo, Redo, Add Section) to same line as language selector - Improve space utilization by combining header elements in single row - Use items-end alignment to properly align buttons with select dropdown - Remove unnecessary vertical spacing now that header is single row - Enhance UI compactness while maintaining visual hierarchy
…t previews - Add DragPreviewRenderer component for compact drag previews - Replace full component rendering with simplified previews during drag - Show component type, icon, and content summary instead of full content - Optimize DragOverlay with max dimensions (300px × 80px) - Enhance shadow and styling for better visual feedback - Preserve all component data and functionality after drop - Significantly improve drag experience for large components
- Add SectionDragPreview component for compact section previews - Enable section dragging by wrapping sections in Sortable components - Add grip handle icon that appears on hover for clear drag affordance - Extend handleDragEnd logic to support section reordering - Allow dropping sections on existing drop zones between sections - Preserve all section content and layout during reordering - Add proper drag state visual feedback and cursor changes - Improve user experience with intuitive section organization
- Add previewDevice parameter to ComponentRenderer interface - Update Cards component to force single-column layout on mobile preview - Pass previewDevice from AboutPreview and HomePreviewDynamic to ComponentRenderer - Maintain responsive two-column layout for desktop and tablet previews
…ate new sections Previously, only components dragged from the palette could create new sections when dropped on empty areas. Existing components dragged to empty areas would fail because the drag handler only checked for palette components. Now both palette components and existing components can create new sections when dropped on section-drop zones, providing consistent drag behavior.
- Modified Home component to check for 'sections' array instead of full home object - Updated HomeDynamic component to extract sections directly from translation data - Removed unused imports and variables to pass linting - Fixes IntlError and "No dynamic home data found" issues - Home page now correctly detects and renders dynamic content - Preserves language switcher and admin button functionality Resolves issues with home page not displaying due to translation data structure changes.
- Update app/about/page.tsx to use homepage-style layout and colors - Add AdminButton and LanguageSwitcher in top-right corner - Replace custom component rendering with unified ComponentRenderer - Remove 250+ lines of duplicate rendering logic from dynamic-about-renderer - Ensure visual consistency between live page and admin preview - Use same background colors (#1c1917 dark, #f5f5f4 light) as other pages
… components Convert all /admin/content components from isDark conditional logic to Tailwind dark: classes: - content-tabs.tsx: tab styling - preview-toolbar.tsx: toolbar elements - save-actions.tsx: action buttons and status indicators - about-preview.tsx: dynamic color calculations - home-preview-dynamic.tsx: dynamic color calculations - home-editor.tsx: form elements and labels - Remove all useTheme imports and isDark usage - Maintain consistent visual appearance in both modes - Improve performance by eliminating runtime conditional logic - Fix TypeScript lint errors with proper typing All admin content components now follow modernized dark mode strategy.
…nd restore .gitignore - Remove __tests__/utils/data-migration.test.ts (not in upstream) - Remove messages/en-US.json.backup (not in upstream) - Remove messages/zh-CN.json.backup (not in upstream) - Restore .gitignore to upstream version (remove personal additions) This ensures test files, backup files, and .gitignore match upstream main branch as requested for project consistency.
…components Convert remaining components from isDark conditional logic to Tailwind dark: classes: - app/about/page.tsx: replace dynamic color calculations - components/home/home-dynamic.tsx: replace dynamic color calculations - components/admin/content/home-preview.tsx: replace complex color system - Remove all useTheme imports and isDark usage in new/modified files - Replace runtime conditional logic with Tailwind responsive classes - Maintain identical visual appearance across light/dark modes All components in current branch now use Tailwind dark: prefix exclusively, completing the modernized dark mode implementation strategy.
…hooks - Fix return type from T to (...args: Parameters<T>) => void - Align with underlying debounce/throttle function signatures - Maintain parameter type safety while fixing type system inconsistency This resolves type compatibility issues found during code review.
- Add MAX_UNDO_STEPS constant (20) to improve code maintainability - Replace all hardcoded -20 and 20 in undo/redo stack management - Enhance code readability and ensure consistent undo stack size limit - Update related comments to reference the constant This addresses code review feedback about magic numbers and improves maintainability of the undo/redo system in the about editor.
- Include callback and delay in useMemo dependency array - Align with useDebouncedCallback implementation for consistency - Ensures throttled function updates when callback or delay changes - Prevents potential stale closure issues This resolves a technical debt where useThrottledCallback had inconsistent dependency handling compared to useDebouncedCallback.
…ama/AgentifUI into feat/admin-drag-drop-improvements
- Add text processing utility for placeholder replacement
- Update ComponentRenderer Paragraph to process {year} placeholder
- Replace hardcoded 2025 with {year} placeholder in all language files
- Remove legacy year parameter code from about page
- Unify dynamic year handling across homepage and about page footers
pixelsama
force-pushed
the
feat/admin-drag-drop-improvements
branch
from
246db60 to
32abe31
Compare
… across 19 components (250+ conversions) (ifLabX#240) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com> Co-authored-by: zhangxuhe1 <xuhezhang6@gmail.com>
pixelsama
force-pushed
the
feat/admin-drag-drop-improvements
branch
from
32abe31 to
5d4923d
Compare
pixelsama
added a commit
that referenced
this pull request
Oct 7, 2025
- Create notification store with Zustand - Implement core state management (notifications, unread count, loading states) - Add actions: fetchNotifications, markAsRead, markAllAsRead, updateUnreadCount - Support tab filtering (all/changelog/message) and pagination - Add basic unit tests for store functionality - Type-safe implementation with full TypeScript support Related to notification system frontend implementation (PR #1 of 8)
pixelsama
added a commit
that referenced
this pull request
Nov 23, 2025
- Create notification store with Zustand - Implement core state management (notifications, unread count, loading states) - Add actions: fetchNotifications, markAsRead, markAllAsRead, updateUnreadCount - Support tab filtering (all/changelog/message) and pagination - Add basic unit tests for store functionality - Type-safe implementation with full TypeScript support Related to notification system frontend implementation (PR #1 of 8)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What & Why
What: Enhanced drag and drop functionality in the admin content editor with improved section highlighting and component property inheritance.
Why: Improves the user experience when building content with visual feedback for drag operations and proper component styling inheritance from sections.
Pre-PR Checklist
pnpm type-checkpnpm format:checkpnpm lint(bypassed due to existing code issues)pnpm buildpnpm i18n:checkType
Changes Made
Drag and Drop Improvements
Property Inheritance System
getResolvedComponentPropsfunction to merge section and component propertiesCode Quality
Technical Details
Key Files Changed
components/admin/content/dnd-context.tsx: Enhanced drag state managementcomponents/admin/content/about-editor.tsx: Improved section highlightingcomponents/admin/content/component-renderer.tsx: Added property inheritancelib/types/about-page-components.ts: Enhanced type definitionslib/stores/about-editor-store.ts: Added section deletion functionalityProperty Inheritance Flow
getResolvedComponentPropsmerges properties with correct precedenceThis ensures consistent styling across components while allowing for individual customization.