From a289ed1f908d905c8f0492c04281bd55e5710427 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 20 Aug 2025 06:45:46 -0600
Subject: [PATCH] Enable mobile view for classification and optimize for mobile
 layout

---
 web/src/components/menu/GeneralSettings.tsx        | 14 ++++++++++++++
 .../overlay/dialog/TrainFilterDialog.tsx           |  2 +-
 .../views/classification/ModelSelectionView.tsx    |  4 +++-
 web/src/views/classification/ModelTrainingView.tsx | 10 ++++++++--
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index c4ccdff84..96eee7675 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -65,6 +65,7 @@ import { useTranslation } from "react-i18next";
 import { supportedLanguageKeys } from "@/lib/const";
 
 import { useDocDomain } from "@/hooks/use-doc-domain";
+import { MdCategory } from "react-icons/md";
 
 type GeneralSettingsProps = {
   className?: string;
@@ -315,6 +316,19 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                   </Link>
                 </>
               )}
+              {isAdmin && isMobile && config?.face_recognition.enabled && (
+                <>
+                  <Link to="/classification">
+                    <MenuItem
+                      className="flex w-full items-center p-2 text-sm"
+                      aria-label={t("menu.classification")}
+                    >
+                      <MdCategory className="mr-2 size-4" />
+                      <span>{t("menu.classification")}</span>
+                    </MenuItem>
+                  </Link>
+                </>
+              )}
             </DropdownMenuGroup>
             <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
               {t("menu.appearance")}
diff --git a/web/src/components/overlay/dialog/TrainFilterDialog.tsx b/web/src/components/overlay/dialog/TrainFilterDialog.tsx
index 56037ec0a..f4ccf41e1 100644
--- a/web/src/components/overlay/dialog/TrainFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/TrainFilterDialog.tsx
@@ -60,7 +60,7 @@ export default function TrainFilterDialog({
           moreFiltersSelected ? "text-white" : "text-secondary-foreground",
         )}
       />
-      {t("more")}
+      {isDesktop && t("more")}
     </Button>
   );
   const content = (
diff --git a/web/src/views/classification/ModelSelectionView.tsx b/web/src/views/classification/ModelSelectionView.tsx
index aa2f94c6a..2dd7e0375 100644
--- a/web/src/views/classification/ModelSelectionView.tsx
+++ b/web/src/views/classification/ModelSelectionView.tsx
@@ -79,7 +79,9 @@ function ModelCard({ config, onClick }: ModelCardProps) {
       )}
       onClick={() => onClick()}
     >
-      <div className="grid size-48 grid-cols-2 gap-2">
+      <div
+        className={cn("grid size-48 grid-cols-2 gap-2", isMobile && "w-full")}
+      >
         {Object.entries(coverImages).map(([key, image]) => (
           <img
             key={key}
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index 07c2f6340..5d5296576 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -362,7 +362,7 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
               ) : (
                 <MdAutoFixHigh className="text-secondary-foreground" />
               )}
-              {t("button.trainModel")}
+              {isDesktop && t("button.trainModel")}
             </Button>
           </div>
         )}
@@ -725,7 +725,12 @@ function TrainGrid({
   );
 
   return (
-    <div className="flex flex-wrap gap-2 overflow-y-auto p-2">
+    <div
+      className={cn(
+        "flex flex-wrap gap-2 overflow-y-auto p-2",
+        isMobile && "justify-center",
+      )}
+    >
       {trainData?.map((data) => (
         <div
           key={data.timestamp}
@@ -734,6 +739,7 @@ function TrainGrid({
             selectedImages.includes(data.raw)
               ? "shadow-selected outline-selected"
               : "outline-transparent duration-500",
+            isMobile && "w-[48%]",
           )}
           onClick={(e) => {
             e.stopPropagation();