prepare for maps downloading

package.json

@@ -243,6 +243,7 @@
     "react-fitty": "^1.0.1",
     "react-range": "^1.8.14",
     "react-router-dom": "^6.3.0",
+    "react-tooltip": "^4.5.1",
     "react-visibility-sensor": "^5.1.1",
     "regedit": "^5.1.1",
     "rxjs": "^7.5.6",

src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx

@@ -9,6 +9,7 @@ import { BsmButton } from "../shared/bsm-button.component"
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook"
 import { MapsManagerService } from "renderer/services/maps-manager.service"
 import { motion, Variants } from "framer-motion";
+import ReactTooltip from 'react-tooltip';
 
 type Props = {
     oneBlock?: boolean,
@@ -56,24 +57,44 @@ export function MapsPlaylistsPanel({version, oneBlock = false}: Props) {
         //TODO
     }
 
+    const handleMapsAddClick = () => {
+        
+    }
+
+    const handlePlaylistAddClick = () => {
+        //TODO
+    }
+
     const renderTab = (props: DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>, text: string, index: number): JSX.Element => {
 
         const mainColor = mapsLinked ? color : "red";
 
         const onClickLink = (index: number) => {
-            if(index === 0){ return handleMapsLinkClick() };
+            if(index === 0){ return handleMapsLinkClick(); };
             return handlePlaylistLinkClick();
         }
 
+        const onClickAdd = (index: number) => {
+            if(index === 0){ return handleMapsAddClick(); }
+            return handlePlaylistAddClick();
+        }
+
         const variants: Variants = { hover: {rotate: 22.5}, tap: {rotate: 45} };
 
         return (
-            <li className="relative text-center text-lg font-bold hover:backdrop-brightness-75 flex justify-center items-center content-center" onClick={props.onClick}>
+            <li className="relative text-center text-lg font-bold hover:backdrop-brightness-75 flex justify-center items-center content-center" onClick={props.onClick} title={mapsLinked ? "Délier les maps" : "Lier les maps"}>
                 <span>{text}</span>
                 <motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="absolute block p-1 right-3 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75"> 
                     <span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: mainColor}}/>
                     <BsmButton className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45" iconClassName="" icon={mapsLinked ? "link" : "unlink"} withBar={false} style={{color: mainColor}} onClick={e => {e.stopPropagation(); onClickLink(index)}}/>
                 </motion.div>
+                <motion.div variants={variants} whileHover="hover" whileTap="tap" initial={{rotate: 0}} className="absolute block p-1 right-11 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" data-tip data-for="add-tooltip"> 
+                    <span className="absolute top-0 left-0 h-full w-full rounded-full opacity-20" style={{backgroundColor: mainColor}}/>
+                    <BsmButton className="p-0.5 absolute top-0 left-0 h-full w-full !bg-transparent" iconClassName="" icon="add" withBar={false} style={{color: mainColor}} onClick={e => {e.stopPropagation(); onClickLink(index)}}/>
+                </motion.div>
+                <ReactTooltip id="add-tooltip" effect="solid" padding="5px" >
+                    <span className="whitespace-nowrap">Ajouté des maps</span> {/* TODO TRANSLATE */}
+                </ReactTooltip>
             </li>
         )
     }

src/renderer/components/shared/bsm-button.component.tsx

@@ -56,7 +56,7 @@ export function BsmButton({className, style, imgClassName, iconClassName, icon,
         <div ref={ref} onClick={onClick} title={t(title)} className={`${className} overflow-hidden cursor-pointer group ${(!withBar && !disabled && (!!typeColor || !!color)) && "hover:brightness-[1.15]"} ${disabled && "brightness-75 cursor-not-allowed"} ${renderTypeColor}`} style={{...style, backgroundColor: primaryColor || color}}>
             { image && <BsmImage image={image} className={imgClassName}/> }
             { icon && <BsmIcon icon={icon} className={iconClassName ?? "h-full w-full text-gray-800 dark:text-white"} style={{color: iconColor}}/> }
-            {text && (type === "submit" ? <button type="submit" className={textClassName || "h-full w-full"} style={{...(!!textColor && {color: textColor})}}>{t(text)}</button> : <span style={{...(!!textColor && {color: `${textColor}`})}}>{t(text)}</span>)}
+            {text && (type === "submit" ? <button type="submit" className={textClassName || "h-full w-full"} style={{...(!!textColor && {color: textColor})}}>{t(text)}</button> : <span className={textClassName} style={{...(!!textColor && {color: `${textColor}`})}}>{t(text)}</span>)}
             { withBar && (
                 <div className="absolute bottom-0 left-0 w-full h-1 bg-current" style={{color: secondColor}}>
                     <div className="absolute top-0 left-0 h-full w-full bg-current brightness-50"/>

src/renderer/components/svgs/icons/add-icon.component.tsx

@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
 
 export function AddIcon(props: {className?: string, style?: CSSProperties}) {
     return (
-        <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+        <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
             <path fill="currentColor" d="M17.833 32.458V22.167H7.542v-4.334h10.291V7.542h4.334v10.291h10.291v4.334H22.167v10.291Z"/>
         </svg>
     ) 

src/renderer/services/beat-saver/beat-saver-api.service.ts

@@ -1,5 +1,6 @@
 import { ApiResult } from "renderer/models/api/api.model";
 import { BsvMapDetail } from "shared/models/maps";
+import { MapFilter, SearchOrder, SearchParams, SearchResponse } from "shared/models/maps/beat-saver.model";
 
 export class BeatSaverApiService {
 
@@ -36,4 +37,8 @@ export class BeatSaverApiService {
 
     }
 
+    public async searchMaps(params: SearchParams): Promise<ApiResult<SearchResponse>>{
+        
+    }
+
 }

src/renderer/services/maps-downloader.service.ts

@@ -0,0 +1,20 @@
+import { BSVersion } from "shared/bs-version.interface";
+
+export class MapsDownloaderService {
+
+    private static instance: MapsDownloaderService;
+
+    public static getInstance(): MapsDownloaderService{
+        if(!MapsDownloaderService.instance){ MapsDownloaderService.instance = new MapsDownloaderService(); }
+        return MapsDownloaderService.instance;
+    }
+
+    private constructor(){
+
+    }
+
+    public openDownloadMapModal(version?: BSVersion){
+        
+    }
+
+}

src/shared/models/maps/beat-saver.model.ts

@@ -165,4 +165,18 @@ export interface MapFilter {
     maxNps?: number,
     enabledTags?: Set<MapTag>,
     excludedTags?: Set<MapTag>
-}
+}
+
+export interface SearchResponse {
+    docs: BsvMapDetail[],
+    redirect: string
+}
+
+export interface SearchParams {
+    order: SearchOrder,
+    filter?: MapFilter, 
+    page?: number, 
+    q?: string
+}
+
+export type SearchOrder = "Latest"|"Relevance"|"Rating"|"Curated";