update bookmark group reorder modal

src/assets/locales/en.json

@@ -255,7 +255,7 @@
           "button": "Reorder",
           "done": "Done",
           "title": "Edit Group Order",
-          "description": "Drag and drop to reorder your bookmark groups.",
+          "description": "Drag and drop to reorder your bookmark groups",
           "cancel": "Cancel",
           "save": "Save"
         }

src/components/overlays/EditGroupOrderModal.tsx

@@ -0,0 +1,52 @@
+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 { Heading2, Paragraph } from "@/components/utils/Text";
+
+interface EditGroupOrderModalProps {
+  id: string;
+  isShown: boolean;
+  items: Item[];
+  onCancel: () => void;
+  onSave: () => void;
+  onItemsChange: (newItems: Item[]) => void;
+}
+
+export function EditGroupOrderModal({
+  id,
+  isShown,
+  items,
+  onCancel,
+  onSave,
+  onItemsChange,
+}: EditGroupOrderModalProps) {
+  const { t } = useTranslation();
+
+  if (!isShown) return null;
+
+  return (
+    <Modal id={id}>
+      <ModalCard>
+        <Heading2 className="!my-0">
+          {t("home.bookmarks.groups.reorder.title")}
+        </Heading2>
+        <Paragraph className="mt-4">
+          {t("home.bookmarks.groups.reorder.description")}
+        </Paragraph>
+        <div>
+          <SortableList items={items} setItems={onItemsChange} />
+        </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}>
+            {t("home.bookmarks.groups.reorder.save")}
+          </Button>
+        </div>
+      </ModalCard>
+    </Modal>
+  );
+}

src/pages/bookmarks/AllBookmarks.tsx

@@ -6,16 +6,17 @@ 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, SortableList } from "@/components/form/SortableList";
+import { Item } from "@/components/form/SortableList";
 import { Icon, Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { WideContainer } from "@/components/layout/WideContainer";
 import { MediaGrid } from "@/components/media/MediaGrid";
 import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
 import { DetailsModal } from "@/components/overlays/detailsModal/DetailsModal";
-import { Modal, ModalCard, useModal } from "@/components/overlays/Modal";
+import { EditGroupOrderModal } from "@/components/overlays/EditGroupOrderModal";
+import { useModal } from "@/components/overlays/Modal";
 import { UserIcon, UserIcons } from "@/components/UserIcon";
-import { Heading1, Heading2, Paragraph } from "@/components/utils/Text";
+import { Heading1 } from "@/components/utils/Text";
 import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
 import { useRandomTranslation } from "@/hooks/useRandomTranslation";
 import { SubPageLayout } from "@/pages/layouts/SubPageLayout";
@@ -419,33 +420,17 @@ export function AllBookmarks({ onShowDetails }: AllBookmarksProps) {
         </div>
 
         {/* Edit Order Modal */}
-        <Modal id={editOrderModal.id}>
-          <ModalCard>
-            <Heading2 className="!mt-0">
-              {t("home.bookmarks.groups.reorder.title")}
-            </Heading2>
-            <Paragraph>
-              {t("home.bookmarks.groups.reorder.description")}
-            </Paragraph>
-            <div className="mt-6">
-              <SortableList
-                items={sortableItems}
-                setItems={(newItems) => {
-                  const newOrder = newItems.map((item) => item.id);
-                  setTempGroupOrder(newOrder);
-                }}
-              />
-            </div>
-            <div className="flex gap-4 mt-6 justify-end">
-              <Button theme="secondary" onClick={handleCancelOrder}>
-                {t("home.bookmarks.groups.reorder.cancel")}
-              </Button>
-              <Button theme="purple" onClick={handleSaveOrderClick}>
-                {t("home.bookmarks.groups.reorder.save")}
-              </Button>
-            </div>
-          </ModalCard>
-        </Modal>
+        <EditGroupOrderModal
+          id={editOrderModal.id}
+          isShown={editOrderModal.isShown}
+          items={sortableItems}
+          onCancel={handleCancelOrder}
+          onSave={handleSaveOrderClick}
+          onItemsChange={(newItems) => {
+            const newOrder = newItems.map((item) => item.id);
+            setTempGroupOrder(newOrder);
+          }}
+        />
 
         {detailsData && <DetailsModal id="details" data={detailsData} />}
       </WideContainer>

src/pages/parts/home/BookmarksCarousel.tsx

@@ -2,17 +2,16 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
-import { Button } from "@/components/buttons/Button";
 import { EditButton } from "@/components/buttons/EditButton";
 import { EditButtonWithText } from "@/components/buttons/EditButtonWithText";
-import { Item, SortableList } from "@/components/form/SortableList";
+import { Item } from "@/components/form/SortableList";
 import { Icon, Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
-import { Modal, ModalCard, useModal } from "@/components/overlays/Modal";
+import { EditGroupOrderModal } from "@/components/overlays/EditGroupOrderModal";
+import { useModal } from "@/components/overlays/Modal";
 import { UserIcon, UserIcons } from "@/components/UserIcon";
 import { Flare } from "@/components/utils/Flare";
-import { Heading2, Paragraph } from "@/components/utils/Text";
 import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { CarouselNavButtons } from "@/pages/discover/components/CarouselNavButtons";
@@ -595,33 +594,17 @@ export function BookmarksCarousel({
       })}
 
       {/* Edit Order Modal */}
-      <Modal id={editOrderModal.id}>
-        <ModalCard>
-          <Heading2 className="!mt-0">
-            {t("home.bookmarks.groups.reorder.title")}
-          </Heading2>
-          <Paragraph>
-            {t("home.bookmarks.groups.reorder.description")}
-          </Paragraph>
-          <div className="mt-6">
-            <SortableList
-              items={sortableItems}
-              setItems={(newItems) => {
-                const newOrder = newItems.map((item) => item.id);
-                setTempGroupOrder(newOrder);
-              }}
-            />
-          </div>
-          <div className="flex gap-4 mt-6 justify-end">
-            <Button theme="secondary" onClick={handleCancelOrder}>
-              {t("home.bookmarks.groups.reorder.cancel")}
-            </Button>
-            <Button theme="purple" onClick={handleSaveOrderClick}>
-              {t("home.bookmarks.groups.reorder.save")}
-            </Button>
-          </div>
-        </ModalCard>
-      </Modal>
+      <EditGroupOrderModal
+        id={editOrderModal.id}
+        isShown={editOrderModal.isShown}
+        items={sortableItems}
+        onCancel={handleCancelOrder}
+        onSave={handleSaveOrderClick}
+        onItemsChange={(newItems) => {
+          const newOrder = newItems.map((item) => item.id);
+          setTempGroupOrder(newOrder);
+        }}
+      />
     </>
   );
 }

src/pages/parts/home/BookmarksPart.tsx

@@ -2,17 +2,16 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Button } from "@/components/buttons/Button";
 import { EditButton } from "@/components/buttons/EditButton";
 import { EditButtonWithText } from "@/components/buttons/EditButtonWithText";
-import { Item, SortableList } from "@/components/form/SortableList";
+import { Item } from "@/components/form/SortableList";
 import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { MediaGrid } from "@/components/media/MediaGrid";
 import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
-import { Modal, ModalCard, useModal } from "@/components/overlays/Modal";
+import { EditGroupOrderModal } from "@/components/overlays/EditGroupOrderModal";
+import { useModal } from "@/components/overlays/Modal";
 import { UserIcon, UserIcons } from "@/components/UserIcon";
-import { Heading2, Paragraph } from "@/components/utils/Text";
 import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
 import { useAuthStore } from "@/stores/auth";
 import { useBookmarkStore } from "@/stores/bookmarks";
@@ -395,33 +394,17 @@ export function BookmarksPart({
       })}
 
       {/* Edit Order Modal */}
-      <Modal id={editOrderModal.id}>
-        <ModalCard>
-          <Heading2 className="!mt-0">
-            {t("home.bookmarks.groups.reorder.title")}
-          </Heading2>
-          <Paragraph>
-            {t("home.bookmarks.groups.reorder.description")}
-          </Paragraph>
-          <div className="mt-6">
-            <SortableList
-              items={sortableItems}
-              setItems={(newItems) => {
-                const newOrder = newItems.map((item) => item.id);
-                setTempGroupOrder(newOrder);
-              }}
-            />
-          </div>
-          <div className="flex gap-4 mt-6 justify-end">
-            <Button theme="secondary" onClick={handleCancelOrder}>
-              {t("home.bookmarks.groups.reorder.cancel")}
-            </Button>
-            <Button theme="purple" onClick={handleSaveOrderClick}>
-              {t("home.bookmarks.groups.reorder.save")}
-            </Button>
-          </div>
-        </ModalCard>
-      </Modal>
+      <EditGroupOrderModal
+        id={editOrderModal.id}
+        isShown={editOrderModal.isShown}
+        items={sortableItems}
+        onCancel={handleCancelOrder}
+        onSave={handleSaveOrderClick}
+        onItemsChange={(newItems) => {
+          const newOrder = newItems.map((item) => item.id);
+          setTempGroupOrder(newOrder);
+        }}
+      />
     </div>
   );
 }