@@ -433,7 +433,7 @@ export function Home() {
433433 </ div >
434434
435435 { /* Repo Chips with Mode Dropdowns */ }
436- < div className = "flex items-center gap-1.5 shrink-0" >
436+ < div className = "flex items-center gap-1.5 shrink-0 flex-1 min-w-0 " >
437437 { config . repos . length === 0 && (
438438 < span className = "text-xs text-muted-foreground" >
439439 Add a filter to get started →
@@ -531,122 +531,125 @@ export function Home() {
531531 } ) }
532532 </ div >
533533
534- { /* Query Preview */ }
535- { searchQueries . length > 0 && (
536- < div
537- className = "text-xs text-muted-foreground font-mono truncate max-w-xs hidden lg:block shrink-0"
538- title = { searchQueries . join ( "\n" ) }
539- >
540- { searchQueries . length === 1
541- ? searchQueries [ 0 ]
542- : `${ searchQueries . length } }
543- </ div >
544- ) }
534+ { /* Query Preview & Add Repo - pushed to right */ }
535+ < div className = "flex items-center gap-2 shrink-0 ml-auto" >
536+ { /* Query Preview */ }
537+ { searchQueries . length > 0 && (
538+ < div
539+ className = "text-xs text-muted-foreground font-mono truncate max-w-xs hidden lg:block shrink-0"
540+ title = { searchQueries . join ( "\n" ) }
541+ >
542+ { searchQueries . length === 1
543+ ? searchQueries [ 0 ]
544+ : `${ searchQueries . length } }
545+ </ div >
546+ ) }
545547
546- { /* Add Repo Button */ }
547- < div className = "relative shrink-0" >
548- < button
549- onClick = { ( ) => {
550- setShowAddRepo ( ! showAddRepo ) ;
551- setOpenRepoDropdown ( null ) ;
552- } }
553- className = { cn (
554- "flex items-center gap-1.5 px-2 py-1 rounded-md border transition-colors text-xs" ,
555- showAddRepo
556- ? "bg-muted border-border text-foreground"
557- : "border-dashed border-border hover:bg-muted/50 hover:border-solid text-muted-foreground hover:text-foreground"
558- ) }
559- >
560- < Plus className = "w-3.5 h-3.5" />
561- < span > Add Repo</ span >
562- </ button >
563-
564- { /* Search Dropdown */ }
565- { showAddRepo && (
566- < div className = "absolute top-full right-0 mt-1 w-72 max-w-[calc(100vw-1rem)] bg-card border border-border rounded-lg shadow-xl overflow-hidden z-30" >
567- < div className = "p-2 border-b border-border" >
568- < div className = "relative" >
569- < input
570- type = "text"
571- value = { searchQuery }
572- onChange = { ( e ) => setSearchQuery ( e . target . value ) }
573- onBlur = { ( e ) => {
574- // Close dropdown if not clicking inside it
575- if ( ! e . relatedTarget ?. closest ( ".add-repo-dropdown" ) ) {
576- setTimeout ( ( ) => setShowAddRepo ( false ) , 150 ) ;
577- }
578- } }
579- placeholder = "Search repositories..."
580- className = "w-full h-7 pl-7 pr-3 rounded-md border border-border bg-muted/50 text-xs placeholder:text-muted-foreground/60 focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
581- autoFocus
582- />
583- < Search className = "absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
584- { searching && (
585- < Loader2 className = "absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 animate-spin text-muted-foreground" />
586- ) }
548+ { /* Add Repo Button */ }
549+ < div className = "relative shrink-0" >
550+ < button
551+ onClick = { ( ) => {
552+ setShowAddRepo ( ! showAddRepo ) ;
553+ setOpenRepoDropdown ( null ) ;
554+ } }
555+ className = { cn (
556+ "flex items-center gap-1.5 px-2 py-1 rounded-md border transition-colors text-xs" ,
557+ showAddRepo
558+ ? "bg-muted border-border text-foreground"
559+ : "border-dashed border-border hover:bg-muted/50 hover:border-solid text-muted-foreground hover:text-foreground"
560+ ) }
561+ >
562+ < Plus className = "w-3.5 h-3.5" />
563+ < span > Add Repo</ span >
564+ </ button >
565+
566+ { /* Search Dropdown */ }
567+ { showAddRepo && (
568+ < div className = "absolute top-full right-0 mt-1 w-72 max-w-[calc(100vw-1rem)] bg-card border border-border rounded-lg shadow-xl overflow-hidden z-30" >
569+ < div className = "p-2 border-b border-border" >
570+ < div className = "relative" >
571+ < input
572+ type = "text"
573+ value = { searchQuery }
574+ onChange = { ( e ) => setSearchQuery ( e . target . value ) }
575+ onBlur = { ( e ) => {
576+ // Close dropdown if not clicking inside it
577+ if ( ! e . relatedTarget ?. closest ( ".add-repo-dropdown" ) ) {
578+ setTimeout ( ( ) => setShowAddRepo ( false ) , 150 ) ;
579+ }
580+ } }
581+ placeholder = "Search repositories..."
582+ className = "w-full h-7 pl-7 pr-3 rounded-md border border-border bg-muted/50 text-xs placeholder:text-muted-foreground/60 focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
583+ autoFocus
584+ />
585+ < Search className = "absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
586+ { searching && (
587+ < Loader2 className = "absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 animate-spin text-muted-foreground" />
588+ ) }
589+ </ div >
587590 </ div >
588- </ div >
589591
590- < div className = "add-repo-dropdown max-h-64 overflow-auto" >
591- { /* All Repos option - always shown at top when not already added */ }
592- { ! config . repos . some ( isAllReposFilter ) && ! searchQuery && (
593- < button
594- onMouseDown = { ( ) => {
595- handleAddRepo ( ALL_REPOS_KEY ) ;
596- setShowAddRepo ( false ) ;
597- } }
598- className = "w-full flex items-center gap-2 px-3 py-2.5 hover:bg-primary/10 transition-colors text-left border-b border-border bg-primary/5"
599- >
600- < div className = "w-4 h-4 rounded bg-primary/20 flex items-center justify-center shrink-0" >
601- < Users className = "w-3 h-3 text-primary" />
602- </ div >
603- < div className = "flex-1 min-w-0" >
604- < span className = "font-medium text-xs" > All Repos</ span >
605- < span className = "text-[10px] text-muted-foreground ml-1.5" >
606- PRs across all repositories
607- </ span >
608- </ div >
609- </ button >
610- ) }
611- { searchResults . length > 0 ? (
612- searchResults . map ( ( repo ) => (
592+ < div className = "add-repo-dropdown max-h-64 overflow-auto" >
593+ { /* All Repos option - always shown at top when not already added */ }
594+ { ! config . repos . some ( isAllReposFilter ) && ! searchQuery && (
613595 < button
614- key = { repo . id }
615596 onMouseDown = { ( ) => {
616- handleAddRepo ( repo . full_name ) ;
597+ handleAddRepo ( ALL_REPOS_KEY ) ;
617598 setShowAddRepo ( false ) ;
618- setSearchQuery ( "" ) ;
619599 } }
620- className = "w-full flex items-center gap-2 px-3 py-2 hover:bg-muted/50 transition-colors text-left border-b border-border/50 last:border-b-0 "
600+ className = "w-full flex items-center gap-2 px-3 py-2.5 hover:bg-primary/10 transition-colors text-left border-b border-border bg-primary/5 "
621601 >
622- { repo . owner && (
623- < img
624- src = { repo . owner . avatar_url }
625- alt = { repo . owner . login }
626- className = "w-4 h-4 rounded shrink-0"
627- />
628- ) }
629- < span className = "font-medium text-xs truncate flex-1" >
630- { repo . full_name }
631- </ span >
632- < span className = "flex items-center gap-1 text-[10px] text-muted-foreground" >
633- < Star className = "w-3 h-3" />
634- { ( repo . stargazers_count ?? 0 ) . toLocaleString ( ) }
635- </ span >
602+ < div className = "w-4 h-4 rounded bg-primary/20 flex items-center justify-center shrink-0" >
603+ < Users className = "w-3 h-3 text-primary" />
604+ </ div >
605+ < div className = "flex-1 min-w-0" >
606+ < span className = "font-medium text-xs" > All Repos</ span >
607+ < span className = "text-[10px] text-muted-foreground ml-1.5" >
608+ PRs across all repositories
609+ </ span >
610+ </ div >
636611 </ button >
637- ) )
638- ) : searchQuery ? (
639- < div className = "px-3 py-4 text-xs text-muted-foreground text-center" >
640- { searching ? "Searching..." : "No repositories found" }
641- </ div >
642- ) : (
643- < div className = "px-3 py-4 text-xs text-muted-foreground text-center" >
644- Type to search for repositories
645- </ div >
646- ) }
612+ ) }
613+ { searchResults . length > 0 ? (
614+ searchResults . map ( ( repo ) => (
615+ < button
616+ key = { repo . id }
617+ onMouseDown = { ( ) => {
618+ handleAddRepo ( repo . full_name ) ;
619+ setShowAddRepo ( false ) ;
620+ setSearchQuery ( "" ) ;
621+ } }
622+ className = "w-full flex items-center gap-2 px-3 py-2 hover:bg-muted/50 transition-colors text-left border-b border-border/50 last:border-b-0"
623+ >
624+ { repo . owner && (
625+ < img
626+ src = { repo . owner . avatar_url }
627+ alt = { repo . owner . login }
628+ className = "w-4 h-4 rounded shrink-0"
629+ />
630+ ) }
631+ < span className = "font-medium text-xs truncate flex-1" >
632+ { repo . full_name }
633+ </ span >
634+ < span className = "flex items-center gap-1 text-[10px] text-muted-foreground" >
635+ < Star className = "w-3 h-3" />
636+ { ( repo . stargazers_count ?? 0 ) . toLocaleString ( ) }
637+ </ span >
638+ </ button >
639+ ) )
640+ ) : searchQuery ? (
641+ < div className = "px-3 py-4 text-xs text-muted-foreground text-center" >
642+ { searching ? "Searching..." : "No repositories found" }
643+ </ div >
644+ ) : (
645+ < div className = "px-3 py-4 text-xs text-muted-foreground text-center" >
646+ Type to search for repositories
647+ </ div >
648+ ) }
649+ </ div >
647650 </ div >
648- </ div >
649- ) }
651+ ) }
652+ </ div >
650653 </ div >
651654 </ div >
652655 </ div >
0 commit comments