Profile

Your bento dashboard with stats, activity timeline, and visibility settings.

Your profile is your personal dashboard in Nitesong. It gives you a snapshot of everything you have been building — how many songs, what keys you gravitate toward, and a timeline of your recent activity. It is also where you control how other users see you.


Profile Dashboard

The profile page uses a bento grid layout organized into three columns.

Here is how the cells are arranged:

Column 1Column 2Column 3
Row 1Profile CardCreator StatsActivity Timeline (spans both rows)
Row 2Top 3 KeysComments — "Coming Soon"(continued)

Each cell is its own component, and together they give you a quick read on your songwriting life without leaving the page.


Profile Card

The profile card sits in the top-left cell of the bento grid. It has two modes: a default view mode and an edit overlay.

View mode

When you first visit your profile, the card shows:

  • Avatar — your profile photo (or a default placeholder if you have not uploaded one)
  • Display name — the name your collaborators see
  • Member since — the date your account was created
  • Visibility description — a short label explaining your current visibility setting (e.g., "Your profile is private")
  • "Edit Profile" button — click to switch into edit mode

Edit mode

Clicking "Edit Profile" opens an overlay that sits directly on top of the card at the same dimensions. The overlay reveals:

  • Photo upload — click your avatar to upload or replace your profile photo. - Name input — change your display name.
  • Visibility toggle — choose between Public, Limited, or Private (see Profile Visibility below for what each level means).
  • Save button — saves your changes and returns to view mode.
  • Cancel button — discards changes and returns to view mode.

The overlay matches the card exactly — no layout shift, no jarring transitions.


Creator Stats

The creator stats cell sits in the top-center of the grid. It displays a 3x2 grid of counts, each paired with an icon, summarizing what you have built in Nitesong.

StatIconWhat it counts
SongsMusicNoteTotal songs you have created
ElementsCubeTotal elements across all your songs
ChordsGuitarTotal chord progressions you have written
NotesPianoKeysNon-null guitar tab cells plus piano roll note objects
CollaborationsUsersThreeSongs where you are the owner with collaborators, plus songs where you are a collaborator
Drum BeatsPentagonTotal active steps across all your drum patterns

How the counts work

All six counts are always up to date when you load the page.

A few of the counts deserve a closer look:

  • Notes combines two sources: every non-null cell in your guitar tab grids, plus every note object in your piano rolls. If you have been writing both tab and piano parts, this number reflects all of it.
  • Drum Beats counts the total number of active steps (not patterns). A 16-step kick pattern with 4 active hits contributes 4 to this count.
  • Collaborations counts in both directions. If you invited someone to your song, that counts. If someone invited you to theirs, that counts too.

Hover behavior

Hovering over any icon makes it glow amber. A tooltip appears with a descriptive verb — for example, hovering over the Songs icon shows "Songs created" and hovering over Collaborations shows "Songs collaborated on."


Top Keys

The top keys cell sits below the profile card in the bottom-left of the grid. It shows your three most-used musical keys as a small bar chart.

How keys are calculated

The data comes from the key set on your songs, grouped by key. It includes:

  • Songs you created
  • Songs you collaborate on

So if you have been invited to three songs in the key of Am and you created two of your own in C major, both keys show up in the ranking. The three most frequent keys are displayed with a bar chart that makes it easy to see which key you reach for most often.

This is a fun way to spot patterns in your writing. If you keep ending up in E minor, you will see it here.


Activity Timeline

The activity timeline fills the entire right column of the bento grid, spanning both rows. It is a scrollable feed of your recent songwriting actions.

What appears in the timeline

Each entry in the feed represents something you did in Nitesong:

  • Created a new song
  • Added a section to a song
  • Added an element
  • Added notation (chords, lyrics, guitar tab, drum pattern, piano roll)
  • Invited a collaborator
  • And other tracked actions

Entry format

Every timeline entry shows three pieces of information:

  • Action description — what you did (e.g., "Added a drum pattern")
  • Song title — which song it happened in
  • Timestamp — when it happened

The feed scrolls independently within its cell, so you can browse through your history without affecting the rest of the page.

Performance

The timeline stays fast even as your activity history grows. Activities are logged in the background whenever you take actions throughout the app.


Profile Visibility

Profile visibility controls who can see your profile and how much detail they see. You set it from the profile card's edit mode using the visibility toggle.

There are three visibility levels:

Public

Your full profile is visible to anyone who visits your profile page. This includes:

  • Your avatar, display name, and member-since date
  • All creator stats
  • Your top keys
  • Your activity timeline with full song titles

Choose this if you want to share your songwriting activity openly.

Limited

Your profile is visible to other users, but with song titles masked. In the activity timeline, song names are replaced with "a song" — so visitors can see that you have been active, but they cannot see the names of what you are working on.

This is a good middle ground if you want to be present in the community without revealing your unreleased material.

Private

Only you can see your profile. When another user visits your profile page, they see nothing. This is the default setting for all new accounts.

If you are not sure which to pick, start with Private. You can always open it up later from the edit overlay.


Viewing Other Profiles

Other users' profiles are accessible when you visit someone else's profile, you see the same bento grid layout but in read-only mode — there is no "Edit Profile" button, no edit overlay, and no way to change their settings.

What you see depends on their visibility setting

Their visibilityWhat you see
PublicFull profile: avatar, name, stats, top keys, activity timeline with song titles
LimitedProfile and stats are visible, but song titles in the activity timeline are replaced with "a song"
PrivateNothing -- the page is empty or shows a message that the profile is not available

This means a user has full control over their presence. If they want to stay completely private, no one else can see any of their information.


Quick Reference

ActionHow
View your profileGo to the Profile page
Edit your display nameClick "Edit Profile" on the profile card, change the name, click Save
Upload or change your avatarClick "Edit Profile", click the avatar area, upload a photo
Change visibilityClick "Edit Profile", use the visibility toggle, click Save
View another user's profileNavigate to their profile page
See your top keysCheck the bottom-left cell of the bento grid
Browse your activityScroll the timeline in the right column