Function UserSettingsBar

frontend/src/components/user-settings-bar.tsx:35–128

({ isSimple }: UserSettingsProps)

 * @returns UserSettings JSX element.
 */
export const UserSettingsBar = ({ isSimple }: UserSettingsProps) => {
  const { user, isLoading, logout } = useAuthContext();
  const [open, setOpen] = useState(false);
  const router = useRouter();

  const handleLogout = useMemo(() => {
    return () => {
      router.push('/');
      // router.push('/login');
      logout();
    };
  }, [logout, router]);

  const avatarFallback = useMemo(() => {
    if (!user?.username) return 'US';
    return user.username.substring(0, 2).toUpperCase();
  }, [user?.username]);

  const displayUsername = useMemo(() => {
    if (isLoading) return 'Loading...';
    return user?.username || 'Anonymous';
  }, [isLoading, user?.username]);

  // Normalize the avatar URL
  const normalizedAvatarUrl = useMemo(() => {
    return normalizeAvatarUrl(user?.avatarUrl);
  }, [user?.avatarUrl]);

  const handleSettingsClick = () => {
    // First navigate using Next.js router
    router.push('/settings');

    // Then dispatch the event
    setTimeout(() => {
      const event = new Event(EventEnum.SETTING);
      window.dispatchEvent(event);
    }, 0);
  };

  const avatarButton = useMemo(() => {
    return (
      <Button
        size="setting"
        variant="ghost"
        className={`flex justify-start ${
          isSimple ? 'w-10 h-12 p-auto' : 'gap-2 w-full h-12 p-1'
        }`}
      >
        <SmallAvatar className="flex items-center justify-center">
          {/* Use normalized avatar URL */}
          <AvatarImage
            src={normalizedAvatarUrl}
            alt="User"
            key={user?.avatarUrl}
          />
          <AvatarFallback>{avatarFallback}</AvatarFallback>
        </SmallAvatar>
      </Button>