Phase 3C — Commit Summary
feat: workspaces — collaborative repo namespaces Backend - internal/models/workspace.go — Workspace (handle, displayName, description, createdBy) + WorkspaceMember (workspaceId, userId, username, role: owner/admin/member) - internal/models/repo.go — added nullable workspace_id column; existing user repos unaffected - internal/models/migrations/011_workspaces.go — syncs both tables + adds column to repository - internal/api/handlers/workspace.go — ListWorkspaces, CreateWorkspace, GetWorkspace, UpdateWorkspace, DeleteWorkspace (blocks if repos remain), ListRepos, ListMembers, AddMember, UpdateMember, RemoveMember - internal/api/handlers/repos.go — lookupRepo resolves workspace handles; Create accepts workspace field; List includes workspace member repos; withOwnerName uses workspace handle for workspace-owned repos - internal/api/handlers/dashboard.go — recentRuns + repo list include workspace repos the user is a member of - internal/api/router.go — /workspaces, /workspaces/:handle/* routes Workspace rules enforced: - Handle globally unique across usernames + workspace handles (409 on collision) - Creator auto-assigned owner role - Delete blocked if repos exist - Last owner cannot be demoted/removed --- feat: secret management hierarchy (Global → Workspace → Repo → Env) Backend - internal/models/secret.go — Secret struct + EncryptSecret/DecryptSecret with AES-256-GCM (key = SHA-256 of SESSION_SECRET); values never serialised to JSON - internal/models/migrations/012_secrets.go — syncs secret table - internal/api/handlers/secret.go — List/Upsert/Delete for all four scopes; ResolveSecretsForRun builds merged env map for CI - internal/domain/ci/executor.go — JobContext.Secrets field; secrets injected as --env KEY=VALUE into docker run; buildJobContext calls resolveSecrets(Global < Workspace < Repo < Env) - internal/domain/ci/runner_manager.go — passes cfg.SessionSecret to buildJobContext - internal/api/router.go — /repos/:owner/:repo/secrets, /environments/:envName/secrets, /workspaces/:handle/secrets, /admin/secrets --- feat: workspace + secret management UI Frontend - types/api.ts — Workspace, WorkspaceWithMeta, WorkspaceMember, SecretListItem types - api/queries/workspaces.ts — full CRUD hooks + WorkspaceRepo type - api/queries/secrets.ts — repo/env/workspace secret hooks - pages/WorkspacesPage.tsx — list + create modal - pages/WorkspacePage.tsx — workspace dashboard with repo list - pages/WorkspaceSettingsPage.tsx — general settings, members CRUD, workspace secrets, danger zone - pages/RepoSecretsPage.tsx — repo secrets + per-environment secret sections with priority hierarchy callout - pages/CreateRepoPage.tsx — ?workspace= query param pre-fills owner selector; only admin/owner workspaces shown - components/layout/Sidebar.tsx — "Workspaces" global nav item + workspace quick-links; "Secrets" in RepoSubNav; new SecretsIcon, WorkspaceIcon - App.tsx — routes for /workspaces, /workspaces/:handle, /workspaces/:handle/settings, /repos/:owner/:repo/secrets
This commit is contained in:
@@ -1,12 +1,16 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import { useCreateRepo } from '../api/queries/repos'
|
||||
import { useWorkspaces } from '../api/queries/workspaces'
|
||||
|
||||
export default function CreateRepoPage() {
|
||||
const navigate = useNavigate()
|
||||
const [searchParams] = useSearchParams()
|
||||
const createRepo = useCreateRepo()
|
||||
const { data: workspaces } = useWorkspaces()
|
||||
|
||||
const [name, setName] = useState('')
|
||||
const [workspace, setWorkspace] = useState(searchParams.get('workspace') ?? '')
|
||||
const [isPrivate, setIsPrivate] = useState(true)
|
||||
const [initReadme, setInitReadme] = useState<'none' | 'blank' | 'tutorial'>('none')
|
||||
const [defaultBranch, setDefaultBranch] = useState('')
|
||||
@@ -24,6 +28,7 @@ export default function CreateRepoPage() {
|
||||
defaultBranch: defaultBranch.trim() || 'main',
|
||||
initReadme,
|
||||
initGitignore,
|
||||
workspace: workspace || undefined,
|
||||
})
|
||||
navigate(`/repos/${repo.ownerName}/${repo.name}`)
|
||||
}
|
||||
@@ -41,6 +46,24 @@ export default function CreateRepoPage() {
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
|
||||
{/* Owner */}
|
||||
{workspaces && workspaces.length > 0 && (
|
||||
<Field label="Owner">
|
||||
<select
|
||||
value={workspace}
|
||||
onChange={e => setWorkspace(e.target.value)}
|
||||
className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm focus:outline-none focus:border-[var(--c-brand-focus)] bg-[var(--c-surface)]"
|
||||
>
|
||||
<option value="">My account (personal)</option>
|
||||
{workspaces.filter(ws => ws.myRole === 'owner' || ws.myRole === 'admin').map(ws => (
|
||||
<option key={ws.id} value={ws.handle}>
|
||||
{ws.displayName || ws.handle} (workspace)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{/* Repository name */}
|
||||
<Field label="Repository name" required>
|
||||
<input
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
import { useState } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import {
|
||||
useRepoSecrets, useUpsertRepoSecret, useDeleteRepoSecret,
|
||||
} from '../api/queries/secrets'
|
||||
import { useEnvironments } from '../api/queries/environments'
|
||||
import {
|
||||
useEnvSecrets, useUpsertEnvSecret, useDeleteEnvSecret,
|
||||
} from '../api/queries/secrets'
|
||||
import { Skeleton } from '../ui/Skeleton'
|
||||
import type { SecretListItem } from '../types/api'
|
||||
|
||||
// ── Shared secret table ───────────────────────────────────────────────────────
|
||||
|
||||
function SecretTable({
|
||||
secrets,
|
||||
onDelete,
|
||||
isLoading,
|
||||
}: {
|
||||
secrets: SecretListItem[] | undefined
|
||||
onDelete: (name: string) => void
|
||||
isLoading: boolean
|
||||
}) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{[1, 2].map(i => <Skeleton key={i} className="h-10 rounded" />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (!secrets?.length) {
|
||||
return <p className="text-xs text-[var(--c-muted)] py-2">No secrets defined.</p>
|
||||
}
|
||||
return (
|
||||
<div className="divide-y divide-[var(--c-border)] border border-[var(--c-border)] rounded-lg overflow-hidden">
|
||||
{secrets.map(s => (
|
||||
<div key={s.id} className="flex items-center gap-3 px-4 py-2.5">
|
||||
<code className="flex-1 text-xs font-mono text-[var(--c-text)]">{s.name}</code>
|
||||
<span className="text-[10px] text-[var(--c-muted)] font-mono">••••••••</span>
|
||||
<button
|
||||
onClick={() => onDelete(s.name)}
|
||||
className="text-[var(--c-muted)] hover:text-[var(--c-danger)] transition-colors p-1"
|
||||
title="Delete secret"
|
||||
>
|
||||
<svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AddSecretForm({
|
||||
onSubmit,
|
||||
isPending,
|
||||
error,
|
||||
}: {
|
||||
onSubmit: (name: string, value: string) => void
|
||||
isPending: boolean
|
||||
error?: string
|
||||
}) {
|
||||
const [name, setName] = useState('')
|
||||
const [value, setValue] = useState('')
|
||||
|
||||
function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!name.trim() || !value.trim()) return
|
||||
onSubmit(name.trim(), value.trim())
|
||||
setName('')
|
||||
setValue('')
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={submit} className="flex items-center gap-2 mt-3">
|
||||
<input
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, '_'))}
|
||||
placeholder="SECRET_NAME"
|
||||
className="w-44 px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)] font-mono"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={value}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
placeholder="Secret value"
|
||||
className="flex-1 px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!name.trim() || !value.trim() || isPending}
|
||||
className="px-3 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isPending ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
{error && <p className="text-xs text-[var(--c-danger)]">{error}</p>}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Env secrets sub-section ───────────────────────────────────────────────────
|
||||
|
||||
function EnvSecretsSection({ owner, repo, envName }: { owner: string; repo: string; envName: string }) {
|
||||
const { data: secrets, isLoading } = useEnvSecrets(owner, repo, envName)
|
||||
const upsert = useUpsertEnvSecret(owner, repo, envName)
|
||||
const del = useDeleteEnvSecret(owner, repo, envName)
|
||||
|
||||
return (
|
||||
<div className="border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-[var(--c-border)] bg-[var(--c-surface-raised)] flex items-center gap-2">
|
||||
<svg width="13" height="13" fill="none" stroke="var(--c-muted)" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 6 0m-6 0H3m16.5 0a3 3 0 0 0-3-3m3 3a3 3 0 1 1-6 0m6 0h1.5m-7.5 0h-3" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-[var(--c-text)]">{envName}</span>
|
||||
<span className="text-[10px] text-[var(--c-muted)] ml-auto">env-level override</span>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<SecretTable secrets={secrets} onDelete={name => del.mutate(name)} isLoading={isLoading} />
|
||||
<AddSecretForm
|
||||
onSubmit={(name, value) => upsert.mutate({ name, value })}
|
||||
isPending={upsert.isPending}
|
||||
error={(upsert.error as Error)?.message}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Page ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function RepoSecretsPage() {
|
||||
const { owner = '', repo = '' } = useParams()
|
||||
const { data: repoSecrets, isLoading: loadingRepo } = useRepoSecrets(owner, repo)
|
||||
const upsertRepo = useUpsertRepoSecret(owner, repo)
|
||||
const deleteRepo = useDeleteRepoSecret(owner, repo)
|
||||
const { data: environments } = useEnvironments(owner, repo)
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6 py-5 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-[var(--c-text)]">Secrets</h1>
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5">
|
||||
Secrets are injected as environment variables into CI pipeline jobs. Values are write-only.
|
||||
</p>
|
||||
<div className="mt-2 p-3 border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[10px] text-[var(--c-muted)]">
|
||||
<strong className="text-[var(--c-text)]">Priority order:</strong>{' '}
|
||||
Environment secrets → Repository secrets → Workspace secrets → Global secrets.
|
||||
Higher-priority secrets with the same name override lower ones.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Repository-level secrets */}
|
||||
<section>
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-[var(--c-muted)] mb-3">
|
||||
Repository secrets
|
||||
</h2>
|
||||
<div className="border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] overflow-hidden">
|
||||
<div className="p-4">
|
||||
<SecretTable
|
||||
secrets={repoSecrets}
|
||||
onDelete={name => deleteRepo.mutate(name)}
|
||||
isLoading={loadingRepo}
|
||||
/>
|
||||
<AddSecretForm
|
||||
onSubmit={(name, value) => upsertRepo.mutate({ name, value })}
|
||||
isPending={upsertRepo.isPending}
|
||||
error={(upsertRepo.error as Error)?.message}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Environment-level secrets */}
|
||||
{environments && environments.length > 0 && (
|
||||
<section>
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-[var(--c-muted)] mb-3">
|
||||
Environment secrets
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{environments.map(env => (
|
||||
<EnvSecretsSection
|
||||
key={env.id}
|
||||
owner={owner}
|
||||
repo={repo}
|
||||
envName={env.name}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { useWorkspace, useWorkspaceRepos, type WorkspaceRepo } from '../api/queries/workspaces'
|
||||
import { Skeleton } from '../ui/Skeleton'
|
||||
|
||||
function timeAgo(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime()
|
||||
const min = Math.floor(diff / 60_000)
|
||||
if (min < 60) return `${Math.max(1, min)}m ago`
|
||||
const hr = Math.floor(min / 60)
|
||||
if (hr < 24) return `${hr}h ago`
|
||||
return `${Math.floor(hr / 24)}d ago`
|
||||
}
|
||||
|
||||
export default function WorkspacePage() {
|
||||
const { handle = '' } = useParams()
|
||||
const { data: ws, isLoading } = useWorkspace(handle)
|
||||
const { data: repos } = useWorkspaceRepos(handle)
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 md:px-6 py-5 space-y-4">
|
||||
<Skeleton className="h-6 w-48 rounded" />
|
||||
<Skeleton className="h-4 w-72 rounded" />
|
||||
<div className="space-y-3 mt-6">
|
||||
{[1, 2, 3].map(i => <Skeleton key={i} className="h-16 rounded-lg" />)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!ws) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-24 gap-2">
|
||||
<p className="text-sm text-[var(--c-muted)]">Workspace not found.</p>
|
||||
<Link to="/workspaces" className="text-xs text-[var(--c-brand)] hover:underline">← All workspaces</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const canAdmin = ws.myRole === 'owner' || ws.myRole === 'admin'
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 md:px-6 py-5 space-y-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-xl bg-[var(--c-brand)] flex items-center justify-center text-white text-lg font-bold shrink-0">
|
||||
{ws.displayName?.[0]?.toUpperCase() || ws.handle[0].toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-[var(--c-text)]">{ws.displayName || ws.handle}</h1>
|
||||
<div className="flex items-center gap-2 text-xs text-[var(--c-muted)]">
|
||||
<span className="font-mono">@{ws.handle}</span>
|
||||
<span>·</span>
|
||||
<span>{ws.memberCount} member{ws.memberCount !== 1 ? 's' : ''}</span>
|
||||
<span>·</span>
|
||||
<span>{ws.repoCount} repo{ws.repoCount !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
{ws.description && <p className="text-xs text-[var(--c-muted)] mt-0.5">{ws.description}</p>}
|
||||
</div>
|
||||
</div>
|
||||
{canAdmin && (
|
||||
<Link
|
||||
to={`/workspaces/${handle}/settings`}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border border-[var(--c-border)] rounded-lg text-[var(--c-text)] hover:border-[var(--c-brand-focus)] hover:text-[var(--c-brand)] transition-colors"
|
||||
>
|
||||
<svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
Settings
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Repositories */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-2.5">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-[var(--c-muted)]">Repositories</h2>
|
||||
{canAdmin && (
|
||||
<Link
|
||||
to={`/repos/new?workspace=${handle}`}
|
||||
className="text-[10px] text-[var(--c-brand)] hover:underline"
|
||||
>
|
||||
+ New repo
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] divide-y divide-[var(--c-border)] overflow-hidden">
|
||||
{!repos?.length ? (
|
||||
<div className="px-4 py-8 text-center text-xs text-[var(--c-muted)]">
|
||||
No repositories yet.{' '}
|
||||
{canAdmin && (
|
||||
<Link to={`/repos/new?workspace=${handle}`} className="text-[var(--c-brand)] hover:underline">
|
||||
Create the first one
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
(repos as WorkspaceRepo[]).map(repo => (
|
||||
<Link
|
||||
key={repo.id}
|
||||
to={`/repos/${handle}/${repo.name}`}
|
||||
className="flex items-center gap-3 px-4 py-3 hover:bg-[var(--c-surface-muted)] transition-colors group"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-[var(--c-text)] group-hover:text-[var(--c-brand)] transition-colors">
|
||||
{repo.name}
|
||||
</span>
|
||||
{repo.isPrivate && (
|
||||
<span className="text-[9px] font-semibold uppercase tracking-wider border border-[var(--c-border)] text-[var(--c-muted)] px-1 py-px rounded">private</span>
|
||||
)}
|
||||
</div>
|
||||
{repo.description && (
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5 truncate">{repo.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] text-[var(--c-subtle)] shrink-0">{timeAgo(repo.updatedAt)}</span>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
import { useState } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
useWorkspace, useWorkspaceMembers, useUpdateWorkspace,
|
||||
useDeleteWorkspace, useAddWorkspaceMember, useUpdateWorkspaceMember,
|
||||
useRemoveWorkspaceMember,
|
||||
} from '../api/queries/workspaces'
|
||||
import {
|
||||
useWorkspaceSecrets, useUpsertWorkspaceSecret, useDeleteWorkspaceSecret,
|
||||
} from '../api/queries/secrets'
|
||||
import { Skeleton } from '../ui/Skeleton'
|
||||
import type { WorkspaceMember } from '../types/api'
|
||||
|
||||
// ── Shared section wrapper ───────────────────────────────────────────────────
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<section className="border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-[var(--c-border)] bg-[var(--c-surface-raised)]">
|
||||
<h2 className="text-sm font-semibold text-[var(--c-text)]">{title}</h2>
|
||||
</div>
|
||||
<div className="p-4">{children}</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── General settings ─────────────────────────────────────────────────────────
|
||||
|
||||
function GeneralSection({ handle }: { handle: string }) {
|
||||
const { data: ws } = useWorkspace(handle)
|
||||
const update = useUpdateWorkspace(handle)
|
||||
const [displayName, setDisplayName] = useState(ws?.displayName ?? '')
|
||||
const [description, setDescription] = useState(ws?.description ?? '')
|
||||
|
||||
function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
update.mutate({ displayName, description })
|
||||
}
|
||||
|
||||
return (
|
||||
<Section title="General">
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--c-text)] mb-1.5">Display name</label>
|
||||
<input
|
||||
value={displayName}
|
||||
onChange={e => setDisplayName(e.target.value)}
|
||||
placeholder={handle}
|
||||
className="w-full px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--c-text)] mb-1.5">Description</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)] resize-y"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={update.isPending}
|
||||
className="px-4 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{update.isPending ? 'Saving…' : 'Save changes'}
|
||||
</button>
|
||||
</form>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Members ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function MembersSection({ handle, myRole }: { handle: string; myRole: string }) {
|
||||
const { data: members } = useWorkspaceMembers(handle)
|
||||
const addMember = useAddWorkspaceMember(handle)
|
||||
const updateMember = useUpdateWorkspaceMember(handle)
|
||||
const removeMember = useRemoveWorkspaceMember(handle)
|
||||
const [username, setUsername] = useState('')
|
||||
const [role, setRole] = useState('member')
|
||||
const canEdit = myRole === 'owner' || myRole === 'admin'
|
||||
|
||||
function add(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!username.trim()) return
|
||||
addMember.mutate({ username: username.trim(), role }, { onSuccess: () => setUsername('') })
|
||||
}
|
||||
|
||||
const ROLES = ['owner', 'admin', 'member']
|
||||
const roleBadge: Record<string, string> = {
|
||||
owner: 'bg-[var(--c-brand-tint)] text-[var(--c-brand)] border-[var(--c-brand-focus)]',
|
||||
admin: 'bg-[#FFFAE6] text-[#B45309] border-[#F59E0B]/40',
|
||||
member: 'bg-[var(--c-surface-muted)] text-[var(--c-muted)] border-[var(--c-border)]',
|
||||
}
|
||||
|
||||
return (
|
||||
<Section title="Members">
|
||||
<div className="space-y-3">
|
||||
{/* Member list */}
|
||||
<div className="divide-y divide-[var(--c-border)] border border-[var(--c-border)] rounded-lg overflow-hidden">
|
||||
{!members?.length ? (
|
||||
<p className="px-4 py-3 text-xs text-[var(--c-muted)]">No members.</p>
|
||||
) : (
|
||||
members.map((m: WorkspaceMember) => (
|
||||
<div key={m.id} className="flex items-center gap-3 px-4 py-2.5">
|
||||
<div className="w-7 h-7 rounded-full bg-[var(--c-brand)] flex items-center justify-center text-white text-[11px] font-bold shrink-0">
|
||||
{m.username[0].toUpperCase()}
|
||||
</div>
|
||||
<span className="flex-1 text-sm text-[var(--c-text)]">{m.username}</span>
|
||||
{canEdit ? (
|
||||
<select
|
||||
value={m.role}
|
||||
onChange={e => updateMember.mutate({ username: m.username, role: e.target.value })}
|
||||
className="text-xs border border-[var(--c-border)] rounded px-2 py-1 bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
>
|
||||
{ROLES.map(r => <option key={r} value={r}>{r}</option>)}
|
||||
</select>
|
||||
) : (
|
||||
<span className={`text-[10px] font-semibold px-2 py-0.5 rounded border capitalize ${roleBadge[m.role] || roleBadge.member}`}>
|
||||
{m.role}
|
||||
</span>
|
||||
)}
|
||||
{canEdit && (
|
||||
<button
|
||||
onClick={() => removeMember.mutate(m.username)}
|
||||
className="text-[var(--c-muted)] hover:text-[var(--c-danger)] transition-colors p-1"
|
||||
title="Remove member"
|
||||
>
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add member form */}
|
||||
{canEdit && (
|
||||
<form onSubmit={add} className="flex items-center gap-2">
|
||||
<input
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
placeholder="Username to add"
|
||||
className="flex-1 px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
<select
|
||||
value={role}
|
||||
onChange={e => setRole(e.target.value)}
|
||||
className="px-2 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
>
|
||||
<option value="member">Member</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!username.trim() || addMember.isPending}
|
||||
className="px-3 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
{addMember.isError && (
|
||||
<p className="text-xs text-[var(--c-danger)]">{(addMember.error as Error)?.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Secrets ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function SecretsSection({ handle }: { handle: string }) {
|
||||
const { data: secrets } = useWorkspaceSecrets(handle)
|
||||
const upsert = useUpsertWorkspaceSecret(handle)
|
||||
const del = useDeleteWorkspaceSecret(handle)
|
||||
const [name, setName] = useState('')
|
||||
const [value, setValue] = useState('')
|
||||
|
||||
function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!name.trim() || !value.trim()) return
|
||||
upsert.mutate({ name: name.trim(), value: value.trim() }, {
|
||||
onSuccess: () => { setName(''); setValue('') },
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Section title="Secrets">
|
||||
<p className="text-xs text-[var(--c-muted)] mb-3">
|
||||
Secrets are available to all CI pipelines in this workspace's repositories. Values are write-only and never displayed after creation.
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<div className="divide-y divide-[var(--c-border)] border border-[var(--c-border)] rounded-lg overflow-hidden">
|
||||
{!secrets?.length ? (
|
||||
<p className="px-4 py-3 text-xs text-[var(--c-muted)]">No workspace secrets.</p>
|
||||
) : (
|
||||
secrets.map(s => (
|
||||
<div key={s.id} className="flex items-center gap-3 px-4 py-2.5">
|
||||
<code className="flex-1 text-xs font-mono text-[var(--c-text)]">{s.name}</code>
|
||||
<span className="text-[10px] text-[var(--c-muted)]">••••••••</span>
|
||||
<button
|
||||
onClick={() => del.mutate(s.name)}
|
||||
className="text-[var(--c-muted)] hover:text-[var(--c-danger)] transition-colors p-1"
|
||||
>
|
||||
<svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<form onSubmit={submit} className="flex items-center gap-2">
|
||||
<input
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, '_'))}
|
||||
placeholder="SECRET_NAME"
|
||||
className="w-40 px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)] font-mono"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={value}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
placeholder="Secret value"
|
||||
className="flex-1 px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!name.trim() || !value.trim() || upsert.isPending}
|
||||
className="px-3 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Danger zone ───────────────────────────────────────────────────────────────
|
||||
|
||||
function DangerSection({ handle, myRole }: { handle: string; myRole: string }) {
|
||||
const del = useDeleteWorkspace(handle)
|
||||
const navigate = useNavigate()
|
||||
|
||||
if (myRole !== 'owner') return null
|
||||
|
||||
return (
|
||||
<Section title="Danger zone">
|
||||
<div className="flex items-center justify-between gap-4 p-3 border border-[var(--c-danger)]/30 rounded-lg bg-[var(--c-danger-tint)]">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--c-text)]">Delete workspace</p>
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5">
|
||||
Permanently deletes the workspace and all membership. Repos must be deleted first.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm(`Delete workspace "${handle}"? This cannot be undone.`)) {
|
||||
del.mutate(undefined, { onSuccess: () => navigate('/workspaces') })
|
||||
}
|
||||
}}
|
||||
disabled={del.isPending}
|
||||
className="px-3 py-2 text-sm font-medium border border-[var(--c-danger)] text-[var(--c-danger)] rounded-lg hover:bg-[var(--c-danger)] hover:text-white transition-colors disabled:opacity-50 shrink-0"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Page ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function WorkspaceSettingsPage() {
|
||||
const { handle = '' } = useParams()
|
||||
const { data: ws, isLoading } = useWorkspace(handle)
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6 py-5 space-y-4">
|
||||
{[1, 2, 3].map(i => <Skeleton key={i} className="h-40 rounded-lg" />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!ws) {
|
||||
return <div className="p-6 text-sm text-[var(--c-muted)]">Workspace not found.</div>
|
||||
}
|
||||
|
||||
const canAdmin = ws.myRole === 'owner' || ws.myRole === 'admin'
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6 py-5 space-y-5">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-[var(--c-text)]">
|
||||
{ws.displayName || ws.handle} — Settings
|
||||
</h1>
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5 font-mono">@{ws.handle}</p>
|
||||
</div>
|
||||
|
||||
{canAdmin && <GeneralSection handle={handle} />}
|
||||
<MembersSection handle={handle} myRole={ws.myRole} />
|
||||
{canAdmin && <SecretsSection handle={handle} />}
|
||||
<DangerSection handle={handle} myRole={ws.myRole} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useWorkspaces, useCreateWorkspace } from '../api/queries/workspaces'
|
||||
import { Skeleton } from '../ui/Skeleton'
|
||||
import type { WorkspaceWithMeta } from '../types/api'
|
||||
|
||||
function WorkspaceCard({ ws }: { ws: WorkspaceWithMeta }) {
|
||||
return (
|
||||
<Link
|
||||
to={`/workspaces/${ws.handle}`}
|
||||
className="flex items-center gap-4 p-4 border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] hover:border-[var(--c-brand-focus)] hover:bg-[var(--c-surface-muted)] transition-colors group"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-[var(--c-brand)] flex items-center justify-center text-white text-sm font-bold shrink-0">
|
||||
{ws.displayName?.[0]?.toUpperCase() || ws.handle[0].toUpperCase()}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-[var(--c-text)] group-hover:text-[var(--c-brand)] transition-colors">
|
||||
{ws.displayName || ws.handle}
|
||||
</span>
|
||||
<span className="text-xs font-mono text-[var(--c-muted)]">@{ws.handle}</span>
|
||||
{ws.myRole && (
|
||||
<span className="text-[10px] font-semibold px-1.5 py-px rounded border border-[var(--c-border)] text-[var(--c-muted)] capitalize">
|
||||
{ws.myRole}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{ws.description && (
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5 truncate">{ws.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-3 mt-1 text-[10px] text-[var(--c-subtle)]">
|
||||
<span>{ws.repoCount} repo{ws.repoCount !== 1 ? 's' : ''}</span>
|
||||
<span>{ws.memberCount} member{ws.memberCount !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg className="shrink-0 text-[var(--c-border)] group-hover:text-[var(--c-brand)] transition-colors" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateModal({ onClose }: { onClose: () => void }) {
|
||||
const [handle, setHandle] = useState('')
|
||||
const [displayName, setDisplayName] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const create = useCreateWorkspace()
|
||||
|
||||
function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!handle.trim()) return
|
||||
create.mutate(
|
||||
{ handle: handle.trim(), displayName: displayName.trim(), description: description.trim() },
|
||||
{ onSuccess: onClose },
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4" onClick={onClose}>
|
||||
<div className="w-full max-w-md bg-[var(--c-surface)] border border-[var(--c-border)] rounded-xl shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-[var(--c-border)]">
|
||||
<h2 className="text-sm font-semibold text-[var(--c-text)]">Create a workspace</h2>
|
||||
<button onClick={onClose} className="text-[var(--c-muted)] hover:text-[var(--c-text)] transition-colors">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={submit} className="p-5 space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--c-text)] mb-1.5">
|
||||
Handle <span className="text-[var(--c-danger)]">*</span>
|
||||
</label>
|
||||
<input
|
||||
value={handle}
|
||||
onChange={e => setHandle(e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-'))}
|
||||
placeholder="acme-corp"
|
||||
required
|
||||
autoFocus
|
||||
className="w-full px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)] font-mono"
|
||||
/>
|
||||
<p className="text-[10px] text-[var(--c-muted)] mt-1">
|
||||
Used in URLs. Letters, numbers, hyphens, underscores only.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--c-text)] mb-1.5">Display name</label>
|
||||
<input
|
||||
value={displayName}
|
||||
onChange={e => setDisplayName(e.target.value)}
|
||||
placeholder="Acme Corp"
|
||||
className="w-full px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--c-text)] mb-1.5">Description</label>
|
||||
<input
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
placeholder="Our engineering workspace"
|
||||
className="w-full px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
</div>
|
||||
{create.isError && (
|
||||
<p className="text-xs text-[var(--c-danger)]">
|
||||
{(create.error as Error)?.message ?? 'Failed to create workspace'}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-2 pt-1">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!handle.trim() || create.isPending}
|
||||
className="flex-1 py-2 bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{create.isPending ? 'Creating…' : 'Create workspace'}
|
||||
</button>
|
||||
<button type="button" onClick={onClose} className="px-4 py-2 border border-[var(--c-border)] text-sm text-[var(--c-text)] rounded-lg hover:bg-[var(--c-surface-muted)] transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function WorkspacesPage() {
|
||||
const { data: workspaces, isLoading } = useWorkspaces()
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6 py-5 space-y-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-[var(--c-text)]">Workspaces</h1>
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5">Shared namespaces for team repositories</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="flex items-center gap-1.5 px-3 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors"
|
||||
>
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
New workspace
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map(i => <Skeleton key={i} className="h-20 rounded-lg" />)}
|
||||
</div>
|
||||
) : !workspaces?.length ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 border border-dashed border-[var(--c-border)] rounded-lg gap-3 text-center">
|
||||
<div className="w-10 h-10 rounded-full bg-[var(--c-surface-muted)] flex items-center justify-center">
|
||||
<svg width="20" height="20" fill="none" stroke="var(--c-muted)" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--c-text)]">No workspaces yet</p>
|
||||
<p className="text-xs text-[var(--c-muted)] mt-1 max-w-xs">
|
||||
Create a workspace to share repositories with your team.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="px-4 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors"
|
||||
>
|
||||
Create your first workspace
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{workspaces.map(ws => <WorkspaceCard key={ws.id} ws={ws} />)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showCreate && <CreateModal onClose={() => setShowCreate(false)} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user