Merge branch 'tapframe:main' into feature/ani-skip

2026-01-11 20:10:25 +00:00 · 2026-01-07 13:18:43 +05:30 · 2026-01-07 13:18:43 +05:30 · 5166dbd446
commit 5166dbd446
parent a383289457 0722923a78
10 changed files with 1755 additions and 311 deletions
--- a/ios/KSPlayerView.swift
+++ b/ios/KSPlayerView.swift
@ -25,6 +25,7 @@ class KSPlayerView: UIView {
    @objc var onEnd: RCTDirectEventBlock?
    @objc var onError: RCTDirectEventBlock?
    @objc var onBufferingProgress: RCTDirectEventBlock?
+    @objc var onExitFullscreen: RCTDirectEventBlock?
    
    // Property setters that React Native will call
    @objc var source: NSDictionary? {
@ -313,6 +314,22 @@ class KSPlayerView: UIView {
        } else {
            playerView.play()
        }
+    }   
+
+    override var keyCommands: [UIKeyCommand]? {
+        return [
+            UIKeyCommand(
+                input: UIKeyCommand.inputEscape,
+                modifierFlags: [],
+                action: #selector(handleEscapeKey),
+                discoverabilityTitle: "Exit Fullscreen"
+            )
+        ]
+    }
+
+    @objc func handleEscapeKey() {
+        print("KSPlayerView: ESC pressed")
+        sendEvent("onExitFullscreen", [:])
    }

    func setVolume(_ volume: Float) {
@ -979,3 +996,8 @@ extension KSPlayerView {
    }
 }

+extension IOSVideoPlayerView {
+    @objc func handleEscapeKey() {
+        self.next?.perform(#selector(handleEscapeKey))
+    }
+}
--- a/src/i18n/locales/ar.json
+++ b/src/i18n/locales/ar.json
@ -601,6 +601,7 @@
        "arabic": "العربية",
        "spanish": "الإسبانية",
        "french": "الفرنسية",
+        "italian": "الإيطالية",
        "account": "الحساب",
        "content_discovery": "المحتوى والاكتشاف",
        "appearance": "المظهر",
@ -1192,5 +1193,35 @@
        "repo_format_hint": "التنسيق: https://raw.githubusercontent.com/username/repo/refs/heads/branch",
        "cancel": "إلغاء",
        "add": "إضافة"
+    },
+    "theme": {
+        "title": "سمات التطبيق",
+        "select_theme": "اختر السمة",
+        "create_custom": "إنشاء سمة مخصصة",
+        "options": "خيارات",
+        "use_dominant_color": "استخدام اللون المهيمن من العمل الفني",
+        "categories": {
+            "all": "كل السمات",
+            "dark": "سمات داكنة",
+            "colorful": "ملونة",
+            "custom": "سماتي"
+        },
+        "editor": {
+            "theme_name_placeholder": "اسم السمة",
+            "save": "حفظ",
+            "primary": "أساسي",
+            "secondary": "ثانوي",
+            "background": "خلفية",
+            "invalid_name_title": "اسم غير صالح",
+            "invalid_name_msg": "يرجى إدخال اسم سمة صالح"
+        },
+        "alerts": {
+            "delete_title": "حذف السمة",
+            "delete_msg": "هل أنت متأكد أنك تريد حذف \"{{name}}\"؟",
+            "ok": "حسناً",
+            "delete": "حذف",
+            "cancel": "إلغاء",
+            "back": "إعدادات"
+        }
    }
 }
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@ -601,6 +601,7 @@
        "arabic": "Arabic",
        "spanish": "Spanish",
        "french": "French",
+        "italian": "Italian",
        "account": "Account",
        "content_discovery": "Content & Discovery",
        "appearance": "Appearance",
@ -1192,5 +1193,35 @@
        "repo_format_hint": "Format: https://raw.githubusercontent.com/username/repo/refs/heads/branch",
        "cancel": "Cancel",
        "add": "Add"
+    },
+    "theme": {
+        "title": "App Themes",
+        "select_theme": "SELECT THEME",
+        "create_custom": "Create Custom Theme",
+        "options": "OPTIONS",
+        "use_dominant_color": "Use Dominant Color from Artwork",
+        "categories": {
+            "all": "All Themes",
+            "dark": "Dark Themes",
+            "colorful": "Colorful",
+            "custom": "My Themes"
+        },
+        "editor": {
+            "theme_name_placeholder": "Theme name",
+            "save": "Save",
+            "primary": "Primary",
+            "secondary": "Secondary",
+            "background": "Background",
+            "invalid_name_title": "Invalid Name",
+            "invalid_name_msg": "Please enter a valid theme name"
+        },
+        "alerts": {
+            "delete_title": "Delete Theme",
+            "delete_msg": "Are you sure you want to delete \"{{name}}\"?",
+            "ok": "OK",
+            "delete": "Delete",
+            "cancel": "Cancel",
+            "back": "Settings"
+        }
    }
 }
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@ -601,6 +601,7 @@
        "arabic": "Árabe",
        "spanish": "Español",
        "french": "Francés",
+        "italian": "Italiano",
        "account": "Cuenta",
        "content_discovery": "Contenido y descubrimiento",
        "appearance": "Apariencia",
@ -1192,5 +1193,35 @@
        "repo_format_hint": "Formato: https://raw.githubusercontent.com/usuario/repo/rama",
        "cancel": "Cancelar",
        "add": "Añadir"
+    },
+    "theme": {
+        "title": "Temas de la App",
+        "select_theme": "SELECCIONAR TEMA",
+        "create_custom": "Crear Tema Personalizado",
+        "options": "OPCIONES",
+        "use_dominant_color": "Usar Color Dominante del Arte",
+        "categories": {
+            "all": "Todos los Temas",
+            "dark": "Temas Oscuros",
+            "colorful": "Coloridos",
+            "custom": "Mis Temas"
+        },
+        "editor": {
+            "theme_name_placeholder": "Nombre del tema",
+            "save": "Guardar",
+            "primary": "Primario",
+            "secondary": "Secundario",
+            "background": "Fondo",
+            "invalid_name_title": "Nombre Inválido",
+            "invalid_name_msg": "Por favor ingresa un nombre válido"
+        },
+        "alerts": {
+            "delete_title": "Eliminar Tema",
+            "delete_msg": "¿Estás seguro de que quieres eliminar \"{{name}}\"?",
+            "ok": "OK",
+            "delete": "Eliminar",
+            "cancel": "Cancelar",
+            "back": "Ajustes"
+        }
    }
 }
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@ -601,6 +601,7 @@
        "arabic": "Arabe",
        "spanish": "Espagnol",
        "french": "Français",
+        "italian": "Italien",
        "account": "Compte",
        "content_discovery": "Contenu et découverte",
        "appearance": "Apparence",
@ -1192,5 +1193,35 @@
        "repo_format_hint": "Format : https://raw.githubusercontent.com/utilisateur/repo/refs/heads/branche",
        "cancel": "Annuler",
        "add": "Ajouter"
+    },
+    "theme": {
+        "title": "Thèmes de l'App",
+        "select_theme": "SÉLECTIONNER UN THÈME",
+        "create_custom": "Créer un Thème Personnalisé",
+        "options": "OPTIONS",
+        "use_dominant_color": "Utiliser la Couleur Dominante de l'Image",
+        "categories": {
+            "all": "Tous les Thèmes",
+            "dark": "Thèmes Sombres",
+            "colorful": "Colorés",
+            "custom": "Mes Thèmes"
+        },
+        "editor": {
+            "theme_name_placeholder": "Nom du thème",
+            "save": "Enregistrer",
+            "primary": "Primaire",
+            "secondary": "Secondaire",
+            "background": "Arrière-plan",
+            "invalid_name_title": "Nom Invalide",
+            "invalid_name_msg": "Veuillez entrer un nom de thème valide"
+        },
+        "alerts": {
+            "delete_title": "Supprimer le Thème",
+            "delete_msg": "Êtes-vous sûr de vouloir supprimer \"{{name}}\" ?",
+            "ok": "OK",
+            "delete": "Supprimer",
+            "cancel": "Annuler",
+            "back": "Paramètres"
+        }
    }
 }
--- a/src/i18n/locales/it.json
+++ b/src/i18n/locales/it.json
--- a/src/i18n/locales/pt.json
+++ b/src/i18n/locales/pt.json
@ -579,6 +579,7 @@
        "arabic": "Árabe",
        "spanish": "Espanhol",
        "french": "Francês",
+        "italian": "Italiano",
        "account": "Conta",
        "content_discovery": "Conteúdo e Descoberta",
        "appearance": "Aparência",
@ -1158,5 +1159,35 @@
        "repo_format_hint": "Formato: https://raw.githubusercontent.com/username/repo/refs/heads/branch",
        "cancel": "Cancelar",
        "add": "Adicionar"
+    },
+    "theme": {
+        "title": "Temas do App",
+        "select_theme": "SELECIONAR TEMA",
+        "create_custom": "Criar Tema Personalizado",
+        "options": "OPÇÕES",
+        "use_dominant_color": "Usar Cor Dominante da Arte",
+        "categories": {
+            "all": "Todos os Temas",
+            "dark": "Temas Escuros",
+            "colorful": "Coloridos",
+            "custom": "Meus Temas"
+        },
+        "editor": {
+            "theme_name_placeholder": "Nome do tema",
+            "save": "Salvar",
+            "primary": "Primário",
+            "secondary": "Secundário",
+            "background": "Fundo",
+            "invalid_name_title": "Nome Inválido",
+            "invalid_name_msg": "Por favor insira um nome válido"
+        },
+        "alerts": {
+            "delete_title": "Excluir Tema",
+            "delete_msg": "Tem certeza que deseja excluir \"{{name}}\"?",
+            "ok": "OK",
+            "delete": "Excluir",
+            "cancel": "Cancelar",
+            "back": "Configurações"
+        }
    }
 }
--- a/src/i18n/resources.ts
+++ b/src/i18n/resources.ts
@ -3,6 +3,7 @@ import pt from './locales/pt.json';
 import ar from './locales/ar.json';
 import es from './locales/es.json';
 import fr from './locales/fr.json';
+import it from './locales/it.json';

 export const resources = {
    en: { translation: en },
@ -10,4 +11,5 @@ export const resources = {
    ar: { translation: ar },
    es: { translation: es },
    fr: { translation: fr },
+    it: { translation: it },
 };
--- a/src/screens/SettingsScreen.tsx
+++ b/src/screens/SettingsScreen.tsx
@ -601,11 +601,12 @@ const SettingsScreen: React.FC = () => {
                  <SettingItem
                    title={t('settings.language')}
                    description={
-                      i18n.language === 'pt' ? t('settings.portuguese') : 
-                      i18n.language === 'ar' ? t('settings.arabic') : 
-                      i18n.language === 'es' ? t('settings.spanish') : 
-                      i18n.language === 'fr' ? t('settings.french') : 
-                      t('settings.english')
+                      i18n.language === 'pt' ? t('settings.portuguese') :
+                        i18n.language === 'ar' ? t('settings.arabic') :
+                          i18n.language === 'es' ? t('settings.spanish') :
+                            i18n.language === 'fr' ? t('settings.french') :
+                              i18n.language === 'it' ? t('settings.italian') :
+                                t('settings.english')
                    }
                    icon="globe"
                    renderControl={() => <ChevronRight />}
@ -855,116 +856,138 @@ const SettingsScreen: React.FC = () => {
            style={{ backgroundColor: currentTheme.colors.darkGray || '#0A0C0C' }}
            contentContainerStyle={styles.bottomSheetContent}
          >
-          <TouchableOpacity
-            style={[
-              styles.languageOption,
-              i18n.language === 'en' && { backgroundColor: currentTheme.colors.primary + '20' }
-            ]}
-            onPress={() => {
-              i18n.changeLanguage('en');
-              languageSheetRef.current?.close();
-            }}
-          >
-            <Text style={[
-              styles.languageText,
-              { color: currentTheme.colors.highEmphasis },
-              i18n.language === 'en' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
-            ]}>
-              {t('settings.english')}
-            </Text>
-            {i18n.language === 'en' && (
-              <Feather name="check" size={20} color={currentTheme.colors.primary} />
-            )}
-          </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.languageOption,
+                i18n.language === 'en' && { backgroundColor: currentTheme.colors.primary + '20' }
+              ]}
+              onPress={() => {
+                i18n.changeLanguage('en');
+                languageSheetRef.current?.close();
+              }}
+            >
+              <Text style={[
+                styles.languageText,
+                { color: currentTheme.colors.highEmphasis },
+                i18n.language === 'en' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
+              ]}>
+                {t('settings.english')}
+              </Text>
+              {i18n.language === 'en' && (
+                <Feather name="check" size={20} color={currentTheme.colors.primary} />
+              )}
+            </TouchableOpacity>

-          <TouchableOpacity
-            style={[
-              styles.languageOption,
-              i18n.language === 'pt' && { backgroundColor: currentTheme.colors.primary + '20' }
-            ]}
-            onPress={() => {
-              i18n.changeLanguage('pt');
-              languageSheetRef.current?.close();
-            }}
-          >
-            <Text style={[
-              styles.languageText,
-              { color: currentTheme.colors.highEmphasis },
-              i18n.language === 'pt' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
-            ]}>
-              {t('settings.portuguese')}
-            </Text>
-            {i18n.language === 'pt' && (
-              <Feather name="check" size={20} color={currentTheme.colors.primary} />
-            )}
-          </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.languageOption,
+                i18n.language === 'pt' && { backgroundColor: currentTheme.colors.primary + '20' }
+              ]}
+              onPress={() => {
+                i18n.changeLanguage('pt');
+                languageSheetRef.current?.close();
+              }}
+            >
+              <Text style={[
+                styles.languageText,
+                { color: currentTheme.colors.highEmphasis },
+                i18n.language === 'pt' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
+              ]}>
+                {t('settings.portuguese')}
+              </Text>
+              {i18n.language === 'pt' && (
+                <Feather name="check" size={20} color={currentTheme.colors.primary} />
+              )}
+            </TouchableOpacity>

-          <TouchableOpacity
-            style={[
-              styles.languageOption,
-              i18n.language === 'ar' && { backgroundColor: currentTheme.colors.primary + '20' }
-            ]}
-            onPress={() => {
-              i18n.changeLanguage('ar');
-              languageSheetRef.current?.close();
-            }}
-          >
-            <Text style={[
-              styles.languageText,
-              { color: currentTheme.colors.highEmphasis },
-              i18n.language === 'ar' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
-            ]}>
-              {t('settings.arabic')}
-            </Text>
-            {i18n.language === 'ar' && (
-              <Feather name="check" size={20} color={currentTheme.colors.primary} />
-            )}
-          </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.languageOption,
+                i18n.language === 'ar' && { backgroundColor: currentTheme.colors.primary + '20' }
+              ]}
+              onPress={() => {
+                i18n.changeLanguage('ar');
+                languageSheetRef.current?.close();
+              }}
+            >
+              <Text style={[
+                styles.languageText,
+                { color: currentTheme.colors.highEmphasis },
+                i18n.language === 'ar' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
+              ]}>
+                {t('settings.arabic')}
+              </Text>
+              {i18n.language === 'ar' && (
+                <Feather name="check" size={20} color={currentTheme.colors.primary} />
+              )}
+            </TouchableOpacity>

-          <TouchableOpacity
-            style={[
-              styles.languageOption,
-              i18n.language === 'es' && { backgroundColor: currentTheme.colors.primary + '20' }
-            ]}
-            onPress={() => {
-              i18n.changeLanguage('es');
-              languageSheetRef.current?.close();
-            }}
-          >
-            <Text style={[
-              styles.languageText,
-              { color: currentTheme.colors.highEmphasis },
-              i18n.language === 'es' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
-            ]}>
-              {t('settings.spanish')}
-            </Text>
-            {i18n.language === 'es' && (
-              <Feather name="check" size={20} color={currentTheme.colors.primary} />
-            )}
-          </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.languageOption,
+                i18n.language === 'es' && { backgroundColor: currentTheme.colors.primary + '20' }
+              ]}
+              onPress={() => {
+                i18n.changeLanguage('es');
+                languageSheetRef.current?.close();
+              }}
+            >
+              <Text style={[
+                styles.languageText,
+                { color: currentTheme.colors.highEmphasis },
+                i18n.language === 'es' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
+              ]}>
+                {t('settings.spanish')}
+              </Text>
+              {i18n.language === 'es' && (
+                <Feather name="check" size={20} color={currentTheme.colors.primary} />
+              )}
+            </TouchableOpacity>

-          <TouchableOpacity
-            style={[
-              styles.languageOption,
-              i18n.language === 'fr' && { backgroundColor: currentTheme.colors.primary + '20' }
-            ]}
-            onPress={() => {
-              i18n.changeLanguage('fr');
-              languageSheetRef.current?.close();
-            }}
-          >
-            <Text style={[
-              styles.languageText,
-              { color: currentTheme.colors.highEmphasis },
-              i18n.language === 'fr' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
-            ]}>
-              {t('settings.french')}
-            </Text>
-            {i18n.language === 'fr' && (
-              <Feather name="check" size={20} color={currentTheme.colors.primary} />
-            )}
-          </TouchableOpacity>
-        </ScrollView>
+            <TouchableOpacity
+              style={[
+                styles.languageOption,
+                i18n.language === 'fr' && { backgroundColor: currentTheme.colors.primary + '20' }
+              ]}
+              onPress={() => {
+                i18n.changeLanguage('fr');
+                languageSheetRef.current?.close();
+              }}
+            >
+              <Text style={[
+                styles.languageText,
+                { color: currentTheme.colors.highEmphasis },
+                i18n.language === 'fr' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
+              ]}>
+                {t('settings.french')}
+              </Text>
+              {i18n.language === 'fr' && (
+                <Feather name="check" size={20} color={currentTheme.colors.primary} />
+              )}
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[
+                styles.languageOption,
+                i18n.language === 'it' && { backgroundColor: currentTheme.colors.primary + '20' }
+              ]}
+              onPress={() => {
+                i18n.changeLanguage('it');
+                languageSheetRef.current?.close();
+              }}
+            >
+              <Text style={[
+                styles.languageText,
+                { color: currentTheme.colors.highEmphasis },
+                i18n.language === 'it' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
+              ]}>
+                {t('settings.italian')}
+              </Text>
+              {i18n.language === 'it' && (
+                <Feather name="check" size={20} color={currentTheme.colors.primary} />
+              )}
+            </TouchableOpacity>
+          </ScrollView>
        </BottomSheetView>
      </BottomSheetModal>
    </View>
--- a/src/screens/ThemeScreen.tsx
+++ b/src/screens/ThemeScreen.tsx
@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
  View,
  Text,
@ -45,9 +46,9 @@ interface ThemeCardProps {
  onDelete?: () => void;
 }

-const ThemeCard: React.FC<ThemeCardProps> = ({ 
-  theme, 
-  isSelected, 
+const ThemeCard: React.FC<ThemeCardProps> = ({
+  theme,
+  isSelected,
  onSelect,
  onEdit,
  onDelete
@ -57,10 +58,10 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
      style={[
        styles.themeCard,
        isSelected && styles.selectedThemeCard,
-        { 
+        {
          borderColor: isSelected ? theme.colors.primary : 'transparent',
-          backgroundColor: Platform.OS === 'ios' 
-            ? `${theme.colors.darkBackground}60` 
+          backgroundColor: Platform.OS === 'ios'
+            ? `${theme.colors.darkBackground}60`
            : 'rgba(255, 255, 255, 0.07)'
        }
      ]}
@ -75,26 +76,26 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
          <MaterialIcons name="check-circle" size={18} color={theme.colors.primary} />
        )}
      </View>
-      
+
      <View style={styles.colorPreviewContainer}>
        <View style={[styles.colorPreview, { backgroundColor: theme.colors.primary }, styles.colorPreviewShadow]} />
        <View style={[styles.colorPreview, { backgroundColor: theme.colors.secondary }, styles.colorPreviewShadow]} />
        <View style={[styles.colorPreview, { backgroundColor: theme.colors.darkBackground }, styles.colorPreviewShadow]} />
      </View>
-      
+
      {theme.isEditable && (
        <View style={styles.themeCardActions}>
          {onEdit && (
-            <TouchableOpacity 
-              style={[styles.themeCardAction, styles.buttonShadow]} 
+            <TouchableOpacity
+              style={[styles.themeCardAction, styles.buttonShadow]}
              onPress={onEdit}
            >
              <MaterialIcons name="edit" size={16} color={theme.colors.primary} />
            </TouchableOpacity>
          )}
          {onDelete && (
-            <TouchableOpacity 
-              style={[styles.themeCardAction, styles.buttonShadow]} 
+            <TouchableOpacity
+              style={[styles.themeCardAction, styles.buttonShadow]}
              onPress={onDelete}
            >
              <MaterialIcons name="delete" size={16} color={theme.colors.error} />
@ -114,11 +115,11 @@ interface FilterTabProps {
  primaryColor: string;
 }

-const FilterTab: React.FC<FilterTabProps> = ({ 
-  category, 
-  isActive, 
+const FilterTab: React.FC<FilterTabProps> = ({
+  category,
+  isActive,
  onPress,
-  primaryColor 
+  primaryColor
 }) => (
  <TouchableOpacity
    style={[
@ -128,9 +129,9 @@ const FilterTab: React.FC<FilterTabProps> = ({
    ]}
    onPress={onPress}
  >
-    <Text 
+    <Text
      style={[
-        styles.filterTabText, 
+        styles.filterTabText,
        isActive && { color: '#FFFFFF' }
      ]}
    >
@ -171,152 +172,157 @@ const ThemeColorEditor: React.FC<ThemeColorEditorProps & {
  setAlertActions,
  setAlertVisible
 }) => {
-  const [themeName, setThemeName] = useState('Custom Theme');
-  const [selectedColorKey, setSelectedColorKey] = useState<ColorKey>('primary');
-  const [themeColors, setThemeColors] = useState({
-    primary: initialColors.primary,
-    secondary: initialColors.secondary,
-    darkBackground: initialColors.darkBackground,
-  });
-
-  const handleColorChange = useCallback((color: string) => {
-    setThemeColors(prev => ({
-      ...prev,
-      [selectedColorKey]: color,
-    }));
-  }, [selectedColorKey]);
-
-  const handleSave = () => {
-    if (!themeName.trim()) {
-      setAlertTitle('Invalid Name');
-      setAlertMessage('Please enter a valid theme name');
-      setAlertActions([{ label: 'OK', onPress: () => {} }]);
-      setAlertVisible(true);
-      return;
-    }
-    onSave({ 
-      ...themeColors,
-      name: themeName 
+    const { t } = useTranslation();
+    const [themeName, setThemeName] = useState(t('theme.editor.theme_name_placeholder') || 'Custom Theme');
+    const [selectedColorKey, setSelectedColorKey] = useState<ColorKey>('primary');
+    const [themeColors, setThemeColors] = useState({
+      primary: initialColors.primary,
+      secondary: initialColors.secondary,
+      darkBackground: initialColors.darkBackground,
    });
-  };

-  // Compact preview component
-  const ThemePreview = () => (
-    <View style={[styles.previewContainer, { backgroundColor: themeColors.darkBackground }]}>
-      <View style={styles.previewContent}>
-        {/* App header */}
-        <View style={styles.previewHeader}>
-          <View style={styles.previewHeaderTitle} />
-          <View style={styles.previewIconGroup}>
-            <View style={styles.previewIcon} />
-            <View style={styles.previewIcon} />
-          </View>
-        </View>
-        
-        {/* Content area */}
-        <View style={styles.previewBody}>
-          {/* Featured content poster */}
-          <View style={styles.previewFeatured}>
-            <View style={styles.previewPosterGradient} />
-            <View style={styles.previewTitle} />
-            <View style={styles.previewButtonRow}>
-              <View style={[styles.previewPlayButton, { backgroundColor: themeColors.primary }]} />
-              <View style={styles.previewActionButton} />
+    const handleColorChange = useCallback((color: string) => {
+      setThemeColors(prev => ({
+        ...prev,
+        [selectedColorKey]: color,
+      }));
+    }, [selectedColorKey]);
+
+    const handleSave = () => {
+      if (!themeName.trim()) {
+        if (!themeName.trim()) {
+          setAlertTitle(t('theme.editor.invalid_name_title'));
+          setAlertMessage(t('theme.editor.invalid_name_msg'));
+          setAlertActions([{ label: 'OK', onPress: () => { } }]);
+          setAlertVisible(true);
+          return;
+        }
+        setAlertVisible(true);
+        return;
+      }
+      onSave({
+        ...themeColors,
+        name: themeName
+      });
+    };
+
+    // Compact preview component
+    const ThemePreview = () => (
+      <View style={[styles.previewContainer, { backgroundColor: themeColors.darkBackground }]}>
+        <View style={styles.previewContent}>
+          {/* App header */}
+          <View style={styles.previewHeader}>
+            <View style={styles.previewHeaderTitle} />
+            <View style={styles.previewIconGroup}>
+              <View style={styles.previewIcon} />
+              <View style={styles.previewIcon} />
            </View>
          </View>
-          
-          {/* Content row */}
-          <View style={styles.previewSectionHeader}>
-            <View style={styles.previewSectionTitle} />
-          </View>
-          <View style={styles.previewPosterRow}>
-            <View style={styles.previewPoster} />
-            <View style={styles.previewPoster} />
-            <View style={styles.previewPoster} />
-          </View>
-        </View>
-      </View>
-    </View>
-  );

-  return (
-    <View style={styles.editorContainer}>
-      <View style={styles.editorHeader}>
-        <TouchableOpacity
-          style={styles.editorBackButton}
-          onPress={onCancel}
-        >
-          <MaterialIcons name="arrow-back" size={20} color="#FFFFFF" />
-        </TouchableOpacity>
-        <TextInput
-          style={styles.editorTitleInput}
-          value={themeName}
-          onChangeText={setThemeName}
-          placeholder="Theme name"
-          placeholderTextColor="rgba(255,255,255,0.5)"
-        />
-        <TouchableOpacity
-          style={styles.editorSaveButton}
-          onPress={handleSave}
-        >
-          <Text style={styles.saveButtonText}>Save</Text>
-        </TouchableOpacity>
-      </View>
-      
-      <View style={styles.editorBody}>
-        <View style={styles.colorSectionRow}>
-          <ThemePreview />
-          
-          <View style={styles.colorButtonsColumn}>
-            <TouchableOpacity
-              style={[
-                styles.colorSelectorButton,
-                selectedColorKey === 'primary' && styles.selectedColorButton,
-                { backgroundColor: themeColors.primary }
-              ]}
-              onPress={() => setSelectedColorKey('primary')}
-            >
-              <Text style={styles.colorButtonText}>Primary</Text>
-            </TouchableOpacity>
-            
-            <TouchableOpacity
-              style={[
-                styles.colorSelectorButton,
-                selectedColorKey === 'secondary' && styles.selectedColorButton,
-                { backgroundColor: themeColors.secondary }
-              ]}
-              onPress={() => setSelectedColorKey('secondary')}
-            >
-              <Text style={styles.colorButtonText}>Secondary</Text>
-            </TouchableOpacity>
-            
-            <TouchableOpacity
-              style={[
-                styles.colorSelectorButton,
-                selectedColorKey === 'darkBackground' && styles.selectedColorButton,
-                { backgroundColor: themeColors.darkBackground }
-              ]}
-              onPress={() => setSelectedColorKey('darkBackground')}
-            >
-              <Text style={styles.colorButtonText}>Background</Text>
-            </TouchableOpacity>
+          {/* Content area */}
+          <View style={styles.previewBody}>
+            {/* Featured content poster */}
+            <View style={styles.previewFeatured}>
+              <View style={styles.previewPosterGradient} />
+              <View style={styles.previewTitle} />
+              <View style={styles.previewButtonRow}>
+                <View style={[styles.previewPlayButton, { backgroundColor: themeColors.primary }]} />
+                <View style={styles.previewActionButton} />
+              </View>
+            </View>
+
+            {/* Content row */}
+            <View style={styles.previewSectionHeader}>
+              <View style={styles.previewSectionTitle} />
+            </View>
+            <View style={styles.previewPosterRow}>
+              <View style={styles.previewPoster} />
+              <View style={styles.previewPoster} />
+              <View style={styles.previewPoster} />
+            </View>
          </View>
        </View>
-        
-        <View style={styles.colorPickerContainer}>
-          <ColorPicker
-            color={themeColors[selectedColorKey]}
-            onColorChange={handleColorChange}
-            thumbSize={22}
-            sliderSize={22}
-            noSnap={true}
-            row={false}
+      </View>
+    );
+
+    return (
+      <View style={styles.editorContainer}>
+        <View style={styles.editorHeader}>
+          <TouchableOpacity
+            style={styles.editorBackButton}
+            onPress={onCancel}
+          >
+            <MaterialIcons name="arrow-back" size={20} color="#FFFFFF" />
+          </TouchableOpacity>
+          <TextInput
+            style={styles.editorTitleInput}
+            value={themeName}
+            onChangeText={setThemeName}
+            placeholder={t('theme.editor.theme_name_placeholder')}
+            placeholderTextColor="rgba(255,255,255,0.5)"
          />
+          <TouchableOpacity
+            style={styles.editorSaveButton}
+            onPress={handleSave}
+          >
+            <Text style={styles.saveButtonText}>{t('theme.editor.save')}</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.editorBody}>
+          <View style={styles.colorSectionRow}>
+            <ThemePreview />
+
+            <View style={styles.colorButtonsColumn}>
+              <TouchableOpacity
+                style={[
+                  styles.colorSelectorButton,
+                  selectedColorKey === 'primary' && styles.selectedColorButton,
+                  { backgroundColor: themeColors.primary }
+                ]}
+                onPress={() => setSelectedColorKey('primary')}
+              >
+                <Text style={styles.colorButtonText}>{t('theme.editor.primary')}</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[
+                  styles.colorSelectorButton,
+                  selectedColorKey === 'secondary' && styles.selectedColorButton,
+                  { backgroundColor: themeColors.secondary }
+                ]}
+                onPress={() => setSelectedColorKey('secondary')}
+              >
+                <Text style={styles.colorButtonText}>{t('theme.editor.secondary')}</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[
+                  styles.colorSelectorButton,
+                  selectedColorKey === 'darkBackground' && styles.selectedColorButton,
+                  { backgroundColor: themeColors.darkBackground }
+                ]}
+                onPress={() => setSelectedColorKey('darkBackground')}
+              >
+                <Text style={styles.colorButtonText}>{t('theme.editor.background')}</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <View style={styles.colorPickerContainer}>
+            <ColorPicker
+              color={themeColors[selectedColorKey]}
+              onColorChange={handleColorChange}
+              thumbSize={22}
+              sliderSize={22}
+              noSnap={true}
+              row={false}
+            />
+          </View>
        </View>
      </View>
-    </View>
-  );
-};
+    );
+  };

 const ThemeScreen: React.FC = () => {
  const {
@ -327,6 +333,7 @@ const ThemeScreen: React.FC = () => {
    updateCustomTheme,
    deleteCustomTheme
  } = useTheme();
+  const { t } = useTranslation();
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
  const insets = useSafeAreaInsets();
  const { settings, updateSetting } = useSettings();
@ -335,7 +342,15 @@ const ThemeScreen: React.FC = () => {
  const headerTopPadding = Platform.OS === 'android'
    ? ANDROID_STATUSBAR_HEIGHT + 8
    : 8;
-  
+
+  // Theme categories for organization
+  const THEME_CATEGORIES = [
+    { id: 'all', name: t('theme.categories.all') },
+    { id: 'dark', name: t('theme.categories.dark') },
+    { id: 'colorful', name: t('theme.categories.colorful') },
+    { id: 'custom', name: t('theme.categories.custom') },
+  ];
+
  const [isEditMode, setIsEditMode] = useState(false);
  const [editingTheme, setEditingTheme] = useState<Theme | null>(null);
  const [activeFilter, setActiveFilter] = useState('all');
@ -352,9 +367,9 @@ const ThemeScreen: React.FC = () => {
        StatusBar.setBackgroundColor('transparent');
      }
    };
-    
+
    applyStatusBarConfig();
-    
+
    // Re-apply on focus
    const unsubscribe = navigation.addListener('focus', applyStatusBarConfig);
    return unsubscribe;
@ -365,19 +380,19 @@ const ThemeScreen: React.FC = () => {
    switch (activeFilter) {
      case 'dark':
        // Themes with darker colors
-        return availableThemes.filter(theme => 
-          !theme.isEditable && 
-          theme.id !== 'neon' && 
+        return availableThemes.filter(theme =>
+          !theme.isEditable &&
+          theme.id !== 'neon' &&
          theme.id !== 'retro'
        );
      case 'colorful':
        // Themes with vibrant colors
-        return availableThemes.filter(theme => 
-          !theme.isEditable && 
-          (theme.id === 'neon' || 
-           theme.id === 'retro' || 
-           theme.id === 'sunset' || 
-           theme.id === 'amber')
+        return availableThemes.filter(theme =>
+          !theme.isEditable &&
+          (theme.id === 'neon' ||
+            theme.id === 'retro' ||
+            theme.id === 'sunset' ||
+            theme.id === 'amber')
        );
      case 'custom':
        // User's custom themes
@ -398,18 +413,18 @@ const ThemeScreen: React.FC = () => {
  }, []);

  const handleDeleteTheme = useCallback((theme: Theme) => {
-    setAlertTitle('Delete Theme');
-    setAlertMessage(`Are you sure you want to delete "${theme.name}"?`);
+    setAlertTitle(t('theme.alerts.delete_title'));
+    setAlertMessage(t('theme.alerts.delete_msg', { name: theme.name }));
    setAlertActions([
-      { label: 'Cancel', style: { color: '#888' }, onPress: () => {} },
+      { label: t('theme.alerts.cancel'), style: { color: '#888' }, onPress: () => { } },
      {
-        label: 'Delete',
+        label: t('theme.alerts.delete'),
        style: { color: currentTheme.colors.error },
        onPress: () => deleteCustomTheme(theme.id),
      },
    ]);
    setAlertVisible(true);
-  }, [deleteCustomTheme, currentTheme.colors.error]);
+  }, [deleteCustomTheme, currentTheme.colors.error, t]);

  const handleCreateTheme = useCallback(() => {
    setEditingTheme(null);
@ -432,7 +447,7 @@ const ThemeScreen: React.FC = () => {
    } else {
      // Create new theme
      addCustomTheme({
-        name: themeData.name || 'Custom Theme',
+        name: themeData.name || t('theme.create_custom'),
        colors: {
          ...currentTheme.colors,
          primary: themeData.primary,
@ -441,7 +456,7 @@ const ThemeScreen: React.FC = () => {
        }
      });
    }
-    
+
    setIsEditMode(false);
    setEditingTheme(null);
  }, [editingTheme, updateCustomTheme, addCustomTheme, currentTheme]);
@ -467,9 +482,9 @@ const ThemeScreen: React.FC = () => {
  const ThemeColorEditorWithAlert = (props: any) => {
    const handleSave = (themeName: string, themeColors: any, onSave: any) => {
      if (!themeName.trim()) {
-        setAlertTitle('Invalid Name');
-        setAlertMessage('Please enter a valid theme name');
-        setAlertActions([{ label: 'OK', onPress: () => {} }]);
+        setAlertTitle(t('theme.editor.invalid_name_title'));
+        setAlertMessage(t('theme.editor.invalid_name_msg'));
+        setAlertActions([{ label: 'OK', onPress: () => { } }]);
        setAlertVisible(true);
        return false;
      }
@ -503,7 +518,7 @@ const ThemeScreen: React.FC = () => {

    return (
      <SafeAreaView style={[
-        styles.container, 
+        styles.container,
        { backgroundColor: currentTheme.colors.darkBackground }
      ]}>
        <StatusBar barStyle="light-content" />
@ -529,31 +544,31 @@ const ThemeScreen: React.FC = () => {

  return (
    <SafeAreaView style={[
-      styles.container, 
+      styles.container,
      { backgroundColor: currentTheme.colors.darkBackground }
    ]}>
      <StatusBar barStyle="light-content" />
-      
+
      <View style={[styles.header, { paddingTop: headerTopPadding }]}>
-        <TouchableOpacity 
+        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <MaterialIcons name="arrow-back" size={24} color={currentTheme.colors.text} />
          <Text style={[styles.backText, { color: currentTheme.colors.text }]}>
-            Settings
+            {t('theme.alerts.back') || t('settings.app_settings_label').split(' ')[0] || 'Settings'}
          </Text>
        </TouchableOpacity>
-        
+
        <View style={styles.headerActions}>
          {/* Empty for now, but ready for future actions */}
        </View>
      </View>
-      
+
      <Text style={[styles.headerTitle, { color: currentTheme.colors.text }]}>
-        App Themes
+        {t('theme.title')}
      </Text>
-      
+
      {/* Category filter */}
      <View style={styles.filterContainer}>
        <FlatList
@ -572,16 +587,16 @@ const ThemeScreen: React.FC = () => {
          contentContainerStyle={styles.filterList}
        />
      </View>
-      
-      <ScrollView 
-        style={styles.content} 
+
+      <ScrollView
+        style={styles.content}
        contentContainerStyle={styles.contentContainer}
        showsVerticalScrollIndicator={false}
      >
        <Text style={[styles.sectionTitle, { color: currentTheme.colors.textMuted }]}>
-          SELECT THEME
+          {t('theme.select_theme')}
        </Text>
-        
+
        <View style={styles.themeGrid}>
          {filteredThemes.map(theme => (
            <ThemeCard
@ -594,26 +609,26 @@ const ThemeScreen: React.FC = () => {
            />
          ))}
        </View>
-        
-        <TouchableOpacity 
+
+        <TouchableOpacity
          style={[
-            styles.createButton, 
+            styles.createButton,
            { backgroundColor: currentTheme.colors.primary },
            styles.buttonShadow
-          ]} 
+          ]}
          onPress={handleCreateTheme}
        >
          <MaterialIcons name="add" size={20} color="#FFFFFF" />
-          <Text style={styles.createButtonText}>Create Custom Theme</Text>
+          <Text style={styles.createButtonText}>{t('theme.create_custom')}</Text>
        </TouchableOpacity>

        <Text style={[styles.sectionTitle, { color: currentTheme.colors.textMuted, marginTop: 24 }]}>
-          OPTIONS
+          {t('theme.options')}
        </Text>

        <View style={styles.optionRow}>
          <Text style={[styles.optionLabel, { color: currentTheme.colors.text }]}>
-            Use Dominant Color from Artwork
+            {t('theme.use_dominant_color')}
          </Text>
          <Switch
            value={settings.useDominantBackgroundColor}
@ -631,7 +646,7 @@ const ThemeScreen: React.FC = () => {
        actions={alertActions}
        onClose={() => setAlertVisible(false)}
      />
-    </SafeAreaView>
+    </SafeAreaView >
  );
 };

@ -801,7 +816,7 @@ const styles = StyleSheet.create({
  optionLabel: {
    fontSize: 14,
  },
-  
+
  // Editor styles
  editorContainer: {
    flex: 1,
@ -977,7 +992,7 @@ const styles = StyleSheet.create({
    padding: 8,
    marginBottom: 10,
  },
-  
+
  // Legacy styles - keep for backward compatibility
  editorTitle: {
    fontSize: 18,