Simpler toolbar

src/App.css

@@ -27,3 +27,8 @@ main {
 .app-ctrls > * {
    margin: var(--midi-app-container-padding);
 }
+
+.app-ctrls label {
+  font-size: xx-small;
+  border: 1pt solid var(--midi-app-container-border);
+}

src/App.tsx

@@ -9,6 +9,7 @@ import PlayPauseButton from './components/PlayMIDI';
 import Grids from './components/Grids';
 import SaveMIDI from './components/SaveMIDI';
 import UndoButton from './components/UndoButton';
+import DefaultVelocityInput from './components/DefaultVelocityInput';
 
 const App: React.FC = () => {
   const { error, selectedInput, selectedOutput } = useMIDI();
@@ -50,6 +51,7 @@ const App: React.FC = () => {
           <nav className='app-ctrls'>
             <PlayPauseButton />
             <BPMInput />
+            <DefaultVelocityInput />
             <UndoButton />
             <SaveMIDI />
             <DeviceSelector />

src/components/BPMInput.tsx

@@ -2,7 +2,6 @@
 import React, { useState } from 'react';
 
 import useMusicStore from '../store';
-import "./BPMInput.css";
 
 const BPMInput: React.FC = () => {
     const { bpm, setBPM } = useMusicStore();
@@ -21,9 +20,10 @@ const BPMInput: React.FC = () => {
     };
 
     return (
-        <label className='bpm-selector-component'>
+        <label>
             BPM:
             <input
+                title='Beats per minute'
                 className="bpm-input"
                 type="number"
                 value={inputValue}

src/components/DefaultVelocityInput.tsx

@@ -0,0 +1,38 @@
+// src/components/BPMInput.tsx
+import React, { useState } from 'react';
+
+import useMusicStore from '../store';
+
+const DefaultVelocityInput: React.FC = () => {
+    const { defaultVelocity, setDefaultVelocity } = useMusicStore();
+    const [inputValue, setInputValue] = useState(defaultVelocity.toString());
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        setInputValue(value);
+    };
+
+    const handleBlur = () => {
+        const newDefaultVelocity = Number(inputValue);
+        if (!isNaN(newDefaultVelocity) && newDefaultVelocity > 0) {
+            setDefaultVelocity(newDefaultVelocity);
+        }
+    };
+
+    return (
+        <label>
+            Velocity:
+            <input
+                title='Default velocity'
+                type="number"
+                value={inputValue}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                min={1}
+                max={127}
+            />
+        </label>
+    );
+};
+
+export default DefaultVelocityInput;

src/components/DeviceSelector.tsx

@@ -24,7 +24,7 @@ const DeviceSelector: React.FC = () => {
     } = useStore();
 
     return (
-        <section>
+        <>
             <button title='Choose MIDI devices and channels' onClick={() => setIsModalOpen(true)}>Device Set-up</button>
 
             <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title='Select MIDI Devices'>
@@ -82,7 +82,7 @@ const DeviceSelector: React.FC = () => {
                     </div>
                 </section>
             </Modal>
-        </section>
+        </>
     );
 };
 

src/components/GridInput.css

@@ -20,15 +20,15 @@
 }
 
 .grid-cell.active {
-    background-color: var(--selected-background);
+    background-color: var(--midi-app-selected-bg);
 }
 
 .grid-cell.highlight {
-    background-color: var(--midi-app-grid-current-beat-background); 
+    background-color: var(--midi-app-grid-current-beat-bg); 
 }
 
 .grid-cell.active.highlight {
-    background-color: var(--midi-app-grid-current-beat-selected-background);
+    background-color: var(--midi-app-grid-current-beat-selected-bg);
 }
 
 .resizer {

src/main.css

@@ -21,9 +21,9 @@ body {
   --midi-app-grid-cell-size: 20pt; 
   --midi-app-grid-bg: lightgray; 
   --midi-app-grid-border-clr: #555;
-  --selected-background: lightblue;
-  --midi-app-grid-current-beat-background: lightgreen;
-  --midi-app-grid-current-beat-selected-background: green;
+  --midi-app-selected-bg: lightblue;
+  --midi-app-grid-current-beat-bg: lightgreen;
+  --midi-app-grid-current-beat-selected-bg: green;
   --midi-app-toolbar-height: 3rem;
 }
 

src/store.ts

@@ -28,6 +28,8 @@ export interface Beat {
 export interface MusicState {
     bpm: number;
     setBPM: (bpm: number) => void;
+    defaultVelocity: number;
+    setDefaultVelocity: (defaultVelocity: number) => void;
 
     grids: Grid[];
     setGrid: (gridIndex: number, grid: Grid) => void;
@@ -72,6 +74,12 @@ const useMusicStore = create<MusicState>((set, get) => ({
         return { ...state, bpm };
     }),
 
+    defaultVelocity: 75,
+    setDefaultVelocity: (defaultVelocity: number) => set((state) => {
+        pushToUndoStack();
+        return { ...state, defaultVelocity };
+    }),
+
     selectedInput: null,
     setSelectedInput: (selectedInput) => set((state) => {
         return { ...state, selectedInput };