ui: dashboard redesign, member management, dark mode fixes

- Simplified dashboard using PageHeader/page-layout
- Fixed dark mode live session banner
- Added AddMemberDialog component for study team management
- Study page now has working member add/remove
- Fixed toast imports to use sonner

src/app/(dashboard)/studies/[id]/page.tsx

@@ -20,6 +20,7 @@ import { PageHeader } from "~/components/ui/page-header";
 import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
 import { useSession } from "~/lib/auth-client";
 import { api } from "~/trpc/react";
+import { AddMemberDialog } from "~/components/studies/add-member-dialog";
 
 interface StudyDetailPageProps {
   params: Promise<{
@@ -391,10 +392,12 @@ export default function StudyDetailPage({ params }: StudyDetailPageProps) {
             icon="Users"
             description={`${members.length} team member${members.length !== 1 ? "s" : ""}`}
             actions={
-              <Button variant="outline" size="sm">
+              <AddMemberDialog studyId={study.id}>
-                <Plus className="mr-2 h-4 w-4" />
+                <Button variant="outline" size="sm">
-                Invite
+                  <Plus className="mr-2 h-4 w-4" />
-              </Button>
+                  Manage
+                </Button>
+              </AddMemberDialog>
             }
           >
             <div className="space-y-3">

src/app/dashboard/page.tsx

@@ -15,20 +15,13 @@ import {
   ChevronRight,
   Bot,
   Radio,
-  BarChart3,
+  Building,
-  Settings,
 } from "lucide-react";
 
 import { Button } from "~/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card";
 import { Badge } from "~/components/ui/badge";
 import { ScrollArea } from "~/components/ui/scroll-area";
+import { PageHeader } from "~/components/ui/page-layout";
 import { api } from "~/trpc/react";
 
 export default function DashboardPage() {
@@ -42,7 +35,6 @@ export default function DashboardPage() {
 
   const { data: recentTrials } = api.trials.list.useQuery({
     limit: 5,
-    status: undefined,
   });
 
   const { data: liveTrials } = api.dashboard.getLiveTrials.useQuery(
@@ -59,62 +51,57 @@ export default function DashboardPage() {
     return "Good evening";
   })();
 
-  return (
+  const firstStudy = userStudies?.studies?.[0];
-    <div className="min-h-screen bg-gradient-to-br from-background via-background to-primary/5 p-6 md:p-8">
-      {/* Header */}
-      <div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-        <div>
-          <h1 className="text-4xl font-bold tracking-tight">
-            {greeting}, {userName.split(" ")[0]}
-          </h1>
-          <p className="text-muted-foreground mt-1">
-            Ready to run your next session?
-          </p>
-        </div>
 
-        <div className="flex gap-3">
+  return (
-          <Button variant="outline" asChild>
+    <div className="space-y-6">
-            <Link href="/studies/new">
+      {/* Header */}
-              <FlaskConical className="mr-2 h-4 w-4" />
+      <PageHeader
-              New Study
+        title={`${greeting}, ${userName.split(" ")[0]}`}
-            </Link>
+        description="Ready to run your next session?"
-          </Button>
+        icon={Bot}
-          <Button asChild className="glow-teal">
+        actions={
-            <Link href={userStudies?.studies?.[0]?.id ? `/studies/${userStudies.studies[0].id}/trials/new` : "/studies/new"}>
+          <div className="flex gap-2">
-              <Play className="mr-2 h-4 w-4" />
+            <Button variant="outline" asChild>
-              Start Trial
+              <Link href="/studies/new">
-            </Link>
+                <Plus className="mr-2 h-4 w-4" />
-          </Button>
+                New Study
-        </div>
+              </Link>
-      </div>
+            </Button>
+            <Button asChild className="glow-teal">
+              <Link href={firstStudy?.id ? `/studies/${firstStudy.id}/trials/new` : "/studies/new"}>
+                <Play className="mr-2 h-4 w-4" />
+                Start Trial
+              </Link>
+            </Button>
+          </div>
+        }
+      />
 
       {/* Live Trials Banner */}
       {liveTrials && liveTrials.length > 0 && (
-        <Card className="border-red-200 bg-red-50/50 mb-6 dark:border-red-900 dark:bg-red-900/20">
+        <div className="bg-destructive/10 border-border flex items-center gap-4 rounded-lg border p-4">
-          <CardContent className="flex items-center gap-4 py-4">
+          <div className="relative">
-            <div className="relative">
+            <Radio className="h-8 w-8 text-destructive animate-pulse" />
-              <Radio className="h-8 w-8 text-red-600 animate-pulse" />
+          </div>
-              <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-red-500 animate-ping" />
+          <div className="flex-1">
-            </div>
+            <p className="font-semibold">
-            <div className="flex-1">
+              {liveTrials.length} Active Session{liveTrials.length > 1 ? "s" : ""}
-              <p className="font-semibold text-red-600 dark:text-red-400">
+            </p>
-                {liveTrials.length} Active Session{liveTrials.length > 1 ? "s" : ""}
+            <p className="text-muted-foreground text-sm">
-              </p>
+              {liveTrials.map((t) => t.participantCode).join(", ")}
-              <p className="text-sm text-red-600/70 dark:text-red-400/70">
+            </p>
-                {liveTrials.map((t) => t.participantCode).join(", ")}
+          </div>
-              </p>
+          <Button size="sm" variant="secondary" asChild>
-            </div>
+            <Link href={`/studies/${liveTrials?.[0]?.studyId}/trials/${liveTrials?.[0]?.id}/wizard`}>
-            <Button size="sm" variant="secondary" asChild>
+              View <ChevronRight className="ml-1 h-4 w-4" />
-              <Link href={`/studies/${liveTrials?.[0]?.studyId}/trials/${liveTrials?.[0]?.id}/wizard`}>
+            </Link>
-                View <ChevronRight className="ml-1 h-4 w-4" />
+          </Button>
-              </Link>
+        </div>
-            </Button>
-          </CardContent>
-        </Card>
       )}
 
       {/* Stats Row */}
-      <div className="mb-8 grid gap-4 md:grid-cols-4">
+      <div className="grid gap-4 md:grid-cols-4">
         <StatCard
           label="Active Trials"
           value={stats?.activeTrials ?? 0}
@@ -134,9 +121,9 @@ export default function DashboardPage() {
           color="blue"
         />
         <StatCard
-          label="Total Participants"
+          label="Scheduled"
           value={stats?.scheduledTrials ?? 0}
-          icon={Users}
+          icon={Clock}
           color="violet"
         />
       </div>
@@ -144,22 +131,19 @@ export default function DashboardPage() {
       {/* Main Grid */}
       <div className="grid gap-6 lg:grid-cols-3">
         {/* Studies List */}
-        <Card className="lg:col-span-2">
+        <div className="bg-card rounded-lg border lg:col-span-2">
-          <CardHeader className="flex flex-row items-center justify-between">
+          <div className="flex items-center justify-between border-b px-6 py-4">
-            <div>
+            <div className="flex items-center gap-3">
-              <CardTitle className="flex items-center gap-2">
+              <FlaskConical className="text-primary h-5 w-5" />
-                <FlaskConical className="h-5 w-5 text-primary" />
+              <h2 className="font-semibold">Your Studies</h2>
-                Your Studies
-              </CardTitle>
-              <CardDescription>Recent studies and quick access</CardDescription>
             </div>
             <Button variant="ghost" size="sm" asChild>
               <Link href="/studies">
                 View all <ChevronRight className="ml-1 h-4 w-4" />
               </Link>
             </Button>
-          </CardHeader>
+          </div>
-          <CardContent>
+          <div className="p-6">
             <div className="space-y-3">
               {userStudies?.studies?.slice(0, 5).map((study) => (
                 <Link
@@ -204,17 +188,17 @@ export default function DashboardPage() {
                 </div>
               )}
             </div>
-          </CardContent>
+          </div>
-        </Card>
+        </div>
 
         {/* Quick Links & Recent */}
         <div className="space-y-6">
           {/* Quick Actions */}
-          <Card>
+          <div className="bg-card rounded-lg border">
-            <CardHeader>
+            <div className="border-b px-6 py-4">
-              <CardTitle className="text-lg">Quick Actions</CardTitle>
+              <h2 className="font-semibold">Quick Actions</h2>
-            </CardHeader>
+            </div>
-            <CardContent className="space-y-2">
+            <div className="space-y-2 p-4">
               <Button variant="outline" className="w-full justify-start" asChild>
                 <Link href="/studies/new">
                   <Plus className="mr-3 h-4 w-4" />
@@ -222,35 +206,35 @@ export default function DashboardPage() {
                 </Link>
               </Button>
               <Button variant="outline" className="w-full justify-start" asChild>
-                <Link href={userStudies?.studies?.[0]?.id ? `/studies/${userStudies.studies[0].id}/experiments/new` : "/studies"}>
+                <Link href={firstStudy?.id ? `/studies/${firstStudy.id}/experiments/new` : "/studies"}>
                   <FlaskConical className="mr-3 h-4 w-4" />
                   Design Experiment
                 </Link>
               </Button>
               <Button variant="outline" className="w-full justify-start" asChild>
-                <Link href={userStudies?.studies?.[0]?.id ? `/studies/${userStudies.studies[0].id}/participants/new` : "/studies"}>
+                <Link href={firstStudy?.id ? `/studies/${firstStudy.id}/participants/new` : "/studies"}>
                   <Users className="mr-3 h-4 w-4" />
                   Add Participant
                 </Link>
               </Button>
               <Button variant="outline" className="w-full justify-start" asChild>
-                <Link href={userStudies?.studies?.[0]?.id ? `/studies/${userStudies.studies[0].id}/trials/new` : "/studies"}>
+                <Link href={firstStudy?.id ? `/studies/${firstStudy.id}/trials/new` : "/studies"}>
                   <Play className="mr-3 h-4 w-4" />
                   Start Trial
                 </Link>
               </Button>
-            </CardContent>
+            </div>
-          </Card>
+          </div>
 
           {/* Recent Trials */}
-          <Card>
+          <div className="bg-card rounded-lg border">
-            <CardHeader>
+            <div className="flex items-center justify-between border-b px-6 py-4">
-              <CardTitle className="flex items-center gap-2 text-lg">
+              <div className="flex items-center gap-2">
-                <Clock className="h-4 w-4" />
+                <Clock className="h-4 w-4 text-muted-foreground" />
-                Recent Trials
+                <h2 className="font-semibold">Recent Trials</h2>
-              </CardTitle>
+              </div>
-            </CardHeader>
+            </div>
-            <CardContent>
+            <div className="p-4">
               <ScrollArea className="h-[200px]">
                 <div className="space-y-3">
                   {recentTrials?.slice(0, 5).map((trial) => (
@@ -292,8 +276,8 @@ export default function DashboardPage() {
                   )}
                 </div>
               </ScrollArea>
-            </CardContent>
+            </div>
-          </Card>
+          </div>
         </div>
       </div>
     </div>
@@ -312,15 +296,15 @@ function StatCard({
   color: "teal" | "emerald" | "blue" | "violet";
 }) {
   const colorClasses = {
-    teal: "bg-teal-500/10 text-teal-600 dark:text-teal-400",
+    teal: "bg-primary/10 text-primary",
     emerald: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
     blue: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
     violet: "bg-violet-500/10 text-violet-600 dark:text-violet-400",
   };
 
   return (
-    <Card>
+    <div className="bg-card rounded-lg border p-6">
-      <CardContent className="flex items-center gap-4 p-6">
+      <div className="flex items-center gap-4">
         <div className={`rounded-full p-3 ${colorClasses[color]}`}>
           <Icon className="h-6 w-6" />
         </div>
@@ -328,7 +312,7 @@ function StatCard({
           <p className="text-3xl font-bold">{value}</p>
           <p className="text-muted-foreground text-sm">{label}</p>
         </div>
-      </CardContent>
+      </div>
-    </Card>
+    </div>
   );
 }

src/components/studies/add-member-dialog.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import * as React from "react";
+import { useSession } from "~/lib/auth-client";
+import { api } from "~/trpc/react";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import { Plus, Loader2, Trash2, Shield, UserMinus } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+
+interface Member {
+  id: string;
+  userId: string;
+  role: string;
+  user: {
+    name: string | null;
+    email: string;
+  };
+}
+
+interface AddMemberDialogProps {
+  studyId: string;
+  children?: React.ReactNode;
+}
+
+export function AddMemberDialog({ studyId, children }: AddMemberDialogProps) {
+  const utils = api.useUtils();
+  const [open, setOpen] = React.useState(false);
+  const [email, setEmail] = React.useState("");
+  const [role, setRole] = React.useState<string>("researcher");
+
+  const { data: membersData } = api.studies.getMembers.useQuery({ studyId });
+
+  const addMember = api.studies.addMember.useMutation({
+    onSuccess: () => {
+      toast.success("Member added successfully");
+      void utils.studies.getMembers.invalidate();
+      setEmail("");
+      setRole("researcher");
+      setOpen(false);
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to add member");
+    },
+  });
+
+  const removeMember = api.studies.removeMember.useMutation({
+    onSuccess: () => {
+      toast.success("Member removed");
+      void utils.studies.getMembers.invalidate();
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to remove member");
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email || !role) return;
+    addMember.mutate({ studyId, email, role: role as "researcher" | "wizard" | "observer" });
+  };
+
+  const handleRemove = (memberId: string, memberName: string | null) => {
+    if (confirm(`Remove ${memberName ?? memberId} from this study?`)) {
+      removeMember.mutate({ studyId, memberId });
+    }
+  };
+
+  const members = membersData ?? [];
+  const currentUser = members.find((m) => m.userId);
+  const isOwner = currentUser?.role === "owner";
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children ?? (
+          <Button size="sm">
+            <Plus className="mr-2 h-4 w-4" />
+            Add Member
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Manage Team Members</DialogTitle>
+          <DialogDescription>
+            Add researchers, wizards, or observers to collaborate on this study.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Current Members */}
+        <div className="max-h-[200px] space-y-2 overflow-y-auto">
+          {members.map((member) => (
+            <div
+              key={member.id}
+              className="flex items-center justify-between rounded-lg border p-3"
+            >
+              <div className="flex items-center gap-3">
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
+                  <span className="text-sm font-medium text-primary">
+                    {(member.user.name ?? member.user.email).charAt(0).toUpperCase()}
+                  </span>
+                </div>
+                <div>
+                  <p className="text-sm font-medium">
+                    {member.user.name ?? member.user.email}
+                    {member.role === "owner" && (
+                      <Shield className="ml-2 inline h-3 w-3 text-amber-500" />
+                    )}
+                  </p>
+                  <p className="text-muted-foreground text-xs capitalize">{member.role}</p>
+                </div>
+              </div>
+              {isOwner && member.role !== "owner" && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemove(member.id, member.user.name)}
+                  disabled={removeMember.isPending}
+                >
+                  <UserMinus className="h-4 w-4 text-destructive" />
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email Address</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="researcher@university.edu"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="role">Role</Label>
+            <Select value={role} onValueChange={setRole}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a role" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="researcher">Researcher</SelectItem>
+                <SelectItem value="wizard">Wizard</SelectItem>
+                <SelectItem value="observer">Observer</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground text-xs">
+              Researchers can design experiments, Wizards execute trials, Observers have read-only access.
+            </p>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={addMember.isPending}>
+              {addMember.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Add Member
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}