UI/UX Overhaul: NavBar, Icons, Mobile Menu, and Status Panel Integration

- Przeniesienie tytułu i wybieraka języka do nowego komponentu NavBar
- Integracja biblioteki flag-icons i mapowanie kodów języków na kraje
- Wdrożenie biblioteki ikon lucide-vue-next i zastąpienie wszystkich emoji ikonami SVG
- Implementacja pełnoekranowego, responsywnego menu mobilnego (hamburger menu)
- Przeniesienie przycisków akcji (Reset, Cofnij) do komponentu StatusPanel
- Nowy układ panelu statusu (połączone statystyki i akcje w jednym szklanym panelu)
- Usunięcie przestarzałych komponentów (GameActions, LevelSelector)
- Poprawki wizualne i stylowe (glassmorphism, animacje przejść)

src/components/StatusPanel.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useTimer } from '@/composables/useTimer';
 import { useI18n } from '@/composables/useI18n';
+import { RotateCcw, RefreshCw, Eye } from 'lucide-vue-next';
 
 const store = usePuzzleStore();
 const { formatTime } = useTimer();
@@ -14,22 +15,38 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
 
 <template>
   <div class="status-panel glass-panel">
-    <div class="stat-item">
-      <span class="label">{{ t('status.time') }}</span>
-      <span class="value">{{ formattedTime }}</span>
-    </div>
-    
-    <div class="stat-item">
-      <span class="label">{{ t('status.moves') }}</span>
-      <span class="value">{{ store.moves }}</span>
-    </div>
-    
-    <div class="stat-item">
-      <span class="label">{{ t('status.progress') }}</span>
-      <div class="progress-wrapper">
-         <span class="value small">{{ progressText }}</span>
-         <span class="eye-icon">👁️</span>
+    <div class="stats-group">
+      <div class="stat-item">
+        <span class="label">{{ t('status.time') }}</span>
+        <span class="value">{{ formattedTime }}</span>
       </div>
+      
+      <div class="stat-item">
+        <span class="label">{{ t('status.moves') }}</span>
+        <span class="value">{{ store.moves }}</span>
+      </div>
+      
+      <div class="stat-item">
+        <span class="label">{{ t('status.progress') }}</span>
+        <div class="progress-wrapper">
+           <span class="value small">{{ progressText }}</span>
+           <button class="eye-btn" :title="t('status.progress')">
+             <Eye :size="20" />
+           </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="panel-separator"></div>
+
+    <div class="actions-group">
+      <button class="action-btn" @click="store.resetGame" :title="t('actions.reset')">
+        <RefreshCw :size="20" />
+      </button>
+      <div class="action-separator"></div>
+      <button class="action-btn" @click="store.undo" :title="t('actions.undo')">
+        <RotateCcw :size="20" />
+      </button>
     </div>
   </div>
 </template>
@@ -37,9 +54,9 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
 <style scoped>
 .status-panel {
   display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 20px 40px;
+  justify-content: space-between;
+  align-items: stretch;
+  padding: 0;
   border-radius: 15px;
   background: var(--panel-bg);
   backdrop-filter: blur(10px);
@@ -47,7 +64,17 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
   box-shadow: var(--panel-shadow);
   margin-bottom: 30px;
   width: 100%;
-  max-width: 600px;
+  max-width: 650px;
+  overflow: hidden;
+  height: 90px;
+}
+
+.stats-group {
+  flex: 1;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 10px 20px;
 }
 
 .stat-item {
@@ -81,8 +108,56 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
   gap: 8px;
 }
 
-.eye-icon {
+.eye-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-strong);
   opacity: 0.7;
   cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  transition: opacity 0.2s;
 }
-</style>
+
+.eye-btn:hover {
+  opacity: 1;
+  color: var(--primary-neon);
+}
+
+.panel-separator {
+  width: 1px;
+  background: rgba(255, 255, 255, 0.1);
+  margin: 10px 0;
+}
+
+.actions-group {
+  display: flex;
+  flex-direction: column;
+  width: 60px;
+}
+
+.action-btn {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--text-strong);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--primary-neon);
+}
+
+.action-separator {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.1);
+  width: 80%;
+  align-self: center;
+}
+</style>