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,18 +270,23 @@
   <aside class="admin-tree">
 
     <!-- Persistent bulk-action bar -->
-    <div class="bulk-bar">
+    <div class="bulk-bar" class:bulk-bar--active={checkedUnitIds.size > 0}>
+      <div class="bulk-bar-row1">
         <span class="bulk-count">
           {#if checkedUnitIds.size > 0}
-          {checkedUnitIds.size} selected
+            <strong>{checkedUnitIds.size}</strong> unit{checkedUnitIds.size === 1 ? '' : 's'} selected
           {:else}
-          0 selected
+            No units 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
             bind:value={bulkAction}
-          disabled={checkedUnitIds.size === 0}
             aria-label="Bulk action"
           >
             <option value="">Action…</option>
@@ -298,13 +303,11 @@
           {/if}
           <button
             class="bulk-go"
-          disabled={checkedUnitIds.size === 0 || !bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
+            disabled={!bulkAction || (bulkAction === 'move' && !bulkMoveTargetGroupId)}
             onclick={executeBulkAction}
-        >Go</button>
+          >Apply</button>
-        {#if checkedUnitIds.size > 0}
-          <button class="bulk-clear plain" onclick={() => { checkedUnitIds = new Set(); bulkAction = ''; bulkMoveTargetGroupId = ''; }} title="Clear selection">✕</button>
-        {/if}
         </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 {