move group reorder handlers to the modal itself

src/assets/locales/en.json

@@ -1042,7 +1042,8 @@
         "forceCompactEpisodeViewDescription": "Force the episode carousel in the player to use the \"classic\" compact vertical view. Disabled by default.",
         "homeSectionOrder": "Home section order",
         "homeSectionOrderDescription": "Drag and drop to reorder the watching and bookmarks sections on your homepage. Group order can be editied from the home page.",
-        "forceCompactEpisodeViewLabel": "Compact episodes"
+        "forceCompactEpisodeViewLabel": "Compact episodes",
+        "homeSectionOrderGroups": "Reorder bookmark groups"
       },
       "sections": {
         "watching": "Currently Watching",

src/components/overlays/EditGroupOrderModal.tsx

@@ -1,28 +1,113 @@
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/buttons/Button";
 import { Item, SortableList } from "@/components/form/SortableList";
 import { Modal, ModalCard } from "@/components/overlays/Modal";
+import { UserIcons } from "@/components/UserIcon";
 import { Heading2, Paragraph } from "@/components/utils/Text";
+import { useBookmarkStore } from "@/stores/bookmarks";
+import { useGroupOrderStore } from "@/stores/groupOrder";
+
+function parseGroupString(group: string): { icon: UserIcons; name: string } {
+  const match = group.match(/^\[([a-zA-Z0-9_]+)\](.*)$/);
+  if (match) {
+    const iconKey = match[1].toUpperCase() as keyof typeof UserIcons;
+    const icon = UserIcons[iconKey] || UserIcons.BOOKMARK;
+    const name = match[2].trim();
+    return { icon, name };
+  }
+  return { icon: UserIcons.BOOKMARK, name: group };
+}
 
 interface EditGroupOrderModalProps {
   id: string;
   isShown: boolean;
-  items: Item[];
   onCancel: () => void;
-  onSave: () => void;
+  onSave: (newOrder: string[]) => void;
-  onItemsChange: (newItems: Item[]) => void;
 }
 
 export function EditGroupOrderModal({
   id,
   isShown,
-  items,
   onCancel,
   onSave,
-  onItemsChange,
 }: EditGroupOrderModalProps) {
   const { t } = useTranslation();
+  const bookmarks = useBookmarkStore((s) => s.bookmarks);
+  const groupOrder = useGroupOrderStore((s) => s.groupOrder);
+  const [tempGroupOrder, setTempGroupOrder] = useState<string[]>([]);
+
+  // group sorting
+  const allGroups = useMemo(() => {
+    const groups = new Set<string>();
+
+    Object.values(bookmarks).forEach((bookmark) => {
+      if (Array.isArray(bookmark.group)) {
+        bookmark.group.forEach((group) => groups.add(group));
+      }
+    });
+
+    groups.add("bookmarks");
+
+    return Array.from(groups);
+  }, [bookmarks]);
+
+  const sortableItems = useMemo(() => {
+    const currentOrder = isShown ? tempGroupOrder : groupOrder;
+
+    if (currentOrder.length === 0) {
+      return allGroups.map((group) => {
+        const { name } = parseGroupString(group);
+        return {
+          id: group,
+          name: group === "bookmarks" ? t("home.bookmarks.sectionTitle") : name,
+        } as Item;
+      });
+    }
+
+    const orderMap = new Map(
+      currentOrder.map((group, index) => [group, index]),
+    );
+    const sortedGroups = allGroups.sort((groupA, groupB) => {
+      const orderA = orderMap.has(groupA)
+        ? orderMap.get(groupA)!
+        : Number.MAX_SAFE_INTEGER;
+      const orderB = orderMap.has(groupB)
+        ? orderMap.get(groupB)!
+        : Number.MAX_SAFE_INTEGER;
+      return orderA - orderB;
+    });
+
+    return sortedGroups.map((group) => {
+      const { name } = parseGroupString(group);
+      return {
+        id: group,
+        name: group === "bookmarks" ? t("home.bookmarks.sectionTitle") : name,
+      } as Item;
+    });
+  }, [allGroups, t, isShown, tempGroupOrder, groupOrder]);
+
+  // Initialize tempGroupOrder when modal opens
+  useEffect(() => {
+    if (isShown) {
+      if (groupOrder.length === 0) {
+        const defaultOrder = allGroups.map((group) => group);
+        setTempGroupOrder(defaultOrder);
+      } else {
+        setTempGroupOrder([...groupOrder]);
+      }
+    }
+  }, [isShown, groupOrder, allGroups]);
+
+  const handleItemsChange = (newItems: Item[]) => {
+    const newOrder = newItems.map((item) => item.id);
+    setTempGroupOrder(newOrder);
+  };
+
+  const handleSave = () => {
+    onSave(tempGroupOrder);
+  };
 
   if (!isShown) return null;
 
@@ -36,13 +121,13 @@ export function EditGroupOrderModal({
           {t("home.bookmarks.groups.reorder.description")}
         </Paragraph>
         <div>
-          <SortableList items={items} setItems={onItemsChange} />
+          <SortableList items={sortableItems} setItems={handleItemsChange} />
         </div>
         <div className="flex gap-4 mt-6 justify-end">
           <Button theme="secondary" onClick={onCancel}>
             {t("home.bookmarks.groups.reorder.cancel")}
           </Button>
-          <Button theme="purple" onClick={onSave}>
+          <Button theme="purple" onClick={handleSave}>
             {t("home.bookmarks.groups.reorder.save")}
           </Button>
         </div>

src/pages/bookmarks/AllBookmarks.tsx

@@ -6,7 +6,6 @@ import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/buttons/Button";
 import { EditButton } from "@/components/buttons/EditButton";
 import { EditButtonWithText } from "@/components/buttons/EditButtonWithText";
-import { Item } from "@/components/form/SortableList";
 import { Icon, Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { WideContainer } from "@/components/layout/WideContainer";
@@ -54,7 +53,6 @@ export function AllBookmarks({ onShowDetails }: AllBookmarksProps) {
   const [editing, setEditing] = useState(false);
   const [gridRef] = useAutoAnimate<HTMLDivElement>();
   const editOrderModal = useModal("bookmark-edit-order-all");
-  const [tempGroupOrder, setTempGroupOrder] = useState<string[]>([]);
   const backendUrl = useBackendUrl();
   const account = useAuthStore((s) => s.account);
   const { showModal } = useOverlayStack();
@@ -143,41 +141,6 @@ export function AllBookmarks({ onShowDetails }: AllBookmarksProps) {
     return Array.from(groups);
   }, [bookmarks]);
 
-  const sortableItems = useMemo(() => {
-    const currentOrder = editOrderModal.isShown ? tempGroupOrder : groupOrder;
-
-    if (currentOrder.length === 0) {
-      return allGroups.map((group) => {
-        const { name } = parseGroupString(group);
-        return {
-          id: group,
-          name: group === "bookmarks" ? t("home.bookmarks.sectionTitle") : name,
-        } as Item;
-      });
-    }
-
-    const orderMap = new Map(
-      currentOrder.map((group, index) => [group, index]),
-    );
-    const sortedGroups = allGroups.sort((groupA, groupB) => {
-      const orderA = orderMap.has(groupA)
-        ? orderMap.get(groupA)!
-        : Number.MAX_SAFE_INTEGER;
-      const orderB = orderMap.has(groupB)
-        ? orderMap.get(groupB)!
-        : Number.MAX_SAFE_INTEGER;
-      return orderA - orderB;
-    });
-
-    return sortedGroups.map((group) => {
-      const { name } = parseGroupString(group);
-      return {
-        id: group,
-        name: group === "bookmarks" ? t("home.bookmarks.sectionTitle") : name,
-      } as Item;
-    });
-  }, [allGroups, t, editOrderModal.isShown, tempGroupOrder, groupOrder]);
-
   const sortedSections = useMemo(() => {
     const sections: Array<{
       type: "grouped" | "regular";
@@ -231,13 +194,6 @@ export function AllBookmarks({ onShowDetails }: AllBookmarksProps) {
   }, [groupedItems, regularItems, groupOrder]);
 
   const handleEditGroupOrder = () => {
-    // Initialize with current order or default order
-    if (groupOrder.length === 0) {
-      const defaultOrder = allGroups.map((group) => group);
-      setTempGroupOrder(defaultOrder);
-    } else {
-      setTempGroupOrder([...groupOrder]);
-    }
     editOrderModal.show();
   };
 
@@ -251,8 +207,8 @@ export function AllBookmarks({ onShowDetails }: AllBookmarksProps) {
     editOrderModal.hide();
   };
 
-  const handleSaveOrderClick = () => {
+  const handleSaveOrderClick = (newOrder: string[]) => {
-    setGroupOrder(tempGroupOrder);
+    setGroupOrder(newOrder);
     editOrderModal.hide();
 
     // Save to backend
@@ -420,13 +376,8 @@ export function AllBookmarks({ onShowDetails }: AllBookmarksProps) {
         <EditGroupOrderModal
           id={editOrderModal.id}
           isShown={editOrderModal.isShown}
-          items={sortableItems}
           onCancel={handleCancelOrder}
           onSave={handleSaveOrderClick}
-          onItemsChange={(newItems) => {
-            const newOrder = newItems.map((item) => item.id);
-            setTempGroupOrder(newOrder);
-          }}
         />
       </WideContainer>
     </SubPageLayout>

src/pages/parts/home/BookmarksCarousel.tsx

@@ -4,7 +4,6 @@ import { Link } from "react-router-dom";
 
 import { EditButton } from "@/components/buttons/EditButton";
 import { EditButtonWithText } from "@/components/buttons/EditButtonWithText";
-import { Item } from "@/components/form/SortableList";
 import { Icon, Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
@@ -112,7 +111,6 @@ export function BookmarksCarousel({
   const groupOrder = useGroupOrderStore((s) => s.groupOrder);
   const setGroupOrder = useGroupOrderStore((s) => s.setGroupOrder);
   const editOrderModal = useModal("bookmark-edit-order-carousel");
-  const [tempGroupOrder, setTempGroupOrder] = useState<string[]>([]);
 
   const { isMobile } = useIsMobile();
 
@@ -196,41 +194,6 @@ export function BookmarksCarousel({
     return Array.from(groups);
   }, [bookmarks]);
 
-  const sortableItems = useMemo(() => {
-    const currentOrder = editOrderModal.isShown ? tempGroupOrder : groupOrder;
-
-    if (currentOrder.length === 0) {
-      return allGroups.map((group) => {
-        const { name } = parseGroupString(group);
-        return {
-          id: group,
-          name: group === "bookmarks" ? t("home.bookmarks.sectionTitle") : name,
-        } as Item;
-      });
-    }
-
-    const orderMap = new Map(
-      currentOrder.map((group, index) => [group, index]),
-    );
-    const sortedGroups = allGroups.sort((groupA, groupB) => {
-      const orderA = orderMap.has(groupA)
-        ? orderMap.get(groupA)!
-        : Number.MAX_SAFE_INTEGER;
-      const orderB = orderMap.has(groupB)
-        ? orderMap.get(groupB)!
-        : Number.MAX_SAFE_INTEGER;
-      return orderA - orderB;
-    });
-
-    return sortedGroups.map((group) => {
-      const { name } = parseGroupString(group);
-      return {
-        id: group,
-        name: group === "bookmarks" ? t("home.bookmarks.sectionTitle") : name,
-      } as Item;
-    });
-  }, [allGroups, t, editOrderModal.isShown, tempGroupOrder, groupOrder]);
-
   // Create a unified list of sections including both grouped and regular bookmarks
   const sortedSections = useMemo(() => {
     const sections: Array<{
@@ -310,13 +273,6 @@ export function BookmarksCarousel({
   };
 
   const handleEditGroupOrder = () => {
-    // Initialize with current order or default order
-    if (groupOrder.length === 0) {
-      const defaultOrder = allGroups.map((group) => group);
-      setTempGroupOrder(defaultOrder);
-    } else {
-      setTempGroupOrder([...groupOrder]);
-    }
     editOrderModal.show();
   };
 
@@ -330,8 +286,8 @@ export function BookmarksCarousel({
     editOrderModal.hide();
   };
 
-  const handleSaveOrderClick = () => {
+  const handleSaveOrderClick = (newOrder: string[]) => {
-    setGroupOrder(tempGroupOrder);
+    setGroupOrder(newOrder);
     editOrderModal.hide();
 
     // Save to backend
@@ -559,13 +515,8 @@ export function BookmarksCarousel({
       <EditGroupOrderModal
         id={editOrderModal.id}
         isShown={editOrderModal.isShown}
-        items={sortableItems}
         onCancel={handleCancelOrder}
         onSave={handleSaveOrderClick}
-        onItemsChange={(newItems) => {
-          const newOrder = newItems.map((item) => item.id);
-          setTempGroupOrder(newOrder);
-        }}
       />
 
       {/* Edit Bookmark Modal */}

src/pages/parts/home/BookmarksPart.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 
 import { EditButton } from "@/components/buttons/EditButton";
 import { EditButtonWithText } from "@/components/buttons/EditButtonWithText";
-import { Item } from "@/components/form/SortableList";
 import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { MediaGrid } from "@/components/media/MediaGrid";
@@ -50,7 +49,6 @@ export function BookmarksPart({
   const editOrderModal = useModal("bookmark-edit-order");
   const editBookmarkModal = useModal("bookmark-edit");
   const editGroupModal = useModal("bookmark-edit-group");
-  const [tempGroupOrder, setTempGroupOrder] = useState<string[]>([]);
   const [editingBookmarkId, setEditingBookmarkId] = useState<string | null>(
     null,
   );
@@ -135,41 +133,6 @@ export function BookmarksPart({
     return Array.from(groups);
   }, [bookmarks]);
 
-  const sortableItems = useMemo(() => {
-    const currentOrder = editOrderModal.isShown ? tempGroupOrder : groupOrder;
-
-    if (currentOrder.length === 0) {
-      return allGroups.map((group) => {
-        const { name } = parseGroupString(group);
-        return {
-          id: group,
-          name: group === "bookmarks" ? t("home.bookmarks.sectionTitle") : name,
-        } as Item;
-      });
-    }
-
-    const orderMap = new Map(
-      currentOrder.map((group, index) => [group, index]),
-    );
-    const sortedGroups = allGroups.sort((groupA, groupB) => {
-      const orderA = orderMap.has(groupA)
-        ? orderMap.get(groupA)!
-        : Number.MAX_SAFE_INTEGER;
-      const orderB = orderMap.has(groupB)
-        ? orderMap.get(groupB)!
-        : Number.MAX_SAFE_INTEGER;
-      return orderA - orderB;
-    });
-
-    return sortedGroups.map((group) => {
-      const { name } = parseGroupString(group);
-      return {
-        id: group,
-        name: group === "bookmarks" ? t("home.bookmarks.sectionTitle") : name,
-      } as Item;
-    });
-  }, [allGroups, t, editOrderModal.isShown, tempGroupOrder, groupOrder]);
-
   const sortedSections = useMemo(() => {
     const sections: Array<{
       type: "grouped" | "regular";
@@ -221,20 +184,12 @@ export function BookmarksPart({
 
     return sections;
   }, [groupedItems, regularItems, groupOrder]);
-  // kill me
 
   useEffect(() => {
     onItemsChange(items.length > 0);
   }, [items, onItemsChange]);
 
   const handleEditGroupOrder = () => {
-    // Initialize with current order or default order
-    if (groupOrder.length === 0) {
-      const defaultOrder = allGroups.map((group) => group);
-      setTempGroupOrder(defaultOrder);
-    } else {
-      setTempGroupOrder([...groupOrder]);
-    }
     editOrderModal.show();
   };
 
@@ -248,8 +203,8 @@ export function BookmarksPart({
     editOrderModal.hide();
   };
 
-  const handleSaveOrderClick = () => {
+  const handleSaveOrderClick = (newOrder: string[]) => {
-    setGroupOrder(tempGroupOrder);
+    setGroupOrder(newOrder);
     editOrderModal.hide();
 
     // Save to backend
@@ -412,13 +367,8 @@ export function BookmarksPart({
       <EditGroupOrderModal
         id={editOrderModal.id}
         isShown={editOrderModal.isShown}
-        items={sortableItems}
         onCancel={handleCancelOrder}
         onSave={handleSaveOrderClick}
-        onItemsChange={(newItems) => {
-          const newOrder = newItems.map((item) => item.id);
-          setTempGroupOrder(newOrder);
-        }}
       />
 
       {/* Edit Bookmark Modal */}

src/pages/parts/settings/AppearancePart.tsx

@@ -1,11 +1,18 @@
 import classNames from "classnames";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { Button } from "@/components/buttons/Button";
 import { Toggle } from "@/components/buttons/Toggle";
 import { SortableList } from "@/components/form/SortableList";
 import { Icon, Icons } from "@/components/Icon";
+import { EditGroupOrderModal } from "@/components/overlays/EditGroupOrderModal";
+import { useModal } from "@/components/overlays/Modal";
 import { Heading1 } from "@/components/utils/Text";
+import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
+import { useAuthStore } from "@/stores/auth";
+import { useBookmarkStore } from "@/stores/bookmarks";
+import { useGroupOrderStore } from "@/stores/groupOrder";
 
 const availableThemes = [
   {
@@ -243,6 +250,31 @@ export function AppearancePart(props: {
   const [isAtTop, setIsAtTop] = useState(true);
   const [isAtBottom, setIsAtBottom] = useState(false);
 
+  // Group order modal
+  const bookmarks = useBookmarkStore((s) => s.bookmarks);
+  const groupOrder = useGroupOrderStore((s) => s.groupOrder);
+  const setGroupOrder = useGroupOrderStore((s) => s.setGroupOrder);
+  const editGroupOrderModal = useModal("bookmark-edit-order-settings");
+  const backendUrl = useBackendUrl();
+  const account = useAuthStore((s) => s.account);
+
+  // Check if there are groups
+  const allGroups = useMemo(() => {
+    const groups = new Set<string>();
+
+    Object.values(bookmarks).forEach((bookmark) => {
+      if (Array.isArray(bookmark.group)) {
+        bookmark.group.forEach((group) => groups.add(group));
+      }
+    });
+
+    groups.add("bookmarks");
+
+    return Array.from(groups);
+  }, [bookmarks]);
+
+  const hasGroups = allGroups.length > 1;
+
   const {
     enableLowPerformanceMode,
     setEnableDiscover,
@@ -311,6 +343,26 @@ export function AppearancePart(props: {
     }
   }, [props.active]);
 
+  const handleEditGroupOrder = () => {
+    editGroupOrderModal.show();
+  };
+
+  const handleCancelGroupOrder = () => {
+    editGroupOrderModal.hide();
+  };
+
+  const handleSaveGroupOrder = (newOrder: string[]) => {
+    setGroupOrder(newOrder);
+    editGroupOrderModal.hide();
+
+    // Save to backend
+    if (backendUrl && account) {
+      useGroupOrderStore
+        .getState()
+        .saveGroupOrderToBackend(backendUrl, account);
+    }
+  };
+
   return (
     <div className="space-y-12">
       <Heading1 border>{t("settings.appearance.title")}</Heading1>
@@ -500,6 +552,17 @@ export function AppearancePart(props: {
                 }}
               />
             </div>
+            {hasGroups && (
+              <div className="mt-4 max-w-[25rem]">
+                <Button
+                  theme="secondary"
+                  onClick={handleEditGroupOrder}
+                  className="w-full"
+                >
+                  {t("settings.appearance.options.homeSectionOrderGroups")}
+                </Button>
+              </div>
+            )}
           </div>
         </div>
 
@@ -533,6 +596,14 @@ export function AppearancePart(props: {
           </div>
         </div>
       </div>
+
+      {/* Edit Group Order Modal */}
+      <EditGroupOrderModal
+        id={editGroupOrderModal.id}
+        isShown={editGroupOrderModal.isShown}
+        onCancel={handleCancelGroupOrder}
+        onSave={handleSaveGroupOrder}
+      />
     </div>
   );
 }