From e2cd75a332fab318a529f4f6e04ecf1867be7fd1 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sun, 8 Oct 2023 18:52:08 +0330
Subject: [PATCH] feat: add hidden selection indicator

---
 src/components/sound/sound.tsx          | 16 +++++++++-
 src/components/sounds/sounds.module.css | 11 +++++++
 src/components/sounds/sounds.tsx        | 40 +++++++++++++++++++++++--
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx
index fd582dc..992b68a 100644
--- a/src/components/sound/sound.tsx
+++ b/src/components/sound/sound.tsx
@@ -12,9 +12,18 @@ interface SoundProps {
   src: string;
   icon: React.ReactNode;
   hidden: boolean;
+  selectHidden: (key: string) => void;
+  unselectHidden: (key: string) => void;
 }
 
-export function Sound({ hidden, icon, label, src }: SoundProps) {
+export function Sound({
+  hidden,
+  icon,
+  label,
+  selectHidden,
+  src,
+  unselectHidden,
+}: SoundProps) {
   const { isPlaying, play } = usePlay();
   const [isSelected, setIsSelected] = useLocalStorage(
     `${label}-is-selected`,
@@ -32,6 +41,11 @@ export function Sound({ hidden, icon, label, src }: SoundProps) {
     }
   }, [isSelected, sound, isPlaying]);
 
+  useEffect(() => {
+    if (hidden && isSelected) selectHidden(label);
+    else if (hidden && !isSelected) unselectHidden(label);
+  }, [label, isSelected, hidden, selectHidden, unselectHidden]);
+
   const select = useCallback(() => {
     setIsSelected(true);
     play();
diff --git a/src/components/sounds/sounds.module.css b/src/components/sounds/sounds.module.css
index 8ebe7bd..f204944 100644
--- a/src/components/sounds/sounds.module.css
+++ b/src/components/sounds/sounds.module.css
@@ -36,4 +36,15 @@
     content: '';
     transform: translateX(-50%);
   }
+
+  &.active::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #818cf8;
+    content: '';
+  }
 }
diff --git a/src/components/sounds/sounds.tsx b/src/components/sounds/sounds.tsx
index 0403133..97cf3c9 100644
--- a/src/components/sounds/sounds.tsx
+++ b/src/components/sounds/sounds.tsx
@@ -1,5 +1,8 @@
+import { useState, useMemo, useCallback } from 'react';
+
 import { Sound } from '@/components/sound';
 import { useLocalStorage } from '@/hooks/use-local-storage';
+import { cn } from '@/helpers/styles';
 
 import styles from './sounds.module.css';
 
@@ -11,17 +14,50 @@ interface SoundsProps {
 export function Sounds({ id, sounds }: SoundsProps) {
   const [showAll, setShowAll] = useLocalStorage(`${id}-show-more`, false);
 
+  const [hiddenSelections, setHiddenSelections] = useState<{
+    [key: string]: boolean;
+  }>({});
+
+  const hasHiddenSelection = useMemo(() => {
+    const keys = Object.keys(hiddenSelections);
+
+    return keys.some(key => hiddenSelections[key]);
+  }, [hiddenSelections]);
+
+  const selectHidden = useCallback((key: string) => {
+    setHiddenSelections(prev => ({
+      ...prev,
+      [key]: true,
+    }));
+  }, []);
+
+  const unselectHidden = useCallback((key: string) => {
+    setHiddenSelections(prev => ({
+      ...prev,
+      [key]: false,
+    }));
+  }, []);
+
   return (
     <div>
       <div className={styles.sounds}>
         {sounds.map((sound, index) => (
-          <Sound key={sound.label} {...sound} hidden={!showAll && index > 3} />
+          <Sound
+            key={sound.label}
+            {...sound}
+            hidden={!showAll && index > 3}
+            selectHidden={selectHidden}
+            unselectHidden={unselectHidden}
+          />
         ))}
       </div>
 
       {sounds.length > 4 && (
         <button
-          className={styles.button}
+          className={cn(
+            styles.button,
+            hasHiddenSelection && !showAll && styles.active,
+          )}
           onClick={() => setShowAll(prev => !prev)}
         >
           {showAll ? 'Show Less' : 'Show More'}