refactor: bulk bar — two-row layout, better contrast, controls only when active

data/units.json

@@ -5,7 +5,7 @@
       "label": "Blurb",
       "labelPlural": "Blurbs",
       "symbol": "bl",
-      "group": "florp",
+      "group": "the-third-group",
       "toBase": 1
     },
     {
@@ -13,7 +13,7 @@
       "label": "Snorp",
       "labelPlural": "Snorps",
       "symbol": "sn",
-      "group": "florp",
+      "group": "non-florp-units",
       "toBase": 7.5
     },
     {
@@ -21,7 +21,7 @@
       "label": "Krumble",
       "labelPlural": "Krumbles",
       "symbol": "kr",
-      "group": "florp",
+      "group": "the-third-group",
       "toBase": 0.25
     },
     {
@@ -39,6 +39,18 @@
       "label": "Florp Units",
       "baseUnitId": "blurb",
       "toUniversal": 1
+    },
+    {
+      "id": "non-florp-units",
+      "label": "The other group",
+      "baseUnitId": "",
+      "toUniversal": 1
+    },
+    {
+      "id": "the-third-group",
+      "label": "The third group",
+      "baseUnitId": "",
+      "toUniversal": 1
     }
   ]
 }

src/routes/admin/+page.svelte

@@ -270,41 +270,44 @@
   <aside class="admin-tree">
 
     <!-- Persistent bulk-action bar -->
-    <div class="bulk-bar">
+    <div class="bulk-bar" class:bulk-bar--active={checkedUnitIds.size > 0}>
-      <span class="bulk-count">
+      <div class="bulk-bar-row1">
+        <span class="bulk-count">
+          {#if checkedUnitIds.size > 0}
+            <strong>{checkedUnitIds.size}</strong> unit{checkedUnitIds.size === 1 ? '' : 's'} selected
+          {:else}
+            No units selected
+          {/if}
+        </span>
         {#if checkedUnitIds.size > 0}
-          {checkedUnitIds.size} selected
+          <button class="bulk-clear plain" onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; }} title="Clear selection">Clear</button>
-        {:else}
-          0 selected
-        {/if}
-      </span>
-      <div class="bulk-controls">
-        <select
-          bind:value={bulkAction}
-          disabled={checkedUnitIds.size === 0}
-          aria-label="Bulk action"
-        >
-          <option value="">Action…</option>
-          <option value="move">Move to group</option>
-        </select>
-        {#if bulkAction === 'move'}
-          <select bind:value={bulkMoveTargetGroupId} aria-label="Target group">
-            <option value="">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={checkedUnitIds.size === 0 || !bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
-          onclick={executeBulkAction}
-        >Go</button>
-        {#if checkedUnitIds.size > 0}
-          <button class="bulk-clear plain" onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; }} title="Clear selection">✕</button>
         {/if}
       </div>
+      {#if checkedUnitIds.size > 0}
+        <div class="bulk-controls">
+          <select
+            bind:value={bulkAction}
+            aria-label="Bulk action"
+          >
+            <option value="">Action…</option>
+            <option value="move">Move to group</option>
+          </select>
+          {#if bulkAction === 'move'}
+            <select bind:value={bulkMoveTargetGroupId} aria-label="Target group">
+              <option value="">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>
 
     <!-- Group tree -->
@@ -592,46 +595,54 @@
   /* Persistent bulk-action bar */
   .bulk-bar {
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    gap: 0.5rem;
+    gap: 0.35rem;
     padding: 0.5rem 0.75rem;
     border-bottom: 1px solid var(--pico-card-border-color);
-    background: var(--pico-secondary-background, rgba(0,0,0,0.03));
+    background: var(--pico-card-background-color, #fff);
-    min-height: 2.75rem;
+  }
+  .bulk-bar--active {
+    background: var(--pico-primary-background, #e8f0fe);
+    border-bottom-color: var(--pico-primary-border, #c0cff8);
+  }
+  .bulk-bar-row1 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
   }
   .bulk-count {
-    font-size: 0.8rem;
+    font-size: 0.82rem;
-    color: var(--pico-muted-color);
+    color: var(--pico-color);
     white-space: nowrap;
-    min-width: 5rem;
   }
   .bulk-controls {
     display: flex;
     align-items: center;
     gap: 0.35rem;
-    flex: 1;
   }
   .bulk-controls select {
     flex: 1;
     min-width: 0;
     padding: 0.2rem 0.4rem;
-    font-size: 0.8rem;
+    font-size: 0.82rem;
     margin: 0;
     height: 2rem;
   }
   .bulk-go {
-    padding: 0.2rem 0.6rem;
+    padding: 0.2rem 0.7rem;
-    font-size: 0.8rem;
+    font-size: 0.82rem;
     margin: 0;
     white-space: nowrap;
     height: 2rem;
   }
   .bulk-clear {
-    font-size: 0.75rem;
+    font-size: 0.78rem;
-    color: var(--pico-muted-color);
+    color: var(--pico-primary);
-    padding: 0.15rem 0.3rem;
+    padding: 0;
+    white-space: nowrap;
   }
-  .bulk-clear:hover { color: var(--pico-color); }
+  .bulk-clear:hover { text-decoration: underline; }
 
   /* Tree groups */
   .tree-group {