vibn-agent-runner/vibn-frontend/components/project/project-icon-rail.tsx

"use client";

import Link from "next/link";
import { usePathname, useParams } from "next/navigation";
import { Monitor, Smartphone, RotateCw, ExternalLink } from "lucide-react";
import { usePreviewToolbarStore } from "./preview-toolbar/preview-toolbar-state";
import { useAnatomy } from "@/components/project/use-anatomy";

interface Props {
  workspace: string;
  projectId: string;
  actions?: React.ReactNode;
}

export function ProjectIconRail({ workspace, projectId, actions }: Props) {
  const pathname = usePathname() ?? "";
  const projectBase = `/${workspace}/project/${projectId}`;
  const isPreviewActive =
    pathname === `${projectBase}/preview` ||
    pathname.startsWith(`${projectBase}/preview/`);

  return (
    <nav style={bar} aria-label="Project sections">
      {/* Dynamic Left Content Area (e.g. Preview Device Toggles & URL bar) */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          flex: 1,
          minWidth: 0,
        }}
      >
        {isPreviewActive && <PreviewDeviceToggles />}
      </div>

      {/* Right Content Area (Segmented Control & Publish Button) */}
      <div
        style={{
          display: "flex",
          justifyContent: "flex-end",
          alignItems: "center",
          gap: 12,
        }}
      >
        <div style={primaryGroup}>
          <Link
            href={`${projectBase}/preview`}
            style={{
              padding: "6px 14px",
              fontSize: "0.8rem",
              fontWeight: 500,
              borderRadius: 6,
              textDecoration: "none",
              background: isPreviewActive ? "#fff" : "transparent",
              color: isPreviewActive ? "#18181b" : "#71717a",
              boxShadow: isPreviewActive
                ? "0 1px 2px rgba(0,0,0,0.05)"
                : "none",
              transition: "all 0.15s ease",
            }}
          >
            Preview
          </Link>
          <Link
            href={`${projectBase}/plan`}
            style={{
              padding: "6px 14px",
              fontSize: "0.8rem",
              fontWeight: 500,
              borderRadius: 6,
              textDecoration: "none",
              background: !isPreviewActive ? "#fff" : "transparent",
              color: !isPreviewActive ? "#18181b" : "#71717a",
              boxShadow: !isPreviewActive
                ? "0 1px 2px rgba(0,0,0,0.05)"
                : "none",
              transition: "all 0.15s ease",
            }}
          >
            Dashboard
          </Link>
        </div>

        {actions}
      </div>
    </nav>
  );
}

function PreviewDeviceToggles() {
  const deviceMode = usePreviewToolbarStore((s) => s.deviceMode);
  const setDeviceMode = usePreviewToolbarStore((s) => s.setDeviceMode);
  const triggerRefresh = usePreviewToolbarStore((s) => s.triggerRefresh);

  const params = useParams();
  const projectId = params?.projectId as string;
  const { anatomy } = useAnatomy(projectId);

  const previews = anatomy?.hosting.previews ?? [];
  const running = previews.find((p) => p.state === "running");
  const displayUrl = running?.url ?? "";

  return (
    <div
      style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}
    >
      <div
        style={{
          display: "flex",
          gap: 4,
          background: "#f4f4f5",
          padding: 4,
          borderRadius: 8,
          border: "1px solid #e4e4e7",
        }}
      >
        <button
          onClick={triggerRefresh}
          title="Reload Preview"
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: 28,
            height: 26,
            borderRadius: 6,
            border: "none",
            cursor: "pointer",
            transition: "all 0.15s",
            background: "transparent",
            color: "#71717a",
            marginRight: 4,
          }}
          onMouseEnter={(e) => (e.currentTarget.style.color = "#18181b")}
          onMouseLeave={(e) => (e.currentTarget.style.color = "#71717a")}
        >
          <RotateCw size={14} />
        </button>

        <div
          style={{
            width: 1,
            height: 16,
            background: "#e4e4e7",
            alignSelf: "center",
            marginRight: 4,
          }}
        />

        <button
          onClick={() => setDeviceMode("desktop")}
          style={{
            display: "flex",
            alignItems: "center",
            gap: 6,
            padding: "4px 10px",
            borderRadius: 6,
            fontSize: "0.75rem",
            fontWeight: 500,
            border: "none",
            cursor: "pointer",
            transition: "all 0.15s",
            background: deviceMode === "desktop" ? "#ffffff" : "transparent",
            color: deviceMode === "desktop" ? "#18181b" : "#71717a",
            boxShadow:
              deviceMode === "desktop" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
          }}
        >
          <Monitor size={14} />
          Desktop
        </button>
        <button
          onClick={() => setDeviceMode("mobile")}
          style={{
            display: "flex",
            alignItems: "center",
            gap: 6,
            padding: "4px 10px",
            borderRadius: 6,
            fontSize: "0.75rem",
            fontWeight: 500,
            border: "none",
            cursor: "pointer",
            transition: "all 0.15s",
            background: deviceMode === "mobile" ? "#ffffff" : "transparent",
            color: deviceMode === "mobile" ? "#18181b" : "#71717a",
            boxShadow:
              deviceMode === "mobile" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
          }}
        >
          <Smartphone size={14} />
          Mobile
        </button>
      </div>

      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 6,
          background: "#fafafa",
          border: "1px solid #e4e4e7",
          padding: "4px 12px",
          borderRadius: 8,
          height: 34,
          flex: 1, // Let the URL bar grow to fill the header space
          minWidth: 320,
          color: "#71717a",
          fontSize: "0.75rem",
        }}
      >
        <span style={{ opacity: 0.6 }}>🌐</span>
        <input
          type="text"
          value={displayUrl}
          readOnly
          placeholder="No dev server running..."
          style={{
            background: "transparent",
            border: "none",
            outline: "none",
            width: "100%",
            color: "#18181b",
            fontSize: "0.75rem",
            textOverflow: "ellipsis",
          }}
        />
        {displayUrl && (
          <a
            href={displayUrl}
            target="_blank"
            rel="noreferrer"
            title="Open preview in new tab"
            style={{ color: "#71717a", display: "flex", marginLeft: 4 }}
          >
            <ExternalLink size={14} />
          </a>
        )}
      </div>
    </div>
  );
}

const bar: React.CSSProperties = {
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  flex: 1,
  minWidth: 0,
  height: "100%",
  padding: "0 16px",
  gap: 12,
  boxSizing: "border-box",
  background: "#fafafa",
  borderBottom: "1px solid #e4e4e7",
  fontFamily: '"Outfit", "Inter", ui-sans-serif, sans-serif',
};

const primaryGroup: React.CSSProperties = {
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  gap: 2,
  background: "#f4f4f5",
  padding: 4,
  borderRadius: 8,
  border: "1px solid #e4e4e7",
};