Writing & reading polish: remove 280-char limit, serif reader font, progress bar

- ComposeBox: remove hard 280-char post limit (Nostr has none); show counter
  only after 3000 chars with yellow/red warnings at 3500/4000
- Article reader: switch from monospace to serif font (Georgia stack) at 17px
  for comfortable long-form reading; article preview gets serif at 15px
- ArticleView: add 2px accent-colored reading progress bar (sticky top,
  scroll-driven, smooth transition)
- Connection indicator: data-aware checking (wraps fetchEvents), 30s recent-
  fetch grace period, 25s offline grace (5 checks) before marking disconnected

src/components/article/ArticleView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef, useCallback } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
@@ -121,6 +121,25 @@ export function ArticleView() {
   const readingTime = Math.max(1, Math.ceil(wordCount / 230));
   const bookmarked = event?.id ? isBookmarked(event.id) : false;
 
+  // Reading progress bar
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [progress, setProgress] = useState(0);
+
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollTop, scrollHeight, clientHeight } = el;
+    const max = scrollHeight - clientHeight;
+    setProgress(max > 0 ? (scrollTop / max) * 100 : 0);
+  }, []);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !event) return;
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [event, handleScroll]);
+
   const handleReaction = async () => {
     if (!event?.id || reacted) return;
     setReacted(true);
@@ -179,7 +198,16 @@ export function ArticleView() {
       </header>
 
       {/* Body */}
-      <div className="flex-1 overflow-y-auto">
+      <div ref={scrollRef} className="flex-1 overflow-y-auto">
+        {/* Reading progress bar */}
+        {event && (
+          <div className="sticky top-0 z-10 h-0.5 bg-transparent">
+            <div
+              className="h-full bg-accent transition-[width] duration-150 ease-out"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        )}
         {loading && (
           <div className="px-8 py-16 text-text-dim text-[12px] text-center">Loading article…</div>
         )}

src/components/feed/ComposeBox.tsx

@@ -36,8 +36,9 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
   }, [text]);
 
   const charCount = text.length;
-  const overLimit = charCount > 280;
-  const canPost = text.trim().length > 0 && !overLimit && !publishing && !uploading;
+  const warnLimit = charCount > 3500;
+  const overLimit = charCount > 4000;
+  const canPost = text.trim().length > 0 && !publishing && !uploading;
 
   // Insert a URL at the current cursor position in the textarea
   const insertUrl = (url: string) => {
@@ -225,13 +226,13 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
           )}
 
           <div className="flex items-center justify-between mt-1">
-            <span className={`text-[10px] ${overLimit ? "text-danger" : "text-text-dim"}`}>
+            <span className={`text-[10px] ${overLimit ? "text-danger" : warnLimit ? "text-warning" : "text-text-dim"}`}>
               {uploading ? (
                 <span className="inline-flex items-center gap-1">
                   <span className="w-3 h-3 border border-accent border-t-transparent rounded-full animate-spin" />
                   uploading…
                 </span>
-              ) : charCount > 0 ? `${charCount}/280` : ""}
+              ) : charCount > 3000 ? `${charCount}` : ""}
               {!uploading && charCount > 0 && localStorage.getItem(COMPOSE_DRAFT_KEY) && (
                 <span className="ml-1 text-text-dim">(draft)</span>
               )}