Build a Sonara-style dashboard with Clerk orgs and TTS handoff

The previous installment covered authentication and persistence—infrastructure nobody stares at. This chapter is the first screen people actually see after sign-in: the dashboard. The goal is to make that landing surface feel like a product rather than a scaffold.

The sidebar

Navigation lives in a collapsible sidebar. It can shrink to icons when space is tight, lists the primary destinations (Dashboard, Explore voices, Text to speech, Voice cloning), and places Clerk’s organization switcher at the top.

That switcher is load-bearing here. Every account belongs to an organization—there are no lone personal workspaces—so moving between teams happens through the control in the chrome, not a buried settings page. It belongs in the primary nav.

The footer of the sidebar holds the user menu, with a small “Others” block above it for Settings and help. Settings does not open a bespoke page; it launches Clerk’s organization profile panel. Rebuilding that surface adds little when the provider already ships a solid one.

Open versus collapsed state is stored in a cookie so a refresh does not flash the wide rail and then snap shut. Tiny persistence details like that separate a considered shell from a pile of components.

The background

Behind the main content, a soft animated wave moves slowly. It is painted on a canvas with simplex noise instead of a looping bitmap, so the pattern does not obviously tile. Palette choices stay in muted teals and blues at low opacity. Desktop keeps the effect; mobile hides it where pixels matter more than atmosphere.

<WavyBackground
  colors={["#2DD4BF", "#22D3EE", "#38BDF8", "#818CF8"]}
  blur={3}
  speed="slow"
  waveOpacity={0.1}
/>

Restraint is intentional. The motion sits behind the UI at low opacity and a slow speed—something you sense as polish more than as decoration you study.

The text input

The dashboard centers on a text field for copy that should become speech. It sits in a card with a soft gradient border (pink into cyan). Getting that border to read as one continuous stroke took extra layering; the result should look like a single edge rather than a flat box.

Under the field, a live character count and cost estimate update as the user types, using a fixed per-character rate. Pricing stays visible up front instead of appearing only on a later confirmation screen.

${(text.length * COST_PER_UNIT).toFixed(4)} estimated

Someone about to synthesize thousands of characters sees the approximate cost before pressing generate, not after.

At this stage the generate control does not call a model yet. It routes to the text-to-speech page with the draft text in a query parameter. Real synthesis waits until a voice and model exist. The dashboard’s job is capture and handoff.

Quick actions

Beneath the field, a row of example cards covers narrating a story, recording an ad, directing a movie scene, voicing a game character, introducing a podcast, and guiding a meditation. Each card carries a short, use-case-specific sample. Activating one opens text-to-speech with that sample already filled in.

{
  title: "Voice a Game Character",
  description: "Build immersive worlds with dynamic character voices",
  href: "/text-to-speech?text=Listen up, adventurer. The realm of Ashenvale is crumbling...",
}

Ready-made examples beat an empty box plus a tutorial modal. Curious users can hear a game-character sample without inventing a prompt first—one click into something audible.

Putting it together

Header, background, input, and quick actions compose into the dashboard route. Mobile uses a lean header (menu trigger and title). Desktop shows a greeting with the person’s name plus a couple of feedback links.

None of the pieces are exotic: a sidebar, a background, a text box, and example cards. Together they form the first impression after login and decide whether someone stays long enough to generate audio.

The follow-on chapter covers the text-to-speech page itself. The work in this chapter lands as a single feature commit for the dashboard sidebar, layout, and home page.