massive UploadAvatar improvements

packages/frontend/src/Account.tsx

@@ -57,11 +57,8 @@ function Account() {
     return (
         <SettingsPageLayout title="Account">
             <form onSubmit={handleSubmit} className="flex flex-col p-4 gap-2 w-sm border">
-                <h2 className="text-xl font-600 mb-2">Account Details</h2>
+                <h2 className="text-xl font-600 mb-2 text-center">Account Details</h2>
-                <div>
+                <UploadAvatar avatarURL={avatarURL} onAvatarUploaded={setAvatarUrl} />
-                    <Label className="mb-4 block">Avatar</Label>
-                    <UploadAvatar avatarURL={avatarURL} onAvatarUploaded={setAvatarUrl} />
-                </div>
                 <Field
                     label="Full Name"
                     value={name}

packages/frontend/src/components/organisation-select.tsx

@@ -5,7 +5,9 @@ import { Button } from "@/components/ui/button";
 import {
     Select,
     SelectContent,
+    SelectGroup,
     SelectItem,
+    SelectLabel,
     SelectSeparator,
     SelectTrigger,
     SelectValue,
@@ -40,20 +42,23 @@ export function OrganisationSelect({
             onOpenChange={setOpen}
         >
             <SelectTrigger className="text-sm" isOpen={open}>
-                <SelectValue
+                <SelectValue placeholder={placeholder} />
-                    placeholder={
-                        selectedOrganisation ? `O: ${selectedOrganisation.Organisation.name}` : placeholder
-                    }
-                />
             </SelectTrigger>
             <SelectContent side="bottom" position="popper">
-                {organisations.map((organisation) => (
+                <SelectGroup>
-                    <SelectItem key={organisation.Organisation.id} value={`${organisation.Organisation.id}`}>
+                    <SelectLabel>Organisations</SelectLabel>
-                        {organisation.Organisation.name}
+                    {organisations.map((organisation) => (
-                    </SelectItem>
+                        <SelectItem
-                ))}
+                            key={organisation.Organisation.id}
+                            value={`${organisation.Organisation.id}`}
+                        >
+                            {organisation.Organisation.name}
+                        </SelectItem>
+                    ))}
+
+                    {organisations.length > 0 && <SelectSeparator />}
+                </SelectGroup>
 
-                {organisations.length > 0 && <SelectSeparator />}
                 <CreateOrganisation
                     trigger={
                         <Button variant="ghost" className={"w-full"} size={"sm"}>

packages/frontend/src/components/project-select.tsx

@@ -5,7 +5,9 @@ import { Button } from "@/components/ui/button";
 import {
     Select,
     SelectContent,
+    SelectGroup,
     SelectItem,
+    SelectLabel,
     SelectSeparator,
     SelectTrigger,
     SelectValue,
@@ -42,17 +44,18 @@ export function ProjectSelect({
             onOpenChange={setOpen}
         >
             <SelectTrigger className="text-sm" isOpen={open}>
-                <SelectValue
+                <SelectValue placeholder={placeholder} />
-                    placeholder={selectedProject ? `P: ${selectedProject.Project.name}` : placeholder}
-                />
             </SelectTrigger>
             <SelectContent side="bottom" position="popper" align={"start"}>
-                {projects.map((project) => (
+                <SelectGroup>
-                    <SelectItem key={project.Project.id} value={`${project.Project.id}`}>
+                    <SelectLabel>Projects</SelectLabel>
-                        {project.Project.name}
+                    {projects.map((project) => (
-                    </SelectItem>
+                        <SelectItem key={project.Project.id} value={`${project.Project.id}`}>
-                ))}
+                            {project.Project.name}
-                {projects.length > 0 && <SelectSeparator />}
+                        </SelectItem>
+                    ))}
+                    {projects.length > 0 && <SelectSeparator />}
+                </SelectGroup>
                 <CreateProject
                     organisationId={organisationId}
                     trigger={

packages/frontend/src/components/upload-avatar.tsx

@@ -1,3 +1,4 @@
+import { Edit } from "lucide-react";
 import { useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
@@ -18,6 +19,7 @@ export function UploadAvatar({
     const [uploading, setUploading] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const [showEdit, setShowEdit] = useState(false);
 
     const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0];
@@ -40,9 +42,23 @@ export function UploadAvatar({
     };
 
     return (
-        <div className={cn("flex items-center gap-4", className)}>
+        <div className={cn("flex flex-col items-center gap-4", className)}>
             {avatarURL && (
-                <img src={avatarURL} alt="Avatar" className="w-16 h-16 rounded-full border object-cover" />
+                <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>
             )}
             <input
                 type="file"
@@ -51,14 +67,17 @@ export function UploadAvatar({
                 accept="image/png,image/jpeg,image/webp,image/gif"
                 className="hidden"
             />
-            <Button
+
-                variant="outline"
+            {!avatarURL && (
-                type="button"
+                <Button
-                onClick={() => fileInputRef.current?.click()}
+                    variant="outline"
-                disabled={uploading}
+                    type="button"
-            >
+                    onClick={() => fileInputRef.current?.click()}
-                {uploading ? "Uploading..." : label || avatarURL ? "Change Avatar" : "Upload Avatar"}
+                    disabled={uploading}
-            </Button>
+                >
+                    {uploading ? "Uploading..." : label || avatarURL ? "Change Avatar" : "Upload Avatar"}
+                </Button>
+            )}
             {error && <Label className="text-destructive text-sm">{error}</Label>}
         </div>
     );