Add multi-tenancy with Teams feature
This commit is contained in:
Mondo Diaz
@@ -114,3 +114,32 @@
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Access source styling */
|
||||
.access-source {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.access-source--explicit {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.access-source--team {
|
||||
background: var(--color-info-bg, #e3f2fd);
|
||||
color: var(--color-info, #1976d2);
|
||||
}
|
||||
|
||||
/* Team access row styling */
|
||||
.team-access-row {
|
||||
background: var(--bg-secondary, #fafafa);
|
||||
}
|
||||
|
||||
.team-access-row td.actions .text-muted {
|
||||
font-size: 0.8125rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -208,85 +208,104 @@ export function AccessManagement({ projectName }: AccessManagementProps) {
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Access Level</th>
|
||||
<th>Source</th>
|
||||
<th>Granted</th>
|
||||
<th>Expires</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{permissions.map((p) => (
|
||||
<tr key={p.id}>
|
||||
<td>{p.user_id}</td>
|
||||
<td>
|
||||
{editingUser === p.user_id ? (
|
||||
<select
|
||||
value={editLevel}
|
||||
onChange={(e) => setEditLevel(e.target.value as AccessLevel)}
|
||||
disabled={submitting}
|
||||
>
|
||||
<option value="read">Read</option>
|
||||
<option value="write">Write</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className={`access-badge access-badge--${p.level}`}>
|
||||
{p.level}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{new Date(p.created_at).toLocaleDateString()}</td>
|
||||
<td>
|
||||
{editingUser === p.user_id ? (
|
||||
<input
|
||||
type="date"
|
||||
value={editExpiresAt}
|
||||
onChange={(e) => setEditExpiresAt(e.target.value)}
|
||||
disabled={submitting}
|
||||
min={new Date().toISOString().split('T')[0]}
|
||||
/>
|
||||
) : (
|
||||
formatExpiration(p.expires_at)
|
||||
)}
|
||||
</td>
|
||||
<td className="actions">
|
||||
{editingUser === p.user_id ? (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => handleUpdate(p.user_id)}
|
||||
{permissions.map((p) => {
|
||||
const isTeamBased = p.source === 'team';
|
||||
return (
|
||||
<tr key={p.id} className={isTeamBased ? 'team-access-row' : ''}>
|
||||
<td>{p.user_id}</td>
|
||||
<td>
|
||||
{editingUser === p.user_id && !isTeamBased ? (
|
||||
<select
|
||||
value={editLevel}
|
||||
onChange={(e) => setEditLevel(e.target.value as AccessLevel)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={cancelEdit}
|
||||
<option value="read">Read</option>
|
||||
<option value="write">Write</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className={`access-badge access-badge--${p.level}`}>
|
||||
{p.level}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{isTeamBased ? (
|
||||
<span className="access-source access-source--team" title={`Team role: ${p.team_role}`}>
|
||||
Team: {p.team_slug}
|
||||
</span>
|
||||
) : (
|
||||
<span className="access-source access-source--explicit">
|
||||
Explicit
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{new Date(p.created_at).toLocaleDateString()}</td>
|
||||
<td>
|
||||
{editingUser === p.user_id && !isTeamBased ? (
|
||||
<input
|
||||
type="date"
|
||||
value={editExpiresAt}
|
||||
onChange={(e) => setEditExpiresAt(e.target.value)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => startEdit(p)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleRevoke(p.user_id)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
min={new Date().toISOString().split('T')[0]}
|
||||
/>
|
||||
) : (
|
||||
formatExpiration(p.expires_at)
|
||||
)}
|
||||
</td>
|
||||
<td className="actions">
|
||||
{isTeamBased ? (
|
||||
<span className="text-muted" title="Manage access via team settings">
|
||||
Via team
|
||||
</span>
|
||||
) : editingUser === p.user_id ? (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => handleUpdate(p.user_id)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={cancelEdit}
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => startEdit(p)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleRevoke(p.user_id)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
@@ -284,7 +284,11 @@
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-icon {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
@@ -292,6 +296,10 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.footer-separator {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.footer-tagline {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
|
||||
@@ -2,6 +2,8 @@ import { ReactNode, useState, useRef, useEffect } from 'react';
|
||||
import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { GlobalSearch } from './GlobalSearch';
|
||||
import { listTeams } from '../api';
|
||||
import { TeamDetail } from '../types';
|
||||
import './Layout.css';
|
||||
|
||||
interface LayoutProps {
|
||||
@@ -13,8 +15,22 @@ function Layout({ children }: LayoutProps) {
|
||||
const navigate = useNavigate();
|
||||
const { user, loading, logout } = useAuth();
|
||||
const [showUserMenu, setShowUserMenu] = useState(false);
|
||||
const [userTeams, setUserTeams] = useState<TeamDetail[]>([]);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Fetch user's teams
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
listTeams({ limit: 10 }).then(data => {
|
||||
setUserTeams(data.items);
|
||||
}).catch(() => {
|
||||
setUserTeams([]);
|
||||
});
|
||||
} else {
|
||||
setUserTeams([]);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
// Close menu when clicking outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
@@ -77,6 +93,20 @@ function Layout({ children }: LayoutProps) {
|
||||
</svg>
|
||||
Dashboard
|
||||
</Link>
|
||||
{user && userTeams.length > 0 && (
|
||||
<Link
|
||||
to={userTeams.length === 1 ? `/teams/${userTeams[0].slug}` : '/teams'}
|
||||
className={location.pathname.startsWith('/teams') ? 'active' : ''}
|
||||
>
|
||||
<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>
|
||||
{userTeams.length === 1 ? 'Team' : 'Teams'}
|
||||
</Link>
|
||||
)}
|
||||
<a href="/docs" className="nav-link-muted">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
@@ -188,7 +218,17 @@ function Layout({ children }: LayoutProps) {
|
||||
<footer className="footer">
|
||||
<div className="container footer-content">
|
||||
<div className="footer-brand">
|
||||
<svg className="footer-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 14 Q6 8 3 8 Q6 4 6 4 Q6 4 9 8 Q6 8 6 14" fill="currentColor" opacity="0.6"/>
|
||||
<rect x="5.25" y="13" width="1.5" height="4" fill="currentColor" opacity="0.6"/>
|
||||
<path d="M12 12 Q12 5 8 5 Q12 1 12 1 Q12 1 16 5 Q12 5 12 12" fill="currentColor"/>
|
||||
<rect x="11.25" y="11" width="1.5" height="5" fill="currentColor"/>
|
||||
<path d="M18 14 Q18 8 15 8 Q18 4 18 4 Q18 4 21 8 Q18 8 18 14" fill="currentColor" opacity="0.6"/>
|
||||
<rect x="17.25" y="13" width="1.5" height="4" fill="currentColor" opacity="0.6"/>
|
||||
<ellipse cx="12" cy="19" rx="9" ry="1.5" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
<span className="footer-logo">Orchard</span>
|
||||
<span className="footer-separator">·</span>
|
||||
<span className="footer-tagline">Content-Addressable Storage</span>
|
||||
</div>
|
||||
<div className="footer-links">
|
||||
|
||||
163
frontend/src/components/TeamSelector.css
Normal file
163
frontend/src/components/TeamSelector.css
Normal file
@@ -0,0 +1,163 @@
|
||||
.team-selector {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.team-selector-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.team-selector-trigger:hover:not(:disabled) {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-secondary);
|
||||
}
|
||||
|
||||
.team-selector-trigger:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.team-selector-name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.team-selector-chevron {
|
||||
transition: transform 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.team-selector-chevron.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.team-selector-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-width: 240px;
|
||||
margin-top: 0.25rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.team-selector-empty {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.team-selector-empty p {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.team-selector-create-link {
|
||||
color: var(--accent-primary);
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.team-selector-create-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.team-selector-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.25rem 0;
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.team-selector-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.team-selector-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.team-selector-item.selected {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.team-selector-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.team-selector-item-name {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.team-selector-item-meta {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.team-selector-item-role {
|
||||
font-size: 0.75rem;
|
||||
text-transform: capitalize;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.team-selector-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.team-selector-link {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.team-selector-link:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.team-selector-link-primary {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.team-selector-link-primary:hover {
|
||||
color: var(--accent-primary-hover);
|
||||
}
|
||||
141
frontend/src/components/TeamSelector.tsx
Normal file
141
frontend/src/components/TeamSelector.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
105
frontend/src/components/UserAutocomplete.css
Normal file
105
frontend/src/components/UserAutocomplete.css
Normal file
@@ -0,0 +1,105 @@
|
||||
.user-autocomplete {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-autocomplete__input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-autocomplete__input {
|
||||
width: 100%;
|
||||
padding: 0.625rem 2.5rem 0.625rem 0.75rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.user-autocomplete__input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.user-autocomplete__spinner {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--border-primary);
|
||||
border-top-color: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: translateY(-50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
.user-autocomplete__dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 4px;
|
||||
padding: 0.25rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 100;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.user-autocomplete__option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.user-autocomplete__option:hover,
|
||||
.user-autocomplete__option.selected {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.user-autocomplete__avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-autocomplete__user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-autocomplete__username {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.user-autocomplete__admin-badge {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
171
frontend/src/components/UserAutocomplete.tsx
Normal file
171
frontend/src/components/UserAutocomplete.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { searchUsers, UserSearchResult } from '../api';
|
||||
import './UserAutocomplete.css';
|
||||
|
||||
interface UserAutocompleteProps {
|
||||
value: string;
|
||||
onChange: (username: string) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
autoFocus?: boolean;
|
||||
}
|
||||
|
||||
export function UserAutocomplete({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Search users...',
|
||||
disabled = false,
|
||||
autoFocus = false,
|
||||
}: UserAutocompleteProps) {
|
||||
const [query, setQuery] = useState(value);
|
||||
const [results, setResults] = useState<UserSearchResult[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>();
|
||||
|
||||
// Search for users with debounce
|
||||
const doSearch = useCallback(async (searchQuery: string) => {
|
||||
if (searchQuery.length < 1) {
|
||||
setResults([]);
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const users = await searchUsers(searchQuery);
|
||||
setResults(users);
|
||||
setIsOpen(users.length > 0);
|
||||
setSelectedIndex(-1);
|
||||
} catch {
|
||||
setResults([]);
|
||||
setIsOpen(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Handle input change with debounce
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = e.target.value;
|
||||
setQuery(newValue);
|
||||
onChange(newValue); // Update parent immediately for form validation
|
||||
|
||||
// Debounce the search
|
||||
if (debounceRef.current) {
|
||||
clearTimeout(debounceRef.current);
|
||||
}
|
||||
debounceRef.current = setTimeout(() => {
|
||||
doSearch(newValue);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
// Handle selecting a user
|
||||
const handleSelect = (user: UserSearchResult) => {
|
||||
setQuery(user.username);
|
||||
onChange(user.username);
|
||||
setIsOpen(false);
|
||||
setResults([]);
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
// Handle keyboard navigation
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (!isOpen) return;
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
setSelectedIndex(prev => (prev < results.length - 1 ? prev + 1 : prev));
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
setSelectedIndex(prev => (prev > 0 ? prev - 1 : -1));
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (selectedIndex >= 0 && results[selectedIndex]) {
|
||||
handleSelect(results[selectedIndex]);
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
setIsOpen(false);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Sync external value changes
|
||||
useEffect(() => {
|
||||
setQuery(value);
|
||||
}, [value]);
|
||||
|
||||
// Cleanup debounce on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceRef.current) {
|
||||
clearTimeout(debounceRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="user-autocomplete" ref={containerRef}>
|
||||
<div className="user-autocomplete__input-wrapper">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={() => query.length >= 1 && results.length > 0 && setIsOpen(true)}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
autoFocus={autoFocus}
|
||||
autoComplete="off"
|
||||
className="user-autocomplete__input"
|
||||
/>
|
||||
{loading && (
|
||||
<div className="user-autocomplete__spinner" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isOpen && results.length > 0 && (
|
||||
<ul className="user-autocomplete__dropdown">
|
||||
{results.map((user, index) => (
|
||||
<li
|
||||
key={user.id}
|
||||
className={`user-autocomplete__option ${index === selectedIndex ? 'selected' : ''}`}
|
||||
onClick={() => handleSelect(user)}
|
||||
onMouseEnter={() => setSelectedIndex(index)}
|
||||
>
|
||||
<div className="user-autocomplete__avatar">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div className="user-autocomplete__user-info">
|
||||
<span className="user-autocomplete__username">{user.username}</span>
|
||||
{user.is_admin && (
|
||||
<span className="user-autocomplete__admin-badge">Admin</span>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user