feat: always display full Target Support grid, improve translatability (#191)

* feat: always display full Target Support grid, improve translatability

* docs: add links to useful tolgee docs pages

Author: budak7273

CONTRIBUTING.md

@@ -128,6 +128,14 @@ To do this:
 
 Using the in-context translation Screenshot feature also requires installing the _Tolgee Tools_ browser extension.
 
+To define new translation keys yourself, contact us on the Discord about getting Edit Keys scope access to the project.
+
+See these documentation pages about how to use Tolgee in code:
+
+- [Using `$t()` and the `T` component](https://tolgee.io/js-sdk/integrations/svelte/translating)
+- [Full spec for `$t()`](https://tolgee.io/js-sdk/api/core_package/tolgee#t)
+- [ICU Message Format](https://tolgee.io/platform/translation_process/icu_message_format)
+
 ### Downloading Translations
 
 This project uses Tolgee to manage translations.

src/lib/components/mods/ModLatestVersions.svelte

@@ -6,6 +6,7 @@
   import VersionTargetSupportGrid from '$lib/components/versions/VersionTargetSupportGrid.svelte';
   import VersionDependenciesGrid from '$lib/components/versions/VersionDependenciesGrid.svelte';
   import type { Version, VersionDependency, VersionTarget } from '$lib/generated';
+  import { T } from '@tolgee/svelte';
 
   type IVersion = Pick<Version, 'id' | 'link' | 'version' | 'created_at'> & {
     targets?: Pick<VersionTarget, 'targetName' | 'size' | 'hash'>[];
@@ -31,7 +32,7 @@
 <div class="card p-4">
   <section>
     <div class="grid grid-flow-row gap-y-2">
-      <h3 class="my-4 text-2xl font-bold">{$t('mod.latest-versions')}</h3>
+      <h3 class="my-4 text-2xl font-bold"><T keyName="mod.latest-versions" defaultValue="Latest Versions" /></h3>
 
       {#each Object.keys(stabilities) as stability}
         {#if latestVersions[stability]}
@@ -43,22 +44,25 @@
               <a
                 href="{base}/mod/{modId}/version/{latestVersions[stability].id}/"
                 class="text-yellow-500 underline"
-                title="Click to view patch notes for this version">Version {latestVersions[stability].version}</a>
+                title={$t('version.version-number.tooltip', 'Click to view patch notes for this version')}>
+                <T
+                  keyName="version.version-number"
+                  defaultValue={'Version {versionNumber}'}
+                  params={{ versionNumber: latestVersions[stability].version }} /></a>
               <div>{prettyDate(latestVersions[stability].created_at)}</div>
             </div>
             <div class="text-1xl col-span-3 h-auto w-auto p-2.5">
               <a
                 href="#top"
                 on:click={() => installMod(modReference)}
-                title="Install via Satisfactory Mod Manager"
+                title={$t('version.install.tooltip', 'Install via Satisfactory Mod Manager')}
                 class="text-yellow-500">
-                <span class="material-icons align-middle" style="font-size: 118x;">download</span> <u>Install</u>
+                <span class="material-icons align-middle" style="font-size: 118x;">download</span>
+                <u><T keyName="version.install" defaultValue="Install" /></u>
               </a>
             </div>
           </div>
-          {#if latestVersions[stability].targets.length > 1}
-            <VersionTargetSupportGrid targets={latestVersions[stability].targets} />
-          {/if}
+          <VersionTargetSupportGrid targets={latestVersions[stability].targets} />
           <VersionDependenciesGrid dependencies={latestVersions[stability].dependencies} />
         {/if}
       {/each}

src/lib/components/versions/VersionTargetSupportGrid.svelte

@@ -1,14 +1,29 @@
 <script lang="ts">
   import type { VersionTarget } from '$lib/generated';
+  import { getTranslate } from '@tolgee/svelte';
+  import { T } from '@tolgee/svelte';
+
+  export const { t } = getTranslate();
 
   export let targets!: Pick<VersionTarget, 'targetName'>[];
 
-  function formatTooltip(found: boolean, selectedTarget: string) {
-    if (found) {
-      return `This version supports the ${selectedTarget} target`;
+  function formatTooltip(filesFoundForTarget: boolean, selectedTarget: string) {
+    if (filesFoundForTarget) {
+      return $t({
+        key: 'version.target-support-tooltip.supported',
+        defaultValue: `This version supports the {TargetPlatform} platform`,
+        params: {
+          TargetPlatform: selectedTarget
+        }
+      });
     }
-
-    return `This version lacks files for the ${selectedTarget} target`;
+    return $t({
+      key: 'version.target-support-tooltip.unsupported',
+      defaultValue: `This version does not support the {TargetPlatform} platform`,
+      params: {
+        TargetPlatform: selectedTarget
+      }
+    });
   }
 
   const yesGlyph = 'checkmark';
@@ -36,11 +51,17 @@
     <tbody>
       <tr class="rounded border !border-surface-500">
         <td style="width: 20%;" />
-        <td style="width: 40%;"><div class="text-center" title="Game client">Client</div></td>
-        <td style="width: 40%;"><div class="text-center" title="Dedicated server">Server</div></td>
+        <td style="width: 40%;"
+          ><div class="text-center" title="Game client">
+            <T keyName="target-platform.client" defaultValue="Client" />
+          </div></td>
+        <td style="width: 40%;"
+          ><div class="text-center" title="Dedicated server">
+            <T keyName="target-platform.server" defaultValue="Server" />
+          </div></td>
       </tr>
       <tr class="rounded border !border-surface-500">
-        <td>Windows</td>
+        <td><T keyName="target-platform.windows" defaultValue="Windows" /></td>
         <td
           ><div class="text-center">
             <span class="material-icons text-center" style="width: 20px" title={WindowsSupport.tooltip}
@@ -53,8 +74,16 @@
           </div></td>
       </tr>
       <tr class="rounded border !border-surface-500">
-        <td>Linux</td>
-        <td><div class="text-center" title="There is no Client distribution of Satisfactory for Linux">N/A</div></td>
+        <td><T keyName="target-platform.linux" defaultValue="Linux" /></td>
+        <td
+          ><div
+            class="text-center"
+            title={$t(
+              'version.target-support-tooltip.no-linux-client',
+              'There is no Client distribution of Satisfactory for Linux'
+            )}>
+            <T keyName="not-applicable.abbreviation" defaultValue="N/A" />
+          </div></td>
         <td
           ><div class="text-center">
             <span class="material-icons text-center" style="width: 20px" title={LinuxServerSupport.tooltip}