feat(history): establish Telegram SaaS platform foundation

src/components/ui/avatar.tsx

@@ -3,11 +3,13 @@ import { colorFromString, initials } from '@/utils/misc'
 
 export function Avatar({
   name,
+  src,
   size = 'md',
   className,
   online,
 }: {
   name: string
+  src?: string
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   className?: string
   online?: boolean
@@ -28,7 +30,18 @@ export function Avatar({
           colorFromString(name || '?'),
         )}
       >
-        {initials(name)}
+        {src ? (
+          <img
+            src={src}
+            alt={name}
+            className="h-full w-full rounded-full object-cover"
+            onError={(event) => {
+              event.currentTarget.style.display = 'none'
+              event.currentTarget.nextElementSibling?.classList.remove('hidden')
+            }}
+          />
+        ) : null}
+        <span className={cn(src && 'hidden')}>{initials(name)}</span>
       </span>
       {online !== undefined && (
         <span