docs: translate UI from Ukrainian to English and add language switching support

Author: vitalii4reva

README.md

@@ -0,0 +1,253 @@
+# JavaScript Event Loop Візуалізатор 🔄
+
+Інтерактивний інструмент для візуалізації та навчання принципів роботи JavaScript Event Loop. Сучасний веб-додаток на React з красивим UI, що допомагає розробникам зрозуміти асинхронність JavaScript, порядок виконання операцій та взаємодію між Call Stack, Web APIs, та чергами Microtask і Task (Callback).
+
+![JavaScript Event Loop Візуалізатор](./screenshot.png)
+
+[![Live Demo](https://img.shields.io/badge/demo-online-brightgreen.svg)](https://vitalii4reva.com/visual-js-event-loop/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
+[![React](https://img.shields.io/badge/React-19-61DAFB?logo=react)](https://react.dev/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178C6?logo=typescript)](https://www.typescriptlang.org/)
+
+## ✨ Можливості
+
+### 🎨 UI/UX
+- **Сучасний дизайн** з shadcn/ui компонентами та responsive сайдбаром
+- **Темна та світла тема** з автоматичним перемиканням
+- **Повністю адаптивний** дизайн для мобільних, планшетів та десктопів
+- **Інтелектуальний сайдбар**:
+  - Автоматично згортається на вузьких екранах (тільки іконки)
+  - Розгортається на широких екранах з повним текстом
+  - Перемикається клавішею `B`
+- **Плавні анімації** та переходи між станами
+- **Інтуїтивний інтерфейс** з tooltips та підказками
+- **Чистий UI** - порожні секції автоматично ховаються
+
+### 📚 Функціонал
+- **Візуалізація** Call Stack, Web APIs, Microtask Queue, Task Queue, Stack та Heap пам'яті
+- **Покрокове виконання** з детальними поясненнями кожної дії
+- **5 вбудованих прикладів**:
+  - 🗄️ **Пам'ять та Змінні** - демонстрація Stack та Heap (примітиви, об'єкти, функції)
+  - ⏱️ **setTimeout** - базова робота з асинхронним кодом
+  - ⚡ **Promise vs setTimeout** - різниця між microtask та macrotask
+  - 🔄 **Складний приклад** - вкладені Promise та setTimeout
+  - 🌐 **Fetch API** - мережеві запити та їх обробка
+- **Два режими роботи**: автоматичний та ручний
+- **Історія дій** для відстеження всіх кроків виконання
+- **Відображення коду** з підсвічуванням активного рядка
+- **Інтерактивний сайдбар** з:
+  - Швидким запуском прикладів
+  - Кнопками очищення (повне та вибіркове)
+  - Довідкою по роботі Event Loop
+- **Keyboard shortcuts**: Space, 0-4, A, B, C, Esc для швидкої роботи
+
+### 🌍 Локалізація
+- Повна підтримка **української мови**
+- Готовність до додавання інших мов
+
+## 🚀 Швидкий Старт
+
+### Передумови
+
+- [Node.js](https://nodejs.org/) 18.0.0+ (рекомендовано 20+)
+- [pnpm](https://pnpm.io/) (рекомендовано) або npm
+
+### Встановлення
+
+```bash
+# Клонуйте репозиторій
+git clone https://github.com/vitalii4reva/visual-js-event-loop.git
+cd visual-js-event-loop
+
+# Встановіть залежності
+pnpm install
+
+# Запустіть dev сервер
+pnpm dev
+```
+
+Відкрийте [http://localhost:3000](http://localhost:3000) в браузері.
+
+### Збірка для Production
+
+```bash
+# Створіть production build
+pnpm build
+
+# Перегляньте production версію локально
+pnpm preview
+```
+
+Build результат буде в теці `dist/`
+
+## 🏗️ Технології
+
+- ⚛️ **React 19** - UI framework
+- 📘 **TypeScript 5.9** - Type safety
+- 🎨 **Tailwind CSS 3.4** - Styling
+- 🧩 **shadcn/ui** - UI компоненти
+- ⚡ **Vite 6** - Build tool
+- 🎭 **Lucide React** - Іконки
+- 🌓 **next-themes** - Theme management
+
+## 📂 Структура Проекту
+
+```
+src/
+├── components/          # React компоненти
+│   ├── ui/             # shadcn/ui компоненти (sidebar, button, card...)
+│   ├── layout/         # Header, ExamplesSidebar, KeyboardShortcuts
+│   ├── event-loop/     # Візуалізація Event Loop
+│   │   ├── 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
+│   ├── 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 та управління пам'яттю:
+
+1. **Call Stack**: Відображає функції, які зараз виконуються.
+2. **Web APIs**: Показує асинхронні операції, що виконуються у фоні.
+3. **Microtask Queue**: Черга високопріоритетних завдань (Promise).
+4. **Task Queue**: Черга регулярних завдань (setTimeout, setInterval).
+5. **Stack Variables**: Відображає локальні змінні у Stack Frames.
+6. **Memory (Heap)**: Показує об'єкти, функції та інші складні типи даних.
+7. **Event Loop**: Постійно перевіряє стан стеку та черг, дотримуючись пріоритетів.
+
+### Порядок виконання в Event Loop:
+
+1. Виконати весь синхронний код у Call Stack
+2. Перевірити чи Call Stack порожній
+3. Обробити ВСІ мікрозавдання з Microtask Queue
+4. Взяти ОДНЕ завдання з Task Queue
+5. Повторити з кроку 1
+
+## 🎯 Як Використовувати
+
+1. **Виберіть приклад** в сайдбарі зліва (або клавіші **0-4**):
+   - **0** - Пам'ять та Змінні (Stack & Heap)
+   - **1** - setTimeout демонстрація
+   - **2** - Promise vs setTimeout
+   - **3** - Складний приклад
+   - **4** - Fetch API
+2. **Режим виконання**:
+   - **Ручний режим**: Натискайте "Наступний крок" або **Space/Enter**
+   - **Авто режим**: Автоматичне виконання з затримкою 1.5 сек (клавіша **A**)
+3. **Спостерігайте**:
+   - Call Stack - активні функції
+   - Web APIs - асинхронні операції
+   - Microtask Queue - високопріоритетні завдання (Promise)
+   - Task Queue - звичайні завдання (setTimeout)
+   - Stack Variables - локальні змінні (з'являються в прикладі 0)
+   - Memory (Heap) - об'єкти та функції (з'являються в прикладі 0)
+4. **Відстежуйте** історію дій у правій панелі
+5. **Керуйте сайдбаром** - клавіша **B** або кнопка у header
+6. **Keyboard shortcuts** - Натисніть іконку клавіатури у header для переліку всіх скорочень
+
+## 👥 Як Зробити Внесок
+
+Ми заохочуємо внески в розвиток проекту! 
+
+### Способи Допомоги
+
+- 🐛 Повідомте про баг через [Issues](https://github.com/vitalii4reva/visual-js-event-loop/issues)
+- ✨ Запропонуйте нову функцію
+- 📝 Покращіть документацію
+- 🌍 Додайте переклад на іншу мову
+- 💻 Відправте Pull Request
+
+### Процес
+
+1. Fork репозиторію
+2. Створіть гілку: `git checkout -b feature/amazing-feature`
+3. Внесіть зміни та commit: `git commit -m 'Add amazing feature'`
+4. Push до гілки: `git push origin feature/amazing-feature`
+5. Відкрийте Pull Request
+
+## 💡 Ідеї для Покращення
+
+- [x] ~~Додати Examples 3 та 4 (складний приклад, Fetch API)~~ ✅
+- [x] ~~Keyboard shortcuts (Space, числа, A, C)~~ ✅
+- [x] ~~Responsive сайдбар з shadcn/ui~~ ✅
+- [x] ~~Візуалізація Stack та Heap пам'яті~~ ✅
+- [x] ~~Приклад роботи з пам'яттю~~ ✅
+- [ ] Інтерактивний режим для створення власних прикладів
+- [ ] Експорт історії виконання
+- [ ] Додаткові мови інтерфейсу (EN, PL)
+- [ ] Анімації з Framer Motion
+- [ ] Touch gestures для мобільних
+
+## 📈 SEO та Performance
+
+Проект оптимізований для пошукових систем:
+- ✅ Structured Data (JSON-LD) з інформацією про автора
+- ✅ Open Graph та Twitter Cards
+- ✅ robots.txt та sitemap.xml
+- ✅ Оптимізовані meta теги
+- ✅ humans.txt з інформацією про команду
+- ✅ Bundle size: ~112 KB (gzipped)
+
+## 📸 Screenshots
+
+### Світла Тема
+![Light Theme](./screenshot.png)
+
+### Темна Тема
+Підтримка темної теми з автоматичним визначенням системних налаштувань
+
+### Мобільна Версія
+Повністю адаптивний дизайн для всіх пристроїв
+
+## 📄 Ліцензія
+
+Цей проект поширюється під ліцензією MIT. Див. файл [LICENSE](./LICENSE) для деталей.
+
+## 👨‍💻 Автор
+
+**Vitalii Reva**
+- Email: [vitalii4reva@gmail.com](mailto:vitalii4reva@gmail.com)
+- GitHub: [@vitalii4reva](https://github.com/vitalii4reva)
+- Website: [vitalii4reva.com](https://vitalii4reva.com)
+
+## 🙏 Подяки
+
+- Натхнення від освітніх матеріалів по JavaScript
+- Спільнота React та TypeScript
+- [shadcn/ui](https://ui.shadcn.com/) за чудові компоненти
+
+## 📊 Статус Проекту
+
+![Build](https://img.shields.io/github/actions/workflow/status/vitalii4reva/visual-js-event-loop/deploy.yml?branch=main)
+![Last Commit](https://img.shields.io/github/last-commit/vitalii4reva/visual-js-event-loop)
+![Contributors](https://img.shields.io/github/contributors/vitalii4reva/visual-js-event-loop)
+
+---
+
+<div align="center">
+  
+**Зроблено з ❤️ в Україні 🇺🇦**
+
+[⭐ Star на GitHub](https://github.com/vitalii4reva/visual-js-event-loop) • [🐛 Повідомити про баг](https://github.com/vitalii4reva/visual-js-event-loop/issues) • [💡 Запропонувати функцію](https://github.com/vitalii4reva/visual-js-event-loop/issues)
+
+</div>

README.uk.md

@@ -52,7 +52,9 @@
     <meta name="theme-color" content="#1e293b" media="(prefers-color-scheme: dark)">
 
     <!-- Favicon -->
-    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 
     <!-- Structured Data JSON-LD -->
     <script type="application/ld+json">
@@ -149,8 +151,8 @@
     }
     </script>
     <!-- End Google Tag Manager -->
-  <script type="module" crossorigin src="/visual-js-event-loop/assets/index-BfAq5QEV.js"></script>
-  <link rel="stylesheet" crossorigin href="/visual-js-event-loop/assets/index-D67uQN3c.css">
+  <script type="module" crossorigin src="/visual-js-event-loop/assets/index-CJx2MF7c.js"></script>
+  <link rel="stylesheet" crossorigin href="/visual-js-event-loop/assets/index-DeaXlI7w.css">
 </head>
 <body>
     <!-- Google Tag Manager (noscript) -->

dist/index.html

@@ -1,4 +1,5 @@
 import { ThemeProvider } from '@/context/ThemeProvider'
+import { LanguageProvider } from '@/context/LanguageProvider'
 import { Header } from '@/components/layout/Header'
 import { CallStack } from '@/components/event-loop/CallStack'
 import { WebAPIs } from '@/components/event-loop/WebAPIs'
@@ -16,12 +17,14 @@ import { useEventLoop } from '@/hooks/useEventLoop'
 import { useStepExecution } from '@/hooks/useStepExecution'
 import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
 import { useIsMobile } from '@/hooks/use-mobile'
-import { examples } from '@/lib/examples'
-import { translations } from '@/i18n/translations'
+import { getExamples } from '@/lib/examples'
+import { useLanguage } from '@/context/LanguageProvider'
 import { Separator } from '@/components/ui/separator'
 import { SidebarProvider, SidebarTrigger, SidebarInset, useSidebar } from '@/components/ui/sidebar'
 
 function AppContent() {
+  const { t } = useLanguage()
+  const examples = getExamples(t)
   const { state, actions } = useEventLoop()
   const { toggleSidebar, open, isMobile } = useSidebar()
   const {
@@ -107,7 +110,7 @@ function AppContent() {
                       stepCount={state.stepCount}
                       stepInfo={state.history.length > 0 
                         ? state.history[state.history.length - 1].message 
-                        : translations.select_example}
+                        : t.select_example}
                       canProceed={canProceed}
                       showManualHint={showManualHint}
                     />
@@ -162,13 +165,15 @@ function App() {
   const isMobile = useIsMobile()
 
   return (
-    <ThemeProvider defaultTheme="system" storageKey="event-loop-theme">
-      <SidebarProvider defaultOpen={!isMobile}>
-        <div className="flex min-h-screen w-full bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 transition-colors duration-300">
-          <AppContent />
-        </div>
-      </SidebarProvider>
-    </ThemeProvider>
+    <LanguageProvider>
+      <ThemeProvider defaultTheme="system" storageKey="event-loop-theme">
+        <SidebarProvider defaultOpen={!isMobile}>
+          <div className="flex min-h-screen w-full bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 transition-colors duration-300">
+            <AppContent />
+          </div>
+        </SidebarProvider>
+      </ThemeProvider>
+    </LanguageProvider>
   )
 }
 

src/App.tsx

@@ -2,10 +2,12 @@ import { FileCode, ArrowLeft, Smartphone } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { useSidebar } from '@/components/ui/sidebar'
 import { useIsMobile } from '@/hooks/use-mobile'
+import { useLanguage } from '@/context/LanguageProvider'
 
 export function EmptyState() {
   const { toggleSidebar, open } = useSidebar()
   const isMobile = useIsMobile()
+  const { t } = useLanguage()
 
   return (
     <div className="flex items-center justify-center min-h-[60vh]">
@@ -29,12 +31,12 @@ export function EmptyState() {
         {/* Title */}
         <div className="space-y-2">
           <h2 className="text-2xl font-bold text-foreground">
-            Виберіть приклад для початку
+            {t.empty_state_title}
           </h2>
           <p className="text-muted-foreground">
             {isMobile 
-              ? "Натисніть кнопку меню зліва вгорі та оберіть один з прикладів коду"
-              : "Оберіть один з прикладів у лівій панелі або натисніть клавіші 0-4"
+              ? t.empty_state_description_mobile
+              : t.empty_state_description_desktop
             }
           </p>
         </div>
@@ -47,7 +49,7 @@ export function EmptyState() {
             className="gap-2 shadow-lg"
           >
             <Smartphone className="w-5 h-5" />
-            Відкрити меню з прикладами
+            {t.empty_state_open_menu}
           </Button>
         )}
 
@@ -57,19 +59,19 @@ export function EmptyState() {
             <span className="inline-flex items-center justify-center w-6 h-6 rounded bg-primary/10 text-primary font-mono text-xs">
               0
             </span>
-            Пам'ять та Змінні
+            {t.empty_state_memory_example}
           </p>
           <p className="flex items-center justify-center gap-2">
             <span className="inline-flex items-center justify-center w-6 h-6 rounded bg-primary/10 text-primary font-mono text-xs">
               1
             </span>
-            setTimeout
+            {t.empty_state_setTimeout_example}
           </p>
           <p className="flex items-center justify-center gap-2">
             <span className="inline-flex items-center justify-center w-6 h-6 rounded bg-primary/10 text-primary font-mono text-xs">
               2
             </span>
-            Promise vs setTimeout
+            {t.empty_state_promise_example}
           </p>
         </div>
       </div>