feat(header): move feedback button to left (#65)

Place the feedback trigger in the header's left action area on desktop and mobile so it stays visible next to navigation controls.

Use a message-circle icon with a labeled button style, remove the old top-right header placement, and update the dialog copy to clarify that submissions go directly to developers for review.

Co-authored-by: Avery Felts <averyfelts@Averys-MacBook-Air.local>
This commit is contained in:
aaf2tbz 2026-02-10 21:08:15 -07:00 committed by GitHub
parent dc0cd40b13
commit 67412a0b00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 10 deletions

View File

@ -121,7 +121,7 @@ export function FeedbackWidget({ children }: { children?: React.ReactNode }) {
<DialogHeader className="space-y-1.5"> <DialogHeader className="space-y-1.5">
<DialogTitle className="text-base sm:text-lg">Send Feedback</DialogTitle> <DialogTitle className="text-base sm:text-lg">Send Feedback</DialogTitle>
<DialogDescription className="text-xs sm:text-sm"> <DialogDescription className="text-xs sm:text-sm">
Report a bug, request a feature, or ask a question. Report a bug, request a feature, or ask a question. Feedback is sent directly to developers for review.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit} className="grid gap-3 sm:gap-4"> <form onSubmit={handleSubmit} className="grid gap-3 sm:gap-4">

View File

@ -5,6 +5,7 @@ import { useTheme } from "next-themes"
import { import {
IconLogout, IconLogout,
IconMenu2, IconMenu2,
IconMessageCircle,
IconMoon, IconMoon,
IconSearch, IconSearch,
IconSparkles, IconSparkles,
@ -67,6 +68,7 @@ export function SiteHeader({
}} }}
> >
<button <button
type="button"
className="flex size-8 shrink-0 items-center justify-center rounded-full -ml-0.5 hover:bg-background/60" className="flex size-8 shrink-0 items-center justify-center rounded-full -ml-0.5 hover:bg-background/60"
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
@ -76,6 +78,19 @@ export function SiteHeader({
> >
<IconMenu2 className="size-5 text-muted-foreground" /> <IconMenu2 className="size-5 text-muted-foreground" />
</button> </button>
<Button
type="button"
variant="ghost"
size="sm"
className="h-8 gap-1 rounded-full border border-white/80 px-2 text-xs text-muted-foreground hover:bg-background/60 hover:text-foreground"
onClick={(e) => {
e.stopPropagation()
openFeedback()
}}
>
<IconMessageCircle className="size-3.5" />
Feedback
</Button>
<IconSearch className="size-4 text-muted-foreground shrink-0" /> <IconSearch className="size-4 text-muted-foreground shrink-0" />
<span className="text-muted-foreground text-sm flex-1"> <span className="text-muted-foreground text-sm flex-1">
Search... Search...
@ -119,8 +134,17 @@ export function SiteHeader({
{/* desktop header: three-column grid for true center search */} {/* desktop header: three-column grid for true center search */}
<div className="hidden h-12 w-full grid-cols-[1fr_minmax(0,28rem)_1fr] items-center px-4 md:grid"> <div className="hidden h-12 w-full grid-cols-[1fr_minmax(0,28rem)_1fr] items-center px-4 md:grid">
<div className="flex items-center"> <div className="flex items-center gap-1">
<SidebarTrigger className="-ml-1" /> <SidebarTrigger className="-ml-1" />
<Button
variant="ghost"
size="sm"
className="h-7 gap-1.5 rounded-full border border-white/80 px-2 text-xs text-muted-foreground/70 hover:text-foreground"
onClick={openFeedback}
>
<IconMessageCircle className="size-3.5" />
Feedback
</Button>
</div> </div>
<div className="relative justify-self-center w-full"> <div className="relative justify-self-center w-full">
@ -154,14 +178,6 @@ export function SiteHeader({
</div> </div>
<div className="flex shrink-0 items-center justify-end gap-0.5"> <div className="flex shrink-0 items-center justify-end gap-0.5">
<Button
variant="ghost"
size="sm"
className="text-muted-foreground/70 hover:text-foreground text-xs h-7 px-2"
onClick={openFeedback}
>
Feedback
</Button>
<NotificationsPopover /> <NotificationsPopover />
<Button <Button
variant="ghost" variant="ghost"