From 99e2babad4520ea3a7ad429ff11283d57588545e Mon Sep 17 00:00:00 2001
From: Aoife <aoife@spinlock.icu>
Date: Tue, 6 Apr 2021 01:46:23 -0400
Subject: [PATCH] redesign complete

.remove unused import
---
 src/features/editor/Arpeggio.js             | 213 +++++++-
 src/features/editor/Effects.js              |  23 +-
 src/features/editor/index.js                |   1 -
 src/features/editor/parameters/Arpeggios.js |   5 +-
 src/features/editor/parameters/ModFX.js     | 535 ++++++++++----------
 src/features/editor/parameters/Pitch.js     |   1 -
 src/features/editor/timbreSlice.js          |   2 +
 src/features/menu/index.js                  |   9 +-
 src/features/utils/components.js            |   5 +-
 9 files changed, 518 insertions(+), 276 deletions(-)

diff --git a/src/features/editor/Arpeggio.js b/src/features/editor/Arpeggio.js
index 206662d..28072a2 100644
--- a/src/features/editor/Arpeggio.js
+++ b/src/features/editor/Arpeggio.js
@@ -1,6 +1,9 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { selectById } from './timbreSlice.js';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById } from './parameters/parameterSlice.js';
+import Card from './card';
+import { Knob, Select, Checkbox } from '../utils/components';
+import { parameterUpdated } from './parameters/parameterSlice';
 import { ArpeggA, ArpeggB } from './parameters/Arpeggios';
 
 export default function Arpeggio(props) {
@@ -12,3 +15,209 @@ export default function Arpeggio(props) {
     </div>
   );
 }
+
+export function Arpeggiator(props) {
+  const parameters_1 = useSelector((state) => selectById(state, props.id1));
+  const parameters_2 = useSelector((state) => selectById(state, props.id2));
+  const dispatch = useDispatch();
+  return (
+    <Card className={props.className} header='Arpeggiator'>
+      <div className='flex flex-row'>
+        <section className='flex flex-col justify-around w-2/5'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3>Type</h3>
+            <Select
+              className='select w-1/2'
+              value={parameters_1.type}
+              list={[
+                { value: 'Up' },
+                { value: 'Down' },
+                { value: 'Alternate 1' },
+                { value: 'Alternate 2' },
+                { value: 'Random' },
+                { value: 'Trigger' },
+              ]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id1,
+                    changes: { type: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-row items-center justify-between'>
+            <h3>Range</h3>
+            <Select
+              className='select w-1/2'
+              labelFunction={(v) => `${v.value} Oct`}
+              value={parameters_1.range}
+              list={[{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id1,
+                    changes: { range: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-row items-center justify-between'>
+            <h3>Resolution</h3>
+            <Select
+              className='select w-1/2'
+              value={parameters_1.resolution}
+              list={[
+                { value: '1/24' },
+                { value: '1/16' },
+                { value: '1/12' },
+                { value: '1/8' },
+                { value: '1/6' },
+                { value: '1/4' },
+              ]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id1,
+                    changes: { resolution: value },
+                  })
+                )
+              }
+            />
+          </div>
+        </section>
+        <section className=' -mt-4 flex flex-col justify-around w-1/5'>
+          <div className='flex flex-col'>
+            <div className='flex flex-col items-center'>
+              <h3>Tempo</h3>
+              <Knob
+                max={280}
+                offset={20}
+                value={parameters_1.tempo - 20}
+                onChange={(value) =>
+                  dispatch(
+                    parameterUpdated({
+                      id: props.id1,
+                      changes: { tempo: value + 20 },
+                    })
+                  )
+                }
+              />
+            </div>
+            <div className='flex flex-col items-center'>
+              <h3>Gate</h3>
+              <Knob
+                max={100}
+                value={parameters_1.gate}
+                onChange={(value) =>
+                  dispatch(
+                    parameterUpdated({
+                      id: props.id1,
+                      changes: { gate: value },
+                    })
+                  )
+                }
+              />
+            </div>
+            <div className='flex flex-col items-center'>
+              <h3>Swing</h3>
+              <Knob
+                dual={true}
+                max={100}
+                value={parameters_2.swing}
+                onChange={(value) =>
+                  dispatch(
+                    parameterUpdated({
+                      id: props.id2,
+                      changes: { swing: value },
+                    })
+                  )
+                }
+              />
+            </div>
+          </div>
+        </section>
+        <section className='flex flex-col space-y-4 w-2/5'>
+          <div className='flex flex-row items-center justify-between'>
+            <h3>Target</h3>
+            <Select
+              className='select w-1/2'
+              value={parameters_2.target}
+              list={[
+                { value: 'Both' },
+                { value: 'Timbre 1' },
+                { value: 'Timbre 2' },
+              ]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id2,
+                    changes: { target: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-row items-center justify-between'>
+            <h3>Last Step</h3>
+            <Select
+              className='select w-1/2'
+              labelFunction={(v) => `Step ${v.value}`}
+              value={parameters_2.lastStep}
+              list={[
+                { value: 1 },
+                { value: 2 },
+                { value: 3 },
+                { value: 4 },
+                { value: 5 },
+                { value: 6 },
+                { value: 7 },
+                { value: 8 },
+              ]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id2,
+                    changes: { lastStep: value },
+                  })
+                )
+              }
+            />
+          </div>
+          <div className='flex flex-row justify-around'>
+            <div className='flex flex-col items-center w-1/2'>
+              <h3>Key Sync</h3>
+              <Checkbox
+                parameter={parameters_2.keySync}
+                onChange={(value) =>
+                  dispatch(
+                    parameterUpdated({
+                      id: props.id2,
+                      changes: { keySync: value },
+                    })
+                  )
+                }
+              />
+            </div>
+            <div className='flex flex-col items-center w-1/2'>
+              <h3>Latch</h3>
+              <Checkbox
+                parameter={parameters_2.latch}
+                onChange={(value) =>
+                  dispatch(
+                    parameterUpdated({
+                      id: props.id2,
+                      changes: { latch: value },
+                    })
+                  )
+                }
+              />
+            </div>
+          </div>
+        </section>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/features/editor/Effects.js b/src/features/editor/Effects.js
index b62d7f8..0b895ed 100644
--- a/src/features/editor/Effects.js
+++ b/src/features/editor/Effects.js
@@ -2,14 +2,29 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { ModFX, Delay, EQ } from './parameters/ModFX';
 import { selectById } from './timbreSlice.js';
+import { Arpeggiator } from './Arpeggio';
 
 export default function Effects(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div>
-      <ModFX id={ids.modfx} />
-      <Delay id={ids.delay} />
-      <EQ id={ids.eq} />
+    <div className='h-screen grid grid-cols-10 grid-rows-6 gap-4 p-6'>
+      <ModFX
+        className='row-start-2 col-start-3 col-span-2 row-span-2'
+        id={ids.modfx}
+      />
+      <Delay
+        className='row-start-2 col-start-5 col-span-2 row-span-2'
+        id={ids.delay}
+      />
+      <EQ
+        className='row-start-2 col-start-7 col-span-2 row-span-2'
+        id={ids.eq}
+      />
+      <Arpeggiator
+        className='row-start-4 row-span-2 col-start-4 col-span-4'
+        id1={ids.arpeggA}
+        id2={ids.arpeggB}
+      />
     </div>
   );
 }
diff --git a/src/features/editor/index.js b/src/features/editor/index.js
index 9f4a376..156bae5 100644
--- a/src/features/editor/index.js
+++ b/src/features/editor/index.js
@@ -12,7 +12,6 @@ export default function Editor() {
       {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>
   );
 }
diff --git a/src/features/editor/parameters/Arpeggios.js b/src/features/editor/parameters/Arpeggios.js
index 23bd33e..ec3c9b3 100644
--- a/src/features/editor/parameters/Arpeggios.js
+++ b/src/features/editor/parameters/Arpeggios.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
@@ -8,7 +9,7 @@ const ArpeggA = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <Card className={props.className} header='Arpeggio A'>
       <span>Arpeggio A.</span>
       <div>
         Tempo
@@ -97,7 +98,7 @@ const ArpeggA = (props) => {
           }
         />
       </div>
-    </div>
+    </Card>
   );
 };
 
diff --git a/src/features/editor/parameters/ModFX.js b/src/features/editor/parameters/ModFX.js
index 85b3338..5367800 100644
--- a/src/features/editor/parameters/ModFX.js
+++ b/src/features/editor/parameters/ModFX.js
@@ -1,61 +1,66 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
+import { Knob, Select, Checkbox } from '../../utils/components';
 
 const ModFX = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>Mod FX</span>
-      Mod Type
-      <SelectList
-        value={parameters.type}
-        list={[
-          { value: 'Flanger/Chorus' },
-          { value: 'Ensemble' },
-          { value: 'Phaser' },
-        ]}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { type: value },
-            })
-          )
-        }
-      />
-      LFO Speed
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.lfoSpeed}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { lfoSpeed: value },
-            })
-          )
-        }
-      />
-      Mod FX Depth
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.effectDepth}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { effectDepth: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card className={props.className} header='Mod FX'>
+      <div className='flex flex-row items-center justify-between'>
+        <h3>Mod Type</h3>
+        <Select
+          className='select'
+          value={parameters.type}
+          list={[
+            { value: 'Flanger/Chorus' },
+            { value: 'Ensemble' },
+            { value: 'Phaser' },
+          ]}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { type: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex flex-col items-center'>
+        <h3>LFO Speed</h3>
+        <Knob
+          max={127}
+          value={parameters.lfoSpeed}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { lfoSpeed: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex flex-col items-center'>
+        <h3>Mod FX Depth</h3>
+        <Knob
+          max={127}
+          value={parameters.effectDepth}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { effectDepth: value },
+              })
+            )
+          }
+        />
+      </div>
+    </Card>
   );
 };
 
@@ -64,102 +69,109 @@ const Delay = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>Delay</span>
-      Delay Type
-      <SelectList
-        value={parameters.type}
-        list={[
-          { value: 'Stereo Delay' },
-          { value: 'Cross Delay' },
-          { value: 'L/R Delay' },
-        ]}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { type: value },
-            })
-          )
-        }
-      />
-      <Checkbox
-        name='Tempo Sync'
-        parameter={parameters.tempoSync}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { tempoSync: value },
-            })
-          )
-        }
-      />
-      {parameters.tempoSync ? (
-        <div>
-          Sync Note
-          <SelectList
-            value={parameters.syncNote}
-            list={[
-              { value: '1/32' },
-              { value: '1/24' },
-              { value: '1/16' },
-              { value: '1/12' },
-              { value: '3/32' },
-              { value: '1/8' },
-              { value: '1/6' },
-              { value: '3/16' },
-              { value: '1/4' },
-              { value: '1/3' },
-              { value: '3/8' },
-              { value: '1/2' },
-              { value: '2/3' },
-              { value: '3/4' },
-              { value: '1/1' },
-            ]}
-            onChange={(value) =>
-              dispatch(
-                parameterUpdated({
-                  id: props.id,
-                  changes: { syncNote: value },
-                })
-              )
-            }
-          />
-        </div>
-      ) : (
-        <div>
-          Delay Time
-          <Slider
-            min={0}
+    <Card className={props.className} header='Delay'>
+      <div className='flex flex-row items-center justify-between'>
+        <h3>Delay Type</h3>
+        <Select
+          className='select'
+          value={parameters.type}
+          list={[
+            { value: 'Stereo Delay' },
+            { value: 'Cross Delay' },
+            { value: 'L/R Delay' },
+          ]}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { type: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex flex-col items-center'>
+        <h3>Tempo Sync</h3>
+        <Checkbox
+          value={parameters.tempoSync}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { tempoSync: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex flex-row'>
+        {parameters.tempoSync ? (
+          <div className='flex flex-col items-center w-1/2'>
+            <h3>Sync Note</h3>
+            <Select
+              className='select'
+              value={parameters.syncNote}
+              list={[
+                { value: '1/32' },
+                { value: '1/24' },
+                { value: '1/16' },
+                { value: '1/12' },
+                { value: '3/32' },
+                { value: '1/8' },
+                { value: '1/6' },
+                { value: '3/16' },
+                { value: '1/4' },
+                { value: '1/3' },
+                { value: '3/8' },
+                { value: '1/2' },
+                { value: '2/3' },
+                { value: '3/4' },
+                { value: '1/1' },
+              ]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { syncNote: value },
+                  })
+                )
+              }
+            />
+          </div>
+        ) : (
+          <div className='flex flex-col items-center w-1/2'>
+            <h3>Delay Time</h3>
+            <Knob
+              max={127}
+              value={parameters.delayTime}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { delayTime: value },
+                  })
+                )
+              }
+            />
+          </div>
+        )}
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>Delay Depth</h3>
+          <Knob
             max={127}
-            parameter={parameters.delayTime}
+            value={parameters.delayDepth}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
                   id: props.id,
-                  changes: { delayTime: value },
+                  changes: { delayDepth: value },
                 })
               )
             }
           />
         </div>
-      )}
-      Delay Depth
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.delayDepth}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { delayDepth: value },
-            })
-          )
-        }
-      />
-    </div>
+      </div>
+    </Card>
   );
 };
 
@@ -168,127 +180,138 @@ const EQ = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>EQ</span>
-      Low EQ Frequency
-      <SelectList
-        labelFunction={(e) => `${e.value}kHz`}
-        value={parameters.lowFrequency}
-        list={[
-          { value: 40 },
-          { value: 50 },
-          { value: 60 },
-          { value: 80 },
-          { value: 100 },
-          { value: 120 },
-          { value: 140 },
-          { value: 160 },
-          { value: 180 },
-          { value: 200 },
-          { value: 220 },
-          { value: 240 },
-          { value: 260 },
-          { value: 280 },
-          { value: 300 },
-          { value: 320 },
-          { value: 340 },
-          { value: 360 },
-          { value: 380 },
-          { value: 400 },
-          { value: 420 },
-          { value: 440 },
-          { value: 460 },
-          { value: 480 },
-          { value: 500 },
-          { value: 600 },
-          { value: 700 },
-          { value: 800 },
-          { value: 900 },
-          { value: 1000 },
-        ]}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { lowFrequency: value },
-            })
-          )
-        }
-      />
-      Low EQ Gain
-      <Slider
-        min={-12}
-        max={12}
-        parameter={parameters.lowGain}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { lowGain: value },
-            })
-          )
-        }
-      />
-      High EQ Frequency
-      <SelectList
-        labelFunction={(e) => `${e.value}kHz`}
-        value={parameters.highFrequency}
-        list={[
-          { value: 1.0 },
-          { value: 1.25 },
-          { value: 1.5 },
-          { value: 1.75 },
-          { value: 2.0 },
-          { value: 2.25 },
-          { value: 2.5 },
-          { value: 2.75 },
-          { value: 3.0 },
-          { value: 3.25 },
-          { value: 3.5 },
-          { value: 3.75 },
-          { value: 4.0 },
-          { value: 4.25 },
-          { value: 4.5 },
-          { value: 4.75 },
-          { value: 5.0 },
-          { value: 5.25 },
-          { value: 5.5 },
-          { value: 5.75 },
-          { value: 6.0 },
-          { value: 7.0 },
-          { value: 8.0 },
-          { value: 9.0 },
-          { value: 10.0 },
-          { value: 11.0 },
-          { value: 12.0 },
-          { value: 14.0 },
-          { value: 16.0 },
-          { value: 18.0 },
-        ]}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { highFrequency: value },
-            })
-          )
-        }
-      />
-      High EQ Gain
-      <Slider
-        min={-12}
-        max={12}
-        parameter={parameters.highGain}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { highGain: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card className={props.className} header='EQ'>
+      <div className='flex flex-row items-center justify-between'>
+        <h3>Low Freq</h3>
+        <Select
+          className='select w-2/4'
+          labelFunction={(e) => `${e.value}kHz`}
+          value={parameters.lowFrequency}
+          list={[
+            { value: 40 },
+            { value: 50 },
+            { value: 60 },
+            { value: 80 },
+            { value: 100 },
+            { value: 120 },
+            { value: 140 },
+            { value: 160 },
+            { value: 180 },
+            { value: 200 },
+            { value: 220 },
+            { value: 240 },
+            { value: 260 },
+            { value: 280 },
+            { value: 300 },
+            { value: 320 },
+            { value: 340 },
+            { value: 360 },
+            { value: 380 },
+            { value: 400 },
+            { value: 420 },
+            { value: 440 },
+            { value: 460 },
+            { value: 480 },
+            { value: 500 },
+            { value: 600 },
+            { value: 700 },
+            { value: 800 },
+            { value: 900 },
+            { value: 1000 },
+          ]}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { lowFrequency: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex flex-row items-center justify-between'>
+        <h3>High Freq</h3>
+        <Select
+          className='select w-2/4'
+          labelFunction={(e) => `${e.value}kHz`}
+          value={parameters.highFrequency}
+          list={[
+            { value: 1.0 },
+            { value: 1.25 },
+            { value: 1.5 },
+            { value: 1.75 },
+            { value: 2.0 },
+            { value: 2.25 },
+            { value: 2.5 },
+            { value: 2.75 },
+            { value: 3.0 },
+            { value: 3.25 },
+            { value: 3.5 },
+            { value: 3.75 },
+            { value: 4.0 },
+            { value: 4.25 },
+            { value: 4.5 },
+            { value: 4.75 },
+            { value: 5.0 },
+            { value: 5.25 },
+            { value: 5.5 },
+            { value: 5.75 },
+            { value: 6.0 },
+            { value: 7.0 },
+            { value: 8.0 },
+            { value: 9.0 },
+            { value: 10.0 },
+            { value: 11.0 },
+            { value: 12.0 },
+            { value: 14.0 },
+            { value: 16.0 },
+            { value: 18.0 },
+          ]}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { highFrequency: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex flex-row'>
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>Low Gain</h3>
+          <Knob
+            dual={true}
+            max={12}
+            value={parameters.lowGain}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { lowGain: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>High Gain</h3>
+          <Knob
+            dual={true}
+            max={12}
+            value={parameters.highGain}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { highGain: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+    </Card>
   );
 };
 
diff --git a/src/features/editor/parameters/Pitch.js b/src/features/editor/parameters/Pitch.js
index 11e64e2..a718d2e 100644
--- a/src/features/editor/parameters/Pitch.js
+++ b/src/features/editor/parameters/Pitch.js
@@ -3,7 +3,6 @@ import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Select, Knob } from '../../utils/components';
-import { Slider } from '../../helpers/Helpers';
 
 export default function Pitch(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
diff --git a/src/features/editor/timbreSlice.js b/src/features/editor/timbreSlice.js
index eaaa8eb..e44355f 100644
--- a/src/features/editor/timbreSlice.js
+++ b/src/features/editor/timbreSlice.js
@@ -56,6 +56,8 @@ const timbreSlice = createSlice({
         modfx: 'modfx',
         delay: 'delay',
         eq: 'eq',
+        arpeggA: 'arpeggA',
+        arpeggB: 'arpeggB',
       },
       arpeggio: {
         arpeggA: 'arpeggA',
diff --git a/src/features/menu/index.js b/src/features/menu/index.js
index 3d44d2f..0000ca5 100644
--- a/src/features/menu/index.js
+++ b/src/features/menu/index.js
@@ -142,14 +142,7 @@ export default function Menu() {
           onClick={() => {
             dispatch(parameterUpdateTab('Effects'));
           }}>
-          Effects
-        </button>
-        <button
-          className={activeTab === 'Arpeggio' ? `btn btn-active` : `btn`}
-          onClick={() => {
-            dispatch(parameterUpdateTab('Arpeggio'));
-          }}>
-          Arpeggio
+          Arp/FX
         </button>
       </div>
       <div className='w-full text-center text-xl font-semibold'>
diff --git a/src/features/utils/components.js b/src/features/utils/components.js
index 36a7d40..46be707 100644
--- a/src/features/utils/components.js
+++ b/src/features/utils/components.js
@@ -10,7 +10,7 @@ const Select = (props) => {
       value={props.value}>
       {props.list.map((element) => (
         <option key={element.value} value={element.value}>
-          {element.value}
+          {props.labelFunction ? props.labelFunction(element) : element.value}
         </option>
       ))}
     </select>
@@ -89,6 +89,7 @@ function Knob({
   value = 0,
   fillWidth = 4,
   onChange,
+  offset = 0,
 }) {
   value = value / max;
   const uid = useMemo(() => knob_id++, []);
@@ -160,7 +161,7 @@ function Knob({
         className={` ${
           isDragging ? 'opacity-100' : 'opacity-0 hidden'
         } transition duration-75 ease-in select-none pointer-events-none absolute -mt-6 bg-gray-800 text-white truncate text-xs box-content rounded text-center w-8 py-0.5`}>
-        {Math.round(value * max)}
+        {Math.round(value * max + offset)}
       </div>
       <svg
         className={` ${