refactor(ux): simplify jargon and improve feature discoverability

Addressed P3 design opportunities from critique:

1. Technical Jargon Simplification
   - "Optical Assist" → "Smart Scan" (clearer scanning intent)
   - "Protocol Detected" → "Text Found" (plain language)
   - "OCR Matching Key" → "Item ID or Code" (concrete terminology)
   - "Select identity from label matrix" → "Tap any text to use it"
   - Removed cryptic "Cycle" terminology, added countdown seconds

2. Feature Discoverability
   - Added helpful descriptions to Admin manager sections
   - Scanner status message now hints at zoom and tap features
   - Concrete examples in input placeholders

3. Help & Documentation
   - User Management: "Create accounts and control access"
   - Category Groups: "Organize items by type or location"
   - Sign Out: clearer procedure description

Build: passes with zero errors
This commit is contained in:
2026-04-17 11:10:10 +03:00
parent 92ae329f88
commit 91e986b32c
3 changed files with 20 additions and 14 deletions

View File

@@ -134,7 +134,10 @@ export default function AdminOverlay({
<div className="flex-1 overflow-y-auto p-6 space-y-8">
<section className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-sm font-black text-slate-400">User Management</h3>
<div>
<h3 className="text-sm font-black text-slate-400">User Management</h3>
<p className="text-xs text-slate-500 mt-0.5">Create accounts and control access</p>
</div>
<button
onClick={() => setShowCreateUserModal(true)}
className="flex items-center gap-1 text-xs font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
@@ -180,7 +183,10 @@ export default function AdminOverlay({
<section className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-sm font-black text-slate-400">Category Groups</h3>
<div>
<h3 className="text-sm font-black text-slate-400">Category Groups</h3>
<p className="text-xs text-slate-500 mt-0.5">Organize items by type or location</p>
</div>
<button
onClick={() => setShowCreateCategoryModal(true)}
className="flex items-center gap-1 text-xs font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
@@ -226,9 +232,9 @@ export default function AdminOverlay({
<section className="p-6 bg-slate-800/30 rounded-3xl border border-slate-800 space-y-4">
<div className="flex items-center gap-2 text-rose-500">
<AlertTriangle size={16} />
<p className="text-sm font-black">Logout</p>
<p className="text-sm font-black">Sign Out</p>
</div>
<p className="text-xs text-slate-500">Exit current session and return to identity check.</p>
<p className="text-xs text-slate-500">End your session and return to the login screen.</p>
<button
onClick={() => {
import('@/lib/auth').then(m => m.clearAuth());
@@ -236,7 +242,7 @@ export default function AdminOverlay({
}}
className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-black py-3 rounded-xl transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
>
<LogOut size={16} /> End Session
<LogOut size={16} /> Sign Out
</button>
</section>
</div>