Implement custom error and not found components for chat routes#49
Implement custom error and not found components for chat routes#49
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR introduces reusable error/not-found UI components for authenticated routes (notably chat), alongside a TanStack Router/Start upgrade that updates generated route typings/paths and a few related UI/accessibility tweaks.
Changes:
- Extracts custom
errorComponentfor/_authedandnotFoundComponentfor/_authed/chat/$chatId. - Upgrades TanStack Router/Start packages and updates the generated
routeTree.gen.tsroute definitions. - Improves a few UI components (glowing effect ref targeting, sidebar collapsible behavior, and combobox ARIA attributes).
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Switches Nitro Vite plugin integration. |
| src/routes/_authed/route.tsx | Extracts route error UI into a named component. |
| src/routes/_authed/chat/$chatId.tsx | Adds a dedicated chat “not found” component and wires it into the route. |
| src/routeTree.gen.ts | Regenerates route typings/paths after router upgrade (notably trailing-slash changes). |
| src/components/ui/glowing-effect.tsx | Moves CSS variable updates to a dedicated .glow element ref. |
| src/components/nav-main.tsx | Simplifies chat nav collapsible state behavior. |
| src/components/data-table/data-table-view-options.tsx | Adds controlled popover state + ARIA attributes for the “View options” combobox button. |
| src/components/data-table/data-table-sort-list.tsx | Adds aria-expanded to a combobox trigger. |
| src/components/chat/chat-input-area.tsx | Removes external selectedServerIds support and adjusts local selection syncing. |
| package.json | Upgrades TanStack packages and adds Nitro nightly dependency. |
| CLAUDE.md | Trims/rewrites repository guidance documentation. |
Comments suppressed due to low confidence (2)
src/components/nav-main.tsx:74
- With the updated generated route tree using trailing slashes for index routes (e.g.
/chat/,/servers/,/apps/), these hard-coded sidebar URLs (e.g."/chat","/servers") can become invalid for typed routing and may not match the canonical route paths. Consider switching these to the canonical paths (with trailing slash) or using route IDs/helpers so navigation stays in sync withrouteTree.gen.ts.
<Collapsible key={item.title} open={isOnChatPage}>
<SidebarMenuItem className="text-base">
<CollapsibleTrigger asChild>
<Link activeOptions={{ exact: false }} to={item.url}>
{({ isActive }) => (
src/components/chat/chat-input-area.tsx:70
- The comment here is now misleading: it says the component may use externally-provided
selectedServerIds, but the prop was removed andselectedServerIdsalways comes from local state. Either remove/update the comment, or reintroduce the external-control prop if this component is still intended to support the new-chat store flow.
// Use external selectedServerIds if provided (for new chat store), otherwise use local state
const selectedServerIds = localSelectedServerIds;
| </div> | ||
| <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto"> | ||
| <Button | ||
| onClick={() => navigate({ to: "/chat" })} |
There was a problem hiding this comment.
navigate({ to: "/chat" }) likely no longer matches the generated route to types/paths after the router upgrade (the generated route tree now includes /chat/ with a trailing slash). This can cause TypeScript route typing errors and/or navigation to a non-matching path. Update this navigation target (and other chat links) to the canonical route path, or adjust router config to normalize/disable trailing slashes so both forms are accepted consistently.
| onClick={() => navigate({ to: "/chat" })} | |
| onClick={() => navigate({ to: "/chat/" })} |
| '/apps/': typeof AuthedAppsIndexRoute | ||
| '/chat/': typeof AuthedChatIndexRoute | ||
| '/connections': typeof AuthedConnectionsIndexRoute | ||
| '/servers': typeof AuthedServersIndexRoute | ||
| '/api/chat': typeof ApiChatIndexRoute | ||
| '/connections/': typeof AuthedConnectionsIndexRoute | ||
| '/servers/': typeof AuthedServersIndexRoute | ||
| '/api/chat/': typeof ApiChatIndexRoute |
There was a problem hiding this comment.
The generated routes now include trailing slashes for several index routes (e.g. /apps/, /connections/, /servers/, /api/chat/). There are still multiple navigation calls elsewhere using the non-trailing-slash variants (e.g. to: "/apps", to: "/servers", to: "/chat"), which is likely to cause type errors with TanStack Router’s typed to union and/or inconsistent routing at runtime. Either update the app to use the canonical trailing-slash paths everywhere, or configure routing to normalize/disable trailing slashes and re-generate the route tree accordingly.
| role="combobox" | ||
| aria-expanded={open} | ||
| aria-controls="view-options-listbox" | ||
| variant="outline" |
There was a problem hiding this comment.
aria-controls is hard-coded to view-options-listbox. If multiple DataTableViewOptions instances render on the same page, this will create duplicate IDs (invalid HTML) and can confuse assistive tech. Prefer generating a per-instance id (e.g. React.useId()) and using it for both aria-controls and the controlled element’s id.
| "@tanstack/react-router": "^1.163.3", | ||
| "@tanstack/react-router-devtools": "^1.163.3", | ||
| "@tanstack/react-router-ssr-query": "^1.163.3", | ||
| "@tanstack/react-start": "^1.163.3", | ||
| "@tanstack/react-table": "^8.21.3", |
There was a problem hiding this comment.
The PR title focuses on chat route error/not-found components, but this change set also upgrades multiple TanStack packages (and swaps the Nitro Vite plugin / adds a Nitro nightly dependency). That’s a significant behavioral/operational change that should be called out explicitly in the PR description/title or split into a separate PR to make review and rollback safer.
No description provided.