dchain/desktop/src/sections/feed/FeedPane.tsx

// FeedPane — the right pane. A two-column split: scrollable post list
// on the left (~430px), thread/post detail on the right.

import React, { useCallback, useEffect, useState } from 'react';
import { useStore, type FeedTab } from '@/lib/store';
import {
  fetchForYou, fetchTrending, fetchTimeline, fetchHashtag, fetchAuthorPosts,
  type FeedPostItem,
} from '@/lib/feed';
import { PostList } from './PostList';
import { PostDetail } from './PostDetail';
import { ComposeModal } from './ComposeModal';

export function FeedPane(): React.ReactElement {
  const tab      = useStore(s => s.feedTab);
  const selected = useStore(s => s.feedSelectedPost);
  const keyFile  = useStore(s => s.keyFile);

  const [posts,    setPosts]    = useState<FeedPostItem[]>([]);
  const [loading,  setLoading]  = useState(true);
  const [composing, setComposing] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const list = await fetchByTab(tab, keyFile?.pub_key);
      setPosts(list);
    } catch {
      setPosts([]);
    } finally {
      setLoading(false);
    }
  }, [tab, keyFile]);

  useEffect(() => { load(); }, [load]);

  // Ctrl/Cmd+N → compose (scoped to Feed being active).
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'n') {
        e.preventDefault();
        setComposing(true);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <div style={{ height: '100%', display: 'flex' }}>
      <div style={{
        width: 430, flexShrink: 0, borderRight: '1px solid #1f1f1f',
        overflowY: 'auto', background: '#000',
      }}>
        {/* Header strip — tab label + compose CTA */}
        <div style={{
          position: 'sticky', top: 0, zIndex: 1,
          padding: '10px 14px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          borderBottom: '1px solid #1f1f1f',
          background: 'rgba(0,0,0,0.9)', backdropFilter: 'blur(6px)',
        }}>
          <div style={{ color: '#fff', fontSize: 14, fontWeight: 700 }}>
            {titleFor(tab)}
          </div>
          <button
            onClick={() => setComposing(true)}
            style={{
              padding: '6px 12px', borderRadius: 999, border: 'none',
              background: '#1d9bf0', color: '#fff',
              fontSize: 12, fontWeight: 700, cursor: 'pointer',
            }}
            title="Ctrl/Cmd+N"
          >New post</button>
        </div>

        {loading ? (
          <div style={{
            padding: 40, textAlign: 'center', color: '#6a6a6a', fontSize: 13,
          }}>Loading…</div>
        ) : posts.length === 0 ? (
          <div style={{
            padding: 40, textAlign: 'center', color: '#6a6a6a', fontSize: 13,
          }}>No posts in this feed yet.</div>
        ) : (
          <PostList posts={posts} activeID={selected} />
        )}
      </div>

      <div style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
        <PostDetail postID={selected} onDeleted={load} />
      </div>

      {composing && keyFile && (
        <ComposeModal
          onClose={() => setComposing(false)}
          onPublished={() => {
            setComposing(false);
            // Re-pull so the new post shows up immediately.
            setTimeout(load, 800);
          }}
        />
      )}
    </div>
  );
}

function titleFor(tab: FeedTab): string {
  switch (tab.kind) {
    case 'foryou':   return 'For You';
    case 'timeline': return 'Following';
    case 'trending': return 'Trending 24h';
    case 'hashtag':  return `#${tab.tag}`;
    case 'author':   return 'Author wall';
  }
}

async function fetchByTab(tab: FeedTab, selfPub: string | undefined): Promise<FeedPostItem[]> {
  switch (tab.kind) {
    case 'foryou':
      if (!selfPub) return fetchTrending(24, 30);
      return fetchForYou(selfPub, 30);
    case 'timeline':
      if (!selfPub) return [];
      return fetchTimeline(selfPub, { limit: 30 });
    case 'trending':
      return fetchTrending(24, 30);
    case 'hashtag':
      return fetchHashtag(tab.tag, 30);
    case 'author':
      return fetchAuthorPosts(tab.pub, { limit: 30 });
  }
}