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

src/pages/UserPlaylists.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from "react";
 import { Link, useParams } from "react-router";
-import { t } from "@lingui/core/macro"
+import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 
 import { API_URL, DEFAULT_PAGE_SIZE } from "../config/api.ts";
@@ -338,7 +338,9 @@ export function UserPlaylists() {
   if (state.status === "loading") {
     return (
       <PageShell>
-        <p className="page-loading"><Trans>Loading…</Trans></p>
+        <p className="page-loading">
+          <Trans>Loading…</Trans>
+        </p>
       </PageShell>
     );
   }
@@ -384,12 +386,17 @@ export function UserPlaylists() {
         <div className="profile-section-header">
           <h2 className="profile-section-title">
             <Trans>
-              Created ({created.items.length}{created.hasMore ? "+" : ""})
+              Created ({created.items.length}
+              {created.hasMore ? "+" : ""})
             </Trans>
           </h2>
         </div>
         {created.items.length === 0
-          ? <p className="empty-state"><Trans>No playlists yet.</Trans></p>
+          ? (
+            <p className="empty-state">
+              <Trans>No playlists yet.</Trans>
+            </p>
+          )
           : (
             <ul className="dump-feed">
               {created.items.map((p) => (
@@ -406,7 +413,9 @@ export function UserPlaylists() {
           )}
         <div ref={createdSentinelRef} />
         {created.loadingMore && (
-          <p className="feed-loading-more"><Trans>Loading more…</Trans></p>
+          <p className="feed-loading-more">
+            <Trans>Loading more…</Trans>
+          </p>
         )}
       </section>
 
@@ -414,7 +423,8 @@ export function UserPlaylists() {
         <div className="profile-section-header">
           <h2 className="profile-section-title">
             <Trans>
-              Followed ({followed.items.length}{followed.hasMore ? "+" : ""})
+              Followed ({followed.items.length}
+              {followed.hasMore ? "+" : ""})
             </Trans>
           </h2>
         </div>
@@ -433,7 +443,9 @@ export function UserPlaylists() {
           )}
         <div ref={followedSentinelRef} />
         {followed.loadingMore && (
-          <p className="feed-loading-more"><Trans>Loading more…</Trans></p>
+          <p className="feed-loading-more">
+            <Trans>Loading more…</Trans>
+          </p>
         )}
       </section>