Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-01-11 20:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

move group reorder handlers to the modal itself

Browse source
This commit is contained in:
Pas 2025-11-06 11:11:58 -07:00
parent 9ce46dd3c7
commit ddcabc14de
6 changed files with 172 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/assets/locales/en.json
View file

@ -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",

99
src/components/overlays/EditGroupOrderModal.tsx
View file

@ -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;
onItemsChange: (newItems: Item[]) => void;
onSave: (newOrder: string[]) => 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>

53
src/pages/bookmarks/AllBookmarks.tsx
View file

@ -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 = () => {
setGroupOrder(tempGroupOrder);
const handleSaveOrderClick = (newOrder: string[]) => {
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>

53
src/pages/parts/home/BookmarksCarousel.tsx
View file

@ -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 = () => {
setGroupOrder(tempGroupOrder);
const handleSaveOrderClick = (newOrder: string[]) => {
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 */}

54
src/pages/parts/home/BookmarksPart.tsx
View file

@ -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 = () => {
setGroupOrder(tempGroupOrder);
const handleSaveOrderClick = (newOrder: string[]) => {
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 */}

73
src/pages/parts/settings/AppearancePart.tsx
View file

@ -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>
);
}