Redesign fileNameBanner with distinct draggable titlebar

[Copilot]

The fileNameBanner panel can be dragged, but this capability was not visually apparent to users. Based on feedback that the initial dotted border approach wasn't working visually, the panel has been redesigned with a distinct draggable titlebar.

Changes

Completely redesigned the fileNameBanner panel with a separate titlebar section:

HTML Structure

• Created a distinct filename-titlebar section with darker background
• Moved filename and copy button into the titlebar
• Content area (description, filepath, metadata link) remains in separate container below

CSS Styling

• Titlebar: Dark background rgba(50, 50, 50, 0.9) with subtle hover effect
• Visual separation: 1px border-bottom between titlebar and content
• Cursor indicators:
  • Titlebar: cursor: move (crossed arrows) to indicate draggability
  • Copy button: cursor: pointer (hand) for clickability
  • Text content: cursor: auto for standard interaction

JavaScript

• Updated drag handlers to only trigger on titlebar clicks
• Excluded copy button from drag functionality
• Applied to both mouse and touch events

Visual Result

Normal state:

Hover state (titlebar highlighted):

The titlebar design provides a clear visual indicator of the draggable area with proper cursor feedback for all interactive elements.

Testing

• ✅ All 215 frontend tests pass
• ✅ Manual testing confirms proper cursor behavior and drag functionality
• ✅ Code review completed with no issues
• ✅ Security scan completed with no vulnerabilities

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add a drag indicator to the fileNameBanner</issue_title>
<issue_description>The fileNameBanner panel (used to display metadata) can be dragged around by clicking on one of its borders. However, the existence of these drag borders is not visually clear. Please suggest some sort of indicator, such as a stippled grey border, that shows what parts of the panel can be clicked on in order to initiate a drag.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add a drag indicator to the fileNameBanner #171

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[lstein]

@copilot The dotted outline isn't working visually. Please reorganize the FileNameBanner panel to give it a definite draggable titlebar. Put the name of the image into the titlebar. The window is draggable when clicking or touching any part of the titlebar, with the exception of the "copy" button placed to the right of the picture title.

Change the cursor to the crossed arrows when the mouse is over the draggable titlebar. At other locations, it should be the standard cursor shapes used to interact with visual elements, e.g.:

• When over text, the text insertion cursor
• When over a button, the hand-with-index-finger-extended cursor.
• Elsewhere, the generic arrow.

[Copilot]

@copilot The dotted outline isn't working visually. Please reorganize the FileNameBanner panel to give it a definite draggable titlebar. Put the name of the image into the titlebar. The window is dra...

Redesigned the fileNameBanner with a distinct draggable titlebar (commit b3648ac).

Changes:

• Created separate titlebar with darker background (rgba(50, 50, 50, 0.9))
• Moved filename and copy button to titlebar
• Only titlebar is draggable (copy button excluded)
• Proper cursor indicators:
  • Titlebar: move cursor (crossed arrows)
  • Copy button: pointer cursor (hand)
  • Text content: auto cursor

Visual result:

Normal state:

Hover state:

All 215 tests pass.