@nice2dev/ui-printing 1.1.6 → 1.1.9

package/src/print-queue/NicePrintQueue.tsx

@@ -1,3 +1,5 @@
+import { NiceIcon, useNiceTranslation } from '@nice2dev/ui';
+import type { NiceTranslateFn } from '@nice2dev/ui';
 import React, { useState, useCallback } from 'react';
 
 import type { PrintJob, PrinterInfo, NicePrintQueueProps } from '../types/printingTypes';
@@ -5,32 +7,46 @@ import type { PrintJob, PrinterInfo, NicePrintQueueProps } from '../types/printi
 import styles from './PrintQueue.module.css';
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
-const STATUS_LABELS: Record<string, string> = {
-  queued: 'Kolejka',
-  printing: 'Drukowanie',
-  done: 'Wydrukowano',
-  error: 'Błąd',
-  paused: 'Wstrzymano',
-  cancelled: 'Anulowano',
+const STATUS_DEFAULTS: Record<string, string> = {
+  queued: 'Queued',
+  printing: 'Printing',
+  done: 'Printed',
+  error: 'Error',
+  paused: 'Paused',
+  cancelled: 'Cancelled',
 };
 
-function formatTime(iso: string): string {
+const statusLabel = (t: NiceTranslateFn, status: string): string =>
+  STATUS_DEFAULTS[status] ? t(`printing.status.${status}`, STATUS_DEFAULTS[status]) : status;
+
+function formatTime(lang: string, iso: string): string {
   try {
     const d = new Date(iso);
-    return d.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' });
+    return d.toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit' });
   } catch {
     return iso;
   }
 }
 
+/**
+ * How long a job has been running. Rolls over into hours and days — without
+ * that, a job stuck since yesterday rendered as `1680m 12s`, which reads as a
+ * bug rather than as a stuck job.
+ */
 function formatDuration(startIso: string): string {
-  const diff = Date.now() - new Date(startIso).getTime();
-  const s = Math.floor(diff / 1000);
+  const s = Math.floor((Date.now() - new Date(startIso).getTime()) / 1000);
   if (s < 60) {
     return `${s}s`;
   }
   const m = Math.floor(s / 60);
-  return `${m}m ${s % 60}s`;
+  if (m < 60) {
+    return `${m}m ${s % 60}s`;
+  }
+  const h = Math.floor(m / 60);
+  if (h < 24) {
+    return `${h}h ${m % 60}m`;
+  }
+  return `${Math.floor(h / 24)}d ${h % 24}h`;
 }
 
 // ── Stats bar ─────────────────────────────────────────────────────────────────
@@ -38,6 +54,7 @@ interface StatsBarProps {
   jobs: PrintJob[];
 }
 const StatsBar: React.FC<StatsBarProps> = ({ jobs }) => {
+  const { t } = useNiceTranslation();
   const printing = jobs.filter((j) => j.status === 'printing').length;
   const queued = jobs.filter((j) => j.status === 'queued').length;
   const done = jobs.filter((j) => j.status === 'done').length;
@@ -46,19 +63,20 @@ const StatsBar: React.FC<StatsBarProps> = ({ jobs }) => {
     <div className={styles.statsBar}>
       <span className={`${styles.stat} ${styles.statPrinting}`}>
         <span className={styles.dot} />
-        Drukuje: <strong>{printing}</strong>
+        {t('printing.stats.active', 'Printing')}: <strong>{printing}</strong>
       </span>
       <span className={`${styles.stat} ${styles.statQueued}`}>
-        <span className={styles.dot} />W kolejce: <strong>{queued}</strong>
+        <span className={styles.dot} />
+        {t('printing.stats.queued', 'In queue')}: <strong>{queued}</strong>
       </span>
       <span className={`${styles.stat} ${styles.statDone}`}>
         <span className={styles.dot} />
-        Gotowe: <strong>{done}</strong>
+        {t('printing.stats.done', 'Done')}: <strong>{done}</strong>
       </span>
       {errored > 0 && (
         <span className={`${styles.stat} ${styles.statError}`}>
           <span className={styles.dot} />
-          Błędy: <strong>{errored}</strong>
+          {t('printing.stats.errors', 'Errors')}: <strong>{errored}</strong>
         </span>
       )}
     </div>
@@ -90,6 +108,7 @@ const JobRow: React.FC<JobRowProps> = ({
   onPrint,
   onReorder,
 }) => {
+  const { t, lang } = useNiceTranslation();
   const printer = printers.find((p) => p.id === job.options.printerId);
   const canMoveUp = index > 0 && job.status === 'queued';
   const canMoveDown = index < total - 1 && job.status === 'queued';
@@ -108,7 +127,7 @@ const JobRow: React.FC<JobRowProps> = ({
 
       {/* Status badge */}
       <span className={`${styles.statusBadge} ${styles[`badge-${job.status}`]}`}>
-        {STATUS_LABELS[job.status] ?? job.status}
+        {statusLabel(t, job.status)}
       </span>
 
       {/* Job info */}
@@ -116,9 +135,15 @@ const JobRow: React.FC<JobRowProps> = ({
         <div className={styles.jobName}>{job.templateName ?? job.templateId}</div>
         <div className={styles.jobMeta}>
           {job.entityLabel && <span>{job.entityLabel}</span>}
-          {printer && <span>🖨 {printer.name}</span>}
+          {printer && (
+            <span>
+              <NiceIcon name="printer" size={12} /> {printer.name}
+            </span>
+          )}
           <span>×{job.options.copies}</span>
-          {job.createdAt && <span className={styles.jobTime}>{formatTime(job.createdAt)}</span>}
+          {job.createdAt && (
+            <span className={styles.jobTime}>{formatTime(lang, job.createdAt)}</span>
+          )}
           {job.startedAt && job.status !== 'done' && (
             <span className={styles.jobDuration}>{formatDuration(job.startedAt)}</span>
           )}
@@ -140,20 +165,22 @@ const JobRow: React.FC<JobRowProps> = ({
         <button
           className={styles.copiesBtn}
           disabled={job.options.copies <= 1}
+          aria-label={t('printing.copies.decrease', 'One copy fewer')}
           onClick={() =>
             onUpdate(job.id, { options: { ...job.options, copies: job.options.copies - 1 } })
           }
         >
-          −
+          <NiceIcon name="minus" size={12} />
         </button>
         <span className={styles.copiesValue}>{job.options.copies}</span>
         <button
           className={styles.copiesBtn}
+          aria-label={t('printing.copies.increase', 'One copy more')}
           onClick={() =>
             onUpdate(job.id, { options: { ...job.options, copies: job.options.copies + 1 } })
           }
         >
-          +
+          <NiceIcon name="plus" size={12} />
         </button>
       </div>
 
@@ -162,50 +189,54 @@ const JobRow: React.FC<JobRowProps> = ({
         {canMoveUp && (
           <button
             className={styles.actionBtn}
-            title="Przesuń wyżej"
+            title={t('printing.action.moveUp', 'Move up')}
             onClick={() => onReorder(index, index - 1)}
           >
-            ↑
+            <NiceIcon name="arrow-up" size={14} />
           </button>
         )}
         {canMoveDown && (
           <button
             className={styles.actionBtn}
-            title="Przesuń niżej"
+            title={t('printing.action.moveDown', 'Move down')}
             onClick={() => onReorder(index, index + 1)}
           >
-            ↓
+            <NiceIcon name="arrow-down" size={14} />
           </button>
         )}
         {job.status === 'queued' && (
-          <button className={styles.actionBtn} title="Drukuj teraz" onClick={() => onPrint(job.id)}>
-            ▶
+          <button
+            className={styles.actionBtn}
+            title={t('printing.action.printNow', 'Print now')}
+            onClick={() => onPrint(job.id)}
+          >
+            <NiceIcon name="play" size={14} />
           </button>
         )}
         {job.status === 'printing' && (
           <button
             className={styles.actionBtn}
-            title="Wstrzymaj"
+            title={t('printing.action.pause', 'Pause')}
             onClick={() => onUpdate(job.id, { status: 'paused' })}
           >
-            ⏸
+            <NiceIcon name="pause" size={14} />
           </button>
         )}
         {job.status === 'paused' && (
           <button
             className={styles.actionBtn}
-            title="Wznów"
+            title={t('printing.action.resume', 'Resume')}
             onClick={() => onUpdate(job.id, { status: 'queued' })}
           >
-            ▶
+            <NiceIcon name="play" size={14} />
           </button>
         )}
         <button
           className={`${styles.actionBtn} ${styles.removeBtn}`}
-          title="Usuń"
+          title={t('printing.action.remove', 'Remove')}
           onClick={() => onRemove(job.id)}
         >
-          ✕
+          <NiceIcon name="close" size={14} />
         </button>
       </div>
     </div>
@@ -227,6 +258,7 @@ export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
   style,
   theme = 'light',
 }) => {
+  const { t } = useNiceTranslation();
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [filter, setFilter] = useState<'all' | 'queued' | 'printing' | 'done' | 'error'>('all');
 
@@ -280,7 +312,7 @@ export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
               className={`${styles.filterTab} ${filter === f ? styles.filterTabActive : ''}`}
               onClick={() => setFilter(f)}
             >
-              {f === 'all' ? 'Wszystkie' : STATUS_LABELS[f]}
+              {f === 'all' ? t('printing.filter.all', 'All') : statusLabel(t, f)}
               <span className={styles.filterCount}>
                 {f === 'all' ? jobs.length : jobs.filter((j) => j.status === f).length}
               </span>
@@ -291,15 +323,17 @@ export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
         {/* Bulk actions */}
         {selectedIds.size > 0 && (
           <div className={styles.bulkActions}>
-            <span className={styles.bulkCount}>{selectedIds.size} zaznaczonych</span>
+            <span className={styles.bulkCount}>
+              {selectedIds.size} {t('printing.bulk.selected', 'selected')}
+            </span>
             {onBulkPrint && (
               <button className={styles.bulkBtn} onClick={bulkPrint}>
-                ▶ Drukuj wybrane
+                <NiceIcon name="printer" size={14} /> {t('printing.bulk.print', 'Print selected')}
               </button>
             )}
             {onBulkRemove && (
               <button className={`${styles.bulkBtn} ${styles.bulkBtnRemove}`} onClick={bulkRemove}>
-                ✕ Usuń wybrane
+                <NiceIcon name="trash" size={14} /> {t('printing.bulk.remove', 'Remove selected')}
               </button>
             )}
           </div>
@@ -311,8 +345,8 @@ export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
         {filteredJobs.length === 0 ? (
           <div className={styles.emptyState}>
             {filter === 'all'
-              ? 'Brak zadań w kolejce'
-              : `Brak zadań ze statusem "${STATUS_LABELS[filter]}"`}
+              ? t('printing.empty.queue', 'No jobs in the queue')
+              : `${t('printing.empty.filtered', 'No jobs with status')} "${statusLabel(t, filter)}"`}
           </div>
         ) : (
           <>
@@ -323,9 +357,9 @@ export const NicePrintQueue: React.FC<NicePrintQueueProps> = ({
                 onChange={selectAll}
                 checked={selectedIds.size === filteredJobs.length && filteredJobs.length > 0}
               />
-              <span className={styles.headerLabel}>Zadanie</span>
-              <span className={styles.headerLabel}>Kopie</span>
-              <span className={styles.headerLabel}>Akcje</span>
+              <span className={styles.headerLabel}>{t('printing.col.job', 'Job')}</span>
+              <span className={styles.headerLabel}>{t('printing.col.copies', 'Copies')}</span>
+              <span className={styles.headerLabel}>{t('printing.col.actions', 'Actions')}</span>
             </div>
             {filteredJobs.map((job, _index) => (
               <JobRow

package/src/print-queue/PrintQueue.module.css

@@ -1,7 +1,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  background: var(--nice-bg, #FFF);
+  background: var(--nice-bg, #fff);
   border: 1px solid var(--nice-border, #e2e8f0);
   border-radius: var(--nice-radius-xl, 12px);
   overflow: hidden;
@@ -9,7 +9,11 @@
   font-size: 14px;
   color: var(--nice-text, #1e293b);
 }
-.dark { background: var(--nice-text, #1e293b); border-color: var(--nice-text, #334155); color: var(--nice-bg-secondary, #f1f5f9); }
+.dark {
+  background: var(--nice-bg-secondary, #1e293b);
+  border-color: var(--nice-border-color, #334155);
+  color: var(--nice-text-primary, #f1f5f9);
+}
 
 /* Stats bar */
 .statsBar {
@@ -20,14 +24,35 @@
   background: var(--nice-bg-secondary, #f8fafc);
   border-bottom: 1px solid var(--nice-border, #e2e8f0);
 }
-.dark .statsBar { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); }
+.dark .statsBar {
+  background: var(--nice-bg-primary, #0f172a);
+  border-color: var(--nice-border-color, #334155);
+}
 
-.stat { display: flex; align-items: center; gap: var(--nice-space-1-5, 6px); font-size: 13px; }
-.dot { width: 8px; height: 8px; border-radius: var(--nice-radius-full, 50%); display: inline-block; }
-.statPrinting .dot { background: var(--nice-primary-hover, #2563eb); }
-.statQueued .dot { background: var(--nice-text-secondary, #64748b); }
-.statDone .dot { background: var(--nice-success-dark, #16a34a); }
-.statError .dot { background: var(--nice-danger-dark, #dc2626); }
+.stat {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-1-5, 6px);
+  font-size: 13px;
+}
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--nice-radius-full, 50%);
+  display: inline-block;
+}
+.statPrinting .dot {
+  background: var(--nice-primary-hover, #2563eb);
+}
+.statQueued .dot {
+  background: var(--nice-text-secondary, #64748b);
+}
+.statDone .dot {
+  background: var(--nice-success-dark, #16a34a);
+}
+.statError .dot {
+  background: var(--nice-danger-dark, #dc2626);
+}
 
 /* Toolbar */
 .toolbar {
@@ -38,11 +63,18 @@
   border-bottom: 1px solid var(--nice-border, #e2e8f0);
   flex-wrap: wrap;
 }
-.dark .toolbar { border-color: var(--nice-text, #334155); }
+.dark .toolbar {
+  border-color: var(--nice-border-color, #334155);
+}
 
-.filterTabs { display: flex; gap: var(--nice-space-1, 4px); }
+.filterTabs {
+  display: flex;
+  gap: var(--nice-space-1, 4px);
+}
 .filterTab {
-  display: flex; align-items: center; gap: var(--nice-space-1-25, 5px);
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-1-25, 5px);
   padding: var(--nice-space-1, 4px) var(--nice-space-2-5, 10px);
   background: none;
   border: 1px solid var(--nice-border, #e2e8f0);
@@ -51,31 +83,60 @@
   font-size: 12px;
   color: var(--nice-text-secondary, #475569);
 }
-.filterTab:hover { background: var(--nice-bg-secondary, #f1f5f9); }
-.filterTabActive { background: var(--nice-primary-bg, #eff6ff); border-color: var(--nice-primary-hover, #2563eb); color: var(--nice-primary-hover, #2563eb); }
+.filterTab:hover {
+  background: var(--nice-bg-secondary, #f1f5f9);
+}
+.filterTabActive {
+  background: var(--nice-primary-bg, #eff6ff);
+  border-color: var(--nice-primary-hover, #2563eb);
+  color: var(--nice-primary-hover, #2563eb);
+}
 .filterCount {
-  background: var(--nice-bg-secondary, #f1f5f9); padding: var(--nice-space-px, 1px) var(--nice-space-1-25, 5px); border-radius: var(--nice-radius-lg, 8px);
-  font-size: 11px; color: var(--nice-text-secondary, #64748b);
+  background: var(--nice-bg-secondary, #f1f5f9);
+  padding: var(--nice-space-px, 1px) var(--nice-space-1-25, 5px);
+  border-radius: var(--nice-radius-lg, 8px);
+  font-size: 11px;
+  color: var(--nice-text-secondary, #64748b);
+}
+.filterTabActive .filterCount {
+  background: var(--nice-primary-bg, #dbeafe);
+  color: var(--nice-primary-hover, #2563eb);
 }
-.filterTabActive .filterCount { background: var(--nice-primary-bg, #dbeafe); color: var(--nice-primary-hover, #2563eb); }
 
-.bulkActions { display: flex; align-items: center; gap: var(--nice-space-2, 8px); margin-left: auto; }
-.bulkCount { font-size: 13px; color: var(--nice-text-secondary, #64748b); }
+.bulkActions {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-2, 8px);
+  margin-left: auto;
+}
+.bulkCount {
+  font-size: 13px;
+  color: var(--nice-text-secondary, #64748b);
+}
 .bulkBtn {
   padding: var(--nice-space-1, 4px) var(--nice-space-2-5, 10px);
   border-radius: var(--nice-radius-md, 6px);
   border: 1px solid var(--nice-border, #e2e8f0);
   cursor: pointer;
   font-size: 12px;
-  background: var(--nice-bg, #FFF);
+  background: var(--nice-bg, #fff);
   color: var(--nice-text, #1e293b);
 }
-.bulkBtn:hover { background: var(--nice-bg-secondary, #f1f5f9); }
-.bulkBtnRemove { color: var(--nice-danger-dark, #dc2626); border-color: var(--nice-danger-bg, #fecaca); }
-.bulkBtnRemove:hover { background: var(--nice-danger-bg, #fef2f2); }
+.bulkBtn:hover {
+  background: var(--nice-bg-secondary, #f1f5f9);
+}
+.bulkBtnRemove {
+  color: var(--nice-danger-dark, #dc2626);
+  border-color: var(--nice-danger-bg, #fecaca);
+}
+.bulkBtnRemove:hover {
+  background: var(--nice-danger-bg, #fef2f2);
+}
 
 /* Job list */
-.jobList { overflow-y: auto; }
+.jobList {
+  overflow-y: auto;
+}
 
 .listHeader {
   display: grid;
@@ -90,8 +151,12 @@
   letter-spacing: 0.05em;
   border-bottom: 1px solid var(--nice-bg-secondary, #f1f5f9);
 }
-.dark .listHeader { border-color: var(--nice-text, #1e293b); }
-.headerLabel { white-space: nowrap; }
+.dark .listHeader {
+  border-color: var(--nice-border-color, #1e293b);
+}
+.headerLabel {
+  white-space: nowrap;
+}
 
 /* Job row */
 .jobRow {
@@ -103,13 +168,27 @@
   border-bottom: 1px solid var(--nice-bg-secondary, #f1f5f9);
   transition: background 0.1s;
 }
-.dark .jobRow { border-color: var(--nice-text, #334155); }
-.jobRow:hover { background: var(--nice-bg-secondary, #f8fafc); }
-.dark .jobRow:hover { background: var(--nice-text, #0f172a); }
-.jobRowSelected { background: var(--nice-primary-bg, #eff6ff) !important; }
-.dark .jobRowSelected { background: #172554 !important; }
+.dark .jobRow {
+  border-color: var(--nice-border-color, #334155);
+}
+.jobRow:hover {
+  background: var(--nice-bg-secondary, #f8fafc);
+}
+.dark .jobRow:hover {
+  background: var(--nice-bg-primary, #0f172a);
+}
+.jobRowSelected {
+  background: var(--nice-primary-bg, #eff6ff) !important;
+}
+.dark .jobRowSelected {
+  background: #172554 !important;
+}
 
-.jobCheckbox { cursor: pointer; width: 16px; height: 16px; }
+.jobCheckbox {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+}
 
 /* Status badges */
 .statusBadge {
@@ -121,26 +200,71 @@
   font-weight: 500;
   white-space: nowrap;
 }
-.badge-queued { background: var(--nice-bg-secondary, #f1f5f9); color: var(--nice-text-secondary, #64748b); }
-.badge-printing { background: var(--nice-primary-bg, #dbeafe); color: var(--nice-primary-dark, #1d4ed8); animation: pulse 1.5s ease-in-out infinite; }
-.badge-done { background: var(--nice-success-bg, #dcfce7); color: var(--nice-success-dark, #16a34a); }
-.badge-error { background: var(--nice-danger-bg, #fee2e2); color: var(--nice-danger-dark, #dc2626); }
-.badge-paused { background: var(--nice-warning-bg, #fef9c3); color: var(--nice-warning-dark, #854d0e); }
-.badge-cancelled { background: var(--nice-bg-secondary, #f1f5f9); color: var(--nice-text-muted, #94a3b8); }
+.badge-queued {
+  background: var(--nice-bg-secondary, #f1f5f9);
+  color: var(--nice-text-secondary, #64748b);
+}
+.badge-printing {
+  background: var(--nice-primary-bg, #dbeafe);
+  color: var(--nice-primary-dark, #1d4ed8);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.badge-done {
+  background: var(--nice-success-bg, #dcfce7);
+  color: var(--nice-success-dark, #16a34a);
+}
+.badge-error {
+  background: var(--nice-danger-bg, #fee2e2);
+  color: var(--nice-danger-dark, #dc2626);
+}
+.badge-paused {
+  background: var(--nice-warning-bg, #fef9c3);
+  color: var(--nice-warning-dark, #854d0e);
+}
+.badge-cancelled {
+  background: var(--nice-bg-secondary, #f1f5f9);
+  color: var(--nice-text-muted, #94a3b8);
+}
 
-@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
 
 /* Job info */
-.jobInfo { min-width: 0; }
-.jobName { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.jobInfo {
+  min-width: 0;
+}
+.jobName {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .jobMeta {
-  display: flex; align-items: center; gap: var(--nice-space-2, 8px);
-  font-size: 12px; color: var(--nice-text-muted, #94a3b8);
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-2, 8px);
+  font-size: 12px;
+  color: var(--nice-text-muted, #94a3b8);
   margin-top: var(--nice-space-0-5, 2px);
 }
-.jobTime { color: var(--nice-text-secondary, #64748b); }
-.jobDuration { color: var(--nice-warning, #f59e0b); }
-.jobError { font-size: 12px; color: var(--nice-danger-dark, #dc2626); margin-top: var(--nice-space-1, 4px); }
+.jobTime {
+  color: var(--nice-text-secondary, #64748b);
+}
+.jobDuration {
+  color: var(--nice-warning, #f59e0b);
+}
+.jobError {
+  font-size: 12px;
+  color: var(--nice-danger-dark, #dc2626);
+  margin-top: var(--nice-space-1, 4px);
+}
 
 /* Progress bar */
 .progressBar {
@@ -165,8 +289,11 @@
   white-space: nowrap;
 }
 .copiesBtn {
-  width: 22px; height: 22px;
-  display: flex; align-items: center; justify-content: center;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: var(--nice-bg-secondary, #f8fafc);
   border: 1px solid var(--nice-border, #e2e8f0);
   border-radius: var(--nice-radius-sm, 4px);
@@ -174,15 +301,31 @@
   font-size: 14px;
   color: var(--nice-text-secondary, #475569);
 }
-.copiesBtn:disabled { opacity: 0.4; cursor: default; }
-.copiesBtn:not(:disabled):hover { background: var(--nice-border, #e2e8f0); }
-.copiesValue { min-width: 20px; text-align: center; font-size: 13px; }
+.copiesBtn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.copiesBtn:not(:disabled):hover {
+  background: var(--nice-border, #e2e8f0);
+}
+.copiesValue {
+  min-width: 20px;
+  text-align: center;
+  font-size: 13px;
+}
 
 /* Actions */
-.jobActions { display: flex; align-items: center; gap: var(--nice-space-1, 4px); }
+.jobActions {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-1, 4px);
+}
 .actionBtn {
-  width: 28px; height: 28px;
-  display: flex; align-items: center; justify-content: center;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: none;
   border: 1px solid var(--nice-border, #e2e8f0);
   border-radius: var(--nice-radius-md, 6px);
@@ -190,9 +333,16 @@
   font-size: 13px;
   color: var(--nice-text-secondary, #475569);
 }
-.actionBtn:hover { background: var(--nice-bg-secondary, #f1f5f9); }
-.removeBtn { color: var(--nice-danger, #ef4444); border-color: var(--nice-danger-bg, #fecaca); }
-.removeBtn:hover { background: var(--nice-danger-bg, #fef2f2); }
+.actionBtn:hover {
+  background: var(--nice-bg-secondary, #f1f5f9);
+}
+.removeBtn {
+  color: var(--nice-danger, #ef4444);
+  border-color: var(--nice-danger-bg, #fecaca);
+}
+.removeBtn:hover {
+  background: var(--nice-danger-bg, #fef2f2);
+}
 
 /* Empty state */
 .emptyState {