Polish workbench workspace usability

frontend/src/components/project/AreaPanel.tsx

@@ -32,38 +32,57 @@ export function AreaPanel({
 }: AreaPanelProps): JSX.Element {
   return (
     <section data-testid="area-panel">
-      <h2>Area manager</h2>
-      <p>{selectedProject ? `Selected project: ${selectedProject.name}` : 'Select a project first'}</p>
+      <div className="panel-title-row">
+        <div>
+          <p className="eyebrow">Spatial scope</p>
+          <h2>AOI manager</h2>
+        </div>
+        <span className="count-pill">{areas.length}</span>
+      </div>
+      <p className="muted">{selectedProject ? `Project: ${selectedProject.name}` : 'Select a project first'}</p>
 
-      <form onSubmit={onCreateArea}>
-        <input
-          value={areaForm.name}
-          onChange={(event) => onUpdateAreaForm({ ...areaForm, name: event.target.value })}
-          placeholder="AOI name"
-        />
-        <input
-          value={areaForm.crs}
-          onChange={(event) => onUpdateAreaForm({ ...areaForm, crs: event.target.value })}
-          placeholder="EPSG:4326"
-        />
-        <textarea
-          value={areaForm.geometry}
-          onChange={(event) => onUpdateAreaForm({ ...areaForm, geometry: event.target.value })}
-          rows={4}
-        />
-        <button type="submit" disabled={!selectedProjectId}>
+      <form className="compact-form" onSubmit={onCreateArea}>
+        <label>
+          AOI name
+          <input
+            value={areaForm.name}
+            onChange={(event) => onUpdateAreaForm({ ...areaForm, name: event.target.value })}
+            placeholder="AOI name"
+          />
+        </label>
+        <label>
+          CRS
+          <input
+            value={areaForm.crs}
+            onChange={(event) => onUpdateAreaForm({ ...areaForm, crs: event.target.value })}
+            placeholder="EPSG:4326"
+          />
+        </label>
+        <label>
+          GeoJSON geometry
+          <textarea
+            value={areaForm.geometry}
+            onChange={(event) => onUpdateAreaForm({ ...areaForm, geometry: event.target.value })}
+            rows={4}
+          />
+        </label>
+        <button className="primary-action" type="submit" disabled={!selectedProjectId}>
           Create area
         </button>
       </form>
 
       {loadingAreas ? <p>Loading areas...</p> : null}
       {areas.length === 0 ? <p>No areas yet</p> : null}
-      <ul>
+      <ul className="entity-list">
         {areas.map((area) => (
-          <li key={area.id}>
-            <strong>{area.name}</strong> - {area.area_m2 ? `${area.area_m2.toFixed(2)} m2` : 'n/a'}
-            <div>geometry: {area.geometry?.type ?? area.geometry_type ?? 'n/a'}</div>
+          <li className={selectedMapAreaId === area.id ? 'entity-card entity-card-active' : 'entity-card'} key={area.id}>
+            <strong>{area.name}</strong>
+            <div className="entity-meta">
+              <span>{area.area_m2 ? `${area.area_m2.toFixed(2)} m2` : 'n/a'}</span>
+              <span>{area.geometry?.type ?? area.geometry_type ?? 'n/a'}</span>
+            </div>
             <button
+              className="secondary-action"
               type="button"
               onClick={() => onSelectMapArea(area.id)}
               disabled={!area.geometry}

frontend/src/components/project/ProjectPanel.tsx

@@ -28,45 +28,64 @@ export function ProjectPanel({
 }: ProjectPanelProps): JSX.Element {
   return (
     <section data-testid="project-panel">
-      <h2>Projects</h2>
+      <div className="panel-title-row">
+        <div>
+          <p className="eyebrow">Context</p>
+          <h2>Projects</h2>
+        </div>
+        <span className="count-pill">{projects.length}</span>
+      </div>
       {loadingProjects ? <p>Loading projects...</p> : null}
 
-      <form onSubmit={onCreateProject}>
-        <input
-          value={projectForm.name}
-          onChange={(event) => onUpdateProjectForm({ ...projectForm, name: event.target.value })}
-          placeholder="Project name"
-        />
-        <input
-          value={projectForm.description ?? ''}
-          onChange={(event) => onUpdateProjectForm({ ...projectForm, description: event.target.value })}
-          placeholder="Description"
-        />
-        <input
-          value={projectForm.region ?? 'Kempen'}
-          onChange={(event) => onUpdateProjectForm({ ...projectForm, region: event.target.value })}
-          placeholder="Region"
-        />
-        <button type="submit">Create project</button>
+      <form className="compact-form" onSubmit={onCreateProject}>
+        <label>
+          Name
+          <input
+            value={projectForm.name}
+            onChange={(event) => onUpdateProjectForm({ ...projectForm, name: event.target.value })}
+            placeholder="Project name"
+          />
+        </label>
+        <label>
+          Description
+          <input
+            value={projectForm.description ?? ''}
+            onChange={(event) => onUpdateProjectForm({ ...projectForm, description: event.target.value })}
+            placeholder="Description"
+          />
+        </label>
+        <label>
+          Region
+          <input
+            value={projectForm.region ?? 'Kempen'}
+            onChange={(event) => onUpdateProjectForm({ ...projectForm, region: event.target.value })}
+            placeholder="Region"
+          />
+        </label>
+        <button className="primary-action" type="submit">
+          Create project
+        </button>
       </form>
 
       <div className="demo-actions">
-        <button type="button" onClick={onLoadDemoWorkflow} disabled={loadingDemoWorkflow} data-testid="load-demo-workflow">
+        <button className="secondary-action" type="button" onClick={onLoadDemoWorkflow} disabled={loadingDemoWorkflow} data-testid="load-demo-workflow">
           {loadingDemoWorkflow ? 'Loading demo...' : 'Load demo workflow'}
         </button>
         {demoWorkflowMessage ? <p>{demoWorkflowMessage}</p> : null}
       </div>
 
-      <ul>
+      <ul className="entity-list">
         {projects.map((project) => (
           <li key={project.id}>
             <button
+              className={project.id === selectedProjectId ? 'entity-card entity-card-active' : 'entity-card'}
               type="button"
               onClick={() => onSelectProject(project.id)}
               aria-pressed={project.id === selectedProjectId}
               data-testid={`project-select-${project.id}`}
             >
-              {project.name}
+              <strong>{project.name}</strong>
+              <span>{project.region || 'No region'}</span>
             </button>
           </li>
         ))}