feat: create network, and manage members, invitations (#74)
This commit was merged in pull request #74.
This commit is contained in:
Arjun Patel
@@ -1,7 +1,7 @@
|
||||
import { WindowControls } from "@/components/window-controls";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Home, Settings, Volume2, VolumeOff } from "lucide-react";
|
||||
import { Home, Settings, Users, Volume2, VolumeOff } from "lucide-react";
|
||||
import { Toggle } from "@/components/ui/toggle";
|
||||
import { useAutoplayStore } from "@/stores/autoplay-store";
|
||||
import {
|
||||
@@ -137,6 +137,17 @@ function TopBar() {
|
||||
|
||||
<AutoplayToggle />
|
||||
|
||||
{networkId && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="no-drag text-muted-foreground"
|
||||
onClick={() => navigate(`/${networkId}/settings`)}
|
||||
>
|
||||
<Users className="size-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
|
||||
@@ -1,19 +1,36 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Users } from "lucide-react";
|
||||
import { Check, Plus, Settings, Users } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Small } from "@/components/ui/typography";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { useNetworks } from "@/hooks/use-networks";
|
||||
import { useMyInvitations, useAcceptInvitation } from "@/hooks/use-invitations";
|
||||
import { apiClient } from "@/api/client";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import type { Network } from "@/api/types";
|
||||
import type { Network, Invitation } from "@/api/types";
|
||||
|
||||
function NetworkRow({
|
||||
network,
|
||||
onClick,
|
||||
onSettingsClick,
|
||||
}: {
|
||||
network: Network;
|
||||
onClick: () => void;
|
||||
onSettingsClick: () => void;
|
||||
}) {
|
||||
const initials = network.name.slice(0, 2).toUpperCase();
|
||||
const memberCount = network.humans.length;
|
||||
@@ -22,7 +39,7 @@ function NetworkRow({
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent"
|
||||
className="group flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent"
|
||||
>
|
||||
<Avatar>
|
||||
<AvatarFallback className="bg-primary/10 text-primary font-medium">
|
||||
@@ -38,14 +55,142 @@ function NetworkRow({
|
||||
</Small>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className="text-muted-foreground hover:text-foreground opacity-0 transition-opacity group-hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSettingsClick();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.stopPropagation();
|
||||
onSettingsClick();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Settings className="size-4" />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function InvitationRow({ invitation }: { invitation: Invitation }) {
|
||||
const acceptInvitation = useAcceptInvitation();
|
||||
const initials = invitation.network_name.slice(0, 2).toUpperCase();
|
||||
|
||||
const handleAccept = () => {
|
||||
acceptInvitation.mutate(invitation.network_id, {
|
||||
onSuccess: () => {
|
||||
toast.success(`Joined ${invitation.network_name}`);
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(err.message || "Failed to accept invitation");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3 px-4 py-3">
|
||||
<Avatar>
|
||||
<AvatarFallback className="bg-primary/10 text-primary font-medium">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">
|
||||
{invitation.network_name}
|
||||
</p>
|
||||
<Small className="text-muted-foreground">You've been invited</Small>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleAccept}
|
||||
disabled={acceptInvitation.isPending}
|
||||
>
|
||||
<Check className="mr-1 size-3.5" />
|
||||
{acceptInvitation.isPending ? "Joining..." : "Accept"}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateNetworkDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
const [name, setName] = useState("");
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const createNetwork = useMutation({
|
||||
mutationFn: (networkName: string) =>
|
||||
apiClient.createNetwork({ name: networkName }),
|
||||
onSuccess: (network) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["networks"] });
|
||||
toast.success(`Created ${network.name}`);
|
||||
onOpenChange(false);
|
||||
setName("");
|
||||
navigate(`/${network.id}/settings`);
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(err.message || "Failed to create network");
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) return;
|
||||
createNetwork.mutate(trimmed);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create Network</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="py-4">
|
||||
<Input
|
||||
placeholder="Network name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!name.trim() || createNetwork.isPending}
|
||||
>
|
||||
{createNetwork.isPending ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NetworkSelector() {
|
||||
const navigate = useNavigate();
|
||||
const [createDialogOpen, setCreateDialogOpen] = useState(false);
|
||||
|
||||
const { data, isPending, error } = useNetworks();
|
||||
const { data: networks, isPending, error } = useNetworks();
|
||||
const { data: invitations } = useMyInvitations();
|
||||
|
||||
if (isPending) {
|
||||
return <Progress />;
|
||||
@@ -60,33 +205,96 @@ export default function NetworkSelector() {
|
||||
);
|
||||
}
|
||||
|
||||
if (data?.length === 0) {
|
||||
const hasInvitations = invitations && invitations.length > 0;
|
||||
const hasNetworks = networks && networks.length > 0;
|
||||
|
||||
if (!hasNetworks && !hasInvitations) {
|
||||
return (
|
||||
<div className="mx-auto flex h-full max-w-sm flex-col items-center justify-center gap-4 px-4 text-center">
|
||||
<p className="text-muted-foreground">
|
||||
You don't have access to any networks yet. Please email us to get
|
||||
started.
|
||||
You don't have access to any networks yet. Create one or ask your admin for an invite.
|
||||
</p>
|
||||
<a href="mailto:[email protected]" className="text-primary underline">
|
||||
team@flowylabs.ai
|
||||
</a>
|
||||
<Button onClick={() => setCreateDialogOpen(true)}>
|
||||
<Plus className="mr-1 size-3.5" />
|
||||
Create Network
|
||||
</Button>
|
||||
<CreateNetworkDialog
|
||||
open={createDialogOpen}
|
||||
onOpenChange={setCreateDialogOpen}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="py-1">
|
||||
{data?.map((network, index) => (
|
||||
<div key={network.id}>
|
||||
<NetworkRow
|
||||
network={network}
|
||||
onClick={() => navigate(`/${network.id}`)}
|
||||
/>
|
||||
{index < data.length - 1 && <Separator className="mx-4" />}
|
||||
<>
|
||||
<ScrollArea className="h-full">
|
||||
<div className="py-1">
|
||||
{hasInvitations && (
|
||||
<>
|
||||
<div className="flex items-center gap-2 px-4 pb-1 pt-4">
|
||||
<p className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
|
||||
Pending Invitations
|
||||
</p>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{invitations.length}
|
||||
</Badge>
|
||||
</div>
|
||||
{invitations.map((inv, index) => (
|
||||
<div key={`${inv.network_id}-${inv.email}`}>
|
||||
<InvitationRow invitation={inv} />
|
||||
{index < invitations.length - 1 && (
|
||||
<Separator className="mx-4" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Separator className="mx-4 mt-2" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{hasNetworks && (
|
||||
<>
|
||||
{hasInvitations && (
|
||||
<p className="text-muted-foreground px-4 pb-1 pt-4 text-xs font-medium uppercase tracking-wider">
|
||||
Your Networks
|
||||
</p>
|
||||
)}
|
||||
{networks.map((network, index) => (
|
||||
<div key={network.id}>
|
||||
<NetworkRow
|
||||
network={network}
|
||||
onClick={() => navigate(`/${network.id}`)}
|
||||
onSettingsClick={() =>
|
||||
navigate(`/${network.id}/settings`)
|
||||
}
|
||||
/>
|
||||
{index < networks.length - 1 && (
|
||||
<Separator className="mx-4" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Separator className="mx-4 mt-2" />
|
||||
<div className="px-4 py-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
onClick={() => setCreateDialogOpen(true)}
|
||||
>
|
||||
<Plus className="mr-1 size-3.5" />
|
||||
New Network
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<CreateNetworkDialog
|
||||
open={createDialogOpen}
|
||||
onOpenChange={setCreateDialogOpen}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,220 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { ArrowLeft, Mail, Shield, X } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Muted } from "@/components/ui/typography";
|
||||
import { WindowControls } from "@/components/window-controls";
|
||||
import { useNetworks } from "@/hooks/use-networks";
|
||||
import {
|
||||
useNetworkInvitations,
|
||||
useInviteMembers,
|
||||
useRevokeInvitation,
|
||||
} from "@/hooks/use-invitations";
|
||||
import type { Human } from "@/api/types";
|
||||
|
||||
function MemberRow({
|
||||
human,
|
||||
isAdmin,
|
||||
}: {
|
||||
human: Human;
|
||||
isAdmin: boolean;
|
||||
}) {
|
||||
const initials = human.email_prefix.slice(0, 2).toUpperCase();
|
||||
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3 px-4 py-3">
|
||||
<Avatar>
|
||||
<AvatarFallback className="bg-primary/10 text-primary font-medium">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">{human.email_prefix}</p>
|
||||
<Muted className="text-xs">{human.email}</Muted>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<Badge variant="secondary" className="shrink-0">
|
||||
<Shield className="mr-1 size-3" />
|
||||
Admin
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InviteForm({ networkId }: { networkId: string }) {
|
||||
const [email, setEmail] = useState("");
|
||||
const inviteMembers = useInviteMembers(networkId);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const trimmed = email.trim();
|
||||
if (!trimmed) return;
|
||||
|
||||
inviteMembers.mutate([trimmed], {
|
||||
onSuccess: () => {
|
||||
toast.success(`Invitation sent to ${trimmed}`);
|
||||
setEmail("");
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(err.message || "Failed to send invitation");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="flex items-center gap-2 px-4 py-3">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
disabled={!email.trim() || inviteMembers.isPending}
|
||||
>
|
||||
{inviteMembers.isPending ? "Sending..." : "Invite"}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function PendingInvitationRow({
|
||||
email,
|
||||
networkId,
|
||||
}: {
|
||||
email: string;
|
||||
networkId: string;
|
||||
}) {
|
||||
const revokeInvitation = useRevokeInvitation(networkId);
|
||||
|
||||
const handleRevoke = () => {
|
||||
revokeInvitation.mutate(email, {
|
||||
onSuccess: () => {
|
||||
toast.success(`Invitation to ${email} revoked`);
|
||||
},
|
||||
onError: (err) => {
|
||||
toast.error(err.message || "Failed to revoke invitation");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full items-center gap-3 px-4 py-3">
|
||||
<span className="text-muted-foreground flex size-10 items-center justify-center">
|
||||
<Mail className="size-4" />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm">{email}</p>
|
||||
<Muted className="text-xs">Pending</Muted>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={handleRevoke}
|
||||
disabled={revokeInvitation.isPending}
|
||||
className="text-muted-foreground hover:text-destructive shrink-0"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsGroup({
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-muted-foreground px-4 pb-1 pt-4 text-xs font-medium uppercase tracking-wider">
|
||||
{title}
|
||||
</p>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function NetworkSettingsPage() {
|
||||
const navigate = useNavigate();
|
||||
const { networkId } = useParams<{ networkId: string }>();
|
||||
const { data: networks } = useNetworks();
|
||||
const network = networks?.find((n) => n.id === networkId);
|
||||
const { data: invitations } = useNetworkInvitations(networkId!);
|
||||
|
||||
const networkName = network?.name ?? "Network";
|
||||
|
||||
return (
|
||||
<div className="flex h-screen flex-col">
|
||||
<div className="drag-region flex items-center gap-3 border-b px-3 py-1">
|
||||
<WindowControls />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="no-drag text-muted-foreground"
|
||||
onClick={() => navigate(`/${networkId}`)}
|
||||
>
|
||||
<ArrowLeft className="size-3.5" />
|
||||
</Button>
|
||||
<span className="text-sm font-medium">{networkName}</span>
|
||||
<div className="flex-1" />
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<SettingsGroup title="Members">
|
||||
{network?.humans.map((human, index) => (
|
||||
<div key={human.id}>
|
||||
<MemberRow
|
||||
human={human}
|
||||
isAdmin={human.id === network.admin_human.id}
|
||||
/>
|
||||
{index < network.humans.length - 1 && (
|
||||
<Separator className="mx-4" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</SettingsGroup>
|
||||
|
||||
<Separator className="mt-4" />
|
||||
|
||||
<SettingsGroup title="Invite">
|
||||
<InviteForm networkId={networkId!} />
|
||||
</SettingsGroup>
|
||||
|
||||
<Separator className="mt-4" />
|
||||
|
||||
<SettingsGroup title="Pending Invitations">
|
||||
{invitations && invitations.length > 0 ? (
|
||||
invitations.map((inv, index) => (
|
||||
<div key={inv.email}>
|
||||
<PendingInvitationRow
|
||||
email={inv.email}
|
||||
networkId={networkId!}
|
||||
/>
|
||||
{index < invitations.length - 1 && (
|
||||
<Separator className="mx-4" />
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-muted-foreground px-4 py-3 text-sm">
|
||||
No pending invitations
|
||||
</p>
|
||||
)}
|
||||
</SettingsGroup>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -295,6 +295,17 @@ export function ParticleListView({ path }: ParticleListViewProps) {
|
||||
return <Progress />;
|
||||
}
|
||||
|
||||
if (streams.length === 0) {
|
||||
return (
|
||||
<div className="mx-auto flex h-full max-w-sm flex-col items-center justify-center gap-2 px-4 text-center">
|
||||
<Radio className="text-muted-foreground size-8" />
|
||||
<p className="text-muted-foreground text-sm">
|
||||
No recent streams yet. Start a conversation using the keyboard shortcuts below.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-clip">
|
||||
<div className="py-1">
|
||||
|
||||
Reference in New Issue
Block a user