fix: minor ui bugs#94
Conversation
| icon: Headphones, | ||
| href: "https://billing.nodebyte.host/tickets/create", | ||
| cta: t("contact.ticket.button"), | ||
| color: "bg-accent/10 text-accent", | ||
| hoverColor: "hover:bg-accent hover:text-white", | ||
| features: [ | ||
| t("contact.ticket.features.0"), | ||
| t("contact.ticket.features.1"), | ||
| t("contact.ticket.features.2"), | ||
| ], | ||
| }, |
There was a problem hiding this comment.
Bug: The new support ticket card on the Contact page uses translation keys that might be missing. If the translations submodule isn't updated, the page could crash or render incorrectly.
Severity: HIGH
Suggested Fix
Before merging, verify that the translations git submodule has been updated to include the new contact.ticket.* keys in both messages/en-US.json and templates/en.json. Ensure the submodule commit is correctly referenced in this PR.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.
Location: packages/ui/components/Layouts/Contact/contact.tsx#L57-L70
Potential issue: The component `contact.tsx` now uses new translation keys like
`t("contact.ticket.title")`. These translations are managed in a separate git submodule.
If the submodule was not updated and synced correctly before merging, these keys will be
missing at runtime. The `next-intl` library is not configured with `onError` or
`getMessageFallback` handlers, meaning it will likely throw an error or render the raw
keys, causing the Contact page to crash or display incorrectly. This is a common
integration issue with submodules.
Did we get this right? 👍 / 👎 to inform future reviews.
| className="flex items-start gap-3 rounded-lg p-3 hover:bg-muted/60 group cursor-pointer w-full" | ||
| > | ||
| <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors"> | ||
| <resource.icon className="h-4 w-4" /> | ||
| </div> | ||
| <div className="flex-1 min-w-0"> | ||
| <div className="flex items-center gap-2"> | ||
| <span className="font-medium text-sm">{resource.title}</span> | ||
| <ExternalLink className="h-3 w-3 text-muted-foreground" /> | ||
| <span className="font-medium text-sm text-foreground">{resource.title}</span> | ||
| {resource.external && <ExternalLink className="h-3 w-3 text-muted-foreground" />} | ||
| </div> | ||
| <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1"> |
There was a problem hiding this comment.
Bug: The desktop "Resources" dropdown uses <a> tags for internal links instead of the Next.js <Link> component, causing unnecessary full-page reloads and breaking the single-page application experience.
Severity: MEDIUM
Suggested Fix
In the desktop "Resources" dropdown, conditionally render links using the Next.js <Link> component for internal routes (where resource.external is false) and a standard <a> tag for external routes. This will align its behavior with the mobile menu and other dropdowns.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.
Location: packages/ui/components/Static/navigation.tsx#L420-L434
Potential issue: The desktop navigation's "Resources" dropdown menu uses standard `<a>`
tags for all its links. This includes internal Next.js routes like `/kb` and
`/changelog`. Using `<a>` tags for internal routes triggers a full-page reload,
bypassing Next.js's client-side routing. This results in a slower user experience and
loss of application state. This behavior is inconsistent with other dropdowns (e.g.,
"Company") and the mobile version of the same menu, which correctly use the Next.js
`<Link>` component for internal navigation.
Did we get this right? 👍 / 👎 to inform future reviews.
No description provided.