use crypto api for uuid

package-lock.json

@@ -13626,11 +13626,6 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
-    "uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
-    },
     "v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",

package.json

@@ -254,8 +254,7 @@
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-scoped-groups": "^2.0.0",
     "use-delayed-state": "^1.2.0",
-    "use-double-click": "^1.0.5",
-    "uuid": "^9.0.0"
+    "use-double-click": "^1.0.5"
   },
   "devEngines": {
     "node": ">=14.x",

src/renderer/components/maps-mangement-components/map-item.component.tsx

@@ -12,7 +12,6 @@ import { AudioPlayerService } from "renderer/services/audio-player.service";
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { map } from "rxjs/operators";
 import useDelayedState from "use-delayed-state";
-import { v4 as uuidv4 } from 'uuid';
 import equal from "fast-deep-equal/es6";
 import { getMapZipUrlFromHash } from "renderer/helpers/maps-utils";
 import { BsmBasicSpinner } from "../shared/bsm-basic-spinner/bsm-basic-spinner.component";
@@ -129,7 +128,7 @@ export const MapItem = memo(({hash, title, autor, songAutor, coverUrl, songUrl,
         }
         if(diffSets.length > 1){
             return diffSets.map(([diffType, diffSet]) => (
-                <Fragment key={uuidv4()}>
+                <Fragment key={crypto.randomUUID()}>
                     <BsmIcon className="h-full w-fit mr-px" icon={diffType}/>
                     <span className="mr-2 font-bold text-[15px] h-full flex items-center pb-px">{diffSet.length}</span>
                 </Fragment>
@@ -144,7 +143,7 @@ export const MapItem = memo(({hash, title, autor, songAutor, coverUrl, songUrl,
                 {(diffsPanelHovered || bottomBarHovered) && (
                     <motion.ul key={hash} className="absolute top-[calc(100%-10px)] w-full h-fit max-h-[200%] pt-4 pb-2 px-2 overflow-y-scroll bg-main-color-3 brightness-125 rounded-md flex flex-col gap-3 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 shadow-sm shadow-black" initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}} transition={{duration: .15}} onHoverStart={diffsPanelHoverStart} onHoverEnd={diffsPanelHoverEnd}>
                         {Array.from(diffs.entries()).map(([charac, diffSet]) => (
-                            <ol key={uuidv4()} className="flex flex-col w-full gap-1">
+                            <ol key={crypto.randomUUID()} className="flex flex-col w-full gap-1">
                                 {diffSet.map(({type, name, stars}) => (
                                     <li key={`${type}${name}${stars}`} className="w-full h-4 flex items-center gap-1">
                                         <BsmIcon className="h-full w-fit p-px" icon={charac}/>

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

@@ -3,7 +3,6 @@ import { BsmIconType, BsmIcon } from "../svgs/bsm-icon.component"
 import { BsmButton } from "./bsm-button.component"
 import { useTranslation } from "renderer/hooks/use-translation.hook"
 import { AnimatePresence } from "framer-motion"
-import { v4 as uuidv4 } from 'uuid';
 import { useClickOutside } from "renderer/hooks/use-click-outside.hook"
 
 export interface DropDownItem {text: string, icon?: BsmIconType, onClick?: () => void}
@@ -46,7 +45,7 @@ export function BsmDropdownButton({className, items, align, withBar = true, icon
          <BsmButton onClick={() => setExpanded(!expanded)} className={buttonClassName ?? defaultButtonClassName} icon={icon} active={expanded} onClickOutside={handleClickOutside} withBar={withBar} text={text}/>
          <div className={`py-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md bg-inherit text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-[scale] ease-in-out ${alignClass}`} style={{scale: expanded ? "1" : "0", translate: `0 ${menuTranslationY}`}}>
             { items?.map((i) => (
-               <div key={uuidv4()} onClick={() => i.onClick?.()} className="flex w-full px-3 py-2 hover:backdrop-brightness-150">
+               <div key={crypto.randomUUID()} onClick={() => i.onClick?.()} className="flex w-full px-3 py-2 hover:backdrop-brightness-150">
                   {i.icon && <BsmIcon icon={i.icon} className="h-5 w-5 mr-1 text-inherit"/>}
                   <span className="w-max">{t(i.text)}</span>
                </div>

src/renderer/services/notification.service.ts

@@ -1,5 +1,4 @@
 import { BehaviorSubject } from "rxjs";
-import { v4 as uuidv4 } from 'uuid';
 
 export class NotificationService{
 
@@ -17,7 +16,7 @@ export class NotificationService{
     }
 
     public notify(notification: Notification): Promise<NotificationResult|string>{
-        const resovableNotification: ResolvableNotification = {id: uuidv4(), notification, resolver: null };
+        const resovableNotification: ResolvableNotification = {id: crypto.randomUUID(), notification, resolver: null };
         const promise = new Promise<NotificationResult|string>(resolve => {
             resovableNotification.resolver = resolve;
             setTimeout(() => resolve(NotificationResult.NO_CHOICE), notification.duration || 7000);