מדריך מפתח — סרגל צף (Floating Bar)

כל הקוד, הארכיטקטורה, והסבר כפתור-כפתור לשימוש חוזר במערכת אחרת

6 קבצים
5 כפתורים
Dock + Undock
Drag & Drop
Reorder

ארכיטקטורה כללית

המערכת מורכבת מ-6 קבצי קוד עיקריים:

Main Orchestrator

FloatingButtonsContainer.jsx

🎛️ הקובץ הראשי — מרכז הלוגיקה של כל הכפתורים + הפאנלים

Dock UI

FloatingButtonsDock.jsx

🧲 סרגל ה-Dock — מציג את הכפתורים בסרגל מרכזי ניתן לגרירה

State Manager

DockableButtonsSystem.jsx

🔧 Context Provider + DraggableFloatingButton — מנהל dock/undock

Legacy

FloatingButtonsBar.jsx

📊 גרסה ישנה (legacy) של הסרגל — עדיין זמין אך לא בשימוש ראשי

Onboarding Tour

FloatingButtonsTour.jsx

📖 מדריך אינטראקטיבי עם 4 שלבים שמלמד את המשתמש

Feedback Panel

EnhancedFeedbackWidget.jsx

💬 וידג'ט משוב מלא עם קטגוריות, עדיפויות, ועלאת קבצים

📐 דיאגרמת זרימה
Layout.js
  └── FloatingButtonsContainer (props: user, currentPageName)
        └── DockProvider (Context - מנהל docked/undocked state)
              └── FloatingButtonsContent
                    ├── FloatingButtonsDock (הסרגל המרכזי)
                    │     ├── Reorder.Group (גרירת סדר כפתורים)
                    │     │     ├── כפתור: עוזר אישי (Sparkles)
                    │     │     ├── כפתור: מצפן (Compass)
                    │     │     ├── כפתור: משוב (MessageSquarePlus)
                    │     │     ├── כפתור: נגישות (Accessibility)
                    │     │     └── כפתור: אונבורדינג מנהלים (Shield)
                    │     └── FloatingButtonsTour (מדריך)
                    │
                    ├── DraggableFloatingButton × N (כפתורים שהוצאו מהסרגל)
                    │
                    └── פאנלים (נפתחים לפי activePanel):
                          ├── Help Chat (שיחה עם AI Agent)
                          ├── Compass Panel (מדריך מסע)
                          ├── EnhancedFeedbackWidget (משוב)
                          ├── AdvancedAccessibilityPanel (נגישות)
                          └── AdminOnboardingPanel (אונבורדינג מנהלים)