client: updates

* work on groups ui
* move settings to its own page
* other fixes and refactoring

apps/client/src/components/ui/user-avatar.tsx

@@ -1,37 +1,32 @@
-import React from 'react';
-import { Avatar } from '@mantine/core';
+import React from "react";
+import { Avatar } from "@mantine/core";
 
 interface UserAvatarProps {
   avatarUrl: string;
   name: string;
   color?: string;
-  size?: string;
-  radius?: string;
+  size?: string | number;
+  radius?: string | number;
   style?: any;
   component?: any;
 }
 
 export const UserAvatar = React.forwardRef<HTMLInputElement, UserAvatarProps>(
   ({ avatarUrl, name, ...props }: UserAvatarProps, ref) => {
-
     const getInitials = (name: string) => {
-      const names = name?.split(' ');
-      return names?.slice(0, 2).map(n => n[0]).join('');
+      const names = name?.split(" ");
+      return names
+        ?.slice(0, 2)
+        .map((n) => n[0])
+        .join("");
     };
 
-    return (
-      avatarUrl ? (
-        <Avatar
-          ref={ref}
-          src={avatarUrl}
-          alt={name}
-          radius="xl"
-          {...props}
-        />
-      ) : (
-        <Avatar ref={ref}
-                {...props}>{getInitials(name)}</Avatar>
-      )
+    return avatarUrl ? (
+      <Avatar ref={ref} src={avatarUrl} alt={name} radius="xl" {...props} />
+    ) : (
+      <Avatar ref={ref} {...props}>
+        {getInitials(name)}
+      </Avatar>
     );
   },
 );