Split into components

2026-02-16 19:59:37 +00:00
parent 1adbadb6eb
commit 3be9088794
5 changed files with 598 additions and 396 deletions
--- a/frontend/src/components/selection/RecentProjectsList.tsx
+++ b/frontend/src/components/selection/RecentProjectsList.tsx
@@ -0,0 +1,66 @@
+export interface RecentProjectsListProps {
+  projects: string[];
+  onOpenProject: (path: string) => void;
+  onForgetProject: (path: string) => void;
+}
+
+export function RecentProjectsList({
+  projects,
+  onOpenProject,
+  onForgetProject,
+}: RecentProjectsListProps) {
+  return (
+    <div style={{ marginTop: "12px" }}>
+      <div style={{ fontSize: "0.9em", color: "#666" }}>Recent projects</div>
+      <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0" }}>
+        {projects.map((project) => {
+          const displayName =
+            project.split("/").filter(Boolean).pop() ?? project;
+          return (
+            <li key={project} style={{ marginBottom: "6px" }}>
+              <div
+                style={{ display: "flex", gap: "6px", alignItems: "center" }}
+              >
+                <button
+                  type="button"
+                  onClick={() => onOpenProject(project)}
+                  style={{
+                    flex: 1,
+                    textAlign: "left",
+                    padding: "8px 10px",
+                    borderRadius: "6px",
+                    border: "1px solid #ddd",
+                    background: "#f7f7f7",
+                    cursor: "pointer",
+                    fontFamily: "monospace",
+                    fontSize: "0.9em",
+                  }}
+                  title={project}
+                >
+                  {displayName}
+                </button>
+                <button
+                  type="button"
+                  aria-label={`Forget ${displayName}`}
+                  onClick={() => onForgetProject(project)}
+                  style={{
+                    width: "32px",
+                    height: "32px",
+                    borderRadius: "6px",
+                    border: "1px solid #ddd",
+                    background: "#fff",
+                    cursor: "pointer",
+                    fontSize: "1.1em",
+                    lineHeight: 1,
+                  }}
+                >
+                  ×
+                </button>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}