[hotfix] Can now close model details on click on chevron icon

src/renderer/components/models-management/model-item.component.tsx

@@ -1,6 +1,6 @@
 import equal from "fast-deep-equal";
 import { memo, useRef, useState } from "react";
-import { MSModel, MSModelType } from "shared/models/models/model-saber.model";
+import { MSModel } from "shared/models/models/model-saber.model";
 import { BsmImage } from "../shared/bsm-image.component";
 import { motion } from "framer-motion";
 import { GlowEffect } from "../shared/glow-effect.component";
@@ -11,12 +11,14 @@ import Tippy from "@tippyjs/react";
 import { followCursor } from "tippy.js"
 import defaultImage from '../../../../assets/images/default-version-img.jpg'
 import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface";
-import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component";
+import { BsmIconType } from "../svgs/bsm-icon.component";
 import { BsmButton } from "../shared/bsm-button.component";
 import { BsmBasicSpinner } from "../shared/bsm-basic-spinner/bsm-basic-spinner.component";
 import { isValidUrl } from "shared/helpers/url.helpers";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import useDoubleClick from "use-double-click";
+import { useDelayedState } from "renderer/hooks/use-delayed-state.hook";
+import { ChevronTopIcon } from "../svgs/icons/chevron-top-icon.component";
 
 type Props<T> = {
     selected?: boolean,
@@ -35,6 +37,7 @@ function modelItem<T = unknown>(props: Props<T>) {
     const t = useTranslation();
     const color = useThemeColor("first-color");
     const [hovered, setHovered] = useState(false);
+    const [infosHovered, setInfosHovered] = useDelayedState(false);
     const [idContentCopied, setIdContentCopied] = useState<string>(null);
     const ref = useRef();
 
@@ -114,10 +117,16 @@ function modelItem<T = unknown>(props: Props<T>) {
                         )}
                     </div>
                 </div>
-                <motion.div className="absolute top-[83%] left-0 w-full h-full px-2 flex flex-col gap-1.5 bg-main-color-3 bg-opacity-60 backdrop-blur-md transition-all delay-150 hover:top-0 group" onClick={e =>{e.stopPropagation(); e.preventDefault()}}>
+                <motion.div 
+                    className="absolute left-0 w-full h-full px-2 flex flex-col gap-1.5 bg-main-color-3 bg-opacity-60 backdrop-blur-md transition-all group cursor-default" 
+                    onClick={e =>{e.stopPropagation(); e.preventDefault()}} 
+                    onHoverStart={() => setInfosHovered(true, 150)}
+                    onHoverEnd={() => setInfosHovered(false, 150)}
+                    style={{top: infosHovered ? "0" : "83%"}}
+                >
                     <div className="w-full flex justify-center items-center mt-1.5">
                         <BsmLink className={`block grow overflow-hidden font-bold whitespace-nowrap text-ellipsis ${props.id ? "cursor-pointer hover:underline" : ""}`} href={modelPageUrl}>{props.name}</BsmLink>
-                        <BsmIcon className="shrink-0 h-8 group-hover:rotate-180 transition-transform w-fit" icon="chevron-top"/>
+                        <ChevronTopIcon className="shrink-0 h-8 group-hover:rotate-180 transition-transform w-fit cursor-pointer" onClick={() => [setInfosHovered(false, 0), console.log("dallo")]}/>
                     </div>
                     <BsmLink className={`block w-fit max-w-full overflow-hidden whitespace-nowrap text-ellipsis brightness-200 ${authorPageUrl ? "cursor-pointer hover:underline" : ""}`} style={{color}} href={authorPageUrl}>{props.author ?? ''}</BsmLink>
                     <ul className="flex flex-row flex-wrap gap-1">

src/renderer/components/svgs/icons/chevron-top-icon.component.tsx

@@ -1,8 +1,6 @@
-import { CSSProperties } from "react";
-
-export function ChevronTopIcon(props: {className?: string, style?: CSSProperties}) {
+export function ChevronTopIcon(props: React.ComponentProps<"svg">) {
   return (
-    <svg className={props.className} style={props.style} fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+    <svg {...props} fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
         <path d="M260.811-366.051q-11.021-11.021-11.355-26.521-.333-15.5 10.689-26.522l193.333-193.333q5.892-5.892 12.475-8.457 6.583-2.565 14.047-2.565t14.047 2.565q6.583 2.565 12.475 8.457l193.667 193q11.021 10.514 10.981 26.054-.039 15.54-11.315 26.656-11.021 11.021-26.855 11.021-15.833 0-26.855-11.021L480-532.196 313.521-365.051q-10.355 11.022-25.894 10.649-15.54-.373-26.816-11.649Z"/>
     </svg>
   )