126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import type { ComponentProps, ReactNode } from "react";
|
|
import { Suspense, use, useEffect, useState } from "react";
|
|
import { Box, Loader, UnstyledButton, useMantineColorScheme } from "@mantine/core";
|
|
import { useHotkeys } from "@mantine/hooks";
|
|
import { ErrorBoundary } from "react-error-boundary";
|
|
|
|
import { clientApi } from "@homarr/api/client";
|
|
import { useSession } from "@homarr/auth/client";
|
|
import { hotkeys } from "@homarr/definitions";
|
|
|
|
import { UpdateIndicator } from "./update";
|
|
|
|
type UserAvatarMenuModule = typeof import("~/components/user-avatar-menu");
|
|
type UserAvatarMenuProps = ComponentProps<UserAvatarMenuModule["UserAvatarMenu"]>;
|
|
|
|
let userAvatarMenuPromise: Promise<UserAvatarMenuModule> | undefined;
|
|
const loadUserAvatarMenu = () => {
|
|
if (userAvatarMenuPromise) return userAvatarMenuPromise;
|
|
|
|
const promise = import("~/components/user-avatar-menu");
|
|
userAvatarMenuPromise = promise;
|
|
void promise.catch(() => {
|
|
if (userAvatarMenuPromise === promise) userAvatarMenuPromise = undefined;
|
|
});
|
|
return promise;
|
|
};
|
|
const preloadUserAvatarMenu = () => void loadUserAvatarMenu().catch(() => undefined);
|
|
|
|
const LazyUserAvatarMenu = (props: UserAvatarMenuProps) => {
|
|
const { UserAvatarMenu } = use(loadUserAvatarMenu());
|
|
return <UserAvatarMenu {...props} />;
|
|
};
|
|
|
|
interface UserButtonClientProps {
|
|
avatar: ReactNode;
|
|
isAdmin: boolean;
|
|
isDockerEnabled: boolean;
|
|
}
|
|
|
|
export const UserButtonClient = ({ avatar, isAdmin, isDockerEnabled }: UserButtonClientProps) => {
|
|
const [canCheckForUpdates, setCanCheckForUpdates] = useState(false);
|
|
const [isMenuMounted, setIsMenuMounted] = useState(false);
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const session = useSession();
|
|
const { toggleColorScheme } = useMantineColorScheme();
|
|
useHotkeys([[hotkeys.toggleColorScheme, toggleColorScheme]]);
|
|
const isCurrentSessionAdmin =
|
|
isAdmin && session.status === "authenticated" && session.data.user.permissions.includes("admin");
|
|
|
|
useEffect(() => {
|
|
if (!isCurrentSessionAdmin) {
|
|
setCanCheckForUpdates(false);
|
|
return;
|
|
}
|
|
|
|
const timeout = window.setTimeout(() => setCanCheckForUpdates(true), 2_000);
|
|
return () => window.clearTimeout(timeout);
|
|
}, [isCurrentSessionAdmin]);
|
|
|
|
const { data: availableUpdates } = clientApi.updateChecker.getAvailableUpdates.useQuery(undefined, {
|
|
enabled: canCheckForUpdates,
|
|
refetchOnWindowFocus: false,
|
|
retry: false,
|
|
staleTime: 60 * 60 * 1_000,
|
|
});
|
|
const visibleUpdates = isCurrentSessionAdmin ? availableUpdates : undefined;
|
|
const openMenu = () => {
|
|
setIsMenuMounted(true);
|
|
setIsMenuOpen(true);
|
|
};
|
|
const renderButton = (onClick: () => void, isLoading = false) => (
|
|
<UnstyledButton
|
|
onClick={onClick}
|
|
onFocus={preloadUserAvatarMenu}
|
|
onMouseEnter={preloadUserAvatarMenu}
|
|
onPointerDown={preloadUserAvatarMenu}
|
|
aria-busy={isLoading || undefined}
|
|
disabled={isLoading}
|
|
>
|
|
<UpdateIndicator availableUpdates={visibleUpdates} disabled={!isCurrentSessionAdmin}>
|
|
<Box pos="relative" style={{ display: "inline-flex" }}>
|
|
<Box opacity={isLoading ? 0.35 : 1}>{avatar}</Box>
|
|
{isLoading && (
|
|
<Loader
|
|
aria-label="Loading user menu"
|
|
size={18}
|
|
pos="absolute"
|
|
top="50%"
|
|
left="50%"
|
|
style={{ transform: "translate(-50%, -50%)" }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</UpdateIndicator>
|
|
</UnstyledButton>
|
|
);
|
|
const button = renderButton(openMenu);
|
|
const loadingButton = renderButton(() => undefined, true);
|
|
|
|
if (!isMenuMounted) return button;
|
|
|
|
return (
|
|
<ErrorBoundary
|
|
fallbackRender={({ resetErrorBoundary }) =>
|
|
renderButton(() => {
|
|
resetErrorBoundary();
|
|
openMenu();
|
|
})
|
|
}
|
|
>
|
|
<Suspense fallback={loadingButton}>
|
|
<LazyUserAvatarMenu
|
|
availableUpdates={visibleUpdates}
|
|
isDockerEnabled={isDockerEnabled}
|
|
opened={isMenuOpen}
|
|
onOpenChange={setIsMenuOpen}
|
|
>
|
|
{button}
|
|
</LazyUserAvatarMenu>
|
|
</Suspense>
|
|
</ErrorBoundary>
|
|
);
|
|
};
|