Josh Knapp
60842befde
- Remove global * { padding: 0 } reset that was overriding all Tailwind
padding classes (unlayered CSS beats Tailwind v4 @layer utilities)
- Add color-scheme: dark to fix native form controls (select dropdowns)
rendering with white backgrounds
- Make sidebar responsive (25% width, min 224px, max 320px)
- Increase internal padding on TopBar, Sidebar, ProjectList, StatusBar
- Add flex-shrink-0 to TopBar status indicators to prevent clipping
- Allow project action buttons to wrap on narrow sidebars
- Increase terminal view padding for breathing room
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { useState } from "react";
|
|
import { useProjects } from "../../hooks/useProjects";
|
|
import ProjectCard from "./ProjectCard";
|
|
import AddProjectDialog from "./AddProjectDialog";
|
|
|
|
export default function ProjectList() {
|
|
const { projects } = useProjects();
|
|
const [showAdd, setShowAdd] = useState(false);
|
|
|
|
return (
|
|
<div className="p-3">
|
|
<div className="flex items-center justify-between px-2 py-1 mb-2">
|
|
<span className="text-xs font-semibold uppercase text-[var(--text-secondary)]">
|
|
Projects
|
|
</span>
|
|
<button
|
|
onClick={() => setShowAdd(true)}
|
|
className="text-lg leading-none text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors"
|
|
title="Add project"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
|
|
{projects.length === 0 ? (
|
|
<p className="px-2 text-sm text-[var(--text-secondary)]">
|
|
No projects yet. Click + to add one.
|
|
</p>
|
|
) : (
|
|
<div className="flex flex-col gap-1">
|
|
{projects.map((project) => (
|
|
<ProjectCard key={project.id} project={project} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{showAdd && <AddProjectDialog onClose={() => setShowAdd(false)} />}
|
|
</div>
|
|
);
|
|
}
|