feat(web): add workspace management UI (M2 #12)

- Create workspace listing page at /settings/workspaces - List all user workspaces with role badges - Create new workspace functionality - Display member count per workspace - Create workspace detail page at /settings/workspaces/[id] - Workspace settings (name, ID, created date) - Member management with role editing - Invite member functionality - Delete workspace (owner only) - Add workspace components: - WorkspaceCard: Display workspace info with role badge - WorkspaceSettings: Edit workspace settings and delete - MemberList: Display and manage workspace members - InviteMember: Send invitations with role selection - Add WorkspaceMemberWithUser type to shared package - Follow existing app patterns for styling and structure - Use mock data (ready for API integration)
2026-01-29 16:59:26 -06:00
parent 287a0e2556
commit 5291fece26
43 changed files with 4152 additions and 99 deletions
--- a/apps/web/src/components/workspace/InviteMember.tsx
+++ b/apps/web/src/components/workspace/InviteMember.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { WorkspaceMemberRole } from "@mosaic/shared";
+
+interface InviteMemberProps {
+  onInvite: (email: string, role: WorkspaceMemberRole) => Promise<void>;
+}
+
+export function InviteMember({ onInvite }: InviteMemberProps) {
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<WorkspaceMemberRole>(WorkspaceMemberRole.MEMBER);
+  const [isInviting, setIsInviting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!email.trim()) {
+      setError("Email is required");
+      return;
+    }
+
+    if (!email.includes("@")) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    setIsInviting(true);
+    try {
+      await onInvite(email.trim(), role);
+      setEmail("");
+      setRole(WorkspaceMemberRole.MEMBER);
+      alert("Invitation sent successfully!");
+    } catch (error) {
+      console.error("Failed to invite member:", error);
+      setError(
+        error instanceof Error
+          ? error.message
+          : "Failed to send invitation. Please try again."
+      );
+    } finally {
+      setIsInviting(false);
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h2 className="text-lg font-semibold text-gray-900 mb-4">
+        Invite Member
+      </h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label
+            htmlFor="email"
+            className="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Email Address
+          </label>
+          <input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="colleague@example.com"
+            disabled={isInviting}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="role"
+            className="block text-sm font-medium text-gray-700 mb-2"
+          >
+            Role
+          </label>
+          <select
+            id="role"
+            value={role}
+            onChange={(e) => setRole(e.target.value as WorkspaceMemberRole)}
+            disabled={isInviting}
+            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100"
+          >
+            <option value={WorkspaceMemberRole.ADMIN}>
+              Admin - Can manage workspace and members
+            </option>
+            <option value={WorkspaceMemberRole.MEMBER}>
+              Member - Can create and edit content
+            </option>
+            <option value={WorkspaceMemberRole.GUEST}>
+              Guest - View-only access
+            </option>
+          </select>
+        </div>
+
+        {error && (
+          <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+            <p className="text-sm text-red-700">{error}</p>
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={isInviting}
+          className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isInviting ? "Sending Invitation..." : "Send Invitation"}
+        </button>
+      </form>
+
+      <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+        <p className="text-sm text-blue-800">
+          💡 The invited user will receive an email with instructions to join
+          this workspace.
+        </p>
+      </div>
+    </div>
+  );
+}