(feat:tools) reflect custom name on ui

frontend/src/components/ToolsPopup.tsx

@@ -201,7 +201,7 @@ export default function ToolsPopup({
                       />
                       <div className="overflow-hidden">
                         <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-xs font-medium text-gray-900 dark:text-white">
-                          {tool.displayName}
+                          {tool.customName || tool.displayName}
                         </p>
                       </div>
                     </div>

frontend/src/locale/en.json

@@ -117,12 +117,12 @@
       "noToolsFound": "No tools found",
       "selectToolSetup": "Select a tool to set up",
       "settingsIconAlt": "Settings icon",
-      "configureToolAria": "Configure {toolName}",
-      "toggleToolAria": "Toggle {toolName}",
+      "configureToolAria": "Configure {{toolName}}",
+      "toggleToolAria": "Toggle {{toolName}}",
       "manageTools": "Go to Tools",
       "edit": "Edit",
       "delete": "Delete",
-      "deleteWarning": "Are you sure you want to delete {toolName}?",
+      "deleteWarning": "Are you sure you want to delete the tool \"{{toolName}}\" ?",
       "unsavedChanges": "You have unsaved changes that will be lost if you leave without saving.",
       "leaveWithoutSaving": "Leave without Saving",
       "saveAndLeave": "Save and Leave"

frontend/src/settings/Tools.tsx

@@ -288,7 +288,8 @@ export default function Tools() {
           />
           <ConfirmationModal
             message={t('settings.tools.deleteWarning', {
-              toolName: toolToDelete?.displayName || '',
+              toolName:
+                toolToDelete?.customName || toolToDelete?.displayName || '',
             })}
             modalState={deleteModalState}
             setModalState={setDeleteModalState}