Języki: desktop wyrównanie do lewej; mobile pełny ekran + wyszukiwarka; tłumaczenia etykiet wyszukiwania

src/App.vue

@@ -79,6 +79,13 @@ const languages = computed(() => {
     .sort((a, b) => a.label.localeCompare(b.label, locale.value));
 });
 
+const searchTerm = ref('');
+const filteredLanguages = computed(() => {
+  const q = searchTerm.value.trim().toLowerCase();
+  if (!q) return languages.value;
+  return languages.value.filter((l) => l.label.toLowerCase().includes(q) || l.code.includes(q));
+});
+
 const installLabel = computed(() => {
   return isCoarsePointer.value ? t('pwa.installMobile') : t('pwa.installDesktop');
 });
@@ -217,8 +224,17 @@ onUnmounted(() => {
             <span class="lang-flag" v-html="languageFlags[locale]"></span>
           </button>
           <div v-if="isLangOpen" class="lang-menu">
+            <div class="lang-search">
+              <input
+                class="lang-search-input"
+                type="text"
+                :placeholder="t('language.searchPlaceholder')"
+                :aria-label="t('language.searchLabel')"
+                v-model="searchTerm"
+              />
+            </div>
             <button
-              v-for="lang in languages"
+              v-for="lang in filteredLanguages"
               :key="lang.code"
               class="lang-option"
               :class="{ active: locale === lang.code }"
@@ -357,7 +373,7 @@ h1 {
 .lang-menu {
   position: absolute;
   top: calc(100% + 8px);
-  right: 0;
+  left: 0;
   min-width: 170px;
   background: var(--fixed-bar-bg);
   border: 1px solid var(--fixed-bar-border);
@@ -373,6 +389,21 @@ h1 {
   overflow-y: auto;
 }
 
+.lang-search {
+  display: flex;
+  padding: 6px;
+}
+
+.lang-search-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--toggle-btn-border);
+  border-radius: 10px;
+  background: var(--toggle-bg);
+  color: var(--text-strong);
+  outline: none;
+}
+
 .lang-option {
   background: transparent;
   border: 1px solid var(--toggle-btn-border);
@@ -532,16 +563,22 @@ h1 {
   }
   .lang-menu {
     position: fixed;
-    top: 64px;
+    top: 0;
-    left: 50%;
+    left: 0;
-    right: auto;
+    right: 0;
-    transform: translateX(-50%);
+    bottom: 0;
-    width: min(92vw, 340px);
+    width: 100vw;
-    min-width: 240px;
+    min-width: 0;
     z-index: 1005;
-    max-height: calc(100vh - 96px);
+    max-height: none;
-    padding: 12px;
+    padding: 16px;
-    border-radius: 18px;
+    border-radius: 0;
+  }
+  .lang-search {
+    position: sticky;
+    top: 0;
+    padding: 8px 0 12px 0;
+    background: var(--fixed-bar-bg);
   }
   .lang-option {
     font-size: 1rem;
@@ -555,7 +592,7 @@ h1 {
     letter-spacing: 2px;
   }
   .lang-menu {
-    width: min(94vw, 360px);
+    width: 100vw;
   }
 }
 </style>

src/composables/useI18n.js

@@ -57,7 +57,9 @@ const messages = {
     'theme.label': 'Motyw',
     'theme.system': 'System',
     'theme.light': 'Jasny',
-    'theme.dark': 'Ciemny'
+    'theme.dark': 'Ciemny',
+    'language.searchLabel': 'Wyszukaj język',
+    'language.searchPlaceholder': 'Wpisz nazwę języka...'
   },
   en: {
     'app.title': 'Nonograms',
@@ -115,7 +117,9 @@ const messages = {
     'theme.label': 'Theme',
     'theme.system': 'System',
     'theme.light': 'Light',
-    'theme.dark': 'Dark'
+    'theme.dark': 'Dark',
+    'language.searchLabel': 'Search language',
+    'language.searchPlaceholder': 'Type language name...'
   },
   zh: {
     'app.title': 'Nonograms',
@@ -173,7 +177,9 @@ const messages = {
     'theme.label': '主题',
     'theme.system': '系统',
     'theme.light': '浅色',
-    'theme.dark': '深色'
+    'theme.dark': '深色',
+    'language.searchLabel': '搜索语言',
+    'language.searchPlaceholder': '输入语言名称...'
   },
   hi: {
     'app.title': 'Nonograms',
@@ -231,7 +237,9 @@ const messages = {
     'theme.label': 'थीम',
     'theme.system': 'सिस्टम',
     'theme.light': 'हल्का',
-    'theme.dark': 'गहरा'
+    'theme.dark': 'गहरा',
+    'language.searchLabel': 'भाषा खोजें',
+    'language.searchPlaceholder': 'भाषा का नाम लिखें...'
   },
   es: {
     'app.title': 'Nonograms',
@@ -289,7 +297,9 @@ const messages = {
     'theme.label': 'Tema',
     'theme.system': 'Sistema',
     'theme.light': 'Claro',
-    'theme.dark': 'Oscuro'
+    'theme.dark': 'Oscuro',
+    'language.searchLabel': 'Buscar idioma',
+    'language.searchPlaceholder': 'Escribe el nombre del idioma...'
   },
   fr: {
     'app.title': 'Nonograms',
@@ -347,7 +357,9 @@ const messages = {
     'theme.label': 'Thème',
     'theme.system': 'Système',
     'theme.light': 'Clair',
-    'theme.dark': 'Sombre'
+    'theme.dark': 'Sombre',
+    'language.searchLabel': 'Rechercher une langue',
+    'language.searchPlaceholder': 'Tapez le nom de la langue...'
   },
   ar: {
     'app.title': 'Nonograms',
@@ -405,7 +417,9 @@ const messages = {
     'theme.label': 'السمة',
     'theme.system': 'النظام',
     'theme.light': 'فاتح',
-    'theme.dark': 'داكن'
+    'theme.dark': 'داكن',
+    'language.searchLabel': 'ابحث عن لغة',
+    'language.searchPlaceholder': 'اكتب اسم اللغة...'
   },
   bn: {
     'app.title': 'Nonograms',
@@ -463,7 +477,9 @@ const messages = {
     'theme.label': 'থিম',
     'theme.system': 'সিস্টেম',
     'theme.light': 'হালকা',
-    'theme.dark': 'গাঢ়'
+    'theme.dark': 'গাঢ়',
+    'language.searchLabel': 'ভাষা অনুসন্ধান করুন',
+    'language.searchPlaceholder': 'ভাষার নাম লিখুন...'
   },
   ru: {
     'app.title': 'Nonograms',
@@ -521,7 +537,9 @@ const messages = {
     'theme.label': 'Тема',
     'theme.system': 'Система',
     'theme.light': 'Светлая',
-    'theme.dark': 'Тёмная'
+    'theme.dark': 'Тёмная',
+    'language.searchLabel': 'Поиск языка',
+    'language.searchPlaceholder': 'Введите название языка...'
   },
   pt: {
     'app.title': 'Nonograms',
@@ -579,7 +597,9 @@ const messages = {
     'theme.label': 'Tema',
     'theme.system': 'Sistema',
     'theme.light': 'Claro',
-    'theme.dark': 'Escuro'
+    'theme.dark': 'Escuro',
+    'language.searchLabel': 'Buscar idioma',
+    'language.searchPlaceholder': 'Digite o nome do idioma...'
   },
   ur: {
     'app.title': 'Nonograms',
@@ -637,7 +657,9 @@ const messages = {
     'theme.label': 'تھیم',
     'theme.system': 'سسٹم',
     'theme.light': 'ہلکا',
-    'theme.dark': 'گہرا'
+    'theme.dark': 'گہرا',
+    'language.searchLabel': 'زبان تلاش کریں',
+    'language.searchPlaceholder': 'زبان کا نام درج کریں...'
   }
   ,
   de: {