From 03bfff713eaedaae9bf46cabeeaa799aee2b7532 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 6 May 2025 13:19:45 -0600
Subject: [PATCH] Always show train tab

---
 web/public/locales/en/views/faceLibrary.json |  3 +-
 web/src/pages/FaceLibrary.tsx                | 50 +++++++++-----------
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/web/public/locales/en/views/faceLibrary.json b/web/public/locales/en/views/faceLibrary.json
index 289ff40cf..5ba744f15 100644
--- a/web/public/locales/en/views/faceLibrary.json
+++ b/web/public/locales/en/views/faceLibrary.json
@@ -29,7 +29,8 @@
   },
   "train": {
     "title": "Train",
-    "aria": "Select train"
+    "aria": "Select train",
+    "empty": "There are no recent face recognition attempts"
   },
   "selectItem": "Select {{item}}",
   "selectFace": "Select Face",
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index 46c90214b..4a295eff7 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -46,6 +46,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isDesktop, isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import {
+  LuFolderCheck,
   LuImagePlus,
   LuInfo,
   LuPencil,
@@ -69,7 +70,7 @@ export default function FaceLibrary() {
     document.title = t("documentTitle");
   }, [t]);
 
-  const [page, setPage] = useState<string>();
+  const [page, setPage] = useState<string>("train");
   const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
 
   // face data
@@ -92,20 +93,6 @@ export default function FaceLibrary() {
     [faceData],
   );
 
-  useEffect(() => {
-    if (!pageToggle) {
-      if (trainImages.length > 0) {
-        setPageToggle("train");
-      } else if (faces) {
-        setPageToggle(faces[0]);
-      }
-    } else if (pageToggle == "train" && trainImages.length == 0) {
-      setPageToggle(faces[0]);
-    }
-    // we need to listen on the value of the faces list
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [trainImages, faces]);
-
   // upload
 
   const [upload, setUpload] = useState(false);
@@ -371,7 +358,7 @@ type LibrarySelectorProps = {
   faceData?: FaceLibraryData;
   faces: string[];
   trainImages: string[];
-  setPageToggle: (toggle: string | undefined) => void;
+  setPageToggle: (toggle: string) => void;
   onDelete: (name: string, ids: string[], isName: boolean) => void;
   onRename: (old_name: string, new_name: string) => void;
 };
@@ -463,18 +450,16 @@ function LibrarySelector({
           className="scrollbar-container max-h-[40dvh] min-w-[220px] overflow-y-auto"
           align="start"
         >
-          {trainImages.length > 0 && (
-            <DropdownMenuItem
-              className="flex cursor-pointer items-center justify-start gap-2"
-              aria-label={t("train.aria")}
-              onClick={() => setPageToggle("train")}
-            >
-              <div>{t("train.title")}</div>
-              <div className="text-secondary-foreground">
-                ({trainImages.length})
-              </div>
-            </DropdownMenuItem>
-          )}
+          <DropdownMenuItem
+            className="flex cursor-pointer items-center justify-start gap-2"
+            aria-label={t("train.aria")}
+            onClick={() => setPageToggle("train")}
+          >
+            <div>{t("train.title")}</div>
+            <div className="text-secondary-foreground">
+              ({trainImages.length})
+            </div>
+          </DropdownMenuItem>
           {trainImages.length > 0 && faces.length > 0 && (
             <>
               <DropdownMenuSeparator />
@@ -624,6 +609,15 @@ function TrainingGrid({
     config?.ui.timezone,
   );
 
+  if (attemptImages.length == 0) {
+    return (
+      <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
+        <LuFolderCheck className="size-16" />
+        {t("train.empty")}
+      </div>
+    );
+  }
+
   return (
     <>
       <Dialog