Improve HF upload discoverability and sharing CTA

marionette/static/index.html

@@ -133,9 +133,12 @@
           <button class="dataset-btn" id="cancel-dataset-btn">Cancel</button>
         </div>
       </div>
-      <div class="upload-bar" id="upload-bar" style="display:none">
+      <div class="upload-bar" id="upload-bar">
         <span class="upload-count" id="upload-count">0 selected</span>
-        <button class="upload-btn" id="upload-btn">Upload to HF</button>
+        <span class="upload-hint" id="upload-hint">
+          Create your first move, then select it to share with the community.
+        </span>
+        <button class="upload-btn" id="upload-btn" disabled>Upload to HF</button>
       </div>
     </div>
     <div id="moves-list">

marionette/static/main.js

@@ -77,6 +77,7 @@ const $libraryDatasetSelect = document.getElementById('library-dataset-select');
 const $libraryMovesList = document.getElementById('library-moves-list');
 const $uploadBar        = document.getElementById('upload-bar');
 const $uploadCount      = document.getElementById('upload-count');
+const $uploadHint       = document.getElementById('upload-hint');
 const $uploadBtn        = document.getElementById('upload-btn');
 const $datasetSelect    = document.getElementById('dataset-select');
 const $newDatasetBtn    = document.getElementById('new-dataset-btn');
@@ -290,6 +291,9 @@ function updateConfigUI(config) {
 
   // Lead compensation
   updateLeadCompUI(config);
+
+  // Keep upload CTA in sync when HF auth changes.
+  updateUploadBar();
 }
 
 
@@ -574,13 +578,24 @@ function updateMoveCardStates(mode, activeMove) {
 
 function updateUploadBar() {
   const count = selectedMoves.size;
-  if (count > 0) {
-    $uploadBar.style.display = 'flex';
-    $uploadCount.textContent = count + ' selected';
-    $uploadBtn.disabled = !hfUsername;
+  const totalMoves = Array.isArray(lastState?.moves) ? lastState.moves.length : 0;
+  let hint = '';
+
+  if (totalMoves === 0) {
+    hint = 'Create your first move, then select it to share with the community.';
+  } else if (count === 0) {
+    hint = 'Select one or more moves to upload and share with the community.';
   } else {
-    $uploadBar.style.display = 'none';
+    hint = `Ready to share ${count} ${count === 1 ? 'move' : 'moves'} with the community.`;
   }
+  if (!hfUsername) {
+    hint += ' Log in to Hugging Face in Settings to publish.';
+  }
+
+  $uploadBar.style.display = 'flex';
+  $uploadCount.textContent = count + ' selected';
+  if ($uploadHint) $uploadHint.textContent = hint;
+  $uploadBtn.disabled = !hfUsername || count === 0;
 }
 
 

marionette/static/style.css

@@ -552,8 +552,8 @@ input[type=number] { -moz-appearance: textfield; }
    Layout per move card:
    [checkbox] [name + metadata] [play] [delete]
 
-   Checkboxes are for batch upload to Hugging Face. When any checkbox
-   is selected, the upload bar appears above the list.
+   Checkboxes are for batch upload to Hugging Face. The upload bar stays
+   visible above the list so users discover the selection workflow.
 
    INTEGRATION: renderMoves() is called from updateUI() on every
    state poll. It rebuilds the DOM from state.moves[]. The move
@@ -587,10 +587,12 @@ input[type=number] { -moz-appearance: textfield; }
   flex-wrap: wrap;
 }
 
-/* Orange upload bar — appears when moves are checkbox-selected */
+/* Orange upload bar — always visible to hint batch-upload workflow */
 .upload-bar {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   gap: .75rem;
   padding: .5rem .85rem;
   background: rgba(251,146,60,.06);
@@ -602,6 +604,12 @@ input[type=number] { -moz-appearance: textfield; }
   color: var(--orange);
   font-weight: 600;
 }
+.upload-bar .upload-hint {
+  font-size: .75rem;
+  color: var(--text-muted);
+  max-width: 22rem;
+  line-height: 1.35;
+}
 .upload-btn {
   padding: .45rem 1rem;
   border-radius: 8px;

tests/e2e/test_ui.py

@@ -713,10 +713,11 @@ class TestHfUploadSection:
     def test_upload_button_disabled_without_selection(self, page: Page, base_url: str):
         page.goto(base_url)
         page.wait_for_timeout(2000)
-        # Upload bar is hidden when no moves are selected
         upload_bar = page.locator("#upload-bar")
-        # The upload bar should be hidden (display:none) when no moves selected
-        expect(upload_bar).to_be_hidden()
+        expect(upload_bar).to_be_visible()
+        expect(page.locator("#upload-count")).to_have_text("0 selected")
+        expect(page.locator("#upload-hint")).to_contain_text("community")
+        expect(page.locator("#upload-btn")).to_be_disabled()
 
 
 # ──────── Responsiveness tests ───────────────────────────────────────