From 0c0dd340266b3a292f6c639b58a0290fe342a59a Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Wed, 24 May 2023 22:00:54 +0200
Subject: [PATCH] [hotfix] Add indicator to indicate model details can expand

---
 .../models-management/model-item.component.tsx           | 9 ++++++---
 src/renderer/components/svgs/bsm-icon.component.tsx      | 5 ++++-
 .../components/svgs/icons/chevron-top-icon.component.tsx | 9 +++++++++
 3 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/components/svgs/icons/chevron-top-icon.component.tsx

diff --git a/src/renderer/components/models-management/model-item.component.tsx b/src/renderer/components/models-management/model-item.component.tsx
index 89e39d17..2263500b 100644
--- a/src/renderer/components/models-management/model-item.component.tsx
+++ b/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-[80%] 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-[80%] 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 => (
diff --git a/src/renderer/components/svgs/bsm-icon.component.tsx b/src/renderer/components/svgs/bsm-icon.component.tsx
index fb40aa00..00f7e567 100644
--- a/src/renderer/components/svgs/bsm-icon.component.tsx
+++ b/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}/> }
diff --git a/src/renderer/components/svgs/icons/chevron-top-icon.component.tsx b/src/renderer/components/svgs/icons/chevron-top-icon.component.tsx
new file mode 100644
index 00000000..b6af5f02
--- /dev/null
+++ b/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>
+  )
+}