feat: add AccountDialog component with user profile display

- Introduced AccountDialog component for displaying user account information.
- Implemented loading and error states for user profile data retrieval.
- Added styles in AccountDialog.scss for layout and visual presentation of the dialog.
- Integrated Gravatar for user avatars based on email.

Author: atyrode

src/frontend/src/ui/AccountDialog.scss

@@ -0,0 +1,105 @@
+.account-dialog {
+  
+  &__wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    background-color: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(1px);
+  }
+
+  &__title-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+
+  &__content {
+    padding: 1rem;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__loading, &__error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    font-size: 1rem;
+    color: var(--text-primary-color);
+  }
+
+  &__error {
+    color: #e74c3c;
+  }
+
+  &__profile {
+    display: flex;
+    align-items: flex-start;
+    padding: 1.25rem;
+    border-radius: 8px;
+    background-color: var(--dialog-bg-color);
+  }
+
+  &__avatar {
+    margin-right: 1.25rem;
+  }
+
+  &__gravatar {
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--text-primary-color);
+  }
+
+  &__user-info {
+    flex: 1;
+  }
+
+  &__name {
+    margin: 0 0 0 0;
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: var(--text-primary-color);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  &__username {
+    margin: 0 0 1.5rem 0;
+    font-size: 0.95rem;
+    color: var(--text-secondary-color);
+  }
+  
+  &__user-id {
+    margin: 0;
+    font-size: 0.75rem;
+    font-family: monospace;
+    color: var(--text-secondary-color);
+    opacity: 0.7;
+  }
+
+  &__verified {
+    font-size: 0.75rem;
+    color: #2ecc71;
+    background-color: rgba(46, 204, 113, 0.1);
+    padding: 0.15rem 0.4rem;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+}

src/frontend/src/ui/AccountDialog.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useCallback } from "react";
+import { Dialog } from "@atyrode/excalidraw";
+import { useUserProfile } from "../api/hooks";
+import md5 from 'crypto-js/md5';
+import "./AccountDialog.scss";
+
+interface AccountDialogProps {
+  excalidrawAPI?: any;
+  onClose?: () => void;
+}
+
+// Function to generate gravatar URL
+const getGravatarUrl = (email: string, size = 100) => {
+  const hash = md5(email.toLowerCase().trim()).toString();
+  return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=identicon`;
+};
+
+const AccountDialog: React.FC<AccountDialogProps> = ({
+  excalidrawAPI,
+  onClose,
+}) => {
+  const [modalIsShown, setModalIsShown] = useState(true);
+  const { data: profile, isLoading, isError } = useUserProfile();
+
+  const handleClose = useCallback(() => {
+    setModalIsShown(false);
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  // Dialog content with user profile information
+  const dialogContent = (
+    <div className="account-dialog__content">
+      {isLoading && (
+        <div className="account-dialog__loading">
+          Loading account information...
+        </div>
+      )}
+      
+      {isError && (
+        <div className="account-dialog__error">
+          Error loading account information. Please try again later.
+        </div>
+      )}
+      
+      {profile && !isLoading && !isError && (
+        <div className="account-dialog__profile">
+          <div className="account-dialog__avatar">
+            <img 
+              src={getGravatarUrl(profile.email)} 
+              alt={profile.username} 
+              className="account-dialog__gravatar" 
+            />
+          </div>
+          <div className="account-dialog__user-info">
+            <h2 className="account-dialog__name">
+              {profile.name || profile.username}
+              {profile.email_verified && (
+                <span className="account-dialog__verified">✓ Verified</span>
+              )}
+            </h2>
+            <p className="account-dialog__username">{profile.username}</p>
+            <p className="account-dialog__user-id">{profile.id}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      {modalIsShown && (
+        <div className="account-dialog__wrapper">
+          <Dialog
+            className="account-dialog"
+            size="small"
+            onCloseRequest={handleClose}
+            title={
+              <div className="account-dialog__title-container">
+                <h2 className="account-dialog__title">Account</h2>
+              </div>
+            }
+            closeOnClickOutside={true}
+            children={dialogContent}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AccountDialog;