Refactor code structure for improved readability and maintainability

frontend/src/components/Layout.tsx

@@ -1,12 +1,16 @@
 import { Outlet } from 'react-router-dom'
 import Sidebar from './Sidebar'
 import { useState } from 'react'
+import AutoTranslate from './AutoTranslate'
+import BrowserDialogTranslator from './BrowserDialogTranslator'
 
 export default function Layout() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
 
   return (
     <div className="min-h-screen bg-gray-50 flex dark:bg-gray-950">
+      <AutoTranslate />
+      <BrowserDialogTranslator />
       <Sidebar collapsed={sidebarCollapsed} onToggle={() => setSidebarCollapsed(!sidebarCollapsed)} />
       <main className={`flex-1 transition-all duration-300 ${sidebarCollapsed ? 'ml-16' : 'ml-60'}`}>
         <div className="p-6">