feat(dashboard): redesign the auth shell with a dithered brand panel

[Rish-it]

Summary

Redesigns the auth pages (login, register, forgot/reset password, verify email, select-organization) with a split layout: a brand panel with a GPU ordered-dither effect beside the form on desktop, collapsing to a top bar on mobile.

Motivation

Refreshes the auth experience to match the current landing/marketing visual direction.

Related issue

None

Changes

• apps/dashboard: add a WebGL2 ordered-dither renderer (DitherImage) to auth-shell.tsx, driven by a fullscreen-triangle shader with animated FBM noise, falls back silently to the static <Image> when WebGL2 or shader compilation is unavailable
• apps/dashboard: split AuthShell into a brand <aside> panel + form column on lg: breakpoints, with an aside prop to opt individual pages out (used by mcp/authorize, which is too wide to share the viewport)
• apps/dashboard: bump auth page titles from text-xl to text-[30px] across all six auth pages for the new layout's proportions
• apps/dashboard/public: add the dithered brand panel source image

Verification

bun --filter @repo/dashboard build

Manually exercised login, register, forgot-password, reset-password, verify-email, select-organization, and mcp/authorize at mobile and desktop widths, both themes, and with prefers-reduced-motion on/off.

Screenshots

Not captured in this pass — happy to add before merge if wanted.

Checklist

• One change per PR — one bug, or one agreed feature, with nothing unrelated bundled in
• The diff is scoped — no reformatting or lint fixes on lines I wasn't otherwise changing
• A test fails without this change and passes with it (visual/rendering change, no test harness fits the shader path)
• bun run test / lint / format (not run in this environment)
• I understand every line of this diff and can explain it in review

[Copilot]

Pull request overview

Updates the dashboard’s auth-area UI by introducing a new split “brand panel + form” layout, including an optional GPU-driven ordered-dither effect for the brand image, and adjusts auth page typography to match the new proportions.

Changes:

• Adds a WebGL2-based ordered-dither renderer (DitherImage) and integrates it into AuthShell’s new brand-panel layout.
• Refactors AuthShell into an optional <aside> brand panel + scrollable form column, with an aside opt-out for wide pages.
• Updates auth page headings from text-xl to text-[30px] with tighter leading/tracking across auth flows.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
apps/dashboard/src/components/auth-shell.tsx	Adds WebGL2 dithered brand panel and refactors the auth shell layout with an aside opt-out.
apps/dashboard/src/app/mcp/authorize/page.tsx	Disables the brand panel for the wide consent screen via aside={false}.
apps/dashboard/src/app/(auth)/verify-email/page.tsx	Updates auth page headings to the new size/typography.
apps/dashboard/src/app/(auth)/select-organization/page.tsx	Updates auth page headings to the new size/typography.
apps/dashboard/src/app/(auth)/reset-password/page.tsx	Updates auth page headings to the new size/typography.
apps/dashboard/src/app/(auth)/register/page.tsx	Updates auth page headings to the new size/typography.
apps/dashboard/src/app/(auth)/login/page.tsx	Updates auth page headings to the new size/typography.
apps/dashboard/src/app/(auth)/forgot-password/page.tsx	Updates auth page headings to the new size/typography.

Suppressed comments (2)

apps/dashboard/src/components/auth-shell.tsx:289

• If a VAO is created for WebGL2 rendering, it should be deleted during cleanup to avoid leaking GPU resources when navigating between auth pages.

      resizeObserver.disconnect();
      gl.deleteTexture(texture);
      gl.deleteProgram(program);

apps/dashboard/src/components/auth-shell.tsx:232

• In WebGL2 you must have a Vertex Array Object bound before calling drawArrays, even if the vertex shader only uses gl_VertexID and there are no attributes. Without a bound VAO, gl.drawArrays will raise INVALID_OPERATION and nothing will render.

    const texture = gl.createTexture();
    if (!texture) {
      gl.deleteProgram(program);
      return;
    }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.