Add avatar in top bar

packages/frontend/src/FileReducer.ts

@@ -1,4 +1,5 @@
-import { mapProp, Update } from "@/hooks/useStore";
+import { mapProp } from "@/hooks/useStore";
+import { Update } from "common";
 import { getMediaTypeForFile } from "common/MediaType";
 
 export function FileReducer(prev: FileReducer.State, action: FileReducer.Action): FileReducer.State {

packages/frontend/src/components/ui/avatar.tsx

@@ -0,0 +1,48 @@
+import { cn } from "@/lib/utils";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+const Avatar = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+			className
+		)}
+		{...props}
+	/>
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn("aspect-square h-full w-full", className)}
+		{...props}
+	/>
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(
+			"flex h-full w-full items-center justify-center rounded-full bg-muted",
+			className
+		)}
+		{...props}
+	/>
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+;
+export { Avatar, AvatarFallback, AvatarImage };
+

packages/frontend/src/routes/Root.tsx

@@ -1,9 +1,10 @@
 import { API_URL_PREFIX, client } from "@/client";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { buttonVariants } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { setUser, useStore } from "@/hooks/useStore";
 import { Effect, Option, pipe } from "effect";
-import { LogOut, Settings, User } from "lucide-react";
+import { LogOut, Settings } from "lucide-react";
 import { useEffect } from "react";
 import { Link, Outlet, useNavigate } from "react-router-dom";
 
@@ -46,15 +47,15 @@ export function Root() {
 
 	return (
 		<div className="w-full h-full overflow-hidden flex flex-col items-stretch">
-			<div className="flex p-4 justify-between items-baseline border-b">
+			<div className="flex p-4 justify-between items-center border-b">
 				<Link className={buttonVariants({ variant: "outline" })} to="/">
 					Repozytorium muzyczne
 				</Link>
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
-						<Button type="button" variant="outline">
-							<User />{Option.getOrElse(user.displayName, () => user.userId)}
-						</Button>
+						<Avatar className="shadow">
+							<AvatarImage src={Option.getOrUndefined(user.avatarUrl)} />
+						</Avatar>
 					</DropdownMenuTrigger>
 					<DropdownMenuContent align="end">
 						<DropdownMenuItem asChild>