refactor: bulk bar — stable layout, disabled not hidden, stacked group row

src/routes/admin/+page.svelte

@@ -270,42 +270,47 @@
   <aside class="admin-tree">
 
     <!-- Persistent bulk-action bar -->
-    <div class="bulk-bar" class:bulk-bar--active={checkedUnitIds.size > 0}>
-      <div class="bulk-bar-row1">
+    <div class="bulk-bar">
+      <!-- Row 1: count + action dropdown + apply/clear -->
+      <div class="bulk-row">
         <span class="bulk-count">
           {#if checkedUnitIds.size > 0}
-            <strong>{checkedUnitIds.size}</strong> unit{checkedUnitIds.size === 1 ? '' : 's'} selected
+            <strong>{checkedUnitIds.size}</strong> selected
           {:else}
-            No units selected
+            0 selected
           {/if}
         </span>
-        {#if checkedUnitIds.size > 0}
-          <button class="bulk-clear plain" onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; }} title="Clear selection">Clear</button>
-        {/if}
-      </div>
-      {#if checkedUnitIds.size > 0}
-        <div class="bulk-controls">
         <select
+          class="bulk-select"
           bind:value={bulkAction}
+          disabled={checkedUnitIds.size === 0}
           aria-label="Bulk action"
         >
           <option value="">Action…</option>
           <option value="move">Move to group</option>
         </select>
+        <button
+          class="bulk-go"
+          disabled={checkedUnitIds.size === 0 || !bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
+          onclick={executeBulkAction}
+        >Apply</button>
+        <button
+          class="bulk-clear plain"
+          disabled={checkedUnitIds.size === 0}
+          onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; }}
+        >Clear</button>
+      </div>
+      <!-- Row 2: group target dropdown (only rendered when move is selected) -->
       {#if bulkAction === 'move'}
-            <select bind:value={bulkMoveTargetGroupId} aria-label="Target group">
-              <option value="">Group…</option>
+        <div class="bulk-row bulk-row--sub">
+          <span class="bulk-sub-label">→ Group:</span>
+          <select class="bulk-select" bind:value={bulkMoveTargetGroupId} aria-label="Target group">
+            <option value="">Choose group…</option>
             {#each unitsData.groups as g}
               <option value={g.id}>{g.label}</option>
             {/each}
             <option value="__orphan__">Ungrouped</option>
           </select>
-          {/if}
-          <button
-            class="bulk-go"
-            disabled={!bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
-            onclick={executeBulkAction}
-          >Apply</button>
         </div>
       {/if}
     </div>
@@ -596,53 +601,67 @@
   .bulk-bar {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.3rem;
     padding: 0.5rem 0.75rem;
-    border-bottom: 1px solid var(--pico-card-border-color);
-    background: var(--pico-card-background-color, #fff);
+    border-bottom: 2px solid var(--pico-primary-border, #4a6fa5);
+    background: var(--pico-card-background-color);
   }
-  .bulk-bar--active {
-    background: var(--pico-primary-background, #e8f0fe);
-    border-bottom-color: var(--pico-primary-border, #c0cff8);
-  }
-  .bulk-bar-row1 {
+  .bulk-row {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
+    gap: 0.4rem;
+  }
+  .bulk-row--sub {
+    padding-left: 0.25rem;
   }
   .bulk-count {
-    font-size: 0.82rem;
+    font-size: 0.8rem;
     color: var(--pico-color);
     white-space: nowrap;
+    min-width: 4.5rem;
   }
-  .bulk-controls {
-    display: flex;
-    align-items: center;
-    gap: 0.35rem;
-  }
-  .bulk-controls select {
+  .bulk-select {
     flex: 1;
     min-width: 0;
-    padding: 0.2rem 0.4rem;
-    font-size: 0.82rem;
+    padding: 0.15rem 0.3rem;
+    font-size: 0.8rem;
     margin: 0;
-    height: 2rem;
+    height: 1.9rem;
   }
   .bulk-go {
-    padding: 0.2rem 0.7rem;
-    font-size: 0.82rem;
+    padding: 0.15rem 0.5rem;
+    font-size: 0.8rem;
     margin: 0;
     white-space: nowrap;
-    height: 2rem;
+    height: 1.9rem;
   }
   .bulk-clear {
-    font-size: 0.78rem;
-    color: var(--pico-primary);
-    padding: 0;
+    padding: 0.15rem 0.4rem;
+    font-size: 0.8rem;
+    margin: 0;
     white-space: nowrap;
+    height: 1.9rem;
+    color: var(--pico-muted-color);
+    border: 1px solid var(--pico-muted-border-color);
+    border-radius: var(--pico-border-radius);
+    background: transparent;
+  }
+  .bulk-clear:not(:disabled):hover {
+    color: var(--pico-color);
+    border-color: var(--pico-color);
+  }
+  .bulk-clear:disabled,
+  .bulk-go:disabled,
+  .bulk-select:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  .bulk-sub-label {
+    font-size: 0.78rem;
+    color: var(--pico-muted-color);
+    white-space: nowrap;
+    min-width: 4.5rem;
   }
-  .bulk-clear:hover { text-decoration: underline; }
 
   /* Tree groups */
   .tree-group {