From 72896f4631b29f6b12ba1cddca48d60a55e25571 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 20 Oct 2025 17:03:27 -0600
Subject: [PATCH] Clean up design of classification card

---
 .../locales/en/views/classificationModel.json |  4 +-
 .../components/card/ClassificationCard.tsx    | 91 +++++++++----------
 .../overlay/ClassificationSelectionDialog.tsx | 20 ++--
 .../overlay/dialog/TrainFilterDialog.tsx      |  4 +-
 .../classification/ModelTrainingView.tsx      | 18 +---
 5 files changed, 60 insertions(+), 77 deletions(-)

diff --git a/web/public/locales/en/views/classificationModel.json b/web/public/locales/en/views/classificationModel.json
index 47b2b13bf..f28cb3753 100644
--- a/web/public/locales/en/views/classificationModel.json
+++ b/web/public/locales/en/views/classificationModel.json
@@ -41,8 +41,8 @@
     "invalidName": "Invalid name. Names can only include letters, numbers, spaces, apostrophes, underscores, and hyphens."
   },
   "train": {
-    "title": "Train",
-    "aria": "Select Train"
+    "title": "Recent Classifications",
+    "aria": "Select Recent Classifications"
   },
   "categories": "Classes",
   "createCategory": {
diff --git a/web/src/components/card/ClassificationCard.tsx b/web/src/components/card/ClassificationCard.tsx
index 5153b6d71..ca4f430d2 100644
--- a/web/src/components/card/ClassificationCard.tsx
+++ b/web/src/components/card/ClassificationCard.tsx
@@ -72,59 +72,58 @@ export function ClassificationCard({
   }, [showArea, imageLoaded]);
 
   return (
-    <>
-      <div
+    <div
+      className={cn(
+        "relative flex size-48 cursor-pointer flex-col overflow-hidden rounded-lg outline outline-[3px]",
+        selected
+          ? "shadow-selected outline-selected"
+          : "outline-transparent duration-500",
+      )}
+    >
+      <img
+        ref={imgRef}
         className={cn(
-          "relative flex cursor-pointer flex-col rounded-lg outline outline-[3px]",
-          className,
-          selected
-            ? "shadow-selected outline-selected"
-            : "outline-transparent duration-500",
+          "absolute bottom-0 left-0 right-0 top-0 size-full",
+          imgClassName,
+          isMobile && "w-full",
         )}
-      >
-        <div className="relative w-full select-none overflow-hidden rounded-lg">
-          <img
-            ref={imgRef}
-            onLoad={() => setImageLoaded(true)}
-            className={cn("size-44", imgClassName, isMobile && "w-full")}
-            src={`${baseUrl}${data.filepath}`}
-            onClick={(e) => {
-              e.stopPropagation();
-              onClick(data, e.metaKey || e.ctrlKey);
-            }}
-          />
-          {imageArea != undefined && (
-            <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
-              {t("information.pixels", { ns: "common", area: imageArea })}
-            </div>
-          )}
+        onLoad={() => setImageLoaded(true)}
+        src={`${baseUrl}${data.filepath}`}
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick(data, e.metaKey || e.ctrlKey);
+        }}
+      />
+      {false && imageArea != undefined && (
+        <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
+          {t("information.pixels", { ns: "common", area: imageArea })}
         </div>
-        <div className="select-none p-2">
-          <div className="flex w-full flex-row items-center justify-between gap-2">
-            <div className="flex flex-col items-start text-xs text-primary-variant">
-              <div className="smart-capitalize">
-                {data.name == "unknown" ? t("details.unknown") : data.name}
+      )}
+      <div className="absolute bottom-0 left-0 right-0 flex h-12 select-none gap-2 bg-gradient-to-t from-black/60 to-transparent p-2">
+        <div className="flex w-full flex-row items-center justify-between gap-2">
+          <div className="text-xs flex flex-col items-start text-white">
+            <div className="smart-capitalize">
+              {data.name == "unknown" ? t("details.unknown") : data.name}
+            </div>
+            {data.score && (
+              <div
+                className={cn(
+                  "",
+                  scoreStatus == "match" && "text-success",
+                  scoreStatus == "potential" && "text-orange-400",
+                  scoreStatus == "unknown" && "text-danger",
+                )}
+              >
+                {Math.round(data.score * 100)}%
               </div>
-              {data.score && (
-                <div
-                  className={cn(
-                    "",
-                    scoreStatus == "match" && "text-success",
-                    scoreStatus == "potential" && "text-orange-400",
-                    scoreStatus == "unknown" && "text-danger",
-                  )}
-                >
-                  {Math.round(data.score * 100)}%
-                </div>
-              )}
-            </div>
-            <div className="flex flex-row items-start justify-end gap-5 md:gap-4">
-              {children}
-            </div>
+            )}
+          </div>
+          <div className="flex flex-row items-start justify-end gap-5 md:gap-4">
+            {children}
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/web/src/components/overlay/ClassificationSelectionDialog.tsx b/web/src/components/overlay/ClassificationSelectionDialog.tsx
index f86ced19a..ca5057ee5 100644
--- a/web/src/components/overlay/ClassificationSelectionDialog.tsx
+++ b/web/src/components/overlay/ClassificationSelectionDialog.tsx
@@ -20,15 +20,14 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { isDesktop, isMobile } from "react-device-detect";
-import { LuPlus } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import React, { ReactNode, useCallback, useMemo, useState } from "react";
 import TextEntryDialog from "./dialog/TextEntryDialog";
 import { Button } from "../ui/button";
-import { MdCategory } from "react-icons/md";
 import axios from "axios";
 import { toast } from "sonner";
+import { Separator } from "../ui/separator";
 
 type ClassificationSelectionDialogProps = {
   className?: string;
@@ -97,7 +96,7 @@ export default function ClassificationSelectionDialog({
       );
 
   return (
-    <div className={className ?? ""}>
+    <div className={className ?? "flex"}>
       {newClass && (
         <TextEntryDialog
           open={true}
@@ -128,23 +127,22 @@ export default function ClassificationSelectionDialog({
                 isMobile && "gap-2 pb-4",
               )}
             >
-              <SelectorItem
-                className="flex cursor-pointer gap-2 smart-capitalize"
-                onClick={() => setNewClass(true)}
-              >
-                <LuPlus />
-                {t("createCategory.new")}
-              </SelectorItem>
               {classes.sort().map((category) => (
                 <SelectorItem
                   key={category}
                   className="flex cursor-pointer gap-2 smart-capitalize"
                   onClick={() => onCategorizeImage(category)}
                 >
-                  <MdCategory />
                   {category.replaceAll("_", " ")}
                 </SelectorItem>
               ))}
+              <Separator />
+              <SelectorItem
+                className="flex cursor-pointer gap-2 smart-capitalize"
+                onClick={() => setNewClass(true)}
+              >
+                {t("createCategory.new")}
+              </SelectorItem>
             </div>
           </SelectorContent>
         </Selector>
diff --git a/web/src/components/overlay/dialog/TrainFilterDialog.tsx b/web/src/components/overlay/dialog/TrainFilterDialog.tsx
index f4ccf41e1..982523ae9 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",
         )}
       />
-      {isDesktop && t("more")}
+      {isDesktop && t("filter")}
     </Button>
   );
   const content = (
@@ -122,7 +122,7 @@ export default function TrainFilterDialog({
   return (
     <PlatformAwareSheet
       trigger={trigger}
-      title={t("more")}
+      title={t("filter")}
       content={content}
       contentClassName={cn(
         "w-auto lg:min-w-[275px] scrollbar-container h-full overflow-auto px-4",
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index d3fd5b40e..3370927a3 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -650,7 +650,7 @@ function DatasetGrid({
           <Tooltip>
             <TooltipTrigger>
               <LuTrash2
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                className="size-5 cursor-pointer text-primary-variant hover:text-danger"
                 onClick={(e) => {
                   e.stopPropagation();
                   onDelete([image]);
@@ -817,22 +817,8 @@ function StateTrainGrid({
             image={data.filename}
             onRefresh={onRefresh}
           >
-            <TbCategoryPlus className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+            <TbCategoryPlus className="size-7 cursor-pointer p-1 text-white hover:rounded-full hover:bg-primary-foreground" />
           </ClassificationSelectionDialog>
-          <Tooltip>
-            <TooltipTrigger>
-              <LuTrash2
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete([data.filename]);
-                }}
-              />
-            </TooltipTrigger>
-            <TooltipContent>
-              {t("button.deleteClassificationAttempts")}
-            </TooltipContent>
-          </Tooltip>
         </ClassificationCard>
       ))}
     </div>