chore: Remove un-used UI components

apps/dashboard/app/(app)/[workspaceSlug]/settings/team/client.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { PageHeader } from "@/components/dashboard/page-header";
 import { useWorkspaceNavigation } from "@/hooks/use-workspace-navigation";
 import { trpc } from "@/lib/trpc/client";
 import {
@@ -63,26 +62,6 @@ export function TeamPageClient({ team }: { team: boolean }) {
     return null;
   }
 
-  const actions: React.ReactNode[] = [];
-
-  if (isAdmin) {
-    actions.push(
-      <Select key="tab-select" value={tab} onValueChange={(value: Tab) => setTab(value)}>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectItem value="members">Members</SelectItem>
-            <SelectItem value="invitations">Invitations</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>,
-    );
-
-    actions.push(<InviteButton key="invite-button" user={user} organization={organization} />);
-  }
-
   if (!team) {
     return (
       <div className="relative items-center justify-center h-screen w-full">
@@ -103,7 +82,24 @@ export function TeamPageClient({ team }: { team: boolean }) {
 
   return (
     <>
-      <PageHeader title="Members" description="Manage your team members" actions={actions} />
+      {isAdmin ? (
+        <div className="flex flex-row justify-end w-full gap-4">
+          <div>
+            <Select key="tab-select" value={tab} onValueChange={(value: Tab) => setTab(value)}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem value="members">Members</SelectItem>
+                  <SelectItem value="invitations">Invitations</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          <InviteButton key="invite-button" user={user} organization={organization} />
+        </div>
+      ) : null}
       {isLoading || !user || !organization || !userMemberships || !currentOrgMembership ? (
         <Loading />
       ) : tab === "members" ? (

apps/dashboard/app/(app)/[workspaceSlug]/settings/team/members.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Confirm } from "@/components/dashboard/confirm";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   Table,
@@ -12,8 +11,8 @@ import {
 } from "@/components/ui/table";
 import type { AuthenticatedUser, Membership, Organization } from "@/lib/auth/types";
 import { trpc } from "@/lib/trpc/client";
-import { Button, Empty, Loading, toast } from "@unkey/ui";
-import { memo } from "react";
+import { Button, ConfirmPopover, Empty, Loading, toast } from "@unkey/ui";
+import { memo, useMemo, useState } from "react";
 import { InviteButton } from "./invite";
 import { RoleSwitcher } from "./role-switcher";
 
@@ -24,11 +23,16 @@ type MembersProps = {
 };
 
 export const Members = memo<MembersProps>(({ organization, user, userMembership }) => {
+  const [isConfirmPopoverOpen, setIsConfirmPopoverOpen] = useState(false);
+  const [currentMembership, setCurrentMembership] = useState<Membership | null>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const { data: orgMemberships, isLoading } = trpc.org.members.list.useQuery(organization?.id);
   const memberships = orgMemberships?.data;
   const isAdmin = userMembership?.role === "admin";
   const utils = trpc.useUtils();
 
+  const anchorRef = useMemo(() => ({ current: anchorEl }), [anchorEl]);
+
   const removeMember = trpc.org.members.remove.useMutation({
     onSuccess: () => {
       // Invalidate the member list query to trigger a refetch
@@ -48,6 +52,15 @@ export const Members = memo<MembersProps>(({ organization, user, userMembership
     );
   }
 
+  const handleDeleteButtonClick = (
+    membership: Membership,
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => {
+    setAnchorEl(event.currentTarget);
+    setCurrentMembership(membership);
+    setIsConfirmPopoverOpen(true);
+  };
+
   if (!memberships || memberships.length === 0) {
     return (
       <Empty>
@@ -59,69 +72,89 @@ export const Members = memo<MembersProps>(({ organization, user, userMembership
   }
 
   return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Member</TableHead>
-          <TableHead>Role</TableHead>
-          <TableHead>{/*/ empty */}</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {memberships.map(({ id, role, user: member }) => (
-          <TableRow key={id}>
-            <TableCell>
-              <div className="flex w-full items-center gap-2 max-sm:m-0 max-sm:gap-1 max-sm:text-xs md:flex-grow">
-                <Avatar>
-                  <AvatarImage src={member.avatarUrl ?? undefined} />
-                  <AvatarFallback>
-                    {member.fullName?.slice(0, 1) ?? member.email.slice(0, 1)}
-                  </AvatarFallback>
-                </Avatar>
-                <div className="flex flex-col items-start">
-                  <span className="text-content font-medium">
-                    {`${member.firstName ? member.firstName : member.email} ${
-                      member.lastName ? member.lastName : ""
-                    }`}
-                  </span>
-                  <span className="text-content-subtle text-xs">
-                    {member.firstName ? member.email : ""}
-                  </span>
-                </div>
-              </div>
-            </TableCell>
-            <TableCell>
-              <RoleSwitcher
-                member={{ id, role }}
-                organization={organization}
-                user={user}
-                userMembership={userMembership}
-              />
-            </TableCell>
-            <TableCell>
-              {isAdmin && user && member.id !== user.id ? (
-                <Confirm
-                  variant="destructive"
-                  title="Remove member"
-                  description={`Are you sure you want to remove ${member.email}?`}
-                  onConfirm={async () => {
-                    try {
-                      await removeMember.mutateAsync({
-                        orgId: organization.id,
-                        membershipId: id,
-                      });
-                    } catch (error) {
-                      console.error("Error removing member:", error);
-                    }
-                  }}
-                  trigger={(onClick) => <Button onClick={onClick}>Remove</Button>}
-                />
-              ) : null}
-            </TableCell>
+    <>
+      {currentMembership && anchorEl ? (
+        <ConfirmPopover
+          isOpen={isConfirmPopoverOpen}
+          onOpenChange={setIsConfirmPopoverOpen}
+          triggerRef={anchorRef}
+          description={`Are you sure you want to remove ${currentMembership.user.email}?`}
+          confirmButtonText="Delete Member"
+          cancelButtonText="Cancel"
+          variant="danger"
+          title="Remove member"
+          onConfirm={async () => {
+            try {
+              await removeMember.mutateAsync({
+                orgId: organization.id,
+                membershipId: currentMembership.id,
+              });
+            } catch (error) {
+              console.error("Error removing member:", error);
+            }
+          }}
+        />
+      ) : null}
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Member</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>{/*/ empty */}</TableHead>
           </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+        </TableHeader>
+        <TableBody>
+          {memberships.map((membership) => {
+            const { id, role, user: member } = membership;
+            return (
+              <TableRow key={id}>
+                <TableCell>
+                  <div className="flex w-full items-center gap-2 max-sm:m-0 max-sm:gap-1 max-sm:text-xs md:flex-grow">
+                    <Avatar>
+                      <AvatarImage src={member.avatarUrl ?? undefined} />
+                      <AvatarFallback>
+                        {member.fullName?.slice(0, 1) ?? member.email.slice(0, 1)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="flex flex-col items-start">
+                      <span className="text-content font-medium">
+                        {`${member.firstName ? member.firstName : member.email} ${
+                          member.lastName ? member.lastName : ""
+                        }`}
+                      </span>
+                      <span className="text-content-subtle text-xs">
+                        {member.firstName ? member.email : ""}
+                      </span>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <RoleSwitcher
+                    member={{ id, role }}
+                    organization={organization}
+                    user={user}
+                    userMembership={userMembership}
+                  />
+                </TableCell>
+                <TableCell>
+                  {isAdmin && user && member.id !== user.id ? (
+                    <Button
+                      className="w-full"
+                      type="button"
+                      variant="default"
+                      size="lg"
+                      onClick={(event) => handleDeleteButtonClick(membership, event)}
+                    >
+                      Remove
+                    </Button>
+                  ) : null}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </>
   );
 });
 

apps/dashboard/app/(app)/[workspaceSlug]/settings/vercel/client.tsx

@@ -4,7 +4,6 @@
  */
 
 "use client";
-import { PageHeader } from "@/components/dashboard/page-header";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   DropdownMenu,
@@ -91,19 +90,6 @@ export const Client: React.FC<Props> = ({ projects, integration, apis, rootKeys
 
   return (
     <>
-      <PageHeader
-        title="Connected Projects"
-        description="Connect a Vercel project to an API to automatically add the necessary environment variables to your project."
-        actions={[
-          <Link
-            key="vercelIntegration"
-            href={`https://vercel.com/dashboard/integrations/${integration.id}`}
-            target="_blank"
-          >
-            <Button>Configure Vercel</Button>
-          </Link>,
-        ]}
-      />
       <div className="flex items-center justify-center w-full ">
         <ul className="w-full space-y-8">
           {projects.map((project) => {

apps/dashboard/app/(app)/[workspaceSlug]/settings/vercel/page.tsx

@@ -3,7 +3,6 @@
  * Hiding for now until we decide if we want to fix it up or toss it
  */
 
-import { Navbar as SubMenu } from "@/components/dashboard/navbar";
 import { Navigation } from "@/components/navigation/navigation";
 import { PageContent } from "@/components/page-content";
 import { getAuth } from "@/lib/auth";
@@ -14,7 +13,6 @@ import { Button, Code, Empty } from "@unkey/ui";
 import { Vercel } from "@unkey/vercel";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { navigation } from "../constants";
 import { Client } from "./client";
 
 export const dynamic = "force-dynamic";
@@ -58,7 +56,6 @@ export default async function Page(props: Props) {
       <div>
         <Navigation href={`/${workspace.slug}/settings/vercel`} name="Settings" icon={<Gear />} />
         <PageContent>
-          <SubMenu navigation={navigation} segment="vercel" />
           <div className="mt-8" />
           <Empty>
             <Empty.Title>Vercel is not connected to this workspace</Empty.Title>
@@ -184,7 +181,6 @@ export default async function Page(props: Props) {
     <div>
       <Navigation href={`/${workspace.slug}/settings/vercel`} icon={<Gear />} name="Settings" />
       <PageContent>
-        <SubMenu navigation={navigation} segment="vercel" />
         <div className="mt-8" />
         <Client projects={projects} apis={apis} rootKeys={rootKeys} integration={integration} />
       </PageContent>

apps/dashboard/app/integrations/vercel/callback/client.tsx

@@ -4,7 +4,6 @@
  */
 
 "use client";
-import { PageHeader } from "@/components/dashboard/page-header";
 import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { trpc } from "@/lib/trpc/client";
@@ -21,7 +20,7 @@ import {
 } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { WorkspaceSwitcher } from "./workspace";
+// import { WorkspaceSwitcher } from "./workspace";
 type Props = {
   projects: { id: string; name: string }[];
   apis: Api[];
@@ -70,12 +69,6 @@ export const Client: React.FC<Props> = ({
 
   return (
     <div className="container min-h-screen mx-auto mt-8">
-      <PageHeader
-        title="Connect Vercel Project"
-        description="You can add more projects later"
-        actions={[<WorkspaceSwitcher key="workspace-switcher" />]}
-      />
-
       <div className="flex flex-col flex-1 flex-grow gap-16">
         <div className="flex flex-col gap-2">
           <Label>Vercel Project</Label>