Name the toner on the forecast, keep the number on the hover

The forecast identified a cartridge by its part number alone. 'W2020X' only
tells you which toner it is once you already know, and both places that name a
supply - the Order now list and the Part column - showed nothing else, so the
report read as a list of codes.

Both now show marketingname, which is what the box says: '414X Black'. The
part number moves to the title attribute, one hover away, because it is still
the thing an order is placed against. A supply with no name on file falls back
to the number rather than showing an empty cell; marketingname is nullable.

'Copy list' is deliberately untouched. It writes the part number verbatim,
which is what purchasing pastes into an order, and a spec pins that the name
does NOT reach that text.

firstPart() now returns the whole part row rather than its number, since the
cell needs both halves. It has one caller.

Dropped the .partnumber style with its .unmapped variant: nothing renders that
class any more, and the variant was already dead - the unmapped block lists no
part number by definition.

Verified by mounting the component against a fixture. The dev box has no
Zabbix, so the page itself has no rows to look at there.

plugins/printers/frontend/views/TonerForecast.vue

@@ -42,7 +42,11 @@
         <ul v-else class="order-list">
           <li v-for="item in mapped" :key="orderKey(item)">
             <span class="quantity">{{ item.quantity }}x</span>
-            <span class="partnumber">{{ item.partnumber }}</span>
+            <!-- Name here too, number on hover. 'Copy list' still writes the
+                 part number, which is what an order is placed against. -->
+            <span class="supplyname" :title="item.partnumber">
+              {{ item.marketingname || item.partnumber }}
+            </span>
             <span class="muted order-detail">
               {{ colorLabel(item.color) }}<template v-if="item.model">, {{ item.model }}</template>
             </span>
@@ -107,7 +111,16 @@
                 </td>
                 <td>{{ c.name }}</td>
                 <td>
-                  <span v-if="firstPart(c)" class="partnumber">{{ firstPart(c) }}</span>
+                  <!-- The cartridge's NAME, with the part number on hover. A
+                       name says which toner this is; 'W2020A' only identifies it
+                       once you already know. The number is what purchasing wants,
+                       so it stays one hover away and stays in the copied order
+                       list verbatim. Falls back to the number when a supply has
+                       no name on file - marketingname is nullable. -->
+                  <span v-if="firstPart(c)" class="supplyname"
+                        :title="firstPart(c).partnumber">
+                    {{ firstPart(c).marketingname || firstPart(c).partnumber }}
+                  </span>
                   <span v-else class="muted">-</span>
                 </td>
                 <td class="collevel">
@@ -259,9 +272,13 @@ function colorLabel(color) {
   return color.charAt(0).toUpperCase() + color.slice(1)
 }
 
+// The whole part row, not just its number: the table shows the name and keeps
+// the number for the hover, and both come from here. Several capacity tiers can
+// match; the first is the standard one, which is what orderlist() groups on and
+// what the low-supplies report shows first.
 function firstPart(cartridge) {
   const parts = cartridge.partnumbers || []
-  return parts.length ? parts[0].partnumber : null
+  return parts.length ? parts[0] : null
 }
 
 function levelText(cartridge) {
@@ -376,8 +393,10 @@ onMounted(load)
   text-align: left;
 }
 .unmapped-block .order-list li { border-top: 1px dashed var(--border); }
-.partnumber { font-family: monospace; font-weight: 700; }
-.partnumber.unmapped { font-weight: 400; color: var(--warning); }
+/* A name is prose, not a code, so it does not get the monospace the part number
+   used to carry here. The help cursor is the only signal that the number is on
+   the hover. Replaced .partnumber, which nothing renders any more. */
+.supplyname { font-weight: 700; cursor: help; }
 .order-detail { font-size: 0.9rem; }
 .order-printers { font-size: 0.8rem; margin-left: auto; text-align: right; }