im_webapp/web/src/features/messages/MessagesLayout.tsx

import { useEffect, useState } from 'react';

import { Outlet, useParams } from 'react-router-dom';

import { ChatListColumn } from '@/features/messages/ChatListColumn';
import { DetailColumn } from '@/features/messages/DetailColumn';
import { HistorySearchModal } from '@/features/messages/HistorySearchModal';
import { OfflineBanner } from '@/features/messages/OfflineBanner';
import type { MediaType } from '@/lib/api/messages';
import { useMediaQuery } from '@/lib/hooks';
import { useChatList } from '@/lib/tinode/hooks';

/**
 * The 4-tier responsive split described in the design handoff:
 *  - <640 and 640-959: list OR main, whichever the route implies (topicId present -> main; the
 *    conversation header then needs its own back-to-list affordance, since NavRail alone doesn't
 *    provide one at this tier -- see ConversationView).
 *  - 960-1279: list + main together, detail as an overlay drawer toggled by the header's "i" icon.
 *  - >=1280: list + main + detail all docked side by side.
 * Below 960px (both the two-column and single-column tiers), the detail panel instead pushes as a
 * full-page overlay -- README §1.4's "详情/设置等作为整页推入" convention -- since there's no room
 * to dock or drawer it in without covering the conversation entirely anyway.
 */
export function MessagesLayout() {
  const { topicId } = useParams();
  const [detailOpen, setDetailOpen] = useState(false);
  const [historyTab, setHistoryTab] = useState<'text' | MediaType | null>(null);
  const isDocked = useMediaQuery('(min-width: 1280px)');
  const showListOnNarrow = !topicId;
  const contacts = useChatList();
  const peerName = contacts.find((c) => c.topic === topicId)?.public?.fn || topicId || '';
  // The "i" button should read as active whenever the detail panel is actually visible right now --
  // always true when docked (>=1280px, no close affordance), otherwise whatever the drawer/full-page
  // toggle state is. Previously hardcoded to the breakpoint itself instead of this real state.
  const detailVisible = isDocked || detailOpen;

  // MessagesLayout is one long-lived instance reused across every conversation (route is
  // `:topicId`) -- a history-search modal left open while switching topics would otherwise keep
  // showing results for whichever topic it was opened against, not the one now on screen.
  useEffect(() => setHistoryTab(null), [topicId]);

  return (
    <div className="relative flex h-full w-full">
      <div className="relative flex h-full min-w-0 flex-1">
        <div className="absolute inset-x-0 top-0 z-10">
          <OfflineBanner />
        </div>
        <div className={`h-full w-full md:w-auto md:shrink-0 ${showListOnNarrow ? '' : 'hidden md:flex'}`}>
          <ChatListColumn />
        </div>
        <div className={`h-full min-w-0 flex-1 ${showListOnNarrow ? 'hidden md:block' : ''}`}>
          <Outlet context={{ onToggleDetail: () => setDetailOpen((v) => !v), detailVisible, onOpenHistory: setHistoryTab }} />
        </div>
      </div>
      {topicId ? (
        <div className="hidden h-full lg:block">
          <DetailColumn topicId={topicId} peerName={peerName} onOpenHistory={setHistoryTab} />
        </div>
      ) : null}
      {detailOpen && topicId ? (
        <div className="absolute inset-0 hidden md:block lg:hidden">
          <div className="absolute inset-0 bg-[#22262d]/25" onClick={() => setDetailOpen(false)} />
          <div className="absolute inset-y-0 right-0 shadow-[-8px_0_32px_rgba(0,0,0,0.12)]">
            <DetailColumn topicId={topicId} peerName={peerName} onClose={() => setDetailOpen(false)} onOpenHistory={setHistoryTab} />
          </div>
        </div>
      ) : null}
      {detailOpen && topicId ? (
        <div className="fixed inset-0 z-30 bg-white md:hidden">
          <DetailColumn topicId={topicId} peerName={peerName} onClose={() => setDetailOpen(false)} onOpenHistory={setHistoryTab} />
        </div>
      ) : null}
      {historyTab && topicId ? <HistorySearchModal topicId={topicId} initialTab={historyTab} onClose={() => setHistoryTab(null)} /> : null}
    </div>
  );
}