Add more missing translation keys

satisfactorymodding · Jul 4, 2024 · 9523c85 · 9523c85
1 parent 9897fa2
commit 9523c85
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 45 deletions.
diff --git a/frontend/src/lib/components/left-bar/Settings.svelte b/frontend/src/lib/components/left-bar/Settings.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { mdiBug, mdiCheck, mdiCheckboxBlankOutline, mdiCheckboxMarkedOutline, mdiChevronRight, mdiClipboard, mdiCog, mdiDownload, mdiFolderEdit, mdiLanConnect, mdiTune } from '@mdi/js';
   import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
+  import { getTranslate } from '@tolgee/svelte';
   import { getContextClient } from '@urql/svelte';
 
   import SvgIcon from '$lib/components/SVGIcon.svelte';
@@ -9,12 +10,13 @@
   import { type PopupSettings, getModalStore, popup } from '$lib/skeletonExtensions';
   import { lockfileMods, manifestMods } from '$lib/store/ficsitCLIStore';
   import { debug, konami, language, launchButton, offline, queueAutoStart, startView, updateCheckMode, version } from '$lib/store/settingsStore';
-  import type { LaunchButtonType, ViewType } from '$lib/wailsTypesExtensions';
   import { GenerateDebugInfo } from '$wailsjs/go/app/app';
   import { OfflineGetMod } from '$wailsjs/go/ficsitcli/ficsitCLI';
 
   const modalStore = getModalStore();
 
+  const { t } = getTranslate();
+
   const settingsMenu = {
     event: 'click',
     target: 'settings-menu',
@@ -35,14 +37,14 @@
     closeQuery: '[data-popup="start-view-menu"] .listbox-item',
   } satisfies PopupSettings;
 
-  let views: { id: ViewType, name: string }[] = [
+  $: views = [
     {
       id: 'compact',
-      name: 'Compact',
+      name: $t('settings.start-view.compact', 'Compact'),
     },
     {
       id: 'expanded',
-      name: 'Expanded',
+      name: $t('settings.start-view.expanded', 'Expanded'),
     },
   ];
 
@@ -56,18 +58,18 @@
     closeQuery: '[data-popup="update-check-mode-menu"] .listbox-item',
   } satisfies PopupSettings;
 
-  let updateCheckModes: { id: 'launch'|'exit'|'ask', name: string }[] = [
+  $: updateCheckModes = [
     {
       id: 'launch',
-      name: 'On start',
+      name: $t('settings.update-check.on-start', 'On start'),
     },
     {
       id: 'exit',
-      name: 'On exit',
+      name: $t('settings.update-check.on-exit', 'On exit'),
     },
     {
       id: 'ask',
-      name: 'Ask when found',
+      name: $t('settings.update-check.ask', 'Ask when found'),
     },
   ];
 
@@ -81,14 +83,14 @@
     closeQuery: '[data-popup="queue-mode-menu"] .listbox-item',
   } satisfies PopupSettings;
 
-  let queueModes: { id: boolean, name: string }[] = [
+  $: queueModes = [
     {
       id: true,
-      name: 'Start immediately',
+      name: $t('settings.queue.start-immediately', 'Start immediately'),
     },
     {
       id: false,
-      name: 'Start manually',
+      name: $t('settings.queue.start-manually', 'Start manually'),
     },
   ];
 
@@ -102,18 +104,18 @@
     closeQuery: '[data-popup="launch-button-menu"] .listbox-item',
   } satisfies PopupSettings;
 
-  let launchButtons: { id: LaunchButtonType, name: string }[] = [
+  $: launchButtons = [
     {
       id: 'normal',
-      name: 'Normal',
+      name: $t('settings.launch-button.normal', 'Normal'),
     },
     {
       id: 'cat',
-      name: 'Nyan',
+      name: $t('settings.launch-button.cat', 'Nyan'),
     },
     {
       id: 'button',
-      name: 'Launch Button',
+      name: $t('settings.launch-button.button', 'Button'),
     },
   ];
 
@@ -337,7 +339,7 @@
     <ul class="menu">
       <li class="section-header">
         <span class="h-5 w-5"><SvgIcon class="h-full w-full" icon={mdiBug}/></span>
-        <span class="flex-auto">Debug</span>
+        <span class="flex-auto"><T defaultValue="Debug" keyName="settings.debug"/></span>
       </li>
       <hr class="divider" />
       <li>

diff --git a/frontend/src/lib/components/mod-details/ModDetails.svelte b/frontend/src/lib/components/mod-details/ModDetails.svelte
@@ -9,7 +9,7 @@
 
   import Markdown from '$lib/components/Markdown.svelte';
   import SvgIcon from '$lib/components/SVGIcon.svelte';
-  import T from '$lib/components/T.svelte';
+  import T, { translationElementPart } from '$lib/components/T.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
   import ModChangelog from '$lib/components/modals/ModChangelog.svelte';
   import { CompatibilityState, GetModDetailsDocument } from '$lib/generated';
@@ -244,8 +244,23 @@
 
       <div use:popup={authorsMenu}>
         <button class="btn px-4 h-10 text-sm w-full bg-secondary-600">
-          <span class="whitespace-break-spaces">Contributors <span class="text-primary-600">
-            (<span class:animate-pulse={!mod} class:placeholder={!mod}>{mod ? (mod.authors.length ?? 0) : '    '}</span>)</span></span>
+          <span class="whitespace-break-spaces">
+            <T
+              defaultValue={'Contributors <1>({authors})</1>'}
+              keyName="mod-details.contributors"
+              params={{
+                authors: mod?.authors.length ?? 0,
+              }}
+              parts={[
+                translationElementPart('span', {
+                  class: [
+                    'text-primary-600',
+                    mod ? '' : 'animate-pulse placeholder',
+                  ].join(' '),
+                }),
+              ]}
+            />
+          </span>
           <SvgIcon
             class="h-5 w-5"
             icon={mdiChevronDown}/>
@@ -279,7 +294,7 @@
 
       <div>
         <span>Mod info:</span><br/>
-        <ModDetailsEntry label="Size" loading={!mod}>{size ?? ''}</ModDetailsEntry>
+        <ModDetailsEntry label={$t('mod-details.size', 'Size')} loading={!mod}>{size ?? ''}</ModDetailsEntry>
         {#if (!mod || !('offline' in mod)) && !$offline}
           <ModDetailsEntry label={$t('mod-details.created', 'Created')} loading={!mod}>{mod ? new Date(mod.created_at).toLocaleDateString() : ''}</ModDetailsEntry>
           <ModDetailsEntry label={$t('mod-details.updated', 'Updated')} loading={!mod}>{mod ? new Date(mod.last_version_date).toLocaleString() : ''}</ModDetailsEntry>

diff --git a/frontend/src/lib/components/mods-list/ModsListFilters.svelte b/frontend/src/lib/components/mods-list/ModsListFilters.svelte
@@ -1,14 +1,41 @@
 <script lang="ts">
   import { mdiClose, mdiFilter, mdiSort } from '@mdi/js';
+  import { getTranslate } from '@tolgee/svelte';
 
   import SvgIcon from '$lib/components/SVGIcon.svelte';
   import Select from '$lib/components/Select.svelte';
-  import { filter, filterOptions, order, orderByOptions, search } from '$lib/store/modFiltersStore';
+  import { type FilterField, type OrderByField, filter, filterOptions, order, orderByOptions, search } from '$lib/store/modFiltersStore';
+
+  const { t } = getTranslate();
+
+  $: orderByNames = {
+    name: $t('mods-list-filter.order-by.name', 'Name'),
+    'last-updated': $t('mods-list-filter.order-by.last-updated', 'Last updated'),
+    popularity: $t('mods-list-filter.order-by.popularity', 'Popularity'),
+    hotness: $t('mods-list-filter.order-by.hotness', 'Hotness'),
+    views: $t('mods-list-filter.order-by.views', 'Views'),
+    downloads: $t('mods-list-filter.order-by.downloads', 'Downloads'),
+  } as Record<OrderByField, string>;
+
+  $: filterNames = {
+    all: $t('mods-list-filter.filter.all', 'All mods'),
+    compatible: $t('mods-list-filter.filter.compatible', 'Compatible'),
+    favorite: $t('mods-list-filter.filter.favorite', 'Favorite'),
+    queued: $t('mods-list-filter.filter.queued', 'Queued'),
+    installed: $t('mods-list-filter.filter.installed', 'Installed'),
+    dependency: $t('mods-list-filter.filter.dependency', 'Dependency'),
+    'not-installed': $t('mods-list-filter.filter.not-installed', 'Not installed'),
+    enabled: $t('mods-list-filter.filter.enabled', 'Enabled'),
+    disabled: $t('mods-list-filter.filter.disabled', 'Disabled'),
+  } as Record<FilterField, string>;
 </script>
 
 <div class="px-5 py-1 flex @container/mod-list-filters items-center">
   <div class="w-0 grow mr-2 inline-flex items-center">
-    <input class="w-full bg-transparent border-b-[1px] pr-5 border-secondary-500 hover:border-secondary-50 focus:border-primary-600 duration-500 placeholder-secondary-400 placeholder:font-medium outline-none !ring-0 h-8 transition-colors" placeholder="Search mods" bind:value={$search}/>
+    <input
+      class="w-full bg-transparent border-b-[1px] pr-5 border-secondary-500 hover:border-secondary-50 focus:border-primary-600 duration-500 placeholder-secondary-400 placeholder:font-medium outline-none !ring-0 h-8 transition-colors"
+      placeholder={$t('mods-list-filter.search', 'Search mods')}
+      bind:value={$search}/>
     <button
       class="-ml-5 my-2 pb-0.5 opacity-0 transition-opacity"
       class:!opacity-100={$search}
@@ -23,7 +50,7 @@
     buttonClass="px-2 text-sm space-x-1"
     itemActiveClass="!bg-surface-300/20"
     itemClass="bg-surface-50-900-token"
-    itemKey="name"
+    itemKey="id"
     items={filterOptions}
     menuClass="min-w-[10rem]"
     bind:value={$filter}
@@ -32,10 +59,10 @@
       <div class="h-5 w-5">
         <SvgIcon icon={mdiFilter} />
       </div>
-      <span class="text-primary-600 hidden @lg/mod-list-filters:!block w-24 text-left">{item.name}</span>
+      <span class="text-primary-600 hidden @lg/mod-list-filters:!block w-24 text-left">{filterNames[item.id]}</span>
     </svelte:fragment>
     <svelte:fragment slot="item" let:item>
-      <span>{item.name}</span>
+      <span>{filterNames[item.id]}</span>
     </svelte:fragment>
   </Select>
   <Select
@@ -44,7 +71,7 @@
     buttonClass="px-2 text-sm space-x-1"
     itemActiveClass="!bg-surface-300/20"
     itemClass="bg-surface-50-900-token"
-    itemKey="name"
+    itemKey="id"
     items={orderByOptions}
     menuClass="min-w-[10rem]"
     bind:value={$order}
@@ -53,10 +80,10 @@
       <div class="h-5 w-5">
         <SvgIcon icon={mdiSort} />
       </div>
-      <span class="text-primary-600 hidden @lg/mod-list-filters:!block w-24 text-left">{item.name}</span>
+      <span class="text-primary-600 hidden @lg/mod-list-filters:!block w-24 text-left">{orderByNames[item.id]}</span>
     </svelte:fragment>
     <svelte:fragment slot="item" let:item>
-      <span>{item.name}</span>
+      <span>{orderByNames[item.id]}</span>
     </svelte:fragment>
   </Select>
 </div>

diff --git a/frontend/src/lib/store/modFiltersStore.ts b/frontend/src/lib/store/modFiltersStore.ts
@@ -10,29 +10,32 @@ import { getCompatibility } from '$lib/utils/modCompatibility';
 import { installTypeToTargetName } from '$lib/wailsTypesExtensions';
 import { GetModFiltersFilter, GetModFiltersOrder, SetModFiltersFilter, SetModFiltersOrder } from '$wailsjs/go/settings/settings';
 
+export type OrderByField = 'name' | 'last-updated' | 'popularity' | 'hotness' | 'views' | 'downloads';
+export type FilterField = 'all' | 'compatible' | 'favorite' | 'queued' | 'installed' | 'dependency' | 'not-installed' | 'enabled' | 'disabled';
+
 export interface OrderBy {
-  name: string;
+  id: OrderByField;
   func: (mod: PartialMod) => unknown,
 }
 
 export interface Filter {
-  name: string;
+  id: FilterField;
   func: (mod: PartialMod, urqlClient: Client) => Promise<boolean> | boolean,
 }
 
 export const orderByOptions: OrderBy[] = [
-  { name: 'Name', func: (mod: PartialMod) => mod.name.trim() },
-  { name: 'Last updated', func: (mod: PartialMod) => 'last_version_date' in mod ? Date.now() - Date.parse(mod.last_version_date) : 0 },
-  { name: 'Popularity', func: (mod: PartialMod) => 'popularity' in mod ? -mod.popularity : 0 },
-  { name: 'Hotness', func: (mod: PartialMod) => 'hotness' in mod ? -mod.hotness : 0 },
-  { name: 'Views', func: (mod: PartialMod) => 'views' in mod ? -mod.views : 0 },
-  { name: 'Downloads', func: (mod: PartialMod) => 'downloads' in mod ? -mod.downloads : 0 },
+  { id: 'name', func: (mod: PartialMod) => mod.name.trim() },
+  { id: 'last-updated', func: (mod: PartialMod) => 'last_version_date' in mod ? Date.now() - Date.parse(mod.last_version_date) : 0 },
+  { id: 'popularity', func: (mod: PartialMod) => 'popularity' in mod ? -mod.popularity : 0 },
+  { id: 'hotness', func: (mod: PartialMod) => 'hotness' in mod ? -mod.hotness : 0 },
+  { id: 'views', func: (mod: PartialMod) => 'views' in mod ? -mod.views : 0 },
+  { id: 'downloads', func: (mod: PartialMod) => 'downloads' in mod ? -mod.downloads : 0 },
 ];
 
 export const filterOptions: Filter[] = [
-  { name: 'All mods', func: () => true },
+  { id: 'all', func: () => true },
   { 
-    name: 'Compatible',
+    id: 'compatible',
     func: async (mod: PartialMod, urqlClient: Client) => { 
       const installInfo = get(selectedInstallMetadata).info;
       if(!installInfo) {
@@ -42,13 +45,13 @@ export const filterOptions: Filter[] = [
       return compatibility.state !== CompatibilityState.Broken;
     }, 
   },
-  { name: 'Favorite', func: (mod: PartialMod) => get(favoriteMods).includes(mod.mod_reference) },
-  { name: 'Queued', func: (mod: PartialMod) => get(queuedMods).some((q) => q.mod === mod.mod_reference) },
-  { name: 'Installed', func: (mod: PartialMod) => mod.mod_reference in get(manifestMods) },
-  { name: 'Dependency', func: (mod: PartialMod) => !(mod.mod_reference in get(manifestMods)) && mod.mod_reference in get(lockfileMods) },
-  { name: 'Not installed', func: (mod: PartialMod) => !(mod.mod_reference in get(manifestMods)) },
-  { name: 'Enabled', func: (mod: PartialMod) => get(manifestMods)[mod.mod_reference]?.enabled ?? mod.mod_reference in get(lockfileMods) },
-  { name: 'Disabled', func: (mod: PartialMod) => mod.mod_reference in get(manifestMods) && !(mod.mod_reference in get(lockfileMods)) },
+  { id: 'favorite', func: (mod: PartialMod) => get(favoriteMods).includes(mod.mod_reference) },
+  { id: 'queued', func: (mod: PartialMod) => get(queuedMods).some((q) => q.mod === mod.mod_reference) },
+  { id: 'installed', func: (mod: PartialMod) => mod.mod_reference in get(manifestMods) },
+  { id: 'dependency', func: (mod: PartialMod) => !(mod.mod_reference in get(manifestMods)) && mod.mod_reference in get(lockfileMods) },
+  { id: 'not-installed', func: (mod: PartialMod) => !(mod.mod_reference in get(manifestMods)) },
+  { id: 'enabled', func: (mod: PartialMod) => get(manifestMods)[mod.mod_reference]?.enabled ?? mod.mod_reference in get(lockfileMods) },
+  { id: 'disabled', func: (mod: PartialMod) => mod.mod_reference in get(manifestMods) && !(mod.mod_reference in get(lockfileMods)) },
 ];
 
 export type PartialSMRMod = GetModsQuery['getMods']['mods'][number];