wip i18n editor

can be accessed with:
app.appRoute("lzedit")

src/main/base/browserwindow.ts

@@ -120,6 +120,11 @@ export class BrowserWindow {
         "components/settings-plugins-github",
       ],
       appRoutes: [
+        {
+          page: "lzedit",
+          component: `<i18n-editor></i18n-editor>`,
+          condition: "$root.page == 'lzedit'",
+        },
         {
           page: "library-recentlyadded",
           component: `<cider-recentlyadded></cider-recentlyadded>`,

src/renderer/less/pages.less

@@ -1480,6 +1480,22 @@
   }
 }
 
+.i18n-page {
+  textarea {
+    background: black;
+    color: #eee;
+    font-weight: bold;
+    font-size: 1em;
+    font-family: system-ui, 'Pretendard Variable';
+    padding: 0.5em;
+  }
+
+  .selectCol {
+    display: flex;
+    align-items: center;
+  }
+}
+
 // AudioLabs page
 .audiolabs-page {
   padding: 0px;

src/renderer/main/app.js

@@ -10,6 +10,7 @@ import { MusicKitTools } from "./musickittools.js";
 import { spawnMica } from "./mica.js";
 import { svgIcon } from "./components/svg-icon.js";
 import { sidebarLibraryItem } from "./components/sidebar-library-item.js";
+import { i18nEditor } from "./components/i18n-editor.js";
 
 // Define window objects
 window.app = app;

src/renderer/main/components/i18n-editor.js

@@ -0,0 +1,83 @@
+import { html } from "../html.js";
+
+export const i18nEditor = Vue.component("i18n-editor", {
+  // language=HTML
+  template: html`
+    <div class="content-inner i18n-page">
+      <div class="row nopadding">
+        <div class="col nopadding">
+          <h1>i18n Editor</h1>
+        </div>
+        <div class="col-auto nopadding selectCol">
+          <select class="md-select" @change="$root.setLz('');$root.setLzManual()" v-model="$root.cfg.general.language">
+            <optgroup :label="index" v-for="(categories, index) in getLanguages()">
+              <option v-for="lang in categories" :value="lang.code">
+                {{lang.nameNative}}
+                ({{lang.nameEnglish }})
+              </option>
+            </optgroup>
+          </select>
+          <button class="md-btn" @click="exportLz">Export</button>
+        </div>
+      </div>
+      <hr>
+      <div class="md-option-container">
+        <template v-for="(val, key) in baseLz">
+          <div class="md-option-line" v-if="$root.lz[key]">
+            <div class="md-option-segment">
+              {{ key }}
+            </div>
+            <div class="md-option-segment">
+              <template v-if='typeof $root.lz[key] == "object"'>
+                <div v-for='(variant, vkey) in $root.lz[key]'>
+                  {{variant}}
+                  <input type="text" v-model="$root.lz[key][vkey]" />
+                </div>
+              </template>
+              <textarea type="text" v-model="$root.lz[key]" v-else></textarea>
+            </div>
+          </div>
+          <div class="md-option-line" v-else>
+            <div class="md-option-segment">
+              <b>{{ key }}</b>
+            </div>
+            <div class="md-option-segment">
+              <textarea type="text" v-model="$root.lz[key]" :placeholder="val"></textarea>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  `,
+  data() {
+    return {
+      listing: ipcRenderer.sendSync("get-i18n-listing"),
+      baseLz: ipcRenderer.sendSync("get-i18n", "en_US")
+    }
+  },
+  methods: {
+    exportLz() {
+      bootbox.alert(`<textarea spellcheck='false' style="width:100%;height: 300px;">${JSON.stringify(app.lz, true, ' ')}</textarea>`)
+      notyf.success("Copied to clipboard");
+      navigator.clipboard.writeText(JSON.stringify(app.lz, true, ' ')).then((r) => console.debug("Copied to clipboard."));
+    },
+    getLanguages: function () {
+      let langs = this.$root.lzListing
+      let categories = {
+        "main": [],
+        "fun": [],
+        "unsorted": []
+      }
+      // sort by category if category is undefined or empty put it in "unsorted"
+      for (let i = 0; i < langs.length; i++) {
+        if (langs[i].category === undefined || langs[i].category === "") {
+          categories.unsorted.push(langs[i])
+        } else {
+          categories[langs[i].category].push(langs[i])
+        }
+      }
+      // return
+      return categories
+    },
+  }
+});