add memory visualization and responsive sidebar to event loop demo

Author: vitalii4reva

README.md

@@ -12,24 +12,34 @@
 ## ✨ Можливості
 
 ### 🎨 UI/UX
-- **Сучасний дизайн** з shadcn/ui компонентами
+- **Сучасний дизайн** з shadcn/ui компонентами та responsive сайдбаром
 - **Темна та світла тема** з автоматичним перемиканням
 - **Повністю адаптивний** дизайн для мобільних, планшетів та десктопів
+- **Інтелектуальний сайдбар**:
+  - Автоматично згортається на вузьких екранах (тільки іконки)
+  - Розгортається на широких екранах з повним текстом
+  - Перемикається клавішею `B`
 - **Плавні анімації** та переходи між станами
 - **Інтуїтивний інтерфейс** з tooltips та підказками
+- **Чистий UI** - порожні секції автоматично ховаються
 
 ### 📚 Функціонал
-- **Візуалізація** Call Stack, Web APIs, Microtask Queue та Task Queue
+- **Візуалізація** Call Stack, Web APIs, Microtask Queue, Task Queue, Stack та Heap пам'яті
 - **Покрокове виконання** з детальними поясненнями кожної дії
-- **Вбудовані приклади**:
-  - setTimeout демонстрація
-  - Promise vs setTimeout (різниця в пріоритетах)
-  - Складний приклад з вкладеними мікро- та макрозавданнями
-  - Fetch API з демонстрацією мережевих запитів
+- **5 вбудованих прикладів**:
+  - 🗄️ **Пам'ять та Змінні** - демонстрація Stack та Heap (примітиви, об'єкти, функції)
+  - ⏱️ **setTimeout** - базова робота з асинхронним кодом
+  - ⚡ **Promise vs setTimeout** - різниця між microtask та macrotask
+  - 🔄 **Складний приклад** - вкладені Promise та setTimeout
+  - 🌐 **Fetch API** - мережеві запити та їх обробка
 - **Два режими роботи**: автоматичний та ручний
 - **Історія дій** для відстеження всіх кроків виконання
 - **Відображення коду** з підсвічуванням активного рядка
-- **Keyboard shortcuts**: Space, 1-4, A, C, Esc для швидкої роботи
+- **Інтерактивний сайдбар** з:
+  - Швидким запуском прикладів
+  - Кнопками очищення (повне та вибіркове)
+  - Довідкою по роботі Event Loop
+- **Keyboard shortcuts**: Space, 0-4, A, B, C, Esc для швидкої роботи
 
 ### 🌍 Локалізація
 - Повна підтримка **української мови**
@@ -85,31 +95,45 @@ Build результат буде в теці `dist/`
 ```
 src/
 ├── components/          # React компоненти
-│   ├── ui/             # shadcn/ui компоненти
-│   ├── layout/         # Header, ThemeToggle
+│   ├── ui/             # shadcn/ui компоненти (sidebar, button, card...)
+│   ├── layout/         # Header, ExamplesSidebar, KeyboardShortcuts
 │   ├── event-loop/     # Візуалізація Event Loop
-│   ├── controls/       # Кнопки управління
-│   └── panels/         # Інформаційні панелі
+│   │   ├── CallStack.tsx
+│   │   ├── WebAPIs.tsx
+│   │   ├── MicrotaskQueue.tsx
+│   │   ├── TaskQueue.tsx
+│   │   ├── Memory.tsx         # Heap пам'ять
+│   │   └── StackVariables.tsx # Stack frames
+│   ├── controls/       # StepControls
+│   └── panels/         # HistoryPanel
 ├── hooks/              # Custom React hooks
 │   ├── useEventLoop.ts
-│   └── useStepExecution.ts
+│   ├── useStepExecution.ts
+│   ├── useKeyboardShortcuts.ts
+│   └── use-mobile.tsx
 ├── context/            # React Context (ThemeProvider)
 ├── lib/                # Утиліти та приклади
+│   ├── examples.ts     # 5 вбудованих прикладів
+│   └── utils.ts
 ├── types/              # TypeScript типи
+│   ├── eventLoop.ts
+│   └── memory.ts
 ├── i18n/               # Переклади
 ├── App.tsx             # Головний компонент
 └── main.tsx            # Entry point
 ```
 
 ## 🔧 Як це працює
 
-Візуалізатор демонструє роботу JavaScript Event Loop:
+Візуалізатор демонструє роботу JavaScript Event Loop та управління пам'яттю:
 
 1. **Call Stack**: Відображає функції, які зараз виконуються.
 2. **Web APIs**: Показує асинхронні операції, що виконуються у фоні.
 3. **Microtask Queue**: Черга високопріоритетних завдань (Promise).
 4. **Task Queue**: Черга регулярних завдань (setTimeout, setInterval).
-5. **Event Loop**: Постійно перевіряє стан стеку та черг, дотримуючись пріоритетів.
+5. **Stack Variables**: Відображає локальні змінні у Stack Frames.
+6. **Memory (Heap)**: Показує об'єкти, функції та інші складні типи даних.
+7. **Event Loop**: Постійно перевіряє стан стеку та черг, дотримуючись пріоритетів.
 
 ### Порядок виконання в Event Loop:
 
@@ -121,7 +145,12 @@ src/
 
 ## 🎯 Як Використовувати
 
-1. **Виберіть приклад** - Натисніть на одну з кнопок прикладів (або клавіші **1-4**)
+1. **Виберіть приклад** в сайдбарі зліва (або клавіші **0-4**):
+   - **0** - Пам'ять та Змінні (Stack & Heap)
+   - **1** - setTimeout демонстрація
+   - **2** - Promise vs setTimeout
+   - **3** - Складний приклад
+   - **4** - Fetch API
 2. **Режим виконання**:
    - **Ручний режим**: Натискайте "Наступний крок" або **Space/Enter**
    - **Авто режим**: Автоматичне виконання з затримкою 1.5 сек (клавіша **A**)
@@ -130,8 +159,11 @@ src/
    - Web APIs - асинхронні операції
    - Microtask Queue - високопріоритетні завдання (Promise)
    - Task Queue - звичайні завдання (setTimeout)
+   - Stack Variables - локальні змінні (з'являються в прикладі 0)
+   - Memory (Heap) - об'єкти та функції (з'являються в прикладі 0)
 4. **Відстежуйте** історію дій у правій панелі
-5. **Keyboard shortcuts** - Натисніть іконку клавіатури у header для переліку всіх скорочень
+5. **Керуйте сайдбаром** - клавіша **B** або кнопка у header
+6. **Keyboard shortcuts** - Натисніть іконку клавіатури у header для переліку всіх скорочень
 
 ## 👥 Як Зробити Внесок
 
@@ -157,6 +189,9 @@ src/
 
 - [x] ~~Додати Examples 3 та 4 (складний приклад, Fetch API)~~ ✅
 - [x] ~~Keyboard shortcuts (Space, числа, A, C)~~ ✅
+- [x] ~~Responsive сайдбар з shadcn/ui~~ ✅
+- [x] ~~Візуалізація Stack та Heap пам'яті~~ ✅
+- [x] ~~Приклад роботи з пам'яттю~~ ✅
 - [ ] Інтерактивний режим для створення власних прикладів
 - [ ] Експорт історії виконання
 - [ ] Додаткові мови інтерфейсу (EN, PL)