Skip to content

V1.3 - UI system overhaul + Auth / Admin / Teamspace blocks + Jules CI#5

Open
SamarthShukla17 wants to merge 10 commits into
mainfrom
develop
Open

V1.3 - UI system overhaul + Auth / Admin / Teamspace blocks + Jules CI#5
SamarthShukla17 wants to merge 10 commits into
mainfrom
develop

Conversation

@SamarthShukla17

Copy link
Copy Markdown
Contributor

Overview

This PR ships two parallel workstreams: a ground-up redesign of the UI and design system, and three new production-ready server-side blocks (Auth, Admin, Teamspace) that contributors can drop into any Next.js + Supabase app.

If you're reviewing for the first time, start with AGENTS.md — it documents the HSL token system, spring physics config, and Bun runtime conventions that all new code must follow.


UI & Design System

RefractiveDock navbar — rebuilt

The navbar was refactored from scratch for correctness and accessibility:

  • Switched from theme to resolvedTheme to eliminate SSR hydration mismatches
  • Entry animation now uses blur + y with a custom ease curve for a more tactile feel
  • All interactive elements have explicit aria-label attributes
  • Responsive padding/sizing adjusted for mobile (sm: breakpoints)
  • Tooltip labels on nav icons now match the border/background token system

New UI components

Component File Notes
MagneticButton components/ui/magnetic-button.tsx Spring-driven cursor tracking (stiffness: 500, damping: 15), 3px Y whileTap per AGENTS.md
RefinedButton components/ui/refined-button.tsx CVA variants using HSL metallic tokens — default, outline, ghost
ButtonGroup components/ui/button-group.tsx Horizontal/vertical grouping with auto border collapse
Separator components/ui/separator.tsx Thin wrapper around Radix Separator with slot data attributes

layout.tsx

  • Full OG/Twitter metadata added (metadataBase, openGraph, twitter, robots)
  • suppressHydrationWarning added to <html> to prevent theme flicker
  • Layout structure simplified: Background stays fixed at z-0, content sits at z-10
  • Old implementation preserved in comments for reference during review — can be deleted after merge

globals.css

Large token and utility update. See diff for full details — all new values follow the HSL variable convention.


New Blocks

All three blocks are server-only modules. Do not import them into client components.

components/blocks/auth/

A hardened auth backend for Next.js App Router + NextAuth v4 + Supabase.

What's included:

  • Credentials login with bcrypt password verification
  • GitHub and Google OAuth providers
  • Email verification with expiring tokens
  • Password reset and authenticated password change
  • Role model: user, admin, super_admin
  • Login lockout after repeated failures
  • Auth event audit logging

Required env vars: NEXT_PUBLIC_SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY, NEXTAUTH_SECRET, GITHUB_CLIENT_ID/SECRET, GOOGLE_CLIENT_ID/SECRET

Required tables: profiles, auth_events

See components/blocks/auth/Readme.md for the full integration guide and copy-paste checklist.


components/blocks/admin/

A server-side admin data layer. All mutations are guarded with requireAdmin() or requireSuperAdmin().

What's included:

  • Dashboard KPIs, revenue by month, signups by day
  • Paginated user list, user search, role updates, bans
  • Affiliate leaderboard and earnings detail
  • Feature flag CRUD (with rollout percentage support)
  • CSV export for purchases

Required tables: profiles, purchases, feature_flags, affiliate_earnings

Required RPCs: revenue_by_month, signups_by_day

See components/blocks/admin/Readme.md for wiring instructions and a deployment checklist.


components/blocks/teamspace/

See components/blocks/teamspace/Readme.md for the full spec and architecture diagram.


CI / Agent Workflows

Workflow Trigger What it does
jules-org-trigger.yml Issue labeled jules Dispatches Jules agent with issue title + body as context
jules-review.yml PR opened / synced / ready for review Deep audit, auto doc-gen to ./docs/ using Mermaid.js, severity-tagged findings ([BLOCKING], [WARN], [NIT])

Jules will auto-commit spec files to ./docs/ for any new modules it detects. Review those commits as part of this PR.


Dependencies Added

class-variance-authority
radix-ui
@radix-ui/react-slot

How to Review

  1. Read AGENTS.md first — it defines the token system, spring values, and security boundaries all contributors must follow.
  2. Check the navbar changes in components/navbar.tsx for hydration and a11y correctness.
  3. Review each block's Readme.md before diving into the .ts source.
  4. Verify no block files are imported client-side.
  5. Confirm Jules doc-gen commits (if any) match the Mermaid.js template in AGENTS.md.

Testing Checklist

  • bun run build passes
  • bun run lint:fix clean
  • Navbar: light/dark toggle works without hydration flash
  • MagneticButton: spring tracking and 3px active displacement correct
  • Auth block: registration → verification → login flow works end-to-end
  • Auth block: lockout triggers after repeated failed logins
  • Admin block: role guards reject unauthorized sessions
  • Admin block: CSV export and feature flag CRUD work
  • SUPABASE_SERVICE_ROLE_KEY is not exposed to any client bundle

Notes for Contributors

  • learn.tsx has been removed from the repo and added to .gitignore.
  • The old layout.tsx implementation is preserved in comments — feel free to delete after merge.
  • Do not add UI libraries beyond Shadcn and Radix without updating AGENTS.md and getting explicit confirmation first.
  • All new components must use HSL variables. No hardcoded hex values.

Copilot AI review requested due to automatic review settings May 22, 2026 10:56

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR overhauls the site UI/theme foundations (layout, global tokens, navbar, new UI primitives) and adds reusable server-only backend “blocks” (Auth, Admin, Teamspace), plus GitHub Actions workflows for the Jules agent review/trigger automation.

Changes:

  • Refactors theming/layout and navbar behavior (hydration handling, metadata, global background layering).
  • Introduces new UI primitives (buttons, separator, button group) and updates styling tokens in globals.css.
  • Adds new server-side block modules (auth, admin, teamspace) with accompanying READMEs and Jules CI workflows.

Reviewed changes

Copilot reviewed 20 out of 22 changed files in this pull request and generated 11 comments.

Show a summary per file
File Description
providers/theme-provider.tsx Refactors ThemeProvider wrapper around next-themes.
package.json Adds new dependencies (class-variance-authority, radix-ui).
bun.lock Locks newly added dependency graph.
app/layout.tsx Updates global layout structure, theme provider wiring, and metadata.
app/globals.css Replaces/expands design tokens and adds new base/utilities styling.
components/navbar.tsx Rebuilds RefractiveDock for hydration/a11y and updated styling.
components/Hero.tsx Adds import for the new magnetic button component.
components/ui/refined-button.tsx Adds CVA-based button primitive.
components/ui/magnetic-button.tsx Adds spring-driven magnetic button behavior.
components/ui/button-group.tsx Adds grouping primitives for buttons with separators/text.
components/ui/separator.tsx Adds a Radix-based separator wrapper.
components/ui/learn.tsx Adds a secondary button primitive file (intended to be ignored per PR notes).
components/blocks/auth/auth.ts Adds server-only auth backend (NextAuth + Supabase) implementation.
components/blocks/auth/Readme.md Adds integration guide for the auth block.
components/blocks/admin/admin.ts Adds server-only admin backend (Supabase service role) implementation.
components/blocks/admin/Readme.md Adds integration guide for the admin block.
components/blocks/teamspace/teamspace.ts Adds server-only teamspace/workspace backend logic.
components/blocks/teamspace/Readme.md Adds integration guide/spec for the teamspace block.
AGENTS.md Replaces agent rules with new repo/system instructions and templates.
.gitignore Adds learn.tsx ignore entry.
.github/workflows/jules-review.yml Adds PR-triggered Jules deep review/docgen workflow.
.github/workflows/jules-org-trigger.yml Adds issue-label-triggered Jules agent workflow.

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

Comment on lines +1 to +4
import * as React from "react"
import { Slot } from "@radix-ui/react-slot" // Ensure @radix-ui/react-slot is used
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
Comment on lines +1 to +5
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"
import { Separator } from "@/components/ui/separator"
Comment thread components/ui/learn.tsx
Comment on lines +1 to +6
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"

Comment thread components/Hero.tsx
import AnimatedButton from "@/components/ui/animated-button";
import { Background } from "@/components/ui/background";
import { Badge } from "@/components/ui/badge";
import { Button } from "./ui/magnetic-button";
Comment on lines +569 to +579
export async function updateProfile(
userId: string,
updates: { name?: string; avatar_url?: string }
) {
const payload: Partial<ProfileRow> = {}
if (typeof updates.name === 'string') payload.name = updates.name.trim().slice(0, 80)
if (typeof updates.avatar_url === 'string') payload.avatar_url = updates.avatar_url.trim()

const { error } = await supabaseAdmin.from('profiles').update(payload).eq('id', userId)
if (error) throw error
}
Comment on lines +152 to +153
const db = createAdminDb()

Comment on lines +393 to +406
export async function getFeatureFlag(key: string): Promise<boolean> {
const { data, error } = await db
.from('feature_flags')
.select('enabled, rollout_pct')
.eq('key', key)
.maybeSingle()

if (error) throw error
if (!data || !data.enabled) return false
if (toNumber(data.rollout_pct) >= 100) return true

const hash = key.split('').reduce((acc, ch) => ((acc << 5) - acc) + ch.charCodeAt(0), 0)
return Math.abs(hash) % 100 < toNumber(data.rollout_pct)
}
Comment on lines +1 to +5
# Teaspace Backend README

This README explains how to use the reusable backend module for the Teaspace workspace block. The backend is designed as a server-only business logic layer for a Next.js App Router project, with authentication and database access injected by the app that uses it.[cite:132][cite:133]

## Purpose
with:
jules_api_key: ${{ secrets.JULES_API_KEY }}
# Path to your org-wide rules we discussed
rules_file: ".github/AGENTS.md"
Comment thread AGENTS.md
Comment on lines +9 to +13
## 🎨 Design Engineering Standards
- **Tokens:** Always use HSL variables (e.g., `--metal-border`). Never use hex codes.
- **Physics:** Interactions must use Spring Physics (Stiffness: 500, Damping: 15).
- **Tactility:** Buttons must maintain a 3px Y-axis displacement on `:active`.

@SamarthShukla17

Copy link
Copy Markdown
Contributor Author

@copilot resolve the merge conflicts in this pull request

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants