add flag support

src/components/IpSecurity.vue

@@ -33,15 +33,16 @@
           <img 
             v-if="flagUrl" 
             :src="flagUrl" 
-            :alt="ipData.location.country_code"
+            :alt="countryCode"
             class="w-4 h-3 object-cover rounded-sm"
             @error="handleFlagError"
           />
-          <span v-if="ipData.location.city" class="hidden sm:inline">{{ ipData.location.city }}</span>
-          <span v-if="ipData.location.country" class="text-gray-600 dark:text-gray-300 font-medium">
+          <span v-if="countryEmoji" class="text-base">{{ countryEmoji }}</span>
+          <span v-if="ipData.location?.city" class="hidden sm:inline">{{ ipData.location.city }}</span>
+          <span v-if="ipData.location?.country" class="text-gray-600 dark:text-gray-300 font-medium">
             {{ ipData.location.country }}
           </span>
-          <span v-if="ipData.asn.name" class="hidden md:inline text-gray-400">
+          <span v-if="ipData.asn?.name" class="hidden md:inline text-gray-400">
             • {{ truncateText(ipData.asn.name, 30) }}
           </span>
         </div>
@@ -72,12 +73,36 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { getAllCountries, withFlags } from '@tw-labs/countries'
 
 const ipData = ref(null)
 const loading = ref(true)
 const error = ref(false)
 const flagError = ref(false)
 
+// Загружаем список стран один раз
+const countriesList = getAllCountries()
+
+// Функция поиска страны по названию
+function findCountryByName(countryName) {
+  if (!countryName) return null
+  
+  // Точное совпадение
+  const found = countriesList.find(
+    c => c.label.toLowerCase() === countryName.toLowerCase()
+  )
+  
+  if (found) return found
+  
+  // Частичное совпадение (для "Russian Federation" vs "Russia" и т.п.)
+  const partial = countriesList.find(
+    c => countryName.toLowerCase().includes(c.label.toLowerCase()) ||
+         c.label.toLowerCase().includes(countryName.toLowerCase())
+  )
+  
+  return partial || null
+}
+
 async function fetchIp() {
   loading.value = true
   error.value = false
@@ -87,7 +112,27 @@ async function fetchIp() {
     const response = await fetch('/api/v1/ip')
     if (!response.ok) throw new Error(`HTTP ${response.status}`)
     
-    ipData.value = await response.json()
+    const data = await response.json()
+    
+    // Находим код страны по названию
+    const countryName = data.location?.country
+    const foundCountry = findCountryByName(countryName)
+    const countryCode = foundCountry?.code || null
+    
+    // Добавляем флаговые данные через withFlags
+    let countryWithFlags = null
+    if (foundCountry) {
+      countryWithFlags = withFlags(foundCountry)
+    }
+    
+    ipData.value = {
+      ...data,
+      location: {
+        ...data.location,
+        computed_country_code: countryCode
+      },
+      _flags: countryWithFlags
+    }
     
   } catch (err) {
     console.error('IP fetch error:', err)
@@ -100,13 +145,31 @@ async function fetchIp() {
 
 const isProtected = computed(() => {
   if (!ipData.value) return false
-  return ipData.value.security.vpn || ipData.value.security.proxy || ipData.value.security.tor
+  return ipData.value.security?.vpn || ipData.value.security?.proxy || ipData.value.security?.tor
 })
 
+// Код страны (вычисленный)
+const countryCode = computed(() => {
+  return ipData.value?.location?.computed_country_code || null
+})
+
+// Emoji флага из withFlags
+const countryEmoji = computed(() => {
+  return ipData.value?._flags?.flagEmoji || null
+})
+
+// URL флага
 const flagUrl = computed(() => {
-  const countryCode = ipData.value?.location?.country_code
-  if (!countryCode || flagError.value) return null
-  return `https://flagcdn.com/${countryCode.toLowerCase()}.svg`
+  // Сначала пробуем взять SVG из withFlags
+  if (ipData.value?._flags?.flagSvg && !flagError.value) {
+    return ipData.value._flags.flagSvg
+  }
+  
+  // Если нет — формируем сами через flagcdn
+  const code = countryCode.value
+  if (!code || flagError.value) return null
+  
+  return `https://flagcdn.com/${code.toLowerCase()}.svg`
 })
 
 function handleFlagError() {