fix: Indicate in UI which is selected thread (#92)

This commit is contained in:
Brace Sproul 2025-06-09 10:40:24 -07:00 • committed by GitHub
parent 8afe1e6803
commit 7e6ed0c299
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -7,6 +7,7 @@ import { cn } from "@/lib/utils";
import { StatusIndicator } from "@/components/status-indicator"; import { StatusIndicator } from "@/components/status-indicator";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { GitHubSVG } from "./icons/github"; import { GitHubSVG } from "./icons/github";
import { useQueryState } from "nuqs";
interface ThreadItemProps { interface ThreadItemProps {
thread: ThreadWithTasks; thread: ThreadWithTasks;
@ -21,6 +22,8 @@ export function ThreadItem({
variant = "dashboard", variant = "dashboard",
className, className,
}: ThreadItemProps) { }: ThreadItemProps) {
const [threadId] = useQueryState("threadId");
const isSelected = thread.thread_id === threadId;
const isSidebar = variant === "sidebar"; const isSidebar = variant === "sidebar";
const displayDate = new Date(thread.created_at).toLocaleDateString("en-US", { const displayDate = new Date(thread.created_at).toLocaleDateString("en-US", {
@ -72,9 +75,14 @@ export function ThreadItem({
<div <div
className={cn( className={cn(
"group cursor-pointer rounded-md border border-gray-200 bg-inherit p-2 shadow-sm transition-colors hover:bg-gray-50 hover:shadow-md", "group cursor-pointer rounded-md border border-gray-200 bg-inherit p-2 shadow-sm transition-colors hover:bg-gray-50 hover:shadow-md",
isSelected && "border-primary",
className, className,
)} )}
onClick={() => onClick(thread)} onClick={() => {
if (!isSelected) {
onClick(thread);
}
}}
> >
<div className="flex items-start gap-1.5"> <div className="flex items-start gap-1.5">
<div className="flex w-full min-w-0 flex-col gap-1"> <div className="flex w-full min-w-0 flex-col gap-1">