From 5bd1dd3016cf97ad397b4371015605473c55dee8 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Wed, 11 Oct 2023 20:51:20 +0330
Subject: [PATCH] fix: remove history on select

---
 src/components/buttons/buttons.module.css | 8 ++++++--
 src/components/buttons/buttons.tsx        | 3 ++-
 src/store/sound/sound.actions.ts          | 1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/buttons/buttons.module.css b/src/components/buttons/buttons.module.css
index 34f0e9a..7426058 100644
--- a/src/components/buttons/buttons.module.css
+++ b/src/components/buttons/buttons.module.css
@@ -25,8 +25,10 @@
     line-height: 0;
     outline: none;
 
-    &:disabled {
+    &:disabled,
+    &.disabled {
       cursor: default;
+      opacity: 0.8;
     }
 
     & span {
@@ -53,8 +55,10 @@
     outline: none;
     transition: 0.2s;
 
-    &:disabled {
+    &:disabled,
+    &.disabled {
       cursor: default;
+      opacity: 0.8;
     }
 
     &.restore {
diff --git a/src/components/buttons/buttons.tsx b/src/components/buttons/buttons.tsx
index 8e879f8..720b18e 100644
--- a/src/components/buttons/buttons.tsx
+++ b/src/components/buttons/buttons.tsx
@@ -27,7 +27,7 @@ export function Buttons() {
   return (
     <div className={styles.buttons}>
       <button
-        className={styles.playButton}
+        className={cn(styles.playButton, noSelected && styles.disabled)}
         disabled={noSelected}
         onClick={handleClick}
       >
@@ -56,6 +56,7 @@ export function Buttons() {
         className={cn(
           styles.smallButton,
           hasHistory ? styles.restore : styles.delete,
+          noSelected && !hasHistory && styles.disabled,
         )}
         onClick={() => {
           if (hasHistory) restoreHistory();
diff --git a/src/store/sound/sound.actions.ts b/src/store/sound/sound.actions.ts
index 1d4f9a2..97a20e6 100644
--- a/src/store/sound/sound.actions.ts
+++ b/src/store/sound/sound.actions.ts
@@ -27,6 +27,7 @@ export const createActions: StateCreator<
 
     select(id) {
       set({
+        history: null,
         sounds: {
           ...get().sounds,
           [id]: { ...get().sounds[id], isSelected: true },