Sort folders (#1782)

frontend/apps/artcraft-webapp/src/pages/library/library.tsx

@@ -1585,6 +1585,13 @@ function BulkSelectionBar({
   const folderMediaItems = useLibraryFoldersStore((s) => s.folderMediaItems);
   const [popoverOpen, setPopoverOpen] = useState(false);
 
+  // Same ordering as the sidebar / folder cards: starred first, then
+  // alphabetical (the store list arrives in API order).
+  const sortedFolders = useMemo(
+    () => [...folders].sort(compareFolders),
+    [folders],
+  );
+
   // Close the popover when navigating so it doesn't dangle over the new view.
   useEffect(() => {
     setPopoverOpen(false);
@@ -1653,12 +1660,12 @@ function BulkSelectionBar({
               <div className="px-2 py-1 text-[11px] font-semibold uppercase tracking-wider text-white/40">
                 Folders
               </div>
-              {folders.length === 0 ? (
+              {sortedFolders.length === 0 ? (
                 <div className="px-2 py-1.5 text-xs italic text-white/30">
                   No folders yet
                 </div>
               ) : (
-                folders.map((folder) => (
+                sortedFolders.map((folder) => (
                   <button
                     key={folder.id}
                     type="button"

frontend/libs/components/gallery-modal/src/lib/GalleryItemMenuItems.tsx

@@ -13,6 +13,7 @@ import {
 import { twMerge } from "tailwind-merge";
 import { GalleryItem } from "./gallery-modal";
 import { GalleryFolder } from "./GalleryDraggableItem";
+import { compareFolders } from "./folderUtils";
 
 // Touch-first devices have no hover and narrow viewports — the folder submenu
 // expands inline (accordion) instead of flying out past the screen edge.
@@ -213,7 +214,9 @@ const FolderList = ({
   closeAll: () => void;
 }) => (
   <>
-    {folders.map((folder) => (
+    {/* Same ordering as the sidebar / folder chips: starred first, then
+        alphabetical. */}
+    {[...folders].sort(compareFolders).map((folder) => (
       <button
         key={folder.id}
         type="button"

frontend/libs/components/gallery-modal/src/lib/gallery-modal.tsx

@@ -3057,7 +3057,9 @@ export const GalleryModal = React.memo(
                               No folders yet
                             </div>
                           ) : (
-                            folders.map((folder) => (
+                            // Same ordering as the folder chips: starred
+                            // first, then alphabetical.
+                            [...folders].sort(compareFolders).map((folder) => (
                               <button
                                 key={folder.id}
                                 type="button"