UX overhaul: routing, accessibility, feedback, and polish
Build and push image / build (push) Successful in 50s

Add react-router-dom for URL-based navigation with browser
back/forward, deep links, and bookmarks. Replace window.confirm()
with styled ConfirmDialog. Add toast notifications and success
feedback on consume/audit/gone flows. Add escape-to-close and
focus trapping on modals. Add entrance animations for drawers,
modals, and toasts. Make grids responsive, add sortable inventory
headers, working CSV/JSON export, time-aware greeting, focus-visible
outlines, search clear button, and hover chevrons on inventory rows.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-04 18:54:49 -04:00
parent 80034b47c5
commit a82045d1bd
21 changed files with 640 additions and 145 deletions
+54
View File
@@ -68,9 +68,49 @@
padding: 16px 12px 6px;
font-weight: 500;
}
.nav-divider {
display: none;
}
.inv-row:hover {
background: var(--bg-2);
}
.inv-row .inv-row-chevron {
opacity: 0;
transition: opacity 100ms;
}
.inv-row:hover .inv-row-chevron {
opacity: 1;
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@keyframes backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modal-in {
from { opacity: 0; transform: scale(0.97) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes drawer-in {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@media (max-width: 1200px) {
.inv-row > :nth-child(4),
.inv-header > :nth-child(4) { display: none; } /* Shop */
.inv-row > :nth-child(8),
.inv-header > :nth-child(8) { display: none; } /* Last checked */
}
@media (max-width: 880px) {
.app-shell {
@@ -97,6 +137,20 @@
.nav-link {
white-space: nowrap;
padding: 8px 12px;
flex-direction: column;
font-size: 10px;
gap: 2px;
align-items: center;
}
.nav-label {
display: none;
}
.nav-divider {
width: 1px;
height: 24px;
background: var(--line);
flex-shrink: 0;
align-self: center;
}
.main {
padding-bottom: 60px;