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

src/pages/Notifications.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router";
-import { t } from "@lingui/core/macro"
+import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 
 import { API_URL, NOTIFICATIONS_PAGE_SIZE } from "../config/api.ts";
@@ -315,7 +315,9 @@ export function Notifications() {
         </div>
 
         {state.status === "loading" && (
-          <p className="page-loading"><Trans>Loading…</Trans></p>
+          <p className="page-loading">
+            <Trans>Loading…</Trans>
+          </p>
         )}
         {state.status === "error" && (
           <ErrorCard title={t`Failed to load`} message={state.error} />
@@ -324,7 +326,9 @@ export function Notifications() {
         {state.status === "loaded" && state.items.length === 0 && (
           <div className="notifications-empty">
             <span className="notifications-empty-icon">🔕</span>
-            <p><Trans>Nothing here yet.</Trans></p>
+            <p>
+              <Trans>Nothing here yet.</Trans>
+            </p>
             <p className="notifications-empty-hint">
               <Trans>
                 You'll be notified when someone follows your playlists, upvotes
@@ -338,7 +342,11 @@ export function Notifications() {
           groupByDate(state.items).map(({ label, items }) => (
             <section key={label} className="notif-group">
               <h2 className="notif-group-label">
-                {label === "Today" ? t`Today` : label === "Yesterday" ? t`Yesterday` : t`Earlier`}
+                {label === "Today"
+                  ? t`Today`
+                  : label === "Yesterday"
+                  ? t`Yesterday`
+                  : t`Earlier`}
               </h2>
               <ul className="notification-list">
                 {items.map((n) => (
@@ -383,7 +391,9 @@ export function Notifications() {
             onClick={loadMore}
             disabled={state.loadingMore}
           >
-            {state.loadingMore ? <Trans>Loading…</Trans> : <Trans>Load more</Trans>}
+            {state.loadingMore
+              ? <Trans>Loading…</Trans>
+              : <Trans>Load more</Trans>}
           </button>
         )}
       </div>