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 1 | Column 2 | Column 3 | |
|---|---|---|---|
| Row 1 | Profile Card | Creator Stats | Activity Timeline (spans both rows) |
| Row 2 | Top 3 Keys | Comments — "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.
| Stat | Icon | What it counts |
|---|---|---|
| Songs | MusicNote | Total songs you have created |
| Elements | Cube | Total elements across all your songs |
| Chords | Guitar | Total chord progressions you have written |
| Notes | PianoKeys | Non-null guitar tab cells plus piano roll note objects |
| Collaborations | UsersThree | Songs where you are the owner with collaborators, plus songs where you are a collaborator |
| Drum Beats | Pentagon | Total 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 visibility | What you see |
|---|---|
| Public | Full profile: avatar, name, stats, top keys, activity timeline with song titles |
| Limited | Profile and stats are visible, but song titles in the activity timeline are replaced with "a song" |
| Private | Nothing -- 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
| Action | How |
|---|---|
| View your profile | Go to the Profile page |
| Edit your display name | Click "Edit Profile" on the profile card, change the name, click Save |
| Upload or change your avatar | Click "Edit Profile", click the avatar area, upload a photo |
| Change visibility | Click "Edit Profile", use the visibility toggle, click Save |
| View another user's profile | Navigate to their profile page |
| See your top keys | Check the bottom-left cell of the bento grid |
| Browse your activity | Scroll the timeline in the right column |