Translateable art tags feature

app/features/art/routes/art.new.tsx

@@ -271,6 +271,7 @@ function Description() {
 // note: not handling edge case where a tag was added by another user while this
 // user was adding a new art with the same tag -> will crash
 function Tags() {
+  const { t } = useTranslation(["art", "common"]);
   const data = useLoaderData<typeof loader>();
   const [creationMode, setCreationMode] = React.useState(false);
   const [tags, setTags] = React.useState<{ name?: string; id?: number }[]>(
@@ -314,29 +315,31 @@ function Tags() {
   return (
     <div className="stack xs items-start">
       <Label htmlFor="tags" className="mb-0">
-        Tags
+        {t("art:forms.tags.title")}
       </Label>
       <input type="hidden" name="tags" value={JSON.stringify(tags)} />
       {creationMode ? (
         <div className="art__creation-mode-switcher-container">
           <Button variant="minimal" onClick={() => setCreationMode(false)}>
-            Select from existing tags
+            {t("art:forms.tags.selectFromExisting")}
           </Button>
         </div>
       ) : (
         <div className="stack horizontal sm text-xs text-lighter art__creation-mode-switcher-container">
-          Can&apos;t find an existing tag?{" "}
+          {t("art:forms.tags.cantFindExisting")}{" "}
           <Button variant="minimal" onClick={() => setCreationMode(true)}>
-            Create a new one.
+            {t("art:forms.tags.addNew")}
           </Button>
         </div>
       )}
       {tags.length >= ART.TAGS_MAX_LENGTH ? (
-        <div className="text-sm text-warning">Max tags reached</div>
+        <div className="text-sm text-warning">
+          {t("art:forms.tags.maxReached")}
+        </div>
       ) : creationMode ? (
         <div className="stack horizontal sm items-center">
           <input
-            placeholder="Create a new tag"
+            placeholder={t("art:forms.tags.addNew.placeholder")}
             name="tag"
             value={newTagValue}
             onChange={(e) => setNewTagValue(e.target.value)}
@@ -347,7 +350,7 @@ function Tags() {
             }}
           />
           <Button size="tiny" variant="outlined" onClick={handleAddNewTag}>
-            Add
+            {t("common:actions.add")}
           </Button>
         </div>
       ) : (
@@ -359,7 +362,7 @@ function Tags() {
             value: String(t.id),
           }))}
           inputName="tags"
-          placeholder="Search existing tags"
+          placeholder={t("art:forms.tags.searchExisting.placeholder")}
           initialValue={null}
           onChange={(selection) => {
             if (!selection) return;

app/features/art/routes/art.tsx

@@ -70,7 +70,7 @@ export const loader = async ({ request }: LoaderArgs) => {
 };
 
 export default function ArtPage() {
-  const { t } = useTranslation(["art"]);
+  const { t } = useTranslation(["art", "common"]);
   const data = useLoaderData<typeof loader>();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -106,7 +106,7 @@ export default function ArtPage() {
             value: String(t.id),
           }))}
           inputName="tags"
-          placeholder="Filter by tag"
+          placeholder={t("art:filterByTag")}
           initialValue={null}
           onChange={(selection) => {
             if (!selection) return;
@@ -120,7 +120,7 @@ export default function ArtPage() {
       </div>
       {filteredTag ? (
         <div className="text-xs text-lighter stack md horizontal items-center">
-          Showing results filtered by #{filteredTag}{" "}
+          {t("art:filteringByTag", { tag: filteredTag })}
           <Button
             size="tiny"
             variant="minimal-destructive"
@@ -132,7 +132,7 @@ export default function ArtPage() {
               });
             }}
           >
-            Clear
+            {t("common:actions.clear")}
           </Button>
         </div>
       ) : null}

app/routes/u.$identifier/art.tsx

@@ -136,7 +136,9 @@ export default function UserArtPage() {
               }
               className="w-max"
             >
-              <option value={ALL_TAGS_KEY}>All ({data.arts.length})</option>
+              <option value={ALL_TAGS_KEY}>
+                {t("art:radios.all")} ({data.arts.length})
+              </option>
               {data.tagCounts.map(([tag, count]) => (
                 <option key={tag} value={tag}>
                   #{tag} ({count})

public/locales/en/art.json

@@ -5,6 +5,8 @@
   "radios.all": "All",
   "radios.madeBy": "Art made by",
   "radios.madeFor": "Art made for",
+  "filterByTag": "Filter by tag",
+  "filteringByTag": "Showing results filtered by #{{tag}}",
   "commissionsOpen": "Commissions are open",
   "commissionsClosed": "Commissions are closed",
   "openCommissionsOnly": "Show artists with open commissions",
@@ -16,5 +18,12 @@
   "forms.linkedUsers.anotherOne": "Another one",
   "forms.linkedUsers.info": "Who is in the art? Linking users allows your art to show up on their profile.",
   "forms.showcase.title": "Showcase",
-  "forms.showcase.info": "Your showcase piece is shown on the common /art page. Only one piece can be your showcase at a time."
+  "forms.showcase.info": "Your showcase piece is shown on the common /art page. Only one piece can be your showcase at a time.",
+  "forms.tags.title": "Tags",
+  "forms.tags.selectFromExisting": "Select from existing tags",
+  "forms.tags.cantFindExisting": "Can't find an existing tag?",
+  "forms.tags.addNew": "Create a new one.",
+  "forms.tags.addNew.placeholder": "Create a new tag",
+  "forms.tags.searchExisting.placeholder": "Search existing tags",
+  "forms.tags.maxReached": "Max tags reached"
 }