mirror of
https://github.com/netbirdio/netbird.git
synced 2026-05-20 23:59:55 +00:00
366 lines
16 KiB
TypeScript
366 lines
16 KiB
TypeScript
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import * as Popover from "@radix-ui/react-popover";
|
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
|
import * as ScrollArea from "@radix-ui/react-scroll-area";
|
|
import { Command } from "cmdk";
|
|
import { Dialogs } from "@wailsio/runtime";
|
|
import { ChevronDown, MoreVertical, PlusCircle, Search, Trash2, UserMinus } from "lucide-react";
|
|
import type { Profile } from "@bindings/services/models.js";
|
|
import { cn } from "@/lib/cn";
|
|
import { generateColorFromString } from "@/lib/color";
|
|
import { NewProfileModal } from "@/components/NewProfileModal";
|
|
import { useProfile } from "@/modules/profile/ProfileContext.tsx";
|
|
|
|
const DEFAULT_PROFILE = "default";
|
|
|
|
export const ProfileSelector = () => {
|
|
const { t } = useTranslation();
|
|
const {
|
|
profiles,
|
|
activeProfile,
|
|
loaded,
|
|
switchProfile,
|
|
addProfile,
|
|
removeProfile,
|
|
logoutProfile,
|
|
} = useProfile();
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [newOpen, setNewOpen] = useState(false);
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
const selected =
|
|
profiles.find((p) => p.name === activeProfile) ??
|
|
profiles.find((p) => p.isActive) ??
|
|
profiles[0];
|
|
|
|
const sorted = [...profiles].sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
const guarded = async (title: string, fn: () => Promise<void>) => {
|
|
if (busy) return;
|
|
setBusy(true);
|
|
try {
|
|
await fn();
|
|
} catch (e) {
|
|
await Dialogs.Error({
|
|
Title: title,
|
|
Message: e instanceof Error ? e.message : String(e),
|
|
});
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
const handleSelect = (name: string) => {
|
|
setOpen(false);
|
|
if (name === activeProfile) return;
|
|
void guarded(t("profile.error.switchTitle"), () => switchProfile(name));
|
|
};
|
|
|
|
const handleDeregister = async (name: string) => {
|
|
const cancelLabel = t("common.cancel");
|
|
const confirmLabel = t("profile.deregister.confirm");
|
|
const result = await Dialogs.Warning({
|
|
Title: t("profile.deregister.title"),
|
|
Message: t("profile.deregister.message", { name }),
|
|
Buttons: [
|
|
{ Label: cancelLabel, IsCancel: true },
|
|
{ Label: confirmLabel, IsDefault: true },
|
|
],
|
|
});
|
|
if (result !== confirmLabel) return;
|
|
void guarded(t("profile.error.deregisterTitle"), () => logoutProfile(name));
|
|
};
|
|
|
|
const handleDelete = async (name: string) => {
|
|
if (name === DEFAULT_PROFILE) return;
|
|
const cancelLabel = t("common.cancel");
|
|
const confirmLabel = t("common.delete");
|
|
const result = await Dialogs.Warning({
|
|
Title: t("profile.delete.title"),
|
|
Message: t("profile.delete.message", { name }),
|
|
Buttons: [
|
|
{ Label: cancelLabel, IsCancel: true },
|
|
{ Label: confirmLabel, IsDefault: true },
|
|
],
|
|
});
|
|
if (result !== confirmLabel) return;
|
|
void guarded(t("profile.error.deleteTitle"), () => removeProfile(name));
|
|
};
|
|
|
|
const handleNewProfile = () => {
|
|
setOpen(false);
|
|
setNewOpen(true);
|
|
};
|
|
|
|
const handleCreateProfile = (name: string) => {
|
|
void guarded(t("profile.error.createTitle"), () => addProfile(name));
|
|
};
|
|
|
|
const displayName =
|
|
selected?.name ??
|
|
(loaded ? t("profile.selector.noProfile") : t("profile.selector.loading"));
|
|
const initial = (selected?.name ?? "?").charAt(0).toUpperCase();
|
|
const initialColor = generateColorFromString(selected?.name);
|
|
|
|
return (
|
|
<>
|
|
<Popover.Root open={open} onOpenChange={setOpen}>
|
|
<Popover.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
className={
|
|
"h-11 rounded-md text-nb-gray-300 flex items-center gap-1 text-xs hover:bg-nb-gray-930 data-[state=open]:bg-nb-gray-930 px-2 -mx-1 outline-none cursor-default transition-colors duration-150"
|
|
}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"flex items-center justify-center bg-nb-gray-900 rounded-md text-xs font-semibold h-6 w-6",
|
|
)}
|
|
style={{ color: initialColor }}
|
|
>
|
|
{initial}
|
|
</div>
|
|
<div
|
|
className={
|
|
"whitespace-nowrap flex flex-col ml-1 text-left justify-center"
|
|
}
|
|
>
|
|
<span className={"leading-none text-nb-gray-200 font-semibold"}>
|
|
{displayName}
|
|
</span>
|
|
</div>
|
|
<ChevronDown size={14} className={"ml-2 mr-2"} />
|
|
</button>
|
|
</Popover.Trigger>
|
|
|
|
<Popover.Portal>
|
|
<Popover.Content
|
|
align="end"
|
|
sideOffset={6}
|
|
className={cn(
|
|
"w-72 rounded-md border border-nb-gray-900 bg-nb-gray-930 shadow-lg",
|
|
"p-1 z-50 origin-[var(--radix-popover-content-transform-origin)]",
|
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
|
|
"data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
|
|
"data-[side=bottom]:slide-in-from-top-1",
|
|
"data-[side=top]:slide-in-from-bottom-1",
|
|
"duration-150 ease-out",
|
|
)}
|
|
onCloseAutoFocus={(e) => e.preventDefault()}
|
|
>
|
|
<Command
|
|
loop
|
|
className={cn(
|
|
"flex flex-col",
|
|
"[&_[cmdk-input-wrapper]]:flex [&_[cmdk-input-wrapper]]:items-center",
|
|
)}
|
|
>
|
|
<div className="px-1 pb-1">
|
|
<div className="group flex items-center gap-2 px-2 h-8">
|
|
<Search size={12} className="text-nb-gray-300 shrink-0" />
|
|
<Command.Input
|
|
autoFocus
|
|
placeholder={t("profile.selector.searchPlaceholder")}
|
|
className={cn(
|
|
"w-full bg-transparent text-xs text-nb-gray-200 placeholder:text-nb-gray-400",
|
|
"outline-none border-none",
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<ScrollArea.Root type="auto" className="overflow-hidden -mx-1">
|
|
<ScrollArea.Viewport className="max-h-64 px-1 pb-1">
|
|
<Command.List>
|
|
<Command.Empty>
|
|
<div className="flex flex-col items-center text-center px-4 pt-2 pb-3">
|
|
<h3 className="text-xs font-semibold text-nb-gray-200">
|
|
{t("profile.selector.emptyTitle")}
|
|
</h3>
|
|
<p className="text-[0.7rem] leading-snug text-nb-gray-400 mt-1 text-balance">
|
|
{t("profile.selector.emptyDescription")}
|
|
</p>
|
|
</div>
|
|
</Command.Empty>
|
|
|
|
{sorted.map((profile) => (
|
|
<ProfileRow
|
|
key={profile.name}
|
|
profile={profile}
|
|
selected={profile.name === activeProfile}
|
|
onSelect={() => handleSelect(profile.name)}
|
|
onDeregister={() => handleDeregister(profile.name)}
|
|
onDelete={() => handleDelete(profile.name)}
|
|
deletable={profile.name !== DEFAULT_PROFILE}
|
|
/>
|
|
))}
|
|
</Command.List>
|
|
</ScrollArea.Viewport>
|
|
<ScrollArea.Scrollbar
|
|
orientation="vertical"
|
|
className={cn(
|
|
"flex select-none touch-none transition-colors",
|
|
"w-1.5 bg-transparent py-1",
|
|
)}
|
|
>
|
|
<ScrollArea.Thumb className="flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700 relative" />
|
|
</ScrollArea.Scrollbar>
|
|
</ScrollArea.Root>
|
|
|
|
<div className="h-px bg-nb-gray-920 -mx-1 my-1" />
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleNewProfile}
|
|
className={cn(
|
|
"w-full flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-md cursor-default outline-none",
|
|
"text-netbird hover:bg-nb-gray-910",
|
|
)}
|
|
>
|
|
<div
|
|
className={
|
|
"h-6 w-6 flex items-center justify-center rounded-md bg-nb-gray-900 shrink-0"
|
|
}
|
|
>
|
|
<PlusCircle size={12} className="text-netbird" />
|
|
</div>
|
|
<span className="text-xs font-semibold">{t("profile.selector.newProfile")}</span>
|
|
</button>
|
|
</Command>
|
|
</Popover.Content>
|
|
</Popover.Portal>
|
|
</Popover.Root>
|
|
<NewProfileModal
|
|
open={newOpen}
|
|
onOpenChange={setNewOpen}
|
|
onCreate={handleCreateProfile}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
type ProfileRowProps = {
|
|
profile: Profile;
|
|
selected: boolean;
|
|
onSelect: () => void;
|
|
onDeregister: () => void;
|
|
onDelete: () => void;
|
|
deletable: boolean;
|
|
};
|
|
|
|
const ProfileRow = ({
|
|
profile,
|
|
selected,
|
|
onSelect,
|
|
onDeregister,
|
|
onDelete,
|
|
deletable,
|
|
}: ProfileRowProps) => {
|
|
const { t } = useTranslation();
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const initial = profile.name.charAt(0).toUpperCase();
|
|
const initialColor = generateColorFromString(profile.name);
|
|
|
|
return (
|
|
<Command.Item
|
|
value={profile.name}
|
|
onSelect={() => onSelect()}
|
|
className={cn(
|
|
"group flex items-center gap-2 pl-2 pr-3 py-1.5 rounded-md cursor-default outline-none",
|
|
"data-[selected=true]:bg-nb-gray-910",
|
|
selected && "bg-nb-gray-910",
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"h-6 w-6 flex items-center justify-center rounded-md text-[0.65rem] font-semibold shrink-0 bg-nb-gray-900",
|
|
"group-data-[selected=true]:bg-nb-gray-850",
|
|
selected && "bg-nb-gray-850",
|
|
)}
|
|
style={{ color: initialColor }}
|
|
>
|
|
{initial}
|
|
</div>
|
|
<span
|
|
className={cn(
|
|
"flex-1 truncate text-xs",
|
|
selected ? "text-nb-gray-200 font-semibold" : "text-nb-gray-200",
|
|
)}
|
|
>
|
|
{profile.name}
|
|
</span>
|
|
|
|
<DropdownMenu.Root open={menuOpen} onOpenChange={setMenuOpen} modal={false}>
|
|
<DropdownMenu.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
onKeyDown={(e) => e.stopPropagation()}
|
|
className={cn(
|
|
"h-6 w-6 flex items-center justify-center rounded text-nb-gray-400 cursor-default",
|
|
"hover:bg-nb-gray-800 hover:text-nb-gray-200 outline-none",
|
|
"data-[state=open]:bg-nb-gray-800 data-[state=open]:text-nb-gray-200",
|
|
)}
|
|
aria-label={t("profile.selector.moreOptions")}
|
|
>
|
|
<MoreVertical size={14} />
|
|
</button>
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Portal>
|
|
<DropdownMenu.Content
|
|
side="bottom"
|
|
align="end"
|
|
sideOffset={4}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
className={cn(
|
|
"w-44 rounded-md border border-nb-gray-850 bg-nb-gray-910 shadow-lg p-1 z-50",
|
|
)}
|
|
>
|
|
<DropdownMenu.Item
|
|
onSelect={(e) => {
|
|
e.preventDefault();
|
|
onDeregister();
|
|
setMenuOpen(false);
|
|
}}
|
|
className={cn(
|
|
"flex items-center gap-2 px-2 py-1.5 rounded-md cursor-default outline-none font-medium",
|
|
"text-xs text-nb-gray-200 data-[highlighted]:bg-nb-gray-850",
|
|
)}
|
|
>
|
|
<UserMinus size={14} className="text-nb-gray-300" />
|
|
<span>{t("profile.selector.deregister")}</span>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item
|
|
disabled={!deletable}
|
|
onSelect={(e) => {
|
|
e.preventDefault();
|
|
if (!deletable) return;
|
|
onDelete();
|
|
setMenuOpen(false);
|
|
}}
|
|
className={cn(
|
|
"flex items-center gap-2 px-2 py-1.5 rounded-md cursor-default outline-none font-medium",
|
|
"text-xs data-[highlighted]:bg-nb-gray-850",
|
|
deletable
|
|
? "text-red-500"
|
|
: "text-nb-gray-500 cursor-not-allowed",
|
|
)}
|
|
>
|
|
<Trash2 size={14} />
|
|
<span>{t("profile.selector.delete")}</span>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Portal>
|
|
</DropdownMenu.Root>
|
|
</Command.Item>
|
|
);
|
|
};
|