Beta 01

app/static/styles.css

@@ -57,12 +57,23 @@ body {
   justify-content: space-between;
   gap: 8px;
   margin-bottom: 10px;
+  min-height: 38px;
 }
 
 .panel-head h2 {
   margin: 0;
 }
 
+.panel-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.panel-head-actions-empty {
+  min-width: 172px;
+}
+
 .panel h3 {
   margin: 10px 0 6px;
   font-size: 14px;
@@ -80,6 +91,13 @@ body {
   flex-direction: column;
 }
 
+.panel-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
 input[type="text"],
 select {
   border: 1px solid #c3cedf;
@@ -145,18 +163,13 @@ button.secondary {
   background: #ffffff;
   border-top: 1px solid #e4eaf2;
   padding-top: 8px;
-  margin-top: 8px;
+  margin-top: 10px;
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  min-height: 38px;
+  min-height: 40px;
-}
-
-.panel-actions {
-  margin-top: 8px;
-  justify-content: flex-end;
 }
 
 .mismatch {
@@ -204,8 +217,7 @@ button.secondary {
 #panelSelectedEpisodes .panel-footer button:first-child,
 #panelSelectedEpisodes .panel-footer button:last-child,
 #panelSelectedFiles .panel-footer button:first-child,
-#panelSelectedFiles .panel-footer button:last-child,
+#panelSelectedFiles .panel-footer button:last-child {
-#panelSelectedFiles .panel-actions button:last-child {
   border-color: #0b3a6e;
   background: #0b3a6e;
   color: #ffffff;

app/templates/index.html

@@ -32,11 +32,16 @@
       </section>
 
       <section class="panel" id="panelSelectedEpisodes">
+        <div class="panel-head">
           <h2>3. Selected Episodes</h2>
+          <div class="panel-head-actions panel-head-actions-empty" aria-hidden="true"></div>
+        </div>
+        <div class="panel-body">
           <div id="episodeMeta" class="muted"></div>
           <div class="linked-list-wrap">
             <ul id="selectedEpisodesList" class="list linked-list"></ul>
           </div>
+        </div>
         <div class="panel-footer">
           <button id="refreshSelectedEpisodesBtn">Refresh</button>
           <button id="episodeUpBtn" class="secondary">Up</button>
@@ -49,13 +54,17 @@
       <section class="panel" id="panelSelectedFiles">
         <div class="panel-head">
           <h2>4. Selected Files</h2>
+          <div class="panel-head-actions">
             <button id="selectFilesBtn" class="secondary">Select Files</button>
+            <button id="renameExecuteBtn">Rename</button>
           </div>
-        <div class="stack">
+        </div>
+        <div class="panel-body">
           <div id="fileMeta" class="muted"></div>
           <div class="linked-list-wrap">
             <ul id="selectedFilesList" class="list linked-list"></ul>
           </div>
+        </div>
         <div class="panel-footer">
           <button id="refreshSelectedFilesBtn">Refresh</button>
           <button id="fileUpBtn" class="secondary">Up</button>
@@ -63,10 +72,6 @@
           <button id="fileRemoveBtn" class="secondary">Remove</button>
           <button id="clearSelectedFilesBtn">Clear</button>
         </div>
-          <div class="row panel-actions">
-            <button id="renameExecuteBtn">Rename Execute (confirm=true)</button>
-          </div>
-        </div>
       </section>
     </main>
 

feature_tests_ui.sh

@@ -31,7 +31,7 @@ required = [
     "3. Selected Episodes",
     "4. Selected Files",
     "Select Files",
-    "Rename Execute (confirm=true)",
+    "Rename",
 ]
 for needle in required:
     assert needle in html, f"missing UI text: {needle}"