Polish data workspace density

frontend/src/components/project/ProjectPanel.tsx

@@ -26,6 +26,8 @@ export function ProjectPanel({
   onSelectProject,
   onLoadDemoWorkflow,
 }: ProjectPanelProps): JSX.Element {
+  const selectedProject = projects.find((project) => project.id === selectedProjectId)
+
   return (
     <section className="workspace-panel" data-testid="project-panel">
       <div className="panel-title-row">
@@ -37,35 +39,44 @@ export function ProjectPanel({
       </div>
       {loadingProjects ? <p>Loading projects...</p> : null}
 
-      <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="data-selection-summary data-selection-summary-project">
+        <span>Selected project</span>
+        <strong>{selectedProject?.name ?? 'No active project'}</strong>
+        <small>{selectedProject?.region ?? 'Create or load a project to start the workbench.'}</small>
+      </div>
+
+      <div className="data-panel-form-block">
+        <p className="data-section-label">Create context</p>
+        <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>
 
       <div className="demo-actions">
         <button className="secondary-action" type="button" onClick={onLoadDemoWorkflow} disabled={loadingDemoWorkflow} data-testid="load-demo-workflow">
@@ -74,28 +85,31 @@ export function ProjectPanel({
         {demoWorkflowMessage ? <p>{demoWorkflowMessage}</p> : null}
       </div>
 
-      <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}`}
-            >
-              <strong>{project.name}</strong>
-              <span>{project.region || 'No region'}</span>
-            </button>
-          </li>
-        ))}
-        {projects.length === 0 ? (
-          <li className="empty-state">
-            <strong>No projects yet</strong>
-            <p>Create a project or load the offline demo workflow to populate the workbench.</p>
-          </li>
-        ) : null}
-      </ul>
+      <div className="data-panel-list-block">
+        <p className="data-section-label">Saved projects</p>
+        <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}`}
+              >
+                <strong>{project.name}</strong>
+                <span>{project.region || 'No region'}</span>
+              </button>
+            </li>
+          ))}
+          {projects.length === 0 ? (
+            <li className="empty-state">
+              <strong>No projects yet</strong>
+              <p>Create a project or load the offline demo workflow to populate the workbench.</p>
+            </li>
+          ) : null}
+        </ul>
+      </div>
     </section>
   )
 }