From 614a6b39d4d1dc844f98748671965079ba8e3e78 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 13 Mar 2026 08:05:56 -0500
Subject: [PATCH] consistently sort class names (#22415)

keep None at the bottom
---
 .../overlay/ClassificationSelectionDialog.tsx |  28 ++--
 .../classification/ModelTrainingView.tsx      | 122 +++++++++---------
 2 files changed, 81 insertions(+), 69 deletions(-)

diff --git a/web/src/components/overlay/ClassificationSelectionDialog.tsx b/web/src/components/overlay/ClassificationSelectionDialog.tsx
index 6398348a4..f99011423 100644
--- a/web/src/components/overlay/ClassificationSelectionDialog.tsx
+++ b/web/src/components/overlay/ClassificationSelectionDialog.tsx
@@ -125,17 +125,23 @@ export default function ClassificationSelectionDialog({
                 isMobile && "gap-2 pb-4",
               )}
             >
-              {classes.sort().map((category) => (
-                <SelectorItem
-                  key={category}
-                  className="flex cursor-pointer gap-2 smart-capitalize"
-                  onClick={() => onCategorizeImage(category)}
-                >
-                  {category === "none"
-                    ? t("details.none")
-                    : category.replaceAll("_", " ")}
-                </SelectorItem>
-              ))}
+              {classes
+                .sort((a, b) => {
+                  if (a === "none") return 1;
+                  if (b === "none") return -1;
+                  return a.localeCompare(b);
+                })
+                .map((category) => (
+                  <SelectorItem
+                    key={category}
+                    className="flex cursor-pointer gap-2 smart-capitalize"
+                    onClick={() => onCategorizeImage(category)}
+                  >
+                    {category === "none"
+                      ? t("details.none")
+                      : category.replaceAll("_", " ")}
+                  </SelectorItem>
+                ))}
               <Separator />
               <SelectorItem
                 className="flex cursor-pointer gap-2 smart-capitalize"
diff --git a/web/src/views/classification/ModelTrainingView.tsx b/web/src/views/classification/ModelTrainingView.tsx
index 00e811d09..43679b5b0 100644
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -700,66 +700,72 @@ function LibrarySelector({
               </div>
             </>
           )}
-          {Object.keys(dataset).map((id) => (
-            <DropdownMenuItem
-              key={id}
-              className="group flex items-center justify-between"
-            >
-              <div
-                className="flex-grow cursor-pointer capitalize"
-                onClick={() => setPageToggle(id)}
+          {Object.keys(dataset)
+            .sort((a, b) => {
+              if (a === "none") return 1;
+              if (b === "none") return -1;
+              return a.localeCompare(b);
+            })
+            .map((id) => (
+              <DropdownMenuItem
+                key={id}
+                className="group flex items-center justify-between"
               >
-                {id === "none" ? t("details.none") : id.replaceAll("_", " ")}
-                <span className="ml-2 text-muted-foreground">
-                  ({dataset?.[id].length})
-                </span>
-              </div>
-              {id != "none" && (
-                <div className="flex gap-0.5">
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-7 lg:opacity-0 lg:transition-opacity lg:group-hover:opacity-100"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setRenameClass(id);
-                        }}
-                      >
-                        <LuPencil className="size-4 text-primary" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPortal>
-                      <TooltipContent>
-                        {t("button.renameCategory")}
-                      </TooltipContent>
-                    </TooltipPortal>
-                  </Tooltip>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="size-7 lg:opacity-0 lg:transition-opacity lg:group-hover:opacity-100"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setConfirmDelete(id);
-                        }}
-                      >
-                        <LuTrash2 className="size-4 text-destructive" />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPortal>
-                      <TooltipContent>
-                        {t("button.deleteCategory")}
-                      </TooltipContent>
-                    </TooltipPortal>
-                  </Tooltip>
+                <div
+                  className="flex-grow cursor-pointer capitalize"
+                  onClick={() => setPageToggle(id)}
+                >
+                  {id === "none" ? t("details.none") : id.replaceAll("_", " ")}
+                  <span className="ml-2 text-muted-foreground">
+                    ({dataset?.[id].length})
+                  </span>
                 </div>
-              )}
-            </DropdownMenuItem>
-          ))}
+                {id != "none" && (
+                  <div className="flex gap-0.5">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-7 lg:opacity-0 lg:transition-opacity lg:group-hover:opacity-100"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setRenameClass(id);
+                          }}
+                        >
+                          <LuPencil className="size-4 text-primary" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipPortal>
+                        <TooltipContent>
+                          {t("button.renameCategory")}
+                        </TooltipContent>
+                      </TooltipPortal>
+                    </Tooltip>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-7 lg:opacity-0 lg:transition-opacity lg:group-hover:opacity-100"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setConfirmDelete(id);
+                          }}
+                        >
+                          <LuTrash2 className="size-4 text-destructive" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipPortal>
+                        <TooltipContent>
+                          {t("button.deleteCategory")}
+                        </TooltipContent>
+                      </TooltipPortal>
+                    </Tooltip>
+                  </div>
+                )}
+              </DropdownMenuItem>
+            ))}
         </DropdownMenuContent>
       </DropdownMenu>
     </>