feat: add reduce and close butons on images window

src/components/ImageViewerWindow.tsx

@@ -44,20 +44,29 @@ export default function ImageViewerWindow() {
     <div style={{ height: "100vh", display: "flex", flexDirection: "column", background: "#0d1117", overflow: "hidden" }}>
       <ResizeHandles />
       <div
-        onMouseDown={e => { if (e.button === 0) win.startDragging(); }}
         style={{
           height: "28px",
           background: "#161b22",
           borderBottom: "1px solid #2d3748",
-          cursor: "grab",
           flexShrink: 0,
           display: "flex",
           alignItems: "center",
-          paddingLeft: "12px",
           userSelect: "none",
         }}
       >
-        <span style={{ fontSize: "11px", color: "#4a5568", pointerEvents: "none" }}>⠿ Image</span>
+        {/* Zone draggable */}
+        <div
+          onMouseDown={e => { if (e.button === 0) win.startDragging(); }}
+          style={{ flex: 1, display: "flex", alignItems: "center", paddingLeft: "12px", cursor: "grab", height: "100%" }}
+        >
+          <span style={{ fontSize: "11px", color: "#4a5568", pointerEvents: "none" }}>⠿ Image</span>
+        </div>
+
+        {/* Boutons — hors de la zone draggable */}
+        <div style={{ display: "flex", alignItems: "center", gap: "2px", paddingRight: "6px" }}>
+          <ViewerTitleButton onClick={() => win.minimize()} title="Réduire">—</ViewerTitleButton>
+          <ViewerTitleButton onClick={() => win.close()} title="Fermer" danger>✕</ViewerTitleButton>
+        </div>
       </div>
 
       <div style={{ flex: 1, overflowY: "auto", overflowX: "hidden" }}>
@@ -72,3 +81,44 @@ export default function ImageViewerWindow() {
     </div>
   );
 }
+
+function ViewerTitleButton({
+  children, onClick, title, danger,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  title?: string;
+  danger?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      style={{
+        background: "transparent",
+        border: "1px solid transparent",
+        color: danger ? "#f87171" : "#94a3b8",
+        padding: "3px 8px",
+        borderRadius: "5px",
+        cursor: "pointer",
+        fontSize: "12px",
+        fontWeight: 500,
+        transition: "all 0.15s",
+        display: "flex",
+        alignItems: "center",
+      }}
+      onMouseEnter={e => {
+        const el = e.currentTarget;
+        el.style.background = danger ? "rgba(248,113,113,0.1)" : "rgba(255,255,255,0.05)";
+        el.style.color = danger ? "#f87171" : "#e2e8f0";
+      }}
+      onMouseLeave={e => {
+        const el = e.currentTarget;
+        el.style.background = "transparent";
+        el.style.color = danger ? "#f87171" : "#94a3b8";
+      }}
+    >
+      {children}
+    </button>
+  );
+}