Sidebar Tools

Fretboard, keyboard, circle of fifths, tuner, metronome, notes, and chat.

The song editor in Nitesong comes with a VS Code-style sidebar on the right side of the screen. It puts seven music tools and a collaboration pane within easy reach so you never have to leave the page you are writing on. This section covers every tool, how the sidebar is laid out, and what to expect on different screen sizes.

Overview

The sidebar is made up of two parts that work together: an icon rail for switching tools, and a flyout panel that shows the active tool's content alongside collaboration features.

Activity Bar

The Activity Bar is a narrow vertical strip (48px wide) pinned to the far-right edge of the editor. It contains seven icons from the Phosphor icon set, stacked top to bottom:

When a tool is active, its icon switches to a filled weight and gains a small accent bar along the right edge. Hovering over any icon shows a tooltip to the left with the tool name. Click the active icon again to close the flyout and collapse the sidebar.

Flyout Panel

Clicking a tool icon opens the flyout panel (320px / wide) to the left of the activity bar. The flyout is split into two zones:

• Top half — the active tool's content. This area scrolls independently, so long fretboards or the circle-of-fifths detail view never push content off screen.
• Bottom half — two collapsible accordion sections: Collaborators and Chat. You can expand or collapse each one, and your preference is remembered between visits so it sticks between sessions.

When the Collaboration pane (ChatDots icon) is active, the layout changes slightly. The top half shows the Activity Feed instead of a tool, and the Collaborators and Chat sections in the bottom half are locked open (they cannot be collapsed).

State persistence — The sidebar remembers which tool you had open. This state is remembered between visits, so reopening a song brings you right back to where you left off. The accordion open/closed states for the collaborators and chat sections are stored separately.

Mobile Layout

On smaller screens, the vertical activity bar is replaced by a horizontal toolbar at the top of the tool area. The same seven icons appear in a row, and the active icon gets a bottom-edge accent bar instead of a right-edge one. The rest of the flyout behavior is the same: tool content renders below the toolbar, and tapping the Collaboration icon shows the activity feed, collaborators list, and chat in a vertical stack.

Fretboard Tool

Icon: Guitar
Plan access: Pro and Cloud (free users see an upgrade prompt)

The Fretboard tool renders a vertical guitar neck as an SVG, oriented with the nut at the top and the 12th fret at the bottom. It automatically reads the song's key and highlights every note in the current scale across all six strings.

• Root notes appear as darker amber dots; other scale tones are a lighter amber.
• String labels (E A D G B e) sit above the nut for orientation.
• Standard guitar fret markers appear at frets 3, 5, 7, 9 (single dot) and 12 (double dot), matching what you would see on a real instrument.
• Open-string scale notes are shown just above the nut line.

If the song does not have a key set yet, the tool displays a short message asking you to set one from the song header.

How it works

The tool highlights every fret position on every string that belongs to your song's scale.

Keyboard Tool

Icon: PianoKeys
Plan access: All plans

The Keyboard tool displays a vertical two-octave piano (C3 to C5) as an SVG. Like the fretboard, it reads the song's key and highlights scale notes automatically.

• Root notes are filled with a dark amber color and show white text labels.
• Other scale tones use a lighter amber fill.
• Non-scale keys are left as standard white or black.
• Note names appear on the right side of each white key for easy reference.

Click (or tap) any key to hear the note. The keyboard uses the browser audio with pitch-shifted piano samples, so you get a realistic sound. The highest notes are at the top of the SVG and the lowest at the bottom, matching the natural orientation for a sidebar panel.

If no key is set on the song, you will see a prompt to set one.

Circle of Fifths

Icon: NumberCircleFive
Plan access: Pro and Cloud (gated for free users)

The Circle of Fifths is an interactive SVG diagram that helps you explore key relationships and plan modulations. It has two concentric rings:

• Outer ring — the 12 major keys, arranged clockwise by fifths (C, G, D, A, E, B, Gb, Db, Ab, Eb, Bb, F).
• Inner ring — the 12 relative minor keys, aligned with their major counterparts (Am, Em, Bm, and so on).

Interacting with the circle

• The song's current key is highlighted on the circle with a primary-color fill so you can spot it instantly.
• Click any sector (major or minor) to select a different key. The selected key becomes the new focus of the diagram.
• Adjacent sectors (one step clockwise and counterclockwise) light up with an accent color, indicating the closest modulation targets: the dominant (V) and subdominant (IV).
• The center of the circle displays the label of the currently focused key.

Details panel

Below the SVG, additional information appears for whatever key is currently selected:

• Modulation Paths — shows the dominant (V), subdominant (IV), and relative key for easy modulation planning.
• Scale — a 7-column grid showing scale degrees 1 through 7 with note names.
• Diatonic Chords — a 7-column grid showing Roman numerals, triad names, and seventh-chord variants for every degree of the key.

This makes it easy to compare the diatonic chords of a target key with your song's key before committing to a key change.

Guitar Tuner

Icon: Gauge
Plan access: All plans

The Guitar Tuner displays a vertical SVG representation of a guitar neck with all six strings rendered as vertical lines, thinnest on the left (high e) and thickest on the right (low E). A nut bar sits at the top and fret lines and dot markers give you visual orientation.

Using the tuner

• Click any string to hear its reference pitch. The sound is a real guitar sample played back through the browser audio.
• The active string lights up in amber so you can see which one is ringing.
• Click the same string again to stop playback (toggle behavior).
• Tuning is fixed to standard tuning — E A D G B e (from low to high: E2, A2, D3, G3, B3, E4).

Below the neck SVG is a short hint: "Click a string to hear the reference pitch."

The audio playback is managed by the audio system, which lazy-loads six guitar samples and manages a single active source node at a time. When a sample finishes playing naturally, the active state clears automatically.

Metronome

Icon: Metronome
Plan access: All plans

The Metronome gives you a click track right inside the editor. It initializes to your song's BPM so you do not have to dial it in manually.

Controls

• BPM display — a large number in the center showing the current tempo. Tap the - and + buttons on either side to adjust by 1 BPM (range: 30-300).
• Beat indicators — a row of small dots below the BPM display, one for each beat in the measure (default: 4 beats). The current beat lights up as the metronome plays. Beat 1 (the downbeat) shows as amber; the remaining beats use the primary color.
• Play / Stop — starts or stops the click track. The button label and icon update to reflect the current state.
• Tap Tempo — tap the "Tap" button repeatedly to set the BPM by feel. The metronome averages up to 8 recent taps (ignoring gaps longer than 2 seconds) and rounds to the nearest whole number.
• Reset — when the BPM has drifted from the song's original value, a "Reset to [song BPM]" link appears, letting you snap back with one click.

Audio

The click track uses synthesized tones — the downbeat has a higher pitch than the other beats, making it easy to hear where each bar starts.

All of this is encapsulated in the audio system.

Notes Tool

Icon: NotePencil
Plan access: All plans

The Notes tool is the simplest tool in the sidebar: a plain textarea where you can write freeform notes about the song. Use it for anything that does not fit into lyrics or chords — arrangement ideas, recording session reminders, gear lists, whatever helps your process.

How it saves

• Auto-save — your text is saved automatically shortly after you stop typing. There is no save button to worry about.
• Content is stored on the server.
• A subtle "Auto-saves as you type" hint appears below the textarea.
• The textarea auto-resizes vertically to fit your content, so you never fight with scrollbars inside the text box itself.

If you have collaborators on a song, they will see the same notes (the field is shared at the song level).

Collaboration Pane

Icon: ChatDots
Plan access: Chat requires Pro or Cloud; the activity feed and collaborators list are visible on all plans

The Collaboration pane behaves differently from the other six tools. Instead of showing a single tool in the top half and the usual collapsible collaborators/chat accordion in the bottom half, it reorganizes the flyout into three dedicated sections:

Activity Feed (top)

A scrollable timeline of song-level events. Each entry shows who did what and when, scoped to the current song:

• "Alex created this song"
• "Jordan added a drum pattern"
• "Sam added lyrics (Bridge)"

Events are listed newest-first, with relative timestamps on the right (e.g. "2h ago"). This gives everyone on the project a quick overview of recent progress without having to open a full version history.

Collaborators (middle)

A compact list of everyone who has access to the song. Each row shows:

• Avatar (or initials if no photo is uploaded) with an online status dot — green for online (active in the last 15 minutes), yellow for away (active in the last hour), or gray for offline.
• Display name (or email as fallback), truncated if needed.
• Role label — owner or editor.
• Clicking a collaborator's row links to their profile page.

Chat (bottom)

Real-time messaging for song collaborators. Chat is covered in detail in the Collaboration section of the docs; in brief, it supports @ mentions for people, sections, and elements, groups consecutive messages from the same person, and delivers messages in real time.

Layout note

When the Collaboration pane is active, the Collaborators and Chat sections are fixed open and cannot be collapsed. On every other tool pane, these same two sections appear as collapsible accordions in the bottom half, and their open/closed state is remembered across sessions.

Quick Reference

Key-Aware means the tool reads the song's musical key and adjusts its display accordingly. Make sure to set a key in the song header to get the most out of these tools.