```

replace setting tab button with conditional rendering based on user authentication status, showing avatar if available
```

002_source/ionic_mobile/src/App.tsx

@@ -30,6 +30,8 @@ import './google_fonts.css';
 import { App as CapacitorApp } from '@capacitor/app';
 import {
   IonApp,
+  IonFab,
+  IonFabButton,
   IonIcon,
   IonLabel,
   IonRouterOutlet,
@@ -48,6 +50,9 @@ import ContextMeta from './contexts';
 import { useAppStateContext } from './contexts/AppState';
 import { useMyIonQuizContext } from './contexts/MyIonQuiz';
 import { RouteConfig } from './RouteConfig';
+import { Paths } from './Paths';
+import { useUser } from './hooks/use-user';
+import getImageUrlFromFile from './lib/get-image-url-from-file.ts';
 
 let active_color = 'tomato';
 let inactive_color = 'gray';
@@ -68,6 +73,7 @@ setupIonicReact();
 const TabButtons: React.FC = () => {
   let router = useIonRouter();
   const { t } = useTranslation();
+  const { user, error, isLoading } = useUser();
 
   let {
     url_push_after_user_confirm,
@@ -130,15 +136,43 @@ const TabButtons: React.FC = () => {
         {/*  */}
 
         {/* 003_remove_setting_screen, hide setting on bottom tabs */}
-        <IonTabButton
-          tab="setting"
-          onClick={() => goSwitchPage(SETTING_LINK)}
-          style={{ color: tab_active == SETTING_LINK ? active_color : inactive_color }}
-        >
-          <IonIcon aria-hidden="true" icon={settingsOutline} size="large" />
-        </IonTabButton>
+        {user ? (
+          <IonTabButton
+            tab="setting"
+            onClick={() => goSwitchPage(SETTING_LINK)}
+            style={{ color: tab_active == SETTING_LINK ? active_color : inactive_color }}
+          >
+            <div
+              style={{
+                width: '50px',
+                height: '50px',
+                padding: 5,
+              }}
+            >
+              <div
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  backgroundImage: `url("${getImageUrlFromFile(user.collectionId, user.id, user.avatar)}")`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  //
+                  borderRadius: '50%',
+                }}
+              ></div>
+            </div>
+          </IonTabButton>
+        ) : (
+          <IonTabButton
+            tab="setting"
+            onClick={() => goSwitchPage(SETTING_LINK)}
+            style={{ color: tab_active == SETTING_LINK ? active_color : inactive_color }}
+          >
+            <IonIcon aria-hidden="true" icon={settingsOutline} size="large" />
+          </IonTabButton>
+        )}
 
-        {DEBUG ? (
+        {false ? (
           <IonTabButton
             tab="debug"
             onClick={() => goSwitchPage(DEBUG_LINK)}

002_source/ionic_mobile/src/main.tsx

@@ -9,5 +9,5 @@ const root = createRoot(container!);
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
 );