``update Add platform-specific back button for Android, replace header layout, use LoadingSpinner, and refactor imports in Lesson page component``

002_source/ionic_mobile/src/pages/Lesson/index.tsx

@@ -1,6 +1,9 @@
 import {
+  IonButton,
+  IonButtons,
   IonContent,
   IonHeader,
+  IonIcon,
   IonItem,
   IonList,
   IonPage,
@@ -15,20 +18,18 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 import ExitButton from '../../components/ExitButton';
-import { LoadingScreen } from '../../components/LoadingScreen';
+import { LoadingScreen, LoadingSpinner } from '../../components/LoadingScreen';
 import CongratConnectiveConqueror from '../../components/Modal/Congratulation/ConnectiveConqueror';
 import CongratGenius from '../../components/Modal/Congratulation/Genius';
 import CongratHardworker from '../../components/Modal/Congratulation/Hardworker';
 import CongratListeningProgress from '../../components/Modal/Congratulation/ListeningProgress';
 import CongratMatchmaking from '../../components/Modal/Congratulation/Matchmaking';
-import { LESSON_LINK } from '../../constants';
-import { useMyIonStore } from '../../contexts/MyIonStore';
-import { listLessonCategories } from '../../public_data/listLessonCategories';
 import LessonContainer from './LessonContainer';
-import useHelloworld from '../../hooks/useHelloworld';
 import useListAllLessonTypes from '../../hooks/useListAllLessonTypes';
-import LessonsTypes, { LessonsType } from '../../types/LessonsTypes';
+import { LessonsType } from '../../types/LessonsTypes';
-import useListCategoriesByLessonId from '../../hooks/useListCategoriesByLessonId';
+import { ellipsisHorizontal, ellipsisVertical, personCircle, search } from 'ionicons/icons';
+import { Capacitor } from '@capacitor/core';
+import { RUNNING_PLATFORM } from '../../constants';
 
 const Lesson: React.FC = () => {
   const { act_category } = useParams<{ act_category: string }>();
@@ -60,30 +61,25 @@ const Lesson: React.FC = () => {
     <IonPage>
       <IonHeader className="ion-no-border">
         <IonToolbar>
-          <div
+          {/* show when scroll up */}
-            style={{
+
-              //
+          {RUNNING_PLATFORM == 'android' ? (
-              display: 'flex',
+            <IonButtons slot="primary">
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              padding: '0 0.5rem 0 0.5rem',
-            }}
-          >
-            <IonTitle size="large" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-              {t('Lesson')}
-            </IonTitle>
-            <div>
               <ExitButton />
-            </div>
+            </IonButtons>
-          </div>
+          ) : (
+            <></>
+          )}
+          <IonTitle>{t('lesson')}</IonTitle>
         </IonToolbar>
       </IonHeader>
+
       <IonContent fullscreen>
         <IonHeader collapse="condense">
+          {/* show when no scrolling */}
           <IonToolbar>
             <IonTitle size="large" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-              <div>{'Lesson'}</div>
+              <div>{t('lesson')}</div>
             </IonTitle>
           </IonToolbar>
         </IonHeader>
@@ -113,7 +109,7 @@ const Lesson: React.FC = () => {
         {lessonTypes[active_lesson_idx]?.id ? (
           <LessonContainer lesson_type_id={lessonTypes[active_lesson_idx].id} />
         ) : (
-          <>loading (id undefined)</>
+          <LoadingSpinner />
         )}
         {/*  */}
         <CongratGenius />