feat: improve the translations of theme items (sections, categories) (#168)

* feat: translate the name of the section

* feat: translate the name of the categories

Author: did

app/frontend/editor/components/theme-section-list/category.vue

@@ -0,0 +1,47 @@
+<template>
+  <uikit-accordion
+    :key="index"
+    headerClass="px-3 py-3 mb-3 bg-editor-primary text-white rounded-sm"
+  >
+    <div slot="header" class="flex items-center">
+      <div class="capitalize-first">{{ name }}</div>
+      <div class="ml-2 px-3 bg-white bg-opacity-25 text-xs rounded-full">
+        {{ category.children.length }}
+      </div>
+    </div>
+    <div class="pt-1">
+      <list-item
+        v-for="section in category.children"
+        :key="section.id"
+        :section="section"
+        :insertAfter="insertAfter"
+      />
+
+      <div
+        class="text-center pt-2 pb-6"
+        v-if="category.children.length === 0"
+      >
+        {{ $t('themeSectionList.emptyCategory') }}
+      </div>
+    </div>
+  </uikit-accordion>
+</template>
+
+<script>
+import ListItem from './list-item.vue'
+
+export default {
+  name: 'ThemeSectionListCategory',
+  components: { ListItem },
+  props: {
+    index: { type: Number, required: true },
+    category: { type: Object, required: true },
+    insertAfter: { type: String },
+  },
+  computed: {
+    name() {
+      return this.$st(`${this.currentI18nScope}.categories.${this.category.id}.name`) ?? this.category.name
+    },
+  },
+}
+</script>

app/frontend/editor/components/theme-section-list/index.vue

@@ -1,47 +1,23 @@
 <template>
   <div>
-    <uikit-accordion
+    <category
       v-for="(category, index) in categories"
-      :key="index"
-      headerClass="px-3 py-3 mb-3 bg-editor-primary text-white rounded-sm"
-    >
-      <div slot="header" class="flex items-center">
-        <div class="capitalize-first">{{ category.name }}</div>
-        <div class="ml-2 px-3 bg-white bg-opacity-25 text-xs rounded-full">
-          {{ category.children.length }}
-        </div>
-      </div>
-      <div class="pt-1">
-        <list-item
-          v-for="section in category.children"
-          :key="section.id"
-          :section="section"
-          :insertAfter="insertAfter"
-        />
-
-        <div
-          class="text-center pt-2 pb-6"
-          v-if="category.children.length === 0"
-        >
-          {{ $t('themeSectionList.emptyCategory') }}
-        </div>
-      </div>
-    </uikit-accordion>
+      :index="index"
+      :category="category"
+      :insert-after="insertAfter"
+    />
   </div>
 </template>
 
 <script>
-import ListItem from './list-item.vue'
+import Category from './category.vue'
 
 export default {
   name: 'ThemeSectionList',
-  components: { ListItem },
+  components: { Category },
   props: {
     insertAfter: { type: String },
   },
-  data() {
-    return { activeCategory: null }
-  },
   computed: {
     categories() {
       return this.services.theme.buildCategories(this.currentTheme)

app/frontend/editor/components/theme-section-list/list-item.vue

@@ -30,7 +30,7 @@
     <div
       class="flex items-center px-2 bg-editor-primary bg-opacity-5 py-4 w-full font-bold text-sm"
     >
-      <p class="capitalize-first">{{ section.name }}</p>
+      <p class="capitalize-first">{{ name }}</p>
     </div>
   </div>
 </template>
@@ -48,6 +48,13 @@ export default {
     return { hovered: false, isImageLoaded: false, isImageNotFound: false }
   },
   computed: {
+    name() {
+      return (
+        this.$st(
+          `${this.currentI18nScope}.sections.${this.section.id}.name`,
+        ) || this.section.name
+      )
+    },
     hasScreenshot() {
       return this.section.screenshotPath
     },

app/frontend/editor/services/theme.js

@@ -1,5 +1,6 @@
 export const buildCategories = (theme) => {
   return theme.sectionCategories.map((category) => ({
+    id: category.id,
     name: category.name,
     children: theme.sections
       .filter((section) => section.category == category.id)