Function FileInfoBar

web/components/file-viewer/FileInfoBar.tsx:54–98

({ tab }: FileInfoBarProps)

];

export function FileInfoBar({ tab }: FileInfoBarProps) {
  const { setMode } = useFileViewerStore();

  const lineCount = tab.content.split("\n").length;
  const byteSize = new TextEncoder().encode(tab.content).length;
  const langLabel = LANGUAGE_LABELS[tab.language] ?? tab.language;

  return (
    <div className="flex items-center justify-between px-3 py-1 border-t border-surface-800 bg-surface-950 text-xs text-surface-500">
      {/* Left: file stats */}
      <div className="flex items-center gap-3">
        <span className="text-surface-400">{langLabel}</span>
        <span>UTF-8</span>
        <span>{lineCount.toLocaleString()} lines</span>
        <span>{formatBytes(byteSize)}</span>
        {tab.isDirty && (
          <span className="text-yellow-500">● Unsaved changes</span>
        )}
      </div>

      {/* Right: mode switcher */}
      {!tab.isImage && (
        <div className="flex items-center gap-0.5 bg-surface-900 rounded px-1 py-0.5">
          {VIEW_MODES.map(({ mode, label, icon: Icon }) => (
            <button
              key={mode}
              onClick={() => setMode(tab.id, mode)}
              className={cn(
                "flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] transition-colors",
                tab.mode === mode
                  ? "bg-surface-700 text-surface-100"
                  : "text-surface-500 hover:text-surface-300"
              )}
              disabled={mode === "diff" && !tab.diff}
              title={mode === "diff" && !tab.diff ? "No diff available" : label}
            >
              <Icon className="w-3 h-3" />
              {label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}