Enhance HRIStudio with immersive experiment designer and comprehensive documentation updates

- Introduced a new immersive experiment designer using React Flow, providing a professional-grade visual flow editor for creating experiments.
- Added detailed documentation for the flow designer connections and ordering system, emphasizing its advantages and implementation details.
- Updated existing documentation to reflect the latest features and improvements, including a streamlined README and quick reference guide.
- Consolidated participant type definitions into a new file for better organization and clarity.

Features:
- Enhanced user experience with a node-based interface for experiment design.
- Comprehensive documentation supporting new features and development practices.

Breaking Changes: None - existing functionality remains intact.

src/components/participants/ParticipantForm.tsx

@@ -2,9 +2,19 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Users } from "lucide-react";
-import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
+import { Checkbox } from "~/components/ui/checkbox";
+import {
+  EntityForm,
+  FormField,
+  FormSection,
+  NextSteps,
+  Tips,
+} from "~/components/ui/entity-form";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import {
@@ -14,17 +24,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "~/components/ui/select";
-import { Checkbox } from "~/components/ui/checkbox";
-import {
-  EntityForm,
-  FormField,
-  FormSection,
-  NextSteps,
-  Tips,
-} from "~/components/ui/entity-form";
-import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
 import { useStudyContext } from "~/lib/study-context";
-import { useRouter } from "next/navigation";
 import { api } from "~/trpc/react";
 
 const participantSchema = z.object({

src/components/participants/participants-columns.tsx

@@ -3,20 +3,22 @@
 import { type ColumnDef } from "@tanstack/react-table";
 import { formatDistanceToNow } from "date-fns";
 import {
-  MoreHorizontal,
-  Eye,
-  Edit,
-  Trash2,
   Copy,
-  User,
+  Edit,
+  Eye,
   Mail,
+  MoreHorizontal,
   TestTube,
+  Trash2,
+  User,
 } from "lucide-react";
 import Link from "next/link";
 
+import { toast } from "sonner";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import { Checkbox } from "~/components/ui/checkbox";
+import { DataTableColumnHeader } from "~/components/ui/data-table-column-header";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -25,8 +27,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
-import { DataTableColumnHeader } from "~/components/ui/data-table-column-header";
-import { toast } from "sonner";
 
 export type Participant = {
   id: string;

src/components/participants/participants-data-table.tsx

@@ -1,12 +1,13 @@
 "use client";
 
+import { Plus, Users } from "lucide-react";
 import React from "react";
-import Link from "next/link";
-import { Plus, Users, AlertCircle } from "lucide-react";
 
 import { Button } from "~/components/ui/button";
 import { DataTable } from "~/components/ui/data-table";
 
+import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
+import { ActionButton, PageHeader } from "~/components/ui/page-header";
 import {
   Select,
   SelectContent,
@@ -14,10 +15,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "~/components/ui/select";
-import { PageHeader, ActionButton } from "~/components/ui/page-header";
-import { useBreadcrumbsEffect } from "~/components/ui/breadcrumb-provider";
-import { participantsColumns, type Participant } from "./participants-columns";
 import { api } from "~/trpc/react";
+import { participantsColumns, type Participant } from "./participants-columns";
 
 export function ParticipantsDataTable() {
   const [consentFilter, setConsentFilter] = React.useState("all");