UI/UX and Audio bugs: Scales, Chords, Drawer, and Header
Frontend / Audio / Mobile UI
Task metadata
Original request
"Correções:
- Escalas: agora tocam com 8 notas mas mostram apenas 7
- Acordes: Os cards de acordes (maioria, mas não testei todos) foram corrigidos pra tocar as notas em sequencia, do agudo pro grave, sem que apareça uma nota mais grave no meio da sequëncia. mas quando clicamos no card e abrimos o drawer lateral, ao clicar nos quadrinhos em "estrutura intervalar" esse problema ainda acontece.
- Ainda em acordes, eu queria que, ao clicar nos quadrinhos 1, 3, 5, 7 ou C, E, G, B, o audio daaquela nota tocasse e não que essa área toda fosse um trigger pra tocar o acorde. Ja temos botão de acorde e de arpejo. Aqui é interessante poder clicar e ouvir a nota separada.
- Aqui ainda, acho que no mobile view, podemos deixar um grid de um unico elemento.. um card por coluna.. Assim podemos aproveitar o espaço e aumentar esses quadrinhos um pouco pra que fiquem mais clicaveis.. boa UX. Vamos abriur o drawer apenas quando clicar no nome do acorde, titulo do card
- Nesse div/component que é o parent dos cards, acho que podemos fazer ele com 100% width, sem esses pequenos paddings laterais..
- Em modos, devemos usar o mesmo layout.. entáo se tirarmos padding de lá, tiramos daqui também. Entáo aqui também vamos seguir o padráo de clicar nos quadrinhos e escutar o som, clicar no titulo do card para abrir o drawer
- Aqui, no drawer tb estamos mostrando 7 notas e tocando 8. Adicionar a 8a aqui tambem.
- Em comparar temos uma solução meio ruim. Se nao tivermos amis de uma escala selecionada, a aba "comparar" desaparece do menu. bad UX!
- Layout geral: . a linha que mostra as tonalidades/chord roots deve ficar num nivel abaixo do logo e nao ao lado. e mantendo um certo espa;o de respiro. O botão de vollume pode ficar no mesmo nivel do logo, alinhado pela direita . em mobile, a região de controle superior, que fica fixa esta sem padding lalteral nenhum. Botões muito proximos da borda esquerda . exibição e velocidade estão diferentes, quando são basicamente o emsmo componente. Vamos usar para os dois o estilo que temos para "Exibição" (botoes sem o detalhe azul)"
Structured task
Problem
Multiple cohesion, audio, and responsiveness bugs are breaking the UX. The sequential audio of the 'interval structure' in the drawer reproduces unexpected pitch jumps. Triggering interval squares plays the entire chord instead of the isolated note. The padding wastes mobile space, shrinking the clickable target area. The navigation tabs handle empty states poorly, and the header features a gross misalignment, overlapping elements and breaking the design's breathing room.
Context
HarmonicLens prioritizes instant music theory feedback. If clicking single grid notes plays the entire chord instead of the solitary pitch (1, 3, 5, b7), it creates confusion. For touch interaction, column cards must be single-row (width 100%) on mobile devices, simplifying touches (square = play note, title = open drawer).
Expected
- Audio/Scales: Add the rendered octave to lists/grids to ensure sounds aren't mapped blindly. Fix the frequency ordering in the drawer ('interval structure') to discard inverted low/high oscillations.
- UX/Interaction: Interval squares (1, b3, 5, etc.) must exclusively play their own note. The drawer should only open upon clicking the main title.
- Layout/Mobile: Parent div with
width: 100%andgrid-cols-1. Remove lateral padding to enlarge buttons. Standardize this rule for both Modes and Chords. - Empty State: The 'Compare' tab must never disappear; if there are <2 scales selected, display a warning: 'Select at least 2 scales to compare...'.
- Header/Theme: Keep Display and Velocity buttons without the blue detail. Move Chord roots to a separate line below the logo. Lateral padding should rely on the fixed control bar. Align the volume button to the right alongside the logo height.
Notes
Prioritize the logical correction of audio frequency arrays (the out-of-order octaves bug between sibling components). Apply Tailwind CSS generic rules for single-row responsiveness over the modes module as well.