v3: localization fixes, char counters & limits on all text fields, ux fixes

src/components/NewPlaylistForm.tsx

@@ -1,4 +1,6 @@
 import { useState } from "react";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import type { Playlist } from "../model.ts";
 import { Modal } from "./Modal.tsx";
 import { PlaylistCreateForm } from "./PlaylistCreateForm.tsx";
@@ -12,7 +14,7 @@ interface NewPlaylistFormProps {
 export function NewPlaylistForm(
   {
     onCreated,
-    toggleLabel = "+ New playlist",
+    toggleLabel,
     toggleClassName = "new-playlist-toggle",
   }: NewPlaylistFormProps,
 ) {
@@ -25,11 +27,11 @@ export function NewPlaylistForm(
         className={toggleClassName}
         onClick={() => setOpen(true)}
       >
-        {toggleLabel}
+        {toggleLabel ?? <Trans>+ New playlist</Trans>}
       </button>
 
       {open && (
-        <Modal title="New playlist" onClose={() => setOpen(false)}>
+        <Modal title={t`New playlist`} onClose={() => setOpen(false)}>
           <PlaylistCreateForm
             onCreated={(playlist) => {
               onCreated(playlist);