From 9352e96d9cd3618c00306bb8462d108dfca1eee6 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 9 Jan 2025 14:22:27 +0100
Subject: [PATCH] feat: add i18n to history import and export

---
 src/components/ExportHistoryModal.vue |  6 +++---
 src/components/HistoryPage.vue        |  4 ++--
 src/components/ImportHistoryModal.vue | 16 +++++++++++-----
 src/locales/en.json                   | 12 ++++++++++--
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/ExportHistoryModal.vue b/src/components/ExportHistoryModal.vue
index ee0c6fea..4ce070a4 100644
--- a/src/components/ExportHistoryModal.vue
+++ b/src/components/ExportHistoryModal.vue
@@ -1,10 +1,10 @@
 <template>
     <ModalComponent>
         <div class="min-w-max flex flex-col">
-            <h2 class="mb-4 text-center text-xl font-bold">Export History</h2>
+            <h2 v-t="'actions.export_history'" class="mb-4 text-center text-xl font-bold" />
             <form>
                 <div>
-                    <label class="mr-2" for="export-format">Export as:</label>
+                    <label v-t="'actions.file_format'" class="mr-2" for="export-format" />
                     <select id="export-format" v-model="exportAs" class="select">
                         <option
                             v-for="option in exportOptions"
@@ -27,7 +27,7 @@
                     </label>
                 </div>
             </form>
-            <button class="btn mt-4" @click="handleExport">Export</button>
+            <button class="btn mt-4" @click="handleExport" v-text="$t('actions.export_history')" />
         </div>
     </ModalComponent>
 </template>
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 2cf9795b..c07b3a7d 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -5,8 +5,8 @@
         <div class="flex flex-col gap-2 md:flex-row md:items-center">
             <button v-t="'actions.clear_history'" class="btn" @click="clearHistory" />
 
-            <button v-t="'actions.export_to_json'" class="btn" @click="showExportModal = !showExportModal" />
-            <button v-t="'actions.import_from_json'" class="btn" @click="showImportModal = !showImportModal" />
+            <button v-t="'actions.export_history'" class="btn" @click="showExportModal = !showExportModal" />
+            <button v-t="'actions.import_history'" class="btn" @click="showImportModal = !showImportModal" />
         </div>
 
         <div class="flex items-center gap-1">
diff --git a/src/components/ImportHistoryModal.vue b/src/components/ImportHistoryModal.vue
index 853d8ecc..7f6290f9 100644
--- a/src/components/ImportHistoryModal.vue
+++ b/src/components/ImportHistoryModal.vue
@@ -1,28 +1,34 @@
 <template>
     <ModalComponent>
         <div class="text-center">
-            <h2 class="mb-4 text-center text-xl font-bold">Import History</h2>
+            <h2 v-t="'actions.import_history'" class="mb-4 text-center text-xl font-bold" />
             <form>
                 <br />
                 <div>
                     <input ref="fileSelector" class="btn mb-2 ml-2" type="file" @change="fileChange" />
                 </div>
                 <div>
-                    <strong v-text="`Found ${itemsLength} items`" />
+                    <strong
+                        ><i18n-t keypath="info.found_n_items">{{ itemsLength }}</i18n-t></strong
+                    >
                 </div>
                 <div>
                     <strong class="flex items-center justify-center gap-2">
-                        Override: <input v-model="override" class="checkbox" type="checkbox" />
+                        <span v-t="'actions.override'" />: <input v-model="override" class="checkbox" type="checkbox" />
                     </strong>
                 </div>
                 <br />
                 <div>
                     <progress :value="index" :max="itemsLength" />
-                    <div v-text="`Success: ${success} Error: ${error} Skipped: ${skipped}`" />
+                    <div
+                        v-text="
+                            `${$t('info.success')}: ${success} ${$t('info.error')}: ${error} ${$t('info.skipped')}: ${skipped}`
+                        "
+                    />
                 </div>
                 <br />
                 <div>
-                    <a class="btn w-auto" @click="handleImport">Import</a>
+                    <a class="btn w-auto" @click="handleImport" v-text="$t('actions.import_history')" />
                 </div>
             </form>
         </div>
diff --git a/src/locales/en.json b/src/locales/en.json
index 3fa0fff6..5522a163 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -163,7 +163,11 @@
         "creator_liked": "Creator liked",
         "playback_speed": "Playback speed",
         "invalid_input": "Invalid input",
-        "prefer_hls": "Prefer HLS over DASH"
+        "prefer_hls": "Prefer HLS over DASH",
+        "export_history": "Export history",
+        "import_history": "Import history",
+        "file_format": "File format",
+        "override": "Override"
     },
     "comment": {
         "pinned_by": "Pinned by {author}",
@@ -232,6 +236,10 @@
         "weeks": "{amount} week(s)",
         "months": "{amount} month(s)",
         "register_note": "Register an account for this Piped instance. This will allow you to sync your subscriptions and playlists with your account, so they're stored on the server side. You can use all features without an account, but all data will be stored in your browser's local cache. Please make sure you do NOT use an email address as your username and choose a secure password that you do not use elsewhere.",
-        "login_note": "Log in with an account created on this instance."
+        "login_note": "Log in with an account created on this instance.",
+        "found_n_items": "Found {0} items",
+        "success": "Success",
+        "error": "Error",
+        "skipped": "Skipped"
     }
 }