Rename timbre to editor, remove outdated tabs

public/index.html

@@ -4,12 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="description" content="Alapatch - A microKORG patch editor" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link
       href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400&display=swap"

src/App.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import Menu from './features/menu';
-import TimbreSwitcher from './features/timbre/timbreSwitcher';
+import Editor from './features/editor';
 
 function App() {
   return (
     <div className='grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
       <Menu className='col-span-1' />
-      <TimbreSwitcher className='col-span-5' />
+      <Editor className='col-span-5' />
     </div>
   );
 }

src/app/store.js

@@ -1,6 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
-import timbreReducer from '../features/timbre/timbreSlice';
-import parameterReducer from '../features/timbre/parameters/parameterSlice';
+import timbreReducer from '../features/editor/timbreSlice';
+import parameterReducer from '../features/editor/parameters/parameterSlice';
 
 export default configureStore({
   reducer: {

src/features/editor/index.js

@@ -0,0 +1,20 @@
+import Timbre from './Timbre';
+import Vocoder from './Vocoder';
+import Effects from './Effects';
+import Arpeggio from './Arpeggio';
+import { useSelector } from 'react-redux';
+
+const Editor = () => {
+  const activeTab = useSelector((state) => state.parameters.activeTab);
+  return (
+    <div>
+      {activeTab === 'Timbre1' ? <Timbre id='timbre1' /> : null}
+      {activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null}
+      {activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null}
+      {activeTab === 'Effects' ? <Effects id='effects' /> : null}
+      {activeTab === 'Arpeggio' ? <Arpeggio id='arpeggio' /> : null}
+    </div>
+  );
+};
+
+export default Editor;

src/features/editor/parameters/parameterSlice.js

@@ -425,7 +425,7 @@ const defaultState = {
     },
   },
   unsaved: false,
-  tabIndex: 0,
+  activeTab: 'Timbre1',
 };
 
 const parametersAdapter = createEntityAdapter({});
@@ -442,8 +442,8 @@ const parametersSlice = createSlice({
     parameterFlipUnsaved(state) {
       state.unsaved = !state.unsaved;
     },
-    parameterUpdateIndex(state, action) {
-      state.tabIndex = action.payload;
+    parameterUpdateTab(state, action) {
+      state.activeTab = action.payload;
     },
     parameterFromFile(state, action) {
       parametersAdapter.upsertMany(state, action.payload);
@@ -464,7 +464,7 @@ export const {
   parameterRefreshAll,
   parameterFlipUnsaved,
   parameterFromFile,
-  parameterUpdateIndex,
+  parameterUpdateTab,
 } = parametersSlice.actions;
 
 export default parametersSlice.reducer;

src/features/menu/index.js

@@ -2,12 +2,12 @@ import { useRef, useState, useEffect } from 'react';
 import { Select } from '../utils/components';
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  parameterUpdateIndex,
+  parameterUpdateTab,
   parameterUpdated,
   parameterFromFile,
   parameterRefreshAll,
   selectEntities,
-} from '../timbre/parameters/parameterSlice'; // probably temporarily here
+} from '../editor/parameters/parameterSlice'; // probably temporarily here
 import { return_store_from_file, return_file_from_store } from '../io';
 
 export default function Menu() {
@@ -106,7 +106,7 @@ export default function Menu() {
           disabled={state.patch.mode === 'Vocoder'}
           className='btn'
           onClick={() => {
-            dispatch(parameterUpdateIndex(0));
+            dispatch(parameterUpdateTab('Timbre1'));
           }}>
           Timbre 1
         </button>
@@ -114,7 +114,7 @@ export default function Menu() {
           disabled={state.patch.mode !== 'Multiple'}
           className='btn'
           onClick={() => {
-            dispatch(parameterUpdateIndex(1));
+            dispatch(parameterUpdateTab('Timbre2'));
           }}>
           Timbre 2
         </button>
@@ -122,21 +122,21 @@ export default function Menu() {
           disabled={state.patch.mode !== 'Vocoder'}
           className='btn'
           onClick={() => {
-            dispatch(parameterUpdateIndex(2));
+            dispatch(parameterUpdateTab('Vocoder'));
           }}>
           Vocoder
         </button>
         <button
           className='btn'
           onClick={() => {
-            dispatch(parameterUpdateIndex(3));
+            dispatch(parameterUpdateTab('Effects'));
           }}>
           Effects
         </button>
         <button
           className='btn'
           onClick={() => {
-            dispatch(parameterUpdateIndex(4));
+            dispatch(parameterUpdateTab('Arpeggio'));
           }}>
           Arpeggio
         </button>

src/features/timbre/timbreSwitcher.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import Timbre from './Timbre';
-import Vocoder from './Vocoder';
-import Effects from './Effects';
-import Arpeggio from './Arpeggio';
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import { useSelector } from 'react-redux';
-
-export default function TimbreSwitcher() {
-  const index = useSelector((state) => state.parameters.tabIndex);
-  return (
-    <div>
-      <Tabs selectedIndex={index} onSelect={() => {}}>
-        <TabList>
-          <Tab>Timbre 1</Tab>
-          <Tab>Timbre 2</Tab>
-          <Tab>Vocoder</Tab>
-          <Tab>Effects</Tab>
-          <Tab>Arpeggio</Tab>
-        </TabList>
-
-        <TabPanel>
-          <Timbre id='timbre1' />
-        </TabPanel>
-        <TabPanel>
-          <Timbre id='timbre2' />
-        </TabPanel>
-        <TabPanel>
-          <Vocoder id='vocoder' />
-        </TabPanel>
-        <TabPanel>
-          <Effects id='effects' />
-        </TabPanel>
-        <TabPanel>
-          <Arpeggio id='arpeggio' />
-        </TabPanel>
-      </Tabs>
-    </div>
-  );
-}