refactor: moved "Add track" button from bottom TrackControl to top-left-spacer for better discoverability

README.md

@@ -242,7 +242,7 @@ Feature priorities might change.
 - [ ] Support WAV audio tracks
 - [ ] Filters and effects
 - [ ] MCP Support
-- [ ] Add support for OpenAI's open source models (`gpt-oss-20b` and `gpt-oss-120b`)
+- [X] Add support for OpenAI's open source models (`gpt-oss-20b` and `gpt-oss-120b`)
 - [ ] Automatically compact conversations when the context window runs low on space
 
 ## Help Needed

src/App.css

@@ -325,24 +325,27 @@ body {
   cursor: crosshair;
 }
 
-.track-control {
-  padding: 5px;
-  background-color: #2d2d2d;
-  border-top: 1px solid #3a3a3a;
-}
-
-.track-control button {
+.add-track-btn {
   background: transparent;
   border: none;
+  outline: none;
   color: #999;
   cursor: pointer;
-  padding: 5px;
-  width: 100%;
-  text-align: left;
   font-size: 12px;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.track-control button:hover {
+.add-track-btn:focus,
+.add-track-btn:focus-visible {
+  outline: none;
+}
+
+.add-track-btn:hover {
   color: #e0e0e0;
 }
 

src/App.tsx

@@ -4,7 +4,6 @@ import { useProjectStore } from './stores/projectStore';
 import { useGlobalKeyboardHandler } from './hooks/useGlobalKeyboardHandler';
 import Toolbar from './components/Toolbar';
 import StatusBar from './components/StatusBar';
-import TrackControl from './components/TrackControl';
 import MainContent from './components/MainContent';
 import InstrumentSelection from './components/InstrumentSelection';
 import ChatBox from './components/ChatBox';
@@ -135,8 +134,6 @@ function App() {
         <ChatBox isVisible={showChatBox && !showSettings} />
       </div>
 
-      {/* Track Control */}
-      <TrackControl />
 
       {/* Status Bar */}
       <StatusBar />

src/components/MainContent.tsx

@@ -18,7 +18,7 @@ interface MainContentProps {
 }
 
 const MainContent: React.FC<MainContentProps> = ({
-  onTrackClick = () => {} // Default to empty function if not provided
+  onTrackClick = () => { } // Default to empty function if not provided
 }) => {
   const {
     tracks,
@@ -33,7 +33,8 @@ const MainContent: React.FC<MainContentProps> = ({
     showPianoRoll,
     activeRegionId,
     setShowPianoRoll,
-    setActiveRegionId
+    setActiveRegionId,
+    addTrack
   } = useProjectStore();
 
   // State to store regions
@@ -172,16 +173,16 @@ const MainContent: React.FC<MainContentProps> = ({
         // If the region belongs to a track that was shifted due to the drag operation
         else if (
           (fromIndex < toIndex &&
-           region.trackIndex > fromIndex && 
-           region.trackIndex <= toIndex) 
+            region.trackIndex > fromIndex &&
+            region.trackIndex <= toIndex)
         ) {
           // Shift up by 1
           return { ...region, trackIndex: region.trackIndex - 1 };
         }
         else if (
           (fromIndex > toIndex &&
-           region.trackIndex < fromIndex && 
-           region.trackIndex >= toIndex)
+            region.trackIndex < fromIndex &&
+            region.trackIndex >= toIndex)
         ) {
           // Shift down by 1
           return { ...region, trackIndex: region.trackIndex + 1 };
@@ -688,7 +689,9 @@ const MainContent: React.FC<MainContentProps> = ({
     <div className={`main-content${showInstrumentSelection ? ' has-left-instrument' : ''}`}>
       <div className="main-content-wrapper">
         {/* Top-left spacer */}
-        <div className="top-left-spacer"></div>
+        <div className="top-left-spacer">
+          <button className="add-track-btn" onClick={() => addTrack()}>+ Add track</button>
+        </div>
 
         {/* Bar numbers at the top */}
         <div

src/components/TrackControl.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { useProjectStore } from '../stores/projectStore';
-
-const TrackControl: React.FC = () => {
-  const { addTrack } = useProjectStore();
-
-  const handleAddTrack = () => {
-    addTrack();
-  };
-
-  return (
-    <div className="track-control">
-      <button onClick={handleAddTrack}>+ Add track</button>
-    </div>
-  );
-};
-
-export default TrackControl;