download maps button when no maps

assets/jsons/translations/en.json

@@ -38,6 +38,10 @@
                                     "unlink": "Unling maps"
                                 }
                             }
+                        },
+                        "empty-maps":{
+                            "text":"No maps",
+                            "button":"Download maps"
                         }
                     }
                 }

assets/jsons/translations/es.json

@@ -38,6 +38,10 @@
                                     "unlink": "Desatar los mapas"
                                 }
                             }
+                        },
+                        "empty-maps":{
+                            "text":"No hay mapas",
+                            "button":"Descargar mapas"
                         }
                     }
                 }

assets/jsons/translations/fr.json

@@ -38,6 +38,10 @@
                                     "unlink": "Délier les maps"
                                 }
                             }
+                        },
+                        "empty-maps":{
+                            "text":"Aucune map",
+                            "button":"Télécharger des maps"
                         }
                     }
                 }

src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx

@@ -7,6 +7,10 @@ import { MapItem, ParsedMapDiff } from "./map-item.component"
 import { BsvMapCharacteristic, MapFilter } from "shared/models/maps/beat-saver.model"
 import { useInView } from "framer-motion"
 import { MapsDownloaderService } from "renderer/services/maps-downloader.service"
+import { BsmImage } from "../shared/bsm-image.component"
+import BeatConflict from "../../../../assets/images/apngs/beat-conflict.png"
+import { BsmButton } from "../shared/bsm-button.component"
+import { useTranslation } from "renderer/hooks/use-translation.hook"
 
 type Props = {
     version: BSVersion,
@@ -25,6 +29,7 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
     const [maps, setMaps] = useState<BsmLocalMap[]>([]);
     const [subs] = useState<Subscription[]>([]);
     const [selectedMaps, setSelectedMaps] = useState([]);
+    const t = useTranslation();
 
     useImperativeHandle(forwardRef ,()=>({
         deleteMaps(){
@@ -242,7 +247,13 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
     return (
         <div ref={ref} className={className}>
             <ul className="p-3 w-full grow flex flex-wrap justify-center content-start gap-2 overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900">
-                {renderMaps()}
+                {maps?.length ? renderMaps() : (
+                    <div className="h-full flex flex-col items-center justify-start pt-3">
+                        <BsmImage image={BeatConflict}/>
+                        <span className="font-bold mb-4">{t("pages.version-viewer.maps.tabs.maps.empty-maps.text")}</span>
+                        <BsmButton className="p-2 font-bold rounded-md" text="pages.version-viewer.maps.tabs.maps.empty-maps.button" typeColor="primary" withBar={false} onClick={e => {e.preventDefault(); mapsDownloader.openDownloadMapModal(version)}}/>
+                    </div>
+                )}
             </ul>
         </div>
     )