feat: Next 16.3 offline banner, Better Auth rc.4 accountId

[fringe4life]

Summary

📦 Bumped Next 16.3.0, Better Auth rc.4, Panda beta.12, nuqs 2.9.5, Ultracite 7.10.1
✨ Added OfflineBanner via experimental useOffline in navbar
🔐 Migrated account.providerAccountId back to accountId for Better Auth rc.4
🐛 Set appearance base-select on picker for customizable select
📝 Synced README badges, structure, and auth schema notes
🔧 Cleared bunfig release-age excludes, refreshed audit overrides

Closes #37
Closes #63

Test plan

• bun run db:migrate applies better_auth_rc4_account_id (provider_account_id → account_id)
• Sign in / sign up / GitHub OAuth still works after auth schema rename
• Toggle network offline → navbar Offline pill shows on md+
• Pagination limit <select> picker styles with appearance: base-select
• bun audit clean; bun run type / bun run check pass
• README badges match package.json versions

[cursor]

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit c065c46.}

[qodo-code-review]

PR Summary by Qodo

Upgrade to Next 16.3, add offline banner, and align Better Auth accountId

✨ Enhancement ⚙️ Configuration changes 📝 Documentation 🕐 40+ Minutes

AI Description

• Upgrade core dependencies (Next 16.3, Better Auth rc.4, Panda beta.12, nuqs 2.9.5).
• Add md+ navbar offline indicator using Next.js experimental useOffline.
• Migrate Better Auth account identity from providerAccountId back to accountId with DB rename.

Diagram

graph TD
  C[Navbar] --> B["OfflineBanner"] --> A["useOffline hook"]
  H["next.config.ts useOffline"] --> A
  D["Better Auth rc.4"] --> E["auth.ts (accountId)"] --> F["db migration"] --> G[("Account table")]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Custom offline hook (navigator.onLine + events)

• ➕ Avoids reliance on Next experimental API stability
• ➕ Works across non-Next environments (tests, storybook, etc.)
• ➖ More code to maintain and test
• ➖ May diverge from Next’s intended offline semantics over time

2. Compatibility column instead of rename (keep provider_account_id)

• ➕ Lower migration risk (no column rename)
• ➕ Easier rollback if rc.4 behavior changes again
• ➖ Schema stays inconsistent with Better Auth naming
• ➖ Requires adapter/code mapping layer and dual indexes/constraints

Recommendation: Current approach is reasonable: adopting Next 16.3’s useOffline keeps offline state handling aligned with the framework (accepting the experimental risk), and the DB column rename is the cleanest way to match Better Auth rc.4’s accountId expectation. If useOffline proves unstable, consider swapping OfflineBanner to a small custom hook without changing UI call sites.

Files changed (13) +1012 / -316

Enhancement (5) +38 / -4

next.config.tsEnable experimental useOffline in Next config +1/-0

Enable experimental useOffline in Next config

• Turns on Next’s experimental useOffline feature flag to support the new offline indicator UI.

next.config.ts

navbar.tsxRender OfflineBanner in navbar +2/-0

Render OfflineBanner in navbar

• Imports the OfflineBanner and places it in the navbar layout so offline status becomes visible when applicable.

src/components/navbar/navbar.tsx

offline-indicator.tsxAdd OfflineBanner client component using next/offline +31/-0

Add OfflineBanner client component using next/offline

• Introduces a client-only OfflineBanner that uses Next’s useOffline hook. The banner is hidden when online and only displayed on md+ viewports.

src/components/offline-indicator.tsx

auth.tsSwitch account schema from providerAccountId to accountId +3/-3

Switch account schema from providerAccountId to accountId

• Updates the Drizzle auth schema to use accountId (account_id) instead of providerAccountId (provider_account_id). Renames the corresponding unique index to account_issuer_accountId_uidx.

src/db/schema/auth.ts

pagination-skeleton.tsxWiden pagination skeleton placeholder +1/-1

Widen pagination skeleton placeholder

• Adjusts the skeleton width to better match expected pagination control sizing.

src/features/pagination/components/pagination-skeleton.tsx

Bug fix (1) +2 / -1

pagination-limit-control.tsxFix select picker styling and hydration warning +2/-1

Fix select picker styling and hydration warning

• Sets appearance: base-select on the ::picker(select) pseudo to improve cross-browser/custom select rendering. Adds suppressHydrationWarning to the button used by the select UI to avoid hydration mismatch warnings.

src/features/pagination/components/pagination-limit-control.tsx

Documentation (1) +18 / -15

README.mdRefresh badges and docs for new versions and offline/auth notes +18/-15

Refresh badges and docs for new versions and offline/auth notes

• Updates tech stack badges and narrative to reflect Next 16.3, Better Auth rc.4, nuqs 2.9.5, Ultracite 7.10.1, and Varlock 1.16.0. Adds documentation for the OfflineBanner and clarifies auth account identity keyed by (issuer, accountId).

README.md

Other (6) +954 / -296

.fallowrc.jsonDisable unused dependency override lint rule +2/-1

Disable unused dependency override lint rule

• Turns off the unused-dependency-overrides rule while keeping other audit rules intact. This reduces noise given the project’s use of overrides.

.fallowrc.json

bun.lockLockfile update for dependency bumps and transitive changes +134/-203

Lockfile update for dependency bumps and transitive changes

• Updates Bun lockfile to reflect version bumps (Next 16.3.0 stable, Better Auth rc.4, Panda beta.12, nuqs 2.9.5, Ultracite 7.10.1) and associated transitive dependency changes.

bun.lock

bunfig.tomlClear Bun minimumReleaseAge exclude list +1/-26

Clear Bun minimumReleaseAge exclude list

• Replaces the long minimumReleaseAgeExcludes list with an empty array, relying on the global minimumReleaseAge setting only.

bunfig.toml

package.jsonBump Next/Better Auth/Panda/nuqs/Ultracite and refresh overrides +67/-66

Bump Next/Better Auth/Panda/nuqs/Ultracite and refresh overrides

• Upgrades primary dependencies and dev tooling versions, updates the auth generation script to Better Auth rc.4, and refreshes overrides (e.g., brace-expansion, fast-uri, hono, nanoid, postcss). Also reorganizes the file but preserves the same script set and metadata.

package.json

migration.sqlRename provider_account_id to account_id and update unique index +3/-0

Rename provider_account_id to account_id and update unique index

• Renames the account table column to account_id, drops the old unique index, and creates a new unique index on (issuer, account_id) to match Better Auth rc.4 expectations.

src/db/migrations/20260808222444_better_auth_rc4_account_id/migration.sql

snapshot.jsonDrizzle snapshot for accountId rename migration +747/-0

Drizzle snapshot for accountId rename migration

• Adds the migration snapshot metadata reflecting the account.provider_account_id → account.account_id rename and updated index naming.

src/db/migrations/20260808222444_better_auth_rc4_account_id/snapshot.json

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📜 Skill insights (0)

1. Navbar spacing regression 🐞 Bug ≡ Correctness

Description

Navbar now renders OfflineBanner as a third direct child inside the between() container; when
offline on md+, that extra flex item can redistribute spacing and shift the nav/auth group away
from its prior alignment.

Code

src/components/navbar/navbar.tsx[77]

+        <OfflineBanner />

Evidence

The navbar uses between() as the layout wrapper and now includes OfflineBanner as a new sibling
between the logo link and the <ul>. Other usages of between() in the repo (pagination) show it
being used as a two-child “summary vs controls” layout, reinforcing the risk that adding a third
visible child will change spacing behavior when offline on md+ screens.

src/components/navbar/navbar.tsx[41-96]
src/components/offline-indicator.tsx[6-30]
src/features/pagination/components/pagination-skeleton.tsx[6-42]
src/features/pagination/components/pagination.tsx[22-39]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`<nav className={between()}>` previously had two “endpoints” (logo on the left, nav/auth on the right). This PR inserts `<OfflineBanner />` as a third direct child, which can change how the `between()` layout distributes space when the banner is visible (offline, `md+`).

## Issue Context
The banner is a client component that renders a visible `<div>` only when offline and only at `md+` (it’s `display: none` at base). When it renders, it becomes an additional layout sibling between the logo and the nav list.

## Fix Focus Areas
- src/components/navbar/navbar.tsx[41-96]

## Suggested fix
Preserve a two-child structure for the `between()` container by grouping the banner together with the existing nav/auth content, e.g.:
- Keep: child #1 = logo/link
- Make: child #2 = wrapper `<div className={hstack(...)}>` containing `<OfflineBanner />` and the `<ul>`

This keeps the high-level layout stable while still showing the offline indicator.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Context used

✅ Compliance rules (platform): 8 rules

_{To customize comments, go to the Qodo configuration screen, or learn more in the docs.}

[qodo-code-review]

1. Navbar spacing regression 🐞 Bug ≡ Correctness

Navbar now renders OfflineBanner as a third direct child inside the between() container; when
offline on md+, that extra flex item can redistribute spacing and shift the nav/auth group away
from its prior alignment.

Agent Prompt

## Issue description
`<nav className={between()}>` previously had two “endpoints” (logo on the left, nav/auth on the right). This PR inserts `<OfflineBanner />` as a third direct child, which can change how the `between()` layout distributes space when the banner is visible (offline, `md+`).

## Issue Context
The banner is a client component that renders a visible `<div>` only when offline and only at `md+` (it’s `display: none` at base). When it renders, it becomes an additional layout sibling between the logo and the nav list.

## Fix Focus Areas
- src/components/navbar/navbar.tsx[41-96]

## Suggested fix
Preserve a two-child structure for the `between()` container by grouping the banner together with the existing nav/auth content, e.g.:
- Keep: child #1 = logo/link
- Make: child #2 = wrapper `<div className={hstack(...)}>` containing `<OfflineBanner />` and the `<ul>`

This keeps the high-level layout stable while still showing the offline indicator.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools