shawn/pi-multifx-pedal-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pipedal SVG icons in block tiles + nav bar

Browse Source 
- Replace emoji getBlockIcon() with <BlockIcon> component rendering SVG icons
- 38 fx_*.svg icons from pipedal mapped to block types (distortion, delay, reverb, mod, etc.)
- Split/merge tiles now use fx_split_a.svg / fx_mixer.svg
- Status bar: ic_bank.svg, ic_presets.svg, fx_analyzer.svg, ic_drawer_2.svg
- Extracted reusable CSS design system to index.css (badge, snap-grid, slide-panel, etc.)
- SnapshotPanel and component reference extracted to docs/
- 270KB JS build, SVG icons served from /ui/img/
This commit is contained in:
Shawn
2026-06-12 19:29:50 -04:00
parent bd6771e203
commit 62c373b989
5 changed files with 951 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.jsx
+14 -7
View File
@@ -638,8 +638,12 @@ export default function App(){
<span className="mono" style={{fontSize:9,color:T.textDim}}>CPU {state.cpu_percent!=null?`${state.cpu_percent}%`:"—"}</span>
</div>
<div style={{width:1,height:12,background:T.border}}/>
<button className="btn-icon" style={{width:24,height:24,fontSize:10}}onClick={()=>setView("captures")}title="Downloads">📁</button>
<button className="btn-icon" style={{width:24,height:24,fontSize:10}}onClick={()=>setView("presets")}title="Presets">⭐</button>
<button className="btn-icon" style={{width:24,height:24,position:'relative'}}onClick={()=>setView("captures")}title="Downloads">
<img src={`${import.meta.env.BASE_URL}img/ic_bank.svg`} alt="captures" style={{width:14,height:14,filter:'brightness(0.7)'}}/>
</button>
<button className="btn-icon" style={{width:24,height:24,position:'relative'}}onClick={()=>setView("presets")}title="Presets">
<img src={`${import.meta.env.BASE_URL}img/ic_presets.svg`} alt="presets" style={{width:14,height:14,filter:'brightness(0.7)'}}/>
</button>
<div style={{display:"flex",gap:2,alignItems:"center",background:T.surface,borderRadius:4,border:`1px solid ${T.border}`,padding:2,height:24}}>
{["stomp","preset"].map(m=>(<button key={m} onClick={()=>setFootswitchMode(m)} style={{
padding:"1px 5px",borderRadius:3,border:"none",height:20,
@@ -649,12 +653,15 @@ export default function App(){
cursor:"pointer",lineHeight:1.5,minWidth:34,display:"flex",alignItems:"center",justifyContent:"center",
}}>{m==="stomp"?"SM":"PR"}</button>))}
</div>
<button className="btn-icon" style={{width:24,height:24,fontSize:10,
<button className="btn-icon" style={{width:24,height:24,position:'relative',
background:state.tuner_enabled?'rgba(128,208,160,.15)':T.surface,
borderColor:state.tuner_enabled?T.green:T.border,
color:state.tuner_enabled?T.green:T.textPrimary}}
onClick={handleTunerToggle} title={state.tuner_enabled?"Exit Tuner":"Tuner"}>♪</button>
<button className="btn-icon" style={{width:24,height:24,fontSize:10,background:'rgba(232,160,48,.12)',borderColor:T.amber,color:T.amber}}onClick={()=>{if(!document.fullscreenElement){document.documentElement.requestFullscreen()}else{document.exitFullscreen()}}}title="Fullscreen">⛶</button>
borderColor:state.tuner_enabled?T.green:T.border}}
onClick={handleTunerToggle} title={state.tuner_enabled?"Exit Tuner":"Tuner"}>
<img src={`${import.meta.env.BASE_URL}img/fx_analyzer.svg`} alt="tuner" style={{width:14,height:14,filter:state.tuner_enabled?'brightness(1.5) sepia(0.3) hue-rotate(80deg)':'brightness(0.7)'}}/>
</button>
<button className="btn-icon" style={{width:24,height:24,position:'relative',background:'rgba(232,160,48,.12)',borderColor:T.amber}}onClick={()=>{if(!document.fullscreenElement){document.documentElement.requestFullscreen()}else{document.exitFullscreen()}}}title="Fullscreen">
<img src={`${import.meta.env.BASE_URL}img/ic_drawer_2.svg`} alt="fullscreen" style={{width:12,height:12,filter:'brightness(1.2)'}}/>
</button>
</div>
</div>