From 41d9c72045b7f3e096b7d15a2e30e4ae4f7c11c6 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 24 Apr 2024 16:07:26 -0400
Subject: [PATCH 1/2] i18n for lib/components

---
 package-lock.json                             |  6 +-
 src/langs/json/en.json                        | 95 +++++++++++++------
 src/lib/components/common/FieldLabel.svelte   |  3 +-
 src/lib/components/common/Premium.svelte      |  5 +
 src/lib/components/common/SignedIn.svelte     |  5 +
 .../documents/DocumentListItem.svelte         |  6 ++
 .../components/documents/ResultsList.svelte   |  2 +-
 .../components/forms/DocumentUpload.svelte    | 37 ++++----
 src/lib/components/inputs/AccessLevel.svelte  | 20 ++--
 src/lib/components/inputs/Search.svelte       |  3 +-
 src/lib/components/layouts/MainLayout.svelte  |  6 +-
 src/lib/components/navigation/UserMenu.svelte |  1 -
 12 files changed, 122 insertions(+), 67 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4112cb48f..967288491 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20240,9 +20240,9 @@
       }
     },
     "node_modules/tar": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
-      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
       "dev": true,
       "dependencies": {
         "chownr": "^2.0.0",
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 376ea20ed..7442ccef0 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -5,7 +5,8 @@
     "documentCloud": "DocumentCloud",
     "home": "Home",
     "new": "New",
-    "learnMore": "Learn more"
+    "learnMore": "Learn more",
+    "or": "or"
   },
   "homeTemplate": {
     "signedIn": "Signed in as {name}",
@@ -14,6 +15,27 @@
     "signUp": "Sign up",
     "goToApp": "Go to app"
   },
+  "inputs": {
+    "required": "Required"
+  },
+  "access": {
+    "access": "Access",
+    "private": {
+      "value": "private",
+      "title": "Private",
+      "description": "Documents will only be visible to you"
+    },
+    "organization": {
+      "value": "organization",
+      "title": "Organization",
+      "description": "Documents will only be visible to your organization"
+    },
+    "public": {
+      "value": "public",
+      "title": "Public",
+      "description": "Documents will be publicly visible to everyone"
+    }
+  },
   "notfound": {
     "title": "Page not found",
     "content": "Please try another URL"
@@ -349,6 +371,45 @@
   "specialMessage": {
     "contactUs": "<a href={contact} target=\"_blank\">Contact us</a> with bug reports, questions, and suggestions."
   },
+  "uploadDialog": {
+    "docUpload": "Document Upload",
+    "docUploadProj": "Document Upload to {title}",
+    "selectDocument": "Select or drag a document to begin the document upload process. You will then be able to edit document information.",
+    "pdfSizeWarning": "You can only upload PDF files under {size}.",
+    "nonPdfSizeWarning": "You can only upload non-PDF document files under {size}.",
+    "fileReady": "{n, plural, one {file} other {files}} ready to upload",
+    "fileLimitWarning": "You can only upload {limit} files at once.",
+    "moreOptions": "More options",
+    "beginUpload": "Begin Upload",
+    "selectFiles": "Select files",
+    "dragDrop": "Drag and drop files here",
+    "publicMsg": "Document will be publicly visible.",
+    "collabMsg": "Document will be visible to your organization.",
+    "privateMsg": "Document will be visible to you alone.",
+    "collabName": "Organization",
+    "submitting": "Almost done... submitting uploaded files for processing ({percent})",
+    "uploading": "Uploading ... ({uploaded}/{length})",
+    "gettingInfo": "Getting upload information ({percent})",
+    "pleaseLeaveOpen": "Please leave this page open while your documents upload. This dialog will automatically close when they have finished uploading.",
+    "errorHeading": "Error occurred while uploading",
+    "errorMsg": "We failed to {errorMessage}. Please try again later.",
+    "editDocInfo": "Edit document information:",
+    "untitled": "Untitled",
+    "uploadFiles": "Upload additional files",
+    "selectMore": "+ Select more files",
+    "dragDropMore": "Drag and drop additional files here",
+    "totalFiles": "Total: {n, plural, one {# file} other {# files}}",
+    "accessLevel": "Access Level",
+    "projects": "Projects",
+    "language": "Language",
+    "ocrEngine": "OCR Engine",
+    "forceOcr": "Force OCR",
+    "revisionControl": "Revision Control",
+    "revisionControlHelp": "All previous versions to the document will be preserved and available for download.",
+    "tesseract": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://tesseract-ocr.github.io/tessdoc/\">Tesseract</a> is an open source OCR engine available free to all DocumentCloud accounts.",
+    "textract": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://aws.amazon.com/textract/\">Textract</a> is a more powerful OCR engine that can better handle messy text, handwriting and fuzzy scans.",
+    "empty": "Get started by selecting, pasting or dragging-and-dropping files below"
+  },
   "uploadOptions": {
     "documentLang": "Document language:",
     "forceOcr": "Force OCR:",
@@ -360,7 +421,8 @@
     "creditHelpText": "Selecting Textract will cost one AI Credit per page in the document.  If you go over, the document will fall back to using Tesseract.  You are currently working on behalf of {organization} and have {n, plural, one {# credit} other {# credits}} left.",
     "documentLanguagePlaceholder": "Begin typing to see options",
     "revisionControl": "Revision Control:",
-    "revisionControlHelp": "All previous versions to the document will be preserved and available for download."
+    "revisionControlHelp": "All previous versions to the document will be preserved and available for download.",
+    "empty": "Get started by selecting, pasting or dragging-and-dropping files below"
   },
   "actionBar": {
     "selectDocs": "Select some documents to reveal edit actions",
@@ -440,6 +502,7 @@
     "page": "Page",
     "pageAbbrev": "p.",
     "pageCount": "{n, plural, one {# page} other {# pages}}",
+    "select": "Select",
     "source": "Source",
     "noteCount": "{n, plural, one {# note} other {# notes}}",
     "noteLink": "See note"
@@ -580,34 +643,6 @@
   "organizations": {
     "sameOrgUsers": "Users in organization"
   },
-  "uploadDialog": {
-    "docUpload": "Document Upload",
-    "docUploadProj": "Document Upload to {title}",
-    "selectDocument": "Select or drag a document to begin the document upload process. You will then be able to edit document information.",
-    "pdfSizeWarning": "You can only upload PDF files under {size}.",
-    "nonPdfSizeWarning": "You can only upload non-PDF document files under {size}.",
-    "fileReady": "{n, plural, one {file} other {files}} ready to upload",
-    "fileLimitWarning": "You can only upload {limit} files at once.",
-    "moreOptions": "More options",
-    "beginUpload": "Begin upload",
-    "selectFiles": "+ Select files",
-    "dragDrop": "Drag and drop files here",
-    "publicMsg": "Document will be publicly visible.",
-    "collabMsg": "Document will be visible to your organization.",
-    "privateMsg": "Document will be visible to you alone.",
-    "collabName": "Organization",
-    "submitting": "Almost done... submitting uploaded files for processing ({percent})",
-    "uploading": "Uploading ... ({uploaded}/{length})",
-    "gettingInfo": "Getting upload information ({percent})",
-    "pleaseLeaveOpen": "Please leave this page open while your documents upload. This dialog will automatically close when they have finished uploading.",
-    "errorHeading": "Error occurred while uploading",
-    "errorMsg": "We failed to {errorMessage}. Please try again later.",
-    "editDocInfo": "Edit document information:",
-    "untitled": "Untitled",
-    "uploadFiles": "Upload additional files",
-    "selectMore": "+ Select more files",
-    "dragDropMore": "Drag and drop additional files here"
-  },
   "embedNote": {
     "viewTheNote": "View the note ‘{title}‘ in its original document context on DocumentCloud in a new window or tab",
     "viewDoc": "View the entire document with <span class=\"DC-note-logotype-link\">DocumentCloud</span>"
diff --git a/src/lib/components/common/FieldLabel.svelte b/src/lib/components/common/FieldLabel.svelte
index d06ce7b9c..d0584f7cf 100644
--- a/src/lib/components/common/FieldLabel.svelte
+++ b/src/lib/components/common/FieldLabel.svelte
@@ -4,6 +4,7 @@
 -->
 
 <script lang="ts">
+  import { _ } from "svelte-i18n";
   import PremiumBadge from "@/premium-credits/PremiumBadge.svelte";
   import Flex from "./Flex.svelte";
 
@@ -19,7 +20,7 @@
       {/if}
       <slot />
       {#if required}
-        <span class="required">Required</span>
+        <span class="required">{$_("inputs.required")}</span>
       {/if}
     </Flex>
     {#if premium}<PremiumBadge />{/if}
diff --git a/src/lib/components/common/Premium.svelte b/src/lib/components/common/Premium.svelte
index 49e4f552c..35db98b0d 100644
--- a/src/lib/components/common/Premium.svelte
+++ b/src/lib/components/common/Premium.svelte
@@ -1,3 +1,8 @@
+<!--
+  @component
+  Render the default slot if the user has a premium account (individual or organization).
+  The "basic" slot is available as a fallback.
+-->
 <script lang="ts">
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
diff --git a/src/lib/components/common/SignedIn.svelte b/src/lib/components/common/SignedIn.svelte
index 6da52ed3f..8ecfd5499 100644
--- a/src/lib/components/common/SignedIn.svelte
+++ b/src/lib/components/common/SignedIn.svelte
@@ -1,3 +1,8 @@
+<!--
+  @component
+  Render the default slot if the user is signed in.
+  The "signedOut" slot is available as a fallback.
+-->
 <script lang="ts">
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 308317a63..3d7ae193d 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -37,6 +37,10 @@
   function clean(html: string) {
     return DOMPurify.sanitize(html, { ALLOWED_TAGS: [] });
   }
+
+  function onError() {
+    document.status = "error";
+  }
 </script>
 
 <!--
@@ -53,6 +57,8 @@ It's deliberately minimal and can be wrapped in other components to add addition
           alt="Page 1, {document.title}"
           width="{width}px"
           height="{height}px"
+          loading="lazy"
+          on:error={onError}
         />
       {:else}
         <div class="fallback {document.status}">
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index e2d2b2e08..62429e22e 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -92,7 +92,7 @@
     <Flex direction="column">
       <Flex gap={0.625} align="center">
         <label>
-          <span class="sr-only">Select</span>
+          <span class="sr-only">{$_("documents.select")}</span>
           <input
             type="checkbox"
             bind:group={$selected}
diff --git a/src/lib/components/forms/DocumentUpload.svelte b/src/lib/components/forms/DocumentUpload.svelte
index 08297ac32..a687ceff2 100644
--- a/src/lib/components/forms/DocumentUpload.svelte
+++ b/src/lib/components/forms/DocumentUpload.svelte
@@ -155,12 +155,12 @@
     {
       value: "tess4",
       label: "Tesseract",
-      help: $_("uploadOptions.tesseract"),
+      help: $_("uploadDialog.tesseract"),
     },
     {
       value: "textract",
       label: "Textract",
-      help: $_("uploadOptions.textract"),
+      help: $_("uploadDialog.textract"),
     },
   ];
 
@@ -262,14 +262,13 @@
           </Flex>
         {:else}
           <Empty icon={File24}>
-            Get started by selecting, pasting or dragging-and-dropping files
-            below
+            {$_("uploadDialog.empty")}
           </Empty>
         {/each}
         {#if files.length > 0}
           <div class="total">
             <p>
-              Total: {files.length} file{files.length > 1 ? "s" : ""},
+              {$_("uploadDialog.totalFiles", { values: { n: files.length } })},
               <span class="uppercase">{filesize(total)}</span>
             </p>
           </div>
@@ -286,11 +285,11 @@
             class:active={fileDropActive}
             class:disabled={loading}
           >
-            <p class="drop-instructions">Drag and drop files here</p>
+            <p class="drop-instructions">{$_("uploadDialog.dragDrop")}</p>
             <Flex align="center" justify="center">
-              <span class="drop-instructions-or">or</span>
+              <span class="drop-instructions-or">{$_("common.or")}</span>
               <FileInput multiple onFileSelect={addFiles} disabled={loading}
-                ><File16 /> Select Files</FileInput
+                ><File16 />{$_("uploadDialog.selectFiles")}</FileInput
               >
             </Flex>
           </div>
@@ -300,11 +299,11 @@
     <div class="sidebar">
       <Flex gap={1} direction="column">
         <Field>
-          <FieldLabel>Access Level</FieldLabel>
+          <FieldLabel>{$_("uploadDialog.accessLevel")}</FieldLabel>
           <AccessLevel name="access" />
         </Field>
         <Field>
-          <FieldLabel>Projects</FieldLabel>
+          <FieldLabel>{$_("uploadDialog.projects")}</FieldLabel>
           <Select
             name="projects"
             multiple
@@ -315,11 +314,11 @@
         </Field>
         <hr class="divider" />
         <Field>
-          <FieldLabel>Language</FieldLabel>
+          <FieldLabel>{$_("uploadDialog.language")}</FieldLabel>
           <Language />
         </Field>
         <Field>
-          <FieldLabel>OCR Engine</FieldLabel>
+          <FieldLabel>{$_("uploadDialog.ocrEngine")}</FieldLabel>
           <Select
             name="ocr_engine"
             items={ocrEngineOptions}
@@ -331,25 +330,24 @@
         </Field>
         <Field inline>
           <input type="checkbox" name="force_ocr" />
-          <FieldLabel>Force OCR</FieldLabel>
+          <FieldLabel>{$_("uploadDialog.forceOcr")}</FieldLabel>
         </Field>
         <hr class="divider" />
 
         <Premium>
           <Field inline>
             <Switch name="revision_control" />
-            <FieldLabel premium>Revision Control</FieldLabel>
+            <FieldLabel premium>{$_("uploadDialog.revisionControl")}</FieldLabel
+            >
             <p slot="help">
-              All previous versions to the document will be preserved and
-              available for download.
+              {$_("uploadDialog.revisionControlHelp")}
             </p>
           </Field>
           <Field inline slot="basic">
             <Switch name="revision_control" disabled />
             <FieldLabel premium>Revision Control</FieldLabel>
             <p slot="help">
-              All previous versions to the document will be preserved and
-              available for download.
+              {$_("uploadDialog.revisionControlHelp")}
             </p>
           </Field>
         </Premium>
@@ -358,7 +356,8 @@
         type="submit"
         full
         mode="primary"
-        disabled={loading || exceedsSizeLimit}><Upload16 />Begin Upload</Button
+        disabled={loading || exceedsSizeLimit}
+        ><Upload16 />{$_("uploadDialog.beginUpload")}</Button
       >
 
       <input
diff --git a/src/lib/components/inputs/AccessLevel.svelte b/src/lib/components/inputs/AccessLevel.svelte
index 7506b2d72..fa31ab96f 100644
--- a/src/lib/components/inputs/AccessLevel.svelte
+++ b/src/lib/components/inputs/AccessLevel.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { Access } from "$lib/api/types";
+  import { _ } from "svelte-i18n";
+
   import {
     Globe24,
     Lock24,
@@ -17,21 +19,21 @@
 
   const levels: Level[] = [
     {
-      value: "private",
-      title: "Private",
-      description: "Documents will only be visible to you",
+      value: $_("access.private.value") as Access,
+      title: $_("access.private.title"),
+      description: $_("access.private.description"),
       icon: Lock24,
     },
     {
-      value: "organization",
-      title: "Organization",
-      description: "Documents will only be visible to your organization",
+      value: $_("access.organization.value") as Access,
+      title: $_("access.organization.title"),
+      description: $_("access.organization.description"),
       icon: Organization24,
     },
     {
-      value: "public",
-      title: "Public",
-      description: "Documents will be publicly visible to everyone",
+      value: $_("access.public.value") as Access,
+      title: $_("access.public.title"),
+      description: $_("access.public.description"),
       icon: Globe24,
     },
   ];
diff --git a/src/lib/components/inputs/Search.svelte b/src/lib/components/inputs/Search.svelte
index 886392cef..824296883 100644
--- a/src/lib/components/inputs/Search.svelte
+++ b/src/lib/components/inputs/Search.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Search24, XCircleFill24 } from "svelte-octicons";
+  import { _ } from "svelte-i18n";
 
   export let name: string = null;
   export let query: string = "";
@@ -18,7 +19,7 @@
     id="query"
     {name}
     autocomplete="off"
-    placeholder="Search…"
+    placeholder={$_("searchBar.search")}
     bind:value={query}
     bind:this={input}
     on:change
diff --git a/src/lib/components/layouts/MainLayout.svelte b/src/lib/components/layouts/MainLayout.svelte
index 34cb56160..287cfc9cd 100644
--- a/src/lib/components/layouts/MainLayout.svelte
+++ b/src/lib/components/layouts/MainLayout.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
-  import { type Org, type User } from "@/api/types";
+  import type { Org, User } from "@/api/types";
+
+  import { _ } from "svelte-i18n";
   import { page } from "$app/stores";
 
   import { getContext } from "svelte";
@@ -57,7 +59,7 @@
         <UserMenu user={$me} />
       </Flex>
       <Button slot="signedOut" mode="primary" href={SIGN_IN_URL}>
-        Sign In
+        {$_("authSection.user.signIn")}
       </Button>
     </SignedIn>
     <LanguageMenu />
diff --git a/src/lib/components/navigation/UserMenu.svelte b/src/lib/components/navigation/UserMenu.svelte
index f5249c497..a8ca6dd23 100644
--- a/src/lib/components/navigation/UserMenu.svelte
+++ b/src/lib/components/navigation/UserMenu.svelte
@@ -2,7 +2,6 @@
   import type { User } from "@/api/types";
 
   import { _ } from "svelte-i18n";
-  import { page } from "$app/stores";
 
   import Dropdown, { closeDropdown } from "@/common/Dropdown2.svelte";
   import SidebarItem from "../sidebar/SidebarItem.svelte";

From 8d70c0320cfb1d0cd846b76c2a7beb0ed71d8085 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 24 Apr 2024 17:03:08 -0400
Subject: [PATCH 2/2] i18n for routes

---
 src/langs/json/en.json                        | 38 ++++++++++++++++---
 .../projects/ProjectListItem.svelte           |  4 +-
 src/routes/app/+page.svelte                   | 13 ++++---
 src/routes/app/add-ons/+page.svelte           |  4 +-
 src/routes/app/projects/+page.svelte          |  9 +++--
 .../app/projects/[id]-[slug]/+page.svelte     | 28 ++++++++------
 src/routes/app/sidebar/AddOns.svelte          | 10 +++--
 src/routes/app/sidebar/Projects.svelte        | 18 ++++++---
 src/routes/app/upload/+page.svelte            |  7 ++--
 9 files changed, 86 insertions(+), 45 deletions(-)

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 7442ccef0..061895835 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -1,12 +1,13 @@
 {
   "common": {
     "emailAddress": "Email address",
-    "loading": "Loading...",
+    "loading": "Loading…",
     "documentCloud": "DocumentCloud",
     "home": "Home",
     "new": "New",
     "learnMore": "Learn more",
-    "or": "or"
+    "or": "or",
+    "explore": "Explore"
   },
   "homeTemplate": {
     "signedIn": "Signed in as {name}",
@@ -16,7 +17,10 @@
     "goToApp": "Go to app"
   },
   "inputs": {
-    "required": "Required"
+    "required": "Required",
+    "selectAll": "Select all",
+    "selected": "selected",
+    "resultsCount": "Showing {n, number} of {total, number} results"
   },
   "access": {
     "access": "Access",
@@ -372,6 +376,8 @@
     "contactUs": "<a href={contact} target=\"_blank\">Contact us</a> with bug reports, questions, and suggestions."
   },
   "uploadDialog": {
+    "title": "Upload documents",
+    "description": "Select or drag a document to begin the document upload process. You will then be able to edit document information.",
     "docUpload": "Document Upload",
     "docUploadProj": "Document Upload to {title}",
     "selectDocument": "Select or drag a document to begin the document upload process. You will then be able to edit document information.",
@@ -638,7 +644,17 @@
     "orgDocuments": "{name}’s Documents",
     "newProject": "New Project",
     "createProject": "Create your first project by clicking “New Project” above.",
-    "pinsEmpty": "Pinned projects will appear here for quick access"
+    "pinsEmpty": "Pinned projects will appear here for quick access",
+    "private": "Private Project",
+    "public": "Public Project",
+    "loading": "Loading project documents…",
+    "empty": "This project is empty",
+    "error": "Error loading project documents",
+    "viewInSearch": "View in Document Search",
+    "yours": "Your Projects",
+    "shared": "Shared with you",
+    "none": "No projects found",
+    "create": "Create project"
   },
   "organizations": {
     "sameOrgUsers": "Users in organization"
@@ -783,6 +799,7 @@
     "source": "Source: {source}",
     "actions": "Document Actions",
     "share": "Share",
+    "shareEmbed": "Share & Embed",
     "shareDesc": "Create an embed or share on social media.",
     "annotate": "Add Note",
     "annotateDesc": "Leave a public, private or shared note, which can be embedded within an article.",
@@ -799,7 +816,18 @@
     "privateNote": "Add Private Note",
     "privateNoteDesc": "Leave a public, private or shared note, which can be embedded within an article.",
     "revisions": "Revision History",
-    "revisionsDesc": "Toggle revision history and view previous versions of your document."
+    "revisionsDesc": "Toggle revision history and view previous versions of your document.",
+    "collaborate": "Manage Collaborators",
+    "edit": "Edit",
+    "upload": "Upload Documents",
+    "addons": {
+      "title": "Add-Ons",
+      "pinned": "Pinned add-ons will appear here"
+    },
+    "projects": {
+      "title": "Projects",
+      "pinned": "Pinned projects will appear here"
+    }
   },
   "viewer": {
     "notFound": "Document not found",
diff --git a/src/lib/components/projects/ProjectListItem.svelte b/src/lib/components/projects/ProjectListItem.svelte
index c855ecfda..42cf3697e 100644
--- a/src/lib/components/projects/ProjectListItem.svelte
+++ b/src/lib/components/projects/ProjectListItem.svelte
@@ -21,11 +21,11 @@
         <h3 class="project-title">{project.title}</h3>
       </div>
       {#if project.private}
-        <span class="small center center-self" title="Private Project"
+        <span class="small center center-self" title={$_("projects.private")}
           ><Lock16 /></span
         >
       {:else}
-        <span class="small center center-self" title="Public Project"
+        <span class="small center center-self" title={$_("projects.public")}
           ><Globe16 /></span
         >
       {/if}
diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
index c3b0fe4a6..2ae771979 100644
--- a/src/routes/app/+page.svelte
+++ b/src/routes/app/+page.svelte
@@ -49,7 +49,7 @@
         <Search name="q" {query} slot="center" />
       </PageToolbar>
       {#await searchResults}
-        <Empty icon={Hourglass24}>Loading…</Empty>
+        <Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
       {:then results}
         <ResultsList
           results={results.results}
@@ -76,16 +76,17 @@
             on:change={selectAll}
           />
           {#if $selected.length > 0}
-            {$selected.length.toLocaleString()} selected
+            {$selected.length.toLocaleString()} {$_("inputs.selected")}
           {:else}
-            Select all
+            {$_("inputs.selectAll")}
           {/if}
         </label>
 
         <svelte:fragment slot="right">
           {#if $visible && $total}
-            Showing {$visible.size.toLocaleString()} of {$total.toLocaleString()}
-            results
+            {$_("inputs.resultsCount", {
+              values: { n: $visible.size, total: $total },
+            })}
           {/if}
         </svelte:fragment>
       </PageToolbar>
@@ -95,7 +96,7 @@
   <svelte:fragment slot="action">
     <SignedIn>
       <Button mode="primary" href="/app/upload/"
-        ><PlusCircle16 /> Upload Documents</Button
+        ><PlusCircle16 />{$_("sidebar.upload")}</Button
       >
       <Actions />
       <AddOns pinnedAddOns={data.pinnedAddons} />
diff --git a/src/routes/app/add-ons/+page.svelte b/src/routes/app/add-ons/+page.svelte
index dd15175bf..704ead201 100644
--- a/src/routes/app/add-ons/+page.svelte
+++ b/src/routes/app/add-ons/+page.svelte
@@ -95,12 +95,12 @@
         </div>
       {/if}
       {#await data.addons}
-        <Empty icon={Hourglass24}>Loading…</Empty>
+        <Empty icon={Hourglass24}>{$_("addonBrowserDialog.loading")}</Empty>
       {:then page}
         {#each page.results as addon}
           <ListItem {addon} />
         {:else}
-          <Empty icon={Plug24}>No Add-Ons Found</Empty>
+          <Empty icon={Plug24}>{$_("addonBrowserDialog.empty")}</Empty>
         {/each}
       {:catch error}
         <Error>{String(error)}</Error>
diff --git a/src/routes/app/projects/+page.svelte b/src/routes/app/projects/+page.svelte
index 0ee16daf3..d7a0d41eb 100644
--- a/src/routes/app/projects/+page.svelte
+++ b/src/routes/app/projects/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { FileDirectory24, People16, Person16 } from "svelte-octicons";
+  import { _ } from "svelte-i18n";
 
   import { goto } from "$app/navigation";
   import { page } from "$app/stores";
@@ -34,11 +35,11 @@
     <Flex direction="column">
       <SidebarItem active={data.list === "owned"} href="?list=owned">
         <Person16 />
-        Your Projects
+        {$_("projects.yours")}
       </SidebarItem>
       <SidebarItem active={data.list === "shared"} href="?list=shared">
         <People16 />
-        Shared with you
+        {$_("projects.shared")}
       </SidebarItem>
     </Flex>
   </svelte:fragment>
@@ -51,13 +52,13 @@
     {#each data.projects as project}
       <ProjectListItem {project} />
     {:else}
-      <Empty icon={FileDirectory24}>No projects found</Empty>
+      <Empty icon={FileDirectory24}>{$_("projects.none")}</Empty>
     {/each}
 
     <PageToolbar slot="footer"></PageToolbar>
   </ContentLayout>
 
   <svelte:fragment slot="action">
-    <Button mode="primary" href="/create">Create Project</Button>
+    <Button mode="primary" href="#create">{$_("projects.create")}</Button>
   </svelte:fragment>
 </MainLayout>
diff --git a/src/routes/app/projects/[id]-[slug]/+page.svelte b/src/routes/app/projects/[id]-[slug]/+page.svelte
index edb9647f4..d58e6890a 100644
--- a/src/routes/app/projects/[id]-[slug]/+page.svelte
+++ b/src/routes/app/projects/[id]-[slug]/+page.svelte
@@ -7,6 +7,7 @@
     Search16,
     Share16,
   } from "svelte-octicons";
+  import { _ } from "svelte-i18n";
 
   import MainLayout from "@/lib/components/layouts/MainLayout.svelte";
   import ContentLayout from "@/lib/components/layouts/ContentLayout.svelte";
@@ -51,10 +52,10 @@
       <Search name="q" {query} slot="center" />
     </PageToolbar>
     {#await documentSearch}
-      <Empty icon={Hourglass24}>Loading project documents…</Empty>
+      <Empty icon={Hourglass24}>{$_("projects.loading")}</Empty>
     {:then documentSearchResults}
       {#if !query && !documentSearchResults.results.length}
-        <Empty icon={FileDirectory24}>This project is empty</Empty>
+        <Empty icon={FileDirectory24}>{$_("projects.empty")}</Empty>
       {:else}
         <ResultsList
           results={documentSearchResults.results}
@@ -64,29 +65,30 @@
         />
       {/if}
     {:catch}
-      <Error>Error loading project documents</Error>
+      <Error>{$_("projects.error")}</Error>
     {/await}
     <PageToolbar slot="footer">
       <label slot="left" class="select-all">
         <input
           type="checkbox"
           name="select_all"
-          checked={$selected.length === $visible.size}
+          checked={$selected.length > 0 && $selected.length === $visible.size}
           indeterminate={$selected.length > 0 &&
             $selected.length < $visible.size}
           on:change={selectAll}
         />
         {#if $selected.length > 0}
-          {$selected.length.toLocaleString()} selected
+          {$selected.length.toLocaleString()} {$_("inputs.selected")}
         {:else}
-          Select all
+          {$_("inputs.selectAll")}
         {/if}
       </label>
 
       <svelte:fragment slot="right">
         {#if $visible && $total}
-          Showing {$visible.size.toLocaleString()} of {$total.toLocaleString()}
-          results
+          {$_("inputs.resultsCount", {
+            values: { n: $visible.size, total: $total },
+          })}
         {/if}
       </svelte:fragment>
     </PageToolbar>
@@ -94,15 +96,17 @@
 
   <svelte:fragment slot="action">
     <Flex direction="column">
-      <SidebarItem href="#edit"><Pencil16 /> Edit</SidebarItem>
+      <SidebarItem href="#edit"><Pencil16 />{$_("sidebar.edit")}</SidebarItem>
       <SidebarItem href="#collaborate"
-        ><People16 /> Manage Collaborators</SidebarItem
+        ><People16 />{$_("sidebar.collaborate")}</SidebarItem
+      >
+      <SidebarItem href="#share"
+        ><Share16 />{$_("sidebar.shareEmbed")}</SidebarItem
       >
-      <SidebarItem href="#share"><Share16 /> Share & Embed</SidebarItem>
     </Flex>
     <hr class="divider" />
     <SidebarItem href={projectSearchUrl(project)}>
-      <Search16 /> View in Document Search
+      <Search16 />{$_("projects.viewInSearch")}
     </SidebarItem>
   </svelte:fragment>
 </MainLayout>
diff --git a/src/routes/app/sidebar/AddOns.svelte b/src/routes/app/sidebar/AddOns.svelte
index 72b0f54e7..b99227579 100644
--- a/src/routes/app/sidebar/AddOns.svelte
+++ b/src/routes/app/sidebar/AddOns.svelte
@@ -3,6 +3,8 @@
   import type { AddOnListItem } from "@/addons/types";
 
   import { Book16, Hourglass24, Pin24, Plug16 } from "svelte-octicons";
+  import { _ } from "svelte-i18n";
+
   import Action from "$lib/components/common/Action.svelte";
   import Empty from "$lib/components/common/Empty.svelte";
   import Flex from "$lib/components/common/Flex.svelte";
@@ -15,13 +17,13 @@
 </script>
 
 <SidebarGroup>
-  <SidebarItem slot="title"><Plug16 /> Add-Ons</SidebarItem>
+  <SidebarItem slot="title"><Plug16 />{$_("sidebar.addons.title")}</SidebarItem>
   <a href="/app/add-ons/" slot="action">
-    <Action icon={Book16}>Explore</Action>
+    <Action icon={Book16}>{$_("common.explore")}</Action>
   </a>
   <Flex direction="column" gap={0}>
     {#await pinnedAddOns}
-      <Empty icon={Hourglass24}>Loading…</Empty>
+      <Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
     {:then addons}
       {#each addons.results as addon}
         <SidebarItem small href={`/app/add-ons/${addon.repository}/`}>
@@ -29,7 +31,7 @@
           {addon.name}
         </SidebarItem>
       {:else}
-        <Empty icon={Pin24}>Pinned add-ons will appear here</Empty>
+        <Empty icon={Pin24}>{$_("sidebar.addons.pinned")}</Empty>
       {/each}
     {/await}
   </Flex>
diff --git a/src/routes/app/sidebar/Projects.svelte b/src/routes/app/sidebar/Projects.svelte
index 07b7b2fa9..f4b930415 100644
--- a/src/routes/app/sidebar/Projects.svelte
+++ b/src/routes/app/sidebar/Projects.svelte
@@ -7,6 +7,7 @@
     FileDirectory24,
     Hourglass24,
   } from "svelte-octicons";
+  import { _ } from "svelte-i18n";
 
   import Pin from "@/common/Pin.svelte";
   import Action from "@/lib/components/common/Action.svelte";
@@ -23,21 +24,26 @@
 </script>
 
 <SidebarGroup>
-  <SidebarItem slot="title"><FileDirectory16 /> Projects</SidebarItem>
-  <a href="/app/projects" slot="action"
-    ><Action icon={Book16}>Explore</Action></a
+  <SidebarItem slot="title"
+    ><FileDirectory16 />{$_("sidebar.projects.title")}</SidebarItem
+  >
+  <a href="/app/projects/" slot="action"
+    ><Action icon={Book16}>{$_("common.explore")}</Action></a
   >
   <Flex direction="column" gap={0}>
     {#await pinned}
-      <Empty icon={Hourglass24}>Loading pinned projects…</Empty>
+      <Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
     {:then projects}
       {#each projects as project}
-        <SidebarItem small href={`/app/projects/${project.id}-${project.slug}`}>
+        <SidebarItem
+          small
+          href={`/app/projects/${project.id}-${project.slug}/`}
+        >
           <Pin active={project.pinned} />
           {project.title}
         </SidebarItem>
       {:else}
-        <Empty icon={FileDirectory24}>Pinned projects will appear here</Empty>
+        <Empty icon={FileDirectory24}>{$_("sidebar.projects.pinned")}</Empty>
       {/each}
     {/await}
   </Flex>
diff --git a/src/routes/app/upload/+page.svelte b/src/routes/app/upload/+page.svelte
index ccd08e034..23d451ffe 100644
--- a/src/routes/app/upload/+page.svelte
+++ b/src/routes/app/upload/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from "$app/stores";
+  import { _ } from "svelte-i18n";
 
-  import Flex from "$lib/components/common/Flex.svelte";
   import DocumentUpload from "$lib/components/forms/DocumentUpload.svelte";
 
   // using $page.form captures the correct type from applyAction
@@ -17,7 +17,7 @@
 <div class="card">
   <DocumentUpload {csrf_token} {projects}>
     <header>
-      <h1 class="title">Upload documents</h1>
+      <h1 class="title">{$_("uploadDialog.title")}</h1>
 
       {#if form?.success}
         <p class="description">
@@ -29,8 +29,7 @@
         </p>
       {:else}
         <p class="description">
-          Select or drag a document to begin the document upload process. You
-          will then be able to edit document information.
+          {$_("uploadDialog.description")}
         </p>
       {/if}
     </header>