Update src/App.tsx

src/App.tsx

@@ -14,7 +14,7 @@ limitations under the License.
 */
 
 import React, { useEffect, useRef, useState } from "react";
-import './App.scss';
+import './App.scss'; // استایل‌های اصلی
 import { LiveAPIProvider, useLiveAPIContext } from "./contexts/LiveAPIContext";
 import ControlTray from "./components/control-tray/ControlTray";
 import { IOSModal } from "./components/ios-modal/IOSModal";
@@ -22,6 +22,7 @@ import { isIOS } from "./lib/platform";
 import cn from "classnames";
 import { LiveConfig } from "./multimodal-live-types";
 import LogoAnimation from "./components/logo-animation/LogoAnimation";
+import BackButton from "./components/back-button/BackButton"; // <<-- ایمپورت کامپوننت جدید دکمه بازگشت
 
 const myCustomInstruction = `
 ت1. هویت دستیار:
@@ -121,7 +122,7 @@ const AppInternalLogic: React.FC<{
   setIsCamActive: React.Dispatch<React.SetStateAction<boolean>>;
   videoRef: React.RefObject<HTMLVideoElement>;
   notificationPopoverRef: React.RefObject<HTMLDivElement>;
-  notificationButtonRef: React.RefObject<HTMLButtonElement>;
+  notificationButtonRef: React.RefObject<HTMLButtonElement>; // این ref برای دکمه نوتیفیکیشن است
   isNotificationOpen: boolean;
   setIsNotificationOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }> = ({
@@ -131,7 +132,7 @@ const AppInternalLogic: React.FC<{
   setIsCamActive,
   videoRef,
   notificationPopoverRef,
-  notificationButtonRef,
+  notificationButtonRef, // دریافت ref
   isNotificationOpen,
   setIsNotificationOpen
 }) => {
@@ -146,26 +147,18 @@ 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>
+            <BackButton /> {/* <<-- استفاده از کامپوننت جدید */}
           </div>
           {/* دکمه نوتیفیکیشن (حالا سمت راست) */}
           <div id="notification-trigger-container">
             <button
-              ref={notificationButtonRef}
+              ref={notificationButtonRef} // ref به این دکمه متصل است
               id="notification-button"
               aria-label="Notifications"
-              className="header-button"
+              className="header-button" // کلاس برای ظاهر مشابه
               onClick={(e) => {
                   e.stopPropagation();
                   setIsNotificationOpen(!isNotificationOpen);
@@ -235,8 +228,11 @@ function App() {
   const [isCamActive, setIsCamActive] = useState(false);
   const [isNotificationOpen, setIsNotificationOpen] = useState(false);
 
+  // ref برای دکمه نوتیفیکیشن باید در کامپوننت App تعریف شود
+  // چون state مربوط به isNotificationOpen در App مدیریت می‌شود
+  const notificationButtonRef = useRef<HTMLButtonElement>(null);
   const notificationPopoverRef = useRef<HTMLDivElement>(null);
-  const notificationButtonRef = useRef<HTMLButtonElement>(null); // این ref هنوز برای دکمه نوتیفیکیشن استفاده می‌شود
+
 
   useEffect(() => {
     if (isIOS()) {
@@ -250,12 +246,11 @@ function App() {
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      // منطق بستن پاپ‌اور نوتیفیکیشن با کلیک بیرون، همچنان باید روی notificationButtonRef کار کند
       if (
         isNotificationOpen &&
         notificationPopoverRef.current &&
         !notificationPopoverRef.current.contains(event.target as Node) &&
-        notificationButtonRef.current && // اطمینان از اینکه ref دکمه نوتیفیکیشن هنوز معتبر است
+        notificationButtonRef.current &&
         !notificationButtonRef.current.contains(event.target as Node)
       ) {
         setIsNotificationOpen(false);
@@ -265,7 +260,7 @@ function App() {
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [isNotificationOpen]);
+  }, [isNotificationOpen]); // وابستگی به isNotificationOpen صحیح است
 
   if (isAllowedOrigin === null) {
     return <div style={{ padding: '20px', textAlign: 'center' }}>در حال بررسی دسترسی...</div>;
@@ -280,7 +275,7 @@ function App() {
         setIsCamActive={setIsCamActive}
         videoRef={videoRef}
         notificationPopoverRef={notificationPopoverRef}
-        notificationButtonRef={notificationButtonRef} // پاس دادن ref دکمه نوتیفیکیشن
+        notificationButtonRef={notificationButtonRef} // پاس دادن ref به AppInternalLogic
         isNotificationOpen={isNotificationOpen}
         setIsNotificationOpen={setIsNotificationOpen}
       />