From 709be7555a160f697ee869032c2e8a4b00030c54 Mon Sep 17 00:00:00 2001
From: tanyar09 <tatiana.romlit@gmail.com>
Date: Wed, 26 Nov 2025 15:14:22 -0500
Subject: [PATCH] refactor: Simplify footer navigation and conditionally
 display developer mode information

This commit refactors the Layout component to simplify the footer navigation by removing the Settings item. Additionally, it updates the AutoMatch and Identify components to conditionally display user information and face location details based on the developer mode status, enhancing the clarity of the UI. Documentation has been updated to reflect these changes.
---
 frontend/src/components/Layout.tsx |  5 +----
 frontend/src/pages/AutoMatch.tsx   | 20 ++++++++++++--------
 frontend/src/pages/Identify.tsx    |  2 +-
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index dfe5d04..518ca39 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -45,10 +45,7 @@ export default function Layout() {
     { path: '/manage-users', label: 'Users', icon: '👥', featureKey: 'manage_users' },
   ]
 
-  const footerNavItems: NavItem[] = [
-    { path: '/settings', label: 'Settings', icon: '⚙️' },
-    { path: '/help', label: 'Help', icon: '📚' },
-  ]
+  const footerNavItems: NavItem[] = [{ path: '/help', label: 'Help', icon: '📚' }]
 
   const filterNavItems = (items: NavItem[]) =>
     items.filter((item) => !item.featureKey || hasPermission(item.featureKey))
diff --git a/frontend/src/pages/AutoMatch.tsx b/frontend/src/pages/AutoMatch.tsx
index a071964..c137198 100644
--- a/frontend/src/pages/AutoMatch.tsx
+++ b/frontend/src/pages/AutoMatch.tsx
@@ -623,9 +623,11 @@ export default function AutoMatch() {
                 <>
                   <div className="mb-4">
                     <div className="flex items-center justify-between mb-2">
-                      <div className="text-sm text-gray-600">
-                        Person {currentIndex + 1}
-                      </div>
+                      {isDeveloperMode && (
+                        <div className="text-sm text-gray-600">
+                          Person {currentIndex + 1}
+                        </div>
+                      )}
                       <div className="space-x-2">
                         <button
                           onClick={goBack}
@@ -647,9 +649,11 @@ export default function AutoMatch() {
                     <p className="text-sm text-gray-600">
                       📁 Photo: {currentPerson.reference_photo_filename}
                     </p>
-                    <p className="text-sm text-gray-600">
-                      📍 Face location: {currentPerson.reference_location}
-                    </p>
+                    {isDeveloperMode && (
+                      <p className="text-sm text-gray-600">
+                        📍 Face location: {currentPerson.reference_location}
+                      </p>
+                    )}
                     <p className="text-sm text-gray-600">
                       📊 {currentPerson.face_count} faces already identified
                     </p>
@@ -781,8 +785,8 @@ export default function AutoMatch() {
               </button>
             </div>
             <div className="text-sm text-gray-600">
-              Person {currentIndex + 1}
-              {currentPerson && ` • ${currentPerson.total_matches} matches`}
+              {isDeveloperMode && `Person ${currentIndex + 1} `}
+              {currentPerson && `• ${currentPerson.total_matches} matches`}
             </div>
           </div>
         </>
diff --git a/frontend/src/pages/Identify.tsx b/frontend/src/pages/Identify.tsx
index 653f2a2..6e5a546 100644
--- a/frontend/src/pages/Identify.tsx
+++ b/frontend/src/pages/Identify.tsx
@@ -953,7 +953,7 @@ export default function Identify() {
                       setDob(e.target.value)
                       setPersonId(undefined) // Clear person selection when typing
                     }}
-                      className="mt-1 block w-full border rounded px-2 py-1"
+                      className="mt-1 block border rounded px-2 py-1 w-full max-w-[220px]"
                       readOnly={!!personId}
                       disabled={!!personId} />
                   </div>