// ═══════════════════════════════════════════════════════════════════
// Plaaayground v2 — Split View Layout
// Bible Section 5: "Desktop: Side-by-side, resizable divider (default 40/60)"
// DD Pattern: Contained gestures, real-time panel resize, no lag
// Phase 4: AnimatePresence on mobile tab switch
// ═══════════════════════════════════════════════════════════════════

import { useState, type ReactNode } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import { cn } from "@/lib/utils";
import { MessageSquare, LayoutGrid } from "lucide-react";

interface SplitViewProps {
  /** Left panel content (Chat) */
  chatPanel: ReactNode;
  /** Right panel content (Board) */
  boardPanel: ReactNode;
  /** Optional class for the container */
  className?: string;
}

export function SplitView({ chatPanel, boardPanel, className }: SplitViewProps) {
  const [activeTab, setActiveTab] = useState<"chat" | "board">("chat");

  return (
    <div className={cn("flex-1 overflow-hidden h-full", className)}>
      {/* Desktop: Side-by-side resizable panels */}
      <div className="hidden md:flex h-full">
        <ResizablePanelGroup direction="horizontal" className="h-full">
          {/* Chat Panel — default 40% */}
          <ResizablePanel
            defaultSize={40}
            minSize={25}
            maxSize={60}
            className="h-full"
          >
            <div className="h-full overflow-hidden scroll-contain">
              {chatPanel}
            </div>
          </ResizablePanel>

          {/* Divider Handle */}
          <ResizableHandle
            withHandle
            className={cn(
              "w-[1px] bg-border hover:bg-brand/50 transition-colors duration-150",
              "data-[resize-handle-active]:bg-brand",
              "cursor-col-resize"
            )}
          />

          {/* Board Panel — default 60% */}
          <ResizablePanel
            defaultSize={60}
            minSize={30}
            maxSize={75}
            className="h-full"
          >
            <div className="h-full overflow-hidden scroll-contain">
              {boardPanel}
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>

      {/* Mobile/Tablet: Tab-based switching with transition */}
      <div className="flex flex-col h-full md:hidden">
        {/* Content — AnimatePresence for smooth tab switch */}
        <div className="flex-1 overflow-hidden relative">
          <AnimatePresence mode="wait" initial={false}>
            {activeTab === "chat" ? (
              <motion.div
                key="chat"
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -20 }}
                transition={{ duration: 0.15, ease: "easeOut" }}
                className="h-full overflow-hidden scroll-contain absolute inset-0"
              >
                {chatPanel}
              </motion.div>
            ) : (
              <motion.div
                key="board"
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: 20 }}
                transition={{ duration: 0.15, ease: "easeOut" }}
                className="h-full overflow-hidden scroll-contain absolute inset-0"
              >
                {boardPanel}
              </motion.div>
            )}
          </AnimatePresence>
        </div>

        {/* Tab Bar — fixed at bottom on mobile */}
        <div
          className={cn(
            "flex items-center h-12 border-t border-border/50 bg-white/80 backdrop-blur-xl",
            "shrink-0 safe-area-bottom"
          )}
        >
          <button
            onClick={() => setActiveTab("chat")}
            className={cn(
              "flex-1 flex items-center justify-center gap-2 h-full",
              "text-caption font-medium transition-colors duration-150",
              activeTab === "chat"
                ? "text-brand"
                : "text-muted-foreground hover:text-foreground"
            )}
          >
            <MessageSquare className="w-4 h-4" />
            Chat
          </button>
          <div className="w-px h-6 bg-border" />
          <button
            onClick={() => setActiveTab("board")}
            className={cn(
              "flex-1 flex items-center justify-center gap-2 h-full",
              "text-caption font-medium transition-colors duration-150",
              activeTab === "board"
                ? "text-brand"
                : "text-muted-foreground hover:text-foreground"
            )}
          >
            <LayoutGrid className="w-4 h-4" />
            Board
          </button>
        </div>
      </div>
    </div>
  );
}

export default SplitView;
SplitView

Source Code
