Internationalization

src/apps/components/acceleratoroverview/AcceleratorOverview.svelte

@@ -6,9 +6,9 @@
 </script>
 
 {#if $store && $apps}
-  <div class="header">
-    <h1>Keyboard Shortcuts</h1>
-    <p>Get more work done faster with these handy shortcuts!</p>
+  <div class="header" data-prefix="apps.AcceleratorOverview.header">
+    <h1>%title%</h1>
+    <p>%subtitle%</p>
   </div>
   <div class="shortcuts">
     {#each $store as [name, shortcuts]}

src/apps/components/appinfo/AppInfo.ts

@@ -5,7 +5,7 @@ import { AppInfoRuntime } from "./runtime";
 
 const AppInfoApp: App = {
   metadata: {
-    name: "App Info",
+    name: "%apps.AppInfo._name%",
     author: "Izaak Kuipers",
     version: "3.0.1",
     icon: "AppInfoIcon",

src/apps/components/appinfo/AppInfo/Actions.svelte

@@ -21,7 +21,7 @@
 <InfoBlock className="actions">
   <InfoRow>
     <p class="id">{appId}</p>
-    <button onclick={() => process.killAll()} {disabled}>Kill all</button>
-    <button class="suggested" onclick={() => process.closeWindow()}>Close</button>
+    <button onclick={() => process.killAll()} {disabled}>%actions.killAll%</button>
+    <button class="suggested" onclick={() => process.closeWindow()}>%general.close%</button>
   </InfoRow>
 </InfoBlock>

src/apps/components/appinfo/AppInfo/Header.svelte

@@ -45,26 +45,36 @@
     <img src={process.userDaemon?.getAppIcon(target) || process.getIconCached("QuestionIcon")} alt="" />
     <div class="base-info">
       <p class="name">
-        <span>{target?.metadata?.name || "Unknown"}</span>
+        <span>{target?.metadata?.name || "%general.unknown%"}</span>
         {#if disabled}
           <img
             src={process.getIconCached("WarningIcon")}
             alt=""
             class="disabled"
-            title="{target?.metadata?.name || 'Unknown'} is disabled!"
+            title="%apps.AppInfo.header.isDisabled({target?.metadata?.name || 'Unknown'})%"
           />
         {/if}
       </p>
-      <p class="author">{target?.metadata?.author || "No author"}</p>
+      <p class="author">{target?.metadata?.author || "%general.noAuthor%"}</p>
     </div>
   </div>
   <div class="right">
-    <button class="disable" onclick={toggleDisabledState} class:disabled disabled={process.userDaemon?.isVital(target!)}
-      >{disabled ? "Enable" : "Disable"}</button
-    >
+    <button class="disable" onclick={toggleDisabledState} class:disabled disabled={process.userDaemon?.isVital(target!)}>
+      {disabled ? "%general.enable%" : "%general.disable%"}
+    </button>
     {#if (target?.entrypoint || target?.workingDirectory) && installed}
-      <button class="lucide icon-trash-2" onclick={deleteApp} title="Delete app" aria-label="Delete app"></button>
+      <button
+        class="lucide icon-trash-2"
+        onclick={deleteApp}
+        title="%apps.AppInfo.header.deleteApp%"
+        aria-label="%apps.AppInfo.header.deleteApp%"
+      ></button>
     {/if}
-    <button class="lucide icon-rocket" onclick={launch} title="Launch" aria-label="Launch"></button>
+    <button
+      class="lucide icon-rocket"
+      onclick={launch}
+      title="%apps.AppInfo.header.launch%"
+      aria-label="%apps.AppInfo.header.launch%"
+    ></button>
   </div>
 </div>

src/apps/components/appinfo/AppInfo/IndepthInfo.svelte

@@ -11,43 +11,45 @@
 
 <InfoBlock>
   <InfoRow>
-    <Segment title="Size">
+    <Segment title="%indepthInfo.size%">
       {Math.max(0, target.size?.w || 0) || "F"} x {Math.max(0, target.size?.h || 0) || "F"}
     </Segment>
 
-    <Segment title="Minimal Size">
+    <Segment title="%indepthInfo.minSize%">
       {Math.max(0, target.minSize?.w || 0) || "F"} x {Math.max(0, target.minSize?.h || 0) || "F"}
     </Segment>
 
-    <Segment title="Maximal Size">
+    <Segment title="%indepthInfo.maxSize%">
       {Math.max(0, target.maxSize?.w || 0) || "F"} x {Math.max(0, target.maxSize?.h || 0) || "F"}
     </Segment>
-    <Segment title="Controls" right>
+    <Segment title="%indepthInfo.controls%" right>
       <div class="controls">
-        <button class="minimize icon-chevron-down" class:disabled={!target?.controls?.minimize} aria-label="Minimize"></button>
-        <button class="maximize icon-chevron-up" class:disabled={!target?.controls?.maximize} aria-label="Maximize"></button>
-        <button class="close icon-x" class:disabled={!target?.controls?.close} aria-label="Close"></button>
+        <button class="minimize icon-chevron-down" class:disabled={!target?.controls?.minimize} aria-label="%general.minimize%"
+        ></button>
+        <button class="maximize icon-chevron-up" class:disabled={!target?.controls?.maximize} aria-label="%general.maximize%"
+        ></button>
+        <button class="close icon-x" class:disabled={!target?.controls?.close} aria-label="%general.close%"></button>
       </div>
     </Segment>
   </InfoRow>
   <InfoRow>
-    <Segment title="Initial Position">
+    <Segment title="%indepthInfo.initialPosition%">
       {#if target?.position?.centered}
-        Centered
+        %indepthInfo.centered%
       {:else if target?.position?.x || target.position?.y}
         {target?.position?.x}, {target?.position?.y}
       {:else}
-        Corner of screen
+        %indepthInfo.cornerOfScreen%
       {/if}
     </Segment>
-    <Segment title="Origin">
+    <Segment title="%indepthInfo.origin%">
       {AppOrigins[target?.originId || "injected"]}
     </Segment>
-    <Segment title="Core">
-      {target?.core ? "Yes" : "No"}
+    <Segment title="%indepthInfo.core%">
+      {target?.core ? "%general.yes%" : "%general.no%"}
     </Segment>
-    <Segment title="Hidden">
-      {target?.hidden ? "Yes" : "No"}
+    <Segment title="%indepthInfo.hidden%">
+      {target?.hidden ? "%general.yes%" : "%general.no%"}
     </Segment>
   </InfoRow>
 </InfoBlock>

src/apps/components/appinfo/AppInfo/InternalInfo.svelte

@@ -10,18 +10,18 @@
 
 <InfoBlock className="internal-info">
   <InfoRow>
-    <Segment title="Load time">
+    <Segment title="%internalInfo.loadTime%">
       {target._internalLoadTime?.toFixed(2) || 0}ms
     </Segment>
-    <Segment title="System version">
+    <Segment title="%internalInfo.systemVersion%">
       {target._internalSysVer}
     </Segment>
-    <Segment title="Minimal assembly">
+    <Segment title="%internalInfo.minimalAssembly%">
       {target._internalMinVer || "-"}
     </Segment>
   </InfoRow>
   <InfoRow>
-    <Segment title="Code Path">
+    <Segment title="%internalInfo.codePath%">
       {target._internalOriginalPath}
     </Segment>
   </InfoRow>

src/apps/components/appinfo/AppInfo/ProcessInfo.svelte

@@ -31,12 +31,12 @@
 
 <InfoBlock className="process-info">
   <InfoRow>
-    <Segment title="Processes">
-      {count} instance(s)
+    <Segment title="%processInfo.processes%">
+      %processInfo.instances({count})%
     </Segment>
-    <Segment title="First PID">
-      {pid < 0 ? "None" : pid}
+    <Segment title="%processInfo.firstPid%">
+      {pid < 0 ? "%general.none%" : pid}
     </Segment>
-    <button class="processes" onclick={() => process.processManager()}>Processes</button>
+    <button class="processes" onclick={() => process.processManager()}>%processInfo.processes%</button>
   </InfoRow>
 </InfoBlock>

src/apps/components/appinfo/AppInfo/ThirdPartyInfo.svelte

@@ -10,19 +10,19 @@
 
 <InfoBlock>
   <InfoRow>
-    <Segment title="Third-party">Yes</Segment>
-    <Segment title="Signatures">
-      {target.fileSignatures ? Object.entries(target.fileSignatures).length : "None"}
+    <Segment title="%thirdPartyInfo.thirdParty%">%general.yes%</Segment>
+    <Segment title="%thirdPartyInfo.signatures%">
+      {target.fileSignatures ? Object.entries(target.fileSignatures).length : "%general.none%"}
     </Segment>
-    <Segment title="Has process">
-      {target.process ? "Yes" : "No"}
+    <Segment title="%thirdPartyInfo.hasProcess%">
+      {target.process ? "%general.yes%" : "%general.no%"}
     </Segment>
   </InfoRow>
   <InfoRow>
-    <Segment title="Working directory">
+    <Segment title="%thirdPartyInfo.workingDirectory%">
       {target.workingDirectory}
     </Segment>
-    <Segment title="Entry point">
+    <Segment title="%thirdPartyInfo.entryPoint%">
       {target.entrypoint}
     </Segment>
   </InfoRow>

src/apps/components/appinfo/runtime.ts

@@ -22,12 +22,13 @@ export class AppInfoRuntime extends AppProcess {
   }
 
   async render() {
+    this.getBody().setAttribute("data-prefix", "apps.AppInfo");
     const targetApp = this.appStore()?.getAppSynchronous(this.targetAppId);
 
     if (!targetApp) {
       this.userDaemon?.sendNotification({
-        title: "App not found",
-        message: `AppInfo couldn't find any information about "${this.targetAppId}". Is it installed?`,
+        title: "%apps.AppInfo.noTargetApp.title%",
+        message: `%apps.AppInfo.noTargetApp.message(${this.targetAppId})%`,
         image: "AppInfoIcon",
         timeout: 6000,
       });
@@ -44,7 +45,7 @@ export class AppInfoRuntime extends AppProcess {
 
   async killAll() {
     const elevated = await this.userDaemon?.manuallyElevate({
-      what: `ArcOS needs your permission to kill all instances of an app`,
+      what: `%apps.AppInfo.killAll.what%`,
       image: this.userDaemon?.getAppIcon(this.targetApp()) || this.getIconCached("ComponentIcon"),
       title: this.targetApp().metadata.name,
       description: this.targetAppId,

src/apps/components/appinstaller/AppInstaller/Actions.svelte

@@ -8,14 +8,14 @@
 
 <div class="actions">
   {#if $failReason}
-    <button class="suggested" onclick={() => process.revert()}>Revert</button>
+    <button class="suggested" onclick={() => process.revert()}>%actions.revert%</button>
   {:else if $installing || $completed}
     {#if !isLibrary}
-      <button onclick={() => process.runNow()} disabled={$installing}>Open now</button>
+      <button onclick={() => process.runNow()} disabled={$installing}>%actions.openNow%</button>
     {/if}
     <button class:suggested={$completed} disabled={!$completed} onclick={() => process.closeWindow()}>Done</button>
   {:else}
-    <button onclick={() => process.closeWindow()}>Cancel</button>
-    <button class="suggested" onclick={() => process.go()}>Install</button>
+    <button onclick={() => process.closeWindow()}>%general.cancel%</button>
+    <button class="suggested" onclick={() => process.go()}>%actions.install%</button>
   {/if}
 </div>

src/apps/components/appinstaller/AppInstaller/Header.svelte

@@ -23,7 +23,7 @@
           Installing package...
         {/if}
       {:else if $failReason}
-        Installation failed
+        %header.title.failed%
       {:else}
         {metadata?.name}
       {/if}
@@ -36,11 +36,11 @@
           Click <b>Open now</b> to launch the app
         {/if}
       {:else if $installing}
-        {metadata?.name} by {metadata?.author}
+        %header.subtitle.installing({metadata?.name}::{metadata?.author})%
       {:else if $failReason}
         {$failReason}
       {:else}
-        {metadata?.author} - {metadata?.version}
+        %header.subtitle.generic({metadata?.author}::{metadata?.version})%
       {/if}
     </p>
   </div>

src/apps/components/appinstaller/AppInstaller/Log.svelte

@@ -18,21 +18,21 @@
   {#if !Object.entries($status).length && !$installing}
     <div class="ready-to-install">
       <span class="lucide icon-hard-drive-download"></span>
-      <h1>Ready to install</h1>
-      <p>Click <b>Install</b> to install this package.</p>
+      <h1>%readyToInstall.title%</h1>
+      <p>%readyToInstall.message%</p>
     </div>
   {:else}
     {#each Object.entries($status) as [uuid, item] (uuid)}
       <div class="item" bind:this={elements[uuid]}>
         <p class="type">
           {#if item.type === "file"}
-            Writing file
+            %logType.file%
           {:else if item.type === "mkdir"}
-            Creating directory
+            %logType.mkdir%
           {:else if item.type === "registration"}
-            Registering
+            %logType.registration%
           {:else}
-            Status
+            %logType.generic%
           {/if}
         </p>
         <p class="content">{item.content}</p>

src/apps/components/appinstaller/runtime.ts

@@ -35,9 +35,9 @@ export class AppInstallerRuntime extends AppProcess {
       // Should never happen unless nik fucked something up (yes, nik)
       MessageBox(
         {
-          title: "Can't install package",
-          message: "The Distribution Service isn't running anymore. Please restart ArcOS to fix this problem.",
-          buttons: [{ caption: "Okay", action: () => {}, suggested: true }],
+          title: "%apps.AppInstaller.noDistrib.title%",
+          message: "%apps.AppInstaller.noDistrib.message%",
+          buttons: [{ caption: "%general.okay%", action: () => {}, suggested: true }],
           image: "ErrorIcon",
           sound: "arcos.dialog.error",
         },
@@ -53,24 +53,25 @@ export class AppInstallerRuntime extends AppProcess {
   }
 
   async render() {
+    this.getBody().setAttribute("data-prefix", "apps.AppInstaller");
+
     if (!this.userPreferences().security.enableThirdParty) {
       // The user has to allow TPAs explicitly
       MessageBox(
         {
-          title: "Can't install app",
-          message:
-            "Third-party apps aren't enabled on your account. Please enable third-party apps in the Settings to install this app.",
+          title: "%apps.AppInstaller.noEnableThirdParty.title%",
+          message: "%apps.AppInstaller.noEnableThirdParty.message%",
           image: "AppsIcon",
           sound: "arcos.dialog.warning",
           buttons: [
             {
-              caption: "Take me there",
+              caption: "%apps.AppInstaller.noEnableThirdParty.takeMeThere%",
               action: () => {
                 this.userDaemon?.spawnApp("systemSettings", +this.env.get("shell_pid"), "apps");
               },
             },
             {
-              caption: "Okay",
+              caption: "%general.okay%",
               action: () => {},
               suggested: true,
             },
@@ -95,7 +96,7 @@ export class AppInstallerRuntime extends AppProcess {
     // TODO: change rollback for library installment
 
     if (!this.isLibrary) {
-      const gli = await this.userDaemon?.GlobalLoadIndicator("Rolling back changes...", this.pid);
+      const gli = await this.userDaemon?.GlobalLoadIndicator("%apps.AppInstaller.rollback%", this.pid);
 
       try {
         await this.fs.deleteItem(this.metadata!.installLocation);

src/apps/components/apppreinstall/AppPreinstall.svelte

@@ -10,27 +10,27 @@
   <div class="header">
     <img src={process.getIconCached("ArcAppMimeIcon")} alt="" />
     <h1>{$metadata.name}</h1>
-    <p>Do you want to install this package?</p>
+    <p>%header.title%</p>
   </div>
   <div class="info">
     <h1>{$metadata.description}</h1>
     <div class="rows">
       <div class="row">
-        <p class="key">Author</p>
+        <p class="key">%info.author%</p>
         <p class="value">{$metadata.author}</p>
       </div>
       <div class="row">
-        <p class="key">Version</p>
+        <p class="key">%info.version%</p>
         <p class="value">{$metadata.version}</p>
       </div>
     </div>
   </div>
   <div class="action">
     <button class="suggested" onclick={() => process.install()}>
       <span class="lucide icon-shield"></span>
-      <span>Install package</span>
+      <span>%installPackage%</span>
     </button>
-    <button onclick={() => process.closeWindow()}>Cancel</button>
+    <button onclick={() => process.closeWindow()}>%general.cancel%</button>
   </div>
 {:else}
   <div class="loading">