fix: remove history on select

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 {

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();

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 },