From 9b8092c2eb624fe5e5f835c34c380ea7b1f6e31f Mon Sep 17 00:00:00 2001
From: Igor Lira <igorlira@live.com>
Date: Sun, 8 Sep 2024 13:43:56 -0700
Subject: [PATCH] add channels button

---
 src/components/ExpandableButton/index.tsx     | 18 +++++++
 .../ExpandableButton/styles.module.css        |  6 +++
 src/views/CastInspector/index.tsx             | 12 ++---
 src/views/ScoreInspector/index.tsx            | 49 ++++++++++---------
 src/views/ScoreInspector/styles.module.css    |  7 +++
 5 files changed, 62 insertions(+), 30 deletions(-)
 create mode 100644 src/components/ExpandableButton/index.tsx
 create mode 100644 src/components/ExpandableButton/styles.module.css

diff --git a/src/components/ExpandableButton/index.tsx b/src/components/ExpandableButton/index.tsx
new file mode 100644
index 0000000..165435c
--- /dev/null
+++ b/src/components/ExpandableButton/index.tsx
@@ -0,0 +1,18 @@
+import classNames from "classnames"
+import { PropsWithChildren, useEffect, useState } from "react"
+
+import styles from './styles.module.css'
+
+type ExpandableButtonProps = PropsWithChildren<{
+  className?: string
+  label: string
+  onStateChange?: (expanded: boolean) => void
+}>
+export default function ExpandableButton({ children, className, label, onStateChange }: ExpandableButtonProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  useEffect(() => onStateChange?.(isExpanded), [onStateChange, isExpanded]);
+  return <div className={classNames(className, styles.container)}>
+    <button onClick={() => setIsExpanded(!isExpanded)} className={styles.toggleButton}>[{isExpanded ? '-' : '+'}] {label}</button>
+    {isExpanded && children}
+  </div>
+}
diff --git a/src/components/ExpandableButton/styles.module.css b/src/components/ExpandableButton/styles.module.css
new file mode 100644
index 0000000..5a3ed0c
--- /dev/null
+++ b/src/components/ExpandableButton/styles.module.css
@@ -0,0 +1,6 @@
+.toggleButton {
+  padding: 8px;
+  text-align: start;
+  background-color: #bbb;
+  cursor: pointer;
+}
diff --git a/src/views/CastInspector/index.tsx b/src/views/CastInspector/index.tsx
index 65791c8..34e8d59 100644
--- a/src/views/CastInspector/index.tsx
+++ b/src/views/CastInspector/index.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'react';
 import CastList from '../../components/CastList';
 import { CastSnapshot, ICastMemberIdentifier } from '../../vm';
 import styles from './styles.module.css';
 import classNames from 'classnames';
+import ExpandableButton from '../../components/ExpandableButton';
 
 interface CastInspectorProps {
   castNames: string[],
@@ -13,15 +13,13 @@ interface CastInspectorProps {
 }
 
 export default function CastInspector({ castNames, castSnapshots, selectedMemberId, onSelectMember, className }: CastInspectorProps) {
-  const [isExpanded, setIsExpanded] = useState(false)
-  return <div className={classNames(className, styles.container)}>
-    <button onClick={() => setIsExpanded(!isExpanded)} className={styles.toggleButton}>[{isExpanded ? '-' : '+'}] Casts</button>
-    {isExpanded && <CastList 
+  return <ExpandableButton className={classNames(className, styles.container)} label='Casts'>
+    <CastList 
       castNames={castNames} 
       castSnapshots={castSnapshots} 
       selectedMemberId={selectedMemberId} 
       onSelectMember={onSelectMember}
       className={styles.castList}
-    />}
-  </div>
+    />
+  </ExpandableButton>
 }
diff --git a/src/views/ScoreInspector/index.tsx b/src/views/ScoreInspector/index.tsx
index d39e74d..b670865 100644
--- a/src/views/ScoreInspector/index.tsx
+++ b/src/views/ScoreInspector/index.tsx
@@ -7,6 +7,7 @@ import { player_set_debug_selected_channel, subscribe_to_channel_names, unsubscr
 import { channelSelected, scoreBehaviorSelected } from "../../store/uiSlice";
 import { useEffect, useState } from "react";
 import { getScoreFrameBehaviorRef } from "../../utils/score";
+import ExpandableButton from "../../components/ExpandableButton";
 
 export default function ScoreInspector() {
   const score = useAppSelector((state) => selectScoreSnapshot(state.vm));
@@ -16,14 +17,14 @@ export default function ScoreInspector() {
   const channelSnapshots = useAppSelector((state) => state.vm.channelSnapshots);
   const selectedChannel = selectedObject?.type === "sprite" && selectedObject.spriteNumber;
   const dispatch = useAppDispatch();
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isShowingChannels, setIsShowingChannels] = useState(false);
 
   useEffect(() => {
-    if (isExpanded) {
+    if (isShowingChannels) {
       subscribe_to_channel_names();
     }
     return () => unsubscribe_from_channel_names();
-  }, [isExpanded]);
+  }, [isShowingChannels]);
 
   const onSelectChannel = (channel: number) => {
     player_set_debug_selected_channel(channel);
@@ -56,7 +57,7 @@ export default function ScoreInspector() {
             return <button key={frame} className={cellClasses} onClick={() => onSelectBehavior(frame)}></button>;
           })}
         </div>
-        <div className={styles.frameHeader} onClick={() => setIsExpanded(value => !value)}>
+        <div className={styles.frameHeader}>
           {range(1, framesToRender + 1).map((frame) => {
             const cellClasses = classNames(
               styles.frameHeaderCell,
@@ -70,25 +71,27 @@ export default function ScoreInspector() {
           })}
         </div>
       </div>
-      {isExpanded && <div className={styles.channelList}>
-        {Array.from({ length: score?.channelCount || 0 }, (_, i) => i + 1).map(
-          (channel) => {
-            let sprite = channelSnapshots[channel];
-            return (
-              <button
-                key={channel}
-                className={classNames([
-                  styles.channelRow,
-                  selectedChannel === channel && styles.selected,
-                ])}
-                onClick={() => onSelectChannel(channel)}
-              >
-                ({channel}) {sprite?.displayName}
-              </button>
-            );
-          }
-        )}
-      </div>}
+      <ExpandableButton label="Channels" className={styles.channelsButton} onStateChange={setIsShowingChannels}>
+        <div className={styles.channelList}>
+          {Array.from({ length: score?.channelCount || 0 }, (_, i) => i + 1).map(
+            (channel) => {
+              let sprite = channelSnapshots[channel];
+              return (
+                <button
+                  key={channel}
+                  className={classNames([
+                    styles.channelRow,
+                    selectedChannel === channel && styles.selected,
+                  ])}
+                  onClick={() => onSelectChannel(channel)}
+                >
+                  ({channel}) {sprite?.displayName}
+                </button>
+              );
+            }
+          )}
+        </div>
+      </ExpandableButton>
     </div>
   );
 }
diff --git a/src/views/ScoreInspector/styles.module.css b/src/views/ScoreInspector/styles.module.css
index e9e0907..7d9000b 100644
--- a/src/views/ScoreInspector/styles.module.css
+++ b/src/views/ScoreInspector/styles.module.css
@@ -6,6 +6,13 @@
   width: 100%;
 }
 
+.channelsButton {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
 .scoreScrollContainer {
   overflow-x: scroll;
   overflow-y: hidden;