chore: update dependencies and UI upgrades

Author: jesusmpc

code/app/globals.css

@@ -197,19 +197,22 @@
   }
 }
 
-.transparent-square-background {
-  background-color: #ffffff;
-  background-size: 16px 16px;
-  background-position:
-    0 0,
-    8px 8px;
-  background-image:
-    linear-gradient(
-      45deg,
-      #eee 25%,
-      transparent 25%,
-      transparent 75%,
-      #eee 75%
-    ),
-    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
+.pulseOverlay {
+  position: absolute;
+  inset: 0;
+  background: #000000;
+  opacity: 0.25;
+  animation: pulseOverlay 1.5s ease-in-out infinite;
+}
+
+@keyframes pulseOverlay {
+  0% {
+    opacity: 0.25;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0.25;
+  }
 }

code/components/room-components/help/help-view.tsx

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { Eye, MousePointer } from "lucide-react";
+import { Eye, MapPinned, MousePointer } from "lucide-react";
 import { SYSTEM_OS } from "@/lib/utils";
 import { HelpShortcutElement } from "./help-shortcut-element";
 
@@ -18,6 +18,14 @@ export const HelpView = () => {
             [SYSTEM_OS.OTHER]: "Ctrl \\",
           }}
         />
+        <HelpShortcutElement
+          icon={<MapPinned />}
+          label="Show/Hide Minimap"
+          shortcuts={{
+            [SYSTEM_OS.MAC]: "N",
+            [SYSTEM_OS.OTHER]: "N",
+          }}
+        />
       </div>
       <div className="flex flex-col gap-3">
         <HelpShortcutElement

code/components/room-components/hooks/use-keyboard-handler.tsx

@@ -51,6 +51,8 @@ export function useKeyboardHandler() {
   const setImagesLLMPopupVisible = useIACapabilities(
     (state) => state.setImagesLLMPopupVisible
   );
+  const showMinimap = useCollaborationRoom((state) => state.ui.minimap);
+  const setShowMinimap = useCollaborationRoom((state) => state.setShowMinimap);
 
   const triggerTool = React.useCallback(
     (toolName: string) => {
@@ -515,4 +517,8 @@ export function useKeyboardHandler() {
       sidebarToggle(SIDEBAR_ELEMENTS.comments);
     }
   }, ["KeyH"]);
+
+  useKeyDown(() => {
+    setShowMinimap(!showMinimap);
+  }, ["KeyN"]);
 }

code/components/room-components/images-library/edit-image.image.tsx

@@ -5,16 +5,19 @@
 "use client";
 
 import React from "react";
-import { Badge } from "@/components/ui/badge";
+// import { Badge } from "@/components/ui/badge";
 import { Image } from "lucide-react";
 import { useWeave } from "@inditextech/weave-react";
 import { useCollaborationRoom } from "@/store/store";
 import { SIDEBAR_ELEMENTS } from "@/lib/constants";
 import { ImageEntity } from "./types";
 import { useIACapabilities } from "@/store/ia";
 import { useIACapabilitiesV2 } from "@/store/ia-v2";
+import { cn } from "@/lib/utils";
 
-export const EditImage = ({ image }: { image: ImageEntity }) => {
+type EditImageProps = { image: ImageEntity; selected: boolean };
+
+export const EditImage = ({ image, selected }: Readonly<EditImageProps>) => {
   const instance = useWeave((state) => state.instance);
 
   const sidebarLeftActive = useCollaborationRoom(
@@ -47,7 +50,13 @@ export const EditImage = ({ image }: { image: ImageEntity }) => {
   return (
     <div
       key={image.imageId}
-      className="group block w-full bg-light-background-1 object-cover relative border border-zinc-200"
+      className={cn(
+        "group block w-full bg-light-background-1 object-cover relative border-0 border-zinc-200",
+        {
+          ["after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-100 after:transition-opacity"]:
+            selected,
+        }
+      )}
     >
       {((image.removalJobId === null &&
         ["created", "pending", "working", "failed"].includes(image.status)) ||
@@ -61,7 +70,7 @@ export const EditImage = ({ image }: { image: ImageEntity }) => {
           }}
         >
           {/* eslint-disable-next-line jsx-a11y/alt-text */}
-          <Image strokeWidth={1} size={48} />
+          <Image strokeWidth={1} size={32} stroke="#000000" fill="#ffffff" />
         </div>
       )}
       {["completed"].includes(image.status) && (
@@ -82,7 +91,13 @@ export const EditImage = ({ image }: { image: ImageEntity }) => {
           alt="An image"
         />
       )}
-      {image.removalJobId === null && ["pending"].includes(image.status) && (
+      {(["pending", "working"].includes(image.status) ||
+        (image.removalJobId !== null &&
+          image.removalStatus !== null &&
+          ["pending", "working"].includes(image.removalStatus))) && (
+        <div className="pulseOverlay"></div>
+      )}
+      {/* {image.removalJobId === null && ["pending"].includes(image.status) && (
         <div className="absolute top-0 left-0 right-0 bottom-0 bg-black/50 text-white flex flex-col gap-1 justify-center items-center">
           <Badge
             className="px-1 font-inter tabular-nums rounded font-inter text-[11px]"
@@ -113,7 +128,7 @@ export const EditImage = ({ image }: { image: ImageEntity }) => {
               REMOVING
             </Badge>
           </div>
-        )}
+        )} */}
     </div>
   );
 };

code/components/room-components/images-library/generated-image.image.tsx

@@ -5,16 +5,22 @@
 "use client";
 
 import React from "react";
-import { Badge } from "@/components/ui/badge";
+// import { Badge } from "@/components/ui/badge";
 import { Image } from "lucide-react";
 import { useWeave } from "@inditextech/weave-react";
 import { useCollaborationRoom } from "@/store/store";
 import { SIDEBAR_ELEMENTS } from "@/lib/constants";
 import { ImageEntity } from "./types";
 import { useIACapabilities } from "@/store/ia";
 import { useIACapabilitiesV2 } from "@/store/ia-v2";
+import { cn } from "@/lib/utils";
 
-export const GeneratedImage = ({ image }: { image: ImageEntity }) => {
+type GeneratedImageProps = { image: ImageEntity; selected: boolean };
+
+export const GeneratedImage = ({
+  image,
+  selected,
+}: Readonly<GeneratedImageProps>) => {
   const instance = useWeave((state) => state.instance);
 
   const sidebarLeftActive = useCollaborationRoom(
@@ -47,7 +53,7 @@ export const GeneratedImage = ({ image }: { image: ImageEntity }) => {
   return (
     <div
       key={image.imageId}
-      className="group block w-full bg-light-background-1 object-cover relative border border-zinc-200"
+      className="group block w-full bg-light-background-1 object-cover relative border-0 border-zinc-200"
     >
       {((image.removalJobId === null &&
         ["created", "pending", "working", "failed"].includes(image.status)) ||
@@ -61,13 +67,16 @@ export const GeneratedImage = ({ image }: { image: ImageEntity }) => {
           }}
         >
           {/* eslint-disable-next-line jsx-a11y/alt-text */}
-          <Image strokeWidth={1} size={48} />
+          <Image strokeWidth={1} size={32} stroke="#000000" fill="#ffffff" />
         </div>
       )}
       {["completed"].includes(image.status) && (
         // eslint-disable-next-line @next/next/no-img-element
         <img
-          className="w-full block object-cover"
+          className={cn("w-full block object-cover", {
+            [" after:content-[''] after:absolute after:inset-0 after:bg-black/40 after:opacity-0 hover:after:opacity-100 after:transition-opacity"]:
+              selected,
+          })}
           style={{
             aspectRatio: `${image.aspectRatio}`,
           }}
@@ -82,7 +91,13 @@ export const GeneratedImage = ({ image }: { image: ImageEntity }) => {
           alt="An image"
         />
       )}
-      {image.removalJobId === null && ["pending"].includes(image.status) && (
+      {(["pending", "working"].includes(image.status) ||
+        (image.removalJobId !== null &&
+          image.removalStatus !== null &&
+          ["pending", "working"].includes(image.removalStatus))) && (
+        <div className="pulseOverlay"></div>
+      )}
+      {/* {image.removalJobId === null && ["pending"].includes(image.status) && (
         <div className="absolute top-0 left-0 right-0 bottom-0 bg-black/50 text-white flex flex-col gap-1 justify-center items-center">
           <Badge
             className="px-1 font-inter tabular-nums rounded font-inter text-[11px]"
@@ -113,7 +128,7 @@ export const GeneratedImage = ({ image }: { image: ImageEntity }) => {
               REMOVING
             </Badge>
           </div>
-        )}
+        )} */}
     </div>
   );
 };