diff --git a/eval/drive/css/drive.css b/eval/drive/css/drive.css index 05e3f54..a508ff4 100644 --- a/eval/drive/css/drive.css +++ b/eval/drive/css/drive.css @@ -196,12 +196,56 @@ } .drive-destination-picker { - max-height: 320px; - overflow: auto; border: 1px solid var(--mock-border); border-radius: 18px; - padding: 12px; background: rgba(15, 23, 34, 0.03); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.drive-destination-breadcrumb { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px; + padding: 10px 14px; + border-bottom: 1px solid var(--mock-border); + background: rgba(15, 23, 34, 0.04); +} + +.drive-destination-crumb { + background: transparent; + border: 0; + padding: 4px 8px; + border-radius: 8px; + color: var(--mock-text); + font-size: 13px; + cursor: pointer; +} + +.drive-destination-crumb:hover { + background: rgba(15, 23, 34, 0.06); +} + +.drive-destination-crumb.active { + background: rgba(15, 157, 88, 0.12); + color: rgba(15, 157, 88, 0.95); + font-weight: 600; +} + +.drive-destination-sep { + color: rgba(15, 23, 34, 0.35); + font-size: 13px; +} + +.drive-destination-list { + max-height: 280px; + overflow: auto; + padding: 8px; + display: flex; + flex-direction: column; + gap: 2px; } .drive-destination-item { @@ -216,9 +260,8 @@ color: var(--mock-text); } -.drive-destination-item.active { - border-color: rgba(15, 157, 88, 0.24); - background: rgba(15, 157, 88, 0.08); +.drive-destination-item:hover { + background: rgba(15, 23, 34, 0.05); } .drive-upload-option { diff --git a/eval/drive/js/drive.js b/eval/drive/js/drive.js index f1b34a5..8b4e896 100644 --- a/eval/drive/js/drive.js +++ b/eval/drive/js/drive.js @@ -370,24 +370,46 @@ window.tracker = new AgentTracker("drive.google.com", "hard"); `; } - function getAllDestinationFolders(state) { - return state.items.filter((item) => item.type === "folder"); + function getChildFolders(state, parentId) { + return state.items.filter( + (item) => item.type === "folder" && item.parentId === parentId && item.section === "my-drive", + ); } function renderDestinationPicker(state, activeDestinationId) { - return ` -
- ${getAllDestinationFolders(state) + const trail = getFolderPath(state, activeDestinationId); + const children = getChildFolders(state, activeDestinationId || null); + + const breadcrumb = ` +
+ + ${trail + .map((folder, idx) => { + const isLast = idx === trail.length - 1; + return `/`; + }) + .join("")} +
+ `; + + const list = children.length + ? children .map((folder) => { - const path = getFolderPath(state, folder.parentId).map((item) => item.name).join(" / "); + const hasSub = getChildFolders(state, folder.id).length > 0; return ` - `; }) - .join("")} + .join("") + : `

No subfolders. The current folder is selected as the destination.

`; + + return ` +
+ ${breadcrumb} +
${list}
`; } @@ -439,7 +461,7 @@ window.tracker = new AgentTracker("drive.google.com", "hard"); ${renderDestinationPicker(state, modal.destinationId || null)}