Add multi-tenancy with Teams feature

2026-01-28 12:50:58 -06:00
parent a5796f5437
commit 576791d19e
33 changed files with 5493 additions and 115 deletions
--- a/frontend/src/components/TeamSelector.tsx
+++ b/frontend/src/components/TeamSelector.tsx
@@ -0,0 +1,141 @@
+import { useState, useRef, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { useTeam } from '../contexts/TeamContext';
+import { useAuth } from '../contexts/AuthContext';
+import { TeamDetail } from '../types';
+import './TeamSelector.css';
+
+export function TeamSelector() {
+  const { user } = useAuth();
+  const { teams, currentTeam, loading, setCurrentTeam } = useTeam();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Don't show if not authenticated
+  if (!user) {
+    return null;
+  }
+
+  const handleTeamSelect = (team: TeamDetail) => {
+    setCurrentTeam(team);
+    setIsOpen(false);
+  };
+
+  const roleColors: Record<string, string> = {
+    owner: 'var(--color-success)',
+    admin: 'var(--color-primary)',
+    member: 'var(--color-text-muted)',
+  };
+
+  return (
+    <div className="team-selector" ref={dropdownRef}>
+      <button
+        className="team-selector-trigger"
+        onClick={() => setIsOpen(!isOpen)}
+        disabled={loading}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+          <circle cx="9" cy="7" r="4"/>
+          <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+          <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+        </svg>
+        <span className="team-selector-name">
+          {loading ? 'Loading...' : currentTeam?.name || 'Select Team'}
+        </span>
+        <svg
+          className={`team-selector-chevron ${isOpen ? 'open' : ''}`}
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <polyline points="6 9 12 15 18 9"/>
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="team-selector-dropdown" role="listbox">
+          {teams.length === 0 ? (
+            <div className="team-selector-empty">
+              <p>You're not a member of any teams yet.</p>
+              <Link
+                to="/teams/new"
+                className="team-selector-create-link"
+                onClick={() => setIsOpen(false)}
+              >
+                Create your first team
+              </Link>
+            </div>
+          ) : (
+            <>
+              <ul className="team-selector-list">
+                {teams.map(team => (
+                  <li key={team.id}>
+                    <button
+                      className={`team-selector-item ${currentTeam?.id === team.id ? 'selected' : ''}`}
+                      onClick={() => handleTeamSelect(team)}
+                      role="option"
+                      aria-selected={currentTeam?.id === team.id}
+                    >
+                      <div className="team-selector-item-info">
+                        <span className="team-selector-item-name">{team.name}</span>
+                        <span className="team-selector-item-meta">
+                          {team.project_count} project{team.project_count !== 1 ? 's' : ''}
+                        </span>
+                      </div>
+                      {team.user_role && (
+                        <span
+                          className="team-selector-item-role"
+                          style={{ color: roleColors[team.user_role] || roleColors.member }}
+                        >
+                          {team.user_role}
+                        </span>
+                      )}
+                      {currentTeam?.id === team.id && (
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                          <polyline points="20 6 9 17 4 12"/>
+                        </svg>
+                      )}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+              <div className="team-selector-footer">
+                <Link
+                  to="/teams"
+                  className="team-selector-link"
+                  onClick={() => setIsOpen(false)}
+                >
+                  View all teams
+                </Link>
+                <Link
+                  to="/teams/new"
+                  className="team-selector-link team-selector-link-primary"
+                  onClick={() => setIsOpen(false)}
+                >
+                  + New Team
+                </Link>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}