Update src/App.tsx

src/App.tsx

@@ -1,3 +1,5 @@
+// src/App.tsx
+
 /**
 Copyright 2024 Google LLC
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -19,7 +21,7 @@ import { IOSModal } from "./components/ios-modal/IOSModal";
 import { isIOS } from "./lib/platform";
 import cn from "classnames";
 import { LiveConfig } from "./multimodal-live-types";
-import LogoAnimation from "./components/logo-animation/LogoAnimation"; // ایمپورت کامپوننت لوگو
+import LogoAnimation from "./components/logo-animation/LogoAnimation";
 
 const myCustomInstruction = `
 ت1. هویت دستیار:
@@ -105,8 +107,6 @@ const initialAppConfig: LiveConfig = {
   },
 };
 
-// SVG آیکون میکروفون از HTML مرجع شما (با سه خط افقی)
-// این آیکون به ControlTray پاس داده می‌شود
 const SvgReferenceMicrophoneIcon = () => (
     <svg className="reference-mic-svg" viewBox="0 0 69 68" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path opacity="0.4" d="M49.9479 27.1824C49.0803 27.1824 48.3907 27.872 48.3907 28.7396V32.2544C48.3907 40.1293 41.984 46.5361 34.109 46.5361C26.234 46.5361 19.8273 40.1293 19.8273 32.2544V28.7173C19.8273 27.8497 19.1377 27.1601 18.2701 27.1601C17.4025 27.1601 16.7129 27.8497 16.7129 28.7173V32.2321C16.7129 41.2861 23.6758 48.7384 32.5518 49.5393V54.2776C32.5518 55.1452 33.2414 55.8348 34.109 55.8348C34.9766 55.8348 35.6662 55.1452 35.6662 54.2776V49.5393C44.52 48.7607 51.5051 41.2861 51.5051 32.2321V28.7173C51.4829 27.872 50.7933 27.1824 49.9479 27.1824Z" fill="#BE123C"/>
@@ -146,7 +146,20 @@ const AppInternalLogic: React.FC<{
   return (
     <div className="w-full flex flex-col items-center justify-center min-h-screen text-foreground antialiased">
       <div className="main-wrapper max-w-3xl w-full flex flex-col items-center justify-center h-full relative">
+        {/* *** MODIFIED: ترتیب دکمه‌های هدر عوض شد *** */}
         <div className="header-controls">
+          {/* دکمه بازگشت (حالا سمت چپ) */}
+          <div className="back-button-container">
+            <button
+              id="back-button"
+              aria-label="Go back"
+              className="header-button"
+              onClick={() => alert('Back clicked (implement navigation)')}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"></path></svg>
+            </button>
+          </div>
+          {/* دکمه نوتیفیکیشن (حالا سمت راست) */}
           <div id="notification-trigger-container">
             <button
               ref={notificationButtonRef}
@@ -161,16 +174,6 @@ const AppInternalLogic: React.FC<{
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
             </button>
           </div>
-          <div className="back-button-container">
-            <button
-              id="back-button"
-              aria-label="Go back"
-              className="header-button"
-              onClick={() => alert('Back clicked (implement navigation)')}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"></path></svg>
-            </button>
-          </div>
         </div>
 
         <div ref={notificationPopoverRef} id="notification-popover-wrapper" className="notification-popover-wrapper">
@@ -217,7 +220,6 @@ const AppInternalLogic: React.FC<{
           isAppCamActive={isCamActive}
           onAppCamToggle={setIsCamActive}
           ReferenceMicrophoneIcon={SvgReferenceMicrophoneIcon}
-          // LogoAnimation کامپوننت مستقیما در ControlTray ایمپورت و استفاده می شود
         />
       </div>
     </div>
@@ -234,7 +236,7 @@ function App() {
   const [isNotificationOpen, setIsNotificationOpen] = useState(false);
 
   const notificationPopoverRef = useRef<HTMLDivElement>(null);
-  const notificationButtonRef = useRef<HTMLButtonElement>(null);
+  const notificationButtonRef = useRef<HTMLButtonElement>(null); // این ref هنوز برای دکمه نوتیفیکیشن استفاده می‌شود
 
   useEffect(() => {
     if (isIOS()) {
@@ -248,11 +250,12 @@ function App() {
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
+      // منطق بستن پاپ‌اور نوتیفیکیشن با کلیک بیرون، همچنان باید روی notificationButtonRef کار کند
       if (
         isNotificationOpen &&
         notificationPopoverRef.current &&
         !notificationPopoverRef.current.contains(event.target as Node) &&
-        notificationButtonRef.current &&
+        notificationButtonRef.current && // اطمینان از اینکه ref دکمه نوتیفیکیشن هنوز معتبر است
         !notificationButtonRef.current.contains(event.target as Node)
       ) {
         setIsNotificationOpen(false);
@@ -277,7 +280,7 @@ function App() {
         setIsCamActive={setIsCamActive}
         videoRef={videoRef}
         notificationPopoverRef={notificationPopoverRef}
-        notificationButtonRef={notificationButtonRef}
+        notificationButtonRef={notificationButtonRef} // پاس دادن ref دکمه نوتیفیکیشن
         isNotificationOpen={isNotificationOpen}
         setIsNotificationOpen={setIsNotificationOpen}
       />