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 { EmptyState, ErrorState, LoadingState } from "../components/data-states";
|
||||||
import { Icon } from "../components/icon";
|
import { Icon } from "../components/icon";
|
||||||
|
import { useMobileViewport } from "../hooks/use-mobile-viewport";
|
||||||
import { ProjectCard } from "../components/features/project/ProjectCard";
|
import { ProjectCard } from "../components/features/project/ProjectCard";
|
||||||
import { ProjectDialog } from "../components/features/project/ProjectDialog";
|
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 { useProjects } from "../hooks/use-projects";
|
||||||
|
import type { ProjectWithRepos } from "../types";
|
||||||
|
|
||||||
|
type MobileView = "list" | "detail" | "create-project" | "create-repo";
|
||||||
|
|
||||||
export const ProjectsPage = () => {
|
export const ProjectsPage = () => {
|
||||||
|
const isMobile = useMobileViewport();
|
||||||
|
const [mobileView, setMobileView] = useState<MobileView>("list");
|
||||||
|
const [selectedProject, setSelectedProject] = useState<ProjectWithRepos | null>(null);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
projects,
|
projects,
|
||||||
status,
|
status,
|
||||||
@@ -33,6 +45,253 @@ export const ProjectsPage = () => {
|
|||||||
|
|
||||||
const isEmpty = status === "ready" && projects.length === 0;
|
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 (
|
return (
|
||||||
<section className="stack">
|
<section className="stack">
|
||||||
<div className="page-header">
|
<div className="page-header">
|
||||||
|
|||||||
@@ -18,7 +18,9 @@ type MobileView = "list" | "detail" | "create";
|
|||||||
export function WorkspacesPage() {
|
export function WorkspacesPage() {
|
||||||
const isMobile = useMobileViewport();
|
const isMobile = useMobileViewport();
|
||||||
const [mobileView, setMobileView] = useState<MobileView>("list");
|
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 [showCreate, setShowCreate] = useState(false);
|
||||||
const [startWorkspace, setStartWorkspace] = useState<Workspace | null>(null);
|
const [startWorkspace, setStartWorkspace] = useState<Workspace | null>(null);
|
||||||
|
|
||||||
@@ -88,31 +90,33 @@ export function WorkspacesPage() {
|
|||||||
<div className="mobile-page">
|
<div className="mobile-page">
|
||||||
<div className="mobile-page-header">
|
<div className="mobile-page-header">
|
||||||
<h1>Workspaces</h1>
|
<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>
|
</div>
|
||||||
|
|
||||||
{error && <div className="alert alert-error">{error}</div>}
|
{error && <div className="alert alert-error">{error}</div>}
|
||||||
|
|
||||||
{loading && workspaces.length === 0 ? (
|
{loading && workspaces.length === 0 ? (
|
||||||
<div className="loading-state">Loading workspaces...</div>
|
<div className="loading-state">Loading workspaces...</div>
|
||||||
) : (
|
) : (
|
||||||
<MobileListView
|
<MobileListView
|
||||||
items={workspaces.map((ws) => ({
|
items={workspaces.map((ws) => ({
|
||||||
id: ws.id,
|
id: ws.id,
|
||||||
title: ws.name,
|
title: ws.name,
|
||||||
subtitle: `${ws.project_name} · ${ws.repo_name} · ${ws.branch}`,
|
subtitle: `${ws.project_name} · ${ws.repo_name} · ${ws.branch}`,
|
||||||
status: ws.status,
|
status: ws.status,
|
||||||
}))}
|
}))}
|
||||||
onItemClick={(id) => {
|
onItemClick={(id) => {
|
||||||
const ws = workspaces.find((w) => w.id === id);
|
const ws = workspaces.find((w) => w.id === id);
|
||||||
if (ws) {
|
if (ws) {
|
||||||
setSelectedWorkspace(ws);
|
setSelectedWorkspace(ws);
|
||||||
setMobileView("detail");
|
setMobileView("detail");
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
emptyMessage="No workspaces yet"
|
emptyMessage="No workspaces yet"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<MobileFAB
|
<MobileFAB
|
||||||
onClick={() => setMobileView("create")}
|
onClick={() => setMobileView("create")}
|
||||||
@@ -120,7 +124,10 @@ export function WorkspacesPage() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{startWorkspace && (
|
{startWorkspace && (
|
||||||
<div className="modal-overlay" onClick={() => setStartWorkspace(null)}>
|
<div
|
||||||
|
className="modal-overlay"
|
||||||
|
onClick={() => setStartWorkspace(null)}
|
||||||
|
>
|
||||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||||||
<h3>Start Tool</h3>
|
<h3>Start Tool</h3>
|
||||||
<ToolStarter
|
<ToolStarter
|
||||||
|
|||||||
@@ -2100,6 +2100,33 @@ a.nav-item,
|
|||||||
padding-bottom: calc(1.25rem + 64px);
|
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 */
|
/* Ensure minimum touch targets on mobile */
|
||||||
button,
|
button,
|
||||||
a,
|
a,
|
||||||
|
|||||||
Reference in New Issue
Block a user