feat(ui): redesign commit selector dropdown

frontend/src/components/registry/commit-selector.tsx

@@ -1,8 +1,9 @@
 "use client"
 
-import { ChevronDownIcon, TagIcon } from "lucide-react"
+import { Bot, ChevronDownIcon, TagIcon } from "lucide-react"
 import { useState } from "react"
 import type { GitCommitInfo } from "@/client"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {
@@ -26,6 +27,27 @@ interface CommitSelectorProps {
   disabled?: boolean
 }
 
+/** Returns true when a commit author is a service/bot account, e.g. "name[bot]". */
+function isBotAuthor(author: string): boolean {
+  return author.toLowerCase().includes("[bot]")
+}
+
+/** Derives up to two uppercase initials from a commit author name. */
+function getAuthorInitials(author: string): string {
+  const cleaned = author
+    .replace(/\[bot\]/gi, "")
+    .replace(/[-_]+/g, " ")
+    .trim()
+  const parts = cleaned.split(/\s+/).filter(Boolean)
+  if (parts.length === 0) {
+    return "?"
+  }
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase()
+  }
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
 export function CommitSelector({
   commits,
   currentCommitSha,
@@ -100,10 +122,11 @@ export function CommitSelector({
       <DropdownMenuContent align="start" className="w-96">
         <DropdownMenuLabel>Select commit</DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <div className="max-h-64 overflow-y-auto">
+        <div className="max-h-64 overflow-y-auto p-1">
           {commits?.map((commit, index) => {
             const isSelected = commit.sha === effectiveCurrentSha
             const isHead = index === 0
+            const isBot = isBotAuthor(commit.author)
             const commitDate = new Date(commit.date)
             const relativeTime = getRelativeTime(commitDate)
 
@@ -115,43 +138,64 @@ export function CommitSelector({
                   setIsOpen(false)
                 }}
                 className={cn(
-                  "flex flex-col items-start space-y-1 p-3",
-                  isSelected && "bg-accent"
+                  "relative flex cursor-pointer items-start gap-2.5 p-2.5",
+                  isSelected && "bg-primary/5"
                 )}
               >
-                <div className="flex w-full flex-col space-y-1">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center space-x-2">
-                      <span className="font-mono text-sm font-medium">
-                        {commit.sha.substring(0, 7)}
-                      </span>
-                      {isHead && (
-                        <Badge variant="secondary" className="text-xs">
-                          HEAD
-                        </Badge>
-                      )}
-                      {isSelected && !isHead && (
-                        <Badge variant="default" className="text-xs">
-                          Current
-                        </Badge>
-                      )}
-                      {isSelected && isHead && (
-                        <Badge variant="default" className="text-xs">
-                          Current • HEAD
-                        </Badge>
-                      )}
-                    </div>
-                    <span className="text-xs text-muted-foreground">
+                {isSelected && (
+                  <span
+                    aria-hidden
+                    className="absolute inset-y-1.5 left-0 w-0.5 rounded-full bg-primary"
+                  />
+                )}
+                <Avatar className="mt-0.5 size-7 flex-none">
+                  <AvatarFallback className="bg-muted text-[10px] font-medium text-muted-foreground">
+                    {isBot ? (
+                      <Bot className="size-3.5" />
+                    ) : (
+                      getAuthorInitials(commit.author)
+                    )}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-mono text-xs font-semibold">
+                      {commit.sha.substring(0, 7)}
+                    </span>
+                    {isSelected && (
+                      <Badge
+                        variant="outline"
+                        className="border-transparent bg-primary/10 text-xs font-medium text-primary"
+                      >
+                        Current
+                      </Badge>
+                    )}
+                    {isHead && (
+                      <Badge variant="secondary" className="text-xs">
+                        HEAD
+                      </Badge>
+                    )}
+                    <span
+                      className="ml-auto whitespace-nowrap text-xs text-muted-foreground"
+                      title={commitDate.toLocaleString()}
+                    >
                       {relativeTime}
                     </span>
                   </div>
+                  <p className="mt-1 line-clamp-1 text-[13px] text-foreground">
+                    {commit.message}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {commit.author || "Unknown"} •{" "}
+                    {commitDate.toLocaleDateString()}
+                  </p>
                   {commit.tags && commit.tags.length > 0 && (
-                    <div className="flex items-center space-x-1">
+                    <div className="mt-1.5 flex flex-wrap items-center gap-1">
                       {commit.tags.map((tag) => (
                         <Badge
                           key={tag}
                           variant="outline"
-                          className="text-xs flex items-center gap-1"
+                          className="flex items-center gap-1 text-xs font-normal text-muted-foreground"
                         >
                           <TagIcon className="size-2.5" />
                           {tag}
@@ -160,14 +204,6 @@ export function CommitSelector({
                     </div>
                   )}
                 </div>
-                <div className="w-full text-left">
-                  <p className="line-clamp-1 text-sm text-foreground">
-                    {commit.message}
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    by {commit.author} • {commitDate.toLocaleDateString()}
-                  </p>
-                </div>
               </DropdownMenuItem>
             )
           })}