feat(reply modal): add content length check, better error display

2026-08-03 07:41:04 +02:00 · 2025-01-31 23:38:07 +01:00
parent 7ebe6c9c00
commit d861f894f1
36 changed files with 130 additions and 42 deletions
@@ -262,5 +262,7 @@
  "no_file_chosen": "لم يتم اختيار أي ملف",
  "error": "خطأ",
  "vote": "تصويت",
-  "warning": "تحذير"
+  "warning": "تحذير",
+  "comment_field_too_long": "التعليق طويل جدًا ({{length}}/2000).",
+  "field_too_long": "الحقل طويل جدًا."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "কোন ফাইল নির্বাচিত নয়",
  "error": "ত্রুটি",
  "vote": "ভোট",
-  "warning": "সতর্কতা"
+  "warning": "সতর্কতা",
+  "comment_field_too_long": "মন্তব্য খুব লম্বা ({{length}}/2000)।",
+  "field_too_long": "ফিল্ডটি খুব লম্বা।"
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Žádný soubor není vybrán",
  "error": "Chyba",
  "vote": "hlasování",
-  "warning": "Upozornění"
+  "warning": "Upozornění",
+  "comment_field_too_long": "Komentář je příliš dlouhý ({{length}}/2000).",
+  "field_too_long": "Pole je příliš dlouhé."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Ingen fil valgt",
  "error": "Fejl",
  "vote": "stem",
-  "warning": "Advarsel"
+  "warning": "Advarsel",
+  "comment_field_too_long": "Kommentar for lang ({{length}}/2000).",
+  "field_too_long": "Feltene er for lange."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Keine Datei ausgewählt",
  "error": "Fehler",
  "vote": "Abstimmung",
-  "warning": "Warnung"
+  "warning": "Warnung",
+  "comment_field_too_long": "Kommentar zu lang ({{length}}/2000).",
+  "field_too_long": "Das Feld ist zu lang."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Δεν έχει επιλεγεί αρχείο",
  "error": "Σφάλμα",
  "vote": "ψηφοφορία",
-  "warning": "Προειδοποίηση"
+  "warning": "Προειδοποίηση",
+  "comment_field_too_long": "Το σχόλιο είναι πολύ μεγάλο ({{length}}/2000).",
+  "field_too_long": "Το πεδίο είναι πολύ μεγάλο."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "No file chosen",
  "error": "Error",
  "vote": "vote",
-  "warning": "Warning"
+  "warning": "Warning",
+  "comment_field_too_long": "Comment too long ({{length}}/2000).",
+  "field_too_long": "Field too long."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Ningún archivo elegido",
  "error": "Error",
  "vote": "voto",
-  "warning": "Advertencia"
+  "warning": "Advertencia",
+  "comment_field_too_long": "Comentario demasiado largo ({{length}}/2000).",
+  "field_too_long": "Campo demasiado largo."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "فایلی انتخاب نشده است",
  "error": "خطا",
  "vote": "رای",
-  "warning": "هشدار"
+  "warning": "هشدار",
+  "comment_field_too_long": "کامنت خیلی طولانی است ({{length}}/2000).",
+  "field_too_long": "فیلد خیلی طولانی است."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Ei tiedostoa valittu",
  "error": "Virhe",
  "vote": "äänestä",
-  "warning": "Varoitus"
+  "warning": "Varoitus",
+  "comment_field_too_long": "Kommentti liian pitkä ({{length}}/2000).",
+  "field_too_long": "Kenttä liian pitkä."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Walang napiling file",
  "error": "Error",
  "vote": "bumoto",
-  "warning": "Babala"
+  "warning": "Babala",
+  "comment_field_too_long": "Napakahabang komento ({{length}}/2000).",
+  "field_too_long": "Ang field ay masyadong mahaba."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Aucun fichier choisi",
  "error": "Erreur",
  "vote": "vote",
-  "warning": "Avertissement"
+  "warning": "Avertissement",
+  "comment_field_too_long": "Commentaire trop long ({{length}}/2000).",
+  "field_too_long": "Champ trop long."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "לא נבחר קובץ",
  "error": "שגיאה",
  "vote": "הצבעה",
-  "warning": "אזהרה"
+  "warning": "אזהרה",
+  "comment_field_too_long": "התגובה ארוכה מדי ({{length}}/2000).",
+  "field_too_long": "המשדה ארוך מדי."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "कोई फ़ाइल नहीं चुनी गई",
  "error": "त्रुटि",
  "vote": "मत डालें",
-  "warning": "चेतावनी"
+  "warning": "चेतावनी",
+  "comment_field_too_long": "टिप्पणी बहुत लंबी है ({{length}}/2000)।",
+  "field_too_long": "क्षेत्र बहुत लंबा है।"
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Nincs fájl kiválasztva",
  "error": "Hiba",
  "vote": "szavazás",
-  "warning": "Figyelmeztetés"
+  "warning": "Figyelmeztetés",
+  "comment_field_too_long": "Túl hosszú hozzászólás ({{length}}/2000).",
+  "field_too_long": "A mező túl hosszú."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Tidak ada file yang dipilih",
  "error": "Kesalahan",
  "vote": "suara",
-  "warning": "Peringatan"
+  "warning": "Peringatan",
+  "comment_field_too_long": "Komentar terlalu panjang ({{length}}/2000).",
+  "field_too_long": "Kolom terlalu panjang."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Nessun file scelto",
  "error": "Errore",
  "vote": "vota",
-  "warning": "Avviso"
+  "warning": "Avviso",
+  "comment_field_too_long": "Commento troppo lungo ({{length}}/2000).",
+  "field_too_long": "Campo troppo lungo."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "ファイルが選択されていません",
  "error": "エラー",
  "vote": "投票",
-  "warning": "警告"
+  "warning": "警告",
+  "comment_field_too_long": "コメントが長すぎます ({{length}}/2000)。",
+  "field_too_long": "フィールドが長すぎます。"
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "선택된 파일이 없습니다",
  "error": "오류",
  "vote": "투표",
-  "warning": "경고"
+  "warning": "경고",
+  "comment_field_too_long": "댓글이 너무 깁니다 ({{length}}/2000).",
+  "field_too_long": "필드가 너무 깁니다."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "कोणताही फाइल निवडलेली नाही",
  "error": "त्रुटी",
  "vote": "मत",
-  "warning": "चेतावणी"
+  "warning": "चेतावणी",
+  "comment_field_too_long": "टिप्पणी खूप लांब आहे ({{length}}/2000).",
+  "field_too_long": "फील्ड खूप लांब आहे."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Geen bestand gekozen",
  "error": "Fout",
  "vote": "stem",
-  "warning": "Waarschuwing"
+  "warning": "Waarschuwing",
+  "comment_field_too_long": "Commentaar te lang ({{length}}/2000).",
+  "field_too_long": "Veld te lang."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Ingen fil valgt",
  "error": "Feil",
  "vote": "stemme",
-  "warning": "Advarsel"
+  "warning": "Advarsel",
+  "comment_field_too_long": "Kommentar for lang ({{length}}/2000).",
+  "field_too_long": "Feltet er for langt."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Nie wybrano żadnego pliku",
  "error": "Błąd",
  "vote": "głos",
-  "warning": "Ostrzeżenie"
+  "warning": "Ostrzeżenie",
+  "comment_field_too_long": "Komentarz za długi ({{length}}/2000).",
+  "field_too_long": "Pole jest za długie."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Nenhum arquivo escolhido",
  "error": "Erro",
  "vote": "voto",
-  "warning": "Aviso"
+  "warning": "Aviso",
+  "comment_field_too_long": "Comentário muito longo ({{length}}/2000).",
+  "field_too_long": "Campo muito longo."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Niciun fișier ales",
  "error": "Eroare",
  "vote": "vot",
-  "warning": "Avertisment"
+  "warning": "Avertisment",
+  "comment_field_too_long": "Comentariu prea lung ({{length}}/2000).",
+  "field_too_long": "Câmp prea lung."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Файл не выбран",
  "error": "Ошибка",
  "vote": "голосовать",
-  "warning": "Предупреждение"
+  "warning": "Предупреждение",
+  "comment_field_too_long": "Комментарий слишком длинный ({{length}}/2000).",
+  "field_too_long": "Поле слишком длинное."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Nuk është zgjedhur asnjë skedar",
  "error": "Gabim",
  "vote": "votim",
-  "warning": "Kujdes"
+  "warning": "Kujdes",
+  "comment_field_too_long": "Komentar shumë i gjatë ({{length}}/2000).",
+  "field_too_long": "Fusha është shumë e gjatë."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Ingen fil vald",
  "error": "Fel",
  "vote": "rösta",
-  "warning": "Varning"
+  "warning": "Varning",
+  "comment_field_too_long": "Kommentar för lång ({{length}}/2000).",
+  "field_too_long": "Fältet är för långt."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "ఎటువంటి ఫైల్ ఎంపిక చేయబడలేదు",
  "error": "దోషం",
  "vote": "ఐదు",
-  "warning": "హెచ్చరిక"
+  "warning": "హెచ్చరిక",
+  "comment_field_too_long": "కమెంట్ చాలా పొడుగ్గా ఉంది ({{length}}/2000).",
+  "field_too_long": "ఫీల్డ్ చాలా పొడుగ్గా ఉంది."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "ไม่มีไฟล์ที่เลือก",
  "error": "ข้อผิดพลาด",
  "vote": "โหวต",
-  "warning": "คำเตือน"
+  "warning": "คำเตือน",
+  "comment_field_too_long": "คอมเมนต์ยาวเกินไป ({{length}}/2000)",
+  "field_too_long": "ฟิลด์ยาวเกินไป"
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Hiçbir dosya seçilmedi",
  "error": "Hata",
  "vote": "oy",
-  "warning": "Uyarı"
+  "warning": "Uyarı",
+  "comment_field_too_long": "Yorum çok uzun ({{length}}/2000).",
+  "field_too_long": "Alan çok uzun."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Не вибрано жодного файлу",
  "error": "Помилка",
  "vote": "голос",
-  "warning": "Попередження"
+  "warning": "Попередження",
+  "comment_field_too_long": "Коментар занадто довгий ({{length}}/2000).",
+  "field_too_long": "Поле занадто довге."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "کوئی فائل منتخب نہیں کی گئی",
  "error": "غلطی",
  "vote": "ووٹ",
-  "warning": "چیتاونی"
+  "warning": "چیتاونی",
+  "comment_field_too_long": "تبصرہ بہت طویل ہے ({{length}}/2000).",
+  "field_too_long": "فیلڈ بہت طویل ہے۔"
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "Không có tệp nào được chọn",
  "error": "Lỗi",
  "vote": "bỏ phiếu",
-  "warning": "Cảnh báo"
+  "warning": "Cảnh báo",
+  "comment_field_too_long": "Bình luận quá dài ({{length}}/2000).",
+  "field_too_long": "Trường quá dài."
 }
@@ -262,5 +262,7 @@
  "no_file_chosen": "未选择任何文件",
  "error": "错误",
  "vote": "投票",
-  "warning": "警告"
+  "warning": "警告",
+  "comment_field_too_long": "评论太长 ({{length}}/2000)。",
+  "field_too_long": "字段太长。"
 }
@@ -72,18 +72,39 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
  }, [address, getExistingSigner, getNewSigner, setPublishReplyOptions, displayName]);

  const [error, setError] = useState<string | null>(null);
+  const [lengthError, setLengthError] = useState<string | null>(null);
+
+  const checkContentLength = useRef(
+    _.debounce((content: string, t: Function) => {
+      const length = content.trim().length;
+      if (length > 2000) {
+        setError(null);
+        setLengthError(`${t('error')}: ${t('comment_field_too_long', { length })}`);
+      } else {
+        setLengthError(null);
+      }
+    }, 1000),
+  ).current;

  const onPublishReply = () => {
    const currentContent = textRef.current?.value.slice(contentPrefix.length).trim() || '';
    const currentUrl = urlRef.current?.value.trim() || '';

    if (!currentContent && !currentUrl) {
-      setError(t('empty_comment_alert'));
+      setError(t('error') + ': ' + t('empty_comment_alert'));
      return;
    }

    if (currentUrl && !isValidURL(currentUrl)) {
-      setError(t('invalid_url_alert'));
+      setError(t('error') + ': ' + t('invalid_url_alert'));
+      return;
+    }
+
+    checkContentLength.cancel();
+    setLengthError(null);
+
+    if (currentContent.length > 2000) {
+      setError(t('error') + ': ' + t('field_too_long'));
      return;
    }

@@ -211,6 +232,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
    const formattedContent = formatMarkdown(contentWithoutPrefix);
    if (textRef.current && textRef.current.value !== formattedContent) {
      setPublishReplyOptions({ content: formattedContent });
+      checkContentLength(formattedContent, t);
    }
  };

@@ -321,11 +343,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
            {t('post')}
          </button>
        </div>
-        {error && (
-          <div className={styles.error}>
-            {t('error')}: {error}
-          </div>
-        )}
+        {lengthError ? <div className={styles.error}>{lengthError}</div> : error && <div className={styles.error}>{error}</div>}
        {!(isInAllView || isInSubscriptionsView) && offlineAlert}
      </div>
    </div>