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)

apps/web/src/components/team/TeamCard.tsx

@@ -0,0 +1,32 @@
+import type { Team } from "@mosaic/shared";
+import { Card, CardHeader, CardContent } from "@mosaic/ui";
+import Link from "next/link";
+
+interface TeamCardProps {
+  team: Team;
+  workspaceId: string;
+}
+
+export function TeamCard({ team, workspaceId }: TeamCardProps) {
+  return (
+    <Link href={`/settings/workspaces/${workspaceId}/teams/${team.id}`}>
+      <Card className="hover:shadow-lg transition-shadow cursor-pointer">
+        <CardHeader>
+          <h3 className="text-lg font-semibold text-gray-900">{team.name}</h3>
+        </CardHeader>
+        <CardContent>
+          {team.description ? (
+            <p className="text-sm text-gray-600">{team.description}</p>
+          ) : (
+            <p className="text-sm text-gray-400 italic">No description</p>
+          )}
+          <div className="mt-3 flex items-center gap-2 text-xs text-gray-500">
+            <span>
+              Created {new Date(team.createdAt).toLocaleDateString()}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}