add edit group order

src/assets/locales/en.json

@@ -240,7 +240,24 @@
   },
   "home": {
     "bookmarks": {
-      "sectionTitle": "Bookmarks"
+      "sectionTitle": "Bookmarks",
+      "groups": {
+        "dropdown": {
+          "placeholderButton": "Add to group",
+          "empty": "No groups yet",
+          "addButton": "Add",
+          "removeFromGroup": "Remove from group",
+          "removeAll": "Remove all"
+        },
+        "reorder": {
+          "button": "Reorder",
+          "done": "Done",
+          "title": "Edit Group Order",
+          "description": "Drag and drop to reorder your bookmark groups.",
+          "cancel": "Cancel",
+          "save": "Save"
+        }
+      }
     },
     "continueWatching": {
       "sectionTitle": "Continue Watching..."

src/backend/accounts/groupOrder.ts

@@ -0,0 +1,29 @@
+import { ofetch } from "ofetch";
+
+import { getAuthHeaders } from "@/backend/accounts/auth";
+import { AccountWithToken } from "@/stores/auth";
+
+export interface GroupOrderResponse {
+  groupOrder: string[];
+}
+
+export function updateGroupOrder(
+  url: string,
+  account: AccountWithToken,
+  groupOrder: string[],
+) {
+  return ofetch<GroupOrderResponse>(`/users/${account.userId}/group-order`, {
+    method: "PUT",
+    body: groupOrder,
+    baseURL: url,
+    headers: getAuthHeaders(account.token),
+  });
+}
+
+export function getGroupOrder(url: string, account: AccountWithToken) {
+  return ofetch<GroupOrderResponse>(`/users/${account.userId}/group-order`, {
+    method: "GET",
+    baseURL: url,
+    headers: getAuthHeaders(account.token),
+  });
+}

src/components/buttons/EditButtonWithText.tsx

@@ -0,0 +1,43 @@
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+
+export interface EditButtonWithTextProps {
+  editing: boolean;
+  onEdit?: (editing: boolean) => void;
+  id?: string;
+  text: string;
+  secondaryText?: string;
+}
+
+export function EditButtonWithText(props: EditButtonWithTextProps) {
+  const { t } = useTranslation();
+  const [parent] = useAutoAnimate<HTMLSpanElement>();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const onClick = useCallback(() => {
+    props.onEdit?.(!props.editing);
+  }, [props]);
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      onClick={onClick}
+      className="flex h-12 items-center overflow-hidden rounded-full bg-background-secondary px-4 py-2 text-white transition-[background-color,transform] hover:bg-background-secondaryHover active:scale-105"
+      id={props.id} // Assign id to the button
+    >
+      <span ref={parent}>
+        {props.editing ? (
+          <span className="mx-2 sm:mx-4 whitespace-nowrap">
+            {props.text ?? t("home.mediaList.stopEditing")}
+          </span>
+        ) : (
+          <span className="mx-2 sm:mx-4 whitespace-nowrap">
+            {props.secondaryText}
+          </span>
+        )}
+      </span>
+    </button>
+  );
+}

src/components/form/GroupDropdown.tsx

@@ -1,3 +1,4 @@
+import { t } from "i18next";
 import React, { useState } from "react";
 
 import { Icon, Icons } from "@/components/Icon";
@@ -78,7 +79,9 @@ export function GroupDropdown({
             })}
           </span>
         ) : (
-          <span className="text-white/70">Add to group</span>
+          <span className="text-white/70">
+            {t("home.bookmarks.groups.dropdown.placeholderButton")}
+          </span>
         )}
         <span className="ml-2 text-white/40">
           <Icon
@@ -90,7 +93,9 @@ export function GroupDropdown({
       {open && (
         <div className="absolute z-[150] mt-1 end-0 bg-gray-800 border border-gray-700 rounded-lg shadow-lg py-1 pb-3 text-sm">
           {groups.length === 0 && !showInput && (
-            <div className="px-4 py-2 text-gray-400">No groups</div>
+            <div className="px-4 py-2 text-gray-400">
+              {t("home.bookmarks.groups.dropdown.empty")}
+            </div>
           )}
           {groups.map((group) => {
             const { icon, name } = parseGroupString(group);
@@ -137,7 +142,7 @@ export function GroupDropdown({
                 disabled={!newGroup.trim()}
                 style={{ flexShrink: 0 }}
               >
-                Add
+                {t("home.bookmarks.groups.dropdown.addButton")}
               </button>
             </div>
             {newGroup.trim().length > 0 && (
@@ -167,7 +172,7 @@ export function GroupDropdown({
           {currentGroups.length > 0 && (
             <div className="border-t border-gray-700 pt-2 px-4">
               <div className="text-xs text-red-400 mb-1">
-                Remove from group:
+                {t("home.bookmarks.groups.dropdown.removeFromGroup")}
               </div>
               <div className="flex flex-wrap gap-2">
                 {currentGroups.map((group) => {
@@ -190,7 +195,7 @@ export function GroupDropdown({
                   className="ml-2 text-xs text-red-400 underline"
                   onClick={() => onRemoveGroup()}
                 >
-                  Remove all
+                  {t("home.bookmarks.groups.dropdown.removeAll")}
                 </button>
               </div>
             </div>

src/hooks/auth/useAuth.ts

@@ -9,6 +9,7 @@ import {
   keysFromMnemonic,
   signChallenge,
 } from "@/backend/accounts/crypto";
+import { getGroupOrder } from "@/backend/accounts/groupOrder";
 import { importBookmarks, importProgress } from "@/backend/accounts/import";
 import { getLoginChallengeToken, loginAccount } from "@/backend/accounts/login";
 import { progressMediaItemToInputs } from "@/backend/accounts/progress";
@@ -180,13 +181,21 @@ export function useAuth() {
         throw err;
       }
 
-      const [bookmarks, progress, settings] = await Promise.all([
+      const [bookmarks, progress, settings, groupOrder] = await Promise.all([
         getBookmarks(backendUrl, account),
         getProgress(backendUrl, account),
         getSettings(backendUrl, account),
+        getGroupOrder(backendUrl, account),
       ]);
 
-      syncData(user.user, user.session, progress, bookmarks, settings);
+      syncData(
+        user.user,
+        user.session,
+        progress,
+        bookmarks,
+        settings,
+        groupOrder,
+      );
     },
     [backendUrl, syncData, logout],
   );

src/hooks/auth/useAuthData.ts

@@ -96,10 +96,15 @@ export function useAuthData() {
       progress: ProgressResponse[],
       bookmarks: BookmarkResponse[],
       settings: SettingsResponse,
+      groupOrder: { groupOrder: string[] },
     ) => {
       replaceBookmarks(bookmarkResponsesToEntries(bookmarks));
       replaceItems(progressResponsesToEntries(progress));
 
+      if (groupOrder?.groupOrder) {
+        useBookmarkStore.getState().setGroupOrder(groupOrder.groupOrder);
+      }
+
       if (settings.applicationLanguage) {
         setAppLanguage(settings.applicationLanguage);
       }

src/pages/parts/home/BookmarksCarousel.tsx

@@ -1,13 +1,20 @@
 import React, { 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 { 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 { UserIcon, UserIcons } from "@/components/UserIcon";
+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";
+import { useAuthStore } from "@/stores/auth";
 import { useBookmarkStore } from "@/stores/bookmarks";
 import { useProgressStore } from "@/stores/progress";
 import { MediaItem } from "@/utils/mediaTypes";
@@ -53,6 +60,14 @@ export function BookmarksCarousel({
   const [editing, setEditing] = useState(false);
   const removeBookmark = useBookmarkStore((s) => s.removeBookmark);
   const pressTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const backendUrl = useBackendUrl();
+  const account = useAuthStore((s) => s.account);
+
+  // Group order editing state
+  const groupOrder = useBookmarkStore((s) => s.groupOrder);
+  const setGroupOrder = useBookmarkStore((s) => s.setGroupOrder);
+  const editOrderModal = useModal("bookmark-edit-order-carousel");
+  const [tempGroupOrder, setTempGroupOrder] = useState<string[]>([]);
 
   const { isMobile } = useIsMobile();
 
@@ -121,6 +136,116 @@ export function BookmarksCarousel({
     return { groupedItems: grouped, regularItems: regular };
   }, [items, bookmarks, progressItems]);
 
+  // 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 = 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<{
+      type: "grouped" | "regular";
+      group?: string;
+      items: MediaItem[];
+    }> = [];
+
+    // Create a combined map of all sections (grouped + regular)
+    const allSections = new Map<string, MediaItem[]>();
+
+    // Add grouped sections
+    Object.entries(groupedItems).forEach(([group, groupItems]) => {
+      allSections.set(group, groupItems);
+    });
+
+    // Add regular bookmarks as "bookmarks" group
+    if (regularItems.length > 0) {
+      allSections.set("bookmarks", regularItems);
+    }
+
+    // Sort sections based on group order
+    if (groupOrder.length === 0) {
+      // No order set, use default order
+      allSections.forEach((sectionItems, group) => {
+        if (group === "bookmarks") {
+          sections.push({ type: "regular", items: sectionItems });
+        } else {
+          sections.push({ type: "grouped", group, items: sectionItems });
+        }
+      });
+    } else {
+      // Use the saved order
+      const orderMap = new Map(
+        groupOrder.map((group, index) => [group, index]),
+      );
+
+      Array.from(allSections.entries())
+        .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;
+        })
+        .forEach(([group, sectionItems]) => {
+          if (group === "bookmarks") {
+            sections.push({ type: "regular", items: sectionItems });
+          } else {
+            sections.push({ type: "grouped", group, items: sectionItems });
+          }
+        });
+    }
+
+    return sections;
+  }, [groupedItems, regularItems, groupOrder]);
+  // kill me
+
   const handleWheel = (e: React.WheelEvent) => {
     if (isScrolling) return;
     isScrolling = true;
@@ -171,6 +296,37 @@ 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();
+  };
+
+  const handleReorderClick = () => {
+    handleEditGroupOrder();
+    // Keep editing state active by setting it to true
+    setEditing(true);
+  };
+
+  const handleCancelOrder = () => {
+    editOrderModal.hide();
+  };
+
+  const handleSaveOrderClick = () => {
+    setGroupOrder(tempGroupOrder);
+    editOrderModal.hide();
+
+    // Save to backend
+    if (backendUrl && account) {
+      useBookmarkStore.getState().saveGroupOrderToBackend(backendUrl, account);
+    }
+  };
+
   const categorySlug = "bookmarks";
   const SKELETON_COUNT = 10;
 
@@ -179,104 +335,49 @@ export function BookmarksCarousel({
   return (
     <>
       {/* Grouped Bookmarks Carousels */}
-      {Object.entries(groupedItems).map(([group, groupItems]) => {
-        const { icon, name } = parseGroupString(group);
-        return (
-          <div key={group}>
-            <SectionHeading
-              title={name}
-              customIcon={
-                <span className="w-6 h-6 flex items-center justify-center">
-                  <UserIcon icon={icon} className="w-full h-full" />
-                </span>
-              }
-              className="ml-4 md:ml-12 mt-2 -mb-5"
-            >
-              <div className="mr-4 md:mr-8">
-                <EditButton
-                  editing={editing}
-                  onEdit={setEditing}
-                  id={`edit-button-bookmark-${group}`}
-                />
-              </div>
-            </SectionHeading>
-            <div className="relative overflow-hidden carousel-container md:pb-4">
-              <div
-                id={`carousel-${group}`}
-                className="grid grid-flow-col auto-cols-max gap-4 pt-0 overflow-x-scroll scrollbar-none rounded-xl overflow-y-hidden md:pl-8 md:pr-8"
-                ref={(el) => {
-                  carouselRefs.current[group] = el;
-                }}
-                onWheel={handleWheel}
+      {sortedSections.map((section) => {
+        if (section.type === "grouped") {
+          const { icon, name } = parseGroupString(section.group || "");
+          return (
+            <div key={section.group || "bookmarks"}>
+              <SectionHeading
+                title={name}
+                customIcon={
+                  <span className="w-6 h-6 flex items-center justify-center">
+                    <UserIcon icon={icon} className="w-full h-full" />
+                  </span>
+                }
+                className="ml-4 md:ml-12 mt-2 -mb-5"
               >
-                <div className="md:w-12" />
-
-                {groupItems.map((media) => (
-                  <div
-                    key={media.id}
-                    style={{ userSelect: "none" }}
-                    onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
-                      e.preventDefault()
-                    }
-                    onTouchStart={handleTouchStart}
-                    onTouchEnd={handleTouchEnd}
-                    onMouseDown={handleMouseDown}
-                    onMouseUp={handleMouseUp}
-                    className="relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto"
-                  >
-                    <WatchedMediaCard
-                      key={media.id}
-                      media={media}
-                      onShowDetails={onShowDetails}
-                      closable={editing}
-                      onClose={() => removeBookmark(media.id)}
+                <div className="mr-4 md:mr-8 flex items-center gap-2">
+                  {editing && allGroups.length > 1 && (
+                    <EditButtonWithText
+                      editing={editing}
+                      onEdit={handleReorderClick}
+                      id="edit-group-order-button-carousel"
+                      text={t("home.bookmarks.groups.reorder.button")}
+                      secondaryText={t("home.bookmarks.groups.reorder.done")}
                     />
-                  </div>
-                ))}
+                  )}
+                  <EditButton
+                    editing={editing}
+                    onEdit={setEditing}
+                    id={`edit-button-bookmark-${section.group}`}
+                  />
+                </div>
+              </SectionHeading>
+              <div className="relative overflow-hidden carousel-container md:pb-4">
+                <div
+                  id={`carousel-${section.group}`}
+                  className="grid grid-flow-col auto-cols-max gap-4 pt-0 overflow-x-scroll scrollbar-none rounded-xl overflow-y-hidden md:pl-8 md:pr-8"
+                  ref={(el) => {
+                    carouselRefs.current[section.group || "bookmarks"] = el;
+                  }}
+                  onWheel={handleWheel}
+                >
+                  <div className="md:w-12" />
 
-                <div className="md:w-12" />
-              </div>
-
-              {!isMobile && (
-                <CarouselNavButtons
-                  categorySlug={group}
-                  carouselRefs={carouselRefs}
-                />
-              )}
-            </div>
-          </div>
-        );
-      })}
-
-      {/* Regular Bookmarks Carousel */}
-      {regularItems.length > 0 && (
-        <>
-          <SectionHeading
-            title={t("home.bookmarks.sectionTitle") || "Bookmarks"}
-            icon={Icons.BOOKMARK}
-            className="ml-4 md:ml-12 mt-2 -mb-5"
-          >
-            <div className="mr-4 md:mr-8">
-              <EditButton
-                editing={editing}
-                onEdit={setEditing}
-                id="edit-button-bookmark"
-              />
-            </div>
-          </SectionHeading>
-          <div className="relative overflow-hidden carousel-container md:pb-4">
-            <div
-              id={`carousel-${categorySlug}`}
-              className="grid grid-flow-col auto-cols-max gap-4 pt-0 overflow-x-scroll scrollbar-none rounded-xl overflow-y-hidden md:pl-8 md:pr-8"
-              ref={(el) => {
-                carouselRefs.current[categorySlug] = el;
-              }}
-              onWheel={handleWheel}
-            >
-              <div className="md:w-12" />
-
-              {regularItems.length > 0
-                ? regularItems.map((media) => (
+                  {section.items.map((media) => (
                     <div
                       key={media.id}
                       style={{ userSelect: "none" }}
@@ -297,25 +398,127 @@ export function BookmarksCarousel({
                         onClose={() => removeBookmark(media.id)}
                       />
                     </div>
-                  ))
-                : Array.from({ length: SKELETON_COUNT }).map(() => (
-                    <MediaCardSkeleton
-                      key={`skeleton-${categorySlug}-${Math.random().toString(36).substring(7)}`}
-                    />
                   ))}
 
-              <div className="md:w-12" />
-            </div>
+                  <div className="md:w-12" />
+                </div>
 
-            {!isMobile && (
-              <CarouselNavButtons
-                categorySlug={categorySlug}
-                carouselRefs={carouselRefs}
-              />
-            )}
+                {!isMobile && (
+                  <CarouselNavButtons
+                    categorySlug={section.group || "bookmarks"}
+                    carouselRefs={carouselRefs}
+                  />
+                )}
+              </div>
+            </div>
+          );
+        } // regular items
+        return (
+          <div key="regular-bookmarks">
+            <SectionHeading
+              title={t("home.bookmarks.sectionTitle") || "Bookmarks"}
+              icon={Icons.BOOKMARK}
+              className="ml-4 md:ml-12 mt-2 -mb-5"
+            >
+              <div className="mr-4 md:mr-8 flex items-center gap-2">
+                {editing && allGroups.length > 1 && (
+                  <EditButtonWithText
+                    editing={editing}
+                    onEdit={handleReorderClick}
+                    id="edit-group-order-button-carousel"
+                    text={t("home.bookmarks.groups.reorder.button")}
+                    secondaryText={t("home.bookmarks.groups.reorder.done")}
+                  />
+                )}
+                <EditButton
+                  editing={editing}
+                  onEdit={setEditing}
+                  id="edit-button-bookmark"
+                />
+              </div>
+            </SectionHeading>
+            <div className="relative overflow-hidden carousel-container md:pb-4">
+              <div
+                id={`carousel-${categorySlug}`}
+                className="grid grid-flow-col auto-cols-max gap-4 pt-0 overflow-x-scroll scrollbar-none rounded-xl overflow-y-hidden md:pl-8 md:pr-8"
+                ref={(el) => {
+                  carouselRefs.current[categorySlug] = el;
+                }}
+                onWheel={handleWheel}
+              >
+                <div className="md:w-12" />
+
+                {section.items.length > 0
+                  ? section.items.map((media) => (
+                      <div
+                        key={media.id}
+                        style={{ userSelect: "none" }}
+                        onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
+                          e.preventDefault()
+                        }
+                        onTouchStart={handleTouchStart}
+                        onTouchEnd={handleTouchEnd}
+                        onMouseDown={handleMouseDown}
+                        onMouseUp={handleMouseUp}
+                        className="relative mt-4 group cursor-pointer user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto"
+                      >
+                        <WatchedMediaCard
+                          key={media.id}
+                          media={media}
+                          onShowDetails={onShowDetails}
+                          closable={editing}
+                          onClose={() => removeBookmark(media.id)}
+                        />
+                      </div>
+                    ))
+                  : Array.from({ length: SKELETON_COUNT }).map(() => (
+                      <MediaCardSkeleton
+                        key={`skeleton-${categorySlug}-${Math.random().toString(36).substring(7)}`}
+                      />
+                    ))}
+
+                <div className="md:w-12" />
+              </div>
+
+              {!isMobile && (
+                <CarouselNavButtons
+                  categorySlug={categorySlug}
+                  carouselRefs={carouselRefs}
+                />
+              )}
+            </div>
           </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>
     </>
   );
 }

src/pages/parts/home/BookmarksPart.tsx

@@ -2,12 +2,19 @@ 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 { 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 { 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";
 import { useProgressStore } from "@/stores/progress";
 import { MediaItem } from "@/utils/mediaTypes";
@@ -35,9 +42,15 @@ export function BookmarksPart({
   const { t } = useTranslation();
   const progressItems = useProgressStore((s) => s.items);
   const bookmarks = useBookmarkStore((s) => s.bookmarks);
+  const groupOrder = useBookmarkStore((s) => s.groupOrder);
+  const setGroupOrder = useBookmarkStore((s) => s.setGroupOrder);
   const removeBookmark = useBookmarkStore((s) => s.removeBookmark);
   const [editing, setEditing] = useState(false);
   const [gridRef] = useAutoAnimate<HTMLDivElement>();
+  const editOrderModal = useModal("bookmark-edit-order");
+  const [tempGroupOrder, setTempGroupOrder] = useState<string[]>([]);
+  const backendUrl = useBackendUrl();
+  const account = useAuthStore((s) => s.account);
 
   const pressTimerRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -99,6 +112,109 @@ export function BookmarksPart({
     return { groupedItems: grouped, regularItems: regular };
   }, [items, bookmarks, progressItems]);
 
+  // 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 = 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";
+      group?: string;
+      items: MediaItem[];
+    }> = [];
+
+    const allSections = new Map<string, MediaItem[]>();
+
+    Object.entries(groupedItems).forEach(([group, groupItems]) => {
+      allSections.set(group, groupItems);
+    });
+
+    if (regularItems.length > 0) {
+      allSections.set("bookmarks", regularItems);
+    }
+
+    if (groupOrder.length === 0) {
+      allSections.forEach((sectionItems, group) => {
+        if (group === "bookmarks") {
+          sections.push({ type: "regular", items: sectionItems });
+        } else {
+          sections.push({ type: "grouped", group, items: sectionItems });
+        }
+      });
+    } else {
+      const orderMap = new Map(
+        groupOrder.map((group, index) => [group, index]),
+      );
+
+      Array.from(allSections.entries())
+        .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;
+        })
+        .forEach(([group, sectionItems]) => {
+          if (group === "bookmarks") {
+            sections.push({ type: "regular", items: sectionItems });
+          } else {
+            sections.push({ type: "grouped", group, items: sectionItems });
+          }
+        });
+    }
+
+    return sections;
+  }, [groupedItems, regularItems, groupOrder]);
+  // kill me
+
   useEffect(() => {
     onItemsChange(items.length > 0);
   }, [items, onItemsChange]);
@@ -135,31 +251,122 @@ export function BookmarksPart({
     }
   };
 
+  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();
+  };
+
+  const handleReorderClick = () => {
+    handleEditGroupOrder();
+    // Keep editing state active by setting it to true
+    setEditing(true);
+  };
+
+  const handleCancelOrder = () => {
+    editOrderModal.hide();
+  };
+
+  const handleSaveOrderClick = () => {
+    setGroupOrder(tempGroupOrder);
+    editOrderModal.hide();
+
+    // Save to backend
+    if (backendUrl && account) {
+      useBookmarkStore.getState().saveGroupOrderToBackend(backendUrl, account);
+    }
+  };
+
   if (items.length === 0) return null;
 
   return (
     <div className="relative">
       {/* Grouped Bookmarks */}
-      {Object.entries(groupedItems).map(([group, groupItems]) => {
-        const { icon, name } = parseGroupString(group);
+      {sortedSections.map((section) => {
+        if (section.type === "grouped") {
+          const { icon, name } = parseGroupString(section.group || "");
+          return (
+            <div key={section.group || "bookmarks"} className="mb-6">
+              <SectionHeading
+                title={name}
+                customIcon={
+                  <span className="w-6 h-6 flex items-center justify-center">
+                    <UserIcon icon={icon} className="w-full h-full" />
+                  </span>
+                }
+              >
+                <div className="flex items-center gap-2">
+                  {editing && allGroups.length > 1 && (
+                    <EditButtonWithText
+                      editing={editing}
+                      onEdit={handleReorderClick}
+                      id="edit-group-order-button"
+                      text={t("home.bookmarks.groups.reorder.button")}
+                      secondaryText={t("home.bookmarks.groups.reorder.done")}
+                    />
+                  )}
+                  <EditButton
+                    editing={editing}
+                    onEdit={setEditing}
+                    id={`edit-button-bookmark-${section.group}`}
+                  />
+                </div>
+              </SectionHeading>
+              <MediaGrid>
+                {section.items.map((v) => (
+                  <div
+                    key={v.id}
+                    style={{ userSelect: "none" }}
+                    onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
+                      e.preventDefault()
+                    }
+                    onTouchStart={handleTouchStart}
+                    onTouchEnd={handleTouchEnd}
+                    onMouseDown={handleMouseDown}
+                    onMouseUp={handleMouseUp}
+                  >
+                    <WatchedMediaCard
+                      media={v}
+                      closable={editing}
+                      onClose={() => removeBookmark(v.id)}
+                      onShowDetails={onShowDetails}
+                    />
+                  </div>
+                ))}
+              </MediaGrid>
+            </div>
+          );
+        } // regular items
         return (
-          <div key={group} className="mb-6">
+          <div key="regular-bookmarks" className="mb-6">
             <SectionHeading
-              title={name}
-              customIcon={
-                <span className="w-6 h-6 flex items-center justify-center">
-                  <UserIcon icon={icon} className="w-full h-full" />
-                </span>
-              }
+              title={t("home.bookmarks.sectionTitle")}
+              icon={Icons.BOOKMARK}
             >
-              <EditButton
-                editing={editing}
-                onEdit={setEditing}
-                id={`edit-button-bookmark-${group}`}
-              />
+              <div className="flex items-center gap-2">
+                {editing && allGroups.length > 1 && (
+                  <EditButtonWithText
+                    editing={editing}
+                    onEdit={handleReorderClick}
+                    id="edit-group-order-button"
+                    text={t("home.bookmarks.groups.reorder.button")}
+                    secondaryText={t("home.bookmarks.groups.reorder.done")}
+                  />
+                )}
+                <EditButton
+                  editing={editing}
+                  onEdit={setEditing}
+                  id="edit-button-bookmark"
+                />
+              </div>
             </SectionHeading>
-            <MediaGrid>
-              {groupItems.map((v) => (
+            <MediaGrid ref={gridRef}>
+              {section.items.map((v) => (
                 <div
                   key={v.id}
                   style={{ userSelect: "none" }}
@@ -184,43 +391,34 @@ export function BookmarksPart({
         );
       })}
 
-      {/* Regular Bookmarks */}
-      {regularItems.length > 0 && (
-        <div>
-          <SectionHeading
-            title={t("home.bookmarks.sectionTitle")}
-            icon={Icons.BOOKMARK}
-          >
-            <EditButton
-              editing={editing}
-              onEdit={setEditing}
-              id="edit-button-bookmark"
+      {/* 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);
+              }}
             />
-          </SectionHeading>
-          <MediaGrid ref={gridRef}>
-            {regularItems.map((v) => (
-              <div
-                key={v.id}
-                style={{ userSelect: "none" }}
-                onContextMenu={(e: React.MouseEvent<HTMLDivElement>) =>
-                  e.preventDefault()
-                }
-                onTouchStart={handleTouchStart}
-                onTouchEnd={handleTouchEnd}
-                onMouseDown={handleMouseDown}
-                onMouseUp={handleMouseUp}
-              >
-                <WatchedMediaCard
-                  media={v}
-                  closable={editing}
-                  onClose={() => removeBookmark(v.id)}
-                  onShowDetails={onShowDetails}
-                />
-              </div>
-            ))}
-          </MediaGrid>
-        </div>
-      )}
+          </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>
     </div>
   );
 }

src/stores/bookmarks/index.ts

@@ -2,6 +2,9 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 
+import { getGroupOrder, updateGroupOrder } from "@/backend/accounts/groupOrder";
+import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
+import { AccountWithToken, useAuthStore } from "@/stores/auth";
 import { PlayerMeta } from "@/stores/player/slices/source";
 
 export interface BookmarkMediaItem {
@@ -27,10 +30,20 @@ export interface BookmarkUpdateItem {
 export interface BookmarkStore {
   bookmarks: Record<string, BookmarkMediaItem>;
   updateQueue: BookmarkUpdateItem[];
+  groupOrder: string[];
   addBookmark(meta: PlayerMeta): void;
   addBookmarkWithGroups(meta: PlayerMeta, groups?: string[]): void;
   removeBookmark(id: string): void;
   replaceBookmarks(items: Record<string, BookmarkMediaItem>): void;
+  setGroupOrder(order: string[]): void;
+  saveGroupOrderToBackend(
+    backendUrl: string,
+    account: AccountWithToken,
+  ): Promise<void>;
+  loadGroupOrderFromBackend(
+    backendUrl: string,
+    account: AccountWithToken,
+  ): Promise<void>;
   clear(): void;
   clearUpdateQueue(): void;
   removeUpdateItem(id: string): void;
@@ -43,6 +56,7 @@ export const useBookmarkStore = create(
     immer<BookmarkStore>((set) => ({
       bookmarks: {},
       updateQueue: [],
+      groupOrder: [],
       removeBookmark(id) {
         set((s) => {
           updateId += 1;
@@ -121,6 +135,35 @@ export const useBookmarkStore = create(
           s.updateQueue = [...s.updateQueue.filter((v) => v.id !== id)];
         });
       },
+      setGroupOrder(order: string[]) {
+        set((s) => {
+          s.groupOrder = order;
+        });
+      },
+      async saveGroupOrderToBackend(
+        backendUrl: string,
+        account: AccountWithToken,
+      ) {
+        if (!account || !backendUrl) {
+          throw new Error("No authenticated account or backend URL");
+        }
+
+        const currentState = useBookmarkStore.getState();
+        await updateGroupOrder(backendUrl, account, currentState.groupOrder);
+      },
+      async loadGroupOrderFromBackend(
+        backendUrl: string,
+        account: AccountWithToken,
+      ) {
+        if (!account || !backendUrl) {
+          throw new Error("No authenticated account or backend URL");
+        }
+
+        const response = await getGroupOrder(backendUrl, account);
+        set((s) => {
+          s.groupOrder = response.groupOrder;
+        });
+      },
     })),
     {
       name: "__MW::bookmarks",