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

avatar: new upload + remove avatar, and placeholder with colour and initials

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-03 11:25:39 +00:00
parent e62b12b1c3
commit 33da8bde85
10 changed files with 138 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
packages/frontend/src/components/avatar.tsx
View File

@@ -1,22 +1,76 @@
import type { UserRecord } from "@issue/shared";
import { UserRound } from "lucide-react";
export default function Avatar({ user, size }: { user?: UserRecord; size?: number }) {
if (user?.avatarURL) {
return (
<img
src={user.avatarURL}
alt="Avatar"
className={`rounded-full object-cover w-${size || 6} h-${size || 6}`}
/>
);
const FALLBACK_COLOURS = [
"bg-red-500",
"bg-orange-500",
"bg-amber-500",
"bg-yellow-500",
"bg-lime-500",
"bg-green-500",
"bg-emerald-500",
"bg-teal-500",
"bg-cyan-500",
"bg-sky-500",
"bg-blue-500",
"bg-indigo-500",
"bg-violet-500",
"bg-purple-500",
"bg-fuchsia-500",
"bg-pink-500",
"bg-rose-500",
];
function hashStringToIndex(value: string, modulo: number) {
let hash = 0;
for (let i = 0; i < value.length; i++) {
hash = (hash * 31 + value.charCodeAt(i)) >>> 0;
}
return modulo === 0 ? 0 : hash % modulo;
}
function getInitials(username: string) {
username = username.trim();
const parts = username.split(/[^a-zA-Z0-9]+/).filter(Boolean);
if (parts.length === 0) return username.slice(0, 2).toUpperCase();
if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
}
export default function Avatar({
avatarURL,
name,
username,
size,
textClass = "text-xs",
}: {
avatarURL?: string | null;
name?: string;
username?: string;
size?: number;
textClass?: string;
}) {
const backgroundClass = username
? FALLBACK_COLOURS[hashStringToIndex(username, FALLBACK_COLOURS.length)]
: "bg-muted";
return (
<div
className={`flex items-center justify-center rounded-full ${user && "border"} w-${size || 6} h-${size || 6}`}
className={`flex items-center justify-center rounded-full text-white font-medium select-none ${name && "border"} ${!avatarURL && backgroundClass} w-${size || 6} h-${size || 6}`}
>
{user && <UserRound size={size ? size * 2 + 2 : 14} />}
{avatarURL ? (
<img
src={avatarURL}
alt="Avatar"
className={`rounded-full object-cover w-${size || 6} h-${size || 6}`}
/>
) : name ? (
<span className={textClass}>{getInitials(name)}</span>
) : (
<UserRound size={size ? size * 2 + 2 : 14} />
)}
</div>
);
}

11
packages/frontend/src/components/issues-table.tsx
View File

@@ -50,8 +50,15 @@ export function IssuesTable({
<TableCell className="overflow-hide">{issueData.Issue.description}</TableCell>
)}
{(columns.assignee == null || columns.assignee === true) && (
<TableCell className={"flex items-center justify-end px-1 py-1"}>
<Avatar user={issueData.User} />
<TableCell className={"flex items-center justify-end px-1 py-0 h-[32px]"}>
{issueData.User && (
<Avatar
name={issueData.User?.name}
username={issueData.User?.username}
avatarURL={issueData.User?.avatarURL}
textClass="text-xs"
/>
)}
</TableCell>
)}
</TableRow>

2
packages/frontend/src/components/login-form.tsx
View File

@@ -129,6 +129,8 @@ export default function LogInForm() {
{mode === "register" && (
<>
<UploadAvatar
name={name}
username={username || undefined}
avatarURL={avatarURL}
onAvatarUploaded={setAvatarUrl}
className={"mt-2 mb-4"}

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

@@ -4,7 +4,13 @@ import Avatar from "@/components/avatar";
export default function SmallUserDisplay({ user }: { user: UserRecord }) {
return (
<div className="flex gap-2 items-center">
<Avatar user={user} size={6} />
<Avatar
name={user.name}
username={user.username}
avatarURL={user.avatarURL}
size={6}
textClass="text-xs"
/>
{user.name}
</div>
);

56
packages/frontend/src/components/upload-avatar.tsx
View File

@@ -4,13 +4,17 @@ import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { user } from "@/lib/server";
import { cn } from "@/lib/utils";
import Avatar from "./avatar";
export function UploadAvatar({
name,
username,
avatarURL,
onAvatarUploaded,
label,
className,
}: {
name?: string;
username?: string;
avatarURL?: string | null;
onAvatarUploaded: (avatarURL: string) => void;
label?: string;
@@ -43,23 +47,28 @@ export function UploadAvatar({
return (
<div className={cn("flex flex-col items-center gap-4", className)}>
{avatarURL && (
<Button
variant="dummy"
type="button"
onClick={() => fileInputRef.current?.click()}
onMouseOver={() => setShowEdit(true)}
onMouseOut={() => setShowEdit(false)}
className="w-24 h-24 rounded-full border-1 p-0 relative overflow-hidden"
>
<img src={avatarURL} alt="Avatar" className={cn("rounded-full")} />
{showEdit && (
<div className="absolute inset-0 flex items-center justify-center bg-black/40">
<Edit className="size-6 text-white drop-shadow-md" />
</div>
)}
</Button>
)}
<Button
variant="dummy"
type="button"
onClick={() => fileInputRef.current?.click()}
onMouseOver={() => setShowEdit(true)}
onMouseOut={() => setShowEdit(false)}
className="w-24 h-24 rounded-full border-1 p-0 relative overflow-hidden"
>
<Avatar
name={name}
username={username}
avatarURL={avatarURL}
size={24}
textClass={"text-4xl"}
/>
{!uploading && showEdit && (
<div className="absolute inset-0 flex items-center justify-center bg-black/40">
<Edit className="size-6 text-white drop-shadow-md" />
</div>
)}
</Button>
<input
type="file"
ref={fileInputRef}
@@ -67,17 +76,6 @@ export function UploadAvatar({
accept="image/png,image/jpeg,image/webp,image/gif"
className="hidden"
/>
{!avatarURL && (
<Button
variant="outline"
type="button"
onClick={() => fileInputRef.current?.click()}
disabled={uploading}
>
{uploading ? "Uploading..." : label || avatarURL ? "Change Avatar" : "Upload Avatar"}
</Button>
)}
{error && <Label className="text-destructive text-sm">{error}</Label>}
</div>
);