feat: add mobile support for Projects page with repository creation
- ProjectsPage.tsx: detect mobile viewport, show MobileListView / custom detail view / MobileFAB - Mobile list: tap project to view details (name, description, repositories, workspaces) - Mobile detail: shows repositories with New Workspace buttons, Add Repository button, Edit/Delete project actions - Mobile FAB: opens inline project creation form - RepositoryCreateDialog reused for mobile 'Add Repository' flow - New CSS: .mobile-form-actions, .mobile-form-group for mobile form layouts Quality gates: tsc --noEmit pass, npm run build pass, 80/80 tests pass
This commit is contained in:
Developer
@@ -1,10 +1,22 @@
|
||||
import { useState } from "react";
|
||||
import { EmptyState, ErrorState, LoadingState } from "../components/data-states";
|
||||
import { Icon } from "../components/icon";
|
||||
import { useMobileViewport } from "../hooks/use-mobile-viewport";
|
||||
import { ProjectCard } from "../components/features/project/ProjectCard";
|
||||
import { ProjectDialog } from "../components/features/project/ProjectDialog";
|
||||
import { RepositoryCreateDialog } from "../components/features/project/repository-create-dialog";
|
||||
import { MobileListView } from "../components/features/mobile/mobile-list-view";
|
||||
import { MobileFAB } from "../components/features/mobile/mobile-fab";
|
||||
import { useProjects } from "../hooks/use-projects";
|
||||
import type { ProjectWithRepos } from "../types";
|
||||
|
||||
type MobileView = "list" | "detail" | "create-project" | "create-repo";
|
||||
|
||||
export const ProjectsPage = () => {
|
||||
const isMobile = useMobileViewport();
|
||||
const [mobileView, setMobileView] = useState<MobileView>("list");
|
||||
const [selectedProject, setSelectedProject] = useState<ProjectWithRepos | null>(null);
|
||||
|
||||
const {
|
||||
projects,
|
||||
status,
|
||||
@@ -33,6 +45,253 @@ export const ProjectsPage = () => {
|
||||
|
||||
const isEmpty = status === "ready" && projects.length === 0;
|
||||
|
||||
/* ── Mobile views ── */
|
||||
if (isMobile) {
|
||||
if (mobileView === "create-project") {
|
||||
return (
|
||||
<div className="mobile-page">
|
||||
<ProjectDialog
|
||||
mode="create"
|
||||
name={formName}
|
||||
description={formDescription}
|
||||
error={formError}
|
||||
onNameChange={setFormName}
|
||||
onDescriptionChange={setFormDescription}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => {
|
||||
closeDialog();
|
||||
setMobileView("list");
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (mobileView === "create-repo" && selectedProject) {
|
||||
return (
|
||||
<div className="mobile-page">
|
||||
<RepositoryCreateDialog
|
||||
projectId={selectedProject.id}
|
||||
open={true}
|
||||
title="Add Repository"
|
||||
onClose={() => setMobileView("detail")}
|
||||
onCreated={async () => {
|
||||
setMobileView("detail");
|
||||
await reload();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (mobileView === "detail" && selectedProject) {
|
||||
const project = selectedProject;
|
||||
return (
|
||||
<div className="mobile-page">
|
||||
<header className="mobile-detail-header">
|
||||
<button
|
||||
className="mobile-detail-back"
|
||||
onClick={() => {
|
||||
setMobileView("list");
|
||||
setSelectedProject(null);
|
||||
}}
|
||||
type="button"
|
||||
aria-label="Go back"
|
||||
>
|
||||
<Icon name="arrow-left" size="md" />
|
||||
</button>
|
||||
<div className="mobile-detail-header-content">
|
||||
<h1 className="mobile-detail-title">{project.name}</h1>
|
||||
{project.description && (
|
||||
<p className="mobile-detail-subtitle">{project.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mobile-detail-fields">
|
||||
<div className="mobile-detail-field">
|
||||
<label className="mobile-detail-field-label">Repositories</label>
|
||||
<div className="mobile-detail-field-value">
|
||||
{project.repositories.length === 0 ? (
|
||||
<p className="muted">No repositories yet.</p>
|
||||
) : (
|
||||
<div className="repo-list">
|
||||
{project.repositories.map((repo) => (
|
||||
<div key={repo.id} className="repo-block">
|
||||
<div className="repo-header">
|
||||
<h4>{repo.name}</h4>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() =>
|
||||
setCreatingWorkspace({
|
||||
projectId: project.id,
|
||||
repoId: repo.id,
|
||||
})
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<Icon name="add" size="sm" /> New Workspace
|
||||
</button>
|
||||
</div>
|
||||
{/* Inline workspace create */}
|
||||
{creatingWorkspace?.projectId === project.id &&
|
||||
creatingWorkspace.repoId === repo.id && (
|
||||
<div className="mobile-form-group">
|
||||
<p className="muted">Workspace creation form would appear here.</p>
|
||||
<button
|
||||
className="secondary-button small"
|
||||
onClick={() => setCreatingWorkspace(null)}
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{repo.workspaces.length === 0 ? (
|
||||
<p className="muted">No workspaces.</p>
|
||||
) : (
|
||||
<div className="workspace-grid">
|
||||
{repo.workspaces.map((ws) => (
|
||||
<div
|
||||
key={ws.id}
|
||||
className={`workspace-chip ${ws.status}`}
|
||||
>
|
||||
<a href={`/workspaces/${ws.id}`}>{ws.name}</a>
|
||||
<span className="ws-branch">
|
||||
<Icon name="branch" size="sm" /> {ws.branch}
|
||||
</span>
|
||||
{ws.instance_count > 0 && (
|
||||
<span className="ws-instances">
|
||||
{ws.instance_count} tool
|
||||
{ws.instance_count > 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
<div className="ws-actions">
|
||||
<button
|
||||
type="button"
|
||||
disabled={workspaceLoading === ws.id}
|
||||
onClick={() =>
|
||||
void handleSyncWorkspace(
|
||||
project.id,
|
||||
repo.id,
|
||||
ws,
|
||||
)
|
||||
}
|
||||
>
|
||||
<Icon name="refresh" size="sm" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="danger-text"
|
||||
disabled={workspaceLoading === ws.id}
|
||||
onClick={() =>
|
||||
void handleDeleteWorkspace(ws)
|
||||
}
|
||||
>
|
||||
<Icon name="delete" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mobile-form-actions">
|
||||
<button
|
||||
className="primary-button"
|
||||
onClick={() => setMobileView("create-repo")}
|
||||
type="button"
|
||||
>
|
||||
<Icon name="add" size="sm" /> Add Repository
|
||||
</button>
|
||||
<button
|
||||
className="ghost-button"
|
||||
onClick={() => {
|
||||
setFormName(project.name);
|
||||
setFormDescription(project.description ?? "");
|
||||
setMobileView("create-project");
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
<Icon name="edit" size="sm" /> Edit Project
|
||||
</button>
|
||||
<button
|
||||
className="danger-button"
|
||||
onClick={() => {
|
||||
if (window.confirm("Delete this project?")) {
|
||||
void handleDelete(project.id);
|
||||
setMobileView("list");
|
||||
setSelectedProject(null);
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
<Icon name="delete" size="sm" /> Delete Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* Mobile list view */
|
||||
return (
|
||||
<div className="mobile-page">
|
||||
<div className="mobile-page-header">
|
||||
<h1>Projects</h1>
|
||||
<span className="muted">
|
||||
{projects.length} project{projects.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{status === "loading" && (
|
||||
<LoadingState message="Loading projects..." />
|
||||
)}
|
||||
|
||||
{status === "error" && (
|
||||
<ErrorState message="Failed to load projects" onRetry={reload} />
|
||||
)}
|
||||
|
||||
{isEmpty && (
|
||||
<EmptyState message="No projects yet. Create your first project above." />
|
||||
)}
|
||||
|
||||
{status === "ready" && projects.length > 0 && (
|
||||
<MobileListView
|
||||
items={projects.map((p) => ({
|
||||
id: p.id,
|
||||
title: p.name,
|
||||
subtitle: `${p.repositories?.length ?? 0} repo${(p.repositories?.length ?? 0) !== 1 ? "s" : ""}${p.description ? " · " + p.description : ""}`,
|
||||
}))}
|
||||
onItemClick={(id) => {
|
||||
const project = projects.find((p) => p.id === id);
|
||||
if (project) {
|
||||
setSelectedProject(project);
|
||||
setMobileView("detail");
|
||||
}
|
||||
}}
|
||||
emptyMessage="No projects yet"
|
||||
/>
|
||||
)}
|
||||
|
||||
<MobileFAB
|
||||
onClick={() => {
|
||||
openCreate();
|
||||
setMobileView("create-project");
|
||||
}}
|
||||
label="Create project"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Desktop view ── */
|
||||
return (
|
||||
<section className="stack">
|
||||
<div className="page-header">
|
||||
|
||||
@@ -18,7 +18,9 @@ type MobileView = "list" | "detail" | "create";
|
||||
export function WorkspacesPage() {
|
||||
const isMobile = useMobileViewport();
|
||||
const [mobileView, setMobileView] = useState<MobileView>("list");
|
||||
const [selectedWorkspace, setSelectedWorkspace] = useState<Workspace | null>(null);
|
||||
const [selectedWorkspace, setSelectedWorkspace] = useState<Workspace | null>(
|
||||
null,
|
||||
);
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [startWorkspace, setStartWorkspace] = useState<Workspace | null>(null);
|
||||
|
||||
@@ -88,31 +90,33 @@ export function WorkspacesPage() {
|
||||
<div className="mobile-page">
|
||||
<div className="mobile-page-header">
|
||||
<h1>Workspaces</h1>
|
||||
<span className="muted">{workspaces.length} workspace{workspaces.length !== 1 ? "s" : ""}</span>
|
||||
<span className="muted">
|
||||
{workspaces.length} workspace{workspaces.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{error && <div className="alert alert-error">{error}</div>}
|
||||
{error && <div className="alert alert-error">{error}</div>}
|
||||
|
||||
{loading && workspaces.length === 0 ? (
|
||||
<div className="loading-state">Loading workspaces...</div>
|
||||
) : (
|
||||
<MobileListView
|
||||
items={workspaces.map((ws) => ({
|
||||
id: ws.id,
|
||||
title: ws.name,
|
||||
subtitle: `${ws.project_name} · ${ws.repo_name} · ${ws.branch}`,
|
||||
status: ws.status,
|
||||
}))}
|
||||
onItemClick={(id) => {
|
||||
const ws = workspaces.find((w) => w.id === id);
|
||||
if (ws) {
|
||||
setSelectedWorkspace(ws);
|
||||
setMobileView("detail");
|
||||
}
|
||||
}}
|
||||
emptyMessage="No workspaces yet"
|
||||
/>
|
||||
)}
|
||||
{loading && workspaces.length === 0 ? (
|
||||
<div className="loading-state">Loading workspaces...</div>
|
||||
) : (
|
||||
<MobileListView
|
||||
items={workspaces.map((ws) => ({
|
||||
id: ws.id,
|
||||
title: ws.name,
|
||||
subtitle: `${ws.project_name} · ${ws.repo_name} · ${ws.branch}`,
|
||||
status: ws.status,
|
||||
}))}
|
||||
onItemClick={(id) => {
|
||||
const ws = workspaces.find((w) => w.id === id);
|
||||
if (ws) {
|
||||
setSelectedWorkspace(ws);
|
||||
setMobileView("detail");
|
||||
}
|
||||
}}
|
||||
emptyMessage="No workspaces yet"
|
||||
/>
|
||||
)}
|
||||
|
||||
<MobileFAB
|
||||
onClick={() => setMobileView("create")}
|
||||
@@ -120,7 +124,10 @@ export function WorkspacesPage() {
|
||||
/>
|
||||
|
||||
{startWorkspace && (
|
||||
<div className="modal-overlay" onClick={() => setStartWorkspace(null)}>
|
||||
<div
|
||||
className="modal-overlay"
|
||||
onClick={() => setStartWorkspace(null)}
|
||||
>
|
||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||||
<h3>Start Tool</h3>
|
||||
<ToolStarter
|
||||
|
||||
@@ -2100,6 +2100,33 @@ a.nav-item,
|
||||
padding-bottom: calc(1.25rem + 64px);
|
||||
}
|
||||
|
||||
/* Mobile form actions (bottom button row) */
|
||||
.mobile-form-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-2);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.mobile-form-actions .primary-button,
|
||||
.mobile-form-actions .secondary-button,
|
||||
.mobile-form-actions .ghost-button,
|
||||
.mobile-form-actions .danger-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
/* Mobile form group (inline fields) */
|
||||
.mobile-form-group {
|
||||
padding: var(--space-2);
|
||||
background: var(--panel);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
/* Ensure minimum touch targets on mobile */
|
||||
button,
|
||||
a,
|
||||
|
||||
Reference in New Issue
Block a user