From 9148c1f320b74d185d208c4a77edf8807b8dfe51 Mon Sep 17 00:00:00 2001 From: Szymon Nowakowski Date: Fri, 10 Oct 2025 15:38:05 +0200 Subject: [PATCH] Add avatar in top bar --- packages/frontend/src/FileReducer.ts | 3 +- .../frontend/src/components/ui/avatar.tsx | 48 ++++++++++++++++ packages/frontend/src/routes/Root.tsx | 13 +++-- pnpm-lock.yaml | 57 +++++++++++++++++++ pnpm-workspace.yaml | 1 + 5 files changed, 115 insertions(+), 7 deletions(-) create mode 100644 packages/frontend/src/components/ui/avatar.tsx diff --git a/packages/frontend/src/FileReducer.ts b/packages/frontend/src/FileReducer.ts index 6811cfe..ee4811d 100644 --- a/packages/frontend/src/FileReducer.ts +++ b/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 { diff --git a/packages/frontend/src/components/ui/avatar.tsx b/packages/frontend/src/components/ui/avatar.tsx new file mode 100644 index 0000000..afe9560 --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +Avatar.displayName = AvatarPrimitive.Root.displayName; + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarImage.displayName = AvatarPrimitive.Image.displayName; + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; +; +export { Avatar, AvatarFallback, AvatarImage }; + diff --git a/packages/frontend/src/routes/Root.tsx b/packages/frontend/src/routes/Root.tsx index 707a6ac..b1032d8 100644 --- a/packages/frontend/src/routes/Root.tsx +++ b/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 (
-
+
Repozytorium muzyczne - + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bb75d1d..49bc14b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,6 +12,9 @@ catalogs: '@eslint/js': specifier: ^9.37.0 version: 9.37.0 + '@radix-ui/react-avatar': + specifier: ^1.1.10 + version: 1.1.10 '@radix-ui/react-dialog': specifier: ^1.1.15 version: 1.1.15 @@ -169,6 +172,9 @@ importers: packages/frontend: dependencies: + '@radix-ui/react-avatar': + specifier: 'catalog:' + version: 1.1.10(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) '@radix-ui/react-dialog': specifier: 'catalog:' version: 1.1.15(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) @@ -718,6 +724,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-avatar@1.1.10': + resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-collection@1.1.7': resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==} peerDependencies: @@ -964,6 +983,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-use-is-hydrated@0.1.0': + resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-use-layout-effect@1.1.1': resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==} peerDependencies: @@ -2502,6 +2530,11 @@ packages: '@types/react': optional: true + use-sync-external-store@1.6.0: + resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -3086,6 +3119,19 @@ snapshots: '@types/react': 19.2.2 '@types/react-dom': 19.2.1(@types/react@19.2.2) + '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)': + dependencies: + '@radix-ui/react-context': 1.1.2(@types/react@19.2.2)(react@19.2.0) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.2)(react@19.2.0) + '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.2)(react@19.2.0) + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.2)(react@19.2.0) + react: 19.2.0 + react-dom: 19.2.0(react@19.2.0) + optionalDependencies: + '@types/react': 19.2.2 + '@types/react-dom': 19.2.1(@types/react@19.2.2) + '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)': dependencies: '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.2)(react@19.2.0) @@ -3324,6 +3370,13 @@ snapshots: optionalDependencies: '@types/react': 19.2.2 + '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.2.2)(react@19.2.0)': + dependencies: + react: 19.2.0 + use-sync-external-store: 1.6.0(react@19.2.0) + optionalDependencies: + '@types/react': 19.2.2 + '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.2)(react@19.2.0)': dependencies: react: 19.2.0 @@ -4977,6 +5030,10 @@ snapshots: optionalDependencies: '@types/react': 19.2.2 + use-sync-external-store@1.6.0(react@19.2.0): + dependencies: + react: 19.2.0 + util-deprecate@1.0.2: {} vexflow@1.2.93: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 4623699..d42dc6e 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -12,6 +12,7 @@ onlyBuiltDependencies: catalog: '@effect/language-service': '^0.21.8' '@eslint/js': '^9.37.0' + '@radix-ui/react-avatar': '^1.1.10' '@radix-ui/react-dialog': '^1.1.15' '@radix-ui/react-dropdown-menu': '^2.1.16' '@radix-ui/react-label': '^2.1.7'