feat(onboarding): add multilingual support for onboarding steps and language selection

locales/de.json

@@ -40,6 +40,54 @@
             "tb": "TB"
         }
     },
+    "onboarding": {
+        "languageSelection": {
+            "title": "Willkommen beim LoRA Manager",
+            "skip": "Überspringen",
+            "continue": "Weiter",
+            "changeFailed": "Fehler beim Ändern der Sprache: {message}"
+        },
+        "tutorial": {
+            "skipTutorial": "Tutorial überspringen",
+            "back": "Zurück",
+            "next": "Weiter",
+            "finish": "Fertigstellen"
+        },
+        "steps": {
+            "fetch": {
+                "title": "Modelldaten abrufen",
+                "content": "Klicken Sie auf die Schaltfläche <strong>Abrufen</strong>, um Modelldaten und Vorschaubilder von Civitai herunterzuladen."
+            },
+            "download": {
+                "title": "Neue Modelle herunterladen",
+                "content": "Verwenden Sie die Schaltfläche <strong>Herunterladen</strong>, um Modelle direkt über Civitai-URLs herunterzuladen."
+            },
+            "bulk": {
+                "title": "Massenoperationen",
+                "content": "Wechseln Sie in den Massenmodus, indem Sie auf diese Schaltfläche klicken oder <span class=\"onboarding-shortcut\">B</span> drücken. Wählen Sie mehrere Modelle aus und führen Sie Stapeloperationen durch. Mit <span class=\"onboarding-shortcut\">Strg+A</span> können Sie alle sichtbaren Modelle auswählen."
+            },
+            "searchOptions": {
+                "title": "Suchoptionen",
+                "content": "Klicken Sie auf diese Schaltfläche, um festzulegen, in welchen Feldern gesucht werden soll: Dateiname, Modellname, Tags oder Erstellername. Passen Sie den Suchbereich an."
+            },
+            "filter": {
+                "title": "Modelle filtern",
+                "content": "Verwenden Sie Filter, um Modelle nach Basis-Modelltyp (SD1.5, SDXL, Flux usw.) oder bestimmten Tags einzugrenzen."
+            },
+            "breadcrumb": {
+                "title": "Breadcrumb-Navigation",
+                "content": "Die Breadcrumb-Navigation zeigt Ihren aktuellen Pfad und ermöglicht eine schnelle Navigation zwischen Ordnern. Klicken Sie auf einen Ordnernamen, um direkt dorthin zu springen."
+            },
+            "modelCards": {
+                "title": "Modellkarten",
+                "content": "<strong>Einfachklick</strong> auf eine Modellkarte zeigt detaillierte Informationen und ermöglicht das Bearbeiten von Metadaten. Suchen Sie nach dem Stiftsymbol, wenn Sie über bearbeitbare Felder fahren."
+            },
+            "contextMenu": {
+                "title": "Kontextmenü",
+                "content": "<strong>Rechtsklick</strong> auf eine Modellkarte öffnet ein Kontextmenü mit weiteren Aktionen."
+            }
+        }
+    },
     "modelCard": {
         "actions": {
             "addToFavorites": "Zu Favoriten hinzufügen",

locales/en.json

@@ -40,6 +40,54 @@
             "tb": "TB"
         }
     },
+    "onboarding": {
+        "languageSelection": {
+            "title": "Welcome to LoRA Manager",
+            "skip": "Skip",
+            "continue": "Continue",
+            "changeFailed": "Failed to change language: {message}"
+        },
+        "tutorial": {
+            "skipTutorial": "Skip Tutorial",
+            "back": "Back",
+            "next": "Next",
+            "finish": "Finish"
+        },
+        "steps": {
+            "fetch": {
+                "title": "Fetch Models Metadata",
+                "content": "Click the <strong>Fetch</strong> button to download model metadata and preview images from Civitai."
+            },
+            "download": {
+                "title": "Download New Models",
+                "content": "Use the <strong>Download</strong> button to download models directly from Civitai URLs."
+            },
+            "bulk": {
+                "title": "Bulk Operations",
+                "content": "Enter bulk mode by clicking this button or pressing <span class=\"onboarding-shortcut\">B</span>. Select multiple models and perform batch operations. Use <span class=\"onboarding-shortcut\">Ctrl+A</span> to select all visible models."
+            },
+            "searchOptions": {
+                "title": "Search Options",
+                "content": "Click this button to configure what fields to search in: filename, model name, tags, or creator name. Customize your search scope."
+            },
+            "filter": {
+                "title": "Filter Models",
+                "content": "Use filters to narrow down models by base model type (SD1.5, SDXL, Flux, etc.) or by specific tags."
+            },
+            "breadcrumb": {
+                "title": "Breadcrumb Navigation",
+                "content": "The breadcrumb navigation shows your current path and allows quick navigation between folders. Click any folder name to jump directly there."
+            },
+            "modelCards": {
+                "title": "Model Cards",
+                "content": "<strong>Single-click</strong> a model card to view detailed information and edit metadata. Look for the pencil icon when hovering over editable fields."
+            },
+            "contextMenu": {
+                "title": "Context Menu",
+                "content": "<strong>Right-click</strong> any model card for a context menu with additional actions."
+            }
+        }
+    },
     "modelCard": {
         "actions": {
             "addToFavorites": "Add to favorites",

locales/es.json

@@ -40,6 +40,54 @@
             "tb": "TB"
         }
     },
+    "onboarding": {
+        "languageSelection": {
+            "title": "Bienvenido a LoRA Manager",
+            "skip": "Saltar",
+            "continue": "Continuar",
+            "changeFailed": "Error al cambiar el idioma: {message}"
+        },
+        "tutorial": {
+            "skipTutorial": "Saltar tutorial",
+            "back": "Atrás",
+            "next": "Siguiente",
+            "finish": "Finalizar"
+        },
+        "steps": {
+            "fetch": {
+                "title": "Obtener metadatos de modelos",
+                "content": "Haz clic en el botón <strong>Obtener</strong> para descargar metadatos y vistas previas de modelos desde Civitai."
+            },
+            "download": {
+                "title": "Descargar nuevos modelos",
+                "content": "Usa el botón <strong>Descargar</strong> para descargar modelos directamente desde URLs de Civitai."
+            },
+            "bulk": {
+                "title": "Operaciones masivas",
+                "content": "Entra en modo masivo haciendo clic en este botón o presionando <span class=\"onboarding-shortcut\">B</span>. Selecciona varios modelos y realiza operaciones por lotes. Usa <span class=\"onboarding-shortcut\">Ctrl+A</span> para seleccionar todos los modelos visibles."
+            },
+            "searchOptions": {
+                "title": "Opciones de búsqueda",
+                "content": "Haz clic en este botón para configurar en qué campos buscar: nombre de archivo, nombre del modelo, etiquetas o nombre del creador. Personaliza el alcance de tu búsqueda."
+            },
+            "filter": {
+                "title": "Filtrar modelos",
+                "content": "Utiliza los filtros para reducir los modelos por tipo de modelo base (SD1.5, SDXL, Flux, etc.) o por etiquetas específicas."
+            },
+            "breadcrumb": {
+                "title": "Navegación por rutas",
+                "content": "La navegación por rutas muestra tu ruta actual y permite una navegación rápida entre carpetas. Haz clic en cualquier nombre de carpeta para ir directamente allí."
+            },
+            "modelCards": {
+                "title": "Tarjetas de modelo",
+                "content": "<strong>Clic único</strong> en una tarjeta de modelo para ver información detallada y editar metadatos. Busca el icono de lápiz al pasar el ratón sobre campos editables."
+            },
+            "contextMenu": {
+                "title": "Menú contextual",
+                "content": "<strong>Clic derecho</strong> en cualquier tarjeta de modelo para ver un menú contextual con acciones adicionales."
+            }
+        }
+    },
     "modelCard": {
         "actions": {
             "addToFavorites": "Añadir a favoritos",

locales/fr.json

@@ -40,6 +40,54 @@
             "tb": "To"
         }
     },
+    "onboarding": {
+        "languageSelection": {
+            "title": "Bienvenue dans LoRA Manager",
+            "skip": "Passer",
+            "continue": "Continuer",
+            "changeFailed": "Échec du changement de langue : {message}"
+        },
+        "tutorial": {
+            "skipTutorial": "Passer le tutoriel",
+            "back": "Retour",
+            "next": "Suivant",
+            "finish": "Terminer"
+        },
+        "steps": {
+            "fetch": {
+                "title": "Récupérer les métadonnées des modèles",
+                "content": "Cliquez sur le bouton <strong>Récupérer</strong> pour télécharger les métadonnées et les images d'aperçu des modèles depuis Civitai."
+            },
+            "download": {
+                "title": "Télécharger de nouveaux modèles",
+                "content": "Utilisez le bouton <strong>Télécharger</strong> pour télécharger des modèles directement à partir des URLs Civitai."
+            },
+            "bulk": {
+                "title": "Opérations groupées",
+                "content": "Activez le mode groupé en cliquant sur ce bouton ou en appuyant sur <span class=\"onboarding-shortcut\">B</span>. Sélectionnez plusieurs modèles et effectuez des opérations par lot. Utilisez <span class=\"onboarding-shortcut\">Ctrl+A</span> pour sélectionner tous les modèles visibles."
+            },
+            "searchOptions": {
+                "title": "Options de recherche",
+                "content": "Cliquez sur ce bouton pour configurer les champs à rechercher : nom de fichier, nom du modèle, tags ou nom du créateur. Personnalisez la portée de votre recherche."
+            },
+            "filter": {
+                "title": "Filtrer les modèles",
+                "content": "Utilisez les filtres pour affiner les modèles par type de modèle de base (SD1.5, SDXL, Flux, etc.) ou par tags spécifiques."
+            },
+            "breadcrumb": {
+                "title": "Navigation par fil d'Ariane",
+                "content": "La navigation par fil d'Ariane affiche votre chemin actuel et permet une navigation rapide entre les dossiers. Cliquez sur le nom d'un dossier pour y accéder directement."
+            },
+            "modelCards": {
+                "title": "Cartes de modèles",
+                "content": "<strong>Cliquez une fois</strong> sur une carte de modèle pour afficher les informations détaillées et modifier les métadonnées. Cherchez l'icône crayon lors du survol des champs modifiables."
+            },
+            "contextMenu": {
+                "title": "Menu contextuel",
+                "content": "<strong>Clic droit</strong> sur une carte de modèle pour accéder à un menu contextuel avec des actions supplémentaires."
+            }
+        }
+    },
     "modelCard": {
         "actions": {
             "addToFavorites": "Ajouter aux favoris",

locales/ja.json

@@ -40,6 +40,54 @@
             "tb": "TB"
         }
     },
+    "onboarding": {
+        "languageSelection": {
+            "title": "LoRA Managerへようこそ",
+            "skip": "スキップ",
+            "continue": "続行",
+            "changeFailed": "言語の変更に失敗しました：{message}"
+        },
+        "tutorial": {
+            "skipTutorial": "チュートリアルをスキップ",
+            "back": "戻る",
+            "next": "次へ",
+            "finish": "完了"
+        },
+        "steps": {
+            "fetch": {
+                "title": "モデルメタデータの取得",
+                "content": "<strong>取得</strong>ボタンをクリックして、Civitaiからモデルのメタデータとプレビュー画像をダウンロードします。"
+            },
+            "download": {
+                "title": "新しいモデルのダウンロード",
+                "content": "<strong>ダウンロード</strong>ボタンを使って、CivitaiのURLから直接モデルをダウンロードできます。"
+            },
+            "bulk": {
+                "title": "一括操作",
+                "content": "このボタンをクリックするか、<span class=\"onboarding-shortcut\">B</span>キーを押して一括モードに入ります。複数のモデルを選択して一括操作が可能です。<span class=\"onboarding-shortcut\">Ctrl+A</span>で表示中のモデルをすべて選択できます。"
+            },
+            "searchOptions": {
+                "title": "検索オプション",
+                "content": "このボタンをクリックして、検索対象フィールド（ファイル名、モデル名、タグ、作成者名）を設定できます。検索範囲をカスタマイズしましょう。"
+            },
+            "filter": {
+                "title": "モデルのフィルタ",
+                "content": "フィルタを使って、ベースモデルタイプ（SD1.5、SDXL、Fluxなど）や特定のタグでモデルを絞り込めます。"
+            },
+            "breadcrumb": {
+                "title": "パンくずナビゲーション",
+                "content": "パンくずナビゲーションは現在のパスを表示し、フォルダ間を素早く移動できます。フォルダ名をクリックすると直接ジャンプできます。"
+            },
+            "modelCards": {
+                "title": "モデルカード",
+                "content": "<strong>モデルカードをクリック</strong>すると詳細情報の表示やメタデータの編集ができます。編集可能な項目はホバー時に鉛筆アイコンが表示されます。"
+            },
+            "contextMenu": {
+                "title": "コンテキストメニュー",
+                "content": "<strong>モデルカードを右クリック</strong>すると追加の操作ができるコンテキストメニューが表示されます。"
+            }
+        }
+    },
     "modelCard": {
         "actions": {
             "addToFavorites": "お気に入りに追加",

locales/ko.json

@@ -40,6 +40,54 @@
             "tb": "TB"
         }
     },
+    "onboarding": {
+        "languageSelection": {
+            "title": "LoRA Manager에 오신 것을 환영합니다",
+            "skip": "건너뛰기",
+            "continue": "계속",
+            "changeFailed": "언어 변경 실패: {message}"
+        },
+        "tutorial": {
+            "skipTutorial": "튜토리얼 건너뛰기",
+            "back": "뒤로",
+            "next": "다음",
+            "finish": "완료"
+        },
+        "steps": {
+            "fetch": {
+                "title": "모델 메타데이터 가져오기",
+                "content": "<strong>가져오기</strong> 버튼을 클릭하여 Civitai에서 모델 메타데이터와 미리보기 이미지를 다운로드하세요."
+            },
+            "download": {
+                "title": "새 모델 다운로드",
+                "content": "<strong>다운로드</strong> 버튼을 사용하여 Civitai URL에서 모델을 직접 다운로드하세요."
+            },
+            "bulk": {
+                "title": "일괄 작업",
+                "content": "이 버튼을 클릭하거나 <span class=\"onboarding-shortcut\">B</span> 키를 눌러 일괄 모드로 진입하세요. 여러 모델을 선택하여 일괄 작업을 수행할 수 있습니다. <span class=\"onboarding-shortcut\">Ctrl+A</span>로 모든 표시된 모델을 선택하세요."
+            },
+            "searchOptions": {
+                "title": "검색 옵션",
+                "content": "이 버튼을 클릭하여 검색할 필드를 설정하세요: 파일명, 모델명, 태그, 제작자명 등. 검색 범위를 자유롭게 지정할 수 있습니다."
+            },
+            "filter": {
+                "title": "모델 필터링",
+                "content": "필터를 사용하여 베이스 모델 유형(SD1.5, SDXL, Flux 등)이나 특정 태그로 모델을 좁혀보세요."
+            },
+            "breadcrumb": {
+                "title": "경로(브레드크럼) 내비게이션",
+                "content": "브레드크럼 내비게이션은 현재 경로를 보여주며 폴더 간 빠른 이동을 지원합니다. 폴더 이름을 클릭하면 해당 위치로 바로 이동합니다."
+            },
+            "modelCards": {
+                "title": "모델 카드",
+                "content": "<strong>한 번 클릭</strong>하면 모델 카드의 상세 정보와 메타데이터를 볼 수 있습니다. 편집 가능한 필드는 마우스를 올리면 연필 아이콘이 표시됩니다."
+            },
+            "contextMenu": {
+                "title": "컨텍스트 메뉴",
+                "content": "<strong>오른쪽 클릭</strong>으로 모델 카드의 추가 작업 메뉴를 사용할 수 있습니다."
+            }
+        }
+    },
     "modelCard": {
         "actions": {
             "addToFavorites": "즐겨찾기에 추가",

locales/ru.json

@@ -40,6 +40,54 @@
             "tb": "ТБ"
         }
     },
+    "onboarding": {
+        "languageSelection": {
+            "title": "Добро пожаловать в LoRA Manager",
+            "skip": "Пропустить",
+            "continue": "Продолжить",
+            "changeFailed": "Не удалось изменить язык: {message}"
+        },
+        "tutorial": {
+            "skipTutorial": "Пропустить обучение",
+            "back": "Назад",
+            "next": "Далее",
+            "finish": "Завершить"
+        },
+        "steps": {
+            "fetch": {
+                "title": "Получить метаданные моделей",
+                "content": "Нажмите кнопку <strong>Получить</strong>, чтобы загрузить метаданные моделей и изображения превью с Civitai."
+            },
+            "download": {
+                "title": "Загрузить новые модели",
+                "content": "Используйте кнопку <strong>Загрузить</strong> для скачивания моделей напрямую по URL Civitai."
+            },
+            "bulk": {
+                "title": "Массовые операции",
+                "content": "Войдите в массовый режим, нажав эту кнопку или клавишу <span class=\"onboarding-shortcut\">B</span>. Выберите несколько моделей и выполните пакетные операции. Используйте <span class=\"onboarding-shortcut\">Ctrl+A</span> для выбора всех видимых моделей."
+            },
+            "searchOptions": {
+                "title": "Опции поиска",
+                "content": "Нажмите эту кнопку, чтобы настроить поля для поиска: имя файла, название модели, теги или имя автора. Настройте область поиска."
+            },
+            "filter": {
+                "title": "Фильтрация моделей",
+                "content": "Используйте фильтры для сужения списка моделей по типу базовой модели (SD1.5, SDXL, Flux и др.) или по конкретным тегам."
+            },
+            "breadcrumb": {
+                "title": "Навигация по папкам",
+                "content": "Навигация по папкам показывает ваш текущий путь и позволяет быстро переходить между папками. Нажмите на имя папки для перехода."
+            },
+            "modelCards": {
+                "title": "Карточки моделей",
+                "content": "<strong>Одиночный клик</strong> по карточке модели откроет подробную информацию и позволит редактировать метаданные. Ищите значок карандаша при наведении на редактируемые поля."
+            },
+            "contextMenu": {
+                "title": "Контекстное меню",
+                "content": "<strong>Правый клик</strong> по карточке модели откроет контекстное меню с дополнительными действиями."
+            }
+        }
+    },
     "modelCard": {
         "actions": {
             "addToFavorites": "Добавить в избранное",

locales/zh-CN.json

@@ -40,6 +40,54 @@
             "tb": "TB"
         }
     },
+    "onboarding": {
+        "languageSelection": {
+            "title": "欢迎使用 LoRA 管理器",
+            "skip": "跳过",
+            "continue": "继续",
+            "changeFailed": "切换语言失败：{message}"
+        },
+        "tutorial": {
+            "skipTutorial": "跳过教程",
+            "back": "返回",
+            "next": "下一步",
+            "finish": "完成"
+        },
+        "steps": {
+            "fetch": {
+                "title": "获取模型元数据",
+                "content": "点击 <strong>获取</strong> 按钮，从 Civitai 下载模型元数据和预览图片。"
+            },
+            "download": {
+                "title": "下载新模型",
+                "content": "使用 <strong>下载</strong> 按钮，可直接通过 Civitai URL 下载模型。"
+            },
+            "bulk": {
+                "title": "批量操作",
+                "content": "点击此按钮或按 <span class=\"onboarding-shortcut\">B</span> 进入批量模式。可多选模型并进行批量操作。使用 <span class=\"onboarding-shortcut\">Ctrl+A</span> 全选所有可见模型。"
+            },
+            "searchOptions": {
+                "title": "搜索选项",
+                "content": "点击此按钮可配置搜索字段：文件名、模型名称、标签或创作者名称。自定义你的搜索范围。"
+            },
+            "filter": {
+                "title": "筛选模型",
+                "content": "使用筛选器按基础模型类型（SD1.5、SDXL、Flux 等）或特定标签缩小模型范围。"
+            },
+            "breadcrumb": {
+                "title": "路径导航",
+                "content": "路径导航显示你当前所在位置，并可快速在文件夹间跳转。点击任意文件夹名称即可直接跳转。"
+            },
+            "modelCards": {
+                "title": "模型卡片",
+                "content": "<strong>单击</strong>模型卡片可查看详细信息并编辑元数据。悬停在可编辑字段时会显示铅笔图标。"
+            },
+            "contextMenu": {
+                "title": "右键菜单",
+                "content": "<strong>右键点击</strong>任意模型卡片可打开更多操作菜单。"
+            }
+        }
+    },
     "modelCard": {
         "actions": {
             "addToFavorites": "添加到收藏",

locales/zh-TW.json

@@ -40,6 +40,54 @@
             "tb": "TB"
         }
     },
+    "onboarding": {
+        "languageSelection": {
+            "title": "歡迎使用 LoRA 管理器",
+            "skip": "跳過",
+            "continue": "繼續",
+            "changeFailed": "切換語言失敗：{message}"
+        },
+        "tutorial": {
+            "skipTutorial": "跳過教學",
+            "back": "返回",
+            "next": "下一步",
+            "finish": "完成"
+        },
+        "steps": {
+            "fetch": {
+                "title": "取得模型 metadata",
+                "content": "點擊 <strong>取得</strong> 按鈕，從 Civitai 下載模型 metadata 與預覽圖片。"
+            },
+            "download": {
+                "title": "下載新模型",
+                "content": "使用 <strong>下載</strong> 按鈕，直接從 Civitai 網址下載模型。"
+            },
+            "bulk": {
+                "title": "批次操作",
+                "content": "點擊此按鈕或按下 <span class=\"onboarding-shortcut\">B</span> 進入批次模式。可選取多個模型並執行批量操作。使用 <span class=\"onboarding-shortcut\">Ctrl+A</span> 選取所有可見模型。"
+            },
+            "searchOptions": {
+                "title": "搜尋選項",
+                "content": "點擊此按鈕可設定搜尋欄位：檔案名稱、模型名稱、標籤或創作者名稱。自訂搜尋範圍。"
+            },
+            "filter": {
+                "title": "篩選模型",
+                "content": "使用篩選器依基礎模型類型（SD1.5、SDXL、Flux 等）或特定標籤縮小模型範圍。"
+            },
+            "breadcrumb": {
+                "title": "麵包屑導覽",
+                "content": "麵包屑導覽顯示目前路徑，並可快速在資料夾間切換。點擊任一資料夾名稱即可直接跳轉。"
+            },
+            "modelCards": {
+                "title": "模型卡片",
+                "content": "<strong>單擊</strong>模型卡片可檢視詳細資訊並編輯 metadata。滑鼠懸停於可編輯欄位時會顯示鉛筆圖示。"
+            },
+            "contextMenu": {
+                "title": "右鍵選單",
+                "content": "<strong>右鍵點擊</strong>任一模型卡片可開啟更多操作選單。"
+            }
+        }
+    },
     "modelCard": {
         "actions": {
             "addToFavorites": "加入收藏",

static/js/managers/OnboardingManager.js

@@ -1,5 +1,7 @@
 import { getStorageItem, setStorageItem } from '../utils/storageHelpers.js';
 import { state } from '../state/index.js';
+import { translate } from '../utils/i18nHelpers.js';
+import { showToast } from '../utils/uiHelpers.js';
 
 export class OnboardingManager {
     constructor() {
@@ -28,51 +30,51 @@ export class OnboardingManager {
         this.steps = [
             {
                 target: '.controls .action-buttons [data-action="fetch"]',
-                title: 'Fetch Models Metadata',
-                content: 'Click the <strong>Fetch</strong> button to download model metadata and preview images from Civitai.',
+                title: () => translate('onboarding.steps.fetch.title', {}, 'Fetch Models Metadata'),
+                content: () => translate('onboarding.steps.fetch.content', {}, 'Click the <strong>Fetch</strong> button to download model metadata and preview images from Civitai.'),
                 position: 'bottom'
             },
             {
                 target: '.controls .action-buttons [data-action="download"]',
-                title: 'Download New Models',
-                content: 'Use the <strong>Download</strong> button to download models directly from Civitai URLs.',
+                title: () => translate('onboarding.steps.download.title', {}, 'Download New Models'),
+                content: () => translate('onboarding.steps.download.content', {}, 'Use the <strong>Download</strong> button to download models directly from Civitai URLs.'),
                 position: 'bottom'
             },
             {
                 target: '.controls .action-buttons [data-action="bulk"]',
-                title: 'Bulk Operations',
-                content: 'Enter bulk mode by clicking this button or pressing <span class="onboarding-shortcut">B</span>. Select multiple models and perform batch operations. Use <span class="onboarding-shortcut">Ctrl+A</span> to select all visible models.',
+                title: () => translate('onboarding.steps.bulk.title', {}, 'Bulk Operations'),
+                content: () => translate('onboarding.steps.bulk.content', {}, 'Enter bulk mode by clicking this button or pressing <span class="onboarding-shortcut">B</span>. Select multiple models and perform batch operations. Use <span class="onboarding-shortcut">Ctrl+A</span> to select all visible models.'),
                 position: 'bottom'
             },
             {
                 target: '#searchOptionsToggle',
-                title: 'Search Options',
-                content: 'Click this button to configure what fields to search in: filename, model name, tags, or creator name. Customize your search scope.',
+                title: () => translate('onboarding.steps.searchOptions.title', {}, 'Search Options'),
+                content: () => translate('onboarding.steps.searchOptions.content', {}, 'Click this button to configure what fields to search in: filename, model name, tags, or creator name. Customize your search scope.'),
                 position: 'bottom'
             },
             {
                 target: '#filterButton',
-                title: 'Filter Models',
-                content: 'Use filters to narrow down models by base model type (SD1.5, SDXL, Flux, etc.) or by specific tags.',
+                title: () => translate('onboarding.steps.filter.title', {}, 'Filter Models'),
+                content: () => translate('onboarding.steps.filter.content', {}, 'Use filters to narrow down models by base model type (SD1.5, SDXL, Flux, etc.) or by specific tags.'),
                 position: 'bottom'
             },
             {
                 target: '#breadcrumbContainer',
-                title: 'Breadcrumb Navigation',
-                content: 'The breadcrumb navigation shows your current path and allows quick navigation between folders. Click any folder name to jump directly there.',
+                title: () => translate('onboarding.steps.breadcrumb.title', {}, 'Breadcrumb Navigation'),
+                content: () => translate('onboarding.steps.breadcrumb.content', {}, 'The breadcrumb navigation shows your current path and allows quick navigation between folders. Click any folder name to jump directly there.'),
                 position: 'bottom'
             },
             {
                 target: '.card-grid',
-                title: 'Model Cards',
-                content: '<strong>Single-click</strong> a model card to view detailed information and edit metadata. Look for the pencil icon when hovering over editable fields.',
+                title: () => translate('onboarding.steps.modelCards.title', {}, 'Model Cards'),
+                content: () => translate('onboarding.steps.modelCards.content', {}, '<strong>Single-click</strong> a model card to view detailed information and edit metadata. Look for the pencil icon when hovering over editable fields.'),
                 position: 'top',
                 customPosition: { top: '20%', left: '50%' }
             },
             {
                 target: '.card-grid',
-                title: 'Context Menu',
-                content: '<strong>Right-click</strong> any model card for a context menu with additional actions.',
+                title: () => translate('onboarding.steps.contextMenu.title', {}, 'Context Menu'),
+                content: () => translate('onboarding.steps.contextMenu.content', {}, '<strong>Right-click</strong> any model card for a context menu with additional actions.'),
                 position: 'top',
                 customPosition: { top: '20%', left: '50%' }
             }
@@ -112,7 +114,7 @@ export class OnboardingManager {
             modal.className = 'language-selection-modal';
             modal.innerHTML = `
                 <div class="language-selection-content">
-                    <h2>Welcome to LoRA Manager</h2>
+                    <h2>${translate('onboarding.languageSelection.title', {}, 'Welcome to LoRA Manager')}</h2>
                     <p>Choose Your Language / 选择语言 / 言語を選択</p>
                     <div class="language-grid">
                         ${this.languages.map(lang => `
@@ -125,8 +127,8 @@ export class OnboardingManager {
                         `).join('')}
                     </div>
                     <div class="language-actions">
-                        <button class="onboarding-btn" id="skipLanguageBtn">Skip</button>
-                        <button class="onboarding-btn primary" id="continueLanguageBtn">Continue</button>
+                        <button class="onboarding-btn" id="skipLanguageBtn">${translate('onboarding.languageSelection.skip', {}, 'Skip')}</button>
+                        <button class="onboarding-btn primary" id="continueLanguageBtn">${translate('onboarding.languageSelection.continue', {}, 'Continue')}</button>
                     </div>
                 </div>
             `;
@@ -201,6 +203,7 @@ export class OnboardingManager {
             }
         } catch (error) {
             console.error('Failed to change language:', error);
+            showToast('onboarding.languageSelection.changeFailed', { message: error.message }, 'error');
         }
     }
 
@@ -266,17 +269,17 @@ export class OnboardingManager {
 
         // Update popup content
         this.popup.innerHTML = `
-            <h3>${step.title}</h3>
-            <p>${step.content}</p>
+            <h3>${typeof step.title === 'function' ? step.title() : step.title}</h3>
+            <p>${typeof step.content === 'function' ? step.content() : step.content}</p>
             <div class="onboarding-controls">
                 <div class="onboarding-progress">
                     <span>${stepIndex + 1} / ${this.steps.length}</span>
                 </div>
                 <div class="onboarding-actions">
-                    <button class="onboarding-btn" onclick="onboardingManager.skip()">Skip Tutorial</button>
-                    ${stepIndex > 0 ? '<button class="onboarding-btn" onclick="onboardingManager.previousStep()">Back</button>' : ''}
+                    <button class="onboarding-btn" onclick="onboardingManager.skip()">${translate('onboarding.tutorial.skipTutorial', {}, 'Skip Tutorial')}</button>
+                    ${stepIndex > 0 ? `<button class="onboarding-btn" onclick="onboardingManager.previousStep()">${translate('onboarding.tutorial.back', {}, 'Back')}</button>` : ''}
                     <button class="onboarding-btn primary" onclick="onboardingManager.nextStep()">
-                        ${stepIndex === this.steps.length - 1 ? 'Finish' : 'Next'}
+                        ${stepIndex === this.steps.length - 1 ? translate('onboarding.tutorial.finish', {}, 'Finish') : translate('onboarding.tutorial.next', {}, 'Next')}
                     </button>
                 </div>
             </div>

templates/components/folder_sidebar.html

@@ -12,7 +12,7 @@
             <button class="sidebar-action-btn" id="sidebarCollapseAll" title="{{ t('sidebar.collapseAll') }}">
                 <i class="fas fa-compress-alt"></i>
             </button>
-            <button class="sidebar-action-btn" id="sidebarPinToggle" title="{{ t('sidebar.pinToggle') }}">
+            <button class="sidebar-action-btn" id="sidebarPinToggle" title="{{ t('sidebar.unpinSidebar') }}">
                 <i class="fas fa-thumbtack"></i>
             </button>
         </div>