Fix/ui-rerendering

src/dashboard/Dashboard.js

@@ -9,7 +9,6 @@ import {
   recordingDataAtom,
   activeTrackIdAtom,
   activeSetIdAtom,
-  selectedChannelAtom,
   flashingConstructorsAtom,
   recordingStateAtom,
   useFlashingChannels,
@@ -39,7 +38,6 @@ const Dashboard = () => {
   const [activeTrackId, setActiveTrackId] = useAtom(activeTrackIdAtom);
   const [activeSetId, setActiveSetId] = useAtom(activeSetIdAtom);
   const [predefinedModules, setPredefinedModules] = useState([]);
-  const [selectedChannel, setSelectedChannel] = useAtom(selectedChannelAtom);
   const [, flashChannel] = useFlashingChannels();
   const [, setFlashingConstructors] = useAtom(flashingConstructorsAtom);
 
@@ -49,35 +47,12 @@ const Dashboard = () => {
   const {
     workspacePath,
     setWorkspacePath,
-    isWorkspaceModalOpen,
-    setIsWorkspaceModalOpen,
     workspaceModalMode,
     setWorkspaceModalMode,
     workspaceModalPath,
     setWorkspaceModalPath,
-    isCreateTrackOpen,
-    setIsCreateTrackOpen,
-    isCreateSetOpen,
-    setIsCreateSetOpen,
-    isSelectTrackModalOpen,
-    setIsSelectTrackModalOpen,
-    isSelectSetModalOpen,
-    setIsSelectSetModalOpen,
-    isSettingsModalOpen,
-    setIsSettingsModalOpen,
-    isInputMappingsModalOpen,
-    setIsInputMappingsModalOpen,
-    isReleaseNotesOpen,
-    setIsReleaseNotesOpen,
-    isAddModuleModalOpen,
-    setIsAddModuleModalOpen,
-    isManageModulesModalOpen,
-    setIsManageModulesModalOpen,
-    isDebugOverlayOpen,
-    setIsDebugOverlayOpen,
     selectedTrackForModuleMenu,
     setSelectedTrackForModuleMenu,
-    openAddModuleModal,
     handleCreateNewModule,
     handleCreateModule,
     handleEditModule,
@@ -87,10 +62,7 @@ const Dashboard = () => {
     editingTemplateType,
     isNewModuleDialogOpen,
     setIsNewModuleDialogOpen,
-    confirmationModal,
-    setConfirmationModal,
     openAlertModal,
-    openConfirmationModal,
     debugLogs,
     setDebugLogs,
     isSequencerMuted,
@@ -99,11 +71,8 @@ const Dashboard = () => {
     setIsProjectorReady,
     perfStats,
     setPerfStats,
-    editChannelModalState,
-    setEditChannelModalState,
-    handleEditChannel,
     handleDeleteChannel,
-  } = useDashboardUiState({ selectedChannel, setUserData, activeSetId });
+  } = useDashboardUiState({ setUserData, activeSetId });
 
   const userDataRef = useLatestRef(userData);
   const recordingDataRef = useLatestRef(recordingData);
@@ -167,7 +136,6 @@ const Dashboard = () => {
     setInputStatus,
     setDebugLogs,
     sendToProjector,
-    isDebugOverlayOpen,
     setIsProjectorReady,
   });
 
@@ -200,7 +168,6 @@ const Dashboard = () => {
 
   useWorkspaceModules({
     workspacePath,
-    isWorkspaceModalOpen,
     sendToProjector,
     userData,
     setUserData,
@@ -236,7 +203,6 @@ const Dashboard = () => {
     setWorkspacePath,
     setWorkspaceModalMode,
     setWorkspaceModalPath,
-    setIsWorkspaceModalOpen,
   });
 
   const handleSelectWorkspace = useCallback(async () => {
@@ -293,14 +259,7 @@ const Dashboard = () => {
 
   return (
     <div className="relative bg-[#101010] font-mono h-screen flex flex-col">
-      <DashboardHeader
-        onSets={() => setIsSelectSetModalOpen(true)}
-        onTracks={() => setIsSelectTrackModalOpen(true)}
-        onModules={() => setIsManageModulesModalOpen(true)}
-        onSettings={() => setIsSettingsModalOpen(true)}
-        onDebugOverlay={() => setIsDebugOverlayOpen(true)}
-        onReleases={() => setIsReleaseNotesOpen(true)}
-      />
+      <DashboardHeader />
 
       <div className="flex-1 overflow-y-auto pt-12 pb-32">
         <div className="bg-[#101010] p-6 font-mono">
@@ -309,8 +268,6 @@ const Dashboard = () => {
             activeSetId={activeSetId}
             activeTrackId={activeTrackId}
             predefinedModules={predefinedModules}
-            openAddModuleModal={openAddModuleModal}
-            openConfirmationModal={openConfirmationModal}
             setActiveTrackId={setActiveTrackId}
             inputConfig={inputConfig}
             config={userData.config}
@@ -338,33 +295,12 @@ const Dashboard = () => {
         inputStatus={inputStatus}
         inputConfig={inputConfig}
         config={userData.config}
-        onSettingsClick={() => setIsSettingsModalOpen(true)}
         isMuted={isSequencerMuted}
         onMuteChange={setIsSequencerMuted}
         isProjectorReady={isProjectorReady}
       />
 
       <DashboardModalLayer
-        isCreateTrackOpen={isCreateTrackOpen}
-        setIsCreateTrackOpen={setIsCreateTrackOpen}
-        isCreateSetOpen={isCreateSetOpen}
-        setIsCreateSetOpen={setIsCreateSetOpen}
-        isSelectTrackModalOpen={isSelectTrackModalOpen}
-        setIsSelectTrackModalOpen={setIsSelectTrackModalOpen}
-        isSelectSetModalOpen={isSelectSetModalOpen}
-        setIsSelectSetModalOpen={setIsSelectSetModalOpen}
-        isSettingsModalOpen={isSettingsModalOpen}
-        setIsSettingsModalOpen={setIsSettingsModalOpen}
-        isInputMappingsModalOpen={isInputMappingsModalOpen}
-        setIsInputMappingsModalOpen={setIsInputMappingsModalOpen}
-        isReleaseNotesOpen={isReleaseNotesOpen}
-        setIsReleaseNotesOpen={setIsReleaseNotesOpen}
-        isAddModuleModalOpen={isAddModuleModalOpen}
-        setIsAddModuleModalOpen={setIsAddModuleModalOpen}
-        isManageModulesModalOpen={isManageModulesModalOpen}
-        setIsManageModulesModalOpen={setIsManageModulesModalOpen}
-        isDebugOverlayOpen={isDebugOverlayOpen}
-        setIsDebugOverlayOpen={setIsDebugOverlayOpen}
         userData={userData}
         setUserData={setUserData}
         recordingData={recordingData}
@@ -398,23 +334,14 @@ const Dashboard = () => {
         onCreateModule={handleCreateModule}
         debugLogs={debugLogs}
         perfStats={perfStats}
-        selectedChannel={selectedChannel}
-        setSelectedChannel={setSelectedChannel}
-        onEditChannel={handleEditChannel}
         onDeleteChannel={handleDeleteChannel}
         workspaceModuleFiles={workspaceModuleFiles}
         workspaceModuleLoadFailures={workspaceModuleLoadFailures}
         workspaceModuleSkipped={workspaceModuleSkipped}
-        editChannelModalState={editChannelModalState}
-        setEditChannelModalState={setEditChannelModalState}
-        confirmationModal={confirmationModal}
-        setConfirmationModal={setConfirmationModal}
         openAlertModal={openAlertModal}
-        openConfirmationModal={openConfirmationModal}
       />
 
       <WorkspaceGateModal
-        isOpen={isWorkspaceModalOpen}
         mode={workspaceModalMode}
         workspacePath={workspacePath}
         workspaceModalPath={workspaceModalPath}

src/dashboard/components/DashboardBody.tsx

@@ -6,8 +6,6 @@ type DashboardBodyProps = {
   activeSetId: unknown;
   activeTrackId: string | number | null;
   predefinedModules: unknown[];
-  openAddModuleModal: (trackIndex: number) => void;
-  openConfirmationModal: (message: string, onConfirm: () => void) => void;
   setActiveTrackId: (id: string | number | null) => void;
   inputConfig: unknown;
   config: Record<string, unknown> | null;
@@ -24,8 +22,6 @@ export const DashboardBody = ({
   activeSetId,
   activeTrackId,
   predefinedModules,
-  openAddModuleModal,
-  openConfirmationModal,
   setActiveTrackId,
   inputConfig,
   config,
@@ -55,8 +51,6 @@ export const DashboardBody = ({
               track={track}
               trackIndex={trackIndex}
               predefinedModules={predefinedModules}
-              openRightMenu={openAddModuleModal}
-              onConfirmDelete={openConfirmationModal}
               setActiveTrackId={setActiveTrackId}
               inputConfig={inputConfig}
               config={config}

src/dashboard/components/DashboardFooter.tsx

@@ -1,8 +1,9 @@
-import { useAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import { FaPlay, FaStop } from "react-icons/fa";
 import { recordingDataAtom } from "../core/state";
 import { Checkbox } from "./FormInputs";
 import { Button } from "./Button";
+import { settingsModalAtom } from "../core/modalAtoms";
 
 type InputConfig = {
   type?: string;
@@ -25,7 +26,6 @@ type DashboardFooterProps = {
   onStop: () => void;
   inputStatus: InputStatus;
   inputConfig: InputConfig | null;
-  onSettingsClick: () => void;
   config: DashboardConfig | null;
   isMuted: boolean;
   onMuteChange: (next: boolean) => void;
@@ -39,13 +39,13 @@ export const DashboardFooter = ({
   onStop,
   inputStatus,
   inputConfig,
-  onSettingsClick,
   config,
   isMuted,
   onMuteChange,
   isProjectorReady,
 }: DashboardFooterProps) => {
   const [_recordingData] = useAtom(recordingDataAtom);
+  const setSettingsModalIsOpen = useSetAtom(settingsModalAtom)
 
   const getStatusColor = () => {
     switch (inputStatus.status) {
@@ -103,7 +103,7 @@ export const DashboardFooter = ({
           <div className="text-neutral-300/30 text-[11px]">No track selected</div>
           {!config?.sequencerMode && (
             <button
-              onClick={onSettingsClick}
+              onClick={() => setSettingsModalIsOpen(true)}
               className={`text-[10px] font-mono flex items-center gap-2 cursor-pointer hover:opacity-70 transition-opacity ${getStatusColor()}`}
               title={`${inputStatus.status}: ${getStatusText()}`}
             >
@@ -169,7 +169,7 @@ export const DashboardFooter = ({
             </>
           ) : (
             <button
-              onClick={onSettingsClick}
+              onClick={() => setSettingsModalIsOpen(true)}
               className={`text-[10px] font-mono flex items-center gap-2 cursor-pointer hover:opacity-70 transition-opacity ${getStatusColor()}`}
               title={`${inputStatus.status}: ${getStatusText()}`}
             >

src/dashboard/components/DashboardHeader.tsx

@@ -1,51 +1,44 @@
 import { FaBars, FaCog, FaCode, FaMusic, FaTag } from "react-icons/fa";
 import { Button } from "./Button";
 import { useUpdateCheck } from "../core/hooks/useUpdateCheck";
+import {
+  debugOverlayModalAtom,
+  addModuleModalAtom,
+  releaseNotesModalAtom,
+  selectSetModalAtom,
+  selectTrackModalAtom,
+  settingsModalAtom
+} from "../core/modalAtoms";
+import { useSetAtom } from "jotai";
 
-type DashboardHeaderProps = {
-  onSets?: (() => void) | null;
-  onTracks?: (() => void) | null;
-  onModules?: (() => void) | null;
-  onSettings?: (() => void) | null;
-  onDebugOverlay?: (() => void) | null;
-  onReleases?: (() => void) | null;
-};
+export const DashboardHeader = () => {
+  const openSelectSet = useSetAtom(selectSetModalAtom)
+  const openSelectTracks = useSetAtom(selectTrackModalAtom)
+  const openAddModule = useSetAtom(addModuleModalAtom)
+  const openSettings = useSetAtom(settingsModalAtom)
+  const openDebugOverlay = useSetAtom(debugOverlayModalAtom)
+  const openReleaseNotes = useSetAtom(releaseNotesModalAtom)
 
-export const DashboardHeader = ({
-  onSets,
-  onTracks,
-  onModules,
-  onSettings,
-  onDebugOverlay,
-  onReleases,
-}: DashboardHeaderProps) => {
   const update = useUpdateCheck();
   const hasUpdate = update.status === "updateAvailable";
 
-  const handleOpenUpdates = () => {
-    if (typeof onReleases === "function") {
-      onReleases();
-      return;
-    }
-  };
-
   return (
     <div className="fixed top-0 left-0 right-0 z-50 bg-[#101010] border-b border-neutral-800 px-6 py-4">
       <div className="flex justify-between items-center">
         <div className="flex items-center gap-6">
-          <Button onClick={onSets} icon={<FaBars />}>
+          <Button onClick={() => openSelectSet(true)} icon={<FaBars />}>
             SETS
           </Button>
-          <Button onClick={onTracks} icon={<FaMusic />}>
+          <Button onClick={() => openSelectTracks(true)} icon={<FaMusic />}>
             TRACKS
           </Button>
-          <Button onClick={onModules} icon={<FaCode />}>
+          <Button onClick={() => openAddModule('manage-modules')} icon={<FaCode />}>
             MODULES
           </Button>
-          <Button onClick={onSettings} icon={<FaCog />}>
+          <Button onClick={() => openSettings(true)} icon={<FaCog />}>
             SETTINGS
           </Button>
-          <Button onClick={onDebugOverlay} icon={<FaCode />}>
+          <Button onClick={() => openDebugOverlay(true)} icon={<FaCode />}>
             DEBUG
           </Button>
         </div>
@@ -54,7 +47,7 @@ export const DashboardHeader = ({
             <div className="opacity-50 text-[11px] text-neutral-300">nw_wrld</div>
             <button
               type="button"
-              onClick={handleOpenUpdates}
+              onClick={() => openReleaseNotes(true)}
               className={`relative flex items-center ${
                 hasUpdate ? "text-red-500/80 opacity-100" : "text-neutral-300 opacity-50"
               }`}