57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { useEffect, useState } from "react";
|
|
import { UnstyledButton, useMantineColorScheme } from "@mantine/core";
|
|
import { useHotkeys } from "@mantine/hooks";
|
|
|
|
import { clientApi } from "@homarr/api/client";
|
|
import { useSession } from "@homarr/auth/client";
|
|
import { hotkeys } from "@homarr/definitions";
|
|
|
|
import { UserAvatarMenu } from "~/components/user-avatar-menu";
|
|
import { UpdateIndicator } from "./update";
|
|
|
|
interface UserButtonClientProps {
|
|
avatar: ReactNode;
|
|
isAdmin: boolean;
|
|
isDockerEnabled: boolean;
|
|
}
|
|
|
|
export const UserButtonClient = ({ avatar, isAdmin, isDockerEnabled }: UserButtonClientProps) => {
|
|
const [canCheckForUpdates, setCanCheckForUpdates] = 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;
|
|
|
|
return (
|
|
<UserAvatarMenu availableUpdates={visibleUpdates} isDockerEnabled={isDockerEnabled}>
|
|
<UnstyledButton>
|
|
<UpdateIndicator availableUpdates={visibleUpdates} disabled={!isCurrentSessionAdmin}>
|
|
{avatar}
|
|
</UpdateIndicator>
|
|
</UnstyledButton>
|
|
</UserAvatarMenu>
|
|
);
|
|
};
|