Pien-Studio/apps/web/components/editor/editor-header.tsx

import React from "react";
import Link from "next/link";
import { Redo2, Undo2 } from "lucide-react";
import { UiPreferences } from "../ui-preferences";
import { dividerClass, hoverSubtleClass } from "../../lib/theme";

type EditorHeaderProps = {
  isDark: boolean;
  projectTitle: string;
  canvasWidth: number;
  canvasHeight: number;
  canUndo: boolean;
  canRedo: boolean;
  isDirty: boolean;
  labels: {
    file: string;
    edit: string;
    view: string;
    settings: string;
    save: string;
    exportPng: string;
    exportProjectFile: string;
    importImage: string;
    canvasSize: string;
    undo: string;
    redo: string;
    copy: string;
    cut: string;
    paste: string;
    preferences: string;
    panTool: string;
    pointerTool: string;
    unsavedChanges: string;
    saved: string;
  };
  onSave: () => void;
  onExportPng: () => void;
  onExportProjectFile: () => void;
  onImportImage: () => void;
  onOpenCanvasSize: () => void;
  onUndo: () => void;
  onRedo: () => void;
  onCopy: () => void;
  onCut: () => void;
  onPaste: () => void;
  onSetHandTool: () => void;
  onSetPointerTool: () => void;
};

export function EditorHeader({
  isDark,
  projectTitle,
  canvasWidth,
  canvasHeight,
  canUndo,
  canRedo,
  isDirty,
  labels,
  onSave,
  onExportPng,
  onExportProjectFile,
  onImportImage,
  onOpenCanvasSize,
  onUndo,
  onRedo,
  onCopy,
  onCut,
  onPaste,
  onSetHandTool,
  onSetPointerTool,
}: EditorHeaderProps) {
  const menuClass = `absolute left-0 top-full z-30 min-w-[180px] rounded border p-1 text-[11px] opacity-0 shadow-xl transition-opacity pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 hover:pointer-events-auto hover:opacity-100 ${
    isDark ? "border-white/10 bg-[#2a2c31] text-[#e2e5ea]" : "border-black/10 bg-white text-[#1f2430]"
  }`;

  return (
    <header className={`flex h-14 items-center justify-between border-b px-4 ${isDark ? "border-white/10 bg-[#2b2d31]" : "border-black/10 bg-white"}`}>
      <div className="flex items-center gap-4">
        <Link href="/" className="group">
          <p className={`text-[10px] uppercase tracking-[0.2em] group-hover:opacity-80 ${isDark ? "text-[#a8abb2]" : "text-[#6c7382]"}`}>
            pien.studio
          </p>
          <h1 className={`text-sm font-semibold group-hover:opacity-80 ${isDark ? "text-[#f5f7fa]" : "text-[#1f2430]"}`}>{projectTitle}</h1>
        </Link>

        <nav className="flex items-center gap-2 text-xs font-medium">
          <MenuShell isDark={isDark} label={labels.file} menuClass={menuClass}>
            <FileMenu
              isDark={isDark}
              labels={labels}
              canvasWidth={canvasWidth}
              canvasHeight={canvasHeight}
              onSave={onSave}
              onExportPng={onExportPng}
              onExportProjectFile={onExportProjectFile}
              onImportImage={onImportImage}
              onOpenCanvasSize={onOpenCanvasSize}
            />
          </MenuShell>
          <MenuShell isDark={isDark} label={labels.edit} menuClass={menuClass}>
            <EditMenu isDark={isDark} labels={labels} canUndo={canUndo} canRedo={canRedo} onUndo={onUndo} onRedo={onRedo} onCopy={onCopy} onCut={onCut} onPaste={onPaste} />
          </MenuShell>
          <MenuShell isDark={isDark} label={labels.view} menuClass={menuClass}>
            <ViewMenu isDark={isDark} labels={labels} onSetHandTool={onSetHandTool} onSetPointerTool={onSetPointerTool} />
          </MenuShell>
          <MenuShell isDark={isDark} label={labels.settings} menuClass={menuClass}>
            <SettingsMenu isDark={isDark} preferences={labels.preferences} />
          </MenuShell>
        </nav>
      </div>

      <div className="flex items-center gap-2">
        <button
          type="button"
          onClick={onUndo}
          disabled={!canUndo}
          title={labels.undo}
          className={`rounded border px-2.5 py-1.5 text-xs font-medium ${
            isDark ? "border-white/15 bg-[#25272b] text-[#d7dae0]" : "border-black/15 bg-[#f2f4f8] text-[#1f2430]"
          } ${!canUndo ? "opacity-50" : "hover:opacity-90"}`}
        >
          <Undo2 className="h-3.5 w-3.5" />
        </button>
        <button
          type="button"
          onClick={onRedo}
          disabled={!canRedo}
          title={labels.redo}
          className={`rounded border px-2.5 py-1.5 text-xs font-medium ${
            isDark ? "border-white/15 bg-[#25272b] text-[#d7dae0]" : "border-black/15 bg-[#f2f4f8] text-[#1f2430]"
          } ${!canRedo ? "opacity-50" : "hover:opacity-90"}`}
        >
          <Redo2 className="h-3.5 w-3.5" />
        </button>
        <span className={`text-[10px] font-semibold uppercase tracking-[0.2em] ${isDark ? "text-[#a8abb2]" : "text-[#6c7382]"}`}>
          {isDirty ? labels.unsavedChanges : labels.saved}
        </span>
      </div>
    </header>
  );
}

function MenuShell({ isDark, label, menuClass, children }: { isDark: boolean; label: string; menuClass: string; children: React.ReactNode }) {
  return (
    <div className="relative group">
      <button type="button" className={`rounded px-2 py-1 ${isDark ? "text-[#d7dae0] hover:bg-white/10" : "text-[#1f2430] hover:bg-black/5"}`}>
        {label}
      </button>
      <div className={menuClass} onClick={(event) => event.stopPropagation()}>
        {children}
      </div>
    </div>
  );
}

function FileMenu({
  isDark,
  labels,
  canvasWidth,
  canvasHeight,
  onSave,
  onExportPng,
  onExportProjectFile,
  onImportImage,
  onOpenCanvasSize,
}: {
  isDark: boolean;
  labels: EditorHeaderProps["labels"];
  canvasWidth: number;
  canvasHeight: number;
  onSave: () => void;
  onExportPng: () => void;
  onExportProjectFile: () => void;
  onImportImage: () => void;
  onOpenCanvasSize: () => void;
}) {
  return (
    <div className="space-y-1">
      <button type="button" onClick={onSave} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>{labels.save}</button>
      <div className={`my-1 h-px ${dividerClass(isDark)}`} />
      <button type="button" onClick={onExportPng} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>{labels.exportPng}</button>
      <button type="button" onClick={onExportProjectFile} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>{labels.exportProjectFile}</button>
      <div className={`my-1 h-px ${dividerClass(isDark)}`} />
      <button type="button" onClick={onImportImage} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>{labels.importImage}</button>
      <button type="button" onClick={onOpenCanvasSize} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>{labels.canvasSize} ({canvasWidth} x {canvasHeight})</button>
    </div>
  );
}

function EditMenu({
  isDark,
  labels,
  canUndo,
  canRedo,
  onUndo,
  onRedo,
  onCopy,
  onCut,
  onPaste,
}: {
  isDark: boolean;
  labels: EditorHeaderProps["labels"];
  canUndo: boolean;
  canRedo: boolean;
  onUndo: () => void;
  onRedo: () => void;
  onCopy: () => void;
  onCut: () => void;
  onPaste: () => void;
}) {
  return (
    <div className="space-y-1">
      <button type="button" onClick={onUndo} disabled={!canUndo} className={`w-full rounded px-2 py-1 text-left ${!canUndo ? "opacity-50" : hoverSubtleClass(isDark)}`}>{labels.undo}</button>
      <button type="button" onClick={onRedo} disabled={!canRedo} className={`w-full rounded px-2 py-1 text-left ${!canRedo ? "opacity-50" : hoverSubtleClass(isDark)}`}>{labels.redo}</button>
      <div className={`my-1 h-px ${dividerClass(isDark)}`} />
      <button type="button" onClick={onCopy} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>{labels.copy}</button>
      <button type="button" onClick={onCut} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>{labels.cut}</button>
      <button type="button" onClick={onPaste} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>{labels.paste}</button>
    </div>
  );
}

function ViewMenu({ isDark, labels, onSetHandTool, onSetPointerTool }: { isDark: boolean; labels: EditorHeaderProps["labels"]; onSetHandTool: () => void; onSetPointerTool: () => void }) {
  return (
    <div className="space-y-1">
      <button type="button" onClick={onSetHandTool} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>{labels.panTool}</button>
      <button type="button" onClick={onSetPointerTool} className={`w-full rounded px-2 py-1 text-left ${hoverSubtleClass(isDark)}`}>{labels.pointerTool}</button>
    </div>
  );
}

function SettingsMenu({ isDark, preferences }: { isDark: boolean; preferences: string }) {
  return (
    <div className="space-y-2 p-1">
      <p className={`px-2 text-[10px] font-semibold uppercase tracking-wide ${isDark ? "text-[#9aa1ad]" : "text-[#6c7382]"}`}>{preferences}</p>
      <UiPreferences />
    </div>
  );
}