Merge pull request #222 from Zagrios/hotfix/add-indication-to-indicate-models-details-can-expand

Hotfix/add indication to indicate models details can expand

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

@@ -11,7 +11,7 @@ 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 { BsmIconType } from "../svgs/bsm-icon.component";
+import { BsmIcon, 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";
@@ -101,8 +101,11 @@ function modelItem<T = unknown>(props: Props<T>) {
                         <BsmBasicSpinner className="w-7 h-7 p-1 rounded-md bg-main-color-2 flex items-center justify-center shadow-black shadow-sm" spinnerClassName="brightness-200" thikness="3.5px" style={{color}}/>
                     )}
                 </div>
-                <motion.div className="absolute cursor-default top-[83%] left-0 w-full h-full px-2 pt-2.5 flex flex-col gap-1.5 bg-main-color-3 bg-opacity-60 backdrop-blur-md transition-all delay-150 hover:top-0" onClick={e =>{e.stopPropagation(); e.preventDefault()}}>
-                    <BsmLink className={`block w-fit max-w-full overflow-hidden font-bold whitespace-nowrap text-ellipsis ${props.id ? "cursor-pointer hover:underline" : ""}`} href={modelPageUrl}>{props.name}</BsmLink>
+                <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()}}>
+                    <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"/>
+                    </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">
                         {modelTags?.map(tag => (

src/renderer/components/svgs/bsm-icon.component.tsx

@@ -57,10 +57,11 @@ import { ModelTypeAvatarIcon } from "./icons/model-type-avatar-icon.component";
 import { ModelTypeSaberIcon } from "./icons/model-type-saber-icon.component";
 import { ModelTypePlatformIcon } from "./icons/model-type-platform-icon.component";
 import { ModelTypeBloqIcon } from "./icons/model-type-bloq-icon.component";
+import { ChevronTopIcon } from "./icons/chevron-top-icon.component";
 
 export type BsmIconType = BsvMapCharacteristic | MSModelType | (
    "settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|"twitch"|"eye"|"play"|"checkCircleIcon"|"discord"|"info"|
-   "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|"thumbUpFill"|"timerFill"|"pause"|"twitter"|"sync"|
+   "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|"thumbUpFill"|"timerFill"|"pause"|"twitter"|"sync"|"chevron-top"|
    "copy"|"steam"|"edit"|"export"|"patreon"|"search"|"bsMapDifficulty"|"link"|"unlink"|"download"|"filter"|"mee6"|"volume-up"|"volume-off"|"volume-down"|
    "fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"|"de-DE-flag"
 );
@@ -122,6 +123,8 @@ export const BsmIcon = memo(({className, icon, style}: {className?: string, icon
         if(icon === "volume-up"){ return <VolumeUpIcon className={className} style={style}/> }
         if(icon === "volume-down"){ return <VolumeDownIcon className={className} style={style}/> }
         if(icon === "volume-off"){ return <VolumeOffIcon className={className} style={style}/> }
+        if(icon === "chevron-top"){ return <ChevronTopIcon className={className} style={style}/> }
+
         if(icon === MSModelType.Avatar){ return <ModelTypeAvatarIcon className={className} style={style}/> }
         if(icon === MSModelType.Saber){ return <ModelTypeSaberIcon className={className} style={style}/> }
         if(icon === MSModelType.Platfrom){ return <ModelTypePlatformIcon className={className} style={style}/> }

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

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export function ChevronTopIcon(props: {className?: string, style?: CSSProperties}) {
+  return (
+    <svg className={props.className} style={props.style} 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>
+  )
+}