ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 02:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

more consistent styling on issue detail pane for creator + assignee

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-06 16:17:17 +00:00
parent 610cd4199b
commit 5b429a6334
2 changed files with 28 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/frontend/src/components/issue-detail-pane.tsx
View File

@@ -1,7 +1,6 @@
import type { IssueResponse, OrganisationMemberResponse, ProjectResponse } from "@issue/shared"; import type { IssueResponse, OrganisationMemberResponse, ProjectResponse } from "@issue/shared";
import { X } from "lucide-react"; import { X } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Avatar from "@/components/avatar";
import SmallUserDisplay from "@/components/small-user-display"; import SmallUserDisplay from "@/components/small-user-display";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -25,6 +24,7 @@ export function IssueDetailPane({
const [assigneeId, setAssigneeId] = useState<string>( const [assigneeId, setAssigneeId] = useState<string>(
issueData.Issue.assigneeId?.toString() ?? "unassigned", issueData.Issue.assigneeId?.toString() ?? "unassigned",
); );
const [assigneeSelectOpen, setAssigneeSelectOpen] = useState(false);
useEffect(() => { useEffect(() => {
setAssigneeId(issueData.Issue.assigneeId?.toString() ?? "unassigned"); setAssigneeId(issueData.Issue.assigneeId?.toString() ?? "unassigned");
@@ -73,14 +73,20 @@ export function IssueDetailPane({
</Button> </Button>
</div> </div>
<div className="flex flex-col w-full p-2 py-1 gap-2"> <div className="flex flex-col w-full p-2 py-2 gap-2">
<h1 className="text-md">{issueData.Issue.title}</h1> <h1 className="text-md">{issueData.Issue.title}</h1>
{issueData.Issue.description !== "" && (
<p className="text-sm">{issueData.Issue.description}</p> <p className="text-sm">{issueData.Issue.description}</p>
)}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm">Assignee:</span> <span className="text-sm">Assignee:</span>
<Select value={assigneeId} onValueChange={handleAssigneeChange}> <Select
<SelectTrigger size="sm" className="w-fit"> value={assigneeId}
onValueChange={handleAssigneeChange}
onOpenChange={setAssigneeSelectOpen}
>
<SelectTrigger className="w-fit p-0 px-2 py-2" isOpen={assigneeSelectOpen}>
<SelectValue placeholder="Select assignee"> <SelectValue placeholder="Select assignee">
{assigneeId === "unassigned" {assigneeId === "unassigned"
? "Unassigned" ? "Unassigned"
@@ -88,30 +94,21 @@ export function IssueDetailPane({
const member = members.find( const member = members.find(
(m) => m.User.id.toString() === assigneeId, (m) => m.User.id.toString() === assigneeId,
); );
const className = "p-0 py-2 text-sm";
if (member) { if (member) {
return ( return (
<> <SmallUserDisplay
<Avatar user={member.User}
name={member.User.name} className={className}
username={member.User.username}
avatarURL={member.User.avatarURL}
textClass="text-xs"
/> />
{member.User.name}
</>
); );
} }
if (issueData.Assignee) { if (issueData.Assignee) {
return ( return (
<> <SmallUserDisplay
<Avatar user={issueData.Assignee}
name={issueData.Assignee.name} className={className}
username={issueData.Assignee.username}
avatarURL={issueData.Assignee.avatarURL}
textClass="text-xs"
/> />
{issueData.Assignee.name}
</>
); );
} }
return null; return null;
@@ -126,23 +123,17 @@ export function IssueDetailPane({
<SelectItem value="unassigned">Unassigned</SelectItem> <SelectItem value="unassigned">Unassigned</SelectItem>
{members.map((member) => ( {members.map((member) => (
<SelectItem key={member.User.id} value={member.User.id.toString()}> <SelectItem key={member.User.id} value={member.User.id.toString()}>
<Avatar <SmallUserDisplay user={member.User} className="p-0" />
name={member.User.name}
username={member.User.username}
avatarURL={member.User.avatarURL}
textClass="text-xs"
/>
{member.User.name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
<div className="flex items-center gap-2 px-2 py-1 border-t text-sm text-muted-foreground"> <div className="flex items-center gap-2">
Created by: <span className="text-sm">Created by:</span>
<SmallUserDisplay user={issueData.Creator} /> <SmallUserDisplay user={issueData.Creator} className={"text-sm"} />
</div>
</div> </div>
</div> </div>
); );

5
packages/frontend/src/components/small-user-display.tsx
View File

@@ -1,9 +1,10 @@
import type { UserRecord } from "@issue/shared"; import type { UserRecord } from "@issue/shared";
import Avatar from "@/components/avatar"; import Avatar from "@/components/avatar";
import { cn } from "@/lib/utils";
export default function SmallUserDisplay({ user }: { user: UserRecord }) { export default function SmallUserDisplay({ user, className }: { user: UserRecord; className?: string }) {
return ( return (
<div className="flex gap-2 items-center"> <div className={cn("flex gap-2 items-center", className)}>
<Avatar <Avatar
name={user.name} name={user.name}
username={user.username} username={user.username}