move and add icons

src/renderer/components/available-versions/available-version-item.component.tsx

@@ -1,6 +1,5 @@
 import { BSVersion } from "main/services/bs-version-manager.service";
 import './available-version-item.component.css';
-import { SteamIcon } from "../svgs/steam-icon.component";
 import { useEffect, useState, memo } from "react";
 import { BsDownloaderService } from "renderer/services/bs-downloader.service";
 import { distinctUntilChanged } from "rxjs";
@@ -9,6 +8,7 @@ import dateFormat from "dateformat";
 import { BsmImage } from "../shared/bsm-image.component";
 import { IpcService } from "renderer/services/ipc.service";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { BsmIcon } from "../svgs/bsm-icon.component";
 
 export const AvailableVersionItem = memo(function AvailableVersionItem(props: {version: BSVersion}) {
 
@@ -51,7 +51,7 @@ export const AvailableVersionItem = memo(function AvailableVersionItem(props: {v
           </div>
           { props.version.ReleaseURL && (
             <a onClickCapture={e => { e.stopPropagation(); openReleasePage(); }} className="relative flex flex-row justify-between items-center rounded-full bg-black bg-opacity-30 text-white pb-[1px] hover:bg-opacity-50">
-              <SteamIcon className="w-[25px] h-[25px] transition-transform group-hover:rotate-[-360deg] duration-300"/>
+              <BsmIcon icon="steam" className="w-[25px] h-[25px] transition-transform group-hover:rotate-[-360deg] duration-300"/>
               <span className="relative -left-[2px] text-sm w-fit max-w-0 text-center overflow-hidden h-full whitespace-nowrap pb-[3px] transition-all group-hover:max-w-[200px] group-hover:px-1 duration-300">{t("pages.available-versions.steam-release")}</span>
             </a>
           )}

src/renderer/components/nav-bar/bs-version-item.component.tsx

@@ -1,7 +1,5 @@
 import { BSVersion } from "main/services/bs-version-manager.service";
 import { Link, useLocation } from "react-router-dom";
-import { BsNoteFill } from "../svgs/bs-note-fill.component";
-import { SteamIcon } from "../svgs/steam-icon.component";
 import { BsDownloaderService } from "renderer/services/bs-downloader.service";
 import { useEffect, useState } from "react";
 import { combineLatest } from "rxjs";
@@ -10,6 +8,7 @@ import { ConfigurationService } from "renderer/services/configuration.service";
 import { BsmButton } from "../shared/bsm-button.component";
 import { BSUninstallerService } from "renderer/services/bs-uninstaller.service";
 import { BSVersionManagerService } from "renderer/services/bs-version-manager.service";
+import { BsmIcon } from "../svgs/bsm-icon.component";
 
 export function BsVersionItem(props: {version: BSVersion}) {
 
@@ -29,7 +28,6 @@ export function BsVersionItem(props: {version: BSVersion}) {
   }
 
    const handleDoubleClick = () => {
-      if(state.steam){ return; }
       launcherService.launch(
          state,
          !!configService.get<boolean>(LaunchMods.OCULUS_MOD),
@@ -63,12 +61,12 @@ export function BsVersionItem(props: {version: BSVersion}) {
 
 
   return (
-    <div className={`outline-none relative p-[1px] overflow-hidden rounded-xl flex justify-center content-center items-center mb-1 ${downloading && "nav-item-download"}`}>
+    <div className={`outline-none relative p-[1px] overflow-hidden rounded-xl flex justify-center content-center items-center mb-1 ${downloading && "nav-item-download"} active:translate-y-[1px]`}>
       <div className="progress absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`}}></div>
       <div className={`wrapper z-[1] px-2 py-[3px] w-full rounded-xl ${downloading && 'bg-black'} ${!downloading && "hover:bg-light-main-color-3 dark:hover:bg-main-color-3"} ${(isActive() && !downloading) && "bg-light-main-color-3 dark:bg-main-color-3"}`}>
          <Link onDoubleClick={handleDoubleClick} to={`/bs-version/${props.version.BSVersion}`} state={props.version} className="flex justify-center items-center">
-            {props.version.steam && <SteamIcon className="w-[19px] h-[19px] mr-1"/>}
-            {!props.version.steam && <BsNoteFill className="w-[19px] h-[19px] mr-1 text-red-600"/>}
+            {props.version.steam && <BsmIcon icon="steam" className="w-[19px] h-[19px] mr-1"/>}
+            {!props.version.steam && <BsmIcon icon="bsNote" className="w-[19px] h-[19px] mr-1 text-red-600"/>}
             <span className="flex items-center justify-center content-center shrink-0 grow text-lg dark:text-gray-200 text-gray-800 font-bold min-w-0 tracking-wide">{props.version.BSVersion}</span>
          </Link>
          {downloading && <BsmButton onClick={cancel} className="my-1 text-xs text-white rounded-md text-center hover:brightness-125" withBar={false} text="misc.cancel" typeColor="error"/>}
@@ -76,6 +74,4 @@ export function BsVersionItem(props: {version: BSVersion}) {
     </div>
 
   )
-}
-
-// className={`z-[1] flex cursor-pointer w-full justify-center content-center rounded-full items-center p-[3px] pl-2 pr-2 active:translate-y-[1px] hover:bg-light-main-color-3 dark:hover:bg-main-color-3 ${downloading && 'bg-black'} ${(isActive() && !downloading) && "bg-light-main-color-3 dark:bg-main-color-3"}`}
+}

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

@@ -1,19 +1,27 @@
-import { SettingIcon } from "./setting-icon.component"
-import { TrashIcon } from "./trash-icon.component"
-import { FavoriteIcon } from "./favorite-icon.component"
-import { FolderIcon } from "./folder-icon.component";
-import { BsNoteFill } from "./bs-note-fill.component";
-import { TerminalIcon } from "./terminal-icon.component";
-import { DesktopIcon } from "./desktop-icon.component";
-import { OculusIcon } from "./oculus-icon.component";
-import { AddIcon } from "./add-icon.component";
-import CrossIcon from "./cross-icon.component";
+import { SettingIcon } from "./icons/setting-icon.component"
+import { TrashIcon } from "./icons/trash-icon.component"
+import { FavoriteIcon } from "./icons/favorite-icon.component"
+import { FolderIcon } from "./icons/folder-icon.component";
+import { BsNoteFill } from "./icons/bs-note-fill.component";
+import { TerminalIcon } from "./icons/terminal-icon.component";
+import { DesktopIcon } from "./icons/desktop-icon.component";
+import { OculusIcon } from "./icons/oculus-icon.component";
+import { AddIcon } from "./icons/add-icon.component";
+import CrossIcon from "./icons/cross-icon.component";
 import { FranceIcon } from "./flags/france-icon.component";
 import { SpainIcon } from "./flags/spain-icon.component";
 import { UsaIcon } from "./flags/usa-icon.component";
 import { UkIcon } from "./flags/uk-icon.component";
+import { TaskIcon } from "./icons/task-icon.component";
+import { CopyIcon } from "./icons/copy-icon.component";
+import { SteamIcon } from "./icons/steam-icon.component";
 
-export type BsmIconType = "settings"|"trash"|"favorite"|"folder"|"bsNote"|"terminal"|"desktop"|"oculus"|"add"|"cross"|"fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag";
+export type BsmIconType = (
+   "settings"|"trash"|"favorite"|"folder"|"bsNote"|
+   "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|
+   "copy"|"steam"|
+   "fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"
+);
 
 export function BsmIcon({className, icon}: {className?: string, icon: BsmIconType}) {
 
@@ -32,6 +40,10 @@ export function BsmIcon({className, icon}: {className?: string, icon: BsmIconTyp
         if(icon === "es-ES-flag"){ return <SpainIcon className={className}/> }
         if(icon === "en-US-flag"){ return <UsaIcon className={className}/> }
         if(icon === "en-EN-flag"){ return <UkIcon className={className}/> }
+        if(icon === "task"){ return <TaskIcon className={className}/> }
+        if(icon === "copy"){ return <CopyIcon className={className}/> }
+        if(icon === "steam"){ return <SteamIcon className={className}/> }
+        return <TrashIcon className={className}/>
     }
 
   return (

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

@@ -0,0 +1,7 @@
+export function CopyIcon(props: {className?: string}) {
+  return (
+   <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+      <path fill="currentColor" d="M13.625 31.167q-1.292 0-2.229-.917-.938-.917-.938-2.25V6q0-1.292.938-2.229.937-.938 2.229-.938h17q1.333 0 2.25.938.917.937.917 2.229v22q0 1.333-.917 2.25t-2.25.917Zm0-3.167h17V6h-17v22Zm-5.917 9.125q-1.333 0-2.25-.937-.916-.938-.916-2.23V11.083q0-.666.458-1.104.458-.437 1.125-.437t1.125.437q.458.438.458 1.104v22.875h17.584q.666 0 1.125.459.458.458.458 1.125 0 .666-.458 1.125-.459.458-1.125.458ZM13.625 6v22V6Z"/>
+   </svg>
+  )
+}

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

@@ -0,0 +1,7 @@
+export function TaskIcon(props: {className?: string}) {
+   return (
+      <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+         <path fill="currentColor" d="m18.125 25.667-3.042-3.084q-.208-.208-.458-.312-.25-.104-.521-.104t-.521.104q-.25.104-.458.354-.417.417-.417.979 0 .563.417.979l3.917 3.875q.208.25.5.375.291.125.583.125.333 0 .604-.125.271-.125.521-.375l7.5-7.5q.417-.416.417-.979 0-.562-.417-.979-.417-.417-.979-.417-.563 0-.979.417ZM9.542 36.958q-1.292 0-2.23-.937-.937-.938-.937-2.229V6.208q0-1.291.937-2.229.938-.937 2.23-.937h13.166q.667 0 1.25.25.584.25 1 .708l7.709 7.708q.458.417.708 1 .25.584.25 1.25v19.834q0 1.291-.937 2.229-.938.937-2.23.937Zm12.875-24.375V6.208H9.542v27.584h20.916V14.167H24q-.667 0-1.125-.459-.458-.458-.458-1.125ZM9.542 6.208v7.959-7.959 27.584V6.208Z"/>
+      </svg>
+   )
+}