From 6323180e587e1673531df9ba5a1a9612296c23b4 Mon Sep 17 00:00:00 2001
From: Hatton <hattonjohn@gmail.com>
Date: Thu, 16 Jul 2026 11:07:32 -0600
Subject: [PATCH] Collection chooser dialog: fix TC-icon/menu overlap, folder
 path, footer (BL-16548)

Follow-up UI tweaks from QA on the Open / Create Collections dialog:

- The team-collection icon shared the top-right corner with the hover "..."
  menu button, so the button covered the icon. Move the icon down into the
  left of the metadata row (beside the book count), leaving the corner to the
  "..." button.

- The "..." menu showed the full .bloomCollection file path; show just the
  containing folder instead. The backend now returns a folderPath field; the
  card displays it (falling back to deriving it from path for stories/tests).

- Darken the footer band (#fafafa -> #f0f0f0, border #eee -> #e0e0e0) so it is
  clearly distinguishable from the white dialog body.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../collection/CollectionCard.tsx             | 25 ++++++++++++-------
 .../collection/CollectionChooserDialog.tsx    |  4 +--
 .../web/controllers/CollectionChooserApi.cs   |  1 +
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/BloomBrowserUI/collection/CollectionCard.tsx b/src/BloomBrowserUI/collection/CollectionCard.tsx
index 624bccac25a8..05fea08990dd 100644
--- a/src/BloomBrowserUI/collection/CollectionCard.tsx
+++ b/src/BloomBrowserUI/collection/CollectionCard.tsx
@@ -19,6 +19,10 @@ import { TeamCollectionIcon } from "../teamCollection/TeamCollectionIcon";
 
 export interface ICollectionInfo {
     path: string;
+    // The folder that contains the .bloomCollection file. Shown (rather than the
+    // file path itself) in the "..." menu. Optional so stories/tests can omit it;
+    // when absent we derive it from path.
+    folderPath?: string;
     title: string;
     bookCount: number;
     checkedOutCount?: number;
@@ -97,9 +101,8 @@ const cardTitleStyle = css`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    // Grow to fill the row so the team icon is pushed to the right (up to the
-    // space reserved for the "..." button), and truncate a long name with an
-    // ellipsis before it reaches that button.
+    // Grow to fill the row (up to the space reserved for the "..." button) and
+    // truncate a long name with an ellipsis before it reaches that button.
     min-width: 0;
     flex: 1 1 auto;
 `;
@@ -202,6 +205,12 @@ export const CollectionCard: React.FunctionComponent<ICollectionInfo> = (
     const bookCountText =
         props.bookCount === 1 ? bookCountSingular : bookCountPlural;
 
+    // Show the collection's folder, not the .bloomCollection file inside it. The
+    // backend supplies folderPath; fall back to stripping the file name from path
+    // (e.g. for stories that only set path).
+    const folderPath =
+        props.folderPath ?? props.path.replace(/[\\/][^\\/]*$/, "");
+
     return (
         <Card
             variant="outlined"
@@ -225,17 +234,17 @@ export const CollectionCard: React.FunctionComponent<ICollectionInfo> = (
                             css={css`
                                 display: flex;
                                 align-items: center;
-                                gap: 8px;
                                 width: 100%;
                                 margin-bottom: 10px;
-                                // Keep the title (and team icon) clear of the
-                                // top-right "..." button.
+                                // Keep the title clear of the top-right "..." button.
                                 padding-right: ${kMoreButtonReservedSpace};
                             `}
                         >
                             <Typography variant="body1" css={cardTitleStyle}>
                                 {props.title}
                             </Typography>
+                        </div>
+                        <div css={metadataRowStyle}>
                             {props.isTeamCollection && (
                                 <TeamCollectionIcon
                                     css={css`
@@ -243,8 +252,6 @@ export const CollectionCard: React.FunctionComponent<ICollectionInfo> = (
                                     `}
                                 />
                             )}
-                        </div>
-                        <div css={metadataRowStyle}>
                             <span css={bookCountStyle}>{bookCountText}</span>
                             {props.checkedOutCount ? (
                                 <Chip
@@ -310,7 +317,7 @@ export const CollectionCard: React.FunctionComponent<ICollectionInfo> = (
                         word-break: break-all;
                     `}
                 >
-                    {props.path}
+                    {folderPath}
                 </MenuItem>
             </Menu>
         </Card>
diff --git a/src/BloomBrowserUI/collection/CollectionChooserDialog.tsx b/src/BloomBrowserUI/collection/CollectionChooserDialog.tsx
index af2ebaa4a627..0892b80239f1 100644
--- a/src/BloomBrowserUI/collection/CollectionChooserDialog.tsx
+++ b/src/BloomBrowserUI/collection/CollectionChooserDialog.tsx
@@ -40,8 +40,8 @@ const footerBandStyle = css`
     margin-right: -24px;
     margin-bottom: -10px;
     padding: 14px 24px;
-    background-color: #fafafa;
-    border-top: 1px solid #eee;
+    background-color: #f0f0f0;
+    border-top: 1px solid #e0e0e0;
     & > div {
         padding-top: 0;
     }
diff --git a/src/BloomExe/web/controllers/CollectionChooserApi.cs b/src/BloomExe/web/controllers/CollectionChooserApi.cs
index a11c06cfd192..af3c1584c384 100644
--- a/src/BloomExe/web/controllers/CollectionChooserApi.cs
+++ b/src/BloomExe/web/controllers/CollectionChooserApi.cs
@@ -181,6 +181,7 @@ private static dynamic MakeCollectionInfoObject(string collectionFilePath)
             return new
             {
                 path = collectionFilePath,
+                folderPath,
                 title = Path.GetFileNameWithoutExtension(collectionFilePath),
                 bookCount = CountBooksInCollection(folderPath),
                 isTeamCollection,