Skip to content

Refine shell top bar and canvas styling #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BotCoder254 merged 1 commit into from
Jul 18, 2026
Merged

Refine shell top bar and canvas styling #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/layout/AppShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,9 @@ export function AppShell() {
gives up exactly its height and stays the only scroll region. */}
<TopBar onSearch={openSearch} />
<div className="flex min-h-0 flex-1 flex-col p-2 pt-0 lg:p-3 lg:pl-0 lg:pt-3">
<main className="min-h-0 flex-1 overflow-y-auto rounded border border-steel/20 bg-canvas">
{/* Deliberate 8px exception to the 6px radius rule: the floating
canvas alone reads better slightly softer at shell scale. */}
<main className="min-h-0 flex-1 overflow-y-auto rounded-[8px] border border-steel/20 bg-canvas">
<div className="mx-auto max-w-6xl p-4 sm:p-6 lg:p-8">
<Outlet />
</div>
Expand Down
17 changes: 10 additions & 7 deletions src/components/layout/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import { Search } from 'lucide-react';
import { Command, Search } from 'lucide-react';
import { NotificationBell } from '../../features/notifications/components/NotificationBell';

interface TopBarProps {
/** Opens the command palette, optionally seeded with typed text. */
onSearch: (seed?: string) => void;
}

const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform);

/**
* Desktop-only header strip on the outer shell surface, above the floating
* content canvas: workspace search centered, the notification bell pinned to
* the far right. Below lg these controls live in MobileTopBar instead.
*/
export function TopBar({ onSearch }: TopBarProps) {
return (
<div className="hidden shrink-0 grid-cols-[1fr_minmax(0,28rem)_1fr] items-center gap-2 px-3 pt-3 lg:grid">
<div className="hidden shrink-0 grid-cols-[1fr_minmax(0,21rem)_1fr] items-center gap-2 px-3 pt-3 lg:grid">
{/* Left spacer keeps the search truly centered despite the bell. */}
<div aria-hidden="true" />
{/* Real search input, centered on the shell. Focusing or typing hands
Expand All @@ -35,10 +33,15 @@ export function TopBar({ onSearch }: TopBarProps) {
value=""
onFocus={() => onSearch()}
onChange={(event) => onSearch(event.target.value)}
Comment on lines 33 to 35

@amazon-q-developer amazon-q-developer Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🛑 Logic Error: The input element is configured as a controlled component with value="" but has an onChange handler that doesn't update the value state. React will warn about this pattern, and the input will not display typed characters before the palette opens. Either remove the onChange handler and rely only on onFocus, or make this a truly uncontrolled input without the value prop.

Suggested change
value=""
onFocus={() => onSearch()}
onChange={(event) => onSearch(event.target.value)}
value=""
onFocus={() => onSearch()}

className="w-full rounded border border-steel/20 bg-canvas py-1.5 pl-8 pr-14 text-sm text-charcoal transition-colors placeholder:text-steel hover:border-steel/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
className="w-full rounded border border-steel/20 bg-canvas py-2 pl-8 pr-14 text-sm text-charcoal transition-colors placeholder:text-steel hover:border-steel/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
/>
<kbd className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded border border-steel/20 bg-surface px-1.5 font-sans text-[11px] text-steel">
{IS_MAC ? '⌘ K' : 'Ctrl K'}
{/* Icon-based shortcut chip (Ctrl/⌘ + K opens the palette). */}
<kbd
aria-label="Shortcut: Control or Command plus K"
className="pointer-events-none absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-0.5 rounded border border-steel/20 bg-surface px-1.5 py-0.5 font-sans text-[11px] text-steel"
>
<Command size={11} aria-hidden="true" />
K
</kbd>
</div>
{/* Operational inbox at the far right of the outer shell; the bell's
Expand Down
Loading