79 lines
3.3 KiB
TypeScript
79 lines
3.3 KiB
TypeScript
import { PhoneMissed, Signal } from "lucide-react";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import { useServerChannelsStore } from "~/stores/server-channels-store";
|
|
import { useServerListStore } from "~/stores/server-list-store";
|
|
import { useUsersStore } from "~/stores/users-store";
|
|
import { useVoiceStateStore } from "~/stores/voice-state-store";
|
|
import { ThemeToggle } from "../theme/theme-toggle";
|
|
import { Button } from "../ui/button";
|
|
import { Separator } from "../ui/separator";
|
|
import UserAvatar from "../user-avatar";
|
|
import { OnlineStatus } from "./online-status";
|
|
import { SettingsButton } from "./settings-button";
|
|
|
|
function VoiceStatus({ voiceState }: { voiceState: { serverId: string; channelId: string } }) {
|
|
const leaveVoiceChannel = () => {
|
|
useVoiceStateStore.getState().leaveVoiceChannel();
|
|
};
|
|
|
|
const channel = useServerChannelsStore(
|
|
useShallow((state) => state.channels[voiceState.serverId]?.[voiceState.channelId]),
|
|
);
|
|
const server = useServerListStore(useShallow((state) => state.servers[voiceState.serverId]));
|
|
|
|
return (
|
|
<div className="gap-1 flex justify-between items-center ">
|
|
<div className="flex items-center gap-2 text-green-500">
|
|
<Signal className="size-5" />
|
|
<div className="truncate max-w-60 text-sm">
|
|
{channel?.name || "Unknown channel"} / {server?.name}
|
|
</div>
|
|
</div>
|
|
|
|
<Button variant="destructive" size="icon" onClick={leaveVoiceChannel}>
|
|
<PhoneMissed className="size-5" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function UserStatus() {
|
|
const user = useUsersStore((state) => state.getCurrentUser()!);
|
|
const voiceState = useVoiceStateStore((state) => state.activeChannel);
|
|
|
|
return (
|
|
<div className="outline-1 outline-none border border-input p-2 h-full rounded-xl flex flex-col gap-2 shadow-sm">
|
|
{voiceState && (
|
|
<>
|
|
<VoiceStatus voiceState={voiceState} />
|
|
<Separator />
|
|
</>
|
|
)}
|
|
<div className="flex justify-between items-center gap-2">
|
|
<div className="grow flex flex-row gap-2">
|
|
<OnlineStatus status="online">
|
|
<UserAvatar user={user} className="size-10" />
|
|
</OnlineStatus>
|
|
|
|
<div className="flex flex-col text-sm justify-center">
|
|
<div className="truncate max-w-30">{user?.displayName || user?.username || "Unknown user"}</div>
|
|
<span className="text-muted-foreground text-xs">@{user?.username}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="flex flex-row-reverse gap-2 items-center">
|
|
<SettingsButton />
|
|
<ThemeToggle />
|
|
{/* <Button variant="secondary" size="none">
|
|
<Headphones className="size-5 m-1.5" />
|
|
</Button> */}
|
|
{/* <Button variant="secondary" size="none">
|
|
<Mic className="size-5 m-1.5" />
|
|
</Button> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|