Create Window.tsx

components/Window.tsx

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+/* tslint:disable */
+import React from 'react';
+
+interface WindowProps {
+  title: string;
+  children: React.ReactNode;
+  onClose: () => void; // This prop remains, though its direct trigger (the X button) is removed.
+  isAppOpen: boolean;
+  appId?: string | null;
+  onToggleParameters: () => void;
+  onExitToDesktop: () => void;
+  isParametersPanelOpen?: boolean;
+}
+
+const MenuItem: React.FC<{
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+}> = ({children, onClick, className}) => (
+  <span
+    className={`menu-item cursor-pointer hover:text-blue-600 ${className}`}
+    onClick={onClick}
+    onKeyDown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') onClick?.();
+    }}
+    tabIndex={0}
+    role="button">
+    {children}
+  </span>
+);
+
+export const Window: React.FC<WindowProps> = ({
+  title,
+  children,
+  onClose,
+  isAppOpen,
+  onToggleParameters,
+  onExitToDesktop,
+  isParametersPanelOpen,
+}) => {
+  return (
+    <div className="w-[800px] h-[600px] bg-white border border-gray-300 rounded-xl shadow-2xl flex flex-col relative overflow-hidden font-sans backdrop-blur-sm bg-white/80">
+      {/* Title Bar */}
+      <div className="bg-gray-800/90 text-white py-2 px-4 font-semibold text-base flex justify-between items-center select-none cursor-default rounded-t-xl flex-shrink-0">
+        <span className="title-bar-text">{title}</span>
+        {/* "X" button removed from here */}
+      </div>
+
+      {/* Menu Bar */}
+      <div className="bg-gray-100/80 py-2 px-3 border-b border-gray-200 select-none flex gap-4 flex-shrink-0 text-sm text-gray-700 items-center">
+        {!isParametersPanelOpen && (
+          <MenuItem onClick={onToggleParameters}>
+            <u>P</u>arameters
+          </MenuItem>
+        )}
+        {isAppOpen && (
+          <MenuItem onClick={onExitToDesktop} className="ml-auto">
+            Exit to Desktop
+          </MenuItem>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-grow overflow-y-auto">{children}</div>
+    </div>
+  );
+};