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

src/pages/Search.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Link, useSearchParams } from "react-router";
-import { t } from "@lingui/core/macro"
+import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { AppHeader } from "../components/AppHeader.tsx";
 import { SearchBar } from "../components/SearchBar.tsx";
@@ -203,11 +203,15 @@ export function Search() {
         )}
 
         {state.status === "idle" && (
-          <p className="search-page-empty"><Trans>Enter a query to search.</Trans></p>
+          <p className="search-page-empty">
+            <Trans>Enter a query to search.</Trans>
+          </p>
         )}
 
         {state.status === "loading" && (
-          <p className="search-page-empty"><Trans>Searching…</Trans></p>
+          <p className="search-page-empty">
+            <Trans>Searching…</Trans>
+          </p>
         )}
 
         {state.status === "error" && (
@@ -236,10 +240,14 @@ export function Search() {
               )}
             <div ref={sentinelRef} />
             {state.dumps.loadingMore && (
-              <p className="feed-loading-more"><Trans>Loading more…</Trans></p>
+              <p className="feed-loading-more">
+                <Trans>Loading more…</Trans>
+              </p>
             )}
             {!state.dumps.hasMore && state.dumps.items.length > 0 && (
-              <p className="feed-end"><Trans>You've reached the end.</Trans></p>
+              <p className="feed-end">
+                <Trans>You've reached the end.</Trans>
+              </p>
             )}
           </>
         )}
@@ -270,7 +278,11 @@ export function Search() {
 
         {state.status === "loaded" && tab === "playlists" && (
           state.playlists.length === 0
-            ? <p className="search-page-empty">{t`No playlists match "${q}".`}</p>
+            ? (
+              <p className="search-page-empty">
+                {t`No playlists match "${q}".`}
+              </p>
+            )
             : (
               <ul className="dump-feed">
                 {state.playlists.map((p) => (