feat(ui): Add node info loading state and increase post character limit

- Add nodeInfoLoaded state to track when node NSFW status is fetched
- Display loading indicator while node information is being retrieved
- Ensure loading state is set in both success and error cases
- Increase maximum post character limit from 400 to 600 characters
- Add getProfileHandle utility function to properly construct federated user profile links
- Include node domain in profile links for remote swarm users
- Update avatar and handle links to use full federated profile handles
- Improves UX by preventing premature NSFW gate display and supporting longer-form content

src/app/page.tsx

@@ -25,6 +25,7 @@ export default function Home() {
   const [replyingTo, setReplyingTo] = useState<Post | null>(null);
   const [feedType, setFeedType] = useState<'latest' | 'curated'>('latest');
   const [isNsfwNode, setIsNsfwNode] = useState(false);
+  const [nodeInfoLoaded, setNodeInfoLoaded] = useState(false);
   const [feedMeta, setFeedMeta] = useState<{
     algorithm: string;
     windowHours: number;
@@ -43,8 +44,11 @@ export default function Home() {
       .then(res => res.json())
       .then(data => {
         setIsNsfwNode(data.isNsfw || false);
+        setNodeInfoLoaded(true);
       })
-      .catch(() => {});
+      .catch(() => {
+        setNodeInfoLoaded(true);
+      });
   }, []);
 
   const loadFeed = async (type: 'latest' | 'curated') => {
@@ -171,7 +175,11 @@ export default function Home() {
       )}
 
       {/* NSFW node gate for unauthenticated users */}
-      {!user && isNsfwNode ? (
+      {!user && !nodeInfoLoaded ? (
+        <div style={{ padding: '48px', textAlign: 'center', color: 'var(--foreground-tertiary)' }}>
+          Loading...
+        </div>
+      ) : !user && isNsfwNode ? (
         <div style={{ padding: '48px', textAlign: 'center', color: 'var(--foreground-tertiary)', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
           <EyeOff size={48} style={{ marginBottom: '16px', opacity: 0.5 }} />
           <p style={{ fontSize: '16px', fontWeight: 500, color: 'var(--foreground-secondary)', marginBottom: '8px' }}>

src/components/Compose.tsx

@@ -31,7 +31,7 @@ export function Compose({ onPost, replyingTo, onCancelReply, placeholder = "What
     const [isNsfw, setIsNsfw] = useState(false);
     const [canPostNsfw, setCanPostNsfw] = useState(false);
     const [isNsfwNode, setIsNsfwNode] = useState(false);
-    const maxLength = 400;
+    const maxLength = 600;
     const remaining = maxLength - content.length;
 
     // Check if user can post NSFW content and if node is NSFW

src/components/PostCard.tsx

@@ -244,6 +244,21 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
 
     const postUrl = `/${post.author.handle}/posts/${post.id}`;
 
+    // Get the full handle for profile links (includes domain for remote users)
+    const getProfileHandle = () => {
+        // If handle already has domain, use it
+        if (post.author.handle.includes('@')) {
+            return post.author.handle;
+        }
+        // If this is a swarm post, append the node domain
+        if (post.nodeDomain) {
+            return `${post.author.handle}@${post.nodeDomain}`;
+        }
+        // Local user
+        return post.author.handle;
+    };
+    const profileHandle = getProfileHandle();
+
     // Decode HTML entities from federated posts (e.g., ’ -> ')
     const decodeHtmlEntities = (text: string): string => {
         const entities: Record<string, string> = {
@@ -346,7 +361,7 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
             {!isDetail && <Link href={postUrl} className="post-link-overlay" aria-label="View post" />}
 
             <div className="post-header">
-                <Link href={`/${post.author.handle}`} className="avatar-link" onClick={(e) => e.stopPropagation()}>
+                <Link href={`/${profileHandle}`} className="avatar-link" onClick={(e) => e.stopPropagation()}>
                     <div className="avatar">
                         {post.author.avatarUrl ? (
                             <img src={post.author.avatarUrl} alt={post.author.displayName} />
@@ -357,7 +372,7 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
                 </Link>
                 <div className="post-author">
                     <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-                        <Link href={`/${post.author.handle}`} className="post-handle" onClick={(e) => e.stopPropagation()}>
+                        <Link href={`/${profileHandle}`} className="post-handle" onClick={(e) => e.stopPropagation()}>
                             {post.author.displayName || post.author.handle}
                         </Link>
                         {post.bot && (