fix: motion API type; playlist selection handler

Author: adidahiya

packages/raga-web-app/src/components/audioPlayer/trackBPMOverlay.tsx

@@ -11,7 +11,7 @@ import { appStore } from "../../store/appStore";
 import AnalyzeSingleTrackButton from "../trackTable/analyzeSingleTrackButton";
 import styles from "./trackBPMOverlay.module.scss";
 
-const SLIDER_TRANSITION = { type: "tween", duration: 0.2, ease: "easeInOut" };
+const SLIDER_TRANSITION = { type: "tween" as const, duration: 0.2, ease: "easeInOut" as const };
 
 export function TrackBPMOverlay({ trackDef }: { trackDef: TrackDefinition }) {
   const playbackRate = appStore.use.audioPlaybackRate();

packages/raga-web-app/src/components/common/tree.tsx

@@ -143,14 +143,15 @@ function ControlledTree<T extends object>({
     [tree],
   );
 
-  const handleLabelClick = useCallback(
+  const handleSingleSelection = useCallback(
     (nodeValue: string, selected: boolean) => {
       if (selectionMode !== "single") {
         return;
       }
 
       if (selected) {
         tree.deselect(nodeValue);
+        onSelect?.([]);
       } else {
         tree.select(nodeValue);
         const selectedNode = findNodeById(nodes, mantineNodeValueToId(nodeValue));
@@ -186,6 +187,10 @@ function ControlledTree<T extends object>({
             [styles.selectOnClick]: selectionMode === "single",
             [styles.selectedPath]: selected,
           })}
+          onClick={(event: React.MouseEvent<HTMLDivElement>) => {
+            handleSingleSelection(node.value, selected);
+            elementProps.onClick(event);
+          }}
         >
           {selectionMode === "multiple" && (
             <Checkbox.Indicator
@@ -212,18 +217,13 @@ function ControlledTree<T extends object>({
             </ActionIcon>
           )}
 
-          <div
-            className={styles.labelContainer}
-            onClick={() => {
-              handleLabelClick(node.value, selected);
-            }}
-          >
+          <div className={styles.labelContainer}>
             <span>{node.label}</span>
           </div>
         </div>
       );
     },
-    [selectionMode, tree, handleCheckboxClick, handleExpandClick, handleLabelClick],
+    [selectionMode, tree, handleCheckboxClick, handleExpandClick, handleSingleSelection],
   );
 
   // Update tree state controlled selection changes
@@ -266,33 +266,7 @@ function ControlledTree<T extends object>({
   );
 }
 
-export default memo(ControlledTree, (prevProps, nextProps) => {
-  // Custom comparison to prevent re-renders when array contents haven't changed
-  if (prevProps.selectionMode !== nextProps.selectionMode) {
-    return false;
-  }
-
-  if (prevProps.nodes !== nextProps.nodes) {
-    return false;
-  }
-
-  if (prevProps.onSelect !== nextProps.onSelect) {
-    return false;
-  }
-
-  // Deep comparison for selectedNodeIds array
-  if (prevProps.selectedNodeIds.length !== nextProps.selectedNodeIds.length) {
-    return false;
-  }
-
-  for (let i = 0; i < prevProps.selectedNodeIds.length; i++) {
-    if (prevProps.selectedNodeIds[i] !== nextProps.selectedNodeIds[i]) {
-      return false;
-    }
-  }
-
-  return true;
-}) as typeof ControlledTree;
+export default memo(ControlledTree) as typeof ControlledTree;
 
 // UTILITIES
 // -------------------------------------------------------------------------------------------------

packages/raga-web-app/src/components/playlistTable/playlistTable.tsx

@@ -42,9 +42,14 @@ function PlaylistTable({
   const handleSelect = useCallback(
     (nodes: TreeNode<PlaylistDefinition>[]) => {
       if (selectionMode === "single") {
-        const firstNode = nodes[0];
-        log.debug(`[client] selected playlist ${firstNode.id}: '${firstNode.data.Name}'`);
-        onSelect?.([firstNode.id]);
+        if (nodes.length === 0) {
+          // No playlist selected
+          onSelect?.([]);
+        } else {
+          const firstNode = nodes[0];
+          log.debug(`[client] selected playlist ${firstNode.id}: '${firstNode.data.Name}'`);
+          onSelect?.([firstNode.id]);
+        }
       } else if (selectionMode === "multiple") {
         onSelect?.(nodes.map((n) => n.id));
       }
@@ -74,7 +79,7 @@ function PlaylistTable({
           nodes={playlistDefNodes}
           selectionMode={selectionMode}
           selectedNodeIds={selectedNodeIds}
-          onSelect={selectionMode === "none" ? undefined : handleSelect}
+          onSelect={handleSelect}
         />
       </div>
     </Box>

packages/raga-web-app/src/store/slices/audioFilesServerSlice.tsx

@@ -283,7 +283,7 @@ function initAudioFilesServer(set: AppStoreSet) {
     window.api.handleOnce<AudioFilesServerStartedEventPayload>(
       ServerEventChannel.AUDIO_FILES_SERVER_STARTED,
       (data) => {
-        console.log("[AudioFilesServerSlice] Audio files server started", data);
+        log.info(`[client] Audio files server started: ${data.audioConverterTemporaryFolder}`);
         set((state) => {
           notifications.show({
             title: "Audio files server started",

packages/raga-web-app/src/views/libraryView.tsx

@@ -24,8 +24,12 @@ export default function LibraryView() {
   const setSelectedPlaylistId = appStore.use.setSelectedPlaylistId();
 
   const handlePlaylistSelect = useCallback(
-    ([playlistId]: string[]) => {
-      setSelectedPlaylistId(playlistId);
+    (playlistIds: string[]) => {
+      if (playlistIds.length === 0) {
+        setSelectedPlaylistId(undefined);
+      } else {
+        setSelectedPlaylistId(playlistIds[0]);
+      }
     },
     [setSelectedPlaylistId],
   );